ES6：变量的解构赋值

ES6

最近用express写项目的时候，使用到了ES6的一些新特性，其中一个是解构赋值，在解析url参数生成json数据使用解构赋值十分方便。特意看了《ES6标准入门》研究了一下，发现解构赋值不仅仅只有对象可以使用，数组、字符串、数值甚至布尔值都可以使用解构赋值~下面就是总结啦~

前置知识

为了解决ES5没有真正意义的局部变量问题，ES6引入了新的变量声明方法，那就是 let 和 const

相同点

• 没有变量提升，在未声明前调用会报错——ReferenceError
• 暂时性死区：只要在某一个区块内存在 let 或者 const 命令声明一个变量，这些变量就会形成一个封闭的作用域，只要在声明前被调用，就会报错——ReferenceError
• 不允许在同一个作用域重复声明
• 声明的变量不是全局对象(window/global)的属性

let a = 123;
if (true) {
    console.log(a); //ReferenceError
    let a = 1;
}

不同点

• let声明的是一个变量， const声明的是一个常量，不可以被修改，但是 const 命令对于引用类型的变量来说，只保证指向的地址不变，但是地址的数据依旧可以被修改，如果想将对象的属性冻结不被修改，可以使用 Object.freeze(需要被冻结的对象) 方法
• let 可以只声明不赋值， const声明时不赋值会报错

对象的解构赋值

基本格式

//先寻找同名属性，再赋值给对应的变量
let {foo, bar} = {foo: 1, bar: 2} //foo=1,bar=2
let {foo: fo, bar: ba} = {foo: 1, bar: 2} //fo=1,ba=2

默认值

默认值生效的条件是：对象的属性值===undefined

let {x: 3} = {x: undefined} //x=3
let {x: 3} = {x: null} //x=null

需要注意的点

//1. 解构不成功undefined
let {bar} = {foo: 1} //bar:undefined
//2. 注意不要重复声明
let foo;
let {foo} = {foo: 1} //SyntaxError:Duplicate declaration "foo"
//3. 注意不要将大括号写在行首
var x;
{x} = {x: 1}; //SyntaxError: syntax error
//可以将上面的写成({x} = {x: 1}) x=1
//4. 模式和变量的划分
//只要属性的值含有变量，属性就是模式 ———— 只有变量才会被赋值，模式不会被赋值
let {p: [x, {y}]} = {p: ["hello", {y: "world"}]}; //x=hello;y=world;p是模式
let {loc: {start: {line}}} = {loc: {start: {line: 1, column: 5}}}//loc和start是模式，line=1

数组的解构赋值

基本格式

let [a, [b, [c]]] = [1, [2, [3]]]; //a=1,b=2,c=3
//只要某种数据结构具有Iterator接口就可以数组方式解构赋值
let [x, y, z] = new Set(["a", "b", "c"]) //x="a",y="b",z="c"

默认值

let [x=1, y=x] = [1, 3]; //x=1,y=3

需要注意的点

//1. 解构不成功undefined
let [x=1, y] = [2]; //x=2,y=undefined
//2. 注意顺序
let [x=y, y=3] = [1, 3]; //默认值可以引用解构赋值的其他变量，但是其他变量必须已经声明

字符串、数值和布尔值的解构赋值

//1. 字符串转换成类似数组的对象
const [a,b,c,d,e] = "hello"; //a="h",b="e",c="l",d="l",e="o"
const {length: len} = "hello"; //len=5
//2. 数值和布尔值转为对象
const {toString: s1} = 123; //s1=Number.prototype.toString
const {toString: s2} = true; //s2=Boolean.prototype.toString

函数参数的解构赋值

//1. 函数参数使用解构赋值
var arr = [[1, 2], [3, 4]].map(([a, b]) => a + b) //arr=[3, 7]
//2. 函数参数使用默认值
function move({x=0, y=0} = {}) {
    return [x, y] 
}
move({x: 3, y:8}) //[3, 8]
var arr = [1, undefined, 3].map((x="yes") => x) //arr=[1, "yes", 3]

会遇到的问题和解构赋值的应用场景

圆括号问题

只有赋值语句的非模式部分可以使用圆括号，其他都不能使用圆括号
{p: (a)} = {p: 2} //a=2

应用场景

一言以蔽之：解构赋值就是赋值等号前后的模式一致，前面的变量就可以按照对应的模式获得后面的值
具体应用场景：
1. 交换变量值
2. 从函数返回多个值
3. 提取json数据（eg:解析url参数）
4. 函数参数的定义以及默认值
5. 遍历Map解构获取键名或者键值
6. 使用require输入模块的指定方法并接收