JavaScript-解構(gòu)

psychola 發(fā)布于2019-08-20 17:49 / 944人閱讀

摘要：訪問和使用對象的多個屬性時，使用對象解構(gòu)。為什么結(jié)構(gòu)可以幫助您避免為這些屬性創(chuàng)建臨時引用。為什么你可以增加新的屬性或改變事物的秩序而不破壞調(diào)用點。掃碼申請加入全棧部落

訪問和使用對象的多個屬性時，使用對象解構(gòu)。

為什么? 結(jié)構(gòu)可以幫助您避免為這些屬性創(chuàng)建臨時引用。

// bad
function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;

    return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
    const {
        firstName,
        lastName
    } = user;
    return `${firstName} ${lastName}`;
}

// best
function getFullName({firstName,lastName}) {
    return `${firstName} ${lastName}`;
}

使用數(shù)組解構(gòu)

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

對多個返回值使用對象解析，而不是數(shù)組解構(gòu)。

為什么? 你可以增加新的屬性或改變事物的秩序而不破壞調(diào)用點。

// bad
function processInput(input) {
    // then a miracle occurs
    return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
    // then a miracle occurs
    return {
        left,
        right,
        top,
        bottom
    };
}

// the caller selects only the data they need
const {
    left,
    right
} = processInput(input);

掃碼申請加入全棧部落

GPU云服務(wù)器云服務(wù)器對象解構(gòu) 解構(gòu)函數(shù) 解構(gòu)賦值 javascript

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83897.html

相關(guān)文章

javascript解構(gòu)賦值

摘要：此文章為意譯并非直譯，可參考具體原文解構(gòu)賦值具體干什么解構(gòu)賦值是中的一個表達式語法糖，幫助開發(fā)者將數(shù)組，對象屬性解構(gòu)出來并且直接賦值到具體變量上面。此文章為意譯并非直譯，可參考具體原文解構(gòu)賦值具體干什么？解構(gòu)賦值是javascript中的一個表達式語法糖，幫助開發(fā)者將數(shù)組，對象屬性解構(gòu)出來并且直接賦值到具體變量上面。直接來段代碼感受下 let a,b,rest; [a,b] =...

canopus4u 2019-08-22 13:58 評論0 收藏0
ECMASCRIPT 6 實戰(zhàn)之 解構(gòu)賦值

摘要：相信解構(gòu)賦值自以下簡稱面世以來被大家快速地熟悉并運用到實際開發(fā)中了這是一種能有效減少代碼量，使代碼邏輯更簡單優(yōu)雅的技術(shù)下面我們就再來回顧總結(jié)一下解構(gòu)賦值的種種用法吧基本用法從對象解構(gòu)假設(shè)有一個對象，它的結(jié)構(gòu)為以對稱的形式從從邊的對象中匹配與相信解構(gòu)賦值(Destructuring)自 ECMASCRIPT 6(以下簡稱 ES 6) 面世以來被大家快速地熟悉并運用到實際開發(fā)中了, 這是...

yangrd 2019-08-26 13:54 評論0 收藏0
ES6：解構(gòu)——JavaScript 從數(shù)組和對象中提取數(shù)據(jù)的優(yōu)雅方法

摘要：跳過數(shù)組中的元素學會了如何按順序從數(shù)組中提取數(shù)據(jù)。解構(gòu)方法中提供了很好的解決方案。從對象中提取數(shù)據(jù)依然從最基本的開始，提取從中提取和。本文編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文連接：ES6: Destructuring — an elegant...

GraphQuery 2019-08-20 16:02 評論0 收藏0
JavaScript中的解構(gòu)賦值

摘要：是這樣描述解構(gòu)賦值的解構(gòu)賦值語法是一種表達式用來將數(shù)組中的值或?qū)ο笾械膶傩匀〕鰜韰^(qū)分為不同變量。現(xiàn)在讓我們將坐標點放進一個數(shù)組中現(xiàn)在要對這些點進行處理，傳統(tǒng)可以想到的方法是這樣的借助解構(gòu)賦值，能變得這樣簡潔使用箭頭函數(shù)更簡潔 JavaScript是一種很有趣的語言，我個人很喜歡它，雖然仍還有些人不大喜歡它。在ECMAScript6（ES6）中，有許多有用的特性來使JavaScript開...

Panda 2019-08-23 18:07 評論0 收藏0
[譯]JavaScript ES6解構(gòu)賦值指南

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

Jeff 2019-08-21 10:33 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結(jié)語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0