ES6對(duì)象的擴(kuò)展及新增方法的內(nèi)容是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹ES6對(duì)象的擴(kuò)展及新增方法的內(nèi)容是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供凌海企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為凌海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

1、屬性的簡(jiǎn)潔表示法

ES6允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書寫更加簡(jiǎn)潔。

const foo = 'bar';
const baz = {foo};
baz//{foo:'bar'}

//等同于
const baz = {foo:foo}

上面代碼表明，ES6允許在對(duì)象之中，直接寫變量。這時(shí)，屬性名為變量名，屬性值為變量的值。下面是另一個(gè)例子。

function f(x,y){
    return {x,y}
}
//等同于
function f(x,y){
    return {x:x,y:y};
}
f(1,2)//{x:1,y:2}

除了屬性簡(jiǎn)寫，方法也可以簡(jiǎn)寫。

const o ={
    method(){
        return 'Hello!'
    }
}
//等同于
const o = {
    method:function(){
        return 'Hellow';
    }
}

下面是一個(gè)實(shí)際的例子。

let birth = '2000/01/01';
const Person ={
    name:'張三',
    //等同于birth：birth
    birth,
    //等同于hello :function()....
    hello(){
        console.log('我的名字是',this.name) 
    }
}

這種寫法用于函數(shù)的返回值，將會(huì)非常方便。

function getPoint(){
    const x =1;
    const y = 10;
    return {x,y}
}
getPoint()//{x:1,y:10}

CommonJS模塊輸出一組變量，就非常合適使用簡(jiǎn)潔寫法。

let ms = {};
function getItem(key){
    return key in ms ?ms[key]:null;
}
function setItem(key,value){
    ms[key] = value;
}
function clear(){
    ms={}
} 
module.exports = {getItem,setItem,clear};
//等同于
module.exports = {
    getItem:getItem,
    setItem:setItem,
    clearLclear
}

屬性的賦值器(setter)和取值器(getter),事實(shí)上也是采用這種寫法。

const cart = {
    _wheels:4,
    get wheels(){
        return this._wheels;
    },
    set wheels (value){
        if(value<this._wheels){
            throw new Error('數(shù)值太小了！');
        }
        this._whells = value;
    }
}

2.屬性名表達(dá)式

JavaScript定義對(duì)象的屬性，有兩種方法。

//方法一
obj.foo = true;
//方法二
obj['a'+'bc'] = 123;

上面代碼的方法一是直接用標(biāo)識(shí)符作為屬性名，方法二是用表達(dá)式作為屬性名，這時(shí)將表達(dá)式放在方括號(hào)之內(nèi)。
但是，如果使用字面量定義對(duì)象(使用大括號(hào))，在ES5中只能使用方法一(標(biāo)識(shí)符)定義屬性。

var obj ={
    foo:true,
    abc:123
}

ES6允許字面量定義對(duì)象時(shí)，用方法二作為對(duì)象的屬性名，即把表達(dá)式放在括號(hào)內(nèi)。

let propKey = 'foo';
let obj ={
    [propKey]:true,
    ['a'+'bc']:123
}

下面是另一個(gè)例子：

let lastWord = 'last word';
const a = {
    'first word':'hello',
    [lastWord]:'world'
};
a['first word']//hello
a[lastWord]//world
a['last word']//world

表達(dá)式還可以用于定義方法名。

let obj = {
    ['h'+'ello'](){
        return 'hi'
    }
}
obj.hello()//hi;

注意：

屬性名表達(dá)式與簡(jiǎn)潔表示法，不能同時(shí)使用，會(huì)報(bào)錯(cuò)。
屬性名表達(dá)式如果是一個(gè)對(duì)象，默認(rèn)情況下會(huì)自動(dòng)將對(duì)象轉(zhuǎn)為字符串[object object],這一點(diǎn)要特別小心。

const keyA = {a:1};
const keyB = {b:2};
const myObject = {
    [keyA]:'valueA',
    [keyB]:'valueB'
};
myObject;// Object {[object Object]: "valueB"}

上面代碼中,[keyA]和[keyB]得到的都是[object object],所以[keyB]會(huì)把[keyA]覆蓋掉，而myObject最后只有一個(gè)[object object]屬性。

