什么是解构赋值及其用途？

Posted 2023-02-22

【中文标题】什么是解构赋值及其用途？

【英文标题】：What is destructuring assignment and its uses?

【发布时间】：2019-07-03 10:56:06

【问题描述】：

我一直在阅读 ES6 中引入的 Destructuring assignment。

这种语法的目的是什么，为什么引入它，以及在实践中如何使用它的一些例子？

【问题讨论】：

解构是否包含rest/spread操作符？

@NickParsons 对我来说，这些看起来非常相关，所以我在这个问题中考虑它们，随时添加那些也有问题的

也相关：What do these three dots in React do?。很多关于解构、扩展语法和 Rest 参数的有用答案

这是一个很好的欺骗目标参考问题，并且在谷歌上被高度索引，这对我来说已经足够好了。 （搜索与解构相关的语法问题以链接到问题不包含“解构”的地方很痛苦）

这能回答你的问题吗？ Spread Syntax vs Rest Parameter in ES2015 / ES6

【参考方案1】：

什么是解构赋值？

解构赋值语法是一种 javascript 表达式，它可以将数组中的值或对象中的属性解包到不同的变量中。

-MDN

优势

A. 使代码简洁易读。

B.我们可以轻松避免重复破坏表达式。

一些用例

1.从 Objects,array 中获取变量中的值

let obj =  'a': 1,'b': 'b1': '1.1'
let a,b,b:b1 = obj
console.log('a--> ' + a, '\nb--> ', b, '\nb1---> ', b1)

let obj2 =  foo: 'foo' ;
let  foo: newVarName  = obj2;
console.log(newVarName);

let arr = [1, 2, 3, 4, 5]
let [first, second, ...rest] = arr
console.log(first, '\n', second, '\n', rest)


// Nested extraction is possible too:
let obj3 =  foo:  bar: 'bar'  ;
let  foo:  bar   = obj3;
console.log(bar);

2.将任意位置的数组与另一个数组合并。

let arr = [2,3,4,5]
let newArr = [0,1,...arr,6,7]
console.log(newArr)

3.仅更改对象中所需的属性

let arr = [a:1, b:2, c:3,a:4, b:5, c:6,a:7, b:8, c:9]

let op = arr.map( ( a,...rest, index) => (...rest,a:index+10))

console.log(op)

4.创建对象的浅拷贝

let obj = a:1,b:2,c:3
let newObj = ...obj
newObj.a = 'new Obj a'

console.log('Original Object', obj)
console.log('Shallow copied Object', newObj)

5.将参数中的值提取到独立变量中

// Object destructuring:
const fn = ( prop ) => 
  console.log(prop);
;
fn( prop: 'foo' );


console.log('------------------');


// Array destructuring:
const fn2 = ([item1, item2]) => 
  console.log(item1);
  console.log(item2);
;
fn2(['bar', 'baz']);


console.log('------------------');


// Assigning default values to destructured properties:

const fn3 = ( foo="defaultFooVal", bar ) => 
  console.log(foo, bar);
;
fn3( bar: 'bar' );

6.从对象获取动态键值

let obj = a:1,b:2,c:3
let key = 'c'
let [key]:value = obj

console.log(value)

7.从具有一些默认值的其他对象构建对象

let obj = a:1,b:2,c:3
let newObj = ((d=4,...rest = obj), d,...rest)
console.log(newObj)

8.交换值

const b = [1, 2, 3, 4];
[b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2

console.log(b);

9.获取对象的子集

9.1subset of an object:

const obj = a:1, b:2, c:3,
subset = ((a, c) => (a, c))(obj); // credit to Ivan N for this function

console.log(subset);

9.2 获取subset of an object using comma operator and destructuring：

const object =  a: 5, b: 6, c: 7  ;
const picked = (a,c=object, a,c)

console.log(picked); //  a: 5, c: 7 

10.做数组到对象的转换：

const arr = ["2019", "09", "02"],
date = (([year, day, month]) => (year, month, day))(arr);

console.log(date);

11. To set default values in function.（阅读此答案了解更多信息）

function someName(element, input,settings=i:"#1d252c", i2:"#fff",...input)
    console.log(settings.i)
    console.log(settings.i2)


someName('hello', i:'#123')
someName('hello', i2:'#123')

12.从数组中获取length 等属性、函数名、参数数量等。

let arr = [1,2,3,4,5];

let length = arr;

console.log(length);

let func = function dummyFunc(a,b,c) 
  return 'A B and C';


let name, length:funcLen = func;

console.log(name, funcLen);

【讨论】：

我想在解构时更改键名。我有一个来自某些 API 的对象，并且密钥在可读代码中没有意义，所以我需要使用它们并使其更好/可读：message: WeirdNameKey: 'Neil', MakesNoSense: 'Foo' // 想要：const name: WeirdNameKey, system: MakesNoSense = message; 我可以发誓我已经做到了，只是为了清理东西以备使用。但是，它不适合我。我只想提取和重新键入。我可以发誓我以前做过。有可能吗？

@NeilGuyLindberg 看一下上面答案中的第一个代码 sn-p ，您可以像这样替换键的名称，即const name: newName = name: 'some value'

谢谢@code-maniac。我看到我正在反转操作。我只需要翻转，所以我有：WeirdNameKey: name，现在代码读取良好。

【参考方案2】：

Javascript 的 De-structured assignment 可能是从 Perl 语言中汲取的灵感。

这通过避免编写 getter 方法或包装函数来促进重用。

我发现一个特别有用的最佳示例是重用返回的数据多于所需数据的函数。

如果有一个函数返回一个列表或数组或json，而我们只对列表或数组或json的第一项感兴趣， 那么我们可以简单地使用解构赋值而不是编写新的包装函数来提取感兴趣的数据项。

【参考方案3】：

这就像你可以用相同的变量名提取的东西

解构赋值是一个 JavaScript 表达式，它可以将数组中的值或对象中的属性解包为不同的变量。让我们使用解构赋值从数组中获取月份值

var [one, two, three] = ['orange', 'mango', 'banana'];

console.log(one); // "orange"
console.log(two); // "mango"
console.log(three); // "banana"

您可以使用解构赋值获取对象的用户属性，

var name, age = name: 'John', age: 32;

console.log(name); // John
console.log(age); // 32