js map() reduce() filter() every() some() find() findIndex()用法

js map() reduce() filter() every() find() findIndex()用法

运用这些函数，可以大大简化代码量，让代码看起来更加优雅（说白了就是逼格高点）学了不经常用，就会忘记，在此算是做个笔记吧！

1. map() 方法

语法：  array.map(function(cur, index, arr), thisVal)

1. cur：必须。当前元素的的值。
2. index：可选。当前元素的索引。
3. arr：可选。当前元素属于的数组对象。
4. thisVal：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

map()方法定义在Array中，调用Array的map()方法，传入我们自己的函数，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。map()不会改变原始数组。

举个例子

let arr = [2, 3, 4];
let newArray = array.map((item) => {
    return item * item;
})
console.log(newArray)  // [ 4, 9, 16]

2. reduce()方法

语法： arr.reduce(function(prev,cur,index,arr){
		...
	   }, init);

1. arr： 可选，表示原数组；
2. prev ： 必需 ，表示上一次调用回调时的返回值，或者初始值 init;
3. cur ： 必需 ， 表示当前正在处理的数组元素；
4. index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0， 否则索引为1；
5. init： 可选， 表示初始值。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。(没看懂就直接看例子吧)

举个例子

//求数组项之和
var arr = [1,2,3,4];
var sum = arr.reduce(function (pre, cur) {
    return prev + cur;
},0);
//初始值为0，开始时的pre为数组的第一项1,0+1=1,1作为下一轮回调的pre的
//值进行下一次数组项相加，知道相加到最后一项，返回他们的和。
console.log(sum); //10

//求数组项最大值
var arr = [1,2,3,4];
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});
console.log(max);  //4

//数组去重
var arr = [1,2,1,2,3,4];
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
//初始化一个空数组，将需要去重的第一项在初始化数组中查找，找不到，就将该
//项添加到初始化数组中。。。最后返回这个初始化数组。
console.log(newArr);  // [1, 2, 3, 4]

3. filter()方法

语法：  arr.filter(funciton(element, index, array){
			...
		}[, thisArg])

1. callback返回true表示保留该元素，false则不保留。
2. thisArg 可选。执行 callback 时的用于 this 的值。
3. element:元素的值
4. index:元素的索引
5. array:被遍历的数组

filter()方法用于将Array的某些元素过滤掉，然后返回剩下的元素，（筛选数组中满足条件的元素，返回一个筛选后的新数组）
filter()接收一个函数，将传入的函数依次作用于Array的每个元素，然后根据返回值是true（保留）还是false（丢弃）决定保留还是不保留该元素。

举个例子

//大于等于6的数
var arr = [2,4,6,8,10];
var newArr = arr.filter(function(ele){
	return ele >= 6;
})
console.log(newArr)  // [6,,8,10]

//利用filter去重
var arr = [2,4,2,8,4,6];
var newArr = arr.filter(function(ele,index,self){
	return self.indexOf(ele) === index;
});
console.log(newArr )  //[2, 4, 8, 6]

4. every()方法

语法： array.every(function(currentValue,index,arr){
	   	 ...
	   }, thisValue)

1. currentValue 必须。当前元素的值
2. index 可选。当前元素的索引值
3. arr 可选。当前元素属于的数组对象
4. thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true

举个例子

var arr = ["apple","pear","orange"]
var res = arr.every(function(s){
	return s.length > 0;
})
console.log(res)  //true

var arr = ["Apple","pear","orange"]
var res = arr.every(function(s){
	return s.toLowerCase() === s;
})
console.log(res)  //false

5. some()方法
some() 和every()类似，区别在于：

every()是对数组中每一项运行给定函数，如果该函数所有项返回true,则返回true。一旦有一项不满足则返回flase
some()是对数组中每一项运行给定函数，如果该函数满足任一项返回true，则返回true

let arr = ["appLe", "banner", "orange"]
  let bool = arr.some(item => {
    return item.toLowerCase() === item
  })
  let bool2 = arr.every(item => {
    return item.toLowerCase() === item
  })
  console.log('bool', bool); //true
  console.log('bool2', bool2); //false

6. find()方法

find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，之后的值不会再调用执行函数,如果没有符合条件的元素返回 undefined

语法： array.find(function(currentValue, index, arr),thisValue)

举个例子

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.find(function (s) {
    return s.toLowerCase() === s;
})); // 'pear', 因为pear全部是小写

console.log(arr.find(function (s) {
    return s.toUpperCase() === s;
})); // undefined, 因为没有全部是大写的元素

7. findIndex（）方法

findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1

举个例子

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.findIndex(function (s) {
    return s.toLowerCase() === s;
})); // 1, 因为'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
})); // -1