let、const和解构赋值的相关概念

let、const和解构赋值

1、let命令
定义：类似于var,但所声明的变量只在其所在的代码块中生效
例：{
let a = 10;
let b =1;
}
console.log(a);//1
console.log(b);//ReferenceError
其var声明所在的变量无论在何处，都会被视为声明所在函数的顶部，这就是变量提升。
暂时性死区：
例：var temp=123;
if(true){
temp=“abc”;
let temp;
}
在这个代码块内，使用let声明变量之前使用，该变量都是不可用的，这个区域被称为暂时性死区。
不能重复声明：
例：function fn(){
let a=10;
let a=1;
}
function fn(){
let a=10;
var a=1;
}
function fn(){
var a=10;
let a=1;
}
function fn(){
var a=10;
var a=1;
}
以上四个函数在调用时，只有其第四个函数不会报错。即let不能重复声明变量。
即let与var的三个区别：
一、let只能作用于块级作用域（下面会提到几个作用域）
二、let会造成暂时性死区
三、let不能重复声明变量（在同一个作用域内）
作用域
在ES5里，只存在两个作用域——全局作用域和局部作用域（函数作用域）；但ES6里却新增了一个块级作用域。
ES5里出现的问题：
例：var tmp=new Date();
function f(){
console.log(tmp);
if(false){
var tmp=“hello”
}
}
f();//内层变量可能会覆盖外层变量
——————————
var s=“hello”
for(var i=0;i<s.length;i++){
console.log(s[i]);
}
console.log(i);//用来计数的循环变量泄露为全局变量
而在ES6里就没有这种可能，let定义的变量只会在它所在的块级作用域内有效
2、const命令
定义：声明一个只读的常量，一但声明，其值不能改变且必须立即初始化。其他用法和let一致。
ps:当把引用赋值给常量时，该常量所引用的对象是可以更改成员的，只是不能更改该常量保存的地址。
例：const foo={y:10};
foo.x=200;
console,log(foo.x);
foo={n:300}//ReferError
在顶层对象中，var与let、const最主要的一个区别是var可以作用在window对象中。而let、const不会。
3、解构赋值
定义：ES6 允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。
在解构赋值中有数组解构赋值、对象解构赋值、字符串解构复制、数值解构赋值、函数解构赋值、布尔值解构赋值，其中最主要的就是数组解构赋值和对象解构赋值。

1. 数组解构赋值
   例：let [a, b, c] = [1, 2 , 3];
   本质上，这种写法属于”模式匹配“，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
   例：let [foo,[[bar],baz]]=[1,[[2],3]];
   ps:若万一解构不成功，即没有对应的值赋给变量，那么就会等于undefined
   若没有变量接受的解构值会被忽略掉。
   如果两边不是相同的类型就会报错
   解构值允许指定默认值
   例：

let [foo =true]=[];
let [x,y =‘a’]=[‘b’];
let [m,n = ‘b’]=[‘a’,undefined];

ps:若一个数组成员不严格等于undefined,则其默认值不会生效
默认值可以引用解构赋值的其他变量，但该变量必须已经声明，否则会报错

let [x = 1 , y = x] = []; I I x=l ; y=l
let [x = 1, y = x] = [2]; II x=2 ; y=2
let [ x = 1 , y = x] = [ 1 , 2] ; II x=l; y=2
let [ x = y , y = l] = [ ] ; II ReferenceError

1. 对象结构赋值
   对象的解构赋值与数组不同，数组的元素是按次排列的，变量的取值是由其位置决定。
   对象的属性没有次序，变量必须与属性同名才能取到正确的值

let { foo , bar } = { foo :”aaa ”, bar :”bbb ” } ;
too // "aaa "
bar //“bbb”

如果变量名与属性名不一致，必须明确对应关系。

let obj = { first : ’ hello ’, last :’world ’ };
let { first: f , last: l } =obj;
f // ’ h ello ’
l // ’ world ’

• 对象的默认值也跟数组的默认值一样，需必须完全等同于undefined,默认值才会生效。其解构失败的值依然等于undefined.
• 对于一个已经声明的变量来说，其赋值需要用到圆括号把等式两边包装成一个表达式，才能生效。

var { x, y = 5} = { x: 1 } ;
x // 1
y // 5
var { x: y = 3} = {};
y // 3
var { x: y = 3} = { x: 5} ;
y // 5
//其解构失败的例子如下//
let {foo}={bar:“bbb”};//undefined
//将已经声明的变量运用到解构赋值//
let x;
( {x) = {x : 1));

• 且由于数组是一个特殊的对象，因此可以用数组的属性来赋值

let arr = [l, 2 , 3] ;
let { 0 : first , [arr . length - l] : last} = arr;
first // 1
last // 3

最后解构赋值的用途可以归为几大部分

• 一、交换变量的值
• 二、从函数返回多个值，示例代码如下：

function func(){
return [1,2,3];
}
let [a,b,c]=func();

• 三、函数参数的定义

function f([x,y,z]){
//函数体
}
f([1,2,3]);

• 四、提取JSON数据

const json=’{“id”:42,“status”:“OK”,“d”:[867,5309]}’;//从后台返回的一串字符串
let data=JSON.parse(json);
let{id,status,d:numbers}=data;
console.log(id,status,numbers);