整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「ES6」聊聊ES6新增特性-解构赋值

「ES6」聊聊ES6新增特性-解构赋值

【ES6】聊聊ES6新增特性——解构赋值:重构你的JavaScript赋值思维,让代码更简洁高效

**引言**

在JavaScript的进化历程中,ES6(ECMAScript 6)犹如一股强劲的变革之风,带来了许多改变游戏规则的新特性。其中,解构赋值作为一种革命性的赋值方式,极大地简化了代码并提升了可读性。本文将全方位解析ES6解构赋值的奥秘,通过理论介绍、实例代码演示和实战应用场景,帮助你深入了解并掌握这一特性,从而在日常开发中发挥其最大价值。

## **一、解构赋值简介**

**1. 数组解构赋值**

在ES6之前,我们需要单独赋值数组中的每个元素:

```javascript

let arr=[1, 2, 3];

let first=arr[0];

let second=arr[1];

let third=arr[2];

```

使用ES6解构赋值,我们可以一步到位:

```javascript

let [first, second, third]=[1, 2, 3];

console.log(first); // 输出:1

console.log(second); // 输出:2

console.log(third); // 输出:3

```

**2. 对象解构赋值**

对于对象的解构赋值,可以按照属性名直接提取值:

```javascript

// 传统方式

let person={ name: "John", age: 30 };

let name=person.name;

let age=person.age;

// 使用解构赋值

let { name, age }={ name: "John", age: 30 };

console.log(name); // 输出:John

console.log(age); // 输出:30

```

## **二、解构赋值的高级特性**

**1. 默认值**

解构赋值允许为未定义或`undefined`的变量设置默认值:

```javascript

let { name="Default", age }={ age: 30 };

console.log(name); // 输出:Default

```

**2. 嵌套解构**

解构赋值可以用于嵌套对象和数组:

```javascript

let nestedObj={ person: { name: "John", age: 30 } };

let { person: { name, age } }=nestedObj;

console.log(name); // 输出:John

console.log(age); // 输出:30

let nestedArr=[[1, 2], [3, 4]];

let [head, [tail1, tail2]]=nestedArr;

console.log(head); // 输出:[1, 2]

console.log(tail1); // 输出:3

console.log(tail2); // 输出:4

```

**3. 函数参数解构**

解构赋值也可应用于函数参数,简化参数传递:

```javascript

// 传统方式

function processPerson(person) {

let { name, age }=person;

// ...

}

let person={ name: "John", age: 30 };

processPerson(person);

// 使用解构赋值

function processPerson({ name, age }) {

// ...

}

processPerson({ name: "John", age: 30 });

```

## **三、解构赋值实战应用**

**1. 函数返回值的解构**

```javascript

function getPersonInfo() {

return { name: "John", age: 30 };

}

let { name, age }=getPersonInfo();

console.log(name); // 输出:John

console.log(age); // 输出:30

```

**2. 模块导入导出**

```javascript

// math.js

export const PI=3.14;

export const calculateCircleArea=(radius)=> PI * radius ** 2;

// 在另一个模块中导入并解构

import { PI, calculateCircleArea } from './math.js';

console.log(PI); // 输出:3.14

console.log(calculateCircleArea(2)); // 输出:12.56

```

**结语**

ES6的解构赋值特性无疑为JavaScript代码注入了新的生命力,通过精简赋值操作,显著提升了代码的简洁性和可读性。深入理解和熟练运用解构赋值,不仅可以简化日常开发中的重复劳动,而且有助于形成更加优雅的编码风格,从而提高工作效率,降低维护成本。让我们在实际开发中善用解构赋值这一利器,撰写出更加优雅且高效的JavaScript代码。

