JavaScript中的解構賦值

Panda 發布于2019-08-23 18:07 / 2658人閱讀

摘要：是這樣描述解構賦值的解構賦值語法是一種表達式用來將數組中的值或對象中的屬性取出來區分為不同變量?，F在讓我們將坐標點放進一個數組中現在要對這些點進行處理，傳統可以想到的方法是這樣的借助解構賦值，能變得這樣簡潔使用箭頭函數更簡潔

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;

數組的解構賦值

解構賦值能很好的運用在對象中，但它同樣也能很好的作用于數組中?，F在讓我們將坐標點放進一個數組中：

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賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104710.html

[譯]JavaScript ES6解構賦值指南

摘要：解構賦值允許我們將右邊的表達式看起來也像變量聲明一般，然后在左邊將值一一提取。數組的解構賦值現在假設我們有一個變量，其值為。通過，這會看上去更清晰簡潔最后的解構賦值給的語法帶來了更多的現代化。前言讓我們來仔細地看看ES6所帶來的更清晰的變量聲明與賦值語法?，F今的變量聲明語法十分的直接：左邊是一個變量名，右邊可以是一個數組：[]的表達式或一個對象：{}的表達式，等等。解構賦值允許我...

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