ECMAScript5——新增数组方法

最新推荐文章于 2023-03-27 01:59:01 发布

MrShyZhang

最新推荐文章于 2023-03-27 01:59:01 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

分类专栏： ECMAScript5 文章标签： JavaScript ES5 新增数组方法 ES5 Array.prototype

本文链接：https://blog.youkuaiyun.com/thunderevil35/article/details/80551143

ECMAScript5 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了JavaScript中的数组方法，包括forEach、map、some、every、filter等方法的使用方式及参数说明，同时还对比了forEach与map的区别，并给出了fill、reduce等方法的实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

forEach( )

该方法用于循环数组

使用方式：

arr.forEach(function() , this)

参数：

function: 为数组中每个元素执行的函数，该函数接收三个参数：

第一个参数表示数组中正在处理的当前元素

第二个参数表示组中正在处理的当前元素的索引

第三个参数表示map 方法被调用的数组

this : 可选传入想执行回调函数的this值（参考对象）

返回值：forEach方法返回值始终是undefined, 返回值return 什么值都对forEach方法执行结果无影响

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 定义数组
	var arr = "abcdefg".split("");
	// ES5 提供了循环数组的方法
	var result = arr.forEach(function(key,index) {
		// console.log(arguments)
		// return key
		console.log(key , index)
	})

	// jQuery中遍历  $.each() 和 dom.each()两种
	// $.each()和 forEach 函数中参数相反
	$.each(arr, function(index, key) {
		// console.log(arguments)
		console.log(index, key)
	})
	//dom.each()
	//$(selector).each(function(index,element))
	</script>
</body>
</html>

map( )

作用：也是用于循环数组，和forEach区别就是它的返回值是有意义的

使用方式：

arrr.map(function( ) , this)

参数：

function：为数组中每个元素执行的函数，该函数接收三个参数：

第一个参数表示数组中正在处理的当前元素

第二个参数表示组中正在处理的当前元素的索引

第三个参数表示map 方法被调用的数组

this : 可选传入想执行回调函数的this值（参考对象）

返回值：一个新数组，每个元素都是回调函数的结果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义数组
	var arr = "abcdefg".split("");
	
	// map循环
	var result = arr.map(function(key, index, arr) {
		// console.log(arguments)
		// 我们想要让原数组中的成员分别加1
		return key + "1"
	})
	console.log(result)

	// map方法， 也是用来循环数组， 但是返回值有意义， 根据一个数组生成一个新的数组， 循环是次要的
	

	var num_arr = [1, 2, 3, 4, 5, 6, 7]
	// 返回成员的倍数
	var result1 = num_arr.map(function(key) {
		return key * 2
	})
	console.log(result1)
	</script>
</body>
</html>

some( )

some方法测试数组中的某些元素是否通过由提供的函数实现的测试。

用于判断数组中是否有成员满足条件，只要有一个成员满足条件就会返回true，都不满足才会返回false。

使用方式：

arr.some(function( )，this)

参数：

function：为数组中每个元素执行的函数，该函数接收三个参数：

第一个参数表示数组中正在处理的当前元素

第二个参数表示组中正在处理的当前元素的索引

第三个参数表示方法被调用的数组

返回值：一般是判断的依据

this : 可选传入想执行回调函数的this值（参考对象）

返回值：布尔值

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var arr = [1, 2, 3, 4, "a", 5, 6];
		// 判断数组中是否有字符串
		var result = arr.some(function(key, index, arr) {
			return typeof key === "string"
		})
		console.log(result ? "里面有字符串" : "里面没有字符串")

		var arr = [1, 2, 3, 4, 5, 6];
		// 判断数组中是否有字符串
		var result = arr.some(function(key, index, arr) {
			return typeof key === "string"
		})
		console.log(result ? "里面有字符串" : "里面没有字符串")
	</script>
</body>
</html>

every（）

every方法测试数组的所有元素是否都通过了指定函数的测试。

判断数组中所有成员是否满足条件，如果有一个成员不满足条件，就返回false，都满足条件才会返回true

使用方式：

arr.every(function( )，this)

参数：

function：为数组中每个元素执行的函数，该函数接收三个参数：

第一个参数表示数组中正在处理的当前元素

第二个参数表示组中正在处理的当前元素的索引

第三个参数表示方法被调用的数组

返回值：一般是判断的依据

this : 可选传入想执行回调函数的this值（参考对象）

