Node+TS+Koa+vue 商城全栈开发2(es6部分-结构赋值)

定义: 允许按照一定模式，从数组和对象中提取值，并对变量进行赋值，这被称为解构赋值

let arr = [1, 2, 3];
let [a, b, c] = arr;    // 需要一一对应
console.log(a, b, c);//1,2,3

等同于

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

对象结构赋值

 let { bar, foo } = { foo: "aaa", bar: "bbb" };  // 左侧中变量的名称必须是右侧对象中存在的key，解构的顺序不需要对应
 console.log(bar, foo); //bbb,aaa
 let  {left: L, top: T} = {left: 100, top: 200};
 console.log(L, T);//100,200
 第一种写法等同于
 let {bar:bar,foo:foo} = { foo: "aaa", bar: "bbb" } 

上述涉及到es6的对象的扩展

   ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

    

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};
上面代码中，变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例子。

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

多重解构

          

 let { foo: [a, b] } = { foo: [10,20], bar: "bbb" };
 console.log(a, b);//10,20
 let [a] = 'miaov';
 console.log(a);//m
 let style = getComputedStyle(document.body);
 let {left: L, top: T, width: W, height: H} = getComputedStyle(document.body);//0px 0px 1903px 2619.88px 本电脑