深入理解ES6-5.解构:更方便的数据访问


主要知识点:对象解构、数组解构、混合解构以及参数解构

解构:更方便的数据访问.png

1. 对象解构

对象解构语法

对象解构语法在赋值语句的左侧使用了对象字面量,例如:

1
2
3
4
5
6
7
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,类似于简写的属性初始化器;

解构赋值

对象解构不仅可以用于变量声明,还可以用于变量赋值

1
2
3
4
5
6
7
8
9
let person ={
name:'hello',
age:18
}
name = 'world';
age= 20;
({name,age}=person);
console.log(name); //hello
console.log(age); //18

name,age变量在声明变量的时候就已经完成了变量初始化操作,之后利用对象解构的方式实现变量赋值。注意:必须使用圆括号来包裹解构赋值语句,否则暴露的花括号会被解析成代码块语句,而代码块语句不允许在赋值(=)语句左侧出现。圆括号标示了里面的花括号并不是块语句,而是被解释成表达式,从而完成了赋值操作

对象解构不仅可以用于变量赋值,任何期望赋值的地方都可以使用对象解构方式赋值,如传递给函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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,可以为变量设置默认值。设置变量默认值使用等号“=”,等号右侧为需要设置的默认值,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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。

设置不同名本地变量

使用解构赋值,也可以为不同名的变量赋值:

1
2
3
4
5
6
let person ={
name:'hello',
age:18
}
name = 'world';
age= 20;


​ ({name:localName,age:localAge}=person);

1
2
console.log(localName); //hello
console.log(localAge); //18

使用冒号“:”可以为不同名的变量完成赋值,冒号左边为对象的属性名,冒号的右边为另外的变量名。

同样的可以为非同名的变量设置默认值:

1
2
3
4
5
6
let person ={
name:'hello',
age:18
}
name = 'world';
age= 20;


​ ({name:localName,age:localAge,value=true}=person);

1
2
3
console.log(localName); //hello
console.log(localAge); //18
console.log(value); //true

嵌套的对象解构

对象解构不仅可以处理属性值为基本类型值的对象的解构,还可以被用于嵌套的对象解构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

同样的,在嵌套的对象解构中依然也可以为不同名的变量赋值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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. 数组结构

数组解构的语法

数组解构与对象结构十分相似,对象解构是通过对象的属性名去查找对象中的属性值,然后进行赋值给变量,而数组解构则是通过数组的索引去找到具体值,再去赋值给变量:

1
2
3
4
let arr = [1,2,3];
let [first,second]=arr;
console.log(first);//1
console.log(second);//2

将数组arr中第一个元素和第二个元素分别赋值给first和second。如果只想要数组中第三个元素值:

1
2
3
let arr = [1,2,3];
let [,,third]=arr;
console.log(third);//3

两个逗号”,”相当于占位符,前两个元素值不直接赋值给变量,仅仅将数组中的第3个元素值,赋值给变量third。

解构赋值

可以在赋值表达式中使用数组解构:

1
2
3
4
5
let arr = [1,2,3];
let first = 5,second = 6;
[first,second] = arr;
console.log(first);//1
console.log(second);//2

与对象解构赋值和数组解构赋值相比起来,不需要使用圆括号”()”将赋值表达式包裹起来。

使用数组解构,可以十分方便的完成变量值交换:

1
2
3
4
5
6
let arr = [1,2,3];

[first,second] = arr;
[first,second]=[second,first];
console.log(first);//2
console.log(second);//1

默认值

与对象解构赋值一样,数组解构赋值同样可以使用默认值,当指定位置的项不存在或者其值为undefined,那么该默认值就会被使用:

1
2
3
4
5
6
7
let arr = [1,2];

[first,second,third=3] = arr;

console.log(first);//1
console.log(second);//2
console.log(third);//3

嵌套的解构

与嵌套对象解构一样,嵌套的数组也可以解构:

1
2
3
4
let array = [1,[2,3],4]
let [first,[second]]=array;
console.log(first);//1
console.log(second);//2

剩余项

数组解构中有一个类似于剩余参数的概念,可以使用...语法来将剩余项目给一个指定的变量,这种语法称之为剩余项:

1
2
3
4
5
6
//剩余项
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;

使用剩余项,可以很方便的完成数组复制:

1
2
3
4
//数组复制
let array = [1,2,3,4,5];
let [...clonedArr]=array;
console.log(clonedArr); //[1,2,3,4,5]

混合解构

对象解构和数组解构可以混合在一起使用,这样就可以创建更加复杂的解构表达式,提取我们想要的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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. 参数解构

当一个函数的入参既有必选参数,又有可选参数的时候,可选参数的部分可以利用解构的方式来定义,同时,如果利用到解构,需要为其设置默认值,否则会报错。因此,参数解构的规范形式为:

1
2
3
4
5
6
7
8
9
10
function setCookie(name, value,
{
secure = false,
path = "/",
domain = "example.com",
expires = new Date(Date.now() + 360000000)
} = {}
) {
// ...
}

此代码中参数解构给每个属性都提供了默认值,所以你可以避免检查指定属性是否已被传入
(以便在未传入时使用正确的值) 。而整个解构的参数同样有一个默认值,即一个空对象,
令该参数成为可选参数。这么做使得函数声明看起来比平时要复杂一些,但却是为了确保每
个参数都有可用的值而付出的微小代价。

4. 总结

  1. 解构使得在 JS 中操作对象与数组变得更容易。使用熟悉的对象字面量与数组字面量语法,可以将数据结构分离并只获取你感兴趣的信息。对象解构模式允许你从对象中进行提取,而数组模式则能用于数组。
  2. 对象与数组解构都能在属性或项未定义时为其提供默认值;在赋值表达式右侧的值为 null
    或 undefined 时,两种模式都会抛出错误。你也可以在深层嵌套的数据结构中使用对象与数
    组解构,下行到该结构的任意深度。
  3. 使用 var 、 let 或 const 的解构声明来创建变量,就必须提供初始化器。解构赋值能替代其他赋值,并且允许你把值解构到对象属性或已存在的变量上。
  4. 参数解构使用解构语法作为函数的参数,让“选项”(options ) 对象更加透明。你实际感兴趣的数据可以与具名参数一并列出。解构的参数可以是对象模式、数组模式或混合模式,并且你能使用它们的所有特性。
热门推荐
本文聚合了关于es6的知识点,能够迅速了解es6的知识体系,杜绝知识碎片化
点击阅读全文

 评论