本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下forEach()、Array.map()和Array.filter()的用法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Array.forEach()
forEach()方法为每个数组元素调用一次函数(回调函数)。【相关课程推荐:JavaScript视频教程】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< meta charset = "utf-8" >
< title >JavaScript Array.forEach()</ title >
< body >
< h2 >JavaScript Array.forEach()</ h2 >
< p >为每个数组元素调用一次函数。</ p >
< p id = "demo" ></ p >
< script >
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "< br >";
}
</ script >
</ body >
</ html >
|
请注意,该函数有3个参数:
● 元素值
● 元素索引
● 数组本身
上面的示例仅使用value参数。该示例可以重写为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< meta charset = "utf-8" >
< title >JavaScript Array.forEach()</ title >
< body >
< h2 >JavaScript Array.forEach()</ h2 >
< p >为每个数组元素调用一次函数。</ p >
< p id = "demo" ></ p >
< script >
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "< br >";
}
</ script >
</ body >
</ html >
|
Array.map()
map()方法通过对每个数组元素执行函数来创建新数组。map()方法是不执行没有值的数组元素的函数。map()方法不会更改原始数组。
此示例将每个数组值乘以2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
< html >
< meta charset = "utf-8" >
< title >JavaScript Array.map()</ title >
< body >
< h2 >JavaScript Array.map()</ h2 >
< p >通过对每个数组元素执行函数来创建新数组。</ p >
< p id = "demo" ></ p >
< script >
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</ script >
</ body >
</ html >
|
请注意,该函数有3个参数:
● 元素值
● 元素索引
● 数组本身
当回调函数仅使用value参数时,可以省略索引和数组参数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html>
< html >
< body >
< h2 >JavaScript Array.map()</ h2 >
< p >通过对每个数组元素执行函数来创建新数组。</ p >
< p id = "demo" ></ p >
< script >
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</ script >
</ body >
</ html >
|
Array.filter()
filter()方法创建一个新数组,其中包含传递测试的数组元素。此示例从值大于18的元素创建新数组:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< meta charset = "utf-8" >
< title >JavaScript Array.filter()</ title >
< body >
< h2 >JavaScript Array.filter()</ h2 >
< p >使用通过测试的所有数组元素创建一个新数组。</ p >
< p id = "demo" ></ p >
< script >
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</ script >
</ body >
</ html >
|
请注意,该函数有3个参数:
● 元素值
● 元素索引
● 数组本身
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
< html >
< meta charset = "utf-8" >
< title >JavaScript Array.filter()</ title >
< body >
< h2 >JavaScript Array.filter()</ h2 >
< p >使用通过测试的所有数组元素创建一个新数组。</ p >
< p id = "demo" ></ p >
< script >
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</ script >
</ body >
</ html >
|
本文来自 js教程 栏目,欢迎学习!
以上就是forEach()、Array.map()和Array.filter()怎么用?(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js如何获取图片宽高
详解javascript扩展运算符的10种用法(总结)
js中闭包的概念
10个让你效率更高的math对象方法,快来收藏吧!
在vuejs里利用index对第一项添加class的方法
javascript主要作用是什么
一文搞懂javascript中 ! 和 !! 的区别!
js如何引入css外部文件
你可能不知道的chrome debug专用的函数!
javascript怎么判断是否为数字类型
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » forEach()、Array.map()和Array.filter()怎么用?(代码示例)