文章目录
一、every()二、some()三、foreach()四、map() 映射/对应五、filter()六、reduce汇总一、every()
专门判断一个数组中是否所有元素都符合要求
var 判断结果=数组.every(function(当前元素值,当前下标i,当前数组){//回调函数return 检查当前元素值是否符合要求,并返回检查结果});
原理:
i. every内自带for循环,自动遍历数组中每个元素
ii. 每遍历一个元素,就自动调用一次回调函数
iii. 每次调用回调函数时,都 自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象
iv. 在回调函数内, 判断当前元素值是否符合要求,并返回判断结果为every函数
结果为true,当前元素符合要求,every会自动遍历下一个元素。直到所有元素遍历完成,都没有碰到不符合要求的元素,则结束循环,整体返回true,说明当前数组中所有元素都符合要求!结果为false,当前元素不符合要求,every立刻退出循环,直接返回false,表明当前数组中不是所有元素都符合要求。
示例:
var arr1=[1,2,3,4,5];//false//当前元素值 下标 数组// ↓ ↓ ↓var result1=arr1.every(function(elem, i, arr) {console.log(`arr1.every()自动调用一次回调函数,elem=${elem},i=${i},arr=${arr},返回判断结果:${elem%2==0}`);return elem%2==0})console.log(result1);//false
二、some()
专门检查一个数组中是否包含符合要求的元素
var 判断结果=数组.some(function(当前元素值, 当前下标位置, 当前数组){return 判断当前元素值是否符合要求})
原理:
i. some内自带for循环,自动遍历数组中每个元素
ii. 每遍历一个元素,就自动调用一次回调函数
iii. 每次调用回调函数时,都 自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象
iv. 在回调函数内,判断当前元素值是否符合要求,并返回判断结果给some函数
结果为true,则说明至少当前元素符合要求,some立刻退出循环,直接返回true,说明当前数组中包含至少一个符合要求的元素。结果为false,则说明当前元素不符合要求,some只能继续遍历下一个元素。如果直到遍历结束都没有发现符合要求的元素,则返回false。说明当前数组中不包含符合要求的元素。
示例:
console.log(arr1.some(function(element,index,arr) {console.log(`arr1.some()内自动调用了一次回调函数。收到:当前元素值=${element},当前下标i=${index},当前数组${arr}。本次返回:${element%2==1}`);//只判断当前元素值是不是偶数return element%2==1//不能被2整除}));
三、foreach()
专门代替for循环来简化遍历索引数组的特殊函数
数组.forEach(function(当前元素值, 当前下标i, 当前数组) {对当前元素值执行操作})
原理:
i. forEach内 自带for循环,自动遍历数组中每个元素
ii. 每遍历一个元素,就自动调用一次回调函数
iii. 每次调用回调函数时,都 自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象
iv. 在回调函数内,对当前元素执行规定的操作。不需要返回值。
示例
function showResults(value, index, a) {console.log(`value:${value}index:${index}`);}//可以forEach遍历使用一个函数方法var letters = ['a','b','c'];letters.forEach(showResults);
四、map() 映射/对应
专门读取原数组中每个元素值,进行修改后,生成一个新数组返回
var 新数组=原数组.map(function(当前元素值, 当前下标i, 当前数组){return 当前元素值修改后的新值})
原理:
i. 内部 创建一个新的空数组等待
ii. map内自带for循环,自动遍历原数组中每个元素
iii. 每遍历一个元素,就自动调用一次回调函数
iv. 每次调用回调函数时,都自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象
v. 在 回调函数内,对当前元素值进行修改,并将修改后的新值返回给map函数
vi. map函数接到新值后, 自动放入新数组中对应的位置。
vii. 遍历结束, map返回新数组。原数组保持不变。
var arr=[1,2,3,4,5];//希望将原数组中元素值*2,放入新数组中返回,原数组保持不变!var arr2=arr.map(function(ele,i){console.log(`arr.map()内自动调用一次回调函数。收到当前元素值=${ele},当前下标i=${i}。将${ele}x2后获得新值${ele*2},放入新数组中${i}位置`)return 当前元素值*2});console.log(arr);console.log(arr2);
五、filter()
返回数组中符合条件的所有元素
var 新数组=原数组.filter(function(当前元素值, 当前下标i, 当前数组){return 当前符合条件的元素值})
原理:
i. 内部 创建一个新的空数组等待
ii. map内自带for循环,自动遍历原数组中每个元素
iii. 每遍历一个元素,就自动调用一次回调函数
iv. 每次调用回调函数时,都自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象
v. 在 回调函数内,判断该元素值是否符合条件,并将符合条件的元素返回给新数组
vi. map函数接到新值后, 自动放入新数组中对应的位置。
vii. 遍历结束, map返回新数组。原数组保持不变。
示例:筛选类型为字符串的元素
var arr = [5, "element", 10, "the", true];var result = arr.filter (function (value) {return (typeof value === 'string');});console.log(result);
六、reduce汇总
reduce 函数接收4个参数:
Accumulator (acc) (累计器)Current Value (cur) (当前值)Current Index (idx) (当前索引)Source Array (src) (源数组)
reduce 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果
//示例一:var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {return accumulator + currentValue;}, 0);//箭头函数省略写法:sumvar arr = [1,3,5,7];var result = arr.reduce( (pre, val) => pre+val, 0 );console.log(result);
//示例二:function appendCurrent(previousValue, currentValue) {return previousValue +"::" + currentValue;}var elements = ["abc", "def","123","456"];function reduce() {var result = elements.reduce(appendCurrent);console.log(result);//abc::def::123::456}reduce();//从右向左调用function reduceRight() {var result = elements.reduceRight(appendCurrent);console.log(result);}reduceRight();