ES6学习(四) -- 解构destructuring

305 阅读4分钟

初识解构

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

例:

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=1562222193945&di=d239fc9a4b88e07202293eccb1532497&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181114%2Fedb272bf4aea4374a10a85069ca46d05.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;

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

总结

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