ES6之解构

本文详细介绍了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。

### ES6 对象解构赋值 #### 基本语法 对象的解构赋值允许提取对象中的属性并将其分配给变量。基本形式如下: ```javascript let obj = { prop1: "value1", prop2: 42 }; let { prop1, prop2 } = obj; console.log(prop1); // 输出:"value1" console.log(prop2); // 输出:42 ``` 此操作会创建两个新变量 `prop1` 和 `prop2`, 它们的初始值分别对应于对象 `obj` 中相应键对应的值[^1]。 #### 设置默认值 当尝试从不存在或未定义的对象属性获取值时,可以通过指定默认值来处理这种情况: ```javascript let userSettings = { theme: 'dark', }; // 使用默认参数 let { theme = 'light', fontSize = 16 } = userSettings; console.log(theme); // dark (来自实际数据) console.log(fontSize); // 16 (使用了默认设置) ``` 这里展示了如何为可能缺失的配置项提供合理的回退选项[^2]. #### 属性重命名 有时希望使用的局部变量名称不同于原始对象内的键名,在这种情况下可以采用别名机制完成映射关系建立: ```javascript const person = { firstName: 'John', lastName: 'Doe' }; let { firstName: name, lastName: surname } = person; console.log(name); // John console.log(surname); // Doe ``` 上述代码片段说明了即使原对象字段名为 `firstName` 和 `lastName`, 可以通过冒号后的部分自定义新的绑定目标名字[^3]. #### 处理剩余属性 对于那些不参与直接匹配却仍然存在于源对象里的其他成员,则可通过扩展运算符(`...`)捕获它们形成一个新的独立实体: ```javascript var sourceObj = { id: 7, title: "A Tale of Two Cities", author: "Charles Dickens", yearPublished: 1859 }; let {id, ...bookInfo} = sourceObj; console.log(id); // 7 console.log(bookInfo.title);// A Tale of Two Cities console.log(bookInfo.author); // Charles Dickens console.log(bookInfo.yearPublished); // 1859 ``` 这段例子表明除了显式声明过的 `id` 字段外,其余所有条目都被收集到了 `bookInfo` 这个新对象里去了.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值