JavaScript是一种很有趣的语言,我个人很喜欢它,虽然仍还有些人不大喜欢它。在ECMAScript6(ES6)中,有许多有用的特性来使JavaScript开发更有趣。在本文中,我将来探讨一些关于解构赋值的内容,并提供一些可能有用的实际例子。
MDN是这样描述解构赋值的:
解构赋值语法是一种 JavaScript表达式 用来将 数组中的值或对象中的 属性 取出来区分为不同变量。
假设你有一个对象用来表示3维空间中的一个点:
let myPointInSpace = {
x: 3,
y: -2,
z: 2.7
}
假设你要用这些坐标做一些 计算,你会将这些坐标取出并赋值给变量 以便 后续使用
//sqrt() 平方根
let distance = Math.sqrt(x*x + y*y + z*z);
这样确实可以生效。但是如果你做了足够多次,你可能已经很厌烦这样的复制粘贴了。使用解构赋值,你能更简单的采集到这些坐标:
let {x,y,z} = myPointInSpace;
let distance1 = Math.sqrt(x*x + y*y + z*z);
这里的大括号指明了解构赋值。上面代码中的第一行查看了myPointInSpace变量,并从中查找大括号内指明的任何属性,最后返回他们并赋值为独立的变量。
如果你只需要x和y坐标,你也可以这样做:
let {x,y} = myPointInSpace;
解构赋值能很好的运用在对象中,但它同样也能很好的作用于数组中。现在让我们将坐标点放进一个数组中:
var myPointInSpaces= [{x:12,y:33,z:44},{x:12,y:22,z:32}];
现在要对这些点进行处理,传统可以想到的方法是这样的
var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(function(value,index,array){
console.log(value.x);//11 12
console.log(value.y);//21 22
console.log(value.z);//31 33
return {
x:value.x + 1,
y:value.y + 1,
z:value.z + 1
}
})
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]
借助解构赋值,能变得这样简洁:
var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(function({x,y,z},index,array){
console.log(x);//11 12
console.log(y);//21 22
console.log(z);//31 33
return {
x:x + 1,
y:y + 1,
z:z + 1
}
})
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]
使用箭头函数更简洁
var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(({x,y,z})=>({
x:x+1,
y:y+1,
z:z+1
}))
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]
最近在使用Redux想到一个问题,Redux里常用的一种语法是这样的:Redux通过解构赋值...state,保留了state里未修改的部分,并覆盖修改的部分
赋值是将某一数值或对象赋给某个变量的过程,分为:1、基本数据类型:赋值,赋值之后两个变量互不影响;2、引用数据类型:赋址,两个变量具有相同的引用,指向同一个对象,相互之间有影响
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!