一、indexOf();
功能: 查询数组中是否存在某个数据;根据传入的数据,查找数组中的位置。
参数: 两个参数。
第一个参数:要查找的数据;
第二个参数(可省略):规定从索引为几的位置开始查找。
返回值: 查找传入的数据,返回对应索引;没有找到返回-1;
注意点: ①如果查找的数据有多个,那么indexOf()只会返回第一个相同数的对应索引值。
②同时indexOf()查找的顺序是从左向右,即从索引小的往索引大的方向。
是否改变原数组: 否。
回调函数的返回值造成了什么影响: 没有影响!
例题演示:
二、lastIndexOf(); (第一个是小写的L!)
功能: 查询数组中是否存在某个数据;根据传入的数据,查找数组中的位置。和indexOf()是一样的
提示: 见名知意。
lastIndexOf()与indexOf()的区别: lastIndexOf()是从右向左查找的,也就是从索引大的往索引小的地方查找。同时与indexOf()一样,只会返回第一个相同数的对应索引值。
三、forEach();
功能: 迭代(遍历);
参数: 回调函数;
格式:数组名.forEach(function(形参一,形参二,形参三){…})
返回值: undefined;
是否改变原数组:否。
回调函数的返回值造成了什么影响: 没有影响!
详解:
arr01.forEach(function(val(每次的数值),idx(每个数值对应索引),self(数组自身)){
console.log(val); //遍历
});
四、map();
功能: ①遍历②可根据回调函数的返回值条件组成新的数组!
参数: 回调函数;
格式:数组名.map(function(形参一,形参二,形参三){…});
返回值: 返回一个与原数组同等长度的新数组。数组元素由回调函数的return决定
注意点:回调函数中不写return,map()则会返回一个同原数组长度一样装满undefined的新数组
是否改变原数组:否。
回调函数的返回值造成了什么影响: 回调函数每次返回的数值都会被放到map()最终返回的新数组内。
详解:
var arr=[10,100,1000,10000]; //原数长度为4
var a=arr.map(function(val(每次的数值),idx(每个数值对应的索引值),self(数组本身)){
console.log(val); //这个是遍历作用!----------------------功能1
return "hello"; //规定回调函数的每次返回值是"hello"。
//根据返回值我们知道每次的返回值会被存到同长度的新数组中。
--------------------------功能2
});
console.log(a); //["hello","hello","hello","hello"] map()返回值的数组长度为4
//新数组中的元素也都是map()中回调函数每次的返回值。
例题:编写函数map(arr) 把数组中的每一位数字都增加30%,并返回一个新数组?
思路:①遍历加值很思路简单,但是不高级
②试着利用改变map()的返回值来进行操作
五、filter() ----- filter英文:过滤;
功能: ①迭代遍历 ②可根据回调函数的返回值条件组成新的满足条件的数组由filter()返回出来。
参数: 回调函数;
格式:数组名.map(function(形参一,形参二,形参三){…});
返回值: 返回一个新数组;数组中的元素是由回调函数的return从原数组中筛选出来的数值
注意点:回调函数中不写return,filter()则会返回一个空数组。
是否改变原数组:否。
回调函数的返回值造成了什么影响: 把原数组符合回调函数返回值条件的数值存放到filter()返回的新数组中。
详解:
var arr=[21,43,45,76,98,43,32];
var a=arr.filter(function(val(每次的数值),idx(每个数值对应的索引值),self(数组本身)){
console.log(val); //遍历----------------------------功能1
//条件一: return true; //只要val值对应的布尔值是true则符合条件
//条件二: return false; //只要val值对应的布尔值是false则符合条件
----------------------------功能2
});
console.log(a); //条件一:[21,43,45,76,98,43,32]; 所有元素都符合布尔值为true;
//条件二:[]是个空数组!因为原数组没有符合布尔值为false条件的数值;
例题:编写函数找出arr数组中大于33的所有数!并打印出来!
思路:①遍历加值很思路简单,但是不高级
②试着利用改变filter()的返回值来进行操作
六、some() 联想记忆:一个符合就是true
功能: ①迭代遍历 ②判断数组中是否有符合回调函数return条件的值,只要有一个符合,那就返回 true,同时停止遍历,如果没有就返回false;
参数: 回调函数;
格式:数组名.map(function(形参一,形参二,形参三){…});
返回值: true/false ;
注意点:①只要有一个符合回调函数return设立的条件的数那就返回turn,同时遍历终止!没有符合的 才会遍历全部;
②回调函数中不写return,some()则会返回false
是否改变原数组:否。
回调函数的返回值造成了什么影响: 决定着some()的返回值!
详解:
var arr=[1,2,3,4,5,6,7];
var a=arr.some(function(val(每次的数值),idx(每个数值对应的索引值),self(数组本身)){
//条件一 : return val<8;
//条件二 : return val>8;
//条件三 : return val=8;
});
console.log(a); // 条件一:true因为数组arr有小于8的数
因为第一个数就是小于8的数!所以some()遍历了一次就终止了
// 条件二:false;因为数组arr中没有一个是大于8的数
因为数组中没有一个大于8的数,所以some()本次遍历全部的数了。
// 条件三:false;因为数组arr中没有一个是等于8的数
因为数组中没有一个等于8的数,所以some()本次遍历全部的数了。
例题:编写函数判断arr这个数组有没有4;
思路:①遍历加值很思路简单,但是不高级
②试着利用改变some()的返回值来进行操作
七、every(); 联想记忆:全部符合才为true
功能: ①迭代遍历 ②判断数组中是否有符合回调函数return条件的值,只有全都符合,才返回true,只要有一个不符合就返回false,同时停止遍历;
参数: 回调函数;
格式:数组名.map(function(形参一,形参二,形参三){…});
返回值: true/false ;
注意点:①只有全都符合回调函数return设立的条件的数那就返回turn;只要有一个不符合就返回false,同时停止遍历;②回调函数中不写return,every()则会返回false
是否改变原数组:否。
回调函数的返回值造成了什么影响: 决定着every()的返回值!
详解:
var arr=[1,2,3,4,5,6,7];
var a=arr.every(function(val(每次的数值),idx(每个数值对应的索引值),self(数组本身)){
//条件一 : return val<8;
//条件二 : return val>2;
});
console.log(a); //条件一:true;原数组中全都满足小于8!
//条件二:false;原数组中 第一个就不符合!返回false,同时终止遍历!
例题:编写判断该数组是否都是3的倍数!!
思路:①遍历加值很思路简单,但是不高级
②试着利用改变every()的返回值来
综合some()和every()给出记忆点:
八、reduce() 我眼中的哈姆雷特
功能: 归并数值;
参数: 两个参数。
第一个参数:回调函数;
第二个参数(可省略):定义回调函数第一个参数的初始值!
格式: 数组名.reduce(function(形参一,形参二,形参三,形参四){…},参数2(可省略));
返回值: 回调函数的第一个参数(prev)的最终值。
注意点:①第一次的回调函数不返回任何的值;
②回调函数的第一个参数会存储每次回调函数的返回值(第一次除外);
③回调函数的第一个参数默认值是数组的第一个数;
④reduce()最终返回的是回调函数最后一次return存储在prev里得值;
回调函数详解:
arr05.reduce(function(prev(存储每次return的返回值),val,idx,self){
最重要: //第一个参数prev:每次返回值返回的存储位置,起始默认值是数组的第一个数;
//第二个参数val:数组中的每个数值;
//第三个参数idx数值对应的索引;
//第四个参数self表示数组本身;
});
是否改变原数组:否。
回调函数的返回值造成了什么影响: 决定着reduce()的返回值。
分步解析: 如何理解:第一次的回调函数不返回任何的值?
①回调函数少执行一次||||||||||||||||||||||||||||||||||||||||
【注意:】这仅仅是第二个参数没写的情况下会少执行一次!当;数组名.reduce(function(形参一,形参二,形参三,形参四){…},参数2(没有省略));它的回调函数的执行次数就不会减少!!!很重要我都犯错了!
var arr05=[1,1,2,3,4,5];
var i=0;
console.log(arr05.reduce(function(prev,val){
return ++i;
})); //结果为5;
//我明明6个数回调函数应该执行6次返回值啊!为什么是5呢?
②数组合并的和还是16没有问题
var arr05=[1,1,2,3,4,5];
console.log(arr05.reduce(function(prev,val){
return prev+val;
})) //16 符合数组的和! 那明明少执行一次为什么和值是没问题的呢?
// 注意:prev的默认值是数组的第一个数! 所以就算执行5次,数组的和还是16的!
③关键点:prev的初始值是数组的第一个!
综合①②③得出结论:
成果验收:
// 请一口回答本题的答案
var arr=[1,2,3,4,5,6,7];
console.log(arr.reduce(function(prev,val){
return val-2;
},8));
九、reduceRight() 我眼中的哈姆雷特
功能: 归并数值;和reduce()一样的!
reduce()与reduceRight()的区别:反向归并,从右向左遍历;
致信广大读者
ES5新增的数组方法大致罗列出了。中间有些我独立的见解,大家可以参考参考。同时也希望大家不要吝啬你们的批评,指出我文中的错误之处,共同进步!
当然觉得还行的可以互相关注一波! 哈哈哈哈哈哈
疫情在家!NZ必胜!
加油!