JavaScript变量与数据类型

变量是计算机中用来存储数据的“容器”，用户输入的数据可以通过变量储存，它可以让计算机变得有记忆。变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

变量的使用

使用变量，首先声明变量、然后赋值变量、最后打印变量。

  <script>
    let age //1. 声明一个变量
    age = 18 // 2. 给变量一个值
    console.log(age) // 3. 控制台打印年龄

    let age = 18 // 或者声明的时候直接给值
  </script>

let (允许) 是声明关键字，后面跟一个变量名(标识)。

你可以直接赋值，也可以再起一行。let name = 后面如果是字符串，值是需要加"" 。

更新变量

let不允许多次声明一个变量，一旦赋值后，我们再起一行赋值变量即可。

  <script>
    let age
    age = 18
    age = 19
    console.log(age) 
  </script>

声明多个变量

let 声明多变量可以并排书写，用英文逗号隔开，打印也是同理。不提倡这么使用

  <script>
    let age = 18, uname = '迪丽热巴'
    console.log(age, uname);
  </script>

用户输入变量

用户输入存储到变量中，并打印。

  <script>
    let uname = prompt('请输入名字')
    document.write(uname)
  </script>

交换变量的值

可使用一个临时变量temp ，用来做中间存储。

  <script>
    let num1 = 10
    let num2 = 20
    let temp

    temp = num1
    num1 = num2
    num2 = temp
    document.write(num1, num2)
  </script>

计算机中存储数据的地方是内存，变量本质是程序在内存中申请的一块用来存放数据的小空间。

变量命名

规则

不能用JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、$组成，且数字不能开头

字母严格区分大小写，如 Age 和 age 是不同的变量

规范

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例：userName

let和var区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。let 为了解决var 的一些问题。

var 的问题

可以先使用在声明（不合理）

var 声明过的变量可以重复声明（不合理）

比如变量提升、全局变量、没有块级作用域等。

数组

数组（Array）是一种将一组数据存储在单个变量名下的优雅方式。数组编号是从0开始的。

在数组中，数据的编号也叫索引或下标。数组放任何类型数据都可以：数字和字符串。

  <script>
    let arr = [12, 18, 25, 35, 45, 60]
    let name = ['刘德华', '张学友', '黎明', '郭富城', '霍欣标']
    console.log(arr[1])
    console.log(name[0])
  </script>

18
刘德华

数组长度

数组中数据的个数，通过数组的length属性获得。

  <script>
    let arr = [12, 18, 25, 35, 45, 60]
    console.log(arr.length)
  </script>

常量

当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。常量不允许重新赋值，声明的时候必须赋值。

  <script>
    const PI = 3.14
    console.log(PI)
  </script>

数据类型

JS中基本数据类型分类两大类：基本数据类型和引用数据类型。

基本数据类型：

number（数字型）
string（字符串型）
boolean（布尔型）
undefined（未定义型）
null（空类型）

引用数据类型：

object（对象）

数字类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数。js是弱数据类型的语言，只有当我们赋值了，才知道是什么数据类型。

算术运算符

数字可以有很多操作，所以经常和算术运算符一起。

+（求和）-（求差）*（求积）/（求商）%（取模，取余数，开发中经常作为某个数字是否被整除）

如果取余数，前面数字比后面的小，则得出的结果就是前面的数字，如下面实例：

  <script>
    console.log(2 % 5)
  </script>

同时使用多个运算符编写程序时，会按着某种顺序先后执行：Javascript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用（）可以提升优先级
总结：先乘除后加减，有括号先算括号里面的

公式转换为js写法

计算圆的面积，对话框中输入圆的半径，算出圆的面积并显示到页面。

① 面积的数学公式：π * r²

② 换算成js的写法：变量 * r * r

  <script>
    let r = prompt('请输入圆的半径')
    let re = 3.14 * r * r
    document.write(re)
  </script>

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

  <script>
    console.log('霍欣标' - 2)
  </script>

NaN

字符串类型

通过单引号"、双引号""或反引号()包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

  <script>
    let str = '霍欣标'
    let str1 = "霍欣标"
    let str2 = `霍欣标`
    document.write(str2)
  </script>

注意事项：

无论单引号或是双引号必须成对使用

单引号和双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