返回值：布尔值

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var arr = [1, 2, 3, 4, 5, 6];
		// 判断数组中是否都是数字
		var result = arr.every(function(key, index, arr) {
			return typeof key === "number"
		})
		console.log(result ? "里面都是数字" : "里面不全是数字")

		var arr = [1, 2, 3, 4, "a", 5, 6];
		// 判断数组中是否都是数字
		var result = arr.every(function(key, index, arr) {
			return typeof key === "number"
		})
		console.log(result ? "里面都是数字" : "里面不全是数字")
	</script>
</body>
</html>

filter

过滤，filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

使用方式：

arr.filter(function( )，this)

参数：

function：为数组中每个元素执行的函数，该函数接收三个参数：

第一个参数表示数组中正在处理的当前元素

第二个参数表示组中正在处理的当前元素的索引

第三个参数表示方法被调用的数组

返回值：布尔值

注：function用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留。

this : 可选传入想执行回调函数的this值（参考对象）

返回值：一个新的通过测试的元素的集合的数组

// 定义数组
var arr = ["a", "b", "c", "d", 1, 2, 3, 4, 5];

var result1 = arr.filter(function(value, index, arr) {
	return typeof value === "number"
})
console.log(result1)

fill（）

fill方法：填充数组，用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

使用方式：

arr.fill( value , start , end )

参数：

value：用来填充数组元素的值*（可以接受任何值）。

start：可选，起始索引，默认值为0。

end：可选，终止索引，默认值为 this.length

注意：

具体要填充的元素区间是 [start, end) , 一个半开半闭区间.

fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默认值分别为 0 和 this 对象的 length 属性值.

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值. 如果 end 是个负数, 则结束索引会被自动计算成为 length+end.

返回值：修改后的原数组（原数组改变）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 通过new Array创建数组
		var arr = new Array(5)
		console.log(arr)
		// 填充数组
		// arr.fill(1)
		arr.fill(function() {
			console.log("success")
		})
		// 循环数组
		arr.forEach(function(key, index, arr) {
			console.log(key)
		})
	</script>
</body>
</html>

reduce（）

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

使用方式：

arr.reduce( callback，intitialValue )

参数：

callback：执行数组中每个值的函数，包含四个参数：

第一个参数：上一次累加的结果累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue

第二个参数：数组中正在处理的元素

第三个参数：数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。

第四个参数：调用reduce的数组

intitialValue：用作第一个调用 callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

返回值：函数累计处理的结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义数组
		var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
		// 求相加的结果
		var result = arr.reduce(function(pre, key, index, arr) {
			// console.log(arguments)
			return pre + key
		})
		// 输出结果
		console.log(result)
	</script>
</body>
</html>

reduceRight（）

reduceRight() 方法对累加器和数组中的每个元素（从右到左）应用一个函数，将其减少为单个值。

使用方式：

arr.reduceRight( callback，intitialValue )

参数：

callback：执行数组中每个值的函数，包含四个参数：

第一个参数：上一次累加的结果累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue

第二个参数：数组中正在处理的元素

第三个参数：数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。

第四个参数：调用reduce的数组

返回值：函数累计处理的结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义数组
		var arr  = [1, 2, 3, 4, 5, 6, 7, 8, 9];
		// 求乘积
		var result = arr.reduceRight(function(pre, key, index, arr) {
			console.log(arguments)
			return pre * key
		})
		// 输出结果
		console.log(result)
	</script>
</body>
</html>

indexOf（）

indexOf方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

使用方式：

arr.indexOf( searchElement，fromIndex)

参数：

searchElement

要查找的元素

fromIndex

开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

lastIndexOf（）

lastIndexOf方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始

使用方式：

arr.lastIndexOf( searchElement，fromIndex)

参数：

searchElement

要查找的元素

fromIndex

从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

返回值：数组中最后一个元素的索引，如未找到返回-1

区别数组和类数组对象

① instanceof

② constructor

③ toString（）

④ ES 提供的方法 isArray（）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<script type="text/javascript">
	// 获取所有li
	var lis = document.getElementsByTagName("li");
	// 定义数组
	var arr = [];
	// 请问有几种方式来区别类数组和数组？
	
	// typeof 用来判断类型 （是值类型还是引用类型） 返回的是一个字符串

	// 第一种方式 instanceof
	console.log(arr instanceof Array);
	console.log(lis instanceof Array);

	// 第二种方式
	console.log(arr.constructor === Array)
	console.log(lis.constructor === Array)

	// 第三种方式
	console.log(Object.prototype.toString.call(arr) === "[object Array]")
	console.log(Object.prototype.toString.call(lis) === "[object Array]")

	// 使用ES5提供的方法
	console.log(Array.isArray(arr))
	console.log(Array.isArray(lis))
	</script>
</body>
</html>