ES6 - 解构赋值（学者说）

最新推荐文章于 2024-02-04 17:19:07 发布

Scholar ？

最新推荐文章于 2024-02-04 17:19:07 发布

阅读量89

点赞数 2

分类专栏： ES6 文章标签： es6

本文链接：https://blog.youkuaiyun.com/SSansui/article/details/110095615

版权

ES6 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了JavaScript ES6的解构赋值特性，包括数组、对象、默认值、交换变量、忽略值及剩余操作等应用场景，并通过实例展示了如何在函数返回值、for...of循环中使用解构赋值，帮助开发者更好地理解和利用这一强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6解构赋值

 前言：解构赋值语法是一种JavaScript表达式。通过解构赋值，可以将属性/属性值从对象/数组中取出，然后赋值给其他变量

语法

 数组解构

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} = {a:10,b:20,c:30,d:40})
console.log(a) // 10
console.log(b) // 20
console.log(rest)   // {c:30,d:40}

 ...rest 解构数组

[a,b,...rest] = [10, 20 , 30 ,40 ,50]
console.log(a) // 10
console.log(b) // 20
console.log(rest)  // [30,40,50]

 解构一个从函数返回

function f(){
	return [1,2]
}
var a,b
[a,b] = f()
console.log(a)  // 1
console.log(b)  // 2

更多应用场景

 默认值

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

 交换变量

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 j = {a: 33, b: false};
var {a: aa, b: bb} = j;
console.log(aa); // 33 
console.log(bb); // false

 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"