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

Question

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

javascriptecmascript-6destructuringobject-destructuring

20

我一直在阅读关于ES6中引入的解构赋值的内容。

这种语法的目的是什么？它为什么被引入？在实践中如何使用它的例子有哪些？

- Code Maniac

解构包括剩余/扩展运算符吗？ - Nick Parsons

2

@NickParsons 对我来说，这些看起来非常相关，所以我正在考虑将它们包含在这个问题中，随时可以在问题中添加它们。 - Code Maniac

还有相关内容：React中这三个点是什么意思？。关于解构、展开语法和剩余参数有很多有用的答案。 - adiga

1

这是一个非常好的重复目标参考问题，并且在谷歌上高度索引，对我来说已经足够好了。（在搜索不包含“解构”关键字的解构相关语法问题时进行链接是一件痛苦的事情） - CertainPerformance

3个回答

2

这是一种类似于可以使用相同变量名提取的东西。

解构赋值是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

- vishu2124

0

Javascript的解构赋值可能是从Perl语言中汲取的灵感。

这样可以通过避免编写getter方法或包装函数来实现重用。

我发现一个非常有用的最佳实践是在重用返回比所需数据更多的函数时。如果有一个返回列表、数组或json的函数，而我们只对列表、数组或json的第一项感兴趣，那么我们可以简单地使用解构赋值，而不是编写一个新的包装函数来提取有趣的数据项。

- Gopinath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Code Maniac · Accepted Answer

什么是解构赋值？

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

- 来自MDN

优点

使代码简洁易读。
可以轻松避免重复的解构表达式。

一些使用案例

从对象和数组中获取变量的值

```javascript 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)

// 嵌套提取也是可能的: let obj3 = { foo: { bar: 'bar' } }; let { foo: { bar } } = obj3; console.log(bar); ```

只更改对象中的所需属性

```javascript 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) ```

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

```javascript // 对象解构: const fn = ({ prop }) => { console.log(prop); }; fn({ prop: 'foo' });

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

// 数组解构: const fn2 = ([item1, item2]) => { console.log(item1); console.log(item2); }; fn2(['bar', 'baz']);

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

// 为解构的属性分配默认值:

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

从对象中获取动态键值

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

console.log(value) ```

交换值

```javascript const b = [1, 2, 3, 4]; [b[0], b[2]] = [b[2], b[0]]; // 交换索引0和2的值

console.log(b); ```

获取对象的子集

```javascript const obj = {a:1, b:2, c:3}, subset = (({a, c}) => ({a, c}))(obj); // 感谢Ivan N提供的函数

console.log(subset); ```

使用逗号运算符和解构来获取对象的子集

```javascript const object = { a: 5, b: 6, c: 7 }; const picked = ({a,c}=object, {a,c})

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

数组转对象

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

console.log(date); ```

在函数中设置默认值

```javascript 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'}); ```

从数组中获取属性，如`length`，函数名，参数数量等

```javascript 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); ```