JavaScript-解構(gòu)

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

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

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

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

// 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;

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

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

// 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);

掃碼申請(qǐng)加入全棧部落

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83897.html

相關(guān)文章

javascript解構(gòu)賦值

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

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

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

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

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

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

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

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

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

Jeff 2019-08-21 10:33 評(píng)論0 收藏0
ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

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

tommego 2019-08-21 18:25 評(píng)論0 收藏0