失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > ES5(三)——数组新增函数every() some() map() foreach() filter()和reduce()汇总

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

时间:2021-11-30 20:09:10

相关推荐

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

文章目录

一、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();

如果觉得《ES5(三)——数组新增函数every() some() map() foreach() filter()和reduce()汇总》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。