ES6學(xué)習(xí)教程之對(duì)象字面量詳解
前言
本文主要給大家介紹了關(guān)于ES6對(duì)象字面量的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。
ECMAScript6使得聲明對(duì)象字面量更加簡(jiǎn)單，提供了屬性簡(jiǎn)寫和方法簡(jiǎn)寫功能，屬性名計(jì)算的新特性。
function getInfo(name, age, weight) {
return {
// 如果屬性名和屬性值同名可以利用、es6的屬性簡(jiǎn)寫
name, // 等同于 make: make
age, // 等同于 model: model
weight, // 等同于 value: value
// ES6的屬性名是可計(jì)算的
['over' + weight]: true,
// 對(duì)象方法名簡(jiǎn)寫可以省略 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è)新特性，可以不必往下閱讀。下面的文字僅提供給還有疑問的朋友。
屬性簡(jiǎn)寫
在 ES5及以前的版本中，對(duì)象字面量只支持鍵值對(duì)集合。實(shí)際業(yè)務(wù)中，對(duì)象字面量的初始化會(huì)有一定的代碼重復(fù)。
//ES5
function createPeople(name, age) {
return {
name: name,
age: age
};
}
createPeople函數(shù)用來創(chuàng)建一個(gè)People的對(duì)象，可以看到上面的代碼的 name和age分別書寫了兩次，有些麻煩。在ES6中通過使用屬性簡(jiǎn)寫特性可以消除這種屬性名稱和局部變量之間的重復(fù)書寫,當(dāng)對(duì)象的屬性和變量同名時(shí)，可以不必再寫冒號(hào)和值。
function createPeople(name, age) {
return {
name,
age
};
}
方法名簡(jiǎn)寫
ES5中若為對(duì)象添加方法必須指定方法名稱，并完整地定義函數(shù)來實(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è)新特性介紹完畢，大家可以回到文章開頭檢查一下自己是否掌握了本小結(jié)內(nèi)容。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
- ES6新特性六：promise對(duì)象實(shí)例詳解
- ES6學(xué)習(xí)教程之對(duì)象的擴(kuò)展詳解
- ES6中定義類和對(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)文章
用jquery.sortElements實(shí)現(xiàn)table排序
實(shí)現(xiàn)table排序，網(wǎng)上有很多解決方案，很多都基于jQuery，最后我選擇用sortElements，實(shí)現(xiàn)很簡(jiǎn)單2014-05-05
JavaScript面試技巧之?dāng)?shù)組的一些不low操作
這篇文章主要給大家介紹了關(guān)于JavaScript面試技巧之?dāng)?shù)組的一些不low操作的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用原生的javascript來實(shí)現(xiàn)輪播圖
這篇文章主要介紹了使用原生的javascript來實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換 ，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了vue2.0如何獲取自定義屬性的值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章為大家分享了javascript倒計(jì)時(shí)效果實(shí)現(xiàn)代碼段，現(xiàn)今團(tuán)購(gòu)網(wǎng)、電商網(wǎng)、門戶網(wǎng)等，常使用時(shí)間記錄重要的時(shí)刻，如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購(gòu)等，特別是雙十一活動(dòng)，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Webpack是一個(gè)強(qiáng)大的前端構(gòu)建工具,通過配置文件和一系列的插件和加載器,它可以將項(xiàng)目中的模塊打包成適合生產(chǎn)環(huán)境的文件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
js拖拽是常見的網(wǎng)頁(yè)效果,本文將從零開始實(shí)現(xiàn)一個(gè)簡(jiǎn)單的js插件,下面和小編來一起學(xué)習(xí)一下吧2019-05-05
第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
將頁(yè)面table內(nèi)容與樣式另存成excel文件的方法
本文分析一下將頁(yè)面table內(nèi)容與樣式另存成excel文件的方法，主要介紹style與class之間的區(qū)別問題。2015-08-08