必要时可以使用转义符\，输出单引号或双引号

  <script>
    console.log('霍欣标今天很"开心"')
    console.log("霍欣标今天很'开心'")
    console.log('霍欣标今天很\'开心\'');
  </script>

霍欣标今天很”开心”
霍欣标今天很’开心’
霍欣标今天很’开心’

字符串拼接

字符串还可以使用+运算符可以实现字符串的拼接。

  <script>
    console.log('霍欣标' + '同志')
    console.log(1 + 1);
  </script>

  <script>
    let age = prompt("请输入年龄：")
    document.write('霍欣标今年' + age + '岁了')
  </script>

模板字符串

模版字符串必须是反引号`` ，内容拼接变量时，用${}包住变量。

  <script>
    let age = prompt("请输入年龄：")
    document.write(`我今年${age}岁了`)
  </script>

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用false（假）。

  <script>
    console.log(3 > 4)
    
    let isCool = true
    console.log(isCool)
  </script>

未定义类型

未定义是比较特殊的类型，只有一个值 undefined。只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少直接为某个变量赋值为 undefined。NaN

  <script>
    let mum
    console.log(mum);
  </script>

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是 undefined，就判断用户是否有数据传递过来。

空类型

Javascript 中的 null仅仅是一个代表“无”、“空”或“值未知”的特殊值。就是赋值了，内容为空。

  <script>
    let obj = null
    console.log(obj);
  </script>

null 开发中的使用场景：

官方解释：把null 作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测数据类型

通过 typeof 关键字检测数据类型，

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

作运算符： typeof x （常用的写法）

函数形式：typeofx()
有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法

  <script>
    let num = 10
    console.log(typeof num)
    console.log(typeof (num))

    let str = '霍欣标'
    console.log(typeof str)

    let flag = true
    console.log(typeof flag)

    let un
    console.log(typeof un)

    let obj = null
    console.log(typeof obj)
  </script>

类型转换

Javascript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如- */ 等都会把数据转成数字类型
转换类型不明确，靠经验才能总结

小技巧

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

  <script>
    console.log(1 + 1)       // 数字类型
    console.log('霍欣标' + 1) // 字符串类型
    console.log(2 + 2)   // 22
    console.log(2 - '2') // 0
    console.log(+12)     // 12 自动转为数字类型
    console.log(+'123')  // 自动转为数字类型
  </script>

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

转换为数字型

转换数字类型严格区分大小

<body>
  <script>
    let str = '123'
    console.log(Number(str))

    let num = prompt('请输入年薪:')
    console.log(Number(num))
  </script>
</body>

如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字。

NaN也是number类型的数据，代表非数字。

parselnt 只获取整数和小数

只保留整数

  <script>
    console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12px'));
  </script>

12
12
12

parseFloat（数据）

可以保留小数

  <script>
    console.log(parseFloat('12px'))
    console.log(parseFloat('12.34px'))
    console.log(parseFloat('12.95px'));
  </script>

12
12.34
12.95

案例：用户订单信息

输入2个数，计算两者的和，打印到页面中。

  <script>
    let num1 = +prompt('请输入第一个数字：')
    let num2 = +prompt('请输入第二个数字：')
    alert(`两个数相加的和是：${num1 + num2}`)
  </script>

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

分析：

① 需要输入3个数据，所以需要3个变量来存储 price num address
② 需要计算总的价格 total
③ 页面打印生成表格，里面填充数据即可
④ 记得最好使用模板字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      border-collapse: collapse;
      /* 合并边框 */
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <script>
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收货地址：')

    let total = price * num

    document.write(`
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米青春版PLUS</td>
          <td>${price}</td>
          <td>${num}</td>
          <td>${total}元</td>
          <td>${address}</td>
        </tr>
      </table>
    `)
  </script>
</body>

</html>

数据常见的报错

uncaught SyntaxError: Missing initializer in const declaration

const声明中缺少初始化式

Uncaught ReferenceError: age is not defined

提示变量没有定义过
很可能变量没有声明和赋值
或者我们输出变量名和声明的变量不一致引起的（简单说写错变量名了）

Uncaught SyntaxError:Identifier’age’has already been declared

提示“age” 已经声明
很大概率是因为重复声明了一个变量。
注意let 或者const 不允许多次声明同一个变量

Uncaught TypeError: Assignment to constant variable.

常量被重新赋值了
常量不能被重新赋值

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/69.html