JavaScript(ES6):变量的解构赋值
解构赋值定义:
允许按照一定模式从数组或对象中提取值,然后对变量进行赋值。
数组的解构赋值
注:数组的元素要一次排序的,变量的值由他的位置决定。
基本用法
// ES6 解构赋值 let [a, b, c] = [1, 2, 3]; // 等于 let a = 1; let b = 2; let c = 3;
如果结构不成功,变量的值就是undefined。
let [x, y, z] = [1, 2]; // x = 1; // y = 2; // z = undefined; 结构没有成功,值就是undefined;
如果等号右边不是数组(不具有Iterator),是会报错的。比如下面语句就会报错:
let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {};
事实上只要某种数据结构具有 Iterator 接口,都可以使用数组形式的解构赋值。
let [x, y, z, a] = new Set([1, 2, 3]); x // 1 y // 2 z // 3 a // undefined
指定默认值
let [a, b = 2] = [1]; // a=1,b=2。b=2为默认值 let [a = 1, b = a] = [2]; //a=2,b=2。a=1为默认值,后被赋值为 2,a的值又被赋值为 b,所以b=2。 let [a = b, b = 1] = [2]; //a=2,b=1。b=1为默认值。 // 下面这种方式报错 let [a = b, b = 1] = []; // 不先给 a 赋值会报错,因为未给 a 赋值。要先给 a 赋值。
对象的解构赋值
注:对象的属性没有次序,变量必须与属性同名才能取得正确的值。
let { x, y } = { x: "a", y: "b" }; x // "a" y // "b" let { z } = { x: "a", y: "b" }; z // undefined
如果变量名与属性名不一致,要写成下面这样:
var { a: x } = { a: "1", b: "2" } x // "1",a=undefined let { first: f, last: l } = { first: "hello", last: "world" }; f // "hello" l // "world"
就是说对象的解构赋值的内部机制是先找到相同名称的属性,然后赋值给变量,真正被赋值的是后者,不是前者。
字符串的解构赋值
字符串用于解构赋值时,字符串会被转换成一个类似数组的对象。
let [a, b, c, d, e] = "hello"; a // "h" b // "e" c // "l" d // "l" e // "0" // 类似数组的对象都会有一个length属性,可以这样写 let { length: len } = "hello";
参考书籍:
《ES6标准入门(第3版)》 阮一峰 著