ES6 变量的解构赋值

EatSleepPlayCode

已于 2022-06-17 22:14:16 修改

阅读量54

点赞数

分类专栏：学习日志文章标签： javascript 前端

于 2022-06-16 23:11:28 首次发布

本文链接：https://blog.csdn.net/EatSleepPlayCode/article/details/125324894

版权

学习日志专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文深入探讨JavaScript中的解构赋值，包括数组、对象、字符串和函数参数的解构，以及其用途和优势。例如，交换变量、从函数返回的数组中提取值、解析对象属性等。同时介绍了解构赋值的默认值、嵌套结构和Iterator接口的使用，展示了这一特性在实际开发中的灵活性。

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

振作精神，努力更新！

先定个小目标，每周更新3篇内容！

本周：2022 - 06 - 13 ~ 2022 - 06 - 19 （第一篇）

数组解构

// 正常解构
let [a, b, c] = [1, 2, 3]

// 按需解构
let [, , c] = [1, 2, 3]

// 三点运算
let [a, ...b] = [1, 2, 3]

// 不完全结构
let [a, b] = [1, 2, 3]
let [a, [b], c] = [1, [2, 3], 4]

// iterator 接口
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
let [a, b] = fibs()

// 默认值,结构对象取值判断采用 ===
let [a, b = '1'] = [2]

// 默认值为表达式
function f() {}
let [a = f()] = [1]
// a = 1,结构对象不可用才执行 f()

对象解构

let { foo, bar } = {
  foo: 'aaa',
  bar: 'bbb' 
}

// 非简写解构
let {foo: foo, bar: bar} = {
  foo: 'aaa',
  bar: 'bbb' 
}
// !!! 后者才是被赋值的对象
// !!! 前者是匹配模式

// 嵌套解构
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;

// 嵌套赋值
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

// 解构赋值取继承的属性
const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1;
// foo = "bar"

// 默认值
let {a = 1} = {}

// 先声明变量的解构方式
let a;
({a} = {a: 1})

字符串的解构

let [a, b] = 'hello'
let {length: len} = 'hello'
// len = 5

函数参数的解构

// 参数为数组，自动解构参数
function add([x, y]) {
  // 相当于执行了：
  // let [x, y] = [x, y]
  return x + y
}

// 参数使用默认值
function foo(x = 1) {
  console.log(x)
}

解构赋值用途举例：

// 1
let x,y
[x, y] = [y, x]

// 2
function fn() {
  return [1, 2]
}
let [a, b] = fn()

// 3
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
                       
// 4
const { foo } = require('foo')