数组方法
方法列举
- Foreach
- Filter
- Map
- Every
- Some
- Reduce
- ReduceRight
Foreach 遍历并执行函数
var personArr = [{name:'张三',sex:'m',age:18},
{name:'李四',sex:'m',age:28},
{name:'王二',sex:'f',age:22},
{name:'麻子',sex:'m',age:16}]
personArr.forEach(function(ele, index,self){
console.log(ele,index,self);
});
- forEach是数组原型上的方法，他接收两个参数，第一个参数是一个函数func，第二个参数用来调整this指向
- foeEach方法会遍历数组personArr，并循环执行func，每次执行都会将personArr当前的元素、索引、和自身作为形参传给函数func
实例
var sla = [8000,9000,9822,10002];
personArr.forEach(func,sla);
function func(ele,index,self){
ele.name += '先生';
ele.sla = this[index];
}
console.log(personArr);
运行结果
foreach1.jpg
- 通过forEach方法更改数组的属性，改变this指向之后操作数据更加方便
源码仿写
Array.prototype.myforEach = function(func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len; i++){
func.apply(_this,[this[i],i,this]);
}
console.log('myforEach');
}
运行结果
foreach2.jpg
Filter 遍历筛选
用法
var teenager = personArr.filter(func);
function func(ele,index,self){
return ele.age < 18;//筛选出年龄小于18岁的ele
}
console.log('teenager',teenager);
运行结果
filter1.png
- filter方法与foreach方法一样也接收两个参数，一个是函数func，另一个用来改变this指向
- filter方法在遍历数组的同时，每访问一个元素ele就执行一次函数func
- filter方法在执行func函数的时候会将当前的元素ele，索引index，数组本身self【固定顺序】作为形参传给函数func
- filter方法会让函数func内部的this指向第二个参数
- func函数需要返回一个布尔类型的值
- filter方法会返回一个数组，数组里面的内容由func的返回值决定，如果func返回TRUE，那么当前访问的元素ele就会被加入到返回的数组中
源码仿写
Array.prototype.myFilter = function(func){
var _this = arguments[1] || window;
var arr = [];
var len = this.length;
for(var i = 0;i < len; i++){
// if( func.apply(_this,[this[i],i,this]) ){
// arr.push(this[i]);
// }
func.apply(_this,[this[i],i,this]) && arr.push(this[i]);
}
return arr;
}
//调用myFilter
var teenager1 = personArr.myFilter(func,[]);
console.log('teenager1',teenager1);
myFilter运行结果：
filter2.png
结果一样，仿写成功！
filter1.png
关于第二个参数改变func内部this指向的例子以后再补充
Map 遍历映射
用法
var newArr = personArr.map(func,sla);
function func(ele,index,self){
ele.age += 10;//给每个元素的age属性＋10
ele.sla = this[index];//给每个元素添加属性sla，这里this指向传入的对象sla
// console.log(ele,index,self,this);
return ele;
}
console.log(newArr);
运行结果
map1.png
- map方法的参数和前面一样
- map方法会返回一个新数组，数组里面的元素是函数func的返回值
- map方法和foreach方法效果差不多，但是foreach是在原数组的基础上操作的，map方法不会改变原数组
源码仿写
Array.prototype.myMap = function(func){
var _this = arguments[1] || window;
var arr = [];
var len = this.length;
for(var i = 0;i < len;i ++){
arr.push( func.apply(_this,[this[i],i,this]) );
return arr;
}
}
//调用myMap
var newArr1 = personArr.myMap(func,sla);
console.log('newArr1',newArr1);
运行结果
map2.png
从结果可以看出map方法可以达到foreach方法一样的效果，并且myMap仿写成功
Every
作用
判断数组中的元素是否都符合条件，都符合返回true，只要有一个不符合就返回false
- 参数【同上】
- 返回值 true/false
- func需要有一个返回值，在循环遍历数组的同时执行函数func，只要函数返回false，就不再遍历了，并且返回false
用法
function func(ele,index,self){
console.log(ele,index,self);//查看函数接收到的形参具体是什么
}
//调用every方法，此时func没有返回值
var flag = personArr.every(func);
console.log('flag',flag);
- 当函数没有设置返回值时，会默认返回undefined，every方法通过隐式类型转换判定为false，所以只执行一次便结束（只打印索引为0的元素和数组自身），返回false
运行结果
every1.jpg
function func(ele,index,self){
return ele.age > 20;//判断年龄是否大于20，是——返回true，不是返回false
}
//调用every方法，此时func有返回值
var flag = personArr.every(func);
console.log('flag',flag);
运行结果
every2.png
源码仿写
Array.prototype.myEvery = function(func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len;i ++){
if( func.apply(_this,[this[i],i,this]) == false){
return false;
}
}
return true;
}
var flag1 = personArr.myEvery(func);
console.log('flag1',flag1);
运行结果
every3.png
成功
Some
作用
和every刚好相反，some是只要有一个符合要求就返回true，如果全都不符合要求才返回false
- 参数【同上】
- 返回值【同上】
用法演示
function func(ele,index,self){
return ele.age < 20;
}
var flag = personArr.some(func);
console.log('flag',flag);
源码仿写
Array.prototype.mySome = function (func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len; i ++){
if( func.apply(_this,[this[i],i, this]) ){
return true;
}
}
return false;
}
//调用mySome方法
var flag1 = personArr.some(func);
console.log('flag1',flag);
运行结果
some.png
可以看到函数func一样，但是结果与every相反
Reduce
作用
传递一个初始值，该值将基于数组的元素进行一系列操作
注释
- 参数：func和prevValue，这里与前面的方法有所不同，reduce方法会将第二个参数作为第一个参数传给func
- reduce方法传给函数func的参数：preValue|icurValue|index|self 总共四个，第二个和前面的ele等同
- 函数func最后也要返回prevValue，用来进行后续操作
- reduce方法会返回最终的prevValue
用法
var initName = '';
var nameStr = personArr.reduce(func,initName);
function func(prevValue,icurValue,index,self){
prevValue += icurValue.name;//将所有元素的name值拼接成一个字符串
return prevValue;
}
console.log('nameStr',nameStr);
源码仿写
Array.prototype.myReduce = function(func,initKey){
var len = this.length;
var prevValue = initKey;
for(var i = 0; i < len; i++){
prevValue = func(prevValue,this[i],i,this);
}
return prevValue;
}
//调用myReduce方法
var nameStr1 = personArr.myReduce(func,initName);
console.log('nameStr1',nameStr1);
运行结果
reduce.png
应用
var cookieStr = '_ga=GA1.2.475962636.1637567371; _gid=GA1.2.610551851; UM_distinctid=17d469f16eef0b; locale=zh-CN; read_mode=day; default_font=font2; Hm_lvt_0c0e9d9b1e7d617b3e6842e85b9fb068=1637567371; sensorsdata2015jssdkcross=%7B%22distinct'
function getCookie(cookieStr){
var cookieArr = cookieStr.split('; ');
var cookieObj = {};
return cookieArr.reduce(function(prevValue,icurValue,index,self){
var arr = icurValue.split('=');
prevValue[arr[0]] = arr[1];
return prevValue;
},cookieObj)
}
var cookieObj = getCookie(cookieStr);
console.log(cookieObj);
//使用原生reduce方法实现
/**********************************************/
//以下调用自己的方法myReduce实现
var cookieObj = getCookie(cookieStr);
console.log('原生Reduce',cookieObj);
function getCookie1(cookieStr){
var cookieArr = cookieStr.split('; ');
var cookieObj = {};
//此处使用myReduce
return cookieArr.myReduce(function(prevValue,icurValue,index,self){
var arr = icurValue.split('=');
prevValue[arr[0]] = arr[1];
return prevValue;
},cookieObj)
}
var cookieObj1 = getCookie1(cookieStr);
console.log('myReduce',cookieObj1);
说明
现在有一个字符串cookieStr，他是由多个'name=key'以'; '连接起来的，现在想要将cookieStr的内容转化成一个对象，以方便后续操作name和key
- 使用myReduce方法的结果对比
运行结果
reduce1.png
结果一样，说明仿写成功
通过getCookie函数获得cookieObj
通过cookieObj.name可以获得key值了
如cookieObj.read_mode得到'day'
reduce3.png
网友评论