引言
- ES5之前版本的数组的方法，如，
push()、slice()、concat()、sort()等，相信大家不陌生，使用简单，容易理解，但是功能也有限，玩不出花样。 - 下面给大家详细介绍的ES5新增数组的方法，我们主要从功能、参数、返回值、是否改变原数据四个方面来展开，有效帮助大家理解、记忆并使用。
1、indexOf()
- 1、功能：根据指定数据，从左向右查询数据，查询索引
- 2、参数：
- 一个：表示要查询的数据
- 两个：第一个表示要查询的数据，第2个表示查找的起始位置(包括)
- 3、返回值：索引 或 -1（没有查找到）
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
console.log("原数组", arr); // ["hello", 3, 2, 5, 2, 3, "world"]
let res1 = arr.indexOf(3); // 一个参数表示要查询的数据
let res2 = arr.indexOf(4);
let res3 = arr.indexOf(3, 2); // 两个参数，第一个表示要查询的数据，第二个表示查询的起始位置
console.log("返回值", res1); // 1
console.log("返回值", res2); // -1 原数组没有这个数据，返回-1
console.log("返回值", res3); // 5
console.log("新数组", arr); // ["hello", 3, 2, 5, 2, 3, "world"] 该方法不改变原数据
以下方法需要大家提前在心里有个概念：方法只执行了一次，但是方法的接收的函数参数在循环执行
2、forEach()
- 1、功能：遍历数组
- 2、参数：函数，这个函数自带三个参数，1)数据，2)索引，3)是数组本身
- 3、返回值：undefined
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.forEach(function(val, idx, self) {
console.log(val, idx, self); // 打印结果见下图
});
console.log("返回值", res); // undefined
console.log("新数组", arr); // ["hello", 3, 2, 5, 2, 3, "world"]
3、map()
- 1、功能：1)、遍历数组 2)、利用返回值修改数据
- 2、参数：函数，这个函数自带三个参数，1)数据，2)索引，3)数组本身
- 3、返回值：是一个数组。数组中的数据是：每次遍历到数组中数据时的返回值
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.map(function(val, idx, self) {
console.log(val, idx, self); // 打印结果见上图
return val * 2;
});
console.log("返回值", res); // [NaN, 6, 4, 10, 4, 6, NaN]
console.log("新数组", arr); // ["hello", 3, 2, 5, 2, 3, "world"]
4、filter()
- 1、功能：1)、遍历数组 2)、过滤数据(查询符合条件的数据)
- 2、参数：函数，这个函数自带三个参数，1)数据，2)索引，3)数组本身
- 3、返回值：是个数组。数组中的数据是：每次遍历到数组中数据时，返回值为true时的值
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.filter(function(val, idx, self) {
console.log(val, idx, self); // 打印结果见上图
// return false; // 返回值是一个空数组 []，每次遍历到数据时返回值都为false，因此没有数据
// return true; // 返回值是arr所有的数据 ["hello", 3, 2, 5, 2, 4, "world"]
return typeof val === "number"; // [ 3, 2, 5, 2, 4] 遍历到数值数据时为真，则返回该数据
});
console.log("返回值", res)
5、some()
- 1、功能：1、遍历数组 2、检测数据（只要有一个返回true，，就是true，同时停止遍历）
- 2、参数：函数，这个函数自带三个参数，1数据，2索引，3数组本身
- 3、返回值：布尔值。
- 遍历数组中数据时，只要有一个返回true，就是true，同时停止遍历；
- 如果返回false,就一直遍历到最后的数据，并返回false
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.some(function(val, idx, self) {
console.log(val, idx, self); // 打印结果有两种，见下图
// return val == 5; // true（那我们就能知道这个数组存在5=>判断数据是否存在）
return val == 6; // fasle 没有数据等于6，因此返回false
});
console.log("返回值", res);
console.log("新数组", arr);
- 当
return val == 5时的遍历结果- 当遍历到返回值为true的数据时，停止遍历
- 当遍历到返回值为true的数据时，停止遍历
- 当
return val == 6时的遍历结果- 为false就一直遍历到最后
- 为false就一直遍历到最后
6、every()
- 1、功能：1、遍历数组 2、检测数据（只要有一个返回false，就是false，同时停止遍历）
- 2、参数：函数，这个函数自带三个参数，1数据，2索引，3数组本身
- 3、返回值：布尔值。
- 遍历数组中数据时，只要有一个返回false，就是false，同时停止遍历
- 如果返回true,就一直遍历到最后的数据，并返回true
- 4、是否修改原数组：否
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.every(function(val, idx, self) {
console.log(val, idx, self); // 打印结果有两种，见下图
// return val == "hello"; // false
return true; // true
});
console.log("返回值", res);
- 当
return val == "hello"时
- 当
return true时
7、reduce()
- 1、功能：1)、遍历数组 2)、归并
- 2、参数：两个参数
- 参数1：函数，这个函数自带四个参数，1)上一个值，2)数据，3)索引，4)数组本身
- 参数2：指定默认情况下的上一个值(只会在索引为0的前面出现)
- 如果没有这个参数，上一个值，默认是数组第一个数据(在索引为1的前面出现，且，不遍历第一个数据)
- 3、返回值：遍历最后一个数据的返回值
- 4、是否修改原数组：否
上面的描述可能会觉得绕，不用担心，我会分开详细介绍。
- 第一种情况：没有第2个参数，即不指定上一个值，不遍历第一个数据
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.reduce(function(prev, val, idx, self) {
console.log(prev, val, idx, self); // 打印结果见下图
return "在索引为2时出现";
});
console.log("返回值", res); // "在索引为2时出现"
- 第二种情况：存在第2个参数，即指定上一个值时，会遍历第一个数据
let arr = ["hello", 3, 2, 5, 2, 3, "world"];
let res = arr.reduce(function(prev, val, idx, self) {
console.log(prev, val, idx, self);
return "在索引为1时出现";
}, "只在索引为0时出现");
console.log("返回值", res); // "在索引为1时出现"
下面来一个实际应用让大家体会一下reduce()的妙用
// 利用reduce()实现数据的累加
var arr = [2, 3, 4, 5, 6];
var res = arr.reduce(function(prev, val, idx, self) {
console.log(prev, val, idx, self);
return prev + val;
});
console.log("返回值", res); // 20
