JavaScript数组内置方法详解：at、copyWithin、entries、fill与find

1. Array.at() 方法

该功能接收一个整数值作为参数，并返回对应索引处的元素，同时支持正数与负数索引。其中，负数索引表示从数组末尾开始向前计数。

调用语法为 Array.at(index)

参数 index 指定需要返回的数组元素索引位置。若传入负数索引，则从数组尾部开始相对定位以获取目标元素。

返回值是与指定索引匹配的元素；若索引无效，则返回 undefined。

<script type="text/javascript">
			var arr = [1,2,3,4,5];
			var newarr = arr.at(-1);
			console.log(newarr);// 5
			var newarr = arr.at(3);
			console.log(newarr);// 4
</script>

2. Array.copyWithin() 方法

该功能用于浅复制数组指定片段到同一数组的另一位置，并返回修改后的数组，此操作不改变原数组长度。

arr.copyWithin(target[, start[, end]])

参数说明如下：

target:

target 为基于0的索引，指定复制序列的目标位置。若为负数，则从数组末尾计算。

若 target 大于等于数组长度，则不执行任何复制操作。若 target 位于 start 之后，复制序列将被调整以适配数组长度。

start:

start 为基于0的索引，指定开始复制元素的起始位置。若为负数，则从数组末尾计算。

若忽略 start 参数，copyWithin 方法默认从索引0开始复制。

end:

end 为基于0的索引，指定停止复制元素的结束位置。copyWithin 会拷贝至该位置，但不包含 end 处的元素。若为负数，则从数组末尾计算。

若忽略 end 参数，copyWithin 方法默认复制至数组末尾（即 arr.length）。

<script type="text/javascript">
			var arr = [1,2,3,4,5];
			var arr2= arr.copyWithin(-2)
			console.log(arr2); // [1, 2, 3, 1, 2]
			var arr3= arr.copyWithin(0, 3)
			console.log(arr3); // [4, 5, 3, 4, 5]
			var arr4= arr.copyWithin(0, 3, 4)
			console.log(arr4); // [4, 2, 3, 4, 5]
			var arr5= arr.copyWithin(-2, -3, -1)
			console.log(arr5); // [1, 2, 3, 3, 4]
</script>

3. Array.entries() 方法

该功能返回一个新的 Array Iterator 对象，其中包含数组每个索引对应的键值对（key/value pair）。

arr.entries()

返回值是一个新的 Array 迭代器对象。Array Iterator 的原型（__proto__:Array Iterator）包含 next 方法，可用于遍历迭代器以获取原数组的 [key, value] 对。

<script type="text/javascript">
			var array1 = ['a', 'b', 'c'];
			var iterator1 = array1.entries();
			console.log(iterator1.next().value);
			// expected output: Array [0, "a"]
			console.log(iterator1.next().value);
			// expected output: Array [1, "b"]
</script>

4. Array.fill() 方法

该功能使用固定值填充数组中从起始索引到终止索引范围内的所有元素，注意不包含终止索引本身。

语法格式为 arr.fill(target[, start[, end]])

参数说明如下：

• value 指定用于填充数组元素的值。
• start 为可选参数，表示起始索引，默认值为0。
• end 为可选参数，表示终止索引，默认值为 this.length。

返回值是被修改后的原数组。

<script type="text/javascript">
			var array1 = [1, 2, 3, 4];	
			// fill with 0 from position 2 until position 4
			console.log(array1.fill(0, 2, 4));
			// expected output: [1, 2, 0, 0]
			// fill with 5 from position 1
			console.log(array1.fill(5, 1));
			// expected output: [1, 5, 5, 5]
			console.log(array1.fill(6));
			// expected output: [6, 6, 6, 6]
</script>

5. find() 方法

该功能返回数组中满足提供测试函数的第一个元素的值，若未找到则返回 undefined。

arr.find(callback[, thisArg])

参数说明如下：

• callback 为在数组每一项上执行的函数，接收三个参数：
• element 表示当前遍历到的元素。
• index 为可选参数，表示当前遍历到的索引。
• array 为可选参数，表示数组本身。
• thisArg 为可选参数，指定执行回调函数时用作 this 的对象。

返回值是数组中第一个满足测试函数的元素的值，否则返回 undefined。

<script type="text/javascript">
			var array1 = [5, 12, 8, 130, 44];
			var found = array1.find(element => element > 10);
			console.log(found); // 12
</script>

总结

本文内容至此结束，希望能为您提供帮助，同时也欢迎您关注本站以获取更多相关内容！