ES6——ES6语法知识之 let 和 const 的区别以及解构赋值

文章目录

• 前言
• 一、初识ES6
  • 1.什么是ES6?
  • 2.为什么使用ES6?
• 二、let   和 const
  • 1. let  变量
  • 2. const 常量
• 三、解构赋值
  • 1. 数组模型的解构（Array)
  • 2.  对象模型的解构 (Object)
• 总结

---

一、初识ES6

1.什么是ES6?

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

2.为什么使用ES6?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

- 变量提升特性增加了程序运行时的不可预测性

- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

---

二、let   和 const

1. let  变量

1.1   let声明的变量只在所处于的块级有效。

案例一：分析如下会使用 var 和 let 声明的变量可发现在使用 var 关键字和 let 关键字声明的变量作用域是完全不同的。

var b=2;//全局变量
if(1==1){
			let a=1;
			console.log("块内a值是：",a);//1
			console.log("块内b值是：",b);//2
}
console.log("a值是：",a);//ReferenceError: a is not defined.
console.log("b值是：",b);//2

案例二：For 循环中使用 let 变量 var 声明的不同点

for(let i=1;i<=10;i++){
	console.log(i);     //运行结果：正常打印
}
console.log(i);         //运行结果： ReferenceError: i is not defined

1.2  let 不存在变量提升

案例三：var 变量 可以在变量声明前使用，多少有点奇怪，为了纠正这个现象，let改变了这个语法。

如下案例中： var声明的变量会在作用域内变量提升，但赋值不会提升，所以是undefined。而let的声明的变量不会提升，所以抛出语法错误。

console.log(a);     //运行结果: undefined
var a=1;
		
console.log(b);
let b=2;            //运行结果: ReferenceError: a is not defined.

1.3  暂时性死区

如下案例——  提前打印也就是提前使用了变量 PI  ，运行结果却是报错，这是为什么呢？其实这里也是因为使用不同的关键字声明变量的原因，例如，var 关键字具有变量提前声明的特性，而let 没有，因此提前使用就会产生暂时性死区——(也就是说使用声明的变量要先声明后使用)

var PI = "a";
if(true){
  console.log(PI);  // Cannot access 'PI' before initialization
  let PI = "3.1415926";
}

1.4  let 不允许重复声明

        let num = 10;
        let num = 5;
        console.log(num);   //错误原因： 不可重复声明

2、 const 常量

• Const 具有let的所有特性
• 声明常量，常量就是值（内存地址）不能变化的量。
• 声明常量多用大写

3.  let、const、var 的区别

- 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

- 使用 let，const  的声明的变量不属于顶层对象，返回undefined

 var num =10;     //顶级对象：在num上增加了顶层属性，也就是说这里的num 因为使用了var声明，因而在全局中都可使用，叫做顶级属性

    

---

三、解构赋值

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1. 数组模型的解构（Array)

1.1  基本类型的解构

        let [a,b,c] =[1,2,3];
        console.log(a);    //运行结果 1
        console.log(b);    //运行结果 2
        console.log(c);    //运行结果 3

1.2  多维数组可嵌套的解构

        let [a,[[b],c]] = [1,[[2],4]];
        console.log(a);   //  1
        console.log(b);   //   2
        console.log(c);    //  4
        

1.3  可忽略的解构

        let [a,,,d] =[1,2,3,4];
        console.log(d);   //4

1.4  不完全解构

    let [a=1,b] = [];
    console.log(a);   //1
    console.log(b);   //undefined

1.5   解构默认值

  let [a=2] = [undefined];
    console.log(a);   //  2

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

• a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
• a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
• a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

2.  对象模型的解构 (Object)

2.1  可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

2.2  不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

2.3   剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

2.4  结构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

总结

以上就是今日所要分享的内容，有关ES6 的知识点还有很多，有空还会和大家继续分享。

最后，依旧诚挚祝福屏幕前的你健康幸福、平安喜乐。