方法的name屬性

函數(shù)的name屬性，返回函數(shù)名。對(duì)象方法也是函數(shù)，因此也有name屬性。

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

屬性的可枚舉型和遍歷

對(duì)象的每個(gè)屬性都有一個(gè)描述對(duì)象，用來(lái)控制改屬性的行為。Object.getOwnPropertyDescriptor(obj,'foo')方法可以獲取該屬性的描述對(duì)象。
描述對(duì)象的enumerable屬性，稱為可枚舉性，如果該屬性為false，就表示某些操作會(huì)忽略當(dāng)前的屬性。
目前，有四個(gè)操作會(huì)忽略enumerable為false的屬性。

for...in循環(huán)：只遍歷對(duì)象自身的和繼承的可枚舉的屬性。(不包含Symbol屬性)
Object.keys():返回對(duì)象自身的所有可枚舉的屬性的鍵名,返回一個(gè)數(shù)組。(不包含Symbol)
JSON.stringify():只串行化對(duì)象自身的可枚舉的屬性。
object.assign():忽略enumrable為false的屬性，只拷貝對(duì)象自身的可枚舉的屬性。

ES6一共有5種方法可以遍歷對(duì)象的屬性。
（1）for...in

for...in循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不包含Symbol屬性)。

（2）Object.keys(obj)

object.keys返回一個(gè)數(shù)組，包含對(duì)象自身的（不含繼承的）所有可枚舉屬性（不包含Symbol屬性）的鍵名。

（3）Object.getOwnPropertyNames(obj)

返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性(不含Symbol屬性，但是包括不可枚舉屬性)的鍵名。

（4）Object.getOwnPropertySymbols(obj)

返回一個(gè)數(shù)組，包含對(duì)象自身的所有Symbol屬性的鍵名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個(gè)數(shù)組，包含對(duì)象自身的所有鍵名，不管鍵名是Symbol或字符串，也不管是否可枚舉。

super關(guān)鍵字

我們知道，this關(guān)鍵字總是指向函數(shù)所在的當(dāng)前對(duì)象，ES6又新增了另一個(gè)類似的關(guān)鍵字super，指向當(dāng)前對(duì)象的原型對(duì)象。

const proto = {
    foo:'hello'
};
const obj = {
    foo:'world',
    find(){
        return super.foo;
    }
};
Object.setPrototypeOf(obj,proto);
obj.find();//hello

上面代碼中，對(duì)象obj.find()方法之中，通過(guò)super.foo引用了原型對(duì)象proto的foo屬性。
注意：super關(guān)鍵字表示原型對(duì)象時(shí)，只能用在對(duì)象的方法之中，用在其他地方都會(huì)報(bào)錯(cuò)。目前，只有對(duì)象方法的簡(jiǎn)寫法可以讓Javascript引擎確認(rèn)，定義的是對(duì)象的方法。
JavaScript引擎內(nèi)部，super.foo等同于Object.getPrototypeOf(this).foo或Object.getPrototypeOf(this).foo.call(this)。

對(duì)象的擴(kuò)展運(yùn)算符

解構(gòu)賦值
對(duì)象的解構(gòu)賦值用于從一個(gè)對(duì)象取值，相當(dāng)于將目標(biāo)對(duì)象自身的所有可遍歷、但尚未被讀取的屬性，分配到指定的對(duì)象上面。所有的鍵和它們的值，都會(huì)拷貝到新對(duì)象上面。

let{x,y,...z} = {x:1,y:2,a:3,b；4};
x//1,
y//2,
z//{a:3,b:4}

上面代碼中，變量z是解構(gòu)賦值所在的對(duì)象。它獲取等號(hào)右邊的所有尚未讀取的鍵（a和b）,將它們連同值一起拷貝過(guò)來(lái)。

以上是“ES6對(duì)象的擴(kuò)展及新增方法的內(nèi)容是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：ES6對(duì)象的擴(kuò)展及新增方法的內(nèi)容是什么-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://m.kartarina.com/article40/ccgeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、面包屑導(dǎo)航、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)