ES6語法之對象的擴展

SillyMonkey 發布于2019-08-21 18:32 / 2482人閱讀

摘要：方法的第一個參數是目標對象，后面的參數都是源對象。這個對象的任何變化，都會反映到目標對象上面。方法將和合并成一個新對象，如果兩者有同名屬性，則的屬性值會覆蓋的屬性值。否則，對象的該屬性很可能不起作用。

對象字面量簡寫法

你可能寫過這樣的代碼：使用和所分配的變量名稱相同的名稱初始化對象。

let type = "quartz";
let color = "rose";
let carat = 21.29;

const gemstone = {
  type: type,
  color: color,
  carat: carat
};

console.log(gemstone);

看到重復的地方了嗎？type: type、color: color 和 carat:carat 不顯得很冗長嗎？

好消息是，如果屬性名稱和所分配的變量名稱一樣，那么就可以從對象屬性中刪掉這些重復的變量名稱。

我們來看看！

let type = "quartz";
let color = "rose";
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat
};

還有一種向對象中添加方法的簡寫方式。

let type = "quartz";
let color = "rose";
let carat = 21.29;

let gemstone = {
  type,
  color,
  carat,
  calculateWorth() { ... }
};

在 ES6 中甚至連function 關鍵字也不需要.

對象Key值構建

有時候我們會在后臺取出key值，而不是我們前臺定義好的，這時候我們如何構建我們的key值呢。比如我們在后臺取了一個key值，然后可以用[ ] 的形式，進行對象的構建。

let key="skill";
let obj={
    [key]:"web"
}
console.log(obj.skill);

Object.is( ) 對象比較

ES5 比較兩個值是否相等，只有兩個運算符：相等運算符==和嚴格相等運算符===。它們都有缺點，前者會自動轉換數據類型，后者的NaN不等于自身，以及+0等于-0;

ES6 提出“Same-value equality”（同值相等）算法，用來解決這個問題。Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算符===的行為基本一致。

Object.is("foo", "foo")
// true
Object.is({}, {})
// false

+0 === -0 //true
NaN === NaN // false

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

Object.assign() 基本使用

Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。

Object.assign方法的第一個參數是目標對象，后面的參數都是源對象。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target)  // {a:1, b:2, c:3}

注意事項 同名屬性

如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target)  // {a:1, b:2, c:3}

淺拷貝

Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代碼中，源對象obj1的a屬性的值是一個對象，Object.assign拷貝得到的是這個對象的引用。這個對象的任何變化，都會反映到目標對象上面。

為屬性指定默認值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: "html"
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

面代碼中，DEFAULTS對象是默認值，options對象是用戶提供的參數。Object.assign方法將DEFAULTS和options合并成一個新對象，如果兩者有同名屬性，則option的屬性值會覆蓋DEFAULTS的屬性值。

注意，由于存在淺拷貝的問題，DEFAULTS對象和options對象的所有屬性的值，最好都是簡單類型，不要指向另一個對象。否則，DEFAULTS對象的該屬性很可能不起作用。

GPU云服務器云服務器 es6字符串擴展對象的擴展面向對象語法分析對象擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90568.html

ES6學習手稿之基本類型擴展

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

tommego 2019-08-21 18:25 評論0 收藏0
ES6語法之函數的擴展

摘要：函數的擴展函數參數的默認值之前，不能直接為函數的參數指定默認值，只能采用變通的方法。箭頭函數引入了一種新的函數，叫做箭頭函數。箭頭函數和普通函數的行為非常相似，但是在語法構成上非常不同。意味著函數內的的值是全局對象，不是對象。函數的擴展函數參數的默認值 ES6 之前，不能直接為函數的參數指定默認值，只能采用變通的方法。 function log(x, y) { y = y ||...

Clect 2019-08-21 18:39 評論0 收藏0
ES6語法之字符串的擴展

摘要：模板字符串連接符在之前，將字符串連接到一起的舊方法是使用字符串連接運算符。這樣更容易構建字符串。返回布爾值，表示參數字符串是否在原字符串的頭部。它針對前個字符，而其他兩個方法針對從第個位置直到字符串結束。模板字符串 + 連接符在 ES6 之前，將字符串連接到一起的舊方法是使用字符串連接運算符 (+)。 const student = { name: Richard Kaleho...

孫淑建 2019-08-21 18:32 評論0 收藏0
ES6語法之可迭代協議和迭代器協議

摘要：有兩個協議可迭代協議和迭代器協議。為了變成可迭代對象，一個對象必須實現或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協議該迭代器協議定義了一種標準的方式來產生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內置或語法，而是協議。這些協議可以被任何遵循某些約定的對象來實現。有兩個協議：可迭代協議和迭代器協議。可迭代協議可迭代協議允許 JavaScri...

sarva 2019-08-22 11:23 評論0 收藏0
ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數和展開語法，展開數組對象，作為函數數組對象的擴展運算符。使用和參數進行操作其余參數傳給原始函數展開語法運算則可以看作是參數的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數) 和 spread(展開語法，展開數組/對象)，作為函數、數組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0