let的解构赋值_ES6学习之解构赋值及其原理

1、基本语法

1.1、数组

// 基础类型解构

let [a, b, c] = [1, 2, 3]

console.log(a, b, c) // 1, 2, 3

// 对象数组解构

let [a, b, c] = [{name: '1'}, {name: '2'}, {name: '3'}]

console.log(a, b, c) // {name: '1'}, {name: '2'}, {name: '3'}

// ...解构

let [head, ...tail] = [1, 2, 3, 4]

console.log(head, tail) // 1, [2, 3, 4]

// 嵌套解构

let [a, [b], d] = [1, [2, 3], 4]

console.log(a, b, d) // 1, 2, 4

// 解构不成功为undefined

let [a, b, c] = [1]

console.log(a, b, c) // 1, undefined, undefined

// 解构默认赋值

let [x = 1] = [undefined];// x=1;

let [x = 1] = [null];// x=null; // 数组成员严格等于undefined，默认值才会生效

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

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

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

let [x = y, y = 1] = []; // ReferenceError: y is not defined 因为x用y做默认值时，y还没有声明

1.2 对象

// 对象属性解构

let { f1, f2 } = { f1: 'test1', f2: 'test2' }

console.log(f1, f2) // test1, test2

// 可以不按照顺序，这是数组解构和对象解构的区别之一

let { f2, f1 } = { f1: 'test1', f2: 'test2' }

console.log(f1, f2) // test1, test2