ES6之全新的声明及数据赋值方式

一、新的变量声明关键字let与const

• 作用域

  • 全局作⽤域
  • 局部作用域
  • 块级作用域

• let

  • ⽤法：声明⼀个变量
  • 特点：
    • 只在声明的代码块内有效
    • 在同⼀作⽤域内不允许重复声明
    • 没有变量提升
    • 暂时性死区（在代码块内，使用let和const命令声明变量之前，该变量都是不可用的，语法上被称为暂时性死区）

• const

  • ⽤法：声明⼀个只读的变量(可理解为常量)

  • 特点：同let命令

  • 注意事项：

    • 变量声明的同时必须⽴即赋值
    • 如声明的是简单类型的数据，变量的值不可改变

  • 实质：保证变量指向的内存地址所保存的数据不允许改动。

简单类型如字符串、数字和布尔值，值就保存在变量指向的内存地址。⽽复杂类型的数据如对象、数组和函数，变量指向的内存地址，实际上是保存了指向实际数据的指针。所以 const 只能保证指针是固定的，⾄于指针指向的数据结构变不变就⽆法控制了,所以使⽤ const 声明复杂类型对象时要慎重。

二、探秘JS的第七种数据类型Symbol

• ES6之前JavaScript的数据类型

  • Number(数字)
  • String(字符串)
  • Boolean(布尔值)
  • Object(对象)
  • Null(空对象指针)
  • Undefined(声明的变量未被初始化时)

• 引⼊的背景

  • 对象的属性名容易产⽣命名冲突，为保证键名的唯⼀性，故es6引⼊Symbol这种新的原始数据类型，确保创建的每个变量都是独⼀⽆⼆的。

• 特点

  • Symbol类型的数据是类似字符串的数据类型，由于Symbol函数返回的值是原始类型的数据，不是对象，故Symbol函数前不能使⽤new命令，否则会报错。
  • 可选参数。由于控制台输出不同的Symbol变量时都是Symbol()，故为了区分，可在创建
    Symbol变量时传⼊参数进⾏区分。如：

    // 这⾥的a1，a2的作⽤可以说是为了备注，以⾄于我们输出Symbol变量时能够区分不同的变
    量。
    let a1 = Symbol('a1')
    let a2 = Symbol('a2')
    

• 用法

  • 定义对象的唯⼀属性名

    // 在对象⾥⽤Symbol作为属性名的三种写法
    let name = Symbol()
    // 第⼀种⽅式: 借助数组读取name变量，此时不能⽤点运算符,点运算符默认后⾯的参数是字符串
    let a = {}
    a[name] = 'azi'
    // 第⼆种⽅式: 构造时声明
    let a = {
     [name]: 'azi'
    }
    // 第三种 Object.defineProperty
    let a = {}
    Object.defineProperty(a, name, { value: 'azi' });
    

  • 定义常量

    // 定义字符串常量
    const name = Symbol("azi");
    

三、不可不知的解构赋值

• 介绍

  解构赋值可以理解为赋值操作的语法糖，它是针对数组或者对象进⾏模式匹配，然后对其中的变量进⾏赋值。代码书写上⾔简意赅，语义明确，也⽅便了对象数据的读取操作。

• 实质

  ES6中只要某种数据有Iterator接⼝（也就是可以循环迭代），都可以进⾏数组的解构赋值

• 使⽤场景

  • 数组解构

  {
    let a, b, c
    [a, b, c] = [1, 2]
    console.log(a, b, c) //1,2,undefined
  }
  {
    let a, b, c
    [a, b, c = 6] = [1, 2]
    console.log(a, b, c) //1,2,6
  }
  {
    let a, other
    [a, ...other] = [1, 2, 3]
    console.log(a, other) //1,[2,3]
  }
  

  • 对象解构

  {
    let a, b;
    ({ a, b } = { a: 2, b: 3 });
    console.log(a, b);
  }
  
  {
    let num, count;
    ({ a: num, b: count } = { a: 4, b: 6 });
    console.log(num, count);
  }
  

  • 字符串解构
  • 布尔值解构
  • 函数参数解构

  {
    function fn() {
      return {
        name: "Azi",
        lastName: [
          {
            name: "xiaoAzi",
          },
        ],
      };
    }
    let b = fn();
    let {
      name: person,
      lastName: [{ name: otherPerson }],
    } = b;
    console.log(person, otherPerson);
  }
  

  • 数值解构