JavaScript:map全局函数

数组的map方法

  • const new_array = arr.map(callback[, thisArg]);
    function callback(currentValue, index, array)

  • 原数组arr不变,返回一个新组数

  • callback依次作用原数组的每一个成员,生成新数组中相应的成员。

  • callback的参数currentValue和返回值类型不需要相同

  • 一般情况,callbackindexarray不用传

  • 一般情况,thisArg参数不用传。

Array.prototype.map()

map全局函数

  • 也是先判断类型,如果是数组,直接调用

  • 如果是对象,先拿到属性名字的数组。

  • 这里不能用对象的属性名的数组的map方法,而是应该reduce方法,初始值是{}
    因为map的结果还是一个数组,而reduce的结果才可能是一个对象。

  • 这里不能用对象的值的数组,值变换之后,要和属性名对应起来。根据属性名可以找到值,但是根据值,无法找到对应的属性名

  • 导出为函数,方便使用,文件名map_function.js

// 全局函数,区别于数组的reduce()方法
module.exports = function mapFunction(callback, target) {
    // 如果callback不是函数,调用数组的reduce会报错
    if ('function' !== typeFunction(callback)) {
        return target;
    }
    const type = typeFunction(target)
    if (type === 'array') {
        return target.map(callback);
    } else if (type === 'object') {
        const keys = Object.keys(target);
        return keys.reduce(function (accumulator, currentValue) {
            accumulator[currentValue] = callback(target[currentValue]);
            return accumulator;
        }, {});
    } else {
        return target;
    }
}

// private
function typeFunction(object) {
    return Object.prototype.toString.call(object).slice(8, -1).toLowerCase();
}
  • 测试文件,文件名为map_function_test.js
const mapFunction = require('./map_function.js');
const log = console.log;

// 平方根
const sqrt = Math.sqrt;
log(mapFunction('', [1, 4, 9]));    // [ 1, 4, 9 ]
log(mapFunction(sqrt, [1, 4, 9]));  // [ 1, 2, 3 ]
log(mapFunction(sqrt, {
    one : 1, 
    two : 4, 
    three : 9
}));                                // { one: 1, two: 2, three: 3 }

// 双倍
const double = function(currentValue) {
    return currentValue * 2;
};
log(mapFunction('', [1, 4, 9]));      // [ 1, 4, 9 ]
log(mapFunction(double, [1, 4, 9]));  // [ 2, 8, 18 ]
log(mapFunction(double, {
    one : 1, 
    two : 4, 
    three : 9
}));                                  // { one: 2, two: 8, three: 18 }

// 将单词转换为复数形式
function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
var object = {
    0 : "foot",
    1 : "goose",
    2 : "moose",
    3 : "kangaroo",
};
log(mapFunction('', words));           // [ 'foot', 'goose', 'moose', 'kangaroo' ]
log(mapFunction(fuzzyPlural, words));  // [ 'feet', 'geese', 'meese', 'kangareese' ]
log(mapFunction('', object));          // { '0': 'foot', '1': 'goose', '2': 'moose', '3': 'kangaroo' }
log(mapFunction(fuzzyPlural, object)); // { '0': 'feet', '1': 'geese', '2': 'meese', '3': 'kangareese' }

你可能感兴趣的:(JavaScript:map全局函数)