JS 解构赋值

解构赋值

允许按照一定模式，从数组和对象中提取值，并对变量进行赋值

数组解构：顺序对应

• 需要一一对应，不需要的也要留出空位

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

等同于

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

对象解构：key值对应

• 左侧中变量的名称必须是右侧对象中存在的key
• 解构的顺序不需要对应

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

解构赋值：别名

let { left: L, top: T } = { left: 100, top: 200 };
console.log(L, T);

结果为：

100 200

多重解构

let { foo: [a, b] } = { foo: [10, 20], bar: 'bbb' };
console.log(a, b);

结果为：

10 20

例子：

var left     = getComputedStyle(document.body).left;
var top     = getComputedStyle(document.body).top;
var width  = getComputedStyle(document.body).width;
var height = getComputedStyle(document.body).height;

可简写为：

let { left: L, top: T, width: W, height: H } = getComputedStyle(document.body);