快捷導(dǎo)航

ECMAscript新特性對(duì)象介紹

更新時(shí)間：2021年12月02日 12:04:28 投稿：hqx

這篇文章主要介紹了ECMAscript新特性對(duì)象，對(duì)象（object）是JavaScript最重要的數(shù)據(jù)結(jié)構(gòu)。ECMAScript 2015對(duì)它進(jìn)行了重大升級(jí)，下面我們來(lái)看一下它的改變

1.對(duì)象的屬性

1.1屬性表示法

ECMAScript 2015允許在大括號(hào)里面，直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書寫更加簡(jiǎn)潔。

示例代碼如下所示：

let name = '一碗周'
let job = '前端攻城獅'

// 屬性表示法 直接寫入變量
let obj1 = {
  name,
  job,
  sayMe() {
    console.log(name)
  }
}
// 等同于 
let obj2 = {
  name: name,
  job: job,
  sayMe: function() {
    console.log(name)
  }
}
console.log(obj1, obj2);

2.計(jì)算屬性名

在JavaScript中，我們定義屬性時(shí)，有兩種方式：中括號(hào)[]或.的方式：

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

.運(yùn)算符具有很大的局限性，比如first name這種屬性只能通過(guò)中括號(hào)的方式來(lái)定義。中括號(hào)的方式允許我們使用變量或者在使用標(biāo)識(shí)符時(shí)會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤的字符串直接量來(lái)定義屬性。

例如：

let person = {},
  lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";
console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

這兩種方式只能通過(guò)中括號(hào)的方式來(lái)定義的。在ES5中，你可以在對(duì)象直接量中使用字符串直接量作為屬性，例如：

let person = {
  "first name": "Nicholas"
};
console.log(person["first name"]);      // "Nicholas"

但是當(dāng)我們的屬性名存在一個(gè)變量中或者需要計(jì)算時(shí)，使用對(duì)象直接量是無(wú)法定義屬性的。

在ES5之前，如果屬性名是個(gè)變量或者需要?jiǎng)討B(tài)計(jì)算，則只能通過(guò) 對(duì)象.[變量名] 的方式去訪問(wèn)。

let p = {
  name : '李四',
  age : 20
}
let attName = 'name';
console.log(p[attName]) //這里 attName表示的是一個(gè)變量名。
// 李四

而且這種動(dòng)態(tài)計(jì)算屬性名的方式在字面量中是無(wú)法使用的。

let attName = 'name';
  let p = {
    attName : '李四',  // 這里的attName是屬性名，相當(dāng)于各級(jí)p定義了屬性名叫 attName的屬性。
    age : 20
  }
console.log(p[attName])  // undefined

在ECMAScript 2015中，把屬性名用[ ]括起來(lái)，則括號(hào)中就可以引用提前定義的變量。

let attName = 'name';
  let p = {
    [attName] : '李四',  // 引用了變量attName。相當(dāng)于添加了一個(gè)屬性名為name的屬性
    age : 20
  }
console.log(p[attName])  // 李四

在對(duì)象直接量中的中括號(hào)表明屬性名是需要被計(jì)算的，它的內(nèi)容被計(jì)算為字符串

3.Object 的方法

3.1Object.is() 方法

ECMAScript 2015比較兩個(gè)值是否相等，只有兩個(gè)運(yùn)算符：相等運(yùn)算符（==）和嚴(yán)格相等運(yùn)算符（===）。

但是這兩個(gè)運(yùn)算符都具有缺點(diǎn)
使用相等運(yùn)算符的時(shí)候，會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型

全等運(yùn)算符會(huì)導(dǎo)致NaN不等于自身，以及+0等于-0。

ECMAScript 2015提出 “Same-value equality ”（同值相等）算法，用來(lái)解決這個(gè)問(wèn)題。Object.is就是部署這個(gè)算法的新方法。它用來(lái)比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符（===）的行為基本一致。

語(yǔ)法結(jié)構(gòu)如下所示：

Object.is(value1, value2);

參數(shù)說(shuō)明：

value1：被比較的第一個(gè)值。
value2：被比較的第二個(gè)值。

返回一個(gè)布爾值。

示例代碼如下所示：

console.log(+0 === -0); //true
console.log(NaN === NaN); // false

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

3.2Object.assign()方法

Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

語(yǔ)法結(jié)構(gòu)如下所示：

Object.assign(target, ...sources)

參數(shù)說(shuō)明：

target ：目標(biāo)對(duì)象
sources ：源對(duì)象

值得注意的是，如果目標(biāo)對(duì)象中的屬性具有相同的鍵，則屬性將被源對(duì)象中的屬性覆蓋。后面的源對(duì)象的屬性將類似地覆蓋前面的源對(duì)象的屬性。

示例代碼如下所示：

let sources = {
  name: '一碗周',
  job: '前端攻城獅'
}
let target = {}
// 使用 assign() 方法所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。
Object.assign(target, sources)
console.log(target);
// 驗(yàn)證是否為深復(fù)制
target.name = '一碗粥'
console.log(target, sources); //{ name: '一碗周', job: '前端攻城獅' } { name: '一碗粥', job: '前端攻城獅' }

4.super 關(guān)鍵字

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

// 定義一個(gè)要作為原型對(duì)象的對(duì)象
const proto = {
  v: 'Hello'
}
// 定義一個(gè)對(duì)象
const obj = {
  v: 'World',
  printV1() {
    console.log(this.v);
  },
  // 使用 super 關(guān)鍵字
  printV2() {
    console.log(super.v);
  }
}
// 將obj 對(duì)象的原型修改為 prtot
Object.setPrototypeOf(obj, proto)
// this 的用法
obj.printV1() // World
// super 的用法
obj.printV2() // Hello

值得注意的是，super關(guān)鍵字表示原型對(duì)象時(shí)，只能用在對(duì)象的方法之中，用在其他地方都會(huì)報(bào)錯(cuò)。目前，只有對(duì)象方法的簡(jiǎn)寫法可以讓JavaScript引擎確認(rèn)，定義的是對(duì)象的方法。

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

對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。

示例代碼如下所示：

// 對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。
let obj = {
  name: '一碗周',
  job: '前端攻城獅'
}
let newObj = {
  ...obj
}
console.log(newObj); // { name: '一碗周', job: '前端攻城獅' }
// 驗(yàn)證是否為深復(fù)制
newObj.name = '一碗粥'
console.log(obj, newObj); // { name: '一碗周', job: '前端攻城獅' } { name: '一碗粥', job: '前端攻城獅' }

由于數(shù)組是特殊的對(duì)象，所以對(duì)象的擴(kuò)展運(yùn)算符也可以用于數(shù)組。

let arr = [1, 2, 3, 4, 5]
let obj = {
  ...arr
}
console.log(obj); // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

如果擴(kuò)展運(yùn)算符后面不是對(duì)象，則會(huì)自動(dòng)將其轉(zhuǎn)為對(duì)象。

console.log(
  {
  ...1 // 等同于 {...Object(1)}
  }
); // {}
console.log(
  {
  ...true // 等同于 {...Object(true)}
  }
); // {}
console.log(
  {
  ...undefined // 等同于 {...Object(undefined)}
  }
); // {}
console.log(
  {
  ...null // 等同于 {...Object(null)}
  }
); // {}

到此這篇關(guān)于ECMAscript新特性對(duì)象介紹的文章就介紹到這了,更多相關(guān)ECMAscript 對(duì)象介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: