解构赋值
ES6 允许按照一定模式,从数组或对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
在es6中,允许赋值过程中,等号左边是一个模式(数组或对象)json,只要右边的模式与之对应,就可以一次性做多次赋值。
数组的解构赋值
// let a = 1;
// let b = 2;
// let c = 3;
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
数组的解构赋值,原则就是按索引值的顺序,依次赋值
如果左边多余等号右边
let [a, b, c] = [1, 2];
let a = 1;
let b = 2;
let c;
console.log(a, b, c);//1,2,undefined
没有对应值的变量不会被赋值,默认值及时未定义。
let [a, b, ...c] = [1, 2];
console.log(a, b, c);//1,2,[]
解构赋值左边可以采用扩展运算符,附加扩展运算符的变量必须时最后一个。
如果变量前加上了扩展运算符,那么得到的值一定是数组,即使没有对应关系,也会得到空数组。
等号右边多于等于左边:
let [a, b,c] = [1, 2,3,4,5,6];
console.log(a, b, c);//1,2,3
数组的解构赋值,是按照索引值顺序来赋值的。
let [a,,,b,c] = [1, 2, 3 , 4, 5, 6];
console.log(a, b, c);//1,4,5
如果我们将变量放在不同的索引位置,就可以取得对应的值。
let [a, , , b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(a, b, c);//1,4,[5,6,7,8,9]
对象的解构赋值
let { a:a, b:b } = { a: 1, b: 2 };
console.log(a, b)//1,2
let { a: aa, b: bb } = { a: 1, b: 2 };
console.log(aa, bb)//1,2
对象的解构赋值:对象没有索引值但是有名称,对象的名称是对应关系,实际赋值的是对象的值。
let { a, f, ...c } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a, f, c)//1 undefined {b: 2, c: 3, d: 4}
与数组的解构赋值类似,没有匹配到的变量不会赋值,默认值为未定义,也可以使用扩展运算符,结果是对象。
...在对象的解构赋值里,表示除了,对象的属性不区分位置(索引)。
let { a, ...c } = { a: 1 };
console.log(a, c);//1,{}
对象的扩展运算符要求结果是对象,没有赋值则为空对象。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
对于解构赋值,等号左边不是真正的数组或对象格式,只是为了赋值而形成的对应模式。
对于上面的例子,拆分开是如下的形式:
let p = [
'Hello',
{
y: 'World'
}
]
let x = 'Hello'
let y = 'World'
字符串的解构赋值
js的字符串本质上讲是对象,但同时带有遍历器接口,因此,js的字符串类型既可以使用数组的解构赋值,也可以使用对象的解构赋值。
let s = new String('abc');
console.log(s);
0: "a"
1: "b"
2: "c"
length: 3
用数组的解构赋值可以读出每个字符:
let [a, b, c, ...d] = 'abcdef';
console.log(a, b, c, d)//a,b,c,[d,e,f]
//讲字符串转数组
let [...arr] = 'abcdef';
用对象的解构赋值:
let s = 'abcd';
let { '0': x, '1': y, 'length': size } = s;
console.log(x, y, size)
可以用索引值取得对应的字符,也可以直接读取length属性。
用途
不通过其他变量,直接交换两个变量的值。
let x = 1;
let y = 2;
[x, y] = [y, x];
字符串转数组
let s = 'abcdef';
let [...arr] = s;
解构赋值结合扩展运算符,可以极大的简化语句。经常用在:获取对象或数组中的部分值,函数在获取固定格式的参数时
扩展
在es6中,函数的参数可以设置默认值:
aa(1, false);
function aa(a, b = 123) {
console.log(a, b)
}
如果有对应的值,则默认值失效
如果没有传入对应的值,或传入的值为underfined,则使用默认值
函数被调用时的参数获取,也是赋值的过程,意义可以使用解构赋值
JSON
// JSON.stringify();//将json类型的数据转化为字符串
// JSON.parse();//将字符互传转化为js可以使用的对象+数组的形式