es6解构赋值

最新推荐文章于 2023-05-08 17:31:56 发布

侯先生的博客

最新推荐文章于 2023-05-08 17:31:56 发布

阅读量84

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/houguangzhao/article/details/111252134

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的解构赋值概念，包括数组和对象的解构，以及如何利用解构进行默认值设定、变量交换、忽略不必要值、剩余数组赋值和重命名变量等操作。此外，还展示了在处理接口返回数据和遍历ForOf迭代中的实际应用案例。

摘要由CSDN通过智能技术生成

定义：

解构赋值就是从目标对象或数组中提取自己想要的变量。最常用的场景是：element-ui,vant-ui按需引入，请求接口返回数据，提取想要数据。

语法：

//数组结构
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

//对象解构
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// ...rest 解构数组
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

// ...rest 解构对象（最新）
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

//解析一个从函数返回
function f() {
  return [1, 2];
}

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

更多应用场景

默认值

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

交换变量

var a = 1;
var b = 3;

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

忽略你不感兴趣的返回值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

将剩余数组赋值给一个变量
当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

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

给新的变量名赋值
**可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

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

For of 迭代和解构

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"