我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript解构赋值详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript解构赋值详解

概念

ES6提供了更简洁的赋值模式,从数组和对象中提取值,这被称为解构

示例:


[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

数组解构

数组解构是非常简单简洁的,在赋值表达式的左侧使用数组字面量,数组字面量中的每个变量名称映射为解构数组的相同索引项

这是什么意思呢,就是如下面这个示例一样,左边数组中的项分别得到了右侧解构数组相应索引的值


let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

声明分别赋值

你可以通过变量声明分别解构赋值

示例:声明变量,分别赋值


// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

解构默认值

如果解构取出的值是undefined,可以设置默认值:


let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

在上面的例子中,我们给a和b均设置了默认值

这种情况下,如果a或b的值是undefined,它将把设置的默认值赋给相应变量(5赋给a,7赋给b)

交换变量值

以往我们进行两个变量的交换,都是使用


//交换ab
c = a;
a = b;
b = c;

或者异或的方法

然而在解构赋值中,我们可以在一个解构表达式中交换两个变量值


let a = 1;
let b = 3;
//交换a和b的值
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数


function c() {
  return [10, 20];
}
let a, b;
[a, b] = c();
console.log(a); // 10
console.log(b); // 20

在上面的例子中,**c()**的返回值[10,20]可以在单独的同一行代码中使用解构

忽略返回值(或跳过某一项)

你可以有选择性的跳过一些不想得到的返回值


function c() {
  return [1, 2, 3];
}
let [a, , b] = c();
console.log(a); // 1
console.log(b); // 3

赋值数组剩余值给一个变量

当你使用数组解构时,你可以把赋值数组剩余的部分全部赋给一个变量


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

这样的话b也会变成一个数组了,数组中的项是剩余的所有项

注意:

这里要小心结尾是不能再写逗号的,如果多了一个逗号将会报错


let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样,数组也可以进行嵌套解构

示例:


const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解构

在数组解构中,解构的目标若为可遍历对象,皆可进行解构赋值,可遍历对象即实现Iterator接口的数据


let [a, b, c, d, e] = 'hello';

对象解构

基础对象解构


let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写
console.log(y); // 22
console.log(z); // true

赋值给新变量名

当使用对象解构时可以改变变量的名称


let o = { p: 22, q: true };
let { p: foo, q: bar } = o;
console.log(foo); // 22
console.log(bar); // true

如上代码var {p: foo} = o 获取对象 o 的属性名 p,然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined,我们可以设置默认值


let { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名,这里我们可以给这个新的对象名提供一个默认值,如果没有解构它,就会自动使用默认值


let { a: aa = 10, b: bb = 5 } = { a: 3 };
console.log(aa); // 3
console.log(bb); // 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用


const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];
const [, , { name }] = props;
console.log(name); // "FizzBuzz"

不完全解构


let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x
// x = undefined
// y = 'world'

赋值剩余值给一个对象


let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

嵌套对象解构(可忽略解构)


let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

注意事项

小心使用已声明变量进行解构

错误示范:


let x;
{x} = {x: 1};

JavaScript引擎会将{x}理解为一个代码块,从而产生语法错误,我们要避免将大括号写在行首,避免JavaScript将其解释为代码块

正确写法:


let x;
({x} = {x: 1});

正确写法将整个解构赋值语句放在一个圆括号里,就可以正确执行了

函数参数的解构赋值

函数的参数也可以使用解构赋值


function add([x, y]) {
	return x + y;
}
add([1, 2]);

上面代码中,函数add的参数表面上是一个数组,但在传参的时候,数组参数就被解构为变量x和y了,对于函数内部来说,就和直接传入x和y是一样的

解构的用途

解构赋值的用法很多

交换变量的值


let x = 1;
let y = 2;
[x, y] = [y, x];

上面的代码交换x和y的值,这样的写法不仅简洁而且易读,语义清晰

从函数返回多个值

函数只能返回一个值,如果要返回多个值,我们只能将这些值放置数组或对象里返回,当我们有了解构赋值后,从对象或数组里取出这些值犹如探囊取物


// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

提取JSON数据

解构赋值对于提取JSON对象中的数据,尤其有用

示例:


let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

使用上面的代码,我们就可以快速取出JSON数据中的值

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript解构赋值详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Javascript 中的解构赋值语法

首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。

Javascript中解构赋值的含义

这篇文章主要介绍“Javascript中解构赋值的含义”,在日常操作中,相信很多人在Javascript中解构赋值的含义问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Javascript中解构赋值的含义”的疑
2023-06-14

JavaScript解构赋值的简写方法

这篇文章将为大家详细讲解有关JavaScript解构赋值的简写方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。解构赋值简写方法在web框架中,经常需要从组件和API之间来回传递数组或对象字面形式的数据,
2023-06-27

JavaScript解构赋值:重新定义变量声明和赋值的方式

JavaScript解构赋值是一种简洁高效的变量声明和赋值方式,它允许我们从数组或对象中提取特定元素并将其分配给变量。
JavaScript解构赋值:重新定义变量声明和赋值的方式
2024-02-22

JavaScript解构赋值的实用技巧是什么

这篇文章跟大家分析一下“JavaScript解构赋值的实用技巧是什么”。内容详细易懂,对“JavaScript解构赋值的实用技巧是什么”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习
2023-06-28

JavaScript解构赋值的常见场景有哪些

这篇文章主要为大家展示了“JavaScript解构赋值的常见场景有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript解构赋值的常见场景有哪些”这篇文章吧。1. 提取数据先来看
2023-06-25

掌握 JavaScript 解构赋值:优化你的代码

JavaScript 解构赋值是一种现代 JavaScript 特性,允许轻松地从数组和对象中提取数据。了解其用法将让你的代码更加简洁、可读,并提高你的编程效率。
掌握 JavaScript 解构赋值:优化你的代码
2024-02-11

如何在Javascript中使用解构赋值语法

本篇文章给大家分享的是有关如何在Javascript中使用解构赋值语法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。前言首先在 ES6中引入的“解构赋值语法”允许把数组和对象中
2023-06-14

ES6解构赋值(数组,对象,函数)使用详解

这篇文章主要介绍了ES6解构赋值(数组,对象,函数)使用详解,JavaScript中最常用的两种数据结构是Object和Array,解构操作对那些具有很多参数和默认值等的函数也很奏效,本文通过实例代码详细讲解需要的朋友可以参考下
2022-11-16

编程热搜

目录