目录
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 }