ES6之解构

最新推荐文章于 2025-05-13 17:00:59 发布

gxgalaxy

最新推荐文章于 2025-05-13 17:00:59 发布

阅读量491

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ES6

本文链接：https://blog.youkuaiyun.com/gxgalaxy/article/details/107941423

ES6 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了ES6中的解构赋值特性，包括对象解构、数组解构和参数解构，展示了如何利用解构赋值简化变量赋值过程，并提供了默认值设置、多重解构和展开运算符的使用示例。

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

文章目录

ECMAScript5及早期版本从数组和对象中获取特定的数据

let options = {
  repeat: true,
  save: false
}
let repeat = options.repeat,
    save = options.save;

从options对象中提取了repeat和sava的值并将其存储为同名的局部变量。

一、对象解构

1.对象解构

对象解构的语法形式是在一个赋值操作符左边放置一个对象字面量

let node = {
  type: 'Identifier',
  name: 'foo'
}

let {type, name} = node;
console.log(type);  // 'Identifier'
console.log(name);  // 'foo'

在这里插入图片描述

2.解构赋值

可以在定义变量之后修改值

let node = {
  type: 'Identifier',
  name: 'foo'
  },
  type = "Literal";
  name = 5;
  //使用解构语法为多个变量赋值
  ({type, name} = node);
console.log(type);  // 'Identifier'
console.log(name);  // 'foo'

在这里插入图片描述

3.解构中默认值

在使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那变量值默认为undefined.

let node = {
  type: 'Identifier',
  name: 'foo'
  };
let {type, name, value} = node
console.log(type);  // 'Identifier'
console.log(name);  // 'foo'
console.log(value); //undefined

在这里插入图片描述
当指定的属性不存在是，可以随意定义一个默认值。

let node = {
  type: 'Identifier',
  name: 'foo'
  };
let {type, name, value = true} = node
console.log(type);  // 'Identifier'
console.log(name);  // 'foo'
console.log(value); //undefined

在这里插入图片描述

4.为非同名局部变量赋值

到目前为止，解构赋值使用的都是与对象属性同名的局部变量，例如node.type的值被存储在了变量type中，如果你希望使用不同名的局部变量来存储对象属性的值，可以使用如下的方法：

let node = {
  type: 'Identifier',
  name: 'foo'
  };
let {type: localType, name: localName} = node
console.log(localType);  // 'Identifier'
console.log(localName);  // 'foo'

在这里插入图片描述
如果添加的属性不存在，可以为他赋默认值

let node = {
  type: 'Identifier',
  name: 'foo'
  };
let {type: localType, name: localName, age: localAge=23} = node
console.log(localType);  // 'Identifier'
console.log(localName);  // 'foo'
console.log(localAge);

在这里插入图片描述

5.多重解构

let node = {
  type: 'Identifier',
  name: 'foo',
  loc: {
    start: {
      line: 1,
      column: 1 
    },
    end: {
      line: 1,
      column: 4
    }
  }
};
let { loc: {start}} = node;
console.log(start.line);  // 1
console.log(start.column);  // 1

在这里插入图片描述
我们在解构模式中使用了花括号，其含义为在找到node对象中的loc属性后，应当深入一层继续查找start属性。
也可以为对象属性名赋新的名字

let node = {
  type: 'Identifier',
  name: 'foo',
  loc: {
    start: {
      line: 1,
      column: 1 
    },
    end: {
      line: 1,
      column: 4
    }
  }
};
let { loc: {start: localStart}} = node;
console.log(localStart.line);  // 1
console.log(localStart.column);  // 1

二、数组解构

1.数组解构

let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
console.log(firstColor,secondColor);

在这里插入图片描述
在数组解构的语法中，我们通过值在数组中的位置进行选取，未显示声明的元素会被忽略，在整个过程中数组本身不会发生任何变化。
在解构模式中，也可以直接忽略元素。只取第三个值

let colors = ['red', 'green', 'blue'];
let [ , , thirdColor] = colors;
console.log(thirdColor);

在这里插入图片描述

2.解构赋值

let colors = ['red', 'green', 'blue'],
    firstColor = 'black',
    secondColor = 'purple';
[firstColor, secondColor] = colors
console.log(firstColor, secondColor);

1) 实现变量的交换

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

等号的左侧是一个解构模式，等号的右侧是一个为交换过程创建的临时数组字面量。
在这里插入图片描述

3.默认值

可以为数组中的任意位置添加默认值，当指定位置的属性不存在或其值为undefined时使用默认值

let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor, ,fourColor = 'black'] = colors
console.log(firstColor, secondColor,fourColor);

在这里插入图片描述

4.多重解构

let colors = ['red', ['green', 'black'], 'blue'];
let [firstColor, [secondColor]] = colors
console.log(firstColor, secondColor);

5.展开运算符(不定元素)

在数组中，可以通过…语法将数组中的其余元素赋值给一个特定的变量。


let colors = ['red', 'green', 'blue'];
let [firstColor, ...secondColor] = colors
console.log(firstColor);
console.log(secondColor);

在这里插入图片描述
数组中的第一个元素赋值给了firstColor，其余的元素被赋值给了secondColor数组，所以数组中有两个元素。

1）实现数组复制

EXMAScript5中使用cancat()实现数组复制

let colors = ['red', 'green', 'blue'];
let cloneColors = colors.concat();
console.log(cloneColors);

ES6中

let colors = ['red', 'green', 'blue'];
let [...cloneColors] = colors;
console.log(cloneColors);

在这里插入图片描述

三、参数解构

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

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。