对数组的方法every,some,filter,map,forEach,reduce,find,findIndex,indexOf,lastIndexOf,includes,valueOf依次进行了举例说明
由于数组方法多而实用,容易混淆,所以简单写了一遍,加深记忆,顺便记录下来,方便查阅
总结下:
- 返回boolean值:every,some,includes
- 筛选返回新数组:filter,map
- 累加:reduce
- 单纯对元素执行一次函数:forEach
- 条件查找:find,findIndex
- 指定查找:indexOf,lastIndexOf
- 输出原数组:valueOf
以下是对每个方法的简单举例说明
// 以arr数组为例子
let arr = [1, 4, 5, 45, 2, 1, 43];
/**
* every: 判断元素是否符合条件,返回一个boolean。只要有一个元素不符合条件就返回false
* 不会改变原来的数组
* 如果最后没有return,那么只会执行一次,返回false
*/
let data1 = arr.every((item) => {
return item > 10;
});
console.log(data1); //false
let data2 = arr.every((item) => {
console.log(item); //只打印了1,执行了一次
});
console.log(data2); //false
/**
* some:判断元素是否符合条件,返回一个boolean。只要有一个符合条件就返回true
* 不会改变原来的数组
* 如果没有return,会对数组挨个进行遍历,最后返回return
*/
let data3 = arr.some((item) => {
return item > 10;
});
console.log(data3); //true
let data4 = arr.some((item) => {
console.log(item); //打印了1,4,5,45,2,1,43
});
console.log(data4); //false
/***
* filter:创建一个空数组,盛放符合条件的元素
* 不会改变原来的数组
*/
let data5 = arr.filter((item) => {
return item > 10;
});
console.log(data5); //[45, 43]
/***
* map:返回一个新的数组,新数组元素是对原数组元素处理过的
* 不会改变原来的数组
*/
let data6 = arr.map((item) => {
return item - 10;
});
console.log(data6); //[-9, -6, -5, 35, -8, -9, 33]
/***
* forEach:没有返回值,对数组的每个元素执行一次提供的函数。
* 不会改变原数组
*/
let data7 = arr.forEach((item) => {
item + 3;
});
console.log(data7); //undefined
console.log("原数组", arr); //[1, 4, 5, 45, 2, 1, 43]
/***
* reduce:作为一个累加器,可以用于数组求和
* 有两个参数,一个回调函数,一个初始值(可选)
* 不会改变原数组
*/
let data8 = arr.reduce((sum, item) => {
return sum + item;
}, 10);
console.log("初始值为10的求和结果::", data8); //初始值为10的求和结果:: 111
let data9 = arr.reduce((sum, item) => sum + item, 0);
console.log("初始值为0的求和结果::", data9); //初始值为0的求和结果:: 101
console.log("原的数组:", arr); //[1, 4, 5, 45, 2, 1, 43]
/***
* find: find返回符合条件的第一个元素的值
* 不会改变原函数
* 找到符合条件的元素后将不再执行这个函数
* 没有找到就返回undefined
*/
let data10 = arr.find((item) => {
return item > 10;
});
console.log("大于10的第一个元素:", data10); //大于10的第一个元素: 45
/***
* findIndex:返回符合条件的第一个元素的下标,和find异曲同工
* 不会改变原函数
* 找到符合条件的元素后将不再执行这个函数
* 没有找到就返回undefined
*/
let data11 = arr.findIndex((item) => {
return item > 10;
});
console.log("大于10的第一个元素的下标:", data11); //大于10的第一个元素的下标: 3
/***
* indexOf:返回数组中某个指定元素的下标
* 不会改变原数组
* 如果存在指定元素返回改元素第一次出现的下标
* 不存在指定元素返回-1
*/
let data12 = arr.indexOf(1);
console.log("数组中1第一次出现的下标", data12); //数组中1第一次出现的下标 0
/***
* lastIndexOf:返回数组中某个指定元素的下标
* 不会改变原数组
* 如果存在指定元素返回改元素最后一次出现的下标
* 不存在指定元素返回-1
*/
let data13 = arr.lastIndexOf(1);
console.log("数组中1最后一次出现的下标", data13); //数组中1最后一次出现的下标 5
/***
* includes:判断数组是否包含指定元素。返回一个boolean值。存在为true,否则为false
* 不会改变愿数组
*/
let data14 = arr.includes(3);
console.log("数组中是否存在3", data14); //数组中是否存在3 false
/***
* valueOf:返回数组的原始值
* 原数组改变后,再次使用返回改变后的数组
* 不会改变原数组
*/
let data15 = arr.valueOf();
console.log("原数组", data15);//原数组 [1, 4, 5, 45, 2, 1, 43]
arr.unshift(3);
console.log("为数组添加数字3后的数组", arr);//为数组添加数字3后的数组 [3, 1, 4, 5, 45, 2, 1, 43]
let data16 = arr.valueOf();
console.log("数组", data16);//数组 [3, 1, 4, 5, 45, 2, 1, 43]