ES6浅析之let，const与解构赋值

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、ES6介绍

•      1.ECMAScript和JavaScript的关系

•       2.ES6的兼容性

• 二.ES6新增属性和方法

  • 1.let和const

  • 2.1 let命令

  • 2.解构赋值

• 总结

---

一、ES6是什么？

ECMAScript（简称：ES6）是Javacsript语言的下一代标准，已经在2015年正式发布，它的目标，是使JavaScript语言可以来编写复杂的大型的应用程序，成为企业开发语言：

1.ECMAScript和JavaScript的关系

      前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还是JScript和                        ActionScript）；

 2.ES6的兼容性

• 主流浏览器的最新版本基本都是支持Es6的；

• IE老版本等不支持的浏览器，可以使用Babel转码

二、ES6新增属性和方法

1 let命令 与const命令

    1.1 let命令介绍

        在ES6新增了let命令，用来生名变量的，它的作用类似于var，但是所声明的变量，只有                  在let命令所在的代码块内生效 。

{
    var a = 10;
    var b = 10;
}
console.log(a);//10
console.log(b);//b is not defined

1.2 let命令的特性

（ 1 ）let不允许重复声明。

let name = '张三';
let name = '李四';//就会报错Identifier 'name'has already been declarcd

   使用了let声明了name变量，但是第二个会报错，let不允许重复声明。

{
   let name = '张三';
   console.log(name);
}
let name = '李四';
console.log(name);

   let 虽然不允许重复声明变量，但是仅限于let的作用域内，超过这个作用域，还是可以再次声明      该变量的。

（ 2 ）let不存在变量提升

       var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined，这种现象多多         少少有点奇怪，因为代码是从上往下执行的，按照这个逻辑，变量在未声明之前是不可用               的。在新增的let命令纠正了这个问题。

console.log(a);//Cannot access 'a' before initializationat
let a = 10;

    在上面代码中，变量a使用了变量声明，不会发生变量提升，这表示声明它之前，变量a是不存        在的，这个时候如果用变量a，就会抛出一个错误。

（ 3 ）暂时性死区

          只要作用域内存在let，它所生明的变量或常量就自动绑定这个区域，不再受外部作用域的影            响。

let a = 1;
function fn(){
    console.log(a);//1
}
fn();
//函数内部没有a的声明，就往函数外部找，打印了1

   只要作用域内出现了同名的let，那么就会去找这个变量（向前找），如果找不到也不会跳去外       部找，只会直接报错。

1.3 const命令基本用法

  （1） const声明一个只读的常量。一旦声明，常量的值就不能改变。

const a = 18;
a= 20; // Uncaught TypeError: Assignment to constant variable.
console.log(a);

（2）const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留           到以后赋值。

（3）cosnt的作用域与let命令相同:只在声明所在的块级作用域内生效;

1.4 const命令特性

（ 1 ）const命令和let一样不允许重复声明，否则直接在代码编辑器中报错（就不举例说明了）

（ 2 ）const不存在变量提升（就不举例说明了）

（ 3 ）暂时性死区（就不举例说明了）

          具体例子可以参考上文let的例子

1.5 const实质

         const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数             据不得改动。对于简单类型的数推(数值型、字符串型、布尔型、undefined、nul)值就保存             在变量指向的那个内存地址，因此等同于常量。对于引用数据类型的数据(对象、数组)，变            量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的          (总是指向一个固定的地址)，至于它指向的数据结构是不是可变的，就完全不能控制了。因            此，将一个对象声明为一个常量必须非常小心。

2.解构赋值

2.1 数组的结构赋值

    2.1.1原理

       ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构；

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

    上面代码表示，可以从数组中提取之，按照对应位置，对变量赋值。

     模式匹配[ ] = [ ] 。

     索引值相同的完成赋值;

2.1.2 数组解构赋值的默认值

( 1 )  默认值的基本用法

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

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

( 2 ) 默认表达式

const fn = function() {
	return 20;
}
const [a = fn()] = [1];
const [b = fn()] = [];
console.log(a, b); // 1， 20

2.1.3数组解构赋值的应用

