主要知识点: 对象解构, 数组解构, 混合解构以及参数解构
解构: 更方便的数据访问. png
1. 对象解构
对象解构语法
对象解构语法在赋值语句的左侧使用了对象字面量, 例如:
- let person ={
- name:'hello',
- age:18
- }
- let {name,age}=person;
- console.log(name); //hello
- console.log(age); //18
在声明变量 name,age 的时候, 利用对象解构的方式, 将 person 对象中 name,age 属性分别赋值给变量 name 和 age, 类似于简写的属性初始化器;
解构赋值
对象解构不仅可以用于变量声明, 还可以用于变量赋值:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- ({name,age}=person);
- console.log(name); //hello
- console.log(age); //18
name,age 变量在声明变量的时候就已经完成了变量初始化操作, 之后利用对象解构的方式实现变量赋值. 注意: 必须使用圆括号来包裹解构赋值语句, 否则暴露的花括号会被解析成代码块语句, 而代码块语句不允许在赋值 (=) 语句左侧出现. 圆括号标示了里面的花括号并不是块语句, 而是被解释成表达式, 从而完成了赋值操作;
对象解构不仅可以用于变量赋值, 任何期望赋值的地方都可以使用对象解构方式赋值, 如传递给函数:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- function test(value){
- return Object.is(value,person);
- }
- console.log(test({name,age}=person));//true
- console.log(name); //hello
- console.log(age); //18
调用函数 test 的时候就是使用解构赋值的方式来传递入参;
默认值
如果在使用对象解构赋值的时候, 没有在对象中找到同名属性的话, 那么本地变量就会赋值为 undefined:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- function test(value){
- return Object.is(value,person);
- }
- ({name,age,value}=person);
- console.log(name); //hello
- console.log(age); //18
- console.log(value); //undefined
为了不让变量值为 undefined, 可以为变量设置默认值. 设置变量默认值使用等号 "=", 等号右侧为需要设置的默认值, 如:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- function test(value){
- return Object.is(value,person);
- }
- ({name,age,value=true}=person);
- console.log(name); //hello
- console.log(age); //18
- console.log(value); //true
利用等号为 value 设置默认值 true.
设置不同名本地变量
使用解构赋值, 也可以为不同名的变量赋值:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- ({name:localName,age:localAge}=person);
- console.log(localName); //hello
- console.log(localAge); //18
使用冒号 ":" 可以为不同名的变量完成赋值, 冒号左边为对象的属性名, 冒号的右边为另外的变量名.
同样的可以为非同名的变量设置默认值:
- let person ={
- name:'hello',
- age:18
- }
- name = 'world';
- age= 20;
- ({name:localName,age:localAge,value=true}=person);
- console.log(localName); //hello
- console.log(localAge); //18
- console.log(value); //true
嵌套的对象解构
对象解构不仅可以处理属性值为基本类型值的对象的解构, 还可以被用于嵌套的对象解构:
- let node = {
- type: "Identifier",
- name: "foo",
- loc: {
- start: {
- line: 1,
- column: 1
- },
- end: {
- line: 1,
- column: 4
- }
- }
- };
- let{loc:{start}}=node;
- console.log(start.line); // 1
- console.log(start.column);//1
同样的, 在嵌套的对象解构中依然也可以为不同名的变量赋值:
- let node = {
- type: "Identifier",
- name: "foo",
- loc: {
- start: {
- line: 1,
- column: 1
- },
- end: {
- line: 1,
- column: 4
- }
- }
- };
- let{loc:{start:localStart}}=node;
- console.log(localStart.line); // 1
- console.log(localStart.column);//1
2. 数组结构
数组解构的语法
数组解构与对象结构十分相似, 对象解构是通过对象的属性名去查找对象中的属性值, 然后进行赋值给变量, 而数组解构则是通过数组的索引去找到具体值, 再去赋值给变量:
- let arr = [1,2,3];
- let [first,second]=arr;
- console.log(first);//1
- console.log(second);//2
将数组 arr 中第一个元素和第二个元素分别赋值给 first 和 second. 如果只想要数组中第三个元素值:
- let arr = [1,2,3];
- let [,,third]=arr;
- console.log(third);//3
两个逗号 "," 相当于占位符, 前两个元素值不直接赋值给变量, 仅仅将数组中的第 3 个元素值, 赋值给变量 third.
解构赋值
可以在赋值表达式中使用数组解构:
- let arr = [1,2,3];
- let first = 5,second = 6;
- [first,second] = arr;
- console.log(first);//1
- console.log(second);//2
与对象解构赋值和数组解构赋值相比起来, 不需要使用圆括号 "()" 将赋值表达式包裹起来.
使用数组解构, 可以十分方便的完成变量值交换:
- let arr = [1,2,3];
- [first,second] = arr;
- [first,second]=[second,first];
- console.log(first);//2
- console.log(second);//1
默认值
与对象解构赋值一样, 数组解构赋值同样可以使用默认值, 当指定位置的项不存在或者其值为 undefined, 那么该默认值就会被使用:
- let arr = [1,2];
- [first,second,third=3] = arr;
- console.log(first);//1
- console.log(second);//2
- console.log(third);//3
嵌套的解构
与嵌套对象解构一样, 嵌套的数组也可以解构:
- let array = [1,[2,3],4]
- let [first,[second]]=array;
- console.log(first);//1
- console.log(second);//2
剩余项
数组解构中有一个类似于剩余参数的概念, 可以使用... 语法来将剩余项目给一个指定的变量, 这种语法称之为剩余项:
- // 剩余项
- let array = [1,2,3,4,5];
- let [first,...subArr]=array;
- console.log(first);//1
- console.log(subArr.length);//4
- console.log(subArr[0]);2
将数组 array 中除了第一项外的其他项都赋给了变量 subArr, 剩余项 subArr 的长度为 4, 并且第一个元素为 2;
使用剩余项, 可以很方便的完成数组复制:
- // 数组复制
- let array = [1,2,3,4,5];
- let [...clonedArr]=array;
- console.log(clonedArr); //[1,2,3,4,5]
混合解构
对象解构和数组解构可以混合在一起使用, 这样就可以创建更加复杂的解构表达式, 提取我们想要的内容:
- let node = {
- type: "Identifier",
- name: "foo",
- loc: {
- start: {
- line: 1,
- column: 1
- },
- end: {
- line: 1,
- column: 4
- }
- },
- range: [0, 3]
- };
- let {loc:{start},range:[rangeArr]}=node;
- console.log(start.line); //1
- console.log(rangeArr); //0
3. 参数解构
当一个函数的入参既有必选参数, 又有可选参数的时候, 可选参数的部分可以利用解构的方式来定义, 同时, 如果利用到解构, 需要为其设置默认值, 否则会报错. 因此, 参数解构的规范形式为:
- function setCookie(name, value,
- {
- secure = false,
- path = "/",
- domain = "example.com",
- expires = new Date(Date.now() + 360000000)
- } = {}
- ) {
- // ...
- }
此代码中参数解构给每个属性都提供了默认值, 所以你可以避免检查指定属性是否已被传入
(以便在未传入时使用正确的值) . 而整个解构的参数同样有一个默认值, 即一个空对象,
令该参数成为可选参数. 这么做使得函数声明看起来比平时要复杂一些, 但却是为了确保每
个参数都有可用的值而付出的微小代价.
4. 总结
解构使得在 JS 中操作对象与数组变得更容易. 使用熟悉的对象字面量与数组字面量语法, 可以将数据结构分离并只获取你感兴趣的信息. 对象解构模式允许你从对象中进行提取, 而数组模式则能用于数组.
对象与数组解构都能在属性或项未定义时为其提供默认值; 在赋值表达式右侧的值为 null
或 undefined 时, 两种模式都会抛出错误. 你也可以在深层嵌套的数据结构中使用对象与数
组解构, 下行到该结构的任意深度.
使用 var , let 或 const 的解构声明来创建变量, 就必须提供初始化器. 解构赋值能替代其他赋值, 并且允许你把值解构到对象属性或已存在的变量上.
参数解构使用解构语法作为函数的参数, 让 "选项"(options ) 对象更加透明. 你实际感兴趣的数据可以与具名参数一并列出. 解构的参数可以是对象模式, 数组模式或混合模式, 并且你能使用它们的所有特性.
来源: http://www.jianshu.com/p/2b4c2ccc3407