模擬實(shí)現(xiàn)對(duì)象的新增方法 | 重學(xué)ES6

前言

ES6新增了很多屬性谴轮、方法以及某些特性噪窘，本系列主要通過(guò)模擬實(shí)現(xiàn)的方式來(lái)重學(xué)ES6,以便幫助自己更深入的的理解那些新增的東西。

本文目標(biāo)：模擬實(shí)現(xiàn)對(duì)象的新增方法

image.png

模擬實(shí)現(xiàn)

說(shuō)明：

只簡(jiǎn)單說(shuō)明用法，然后模擬實(shí)現(xiàn)
真實(shí)實(shí)現(xiàn)未必是這樣實(shí)現(xiàn)，僅實(shí)現(xiàn)功能卜朗，用于理解

Object.is()

用法

該方法用于優(yōu)化===的兩個(gè)問(wèn)題：NaN不等于NaN、+0等于-o

模擬實(shí)現(xiàn)：`_is`方法

Object._is = function (one, two) {
    if (Number.isNaN(one) && Number.isNaN(two)) {
        return true;
    }
    if (one === 0 && two === 0) {
        if (1 / one < 0 && 1/two >0){
            return false
        }
        if (1 / one > 0 && 1/two <0) {
            return false
        } 
    }
    return one === two;
}
console.log(Object._is(NaN,NaN));//true
console.log(Object._is(+0, -0));//false
console.log(Object._is(-0, +0));//false

這里有個(gè)小竅門(mén)咕村，就是判斷一個(gè)數(shù)是+0還是-0场钉，正常是比較難判斷的，因?yàn)樗麄兌既扔?code>0懈涛，但是我可以利用一個(gè)正數(shù)除以+0為Infinity逛万，除以-0為-Infinity的規(guī)律，在通過(guò)Infinity和-Infinity分別跟0比較批钠，判斷出是-0還是+0

Object.assign()

用法

assign用于把多個(gè)對(duì)象合并到到一個(gè)對(duì)象上宇植，第一個(gè)參數(shù)是要把其他對(duì)象合并到的對(duì)象target，剩下其他參數(shù)是要被合并的對(duì)象埋心，返回target

模擬實(shí)現(xiàn)：`_assign`方法

Object._assign = function () {
    if (arguments.length == 0) {
        throw new TypeError(`Cannot convert undefined or null to object`);
    }
    if (arguments.length == 1) {
        return arguments[0];
    }
    if (arguments.length >= 2) {
        let target = arguments[0];
        for (let i = 1; i < arguments.length; i++) {    
            // 拿出每一個(gè)要被合并的對(duì)象指郁，判斷對(duì)象里面屬性，在arguments[0]中是否已經(jīng)存在拷呆，沒(méi)有存在則加入闲坎，有存在就覆蓋疫粥。               
            for(let key in arguments[i]){
                    //key表示每個(gè)要合并的對(duì)象的屬性，直接添加到target中去就可以腰懂，有就覆蓋梗逮，沒(méi)有就添加
                    target[key] = arguments[i][key];
            }
        }
        return target
    }
}
let obj1 = { name: 'a' };
let obj2 = { name: 'b' }
console.log(Object._assign(obj1, obj2));

Object.getPrototypeOf()

用法

用于獲取對(duì)象的原型

模擬實(shí)現(xiàn)：`_getPrototypeOf`方法

Object._getPrototypeOf = function (target) {
    return target.__proto__;
}

Object.setPrototypeOf()

用法

用于設(shè)置對(duì)象的原型

模擬實(shí)現(xiàn)：`_getPrototypeOf`方法

Object._setPrototypeOf = function (target, proto) {
    target.__proto__ = proto;
}

Object.create()

使用

Object.create()用于產(chǎn)生指定原型的新對(duì)象，返回該對(duì)象悯恍。第一個(gè)參數(shù)可以是某個(gè)對(duì)象，也可以是null伙狐，如果是null表示該對(duì)象沒(méi)有原型涮毫。

模擬實(shí)現(xiàn)：`_create`方法

Object._create = function(proto){
    let obj = {}
    Object.setPrototypeOf(obj,proto)
    return obj
}

Object.keys()、Object.values()贷屎、Object.entries()

用法

Object.keys()是ES5新增方法罢防，用于返回由對(duì)象的key組成的數(shù)組

而Object.values和Object.entries是ES2017引入的方法，分別用于返回由對(duì)象的value組成的數(shù)組唉侄、返回由多個(gè)key和value組成的鍵值對(duì)的數(shù)組

由于大家梳理ES6的時(shí)候都加上它咒吐，所以我們也一起來(lái)寫(xiě)一下

模擬實(shí)現(xiàn)：`_keys`、`_values`属划、`_entries`

_keys實(shí)現(xiàn)

Object._keys = function(o){
    let res = [];
    for(let key in o){
        res.push(key)
    }
    return res;
}
console.log(Object._keys(obj));//["a", "b", "c"]

_values實(shí)現(xiàn)

Object._values = function(o){
    let res = [];
    for(let key in o){
        res.push(o[key]);
    }
    return res;
}
let obj = {a:1,b:2,c:3};
console.log(Object._values(obj));//[1, 2, 3]

_entries實(shí)現(xiàn)

Object._entries = function(o){
    let res = [];
    for(let key in o){
        res.push([key,o[key]]);
    }
    return res;
}
let obj = {a:1,b:2,c:3};
console.log(Object._entries(obj));//[["a", 1], ["b", 2], ["c", 3]]

Object.fromEntries()

用法

相當(dāng)于創(chuàng)建對(duì)象恬叹，它是將鍵值對(duì)的數(shù)組轉(zhuǎn)成對(duì)象。

因此被傳入的數(shù)組格式必須像這樣子[['name','Alice'],['age',12],...]