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) //1

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

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

二、对象的解构赋值

1、基本用法

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

# 基本使用
var {baz,foo}={foo:'aaa',bar:'bbb'};
foo // aaa
baz // 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}))

五、变量解构的用途