ES5中新增的数组方法

ES5中新增的数组方法

迭代（遍历）的方法5个：forEach(), map(), filter(), some(), every()

---

前言

–面试数组问题：“说说你知道的数组中的几个方法？”
–诸如此类的面试题是前端开发人员必会知识点
–这里总结ES5中的5个新增方法，后面还会总结ES6中常见的数组方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考理解
文章末尾会上机提供成功编译的代码源文件（如有不当之处，欢迎留言讨论）

一、forEach()

• forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
• 注意: forEach() 对于空数组是不会执行回调函数的。

// 数组.forEach方法来遍历数组
array.forEach(function (currentValue, index, arr))

运用 forEach() 方法来遍历数组array，该方法中有一个回调函数，有三个参数：

参数	用意
currentValue	【必选】数组当前的value值
index	【可选】数组当前项的索引
arr	【可选】数组对象本身

执行示例：

	// forEach 的使用
	let arr1 = [1, 6, 5, 4];
	// 求数组之和
	let sum = 0;
	arr1.forEach(function (value, index, array) {
		console.log("元素：" + value);
		console.log("索引号：" + index);
		console.log("数组本身：" + array);
	sum += value;
	})
	console.log(sum);

执行结果：

查看执行代码.

二、map()

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

• map() 方法按照原始数组元素顺序依次处理元素。

• 注意： map() 不会对空数组进行检测。

• 注意： map() 不会改变原始数组。

// 数组.forEach方法来遍历数组
array.map(function (currentValue, index, arr), thisValue)

运用 map() 方法来遍历数组array，该方法中有一个回调函数，有三个参数：

参数	用意
currentValue	【必选】当前元素的值
index	【可选】当前元素的索引值
arr	【可选】当前元素属于的数组对象
thisValue	【可选】对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
执行示例：

	let arr = [56, 15, 48, 3, 7];
	let newArr = arr.map(function (item, index, array) {
		// 对整个数组+3
		item += 3;
		return item
	});
	console.log(newArr)

执行结果：

查看执行代码.

三、filter()

筛选工作：

• filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  返回一个新数组

• 注意： filter() 不会对空数组进行检测。

• 注意： filter() 不会改变原始数组。

// 数组.forEach方法来遍历数组
array.filter(function (currentValue, index, arr), thisValue)

运用 filter() 方法来遍历数组array，该方法中有一个回调函数，有三个参数：

参数	用意
currentValue	【必选】当前元素的值
index	【可选】当前元素的索引值
arr	【可选】当前元素属于的数组对象
thisValue	【可选】对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

如果省略了 thisValue ，“this” 的值为 “undefined”
执行示例：
利用filter遍历出所有偶数

	// 利用filter遍历出所有偶数
        let arr = [56, 15, 48, 3, 7];
        let newArr = arr.filter(function (value, index, array) {
            return value % 2 === 0;
        });
        console.log(newArr)

执行结果：

查看执行代码.

四、some()

• some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

• some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

• 如果没有满足条件的元素，则返回false。即返回布尔值。

• 注意： some() 不会对空数组进行检测。

• 注意： some() 不会改变原始数组。

// 数组.forEach方法来遍历数组
array.some(function (currentValue, index, arr), thisValue)

运用 some() 方法来遍历数组array，该方法中有一个回调函数，有三个参数：

参数	用意
currentValue	【必选】当前元素的值
index	【可选】当前元素的索引值
arr	【可选】当前元素属于的数组对象
thisValue	【可选】对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
执行示例：

		// 利用some查找数组中是否存在指定元素
        let arr = [18, 6, 1, 3, 41, 2];
        let flag = arr.some(function (value, index, array) {
            return value <= 10;
        });
        console.log(flag) 
        //存在小于10的元素  返回true否则返回false

执行结果：

some（）在未找到满足添加的情况会遍历所有元素，返回false
some（）在找到满足条件的情况后，返回ture，并终止循环

• 断点调试
  
  
  
  查看执行代码.

五、every()

• every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
  every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  如果所有元素都满足条件，则返回 true。

• 注意： every() 不会对空数组进行检测。
  注意： every() 不会改变原始数组

// 数组.forEach方法来遍历数组
arr.every(function (currentValue, index, array), thisValue)

every() 的用法类似于some() ,这里不再冗余；区别在于：

every()会对数组中的每一个元素，即currentValue进行匹配，只有全部满足条件才会返回true，
而some()中，只需有一个currentValue满足条件即可返回true，后面的currentValue不会再进行比较

---

总结

集腋成裘：学习前端JavaScript是一个需要不断积累的过程。
希望对你有所帮助！

有任何问题欢迎留言讨论
转载请注明出处