一：数组方法filter（过滤）
1：过滤掉不能被3整除的数，打印出来能被整除的数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> //过滤器filter let arr = [12, 33, 66, 99, 5] let result = arr.filter(item => { if (item % 3 == 0) { return true; } else { return false; } }) console.log(result) </script> </html>
打印结果如下：
或者这样写，效果是一样的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> let arr = [11, 33, 66, 99, 5] let result = arr.filter(item => { return item % 3 == 0; }) console.log(result) </script> </html>
打印结果如下：
2：过滤商品价格小于10000元的商品，打印大于10000元的商品
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> //商品列表 let arr = [{ title: '笔记本电脑', price: 12033 }, { title: '智能音箱', price: 99 }, { title: '鼠标', price: 33 }, { title: '单反摄像机', price: 20000 }, ] let result = arr.filter(item => item.price >= 10000); console.log(result) </script> </html>
打印结果如下：
二：数组方法map（映射）
一般写法
//一般写法 let arr=[12,5,8]; let result= arr.map(function(item){ return item*2; }) console.log(result)
箭头函数写法
//箭头函数 let arr=[10,5,8]; let result= arr.map(item=>{ return item*2; }) console.log(result)
去掉花括号的写法（只有一个return的时候，{}可以省略）
let arr=[10,5,9]; let result=arr.map(item=>item*2); console.log(result)
示例：判断数组所对应的的状态是否及格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> let scroe = [12, 77, 88, 99, 33, 100, 59]; let result = scroe.map(item => item >= 60 ? '及格' : '不及格'); console.log(scroe) console.log(result) </script> </html>
三：数组方法reduce和forEach
1：reduce应用场景：计算数组中所有值的总和
数组求和：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> //一堆变成一个，算总数 let arr = [12, 33, 66, 99] let result = arr.reduce(function(tmp, item, index) { return tmp + item }) console.log(result); </script> </html>
打印结果如下：
2：forEach循环遍历（迭代）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> let arr = [12, 4, 6, 89, 2] arr.forEach(item => { console.log(item) }) </script> </html>
打印结果如下：
参数index
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> let arr = [12, 4, 6, 89, 2] //参数index arr.forEach((item,index) => { console.log(index+ ':' +item) }) </script> </html>
打印结果如下：
