深入理解JavaScript 解构赋值

 更新时间:2024年09月10日 10:19:59   作者:代码里的小猫咪  
JavaScript的解构赋值是ES6引入的语法,允许以简洁的方式从数组或对象中提取数据并赋值给变量,包括数组解构、对象解构、参数解构、变量交换等,它可以大幅简化代码,提高开发效率,下面就一起来了解一下

JavaScript 的解构赋值是一种从数组 or 对象中提取值并将其赋给变量的语法。这种语法让我们从复杂的数据结构中提取数据变得简洁和易读。解构赋值可以用在数组、对象以及嵌套结构中。

解构是:使用 ES6 的一种语法规则,将一个对象或数组的某个属性提取到某个变量中。

解构不会对被解构的目标造成任何影响。

1. 数组解构赋值

数组解构赋值允许我们将数组中的值提取到变量中。基本语法如下:

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

如果数组的某个位置没有值,可以为其设置默认值:

const [x = 1, y = 2] = [10];
console.log(x); // 10
console.log(y); // 2

使用 ... 运算符可以将剩余的元素放入一个数组中:

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

2. 对象解构赋值

对象解构赋值允许我们将对象的属性值提取到变量中。基本语法如下:

const { name, age } = { name: 'Alice', age: 18 };
console.log(name); // 'Alice'
console.log(age);  // 18

如果对象中没有指定的属性,可以为其设置默认值:

const { name, age = 30 } = { name: 'Bob' };
console.log(name); // 'Bob'
console.log(age);  // 30

可以给解构出来的属性重新命名:

const { name: fullName, age: years } = { name: 'Charlie', age: 35 };
console.log(fullName); // 'Charlie'
console.log(years);    // 35

可以解构嵌套的对象:

const person = {
  name: 'Dave',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

const { name, address: { city, zip } } = person;
console.log(name); // 'Dave'
console.log(city); // 'New York'
console.log(zip);  // '10001'

在嵌套解构中设置默认值:

const person = {
  name: 'Eve',
  address: {}
};

const { name, address: { city = 'Unknown' } } = person;
console.log(name); // 'Eve'
console.log(city); // 'Unknown'

3. 解构赋值在函数参数中的应用

解构赋值可以直接在函数参数中使用,简化函数调用:

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

const user = { name: 'Frank', age: 4 };
greet(user); // Hello Frank, you are 4 years old.

4. 解构赋值与变量交换

可以利用解构赋值来交换变量的值: 

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

5. 注意点

5.1 默认值的计算

当使用默认值时,这些默认值是在解构赋值操作时计算的:

const { x = Math.random() } = {};
console.log(x); // 每次运行都可能是不同的值

如果对象中的属性已经有值,则默认值不会被使用,只在目标属性为 undefined 时使用。

const { x = Math.random() } = {x: 10};
console.log(x); // 10

5.2 解构赋值中的 undefined 和 null 

解构赋值仅对 undefined 提供默认值,不对 null 提供。如果对象的属性是 null,默认值不生效。 

const { a = 1 } = { a: null };
console.log(a); // null

5.3  解构赋值的深度

深度解构需要确保每一层的对象结构都存在。否则会引发错误:

const obj = { a: { b: 1 } };
const { a: { b, c = 2 } } = obj;
console.log(b); // 1
console.log(c); // 2

// 如果 obj = {},则会抛出错误
// const { a: { b, c = 2 } } = {};

5.4  解构赋值的计算顺序

在对象解构赋值中,计算顺序可能会影响结果:

const obj = { a: 1 };
const { a, b = a } = obj;
console.log(a); // 1
console.log(b); // 1

此处,a 赋值为 1,b 的默认值是 a,因此 b 的值是 1。

const obj = { a: 1, b: 2 };
const { a = 10, b = a } = obj;
console.log(a); // 1
console.log(b); // 2

此处,a 和 b 各自存在值,均不使用默认值。

5.5 解构赋值与函数参数

在函数参数中使用解构赋值时,要确保传入的参数结构与解构的变量名一致:

function func({ a, b }) {
  console.log(a, b);
}
func({ a: 1, b: 2 }); // 1 2
func({ a: 1 }); // 1 undefined
func({}); // undefined undefined

5.6 解构赋值与函数默认参数

在函数的参数解构中使用默认值时,需要注意函数参数的默认值的顺序:

function func({ a = 1, b = a } = {}) {
  console.log(a, b);
}
func(); // 1 1
func({ a: 2 }); // 2 2
func({ b: 3 }); // 1 3

5.7 防止解构赋值错误

确保在解构赋值之前检查对象或数组是否存在。如果对象或数组是 null 或 undefined,尝试解构将会引发错误:

let obj = null;
// const { a } = obj; // 这会抛出错误

obj = {};
const { a = 1 } = obj;
console.log(a); // 1

5.8 解构赋值中的计算属性名

如果需要解构具有动态计算属性名的对象,确保正确地使用方括号语法:

const key = 'b';
const obj = { a: 1, [key]: 2 };

const { [key]: value } = obj;
console.log(value); // 2

到此这篇关于深入理解JavaScript 解构赋值的文章就介绍到这了,更多相关JavaScript 解构赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • 小程序视频列表中视频的播放与停止的示例代码

    小程序视频列表中视频的播放与停止的示例代码

    本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 代码详解javascript模块加载器

    代码详解javascript模块加载器

    本篇文章通过代码示例给大家详细分析了javascript基础内容模块加载器的相关知识点,一起学习下。
    2018-03-03
  • JsonServer安装及启动过程图解

    JsonServer安装及启动过程图解

    这篇文章主要介绍了JsonServer安装及启动过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 树结构之JavaScript

    树结构之JavaScript

    本文主要介绍了JavaScript树结构的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序实现多层级复选框菜单

    微信小程序实现多层级复选框菜单

    这篇文章主要为大家详细介绍了微信小程序实现多层级复选框菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 全面了解javascript三元运算符

    全面了解javascript三元运算符

    下面小编就为大家带来一篇全面了解javascript三元运算符。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript建立一个语法高亮输入框实现思路

    JavaScript建立一个语法高亮输入框实现思路

    通常网站自带的textarea编辑器不能满足我们的需求比如高亮显示代码等,在这篇文章中,我将使用JavaScript库ACE来创建一个输入框效果,该脚本允许开发人员创建支持语法高亮的输入框,感兴趣的你可不要错过了哈
    2013-02-02
  • js获取当月最后一天实例代码

    js获取当月最后一天实例代码

    这篇文章主要介绍了js获取当月最后一天实例代码,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript函数柯里化实现原理及过程

    JavaScript函数柯里化实现原理及过程

    这篇文章主要介绍了JavaScript函数柯里化实现原理及过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 用document.documentElement取代document.body的原因分析

    用document.documentElement取代document.body的原因分析

    ll建议用document.documentElement代替document.body
    2009-11-11

最新评论