哦,节日快乐。
一.myMap详解
1.map的实现
let arr = [3, 2, 5, 8, 9, 4];
// arr.map((item, index, items) => console.log(item, index, items));
// arr.map((item, index, items) => item); //返回数组
// 实现
Array.prototype.myMap = function (callback, callbackThis) {
// 遇到的问题3 :也就是参数的处理:
// this的处理 满足必须是数组
let isArr = Object.prototype.toString.call(this);
if (isArr !== "[object Array]") {
throw new Error(this + '.myMap is not a function');
}
// callback 必须存在
if (typeof callback != 'function') {
throw new Error(callback + " is not a function");
}
// console.log(callback);
// callback();//遇到的问题1:回调函数的参数如何传过去
let arrHelp = [];
//解决问题1的办法是这样的 :知道this是谁
// console.log(this); 是 [3, 2, 5, 8, 9, 4]
let len = this.length;
for (let i = 0; i < len; i++) {
let arrHelpItem = callback.call(callbackThis, this[i], i, this);
arrHelp.push(arrHelpItem);
}
//解决问题2的办法:myMap()方法没有写返回值 默认是undefined ,此时根据map的特性 返回的是数组 所以使用辅助数组帮助
return arrHelp;
}
// test
arr.myMap((item, index, items) => {
console.log(item, index, items);
return item; //遇到的问题2:返回undefined 为什么呢?
});
// 根据map 参数超过三个 返回是undefined
arr.myMap((item, index, items, d) => {
console.log(item, index, items, d);
});
arr.myMap((item, index, items) => {
return this; //window
}, ['a', 'b']);
arr.myMap(function () {
return this; // ['a','b']
}, ['a', 'b']);
2.map 的应用
//using :使用 map 重新格式化数组中的对象
var kvArray = [{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 }];
var reformattedArray = kvArray.myMap(function (obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
二.myReduce详解
1.reduce实现
let arr = [3, 2, 5, 8, 9, 4];
arr.reduce((a, b, c, d, e) => console.log(a, b, c, d, e));
arr.reduce((a, b, c, d, e) => { console.log(a, b, c, d, e); return a + b }, 0); //31
//实现
Array.prototype.myReduce = function (callback, initVal) {
// this的处理 满足必须是数组
let isArr = Object.prototype.toString.call(this);
if (isArr !== "[object Array]") {
throw new Error(this + '.myReduce is not a function');
}
// callback 必须存在
if (typeof callback != 'function') {
throw new Error(callback + " is not a function");
}
let call = initVal || this[0];
let len = this.length;
let bool = true; //借助bool值 处理reduce方法的 第二个参数
for (let i = 0; i < len - 1; i++) {
if (initVal && bool) {
bool = false;
i = i - 1;
}
call = callback(call, this[i + 1], i + 1, this);
}
return call; //解决问题1办法:return call 并且使用 callback函数第一个参数是 return的call
}
// test
arr.myReduce((pre, cur, time, items) => {
console.log(pre, cur, time, items);
return pre + cur; // 遇到的问题1:如果return这个是怎么处理?
});
// 根据reduce 参数超过四个 返回是undefined
arr.myReduce((pre, cur, time, items, e) => {
console.log(pre, cur, time, items, e);
});
2.reduce应用
//using 将二维数组转化为一维
let flattened = [[0, 1], [2, 3], [4, 5]].myReduce(
(acc, cur) => acc.concat(cur),
[]
);
// using 计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let countedNames = names.myReduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
// using 按属性对object分类
let people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.myReduce(function (acc, obj) {
let key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);
// using 使用扩展运算符和initialValue绑定包含在对象数组中的数组
let friends = [{
name: 'Anna',
books: ['Bible', 'Harry Potter'],
age: 21
}, {
name: 'Bob',
books: ['War and peace', 'Romeo and Juliet'],
age: 26
}, {
name: 'Alice',
books: ['The Lord of the Rings', 'The Shining'],
age: 18
}];
let allbooks = friends.myReduce(function (prev, curr) {
return [...prev, ...curr.books];
}, []);
console.log(allbooks);
//using 数组去重 let orderedArray = Array.from(new Set(myArray));
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.myReduce(function (accumulator, currentValue) {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, [])
console.log(myOrderedArray);
注意:map和reduce函数调用都有第二个参数,但是呢map的第二个参数不常用。