( 1 ) 函数参数的解构赋值

const fn = function([x= 0,y = 0]){
    return x + y;
}
console.log(fn([5,6]));

( 2 ) 交换变量的值

let x = 1;
let y = 2;
//ES5的写法
let z = x;
x = y;
y = z;
//解构赋值
[x,y] = [y,x];
console.log(x);
console.log(y);

( 3 ) 跳过某项值进行解构

      在解构数组时，可以忽略不需要解构的值，可以使用逗号对解构的数组进行忽略操作，这样就        不需要声明更多的变量去存值了

const arr = [1,2,3,4,5];
//const[a,b,c,d,e] = arr;
//const[e,d,c,b,a] = arr;
const[,,,,a] = arr;
//console.log(a,b,c,d,e);
console.log(a);//5

( 4 ) 剩余参数中的使用

const arr = [1,2,3,4,5];
const[a,b,...c] = arr;//利用了后面要学的rest运算符
console.log(a);
console.log(b);
console.log(c);

2.2 对象的解构赋值

    2.2.1原理

        对象的解构基本和数组类似，对象解构的变量是在{}中定义的，对象没有索引，但对象有更            明确的键，更多键可以很方便的去对象中取值。

​
let obj = {
    name:'jack',
    age:20
}
let {name,age} = obj;
console.log(name.age);

​

在{}中声明name和age用逗号隔开即可得到目标对象上的值，完成声明赋值操作。

匹配模式{ } = { };

属性名相同的完成赋值；

2.2.2 对象解构赋值的默认值

    对象的属性值严格等于undefined时，对应的默认值才会生效；

    如果默认值是表达式，默认表达式是惰性求值.

const{a = 10, b = 20} = {a:3};
console.log(a,b);//3,20

const{a = 10, b = 20} = {a:3,b:undefined};
console.log(a,b);//3,20

const{a = 10, b = 20} = {a:3,b:null};
console.log(a,b);//3,null

const{a = 10, b = 20} = {a:3,b:4,c:5};
console.log(a,b);//3,4

2.2.3 重命名属性

   在对象解构出来的变量不是我们想要的变量名，我们可以对其进行重命名

const obj = {
    name:'tom',
    age:22
}
const{name:a,age:b} = obj;
console.log(a,b);//tom,22

2.2.4对象解构赋值的应用

（ 1 ）对象作为函数参数

//以前
const fn = function(user){
    console.log(user,name);
    console.log(user,age);
}
fn({
	name : 'Tom' ,
	age: 20
})
//现在
const fn = function( {name= '张三', age=20}) {
    console .log(name, age) ;
}
fn( {name: 'Jack' , age: 18}) ;
fn({});

（ 2 ）复杂的嵌套

const obj = {
	x: 1,
	y: [2, 3, 4],
	z:{
		a: 5,
		b: 6
   }
}
const {x, y, z} = obj;
console.log(x, y, z); // 1, [2,3,4], {a:5,b:6}

const {y: y, y: [, y2]} = obj;
console.log(y2); // 3;
console.log(y); // [2,3,4]

const {y, y: [, y2], z, z: {b}} = obj; // (b) = {a:5, b:6}
console.log(y2); // 3
console.log(y); // [2,3,4]
console.log(z); // {a:5, b:6}
console.log(b); // 6

（ 3 ）剩余参数中的使用

const{a,b,...c,e}={a:1,b:2,c:3,d:4,e:5,f:6}
console.log(a);
console.log(b);
console.log(c)

2.3 字符串的解构赋值

let str ='abc';
const {0: a, 1: b, length}= str;
console.log(a, b, length);

2.4 总结

• 解构赋值一般针对对象和数组，如果结构对象是undefined或null都会报错;

• 默认值生效的条件是，只有当解构的对象的值是严格模式下的undefined的情况下，默认值才会生效

• 可以不借助中间变量来交换两个变量的值;

• 在解构复杂的数据结构时，注意声明的对象和目标对象有着相同的解构形式，才能去解构目标对象；

---

总结

这些是我总结的部分内容，如果有不到位的地方请各位大佬指正。