本文概述
- 对象解构和默认值
- 分配新的变量名
- 没有声明的转让
- 对象解构和休息算子
- 分配新的变量名称并同时提供默认值
销毁对象时, 我们使用键作为变量的名称。变量名称必须与对象的属性(或键)名称匹配。如果不匹配, 则它将收到未定义的值。这就是JavaScript知道我们要分配对象的哪个属性的方式。
在对象解构中, 通过键而不是位置(或索引)提取值。
首先, 尝试使用以下示例了解对象分解中的基本分配。
示例-简单分配
const num = {x: 100, y: 200};
const {x, y} = num;
console.log(x);
// 100console.log(y);
// 200输出如下
100200让我们了解基本的对象销毁分配。
示例-基本对象销毁分配
const student = {name: 'Arun', position: 'First', rollno: '24'};
const {name, position, rollno} = student;
console.log(name);
// Arunconsole.log(position);
// Firstconsole.log(rollno);
// 24输出如下
ArunFirst24对象解构和默认值与数组解构一样, 如果未定义从对象解压缩的值, 则可以将默认值分配给变量。从以下示例可以清楚地看出。
例子
const {x = 100, y = 200} = {x: 500};
console.log(x);
// 500console.log(y);
// 200在上面的示例中, 变量x和y的默认值为100和200。然后, 变量x的值重新分配为500。但是变量y没有重新分配, 因此保留了其原始值。因此, 我们将得到500和200, 而不是得到100和200的输出。
输出如下
500200分配新的变量名我们可以为变量分配与对象属性不同的名称。你可以看到相同的插图, 如下所示：
例子
const num = {x: 100, y: 200};
const {x: new1, y: new2} = num;
console.log(new1);
//100 console.log(new2);
//200在上面的示例中, 我们已将属性名称x和y分配给了局部变量new1和new2。
输出如下
100200没有声明的转让如果在声明变量时未分配其值, 则可以在解构期间分配其值。你可以看到相同的插图, 如下所示：
例子
let name, division;
({name, division} = {name: 'Anil', division: 'First'});
console.log(name);
// Anilconsole.log(division);
// First在上面的示例中, 应注意, 当使用不带声明的变量解构赋值时, 必须在赋值语句周围使用括号()。否则, 语法将无效。
输出如下
AnilFirst对象解构和休息算子【ES6对象解构】通过在对象分解中使用rest运算符(…), 我们可以将对象的所有其余键放在新的对象变量中。
让我们尝试通过一个例子来理解它。
例子
let {a, b, ...args} = {a: 100, b: 200, c: 300, d: 400, e: 500}console.log(a);
console.log(b);
console.log(args);
输出如下
100200{ c: 300, d: 400, e: 500 }分配新的变量名称并同时提供默认值从对象解压缩的属性可以分配给具有不同名称的变量。如果未定义解包值, 则会将默认值分配给它。
例子
const {a:num1=100, b:num2=200} = {a:300};
console.log(num1);
//300console.log(num2);
//200输出如下
300200推荐阅读
- ES6对象介绍和用法示例
- ES6数字介绍和用法示例
- ES6模块介绍和用法示例
- ES6循环语句解释和用法示例
- ES6 map介绍和用法详解
- ES6立即调用函数表达式(IIFE)
- ES6事件介绍和用法示例
- ES6生成器介绍和用法
- ES6函数介绍和用法示例