数组高阶方法的复习与实现
forEach方法
forEach方法的使用
forEach方法:作用循环遍历数组,接收两个参数,没有返回值。
- 第一个是一个回调函数;里面可以接收三个参数;第一个参数是数组里的元素,第二个是元素的索引,第三个是数组本身
- 第二个参数是第一个函数this指向,不填默认指向window
let arr = [1,2,3];
let obj = {a:1};
arr.forEach(function(item,index,arr){
console.log(item,index,arr,this)
},obj)
//打印结果:1 0 [1,2,3] {a:1}
// 2 1 [1,2,3] {a:1}
// 3 2 [1,2,3] {a:1}
forEach方法的实现
Array.prototype.myForEach = function (callback, _this = window) {
let len = this.length;
// let _this = arguments[1]==undefined?'window':arguments[1];
for (let i = 0; i < len; i++) {
callback.call(_this,this[i],i,this);
}
}
filter方法
filter方法的使用
filter方法:作用是对数组基于遍历进行过滤筛选,接收两个参数,返回一个新数组
- 第一个是一个回调函数;里面可以接收三个参数;第一个参数是数组里的元素,第二个是元素的索引,第三个是数组本身
- 第二个参数是第一个函数this指向,不填默认指向window
- 筛选通过回调函数返回true和false进行筛选,不填筛选条件,默认返回undefined为false,新数组为[]
let arr = [1,2,3,4,5];
let arr1 = [
{
name:'a',
age:1
},
{
name:'b',
age:2
},
{
name:'c',
age:3
}
]
let newArr = arr.filter(function(item,index,arr){
return item>2;
})
console.log(newArr)//[3,4,5]
let newArr1 = arr.filter(function(item,index,arr){
return item.age!==2;
})
console.log(newArr1)//[{name:'a',age:1},{name:'c',age:3}]
filter方法的实现
Array.prototype.myFilter = function (cb, _this = window) {
let len = this.length;
let newArr = [];
for (let i = 0; i < this.length; i++) {
//cb.apply(_this, [this[i], i, this]) == true ? newArr.push(this[i]) : '';
cb.apply(_this.[this[i],i,this])&&newArr.push(this[i]);
}
return newArr;
}
map方法
map方法的使用
map方法:作用是对数组基于遍历进行映射,接收两个参数,返回一个新数组
- 第一个是一个回调函数;里面可以接收三个参数;第一个参数是数组里的元素,第二个是元素的索引,第三个是数组本身
- 第二个参数是第一个函数this指向,不填默认指向window
let arr = [1, 2, 3, 4, 5]
let a = arr.map(function (item, index, arr) {
return item + 10;
})
console.log(a, arr)//[11,12,13,14,15] [1,2,3,4,5]
let arr1 = [
{
age: 1,
name: 'xx'
}, {
age: 2,
name: 'ss'
}
];
let b = arr1.map(function(item,index,arr){
return {age:item.age+10}
})
console.log(b)//[{age:11},{age:12}]
map方法的实现
Array.prototype.myMap = function (cb, _this = window) {
let len = this.length;
let newArr = [];
for (let i = 0; i < len; i++) {
newArr.push(cb.apply(_this,[this[i],i,this]));
}
return newArr
}
every方法
every方法的使用
every方法:作用是对数组基于遍历进行判断,返回一个布尔值,数组全部满足条件返回true,否则返回false,接收两个参数
- 第一个是一个回调函数;里面可以接收三个参数;第一个参数是数组里的元素,第二个是元素的索引,第三个是数组本身
- 第二个参数是第一个函数this指向,不填默认指向window
let arr = [1,2,3,4,5];
let obj = {};
let flag = arr.every(function(item){
console.log(this)
return item>0
},obj)
let flag1 = arr.every(function(){
return item>3
})
console.log(flag,flag1)//true false
every方法的实现
Array.prototype.myEvery = function(cb,_this=window){
let len = this.length;
let flag = true;
for(let i = 0; i < len; i++){
if(!cb.call(_this,this[i],i,this)){
flag = false;
break;
}
}
return flag;
}
some方法
some方法的使用
some方法:作用是对数组基于遍历进行判断,返回一个布尔值,数组只要有一个满足条件就返回true,否则返回false,接收两个参数
- 第一个是一个回调函数;里面可以接收三个参数;第一个参数是数组里的元素,第二个是元素的索引,第三个是数组本身
- 第二个参数是第一个函数this指向,不填默认指向window
let arr = [1,2,3,4,5];
let obj = {};
let flag = arr.some(function(item){
console.log(item)
return item>2
})
let flag1 = arr.some(function(item){
console.log(item,this)
return item>5
})
console.log(flag,flag1) //true false
some方法的实现
Array.prototype.mySome = function (cb, _this = window) {
let len = this.length;
let flag = false;
for (let i = 0; i < len; i++) {
if (cb.call(_this, this[i], i, this)) {
flag = true;
break;
}
}
return flag;
}
reduce方法
reduce方法的使用
reduce方法:作用是对数组中所有元素调用指定回调函数,返回一个累计结果值,接收两个参数
- 第一个参数是一个回调函数;里面可以接收4个参数;第一个是初始值,第2个参数是数组里的元素,第3个是元素的索引,第4个是数组本身
- 第二个参数填写了将作为回调函数的第一个值的初始值
let arr = [2,3,4];
let num = 1;
arr.reduce(function(prevValue,currentValue,currentIndex,arr){
console.log(prevValue,currentValue,currentIndex)
},num)
//打印
// 1 2 0 [2,3,4]
// undefined 3 1 [2,3,4]
// undefined 4 2 [2,3,4]
//传入num会作为第一次循环的prevValue,如果不传入num第二个参数,则prevValue会取数组第一项2,currentValue为3,currentIndex为1;
//基本用法 数组累加
let sum = arr.reduce(function(prev,current){
return prev+current;
})
console.log(sum)//9
reduce方法的实现
Array.prototype.myReduce = function (cb, initValue, _this = window) {
let len = this.length;
let prevValue = initValue;
for (let i = 0; i < len; i++) {
prevValue = cb.apply(_this, [prevValue, this[i], i, this]);
// console.log(prevValue)
}
return prevValue;
}
let arr = [2,3,4];
let b = arr.myReduce((pre,cur)=>pre+cur,1);
console.log(b) //10