变量，数据类型以及数据类型转换

憨憨小陈
123 阅读4分钟

变量

思考：用户输入的数据应该如何存储起来？

答：变量

1、定义

计算机中用来存储数据的“容器”，就是一个装数据的盒子

2、变量的基本使用

2.1创建变量（专业名称也叫声明变量）

2.2 变量赋值

2.3.使用变量

// 变量使用
      // 第一步：创建变量（专业名称也叫声明变量）let（关键字）username是变量名
      let userName;
      // 第二步变量赋值
      userName = '张三'
      // 第三步使用变量， document.write(这里面不需要加单引号)
      document.write(userName)

** 升级版创建变量同时赋值**

let userName = "张三",

** 并且变量可以更新，写法如下**

// 变量使用
      // 第一步：创建变量（专业名称也叫声明变量）let（关键字）username是变量名
      let userName;
      // 第二步变量赋值
      userName = '张三';
     更新变量
	 userName = "李四";
      // 第三步使用变量， document.write(这里面不需要加单引号)
      document.write(userName);

注意点：let不允许多次声明一个变量。

** 创建多个变量，写法如下：**

	let userName = "张三",
        age = 18,
       sex = '男';
      document.write(userName + age + sex );

小试牛刀案例

** 思考：现在需求如下**

有2个变量： num1 里面放的是 10， num2 里面放的是20 最后变为 num1 里面放的是 20 ， num2 里面放的是 10

代码如下

<body>
    <script>
      // 第一步创建三个变量同时赋值，num1，num2.temp(临时变量)。注意点：创建多个变量要用逗号隔开
      let num1 = 10,
       num2 = 20,
       temp;
      // 第二步更新变量，交换变量
      temp = num1;
      num1 = num2;
      num2 = temp;
      // 第三步使用变量
      console.log(num1);
      console.log(num2);
    </script>
  </body>

3、变量的本质

变量的本质就是内存里的一块空间，用来存储数据的

4、变量命名规则与规范

规则

  1. 内置的关键字不能起，比如：let，var，if，for
  2. 不可以数字开头，只能用下划线，字母，数字，&组成
  3. 字母要区分大小写，比如Age 和age是不同的变量

规范

  1. 要起有语义化的变量名
  2. 如果变量单词比较多，建议遵守小驼峰命名法

5、常见错误

1.提示 age变量没有定义过

image.png

2.提示 “age”已经声明

image.png

3.提示 参数少了 )

image.png

4.字符串相加

image.png

数据类型

思考一下：为什么要做数据类型区分呢？

答 1. 更加充分和高效的利用内存

  1. 也更加方便程序员的使用数据

一个变量必然有它的类型，它的类型也决定了这个变量占多少内存，以及内存中的数据如何解释。而数据类型本身不占据内存。

1、分类

基本数据类型

1.数字类型（number），特点就是数字，整数，小数，负数

 let num1 = 10;

2.字符串类型（string） 特点带有单或者双或者反引号 ''，外单内双，外双内单，

let userName = "张三";

** 注意点不可以自已嵌套自已**

因为字符串用+号代表拼接，这样书写起来比较麻烦所以引出了模版字符串

  <body>
    <script>
      let userName = "张三";
      age = 18;
      // 模版字符串输出要使用反引号和${} 搭配着一起
      document.write(`大家好,我叫${userName},今年${age}岁了`);
    </script>
  </body>

模版字符串输出要使用反引号和${} 搭配着一起

3.布尔类型（Boolean），特点就是只有两个值true和false

 let isRain = true;

4.未定义类型（undefined），特点就是只声明了变量，但不赋值就直接使用了

let sex;
      console.log(sex);

注意点:　当我们发现这个数据是 undefined 提醒我们是不是忘记给某个变量赋值 矫正我们写代码

<body>
    <script>
      // 未定义
      // 空 空变量 空箱子
      // let age=20;
      // // 当我们发现这个数据是 undefined 提醒我们是不是忘记给某个变量赋值 矫正我们写代码
      // console.log(age + 10);
      // console.log(10);
      // console.log(age);
      let age; // 声明了但是没有赋值 
      console.log(age); // 不会报错 只是挺行一些我们 当前的数据 是未定义 空 undefinded
      // console.log(aaabb); // 直接使用了没有声明过的变量  报错！！ 
    </script>
  </body>

5.空类型（null），特点就是声明了变量，赋值为空的

 let address = null;
      console.log address);

null 和 undefined 区别：

  • undefined 表示没有赋值
  • null 表示赋值了，但是内容为空

检验数据类型

检验数据类型，加上typeof ;

<body>
    <script>
      let age = 18,
        useName = "张三",
        isAttendclass = true,
        sex,
        money = null;
      console.log(typeof age);
      console.log(typeof useName);
      console.log(typeof isAttendclass);
      console.log(typeof sex);
      console.log(typeof money);
    </script>
  </body>

引用数据类型

后续会补充更新，敬请期待！

2、数据类型转换

思考一下：为什么我们要数据类型转换呢？

答：JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。 坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

此时需要转换变量的数据类型。 把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

  1. +号两边只要有一个字符串，另外一个都会转成字符串
  2. 除了+号的算术运算符，- * /都会把另外一个转成数字类型
  3. 可以在字符串前面加上+号，就会转成数字类型了
  4. 可以在数字类型后面加上+ ""就会转成字符串类型了
<body>
    <script>
      let num1 = "1";
      num2 = 1 + "";
      num3 = +"22";
      console.log(num1 + num2);
      console.log(num1 - num2);
      console.log(num3 - num2);
      console.log(typeof num2);
    </script>
  </body>

image.png

显示转换

  1. 在前面加上Number 就可以转化为数字类型，注意点要给变量加上（）
  2. 保留整数parseInt
  3. 可以保留小数parseFloat
  4. 在前面加上String 就可以转化为字符串类型;或者加上toString
<body>
    <script>
      // 显式转换
      let num4 = "9.9";
      console.log(typeof Number(num4));
      console.log(parseInt(num4));
      console.log(parseFloat(num4));
      let num5 = 9.9;
      // console.log(typeof String(num5));
      console.log( typeof toString(num5));
    </script>
  </body>

image.png

小试牛刀案例

思考：现在需求如下

用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

效果图 c0c061baa2b7542dfc49dab0fbd016e.png

   <title>订单付款确认综合案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        margin: 50px auto;
        /* 细边框 */
        border-collapse: collapse;
      }
      caption {
        margin-bottom: 10px;
      }
      body {
        text-align: center;
        line-height: 30px;
      }
      
    </style>
  </head>
  <body>
    
      <script>
    let commodityName = prompt("商品名称"),
        commodityPrices = prompt("商品价格"),
        commodityNumber = prompt("商品数量"),
        totalPrices = prompt("总价"),
        profile = prompt("收货地址");
        document.write(`
        <table border="1">
        <caption><h2>订单付款确认页面</h2></caption>
        <tr>
         <th>商品名称</th>
         <th>商品价格</th>
         <th>商品数量</th>
         <th>总价</th>
         <th>收货地址</th>
        </tr> 
        <tr>
         <td>${commodityName}</td>
         <td>${commodityPrices} 元</td>
         <td>${commodityNumber}</td>
         <td>${totalPrices} 元</td>
         <td>${profile}</td>
        </tr>
    </table>
        `)
      </script>
  </body>
avatar
文章
阅读
粉丝