ES6数组解构、对象解构、字符串解构、数值解构、布尔类型解构

目录

解构（Destructuring）

数组解构

不完全解构

集合解构

默认值

对象解构

重命名解构

嵌套解构

默认值

运算符…

字符串解构

数值解构

布尔类型解构

---

解构（Destructuring）

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring），解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

数组解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。等号左边的变量放到中括号内部，匹配右侧数组中的元素。

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

 

如果解构不成功，变量的值就等于`undefined`。

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

不完全解构

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

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

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

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
// 可以正常解构
let [a] = 'hello';
a // 'h'

上面的六个表达式都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。

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

原生具备 Iterator 接口的数据结构：Array、Map、Set、String、TypedArray、arguments、NodeList 等

集合解构

使用...扩展运算符接受剩余的数据。

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

let old = [1, 2, 3, 4]
let [...arr] = old
console.log(arr)  //新数组
console.log(arr === old)//false

默认值

解构赋值允许指定默认值。注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x, y = 'b'] = ['a'];   
// x='a', y='b’

默认值也可以为函数

function f() { console.log('aaa'); } 
let [x = f()] = [1]; 
// x = 1，该f函数不会执行，函数在x取到undefined的时候才会执行，并将返回值赋值给x
let [y = f] = [];
// y = f
let [z = f()] = [];
// z = undefined

 

对象解构

等号左边的变量放到大括号内部，匹配右侧数组中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { foo, bar } = { foo: "aaa", bar: "bbb" };	
// foo = "aaa"; bar = "bbb"

重命名解构

如果变量名与属性名不一致，必须写成下面这样进行重命名。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };  
// baz = "aaa"

这实际上说明，对象的解构赋值是下面形式的简写。

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

嵌套解构

let obj = { p: [ "Hello", { y: "World" } ] };   
let { p: [x, { y }] } = obj;  
// x = "Hello”; y = "World"

默认值

默认值生效的条件是，对象的属性值严格等于undefined

let {x: y = 3} = { x: 1 }; 
// y = 1
let {x: y = 3} = {}; 
// y = 3

运算符…

...用到左侧是聚合，...用到右侧就是展开

let obj = { name: 'zhangsan', age: 12 }
let { ...person } = obj
person.gender = "1";
console.log(person)//{ name: 'zhangsan', age: 12, gender: '1' }
console.log(person === obj)//false

let stu = {
  ...obj,
  gender: '1'
}
console.log(stu) //{ name: 'zhangsan', age: 12, gender: '1' }

let {gender="2",...zs} = stu;
console.log(gender,zs)//1 { name: 'zhangsan', age: 12 }

字符串解构

等号左边的变量如果放在中括号内进行的类似于数组解构，从字符串中获取指定字符；如果放在大括号内进行的类似于对象解构，从实例属性获方法中解构。

const [a, b, c, d, e] = 'hello';   
// a = h;b = e;c = l;d = l;e = o
let {length : len, toString } = 'hello';   
// len = 5
//将string字符串转成数组
let [...arr] = 'hello';
console.log(arr);

数值解构

等号左边的变量放在大括号中进行解构，可以获取到数值包装器构造函数原型中指定的方法。

let { valueOf } = 12;   
// valueOf = Number.prototype.valueOf

布尔类型解构

等号左边的变量放在大括号中进行解构，可以获取到布尔包装器构造函数原型中指定的方法。

let { valueOf } = true;   
// valueOf = Boolean.prototype.valueOf