es6

Posted 2020-11-14 pangmin

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

1.从数组中结构：

　1.1 es6语法

　　

//数组结构 
let [a,b,c]=[1,2,3];
//带默认值的数组结构
let [a1,b1="yueban"]=[‘月半琳‘]

let [a2,b2="yueban"]=[‘月半琳‘]

 

 

 

 1.1  转义后的es5语法　　

"use strict";

//数组结构 
var a = 1,
    b = 2,
    c = 3;
//带默认值的数组结构

var _ref = [‘月半琳‘],
    a1 = _ref[0],
    _ref$ = _ref[1],
    b1 = _ref$ === undefined ? "yueban" : _ref$;
var _ref2 = [‘月半琳‘],
    a2 = _ref2[0],
    _ref2$ = _ref2[1],
    b2 = _ref2$ === undefined ? "yueban" : _ref2$;

 

可以看出：带默认值得时候解构，会找一个中点变量 _ref 临时保存右边的数组 然后去复制

//默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [a3 = 1,b3 = a3]=[‘月半琳‘]

 

2.从对象中结构

　　对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

// 对象结构
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

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

　　2.2 es5　

// 对象结构

var _foo$bar = { foo: "aaa", bar: "bbb" },
    bar = _foo$bar.bar,
    foo = _foo$bar.foo;

foo; // "aaa"
bar; // "bbb"

var _foo$bar2 = { foo: "aaa", bar: "bbb" },
    baz = _foo$bar2.baz;

baz; // undefined

　　2.2如果变量名与属性名不一致，必须写成下面这样。

　　

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

let obj = { first: ‘hello‘, last: ‘world‘ };
let { first: f, last: l } = obj;
f // ‘hello‘
l // ‘world‘

 

　　也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

　　3.3与数组一样，解构也可以用于嵌套结构的对象。