destructuring 解构赋值
解构也叫解构化赋值:解构过程中,具备赋值和变量声明两个功能。目的在于把等号左右长的相似的两个东西内部的值取出来
数组解构赋值
基本用法
// 可以从数组中提取值,按照对应位置,对变量赋值。
let [a, b, c] = [1, 2, 3];
// 模式匹配 解构
let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b // 2
c // 3
let [ , , a] = ["1", "2", "3"];
a // "3"
let [a, , c] = [1, 2, 3];
a // 1
c // 3
let [a, ...b] = [1, 2, 3, 4];
a // 1
b // [2, 3, 4]
let [a, b, ...c] = ['1'];
a // "1"
b // undefined 如果解构不成功,变量的值就等于undefined。
c // []
let [b] = [];
let [a, b] = [1];
// b的值都会等于undefined
let [a, [b], c] = [1, [2, 3], 4];
a // 1
b // 2
c // 4
// 属于不完全解构,但是可以成功
let [a, b, c] = new Set(['a', 'b', 'c']);
a // "a" 对于 Set 结构,也可以使用数组的解构赋值。
事实上只要数据结构具有 遍历器(Iterator) 接口,都可以采用数组形式的解构赋值。
数组可以使用默认值
let [a = true] = [];
a // true
let [a, b = 'b'] = ['a']; // a='a', b='b'
let [a, b = 'b'] = ['a', undefined]; // a='a', b='b'
对象解构赋值
基本用法
let { a, b } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let { b, a } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"
let { c } = { a: 'aaa', b: 'bbb' };
c // undefined
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
const { log } = console;
log('hello') // hello
变量名与属性名不一致,必须写成下面这样
let { a: c } = { a: 'aaa', b: 'bbb' };
c // "aaa"
默认值
let {a, b = 5} = {a: 1};
a // 1
b // 5
let {a: b = 3} = {a: 5};
b // 5
字符串解构赋值
基本用法
const [a, b, c, d, e, f, g] = 'wuyanzu';
/*
a: w,
b: u,
c: y,
d: a,
e: n,
f: z,
g: u
*/
const {length: len} = 'wuyanzu';
console.log(len) // 输出 7
解构赋值的原理是,如果等号右边的值不是对象或数组,就先将其转为对象。对于 undefined
和 null
这两个无法转成对象,所以没有办法解构,会报 // TypeError
函数解构赋值
基本用法
function sum([a, b]){
return a + b;
}
sum([1, 2]); // 3
sum
函数里面的参数是个数组,里面的 1,2 会被 a,b 给解构
默认值
function box(a = 0, b = 0) {
return (x, y);
}
box(3,8); // 3, 8
box(3); // 3, 0
box(); // [0, 0]