代码之家 › 专栏 › 技术社区 › Code Maniac

什么是破坏性赋值,它的用途是什么?

destructuring ecmascript-6 javascript

Code Maniac · 技术社区 · 7 年前

我一直在读关于 Destructuring assignment 在ES6中引入。

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

1 回复 | 直到 7 年前

community wiki 10 revs, 5 users 76% Code Maniac 7 年前

什么是破坏任务?

这个 破坏性分配 语法是一个javascript表达式,它可以将数组中的值或对象中的属性解包为不同的变量。

一些用例

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)

三。仅更改对象中所需的属性

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。获取对象的子集

九点一 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得到A subset of an object using comma operator and destrcturing :

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'})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前