ES6學(xué)習(xí)教程之對(duì)象字面量詳解
前言
本文主要給大家介紹了關(guān)于ES6對(duì)象字面量的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧。
ECMAScript6使得聲明對(duì)象字面量更加簡(jiǎn)單,提供了屬性簡(jiǎn)寫(xiě)和方法簡(jiǎn)寫(xiě)功能,屬性名計(jì)算的新特性。
function getInfo(name, age, weight) { return { // 如果屬性名和屬性值同名可以利用、es6的屬性簡(jiǎn)寫(xiě) name, // 等同于 make: make age, // 等同于 model: model weight, // 等同于 value: value // ES6的屬性名是可計(jì)算的 ['over' + weight]: true, // 對(duì)象方法名簡(jiǎn)寫(xiě)可以省略 function 關(guān)鍵字 descripte() { console.log(name, age, weight); } }; } let person = getInfo('Kia', 27, 400); console.log(person);// {name: "Kia", age: 27, weight: 400, over400: true, descripte: ƒ}
如果可以理解上述三個(gè)新特性,可以不必往下閱讀。下面的文字僅提供給還有疑問(wèn)的朋友。
屬性簡(jiǎn)寫(xiě)
在 ES5及以前的版本中,對(duì)象字面量只支持鍵值對(duì)集合。實(shí)際業(yè)務(wù)中,對(duì)象字面量的初始化會(huì)有一定的代碼重復(fù)。
//ES5 function createPeople(name, age) { return { name: name, age: age }; }
createPeople函數(shù)用來(lái)創(chuàng)建一個(gè)People的對(duì)象,可以看到上面的代碼的 name和age分別書(shū)寫(xiě)了兩次,有些麻煩。在ES6中通過(guò)使用屬性簡(jiǎn)寫(xiě)特性可以消除這種屬性名稱(chēng)和局部變量之間的重復(fù)書(shū)寫(xiě),當(dāng)對(duì)象的屬性和變量同名時(shí),可以不必再寫(xiě)冒號(hào)和值。
function createPeople(name, age) { return { name, age }; }
方法名簡(jiǎn)寫(xiě)
ES5中若為對(duì)象添加方法必須指定方法名稱(chēng),并完整地定義函數(shù)來(lái)實(shí)現(xiàn)。
var people = { name: 'xixi', sayName: function () { console.log(this.name); } };
ES6的語(yǔ)法更簡(jiǎn)潔,消除了冒號(hào)和方法名。
let people = { name: 'xixi', sayName() { console.log(this.name); } }; people.sayName();// xixi
屬性可計(jì)算
let lastName = 'last name'; let person = { [lastName]: 'yuan' }; console.log(person[lastName]);// yuan
總結(jié)
對(duì)象字面量擴(kuò)展的3個(gè)新特性介紹完畢,大家可以回到文章開(kāi)頭檢查一下自己是否掌握了本小結(jié)內(nèi)容。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
- ES6新特性六:promise對(duì)象實(shí)例詳解
- ES6學(xué)習(xí)教程之對(duì)象的擴(kuò)展詳解
- ES6中定義類(lèi)和對(duì)象的方法示例
- ES6 迭代器與可迭代對(duì)象的實(shí)現(xiàn)
- ES6知識(shí)點(diǎn)整理之對(duì)象解構(gòu)賦值應(yīng)用示例
- ES6 Promise對(duì)象概念與用法分析
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析
- ES6 對(duì)象的新功能與解構(gòu)賦值介紹
- ES6 Promise對(duì)象的應(yīng)用實(shí)例分析
- JS面向?qū)ο缶幊獭狤S6 中class的繼承用法詳解
- ES6對(duì)象操作實(shí)例詳解
相關(guān)文章
基于three.js實(shí)現(xiàn)的3D粒子動(dòng)效實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何基于three.js實(shí)現(xiàn)的3D粒子動(dòng)效的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04javascript實(shí)現(xiàn)全局匹配并替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全局匹配并替換的方法的總結(jié),十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-04-04js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例
本篇文章主要介紹了js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下。2016-12-12javascript取消文本選定的實(shí)現(xiàn)代碼
最近在做拖動(dòng)布局. 發(fā)現(xiàn)有文本選定的時(shí)候, 進(jìn)行拖動(dòng)很不好看.2010-11-11JavaScript獲取當(dāng)前窗口內(nèi)的寬度和高度匯總
這篇文章主要介紹了JavaScript獲取當(dāng)前窗口內(nèi)的寬度和高度匯總的相關(guān)資料,需要的朋友可以參考下2023-02-02獲取服務(wù)器傳來(lái)的數(shù)據(jù) 用JS去空格的正則表達(dá)式
獲取服務(wù)器傳來(lái)的數(shù)據(jù) 用JS去空格的正則表達(dá)式,需要的朋友可以參考下2012-03-03