引言
- 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