ES6 学习之解构/赋值

Question

初识解构

解构过程中，具备赋值和变量声明两个功能。目的在于把等号左右长的相似的两个东西内部的值取出来。

let obj = {
    name: 'Ming',
    age: 18
};

let name, age;
({name, age} = obj);
console.log(name, age); // 输出 Ming 18

从案例就可以例接触上述目的的含义，即将 ({name, age} = obj); 中等号两边相同的 name,age 对应取出来。

解构对象

上述案例就是对对象的解构，它还有简单写法：

let obj = {
    name: 'Ming',
    age: 18
};

let {name, age} = obj;
console.log(name, age); // 输出 Ming 18

若不想用name,age两个变量存取出来的值，还可以扩展为：

let obj = {
    name: 'Ming',
    age: 18
};

let {name: oName, age: oAge} = obj;
console.log(oName, oAge); // 输出 Ming 18

默认赋值

let obj = {
    name: 'Ming',
    age: 18
};

let {name: oName, age: oAge, sex = 'male'} = obj;
console.log(oName, oAge, sex); // 输出 Ming 18 male

上述解构式子中，在等号左边用等号给 sex 添加了一个默认值，这就是默认赋值。当有默认赋值后，在解构中，若 obj 中有 sex，就会取 sex 的值，若没有，就会取默认值。

解构数组

纯数组解构：

let arr = [1, 2, 3];

let [x, y, z] = arr;
console.log(x, y, z) // 输出 1，2，3

利用索引解构：

let arr = [1, 2, 3];

let {0: x, 1: y, 2: z} = arr;
console.log(x, y, z) // 输出 1，2，3

取 lenght，利用 length 属性解构：

let arr = [1, 2, 3];

let {length} = arr;
console.log(length); // 输出 3

扩展

例：解构数组中的对象

let arr = [1, 2, 3, {name: 'Ming'}];

let [,,,{name}] = arr; // 前面1，2，3是没用的，可以直接用,,,代替
console.log(name) // 输出 Ming

解构语法是一个语法糖，写到这大家一定都会发现，上述讲这么多，并没有体现出语法糖的效果，下面就来说说什么时候用解构，能事半功倍。

何时使用，事半功倍

当你的数据解构比较复杂且需要分开操作的时候，就可以尝试使用解构。 如接口返回如下数据，我想要取出其中的 director,gut,mainActor,screenwriter：

var res = {
    name: '海王',
    poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=156b88e07269ca46d05.jpeg',
    director:'温子仁',
    screenwriter: ['大卫·莱斯利·约翰逊·麦戈德里克', '威尔·比尔', '乔夫·琼斯', '温子仁', '莫尔特·魏辛格', '保罗·诺里斯'],
    mainActor:['杰森·莫玛', '艾梅柏·希尔德', '帕特里克·威尔森', '叶海亚·阿卜杜勒-迈丁', '妮可·基德曼', 
'威廉·达福', '杜夫·龙格尔', '特穆拉·莫里森', '林路迪', '兰道尔·朴'],
    gut:'在一场狂风暴雨的海边灯塔看守人汤姆·库瑞（特穆拉·莫里森饰）救了受伤的亚特兰蒂斯女王亚特兰娜（妮可·基德曼饰）之后，他们相爱了，
生下了拥有半人类、半亚特兰蒂斯人的血统亚瑟·库瑞（杰森·莫玛饰）。为了救自己的爱人和儿子亚特兰娜选择了离开。
    几年之后，亚特兰娜被迫回到海底国家缔结政治婚姻，生下儿子奥姆（帕特里克·威尔森饰）。奥姆长大后当上国王对陆地人类充满憎恨，
开始吞并海底中发展中的国家的兵力，一举消灭陆地人。奥姆的未婚妻海底王国泽贝尔公主湄拉（艾梅柏·希尔德饰）
打算阻止这场战争，她到陆地找回亚瑟，让他以亚特兰娜女王长子身份回亚特兰蒂斯把王位争回来，
而且湄拉要协助亚瑟找回能统治大海的失落的三叉戟'
}

不使用解构的写法：

var oDirector = res.director;
var oGut = res.gut;
var oMainActor = res.mainActor;
var oScreenwriter = res.screenwriter;

使用解构的写法:

let {director, gut, mainActor, screenwriter} = res;

明显的可以看出，写法简单了很多，而且变量都可以取出来，这就充分体现出了语法糖的优势。

总结

解构可在日常开发中根据个人喜好合理使用，推荐使用，语法糖真的为我们开发提高了很多效率！