耀极客论坛

 找回密码
 立即注册
查看: 644|回复: 0

JavaScript解构赋值详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 01:26:06 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了JavaScript解构赋值,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

概念
  ES6提供了更简洁的赋值模式,从数组和对象中提取值,这被称为解构
  示例:
  1. [a, b] = [50, 100];
  2. console.log(a);
  3. // expected output: 50
  4. console.log(b);
  5. // expected output: 100
  6. [a, b, ...rest] = [10, 20, 30, 40, 50];
  7. console.log(rest);
  8. // expected output: [30, 40, 50]
复制代码
数组解构
  数组解构是非常简单简洁的,在赋值表达式的左侧使用数组字面量,数组字面量中的每个变量名称映射为解构数组的相同索引项
  这是什么意思呢,就是如下面这个示例一样,左边数组中的项分别得到了右侧解构数组相应索引的值
  1. let [a, b, c] = [1, 2, 3];
  2. // a = 1
  3. // b = 2
  4. // c = 3
复制代码
声明分别赋值
  你可以通过变量声明分别解构赋值
  示例:声明变量,分别赋值
  1. // 声明变量
  2. let a, b;
  3. // 然后分别赋值
  4. [a, b] = [1, 2];
  5. console.log(a); // 1
  6. console.log(b); // 2
复制代码

解构默认值
  如果解构取出的值是undefined,可以设置默认值:
  1. let a, b;
  2. // 设置默认值
  3. [a = 5, b = 7] = [1];
  4. console.log(a); // 1
  5. console.log(b); // 7
复制代码
  在上面的例子中,我们给a和b均设置了默认值

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

交换变量值
  以往我们进行两个变量的交换,都是使用
  1. //交换ab
  2. c = a;
  3. a = b;
  4. b = c;
复制代码
  或者异或的方法
  然而在解构赋值中,我们可以在一个解构表达式中交换两个变量值
  1. let a = 1;
  2. let b = 3;
  3. //交换a和b的值
  4. [a, b] = [b, a];
  5. console.log(a); // 3
  6. console.log(b); // 1
复制代码
解构函数返回的数组
  我们可以直接解构一个返回值为数组的函数
  1. function c() {
  2.   return [10, 20];
  3. }
  4. let a, b;
  5. [a, b] = c();
  6. console.log(a); // 10
  7. console.log(b); // 20
复制代码
  在上面的例子中,**c()**的返回值[10,20]可以在单独的同一行代码中使用解构

忽略返回值(或跳过某一项)
  你可以有选择性的跳过一些不想得到的返回值
  1. function c() {
  2.   return [1, 2, 3];
  3. }
  4. let [a, , b] = c();
  5. console.log(a); // 1
  6. console.log(b); // 3
复制代码
赋值数组剩余值给一个变量
  当你使用数组解构时,你可以把赋值数组剩余的部分全部赋给一个变量
  1. let [a, ...b] = [1, 2, 3];
  2. console.log(a); // 1
  3. console.log(b); // [2, 3]
复制代码
  这样的话b也会变成一个数组了,数组中的项是剩余的所有项
  注意:

  这里要小心结尾是不能再写逗号的,如果多了一个逗号将会报错
  1. let [a, ...b,] = [1, 2, 3];
  2. // SyntaxError: rest element may not have a trailing comma
复制代码
嵌套数组解构
  像对象一样,数组也可以进行嵌套解构
  示例:
  1. const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
  2. // Use nested destructuring to assign red, green and blue
  3. // 使用嵌套解构赋值 red, green, blue
  4. const [hex, [red, green, blue]] = color;
  5. console.log(hex, red, green, blue); // #FF00FF 255 0 255
复制代码
字符串解构
  在数组解构中,解构的目标若为可遍历对象,皆可进行解构赋值,可遍历对象即实现Iterator接口的数据
  1. let [a, b, c, d, e] = 'hello';
  2. /*
  3. a = 'h'
  4. b = 'e'
  5. c = 'l'
  6. d = 'l'
  7. e = 'o'
  8. */
复制代码
对象解构

基础对象解构
  1. let x = { y: 22, z: true };
  2. let { y, z } = x; // let {y:y,z:z} = x;的简写
  3. console.log(y); // 22
  4. console.log(z); // true
