目录
一、forEach方法遍历数组
二、map方法映射一个新的数组
三、filter方法筛选数组
四、every方法检查数组元素
五、findIndex方法返回数组元素索引
一、forEach方法遍历数组
forEach就是一个普通的遍历方法
但其实感觉一些简单的遍历还是用
for…in 或者 for…of 比较方便
forEach适合那种比较复杂的遍历,毕竟forEach的功能强大一些
const arr = ['哈哈','吼吼','嘿嘿']arr.forEach((value, index, arr) => {console.log(value);console.log(index);console.log(arr);}) //就简单说一下好了//value是数组的值//index是索引号//arr是数组本身
二、map方法映射一个新的数组
map方法得到的结果是一个新的数组
他的作用的可以吧一个数组里面特定的元素进行加工
然后会把这些元素组成一个新数组,返回出来
举个例子,取出特定数据
var person = [{name:'小明',age:20},{name:'小红',age:25},{name:'小张',age:18}]var name = person.map(v => v.name)//箭头函数的写法console.log(name);
在这里就是把数组里面对象内的name元素都提取出来,组成一个新数组,方便后续使用
当然,map方法也是可以传三个参数,value, index和array,但是基本用到value就行
在项目中取数据的时候
用到上面例子的情况还挺多的
三、filter方法筛选数组
这个方法和map其实很像
但是也有很大的区别,就根据字面上的区别
map是加工,map返回的是加工后的数组,也就是可以改变原数组元素的
filter是筛选过滤,filter是不能改变原数组元素的,它返回的数组元素只能是从原数组中过滤筛选过的
看一个对比例子
var person = [{name:'小明',age:20,checked:true},{name:'小红',age:25,checked:false},{name:'小张',age:18,checked:true}]var checked = person.filter(v => v.checked)var checked2 = person.map(v => v.checked)console.log(checked);console.log(checked2);
就观察二者结果
filter只是从原数组中筛选出满足checked为true的数组元素
而map直接吧数组元素进行加工,从对象中再抽离了checked元素组成数组
总的来说
区分二者就是区分一个过滤和加工的概念
四、every方法检查数组元素
every是检查数组元素
它会对根据检查的条件对数组进行检查
然后返回布尔值 true or false
只要其中有一个元素不满足检查条件,就会返回false
看下面这个例子
var arr = ['小明','小红','小亮','小王']var arr2 = [1,2,3,4,5,6]const confrim = arr.every(v => v === '小明')const confrim2 = arr2.every(v => v >= 1)console.log(confrim); //falseconsole.log(confrim2); //true
confrim由于数组中只有一个小满足条件,其他数组元素都不满足,固然返回false
而confrim2对的arr2中数组元素都满足>=1的判断条件,故返回true
同样every方法可以传三个参数,和上面那些方法一样
额外提示一点,就是如果是用一个空数组来使用every方法,会直接返回true
五、findIndex方法返回数组元素索引
findIndex的使用和every方法有点相同之处
都是根据一个判断条件来检查数组元素
不同的是every方法只是判断数组元素是不是都满足这个条件
而fndIndex方法会返回满足条件的第一个数组元素的索引号(注意是返回第一个)
例如
var arr = [1,2,3,4,5]const res = arr.findIndex(v => v >= 1)const res2 = arr.every(v => v >= 1)console.log(res); //返回索引0console.log(res2); //返回true
由此例子结果可以很清晰的看到二者的区别
以及findIndex的作用
同样,findIndex方法可以传三个参数
有的时候会怕数组中有几个相同的元素,会使用findIndex方法返回第一个的索引号