ES6新语法之数组新增方法：map，filter，reduce，some和every的用法

大家好，我是讯享网，很高兴认识大家。

随着ES6的到来，我们JavaScript语法中新增了许多的数组方法，今天就来分享一篇关于数组新增方法的知识

1.map（）方法：

（1）作用：map（）方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；

map() 不会对空数组进行检测；并且不会改变原始数组。

（2）通过map（）方法对数组元素进行处理

<script> // 创建一个成绩数组 let grades=[45,67,98,100]; // 我们可以通过map 给每个字符数组+"分" let Grades = grades.map((item,index)=>{ 
    console.log(item); // 数组的每个元素 console.log(index); // 数组的索引值 return item+"分"; }) console.log(Grades); </script>

讯享网

结果输出：
在这里插入图片描述
讯享网

注意：在这里由于箭头函数里只有 return语句一行代码，我们可以利用箭头函数性质简化写法

讯享网let Grades = grades.map(item=>item+"分") console.log(Grades);

输出结果为：
在这里插入图片描述
map方法的应用场景：

微信小程序豆瓣影评评分

 //创建一个数组对象 let movies = [{ 
   id:1,name:"唐人街探案",imgUrl:"http://xxx.douban.jpg"},{ 
   id:2,name:"误杀",imgUrl:"http://xxx.douban.jpg"},{ 
   id:3,name:"复仇者联盟",imgUrl:"http://xxx.douban.jpg"}] movies=movies.map(item=>{ 
    item.imgUrl = item.imgUrl.replace("xxx","www"); // 使用replace方法替换 return item; }) console.log(movies);

输出结果为：
在这里插入图片描述

通过map方法可以修改数组对象中某个属性例如此案例中的"xxx" 替换为 “www”

2.filter（）方法：

作用：对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组；（过滤出数组中符合要求的元素，返回一个新数组）；

讯享网<script> //创建一个成绩数组 let grade = [56,78,45,89,98]; //通过filter方法拿到当前及格的人的数组 let arr = grade.filter(item=>{ 
    if(item>60){ 
    return true; // 返回值的对应元素返回到一个新数组 } }) console.log(arr); </script>

输出结果为：
在这里插入图片描述
在这里我们可以利用箭头函数的性质可以简写：

<script> //创建一个成绩数组 let grade = [56,78,45,89,98]; //通过filter方法拿到当前及格的人的数组 let arr = grade.filter(item=>item>60) console.log(arr); </script>

输出结果依然一样
在这里插入图片描述

3.some与every方法：

`some方法：`

作用：判断只要有一个符合要求，整体就返回真

讯享网//创建一个数组 运用some方法判断是否大于等于60 let counts=[50,45,50,52,8] let result=counts.some(item=>item>=60) console.log(result)// 返回false //只要数组其中一个符合，则返回为true let counts1=[50,45,50,52,8,80] let result=counts1.some(item=>item>=60) console.log(result)// 返回true

`every方法：`

作用：只要有一个元素是假的，整体就返回假（需要每个元素符合才会返回）

 let counts=[50,45,50,52,8] let result=counts.every(item=>item>=10) console.log(result)// 返回false let counts1=[50,45,50,52,8] let result=counts1.every(item=>item>=8) console.log(result)// 返回true

4.reduc（）方法：

作用：将数组中的元素整合，返回一个新的内容

数组的求和

讯享网let arr = [20,30,40,50]; // 其中有四个参数 // prev : 上一次次操作返回的结果 // item : 当前操作的元素 // index :当前操作元素的下标索引值 // array :当前操作的数组 let result = arr.reduce((prev,item,index,array)=>{ 
    console.log("prev"+prev); console.log("item"+item); console.log("index"+index); console.log("array"+array); console.log("_____________") return prev + item }) console.log(result);

输出结果为：
在这里插入图片描述
案例：利用reduce（）方法拼接字符串，并且利用prev的默认值给数组元素之间嵌套 li 标签

let arr1 = ["张学友","刘德华","黎明","郭富城"]; let result1 = arr1.reduce((prev,item)=>{ 
    return prev+item; }) console.log(result1) ;

输出结果为：
在这里插入图片描述
此时我们可以利用prev设置默认值来嵌套li标签

讯享网let result2 = arr1.reduce((prev,item)=>{ 
    console.log(prev); return prev+"<li>"+item+"<li>"; },"") // 我们可以在这里设置一个空字符串，不能使用null，因为我们需要拼接字符串，null不能拼接 console.log(result2)

输出结果：
在这里插入图片描述