解构赋值
是对赋值运算符的一种扩展,他针对数组和对象进行操作,代码书写上简洁易读
对Array的解构
//直接一连串赋值
let a=1,b=2,c=3
let [a,b,c]=[1,2,3]
//跳过空赋值
var [a,,c]=[1,2,3]
console.log(a, c);
console.log(b);
//a,c为1,3 b不存在
…是扩展运算符(只能用在后面)
//...连续赋值
var [a,...c] = [1,2,3]
console.log(a, c);
//a=1,c=[2,3]
//默认值
var [a, b, c = 'default', d = 'default'] = [1, 2, 3]
console.log(a, b, c, d);
//1 2 3 "default"
对Object的解构
//对象中的结构赋值
var obj = {
a: 1,
b: 2,
}
//a:A 在obj中寻找a转化成A并且赋值
let { a: A, b: b } = obj
//这里再用let声明b或a会报错,let只能定义一次
let { c: c } = obj
console.log(A, b,c);
//1,2,undefined
//baz是变量
let { foo: baz }={ foo:'aaa', bar:'bbb'};
baz // "aaa"
foo // error: foo is not defined
//解构模型实现Math
let { floor, pow } = Math
let a = 2
console.log(floor(a), pow(a, 2));
对String的解构
let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//求字符串长度
let { length } = 'yo.'
console.log(length);
//结构模型传参
var obj = { a: 1, b: 2 }
function test2({ a, b }) {
console.log(a, b);
}
test2(obj)
对函数参数的解构
//函数的参数也可以使用解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
圆括号问题:
不能使用圆括号:
1.变量声明语句
2.函数参数
3.赋值语句的模式
可以使用圆括号的情况:赋值语句的非模式部分,可以使用圆括号
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
注意点:
1.已经let生命的变量用于解构赋值{x}会被认为是代码块
// 错误的写法
let x;
{x}={x:1};
// SyntaxError: syntax error
// 正确写法的写法
let x;
({x}={x:1})
2.解构赋值允许等号左边的模式之中,不放置任何变量名
({}=[true,false]);
({}='abc');
({}=[]);
3.由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
let arr =[1,2,3];
let {0: first,[arr.length -1]: last}= arr;
first // 1
last // 3