ES6学习3章：变量的解构赋值

写在最前

变量解构的用途

# 交换变量的值var x = 10, y = 1;[x, y] = [y, x]console.log(x,y)  // 1,10# 从函数返回多个值function example(){    return [1,2,3]}var [a,b,c]=example();# 函数参数的定义function f({w,y,z}){...}f({x:3,y:4,z:1})# 提取json数据var jsonData = {    id:42,    status:'OK',    data:[867,5309]}let {id,status,data:number}=jsonData;# 遍历Map结构

• 任何部署了Iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便

一、数组的解构

1.1 基本用法

• 本质上，变量解析的写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

var [a,b,c]=[1,2,3]console.log(a) //1let [head,...tail]=[1,2,3,4]console.log(tail) // [2,3,4]# 解构不完全时let [x,y,...z]=['a']x // "a"y // undefinedz // []# 解构不成功时let [foo]=[]  foo //undefined# 解构默认值let [foo=1]=[2]foo // 2# 解构默认值生效的条件是 等号右边的值 严格等于undefinedlet [foo = true] = []console.log(foo) // truelet [f1 = 1] = [undefined]console.log(f1) // 1let [f2=2]=[null]console.log(f2) //null  默认值不生效let [f3 = 3] = ['']console.log(f3)  // '' 默认值不生效

• 只要某种数据具有Iterator接口，都可以采用数组形式的解构赋值

二、对象的解构赋值

1、基本用法

• 对象的解构需要相同的key才能对应赋值
• 对象的解构赋值与数组的解构赋值不同。数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
• 对象的解构赋值内部机制，是先找到同名的属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者

# 基本使用var {baz,foo}={foo:'aaa',bar:'bbb'};foo // aaabaz // undefined# 赋值机制var {foo:baz}={foo:'aaa'}baz // aaa

三、基本数据类型的解构赋值

• 原理：字符串被转换为一个类似数组的对象。在进行解构赋值时，如果“=”右侧不是对象或者数组，会先把其转为对象，再尝试解构

# 字符串解构const [a,b,c,d,e] = 'hello';a // h# 数组和布尔值解构let {toString:s}=123;  // 数值有toString方法，所以能解构s===Number.prototype.toString

• undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

四、函数参数的解构赋值

# 基本使用function add([x, y]) {    return x + y;}console.log(add([1, 3])) // 传入数组参数时，add函数会对参数对应解构# 默认值function add({x=0,y=0}={}){    return [x,y]}console.log(add({x:3,y:8}))

五、变量解构的用途