ES5(三)——数组新增函数every()、some()、map()、foreach()、filter()和reduce()汇总

 2023-09-11 阅读 18 评论 0

摘要:文章目录一、every()二、some()三、foreach()四、map() 映射/对应五、filter()六、reduce汇总 一、every() 专门判断一个数组中是否所有元素都符合要求 var 判断结果=数组.every(function(当前元素值,当前下标i,当前数组){//回调函数return 检查当前元素值是否符合要求&#

文章目录

  • 一、every()
  • 二、some()
  • 三、foreach()
  • 四、map() 映射/对应
  • 五、filter()
  • 六、reduce汇总

一、every()

专门判断一个数组中是否所有元素都符合要求

var 判断结果=数组.every(function(当前元素值,当前下标i,当前数组){//回调函数return 检查当前元素值是否符合要求,并返回检查结果}
);

原理:
i. every内自带for循环,自动遍历数组中每个元素

ii. 每遍历一个元素,就自动调用一次回调函数

数组some方法?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. 每遍历一个元素,就自动调用一次回调函数

js数组的常用方法、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. 每遍历一个元素,就自动调用一次回调函数

js数组连接,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循环,自动遍历原数组中每个元素

js数组高级方法?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 当前符合条件的元素值}
)

array_merge和+的区别、原理:
i. 内部 创建一个新的空数组等待

ii. map内自带for循环,自动遍历原数组中每个元素

iii. 每遍历一个元素,就自动调用一次回调函数

iv. 每次调用回调函数时,都自动传入三个值:
①当前元素值
②当前下标i
③当前数组对象

v. 在 回调函数内,判断该元素值是否符合条件,并将符合条件的元素返回给新数组

vi. map函数接到新值后, 自动放入新数组中对应的位置。

c语言函数调用数组?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);//箭头函数省略写法:sum
var 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();

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/3/48822.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息