一、 let const
let
1、除了es5的全局作用域和函数作用域外，es6出现块级作用域{}。
2、let声明的变量只在自己的块级作用域里有效，在外面使用报错（es6 强制开启严格模式“use strict”），和var不同。
3、let变量重复声明会报错。
const
1、 常量，数值和字符串不能直接修改，但是是对象的时候可以修改对象，因为只是存储的指针，指针不变，对象内容可以修改。
2、也有块级作用域的概念。
3、必须有初始值，否则会报错。
二、解构赋值
概念： 左右解构一一对应，进行赋值
分类：数组解构赋值、对象解构赋值、字符串结构赋值、布尔值解构赋值、函数参数解构赋值、数值结构赋值
1、*数组解构赋值：
基本使用：
{
let a,b,rest;
[a,b] = [1,2];
console.log(a);//1
console.log(b);//2
}
{
let a,b,rest;
[a,b,...rest] = [1,2,3,4,5,6];
console.log(a);//1
console.log(b);//2
console.log(rest);//3,4,5,6 数组中的三个点的作用是将剩余的值都付给rest数组
}
{
//基本使用
let a,b,c,rest;
[a,b,c=3] = [1,2];
console.log(a,b,c);//1,2,3
// [a,b,c] = [1,2];//没有一一对应的情况下，c为undefined，只声明了，没有赋值
// console.log(a,b,c);
}
{
//怎么用，什么场景下使用
//关于变量的交换
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);//2,1
/*如果不用es6的结构赋值，变量交换就需要用到一个中间变量*/
}
{
function f() {
return [1,2];
}
let a,b;
[a,b]=f();
console.log(a,b);//1,2
/*如果不用es6的结构赋值，需要使用两个变量去接收函数的返回值*/
}
{
function f(){
return [1,2,3,4,5];
}
let a,b,c;
[a,,,b]=f();//1,4
// [a,...b] = f();//1,[2,3,4,5]
/*当数组返回值不确定的情况下，
只关心第一个返回值，其余返回值不是很重要或者需要使用的时候去遍历*/
// [a,,...b] = f();//可以上面的方法混合使用1,[3,4,5]
console.log(a,b);
/*选择性的接受某几个变量，只关心自己想要的值*/
}
2、*对象解构赋值：
{
//对象解构
let a,b;
({a,b} = {a:1, b:2})
console.log(a);//1
console.log(b);//2
}
/*对象解构赋值*/
{
let o={p:42,q:true};
let {p,q}=o;
/*
* 根据key，value的方式去配的*/
console.log(p,q);//42,true
}
{
let {a=10,b=5}={a:3};//默认值
console.log(a,b);//3,10
}
//场景一
{
let metaData = {
title: 'abc',
test: [{
title: 'test',
desc: 'description'
}]
};
let {title:esTitle,test:[{title:cnTitle}]} = metaData;
console.log(esTitle, cnTitle);//abc, test
}
//混合使用
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
3、字符串解构赋值：
const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"
//类似数组的对象都有一个`length`属性，因此还可以对这个属性解构赋值
const {length} = 'hello';
console.log(length);//5
4、数值和布尔值解构赋值：
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象
let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true
5、函数参数解构赋值：
解构可以用在函数参数的传递过程中，这种使用方式更特别。当定义一个接受大量可选参数的JS函数时，通常会创建一个可选对象，将额外的参数定义为这个对象的属性
// options 上的属性表示附加参数
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// 设置 cookie 的代码
}
// 第三个参数映射到 options
setCookie("type", "js", {
secure: true,
expires: 60000
});
感谢：小火柴的蓝色理想
网友评论