1. Object.is()
用來解決在ES5中 兩種相等運算符的缺點。用來比較兩個值是否嚴格相等,行為和(===)基本一致。
在ES5中判斷兩個值是否相等,只能用(==)相等運算符和(===)嚴格相等運算符,但是這兩貨都有缺點,前者 兩邊的值都會轉換數據類型,后者 NaN不等于自身還有 +0 == -0。
Object.is("foo", "foo") // true Object.is({}, {}) // false // 在 Object.is() +0 === -0 // true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true2. Object.assign()
用于對象的合并,將源對象的所有可枚舉屬性,復制到目標對象,現在常用來進行淺拷貝。
const t = {a: 1} const s1 = {b: 2} const s2= {c: 3} Object.assign(t, s2, s2) // t {a:1, b:2, c:3} // 在上面中第一個參數t是目標對象,s1 s2是源對象
注意:如果目標對象和源對象有同名屬性,或者多個同名,那么在后面的屬性會將前面的覆蓋。
const t = {a: 1, b: 2} const s1 = {b: 3, c: 4} const s2 = {c: 5} Object.assign(t, s1, s2) t // {a:1, b:3, c:5}
如果Object.assign的參數只有一個,那么就返回該參數,另外如果該參數不是對象,那么Object.assign會將其轉為對象在返回
const t = {a: 2} Object.assign(t) t // {a: 2} Object.assigin(2) // "object"
另外由于null 和 undefined 無法轉換位對象,那么如果他們作為第一個參數就會報錯,如果不是在第一個參數則不會有這個問題
Object.assign(undefined) // 報錯 Object.assign(null) //報錯 這樣就不會報錯:如下 const t = {a: 2} Object.assign(t, undefined) // true Object.assign(t, null) // true
其他(數值,字符串,布爾值)數值不再第一個也不會報錯,但是字符串會以數組的形式被拷入目標對象,兩外兩個則不會做任何操作。
const a = "abc" const b = true const c = 12 const o = Object.assign({}, a, b, c) o // {"0": "a", "1": "b", "2": "c"} // 因為布爾值number 的原始值都在對象的內部屬性[[PrimitiveValue]] 上面,這個屬性不能別Object.assign拷貝
Obeject.assign 拷貝的屬性是有限制的,只能拷貝源對象的自身屬性,也不能拷貝不可枚舉的屬性,另外 Symbol值的屬性也能被拷貝
Object.assign 實現的是淺拷貝,也就是說如果源對象的某個屬性值是對象,那么目標對象拷貝得到的是這個對象的引用
如果遇到同名屬性,那Object.assign的處理方法是替換還不是追加
在處理數組的時候,Object.assign是將其是為對象來處理,如果下標相同則是覆蓋而不是追加
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]
Object.assign 只能進行值的復制,如果復制的值是一個函數,那么就等函數求值執行完在進行值的復制
1. 為對象添加屬性 2. 為對象添加方法 3. 克隆對象 4. 合并多個對象 5. 為屬性指定默認值3. Object.getOwnPropertyDescriptors()
用來返回指定對象所有自身屬性(非繼承屬性)的描述對象
const o = { left: 123, top() { return "new" } } Object.getOwnPropertyDescriptors(o) // { left:{ configurable: true enumerable: true value: 123 writable: true }, top: { configurable: true enumerable: true value: ? top() writable: true } } Object.getOwnPropertyDescriptors() 返回一個對象,所有原對象的屬性名都是該 對象的屬性名,對應的屬性值就是該屬性的描述對象。4. __proto__屬性,Object.setPrototypeOf(),Object.getPrototypeOf() 4.1. __proto__屬性
用來讀取或設置當前對象的prototype對象,另外這是一個內部屬性。__proto__是調用的 Object.prototype.proto 方法
//es5 寫法 const o = { method: function() {} } o.__proto__ = someOtherObj //es6 寫法 var o = Object.create(someOtherObj) o.method = function(){}4.2 Object.setPrototypeOf()
作用和 __proto__相同,用來設置一個對象的prototype對象,返回參數本身
// 格式 Object.setPrototypeOf(object, prototype) // 用法 const o = Object.setPrototypeOf({}, null) === 以下寫法 function setPrototyoeOf(obj, proto) { obj.__proto__ = proto return obj } // 例子 let proto = {} let o = { x: 10 } Object.setPrototypeOf(o, proto) proto.y = 20 proto.z = 40 o.x // 10 o.y // 20 o.z // 40 // 上面 將proto設為 o 對象的原型,所以可以從o 中讀取proto 的屬性
注意:如果第一參數不是對象,將自動轉換為對象,由于返回的還是第一個參數,所以這個操作不會產生任何效果,另外由于 undefined 和 null 無法轉換為對象,所以第一個參數如果是這兩個則會報錯
Object.setPrototypeOf(1, {}) === 1 // true Object.setPrototypeOf("foo", {}) === "foo" // true Object.setPrototypeOf(true, {}) === true // true Object.setPrototypeOf(undefined, {}) // TypeError: Object.setPrototypeOf called on null or undefined Object.setPrototypeOf(null, {}) // TypeError: Object.setPrototypeOf called on null or undefined4.3 Object.getPrototypeOf()
5. Object.keys(),Object.values(),Object.entries() 5.1 Object.keys()用于讀取一個對象的原型對象和Object.setPrototypeOf 配套使用。所有的特性也和 上面一樣,第一個參數如果不是對象將轉換為對象,undefined和null 會報錯
用于返回一個數組,成員的參數是對象自身的所有可遍歷屬性的鍵名
let obj = { x: 1, y: "b" } Object.keys(obj) //?["x", "y"]5.2 Object.values()
返回值是一個數組,成員是對象自身的(不含繼承的)所有可遍歷屬性的值。Objet.values只返回對象自身的可遍歷屬性。
let obj = { x: 1, y: "b" } Object.keys(obj) //?[1, "b"]
另外Object.values遍歷的時候如果遇到屬性名為數值的屬性,那么將按照數值大小,從小到大遍歷,如下:
const obj = { 100: "a", 2: "b", 7: "c" }; Object.values(obj) // ["b", "c", "a"]
注意:Object.values 會過濾屬性名為 Symbol的屬性
Object.values({ [Symbol()]: 123, foo: "abc" }); // ["abc"]
如果Object.values的參數是一個字符串 那么將返回字符串拆解的數組
Object.values("symbol") ["s", "y", "m", "b", "o", "l"]
注意: 如果Object.values 的參數為boolean值或者number,那么返回值是一個空數組,
Object.values(true) [] Object.values(2,null) []5.3 Object.entries()
返回一個數組,成員是對象自身(不含繼承的)所有可遍歷屬性的鍵值對數組,同樣 Symbol 屬性的值會被過濾。
const p = { f: "b", az: 22 }; Object.entries(p) // [ ["f", "b"], ["az", 22] ] Object.entries({ [Symbol()]: 456, o: "c" }); // [ [ "o", "c"] ]
Object.entries 可以用來遍歷對象的屬性
Object.entries 將對象轉為真正的Map結構
const obj = { foo: "bar", baz: 42 }; const map = new Map(Object.entries(obj)); map // Map { foo: "bar", baz: 42 }6. Object.fromEntries()
是Object.entries 的逆操作,將一個鍵值對數組轉為對象。主要是將鍵值對的數據結構還原為對象,適用于將Map結構轉為對象
Object.fromEntries([ ["foo", "bar"], ["baz", 42] ]) // { foo: "bar", baz: 42 } // 例二 將Map結構轉為對象 const map = new Map().set("foo", true).set("bar", false); Object.fromEntries(map) // { foo: true, bar: false }
歡迎關注 公眾號【小夭同學】
ES6入門系列
ES6入門之let、cont
ES6入門之變量的解構賦值
ES6入門之字符串的擴展
ES6入門之正則的擴展
ES6入門之數值的擴展
ES6入門之函數的擴展
ES6入門之數組的擴展
ES6入門之對象的擴展
Git教程
前端Git基礎教程
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/6861.html
showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用來解決在ES5中 兩種相等運算符的缺點。用來比較兩個值是否嚴格相等,行為和(===)基本一致。 在ES5中判斷兩個值是否相等,只能用(==)相等運算符和(===)嚴格相等運算符,但是這兩貨都有缺點,前者 兩邊的值都...
摘要:屬性的簡潔表示法在中允許直接寫入變量和函數,作為對象的屬性和方法,使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組,包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量...
摘要:用來表示與大于的最小浮點數之間的差,實際上就是能夠表示的最小精度。對象的擴展在對象上新增了個與數學相關的方法。用于去除一個數的小樹部分,返回整數部分。對于非數值,則用方法將其轉換為數值,對于空值和無法截取整數的值,返回。返回以為底的的對數。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二進制和八進制表示...
摘要:用來表示與大于的最小浮點數之間的差,實際上就是能夠表示的最小精度。對象的擴展在對象上新增了個與數學相關的方法。用于去除一個數的小樹部分,返回整數部分。對于非數值,則用方法將其轉換為數值,對于空值和無法截取整數的值,返回。返回以為底的的對數。 showImg(https://segmentfault.com/img/bVbrTG6?w=1080&h=1080); 1. 二進制和八進制表示...
閱讀 3244·2021-11-11 11:00
閱讀 2565·2019-08-29 11:23
閱讀 1441·2019-08-29 10:58
閱讀 2323·2019-08-29 10:58
閱讀 2952·2019-08-23 18:26
閱讀 2507·2019-08-23 18:18
閱讀 2038·2019-08-23 16:53
閱讀 3411·2019-08-23 13:13