for 循环不是目的，map 映射更有意义！【FP探究】

·  阅读 10711

楔子

``````function sayHi() {
console.log("Hi");
}
function sayBye() {
console.log("Bye");
}

function greet(type, sayHi, sayBye) {
type === 1 ? sayHi() : sayBye()
}

greet(1, sayHi, sayBye); // Hi

``````[1,2,3].map(item => item*2)

实践

Talk is cheap. Show me the code.

1️⃣

``````const arr1 = [1, 2, 3];
const arr2 = [];
for(let i = 0; i < arr1.length; i++) {
arr2.push(arr1[i] * 2);
}
console.log(arr2); // [ 2, 4, 6 ]

2️⃣

``````const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);  // [ 2, 4, 6 ]

1️⃣

``````const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i = 0; i < birthYear.length; i++) {
let age = 2018 - birthYear[i];
ages.push(age);
}
console.log(ages); // [ 43, 21, 16, 23, 33 ]

2️⃣

``````const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = birthYear.map(year => 2018 - year);
console.log(ages); // [ 43, 21, 16, 23, 33 ]

1️⃣

``````const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);

2️⃣

``````const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

1️⃣

``````const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
console.log(sum); // 25

2️⃣

``````const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
console.log(sum); // 25

手写

• map1
``````Array.prototype.map1 = function(fn) {
let newArr = [];
for (let i = 0; i < this.length; i++) {
newArr.push(fn(this[i]))
};
return newArr;
}

console.log([1,2,3].map1(item => item*2)) // [2,4,6]

• filter1
``````Array.prototype.filter1 = function (fn) {
let newArr=[];
for(let i=0;i<this.length;i++){
fn(this[i]) && newArr.push(this[i]);
}
return newArr;
};

console.log([1,2,3].filter1(item => item>2)) // [3]

• reduce1
``````Array.prototype.reduce1 = function (reducer,initVal) {
for(let i=0;i<this.length;i++){
initVal =reducer(initVal,this[i],i,this);
}
return initVal
};

console.log([1,2,3].reduce1((a,b)=>a+b,0)) // 6

• mapForEach
``````function mapForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
newArray.push(
fn(arr[i])
);
}
return newArray;
}

mapForEach([1,2,3],item=>item*2) // [2,4,6]

• filterForEach
``````function filterForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
fn(arr[i]) && newArray.push(arr[i]);
}
return newArray;
}

filterForEach([1,2,3],item=>item>2) // [3]

• reduceForEach
``````function reduceForEach(arr,reducer,initVal) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
initVal =reducer(initVal,arr[i],i,arr);
}
return initVal;
}

reduceForEach([1,2,3],(a,b)=>a+b,0) // 6

小结

`for` 循环遍历只是操作性的手段，不是目的！而封装过后的 `map` 映射有了更易读的意义，映射关系（输入、输出）也是函数式编程之核心！

YY一下：既然 `map` 这类函数都是从 for 循环封装来的，如果你能封装一个基于 for 循环的另一种特别实用的高阶映射或者其它高阶函数，是不是意味着：有朝一日有可能被纳入 JS 版本标准 API 中？🐶🐶🐶