成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6：解構——JavaScript 從數(shù)組和對象中提取數(shù)據(jù)的優(yōu)雅方法

GraphQuery / 1042人閱讀

摘要：跳過數(shù)組中的元素學會了如何按順序從數(shù)組中提取數(shù)據(jù)。解構方法中提供了很好的解決方案。從對象中提取數(shù)據(jù)依然從最基本的開始，提取從中提取和。

本文編譯：胡子大哈 


翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6  
英文連接：ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript

轉載請注明出處，保留原文鏈接以及作者信息

ES6 有很多新特性，它很大程度上提升了 JavaScript 的編程體驗，并且也告訴外界，JavaScript 依舊強勢。

其中一個新特性是其對數(shù)組和對象的解構，通過解構方法從數(shù)組和對象中提取數(shù)據(jù)變得非常簡單和方便。接下來看一下它是如何做到的，我們從數(shù)組開始講起。

從數(shù)組中提取數(shù)據(jù)

假設你有如下的數(shù)組，里面是幾個人的名字：

    const names = ["Luke", "Eva", "Phil"];

接下來，使用解構從里面提取數(shù)據(jù)。

從數(shù)組中取元素

首先從最基本的開始——提取數(shù)組中第一個元素。

    const [first] = names;  
    console.log(first); // "Luke"

ok，下面分析一下這個語法都做了什么。把一個變量用中括號括起來，表示我們想要取得 names 數(shù)組中的第一個元素，并且把它分配給指定的變量，本例中即變量 first。

那么現(xiàn)在想要提取幾個元素，比如第一個和第二個怎么辦呢？很簡單，在中括號中添加變量就可以。這樣會從數(shù)組中順序提取幾個元素分配給指定的變量。

    const [first, second] = names;  
    console.log(first, second); // "Luke" "Eva"
元素缺失時的默認值

以上面的數(shù)組為例，如果我們要取 4 個值，而數(shù)組中只有 3 個值會發(fā)生什么呢？

    const [first, second, third, fourth] = names;  
    console.log(fourth); // undefined

這種場景下，fourth 是 underfined。

這在很多場景下都是我們不想見到的，所以可以當數(shù)組中沒有那么多的值的時候，我們可以提前給變量賦上默認值。

    const [first, second, third, fourth="Martin"] = names;  
    console.log(fourth); // "Martin"
跳過數(shù)組中的元素

學會了如何按順序從數(shù)組中提取數(shù)據(jù)?，F(xiàn)在有這樣的場景：想要跳過數(shù)組中的某個元素取值，這樣就可以避免取到不想取的值。解構方法中提供了很好的解決方案。

    var [first, , second] = names;  
    console.log(first, second); // "Luke" "Phil"

通過簡單的添加逗號，就可以避免分配相應的數(shù)組元素，直接跳到下一個元素了。如果想要跳過多個元素呢？也很簡單，多加幾個逗號就可以了。

分配數(shù)組中剩下的給某元素

到現(xiàn)在，已經(jīng)知道了如何從數(shù)組中提取單個元素，那么對于想要取數(shù)組中的后面連續(xù)部分的元素怎么辦呢？看下面的解構代碼。

    var [first, ...rest] = names;  
    console.log(rest); // ["Eva","Phil"]

通過在最后一個變量前加 ... 標記，這個意思是分配數(shù)組中剩下的所有元素給 rest 變量。

解構對象

ok，數(shù)組的解構已經(jīng)都學會了，下面看一下從對象中提取數(shù)據(jù)，假設有如下描述一個人的對象。

    const person = {  
      name: "Luke",
      age: "24",
      facts: {
        hobby: "Photo",
        work: "Software Developer"
      }
    }
從對象中提取數(shù)據(jù)

依然從最基本的開始，提取從 person 中提取 name 和 age。

    const {name, age} = person;  
    console.log(name, age); // "Luke" "24"

可以看到，和從數(shù)組中提取數(shù)據(jù)的語法都是一樣的，唯一的不同是把方括號替換成了花括號。

