第 162 题：实现对象的 Map 函数类似 Array.prototype.map

Question

// 实现一个 map 函数
const targetData = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
const objMap = (obj, fn) => {
  if (typeof fn !== "function") {
    throw new TypeError(`${fn} is not a function !`);
  }
  return JSON.parse(JSON.stringify(obj, fn));
};
objMap(targetData, (key, value) => {
  if (value % 2 === 0) {
    return value / 2;
  }
  return value;
});
// {a: 1, b: 3, c: 2, d: 5}

Answer 1

为什么怎么多人搞深克隆

Answer 2

Object.prototype.map = function(fn) {
  const deepclone = JSON.parse(JSON.stringify(this));
	return Object.keys(deepclone).reduce((result, key, index) => {
  	result[key] = fn(deepclone[key], key, index);
    return result;
  }, {})
}

const obj = {
	a: 1,
  b: 2,
  c: 3,
}
const newObj = obj.map((value, key, index) => ({ [key]: value + ',,,' }));
console.log(newObj);

Answer 3

const targetData = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};

Object.prototype.map = function(fn) {
  const res = {}
  for(e in this) {
    if(this.hasOwnProperty(e)) {
      res[e] = fn(this[e])
    }
  }
  return res
}

const p = targetData.map(e => e + 1)
console.log(p)

Answer 4

Object.prototype.map= function(cb) {
    const obj = this
    const result = {}
    for(key in obj) {
        if (obj.hasOwnProperty(key)) {
            const item = cb(key, obj[key])
            result[key] = item
        }
    }
    return result
}

const test1 = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
const r1 = test1.map(() => {
   if (value % 2 === 0) {
    return value / 2;
  }
  return value;
})
// r1 :  {a: 1, b: 3, c: 2, d: 5}

const test2 = {
 a: 2,
 b: 3,
 c: 4,
 d: 5
};
const r2 = test2.map((key, val) => {
  return ++val
})
// r2: {a: 3, b: 4, c: 5, d: 6}

Answer 5

列如：

// 实现一个 map 函数
const targetData = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
const objMap = (obj, fn) => {
  if (typeof fn !== "function") {
    throw new TypeError(`${fn} is not a function !`);
  }
  return JSON.parse(JSON.stringify(obj, fn));
};
objMap(targetData, (key, value) => {
  if (value % 2 === 0) {
    return value / 2;
  }
  return value;
});
// {a: 1, b: 3, c: 2, d: 5}

参考：
你不知道的 JSON.stringify () 的威力

这个实现有问题，首先 JSON.stringify (obj, fn) 中第一次传入 fn 中的参数为 "" 和对象本身，从第二次开始才会传入 key 和 val，所以应该加上条件处理。

(() => {

    Object.prototype._map = function (fn) {
        if (typeof fn !== 'function') {
            throw new TypeError(`${fn} is not a function !`)
        }
        return JSON.parse(JSON.stringify(this, (key, val) => {
            if (key) {
                return fn.call(this, key, val)
            } else {
                return val
            }
        }))
    }
    // 用例
    let obj = {
        a: 2,
        b: 3,
        c: 4,
        d: 5
    };
    let _obj = obj._map((key, val) => {
        return ++val
    })
    console.log(_obj);
})();

对的，虽然不会被 JSON.stringify 返回但是做个判断总是好的

Answer 6

列如：

// 实现一个 map 函数
const targetData = {
  a: 2,
  b: 3,
  c: 4,
  d: 5
};
const objMap = (obj, fn) => {
  if (typeof fn !== "function") {
    throw new TypeError(`${fn} is not a function !`);
  }
  return JSON.parse(JSON.stringify(obj, fn));
};
objMap(targetData, (key, value) => {
  if (value % 2 === 0) {
    return value / 2;
  }
  return value;
});
// {a: 1, b: 3, c: 2, d: 5}

参考：

你不知道的 JSON.stringify() 的威力

这个实现有问题，首先JSON.stringify(obj, fn)中第一次传入fn中的参数为 ""和对象本身，从第二次开始才会传入key和val，所以应该加上条件处理。

(() => {

    Object.prototype._map = function (fn, oThis = null) {
        if (typeof fn !== 'function') {
            throw new TypeError(`${fn} is not a function !`)
        }
        return JSON.parse(JSON.stringify(this, (key, val) => {
            if (key) {
                return fn.call(oThis, key, val, this)
            } else {
                return val
            }
        }))
    }
    // 用例
    let obj = {
        a: 2,
        b: 3,
        c: 4,
        d: 5
    };
    let _obj = obj._map((key, val, o) => {
        return ++val
    })
    console.log(_obj);
})();