ES6中解构赋值的语法及用法实例

更新时间：2024年04月02日 11:03:34 作者：小新-alive

ES6的解构赋值是一种快速方便的方法,可以从数组或对象中提取值并将其赋值给变量,下面这篇文章主要给大家介绍了关于ES6中解构赋值的语法及用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

ES6 中引入了解构赋值（Destructuring Assignment）的语法，它提供了一种方便的方式从数组或对象中提取值，并将它们赋给变量。

1. 数组解构赋值：

使用方括号[]来进行数组解构赋值。可以根据数组的结构，将其中的值赋给对应的变量。

const numbers = [1, 2, 3, 4, 5];

const [a, b, c, d, e] = numbers;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
console.log(d); // 输出 4
console.log(e); // 输出 5

除了基本的数组解构赋值外，还可以使用默认值来处理解构时可能不存在的元素。

const numbers = [1, 2];

const [a, b, c = 3] = numbers;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

1.1 嵌套数组的解构赋值：

当处理嵌套的数组时，可以使用多个方括号[]来表示不同层级的解构赋值。

const nestedArray = [1, [2, [3, 4]]];
const [a, [b, [c, d]]] = nestedArray;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
console.log(d); // 输出 4

2. 对象解构赋值：

使用花括号{}来进行对象解构赋值。可以根据对象的属性，将对应的值赋给变量。

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

const { name, age, city } = person;

console.log(name); // 输出 'Alice'
console.log(age); // 输出 30
console.log(city); // 输出 'New York'

对象解构赋值也支持默认值的设置。

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

const { name, age, city = 'New York' } = person;

console.log(name); // 输出 'Alice'
console.log(age); // 输出 30
console.log(city); // 输出 'New York'

2.1 嵌套对象的解构赋值：

当处理嵌套的对象时，可以使用多个花括号{}来表示不同层级的解构赋值。

const nestedObject = {
  prop1: 'value1',
  prop2: {
    nestedProp1: 'value2',
    nestedProp2: {
      deeplyNestedProp: 'value3'
    }
  }
};

const { prop1, prop2: { nestedProp1, nestedProp2: { deeplyNestedProp } } } = nestedObject;

console.log(prop1); // 输出 'value1'
console.log(nestedProp1); // 输出 'value2'
console.log(deeplyNestedProp); // 输出 'value3'

3. 函数参数的解构赋值

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

function printUserInfo({ name, age, city }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

printUserInfo(user);

在上面的例子中，我们定义了一个 printUserInfo 函数，它使用对象解构赋值作为函数参数。函数参数 { name, age, city } 指定了我们希望从传递的对象中提取的属性。当我们调用 printUserInfo 函数时，直接传递了一个对象参数 user，函数内部会根据解构赋值语法从对象中提取相应属性的值并打印出来。

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

function sum([a, b, c]) {
  console.log(a + b + c);
}

const numbers = [1, 2, 3];

sum(numbers);

在上面的例子中，我们定义了一个 sum 函数，它使用数组解构赋值作为函数参数。函数参数 [a, b, c] 指定了我们希望从传递的数组中提取的元素。当我们调用 sum 函数时，直接传递了一个数组参数 numbers，函数内部会根据解构赋值语法从数组中提取相应元素的值并计算它们的和。

附：其他解构

1. 字符串

字符串会被转换成了一个类似数组的对象。

let [a, b, c] = 'ES6';
console.log(a, b, c)	// E S 6

字符串的length属性也能进行解构赋值

let {length : l} = 'ES6';
console.log(l) // 3

3. 其他数据类型

当等号左边为对象，右边为数值、布尔值、undefined和null时

let {a1: b1} = 666;
console.log(b1);	// undefined
let {a2: b2} = true;
console.log(b2);	// undefined
let {a3: b3} = undefined;
console.log(b3);	// 报错
let {a4: b4} = null;
console.log(b4);	// 报错

总结

到此这篇关于ES6中解构赋值的语法及用法的文章就介绍到这了,更多相关ES6解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

验证用户是否修改过页面的数据的实现方法
在实现程序的修改模块时，要在页面端检查用户是否修改过数据，以便提醒用户及时保存修改后的数据。
2008-09-09
比较搞笑的js陷阱题
今天看到一段代码，比较有意思，本周就再多加一问。
2010-02-02
JS实现选中当前菜单后高亮显示的导航条效果
这篇文章主要介绍了JS实现选中当前菜单后高亮显示的导航条效果,涉及JavaScript针对页面元素的遍历及样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
JavaScript 模块化详解
这篇文章主要介绍了JavaScript 模块化详解，块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信，下面一起进入文章来接更多详细内容
2021-12-12
JS实现基于拖拽改变物体大小的方法
这篇文章主要介绍了JS实现基于拖拽改变物体大小的方法,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-01-01
计算新浪Weibo消息长度(还可以输入119字)
此文为计算新浪Weibo的消息长度的方法. 就是在发言的时候还可以输入多少字，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
C++中的string类的用法小结
通过在网站上的资料搜集，得到了很多关于string类用法的文档，通过对这些资料的整理和加入一些自己的代码，就得出了一份比较完整的关于string类函数有哪些和怎样用的文档了！
2015-08-08
javascript匀速动画和缓冲动画详解
这篇文章主要为大家详细介绍了javascript匀速动画和缓冲动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
分享Bootstrap简单表格、表单、登录页面
本文给大家分享Bootstrap简单表格、表单、登录页面的实例代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-08-08
ES6 Promise.race的用法详解
本文主要介绍了ES6 Promise.race的用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-09-09