8.22 Web前端-JS部分

hello大家好，今天让我们来继续学习js部分的知识，今天我们来学习关于数据的相关知识。

1.数据的类型
在js中，变量没有数据类型之分，而js中的数据有数据类型之分，变量的数据类型取决于存储值的类型，下面我罗列一下js中数据的类型分类：

1.string 字符串；

2.number 数值型；

3.boolean 布尔类型它只会显示两个输出结果true或者false；

4.undefined 没有初始化；

5.null 空值，object 对象。

下面给大家举个例子，输出这些数据让计算机判断属于什么数据类型：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript">
      var age = 10;
      console.log(typeof age);
      console.log(age);
      age = "10";
      console.log(typeof age);
      console.log(age);
      age = true;
      console.log(typeof age);
      console.log(age);
      var number;
      console.log(typeof number);
      console.log(number);
      number = null;
      console.log(typeof number);
    </script>
  </body>
</html>

这里会在最终控制台输出显示我们输入的变量值是什么类型，输出结果如下：

可以看到使用type可以输出每个变量的类型。

2.数据类型之间的转换：

不同类型的数据之间是可以相互转换的，在这里我给大家介绍一下如何进行数据之间的转换，把一个数据的类型从一个转换成为另一个类型：

数据类型之间的转换一般在三个数据类型之间进行转化，分别是string，number和boolean之间进行转换，下面我来举几个例子，让大家看看如何惊醒数据类型之间的转换：

1.number转string

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var number = 10;
      number = true;
      console.log(typeof number);
      console.log("number:" + number);

      console.log("--------------String(number)-----------------");
      number = String(number);
      console.log(typeof number);
      console.log("number:" + number);
    </script>
  </body>
</html>

先定义一个number的变量，然后输出类型，然后我们修改这个变量的数据类型，最终输出结果如下：

2.boolean转number：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var str = "10";
      str = false;
      console.log(typeof str);
      console.log("str=" + str);

      console.log("------------Number(str)--------------");
      str = Number(str);
      console.log(typeof str);
      console.log("str=" + str);
    </script>
  </body>
</html>

最终输出结果如下：

这就是数据类型之间的转换方法。

3.数据类型转换的使用：

实际运用当中我们也会用到数据类型的转换，下面我给大家举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = window.prompt("请输入您的年龄");
      console.log(typeof age);
      console.log(age);
      age = age + 5;
      console.log(age);
    </script>
  </body>
</html>

我的本意是最终输出年龄加5，下面请看输出结果：

可以看到变成了225，这就是数据类型没对上，最终显示的结果是拼接，我们将中间的代码换一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var age = window.prompt("请输入您的年龄");
      console.log(typeof age);
      console.log(age);
      age = Number(age) + 5;
      console.log(age);
    </script>
  </body>
</html>

输出结果如下：

转为数字类型之后就可以正常进行加减了。

好了今天就先说到这，谢谢大家的观看。

8.22 Web前端-JS部分

猜你喜欢