提取嵌套值

假設想要提取對象結構中深層次的值該怎么處理？比如 person 中的 hobby。代碼如下。

    const {facts: {hobby}} = person;  
    console.log(hobby); // "Photo"

通過冒號可以描述對象中的路徑，這樣就可以取到對象中深層的嵌套值了。

數(shù)據(jù)缺失時的默認值

如在解構數(shù)組時的處理方案一樣，當想要抽取的值不存在時，也可以給對象里的值賦默認值。如下面代碼，想要提取 hometown 屬性，并且給定 Unknown 默認值。

    const {hometown = "Unknown"} = person;  
    console.log(hometown); // "Unknown"
解構函數(shù)參數(shù)

在結束本文之前，我們來看最后一個例子——解構函數(shù)參數(shù)。

假設你有一個函數(shù)，接受一個對象作為參數(shù)。那么你可以直接在參數(shù)列表中對對象進行解構。例如下面這個 toString 函數(shù)，打印出 name 和 age。

    const toString = ({name, age}) => {  
      return `${name} is ${age} years old`;
    }
    
    toString(person); // Luke is 24 years old

不過要提醒大家的是，這不是一個好的編程習慣，如果別人使用你的函數(shù)，很容易造成誤解，調試起來特別不方便，這里只是告訴大家可以這樣進行解構而已。

ok，那么到現(xiàn)在對于數(shù)組和對象的解構問題大家應該都學會了，后面也還會介紹一些 JavaScript 的一些新特性，歡迎大家對我保持關注。

如果你認為文章中還需要注意什么，或者添加什么，請讓我知道。

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。

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

轉載請注明本文地址：http://systransis.cn/yun/82669.html

相關文章

  • [譯] 最深刻而易懂的ES6解構教程

    摘要：被解構的數(shù)據(jù)項位于賦值運算符的右側，可以是任何數(shù)組和對象的組合，允許隨意嵌套。數(shù)組模式位于賦值運算符的左側，被結構的數(shù)組在其右側。 解構是ES6的新特性，用于從JavaScript對象和數(shù)組中提取數(shù)據(jù)，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實現(xiàn)方式在過去幾乎是不可能的。本文將深...

    AlphaGooo 評論0 收藏0

  • ES6系列---解構

    摘要：的解構特性，可以簡化這項工作。必須傳值的解構參數(shù)如果調用函數(shù)時不提供被解構的參數(shù)會導致程序拋出錯誤程序報錯缺失的第三個參數(shù)，其值為。 在編碼過程中，我們經(jīng)常定義許多對象和數(shù)組，然后有組織地從中提取相關的信息片段。ES6的解構特性，可以簡化這項工作。解構是一種打破數(shù)據(jù)結構，將其拆分為更小部分的過程。 未使用解構的做法 let options = { repeat: true, ...

    baoxl 評論0 收藏0

  • es6的解構賦值、擴展運算符、rest參數(shù)使用

    摘要：模板字符串甚至還能嵌套解構賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構。運算符使用場景應該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免對象的使用。 es6中較為常用的書寫風格 為了書寫的方便，es6中提出了很多比較友好的書寫方式，其中最為常見的屬于以下幾個： 字符串模板 `abcdef${test}` 解構賦值 let [a, b, c] = [1,...

    xuweijian 評論0 收藏0

  • ES6學習 第二章 變量的解構賦值

    摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據(jù)對象值進行匹配。前言該篇筆記是第二篇 變量的解構賦值。這一章原文鏈接： 變量的解構賦值解構賦值ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

    番茄西紅柿 評論0 收藏2637

  • ES6學習 第二章 變量的解構賦值

    摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據(jù)對象值進行匹配。 前言該篇筆記是第二篇 變量的解構賦值。 這一章原文鏈接： 變量的解構賦值解構賦值ES6 允許按照一定模式，從數(shù)組和對象中提取值，對...

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<