Question

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

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

Answer 1

什么是解构分配？

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

优势

A。。使代码简明易懂。

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

一些用例

1。要从对象获取变量值，数组

let obj = { 'a': 1,'b': {'b1': '1.1'}}
let {a,b,b:{b1}} = obj

console.log('a--> ' + a, '\nb--> ', b, '\nb1---> ', b1)

let arr = [1, 2, 3, 4, 5]
let [first, second, ...rest] = arr
console.log(first, '\n', second, '\n', rest)

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。分割字符串

let str = 'abcdefghijklmonpqrstuvwxyz'
console.log("Alphabet array ---\\\n",[...str])

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.1 subset 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。要从数组，函数名称，Args数量等获取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)

Answer 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

Answer 3

Java的结构化分配可能是从Perl语言中获得的灵感。

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

我发现一个非常有帮助的最佳例子是重用函数，该函数返回的数据超出了所需的数量。

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

什么是销毁分配及其用途？

3 个答案: