ES6 学习之解构/赋值

初识解构

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

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;

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

总结

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

以上是 ES6 学习之解构/赋值 的全部内容, 来源链接: www.h5w3.com/234466.html

回到顶部