JS | 一個類似於Array.prototype.map & 作用於Object方法

目錄

 

1、問題

2、map函數

3、需求實現

3.1方法一

3.2方法二

4、封裝

4.1簡單封裝

4.2高級用法

4.3ES6優雅化

5、最終成果

---

1、問題

有一個Object

myObject = { 'a': 1, 'b': 2, 'c': 3 }

是否可以有一個類似於Array.prototype.map的方法，使得效果如下：

newObject = myObject.map(function (value, label) {
    return value * 2;
});

// newObject is now { 'a': 1, 'b': 4, 'c': 6 }

2、map函數

 

3、需求實現

3.1方法一

myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key,index){
    myObject[key] *= 2;
})
console.log(myObject) // { a: 1, b: 4, c: 6 }

3.2方法二

for (var key in myObject) {
    if (myObject.hasOwnProperty(key)) {
        myObject[key] *= 2;
    }
}

需求已達到 ， 但是怎樣封裝成爲一個方法被調用呢？

 

4、封裝

4.1簡單封裝

function map(obj, callback) {
    Object.keys(obj).map(function (key) {
        obj[key] = callback(obj[key]);
    });
    return obj;
}

newObject = map(myObject, function(x) { return x * x; });

4.2高級用法

此時需要借用一個reduce()

function objectMap(object, callback) {
    return Object.keys(object).reduce(function (result, key) {
        result[key] = callback(object[key])
        return result
    }, {})
}
var newObject = objectMap(myObject,function(value){
    return value * 2;
})
console.log(newObject)

4.3ES6優雅化

const objectMap = (obj, fn) =>
  Object.fromEntries(
    Object.entries(obj).map(
      ([k, v], i) => [k, fn(v, k, i)]
    )
  )
  
const myObject = { a: 1, b: 2, c: 3 }

console.log(objectMap(myObject, v => 2 * v)) 

 

5、最終成果

以ES6封裝爲例

var myObject = { 'a': 1, 'b': 2, 'c': 3 };
Object.prototype.map = function (fn) {
    Object.keys(this).map((key) => {
        this[key] = fn(this[key], key);
    })
    return this;
}
Object.defineProperty(Object.prototype, 'map', { enumerable: false });

newObject = myObject.map(function (value, label) {
    return value * 2;
});
console.log(newObject)  // { 'a': 1, 'b': 4, 'c': 6 }