ES6学习笔记之const和let，变量的解构一、const和let一、变量的解构赋值

48 阅读 0 评论 32 点赞

我是靠谱客的博主美丽野狼，最近开发中收集的这篇文章主要介绍ES6学习笔记之const和let，变量的解构一、const和let一、变量的解构赋值，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、const和let

1 const
const用来定义常量，所谓的常量就是值一旦给定后就不变，一次定义终身不变的量

const a = 10;
a = 20;

上面的a就是一个常量，若给a重新赋值，你会发现报错了

注意：const通常会定义两种东西：
l 定义函数
l 定义一些特殊的字符串和常数
常量名一般都是全大写，如果由多个单词组成，用下划线隔开，暗示这个是常量

2 let

let用来定义块级作用域的变量，只要有“{}”包裹，就表示块级作用域。
注意：不是JSON，if语句体、函数体、while、for是块，for循环的()也是块

注意：我们通常会在for使用let，此时循环中自动加了闭包：

var arr = [];
for(let i = 0; i < 10;i++){
arr.push(function(){
console.log(i);
});
}
arr[4](); //4

let和for是绝配

总结：
l const用来定义常量，通常定义函数和常数
l let用来定义{}块级的作用域的变量，通常用来定义for循环的变量
常量是块级作用域，很像使用let，语句定义的变量，常量的值不能通过重新赋值来改变，并且不能重新声明。

一、变量的解构赋值

1数组解构
数组可以解构，当等号右侧是数组的时候，等于左侧可以将变量装入[]中接收，一一对应接收

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

上面代码表示，可以从数组中提取值，按照对应位置，给变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

如果数组较为复杂，此时左侧结构的那些变量，也要有相同的结构：

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

如果结构不同呢？

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

另外一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组，这种情况解构依然可以成功。

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

如果解构不成功，变量的值等于undefined

2对象解构
对象的结构和数组有个不同点，数组的元素是按顺序排列的，数组的取值由他的位置决定。
而对象的属性（键名）没有顺序，但是变量必须与属性同名，才能取到正确的值。

var {name,id,sex} = {"id":1001,"name":"张三","sex":"男"};
console.log(id);
//1001
console.log(name);
//张三
console.log(sex);
//男

上面的例子，等号左边的变量顺序与等号右边3个同名属性的顺序不一致，但是对取值完全没影响
如果变量没有对应的同名属性，导致取不到值，所以是undefined。

如果变量名和属性名不一致，必须写成下面这样

var {foo: baz} = {foo : 'aaa', bar : 'bbb'}
console.log(baz); //aaa
var {first :f ,last :l} = {first :'hello', last :'world'}
console.log(f); //hello
console.log(l) //world

这实际上说明，对象的解构赋值是上面形式的简写
上面代码中，foo是匹配模式，baz才是变量，真正被赋值的是变量baz，而不是模式foo。
也就说，对象的解构的内部机制，是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者。

3默认值
结构赋值允许指定默认值

var [a = 1] = []
var [b = 1] = [88]
console.log(a);//1
console.log(b);//88
var [c = 1] = [undefined]
var [d = 1] = [null]
console.log(c);//1
console.log(d);//null