JavaScript中的解构赋值

Panda 发布于2019-08-23 18:07 / 2649人阅读

摘要：是这样描述解构赋值的解构赋值语法是一种表达式用来将数组中的值或对象中的属性取出来区分为不同变量。现在让我们将坐标点放进一个数组中现在要对这些点进行处理，传统可以想到的方法是这样的借助解构赋值，能变得这样简洁使用箭头函数更简洁

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}]

云服务器 GPU云服务器解构赋值 java中的赋值方法 javascript连续赋值 javascript_json赋值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104710.html

[译]JavaScript ES6解构赋值指南

摘要：解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。数组的解构赋值现在假设我们有一个变量，其值为。通过，这会看上去更清晰简洁最后的解构赋值给的语法带来了更多的现代化。前言让我们来仔细地看看ES6所带来的更清晰的变量声明与赋值语法。现今的变量声明语法十分的直接：左边是一个变量名，右边可以是一个数组：[]的表达式或一个对象：{}的表达式，等等。解构赋值允许我...

Jeff 2019-08-21 10:33 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
javascript解构赋值

摘要：此文章为意译并非直译，可参考具体原文解构赋值具体干什么解构赋值是中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。此文章为意译并非直译，可参考具体原文解构赋值具体干什么？解构赋值是javascript中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。直接来段代码感受下 let a,b,rest; [a,b] =...

canopus4u 2019-08-22 13:58 评论0 收藏0
JavaScript基础之ES6对象解构赋值

摘要：具体的分析暂时不讨论解决的方式很简单，把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量对象解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 评论0 收藏0
ECMASCRIPT 6 实战之解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是...

yangrd 2019-08-26 13:54 评论0 收藏0