复制代码
赋值给新变量名
  当使用对象解构时可以改变变量的名称
  1. let o = { p: 22, q: true };
  2. let { p: foo, q: bar } = o;
  3. console.log(foo); // 22
  4. console.log(bar); // true
复制代码
  如上代码var {p: foo} = o 获取对象 o 的属性名 p,然后赋值给一个名称为 foo 的变量
解构默认值
  如果解构取出的对象值是undefined,我们可以设置默认值
  1. let { a = 10, b = 5 } = { a: 3 };
  2. console.log(a); // 3
  3. console.log(b); // 5
复制代码
赋值给新对象名的同时提供默认值
  前面提到过我们赋值给新的对象名,这里我们可以给这个新的对象名提供一个默认值,如果没有解构它,就会自动使用默认值
  1. let { a: aa = 10, b: bb = 5 } = { a: 3 };
  2. console.log(aa); // 3
  3. console.log(bb); // 5
复制代码
同时使用数组和对象解构
  在结构中数组和对象可以一起使用
  1. const props = [
  2.   { id: 1, name: 'Fizz' },
  3.   { id: 2, name: 'Buzz' },
  4.   { id: 3, name: 'FizzBuzz' },
  5. ];
  6. const [, , { name }] = props;
  7. console.log(name); // "FizzBuzz"
复制代码
不完全解构
  1. let obj = {p: [{y: 'world'}] };
  2. let {p: [{ y }, x ] } = obj;//不解构x
  3. // x = undefined
  4. // y = 'world'
复制代码
赋值剩余值给一个对象
  1. let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
  2. // a = 10
  3. // b = 20
  4. // rest = {c: 30, d: 40}
复制代码
嵌套对象解构(可忽略解构)
  1. let obj = {p: ['hello', {y: 'world'}] };
  2. let {p: [x, { y }] } = obj;
  3. // x = 'hello'
  4. // y = 'world'
  5. let obj = {p: ['hello', {y: 'world'}] };
  6. let {p: [x, {  }] } = obj;//忽略y
  7. // x = 'hello'
复制代码
注意事项

小心使用已声明变量进行解构
  错误示范:
  1. let x;
  2. {x} = {x: 1};
复制代码
  JavaScript引擎会将{x}理解为一个代码块,从而产生语法错误,我们要避免将大括号写在行首,避免JavaScript将其解释为代码块

  正确写法:
  1. let x;
  2. ({x} = {x: 1});
复制代码
  正确写法将整个解构赋值语句放在一个圆括号里,就可以正确执行了

函数参数的解构赋值
  函数的参数也可以使用解构赋值
  1. function add([x, y]) {
  2. return x + y;
  3. }
  4. add([1, 2]);
复制代码
  上面代码中,函数add的参数表面上是一个数组,但在传参的时候,数组参数就被解构为变量x和y了,对于函数内部来说,就和直接传入x和y是一样的

解构的用途
  解构赋值的用法很多

交换变量的值
  1. let x = 1;
  2. let y = 2;
  3. [x, y] = [y, x];
复制代码
  上面的代码交换x和y的值,这样的写法不仅简洁而且易读,语义清晰

从函数返回多个值
  函数只能返回一个值,如果要返回多个值,我们只能将这些值放置数组或对象里返回,当我们有了解构赋值后,从对象或数组里取出这些值犹如探囊取物
  1. // 返回一个数组
  2. function example() {
  3.   return [1, 2, 3];
  4. }
  5. let [a, b, c] = example();
  6. // 返回一个对象
  7. function example() {
  8.   return {
  9.     foo: 1,
  10.     bar: 2
  11.   };
  12. }
  13. let { foo, bar } = example();
复制代码
提取JSON数据
  解构赋值对于提取JSON对象中的数据,尤其有用
  示例:
  1. let jsonData = {
  2.   id: 42,
  3.   status: "OK",
  4.   data: [867, 5309]
  5. };
  6. let { id, status, data: number } = jsonData;
  7. console.log(id, status, number);
  8. // 42, "OK", [867, 5309]
复制代码
  使用上面的代码,我们就可以快速取出JSON数据中的值

总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:46 , Processed in 0.065316 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表