文来自 Destructuring Assignment in JavaScript -(https://dev.to/gksander/destructuring-assignment-in-javascript-1ace)

JavaScript是一种很有趣的语言,我个人很喜欢它,虽然仍还有些人不大喜欢它。在ECMAScript6(ES6)中,有许多有用的特性来使JavaScript开发更有趣。在本文中,我将来探讨一些关于解构赋值的内容,并提供一些可能有用的实际例子。

MDN是这样描述解构赋值的:

解构赋值语法是一种JavaScript表达式用来将数组中的值或对象中的属性取出来区分为不同变量。

对象的解构赋值

假设你有一个对象用来表示3维空间中的一个点:

假设你需要用这些坐标点进行一些计算,你会将这些坐标取出并赋值给一个变量以便于后面的使用:

这样确实是有效的。但是如果你做了足够多次,你可能已经很厌烦这样的复制粘贴了。使用解构赋值,你能更简单的采集到这些坐标:

这里的大括号指明了解构赋值。上面代码中的第一行查看了myPointInSpace变量,并从中查找大括号内指明的任何属性,最后返回他们并赋值为独立的变量。

如果你只需要x和y坐标,你也可以这样做:

数组的解构赋值

解构赋值能很好的运用在对象中,但它同样也能很好的作用于数组中。现在让我们将坐标点放进一个数组中:

老派的拿取坐标点的方法可能是这样的:

借助解构赋值,能变得这样简洁:

一些实际例子

我在上面展示了一个简单的示例,其中涉及简单地提取值,但我想展示一些更有用的示例。

设置函数默认值

在编写函数时,我经常喜欢使用单个对象作为输入,然后从该对象中提取值(这样我就不必担心输入的顺序了)。解构赋值在这点上很有帮助,并允许我们使用ES6中引入的“默认参数”。

假设你要编写一个需要获取小时,分钟和秒的函数,并将该时间转换为毫秒数。 我们可以通过以下方式做到这一点:

这可能看起来像一个奇怪的函数声明,但它使我们可以传入一个对象作为toMilliseconds()的输入,并且该函数将查找键:小时,分钟和秒来使用。 如果它在传入的对象中没有找到这一个键,则默认值为0。如下所示这样使用它:

在上述代码中的第二行,我们不需要给时和秒传一个确切的数字,时和秒取了默认值0。

我已经逐渐喜欢这种编写函数的方式,因为有些函数有很多参数都需要默认值,而这种形式的函数声明对我来说是非常具有可读性的。

交换值

交换变量的值是一种常见的操作,通常涉及创建临时变量。 这是一个典型的例子:

然而,解构赋值能更简洁直观的进行此操作:

如果你发现自己经常在做交换值的操作,解构会成为一个很棒的工具。

取值并赋予一个新名称

使用对象解构,你实际上可以将变量命名为要解构的对象的键之外的其他内容。假设你正在使用一个API,并且API会返回一个响应,其中的对象具有你不喜欢使用的奇怪名称。 类似于以下内容:

我们能从响应提取这两个值并且给它们赋予一个我们喜欢的任何名称,比如x和y:

解构中的someWeirdKeyForX:x部分声明你将从apiResponse中提取someWeirdKeyForX,并且你会将它赋值给一个新的变量x。这非常有用,实际上我也喜欢在这些赋值场景中使用这个方法,比如将apiResponse.latitude赋值给lat还有apiResponse.longitude赋值给lng。

注意

我偶然发现了一个小小的“陷阱”,比如,如果你的解构语句不是以变量声明关键字(如var,let或const)开头,则需要将语句包裹在括号中。 我设想这样编译器才能知道如何区分解构语句中的{...}和代码块中的{...}。

这就是我的意思。请考虑以下代码:

编译器不知道如何去解析最后一行代码,你需要这样改变:

当你在使用解构的时候,确保你知道这个小小的“陷阱”。

更多

MDN中有更多关于解构赋值的例子,如果你想了解更多,可以到(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)查看。

当涉及到JavaScript中的ES6新增特性时,解构赋值是一个非常重要且实用的特性。它可以帮助我们更加简洁地从数组和对象中提取数据,使得代码更易读、更易维护。那么接下来让我们来认识一下解构赋值的概念以及用法,还有使用解构赋值时的注意事项吧。

一、 解构赋值的概念和作用

`

  1. 解构赋值是 ES6 引入的一项重要特性,它可以使得从数组或对象中提取数据变得更加简洁、灵活。
  2. 通过解构赋值,可以轻松地从数组或对象中提取所需的数据,并赋值给对应的变量,而无需显式地逐个取出元素或属性。
  3. 这种语法上的简洁性使得代码更易读、更易写,同时也减少了不必要的中间变量,提高了代码的可维护性。
  4. 解构赋值允许我们以更直观的方式获取数组和对象中的元素或属性,同时也提供了默认值和嵌套结构的支持。
  5. 在处理复杂数据结构时,解构赋值可以帮助我们快速地提取所需数据,避免了繁琐的手动操作,提高了代码的可读性和开发效率。
  6. 默认值和嵌套结构的支持使得解构赋值更加灵活,能够应对各种复杂的数据情况,使得代码更具通用性和健壮性。

在现代 JavaScript 编程中,数组解构赋值是一项强大而灵活的特性,它能够让我们轻松地从数组中提取元素并将其赋值给变量。通过这种方式,我们可以更加便捷地处理数组中的数据,使代码变得更加清晰和易于理解。

二、 数组解构赋值

数组解构赋值是 ES6 引入的一项语法特性,用于从数组中提取元素并将其赋值给变量。这种语法使用方括号 [] 来指定要提取的元素,然后将元素的值赋给对应的变量。下面是一个简单的例子:

const colors=['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor]=colors;
console.log(firstColor); // 输出 'red'
console.log(secondColor); // 输出 'green'
console.log(thirdColor); // 输出 'blue'


在这个例子中,我们使用数组解构赋值从 colors 数组中提取了前三个元素,并将它们分别赋值给了 firstColor、secondColor 和 thirdColor 这三个变量。

更进一步的用法

除了基本的数组解构赋值外,我们还可以进行一些更加高级的操作,比如忽略某些元素或使用剩余的元素:

const numbers=[1, 2, 3, 4, 5];
const [firstNum, , thirdNum, ...rest]=numbers;
console.log(firstNum); // 输出 1
console.log(thirdNum); // 输出 3
console.log(rest); // 输出 [4, 5]


在这个例子中,我们使用了数组解构赋值来忽略第二个元素,并将剩余的元素赋值给 rest 变量,这样可以方便地处理数组中的多余元素。

在函数中使用数组解构赋值

数组解构赋值也可以用在函数参数中,这使得我们能够更方便地从传入的数组参数中提取所需的元素。例如:

function printFirstTwo([first, second]) {
  console.log(`The first two elements are ${first} and ${second}.`);
}

printFirstTwo(numbers); // 输出 "The first two elements are 1 and 2."


通过在函数参数中使用数组解构赋值,我们可以直接从传入的数组参数中提取所需的元素,使得函数更加清晰和简洁。

总结

数组解构赋值是 JavaScript 中非常有用的特性,它使得从数组中提取元素变得更加便捷和直观。通过灵活运用数组解构赋值,我们能够编写出更加优雅和易于维护的代码。

三、 对象解构赋值

对象解构赋值是 ES6 引入的一种语法,用于从对象中提取属性值并将其赋值给变量。这种语法使用花括号 {} 来指定要提取的属性,然后将属性的值赋给对应的变量。下面是一个简单的例子:

const person={ name: 'Alice', age: 25, city: 'Shanghai' };
const { name, age, city }=person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 25
console.log(city); // 输出 'Shanghai'


在这个例子中,我们使用对象解构赋值从 person 对象中提取了 name、age 和 city 属性,并将它们分别赋值给了同名的变量。

更进一步的用法

除了基本的对象解构赋值外,我们还可以进行一些更加高级的操作,比如设置默认值或使用新的变量名:

const { name, age, city, job='Engineer' }=person;
console.log(job); // 输出 'Engineer'

const { name: fullName, age: yearsOld, city: location }=person;
console.log(fullName); // 输出 'Alice'
console.log(yearsOld); // 输出 25
console.log(location); // 输出 'Shanghai'


这样的语法不仅使代码更加简洁,还可以方便地处理对象的属性。

在函数中使用对象解构赋值

对象解构赋值也可以用在函数参数中,这使得我们能够更方便地从传入的对象参数中提取所需的属性值。这在编写函数时非常有用,例如:

function printPersonInfo({ name, age, city }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

printPersonInfo(person); // 输出 "Alice is 25 years old and lives in Shanghai."


通过在函数参数中使用对象解构赋值,我们可以直接从传入的对象参数中提取所需的属性值,使得函数更加清晰和简洁。

总结

对象解构赋值是 JavaScript 中非常有用的特性,它使得从对象中提取数据变得更加便捷和直观。通过灵活运用对象解构赋值,我们能够编写出更加优雅和易于维护的代码。

四、 函数参数中的解构赋值

在现代 JavaScript 编程中,函数参数中的解构赋值是一项强大而灵活的特性,它能够让我们轻松地从传入的对象或数组参数中提取所需的数据,并将其赋值给变量。通过这种方式,我们可以更加便捷地处理函数的参数,使代码变得更加清晰和易于理解。

对象解构赋值作为函数参数

对象解构赋值可以直接用在函数的参数中,以便从传入的对象参数中提取所需的属性值并将其赋值给变量。例如:

function printPersonInfo({ name, age, city }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const person={ name: 'Alice', age: 25, city: 'Shanghai' };
printPersonInfo(person); // 输出 "Alice is 25 years old and lives in Shanghai."


在这个例子中,我们定义了一个 printPersonInfo 函数,它的参数使用了对象解构赋值,直接从传入的 person 对象参数中提取了 name、age 和 city 属性,使得函数的参数处理变得更加简洁和直观。

数组解构赋值作为函数参数

类似地,数组解构赋值也可以用在函数的参数中,以便从传入的数组参数中提取所需的元素并将其赋值给变量。例如:

function printFirstTwo([first, second]) {
  console.log(`The first two elements are ${first} and ${second}.`);
}

const numbers=[1, 2, 3, 4, 5];
printFirstTwo(numbers); // 输出 "The first two elements are 1 and 2."


在这个例子中,我们定义了一个 printFirstTwo 函数,它的参数使用了数组解构赋值,直接从传入的 numbers 数组参数中提取了前两个元素,使得函数能够更加方便地处理数组参数。

为何使用函数参数中的解构赋值?

使用对象解构赋值或数组解构赋值作为函数参数的好处在于可以直接从传入的参数中提取所需的数据,使得函数的参数处理变得更加简洁和直观。同时,这样的写法也能够减少不必要的中间变量,使代码更加清晰易懂。

总结

函数参数中的解构赋值是 JavaScript 中非常有用的特性,它使得从传入的对象或数组参数中提取数据变得更加便捷和直观。通过灵活运用函数参数中的解构赋值,我们能够编写出更加优雅和易于维护的函数代码。

解构赋值的注意事项

在JavaScript中,解构赋值是一种强大而灵活的语法特性,它可以让我们从数组或对象中提取数据并赋值给变量。然而,在使用解构赋值时,我们需要注意一些细节和注意事项,以确保代码的可靠性和稳定性。

1. 确保提取的值存在

在进行解构赋值时,需要确保要提取的属性或元素存在于目标对象或数组中。如果提取的值不存在,将会导致变量被赋予undefined,从而可能引发意外的错误。

const person={
  name: 'Alice',
  age: 30
};

// 注意:address属性不存在,会导致city变量被赋值为undefined
const { name, address: { city } }=person;


为避免这种情况,可以使用默认值或者进行适当的检查,确保提取的值存在。

2. 默认值的设置

在解构赋值时,可以为变量设置默认值,以防止提取的值为undefined。这对于确保代码的稳定性尤为重要。

const { name, age=25 }=person;


通过设置默认值,可以在提取的值不存在时,给变量一个合理的默认取值,从而避免出现undefined。

3. 别名的使用

在解构赋值过程中,我们可以使用别名来重命名提取后的变量名。这使得我们可以更灵活地控制变量名的命名,以符合代码风格或需求。

const { name: fullName, age: userAge }=person;


通过别名的使用,可以使代码更具可读性和表达力。

4. 嵌套解构

对于嵌套的对象或数组,我们可以使用嵌套解构的方式进行提取。在进行嵌套解构时,需要确保所有层级的属性都存在,以避免出现提取失败的情况。

const user={
  name: 'Bob',
  age: 25,
  address: {
    city: 'San Francisco',
    zip: 12345
  }
};

const { name, address: { city } }=user;

在实际应用中,嵌套解构是非常有用的,但需要特别注意每个层级的属性是否存在,以避免出现意外错误。

总之,在使用解构赋值时,需要小心谨慎地处理细节和边缘情况,以确保代码的可靠性和稳定性。合理地应用解构赋值能够提高代码的可读性和简洁性,但同时也需要留意其中的一些潜在风险和注意事项。


作者:sAnL1ng
链接:https://juejin.cn/post/7301574863775760421