数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 中重要的数组方法有哪些？
在本文中，我们将探索数组提供的不同方法及其在 JavaScript 中的重要性。我们将学习如何使用它们以及借助示例了解它们的实际用例。
在继续学习方法之前，以下是 JavaScript 中创建数组的语法：
let array = [element1, element2, ...
或者，我们也可以如下定义数组：
let array = new Array (element1, elemnet2, ...
现在，我们将学习数组中的不同方法
push() 方法 - 此方法用于将元素推入数组。元素将从末尾添加。
pop() 方法 - 此方法用于从数组中弹出元素。将要删除的元素将从末尾获取。
shift() 方法 - 我们可以使用此方法删除数组中的第一个元素。
unshift() 方法 - 此方法可以从前面向数组添加元素。
indexOf() 方法 - 此方法用于从数组中查找特定元素。
示例 1
#文件名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4];
console.log("Array is: " + array)
array.push(5);
console.log("Array after pushing 5: " + array);
let lastElement = array.pop();
console.log("Element popped: " + lastElement);
console.log("Array after popping: " + array);
let firstElement = array.shift();
console.log("Element popped from starting: " + firstElement);
console.log("Array after shifting: " + array);
array.unshift(9);
console.log("Array after unshifting: " + array);
console.log("Index of 3: " + array.indexOf(3));
</script>
</body>
</html>输出
它将在控制台中产生以下结果。
Array is: 1,2,3,4 Array after pushing 5: 1,2,3,4,5 Element popped: 5 Array after popping: 1,2,3,4 Element popped from starting: 1 Array after shifting: 2,3,4 Array after unshifting: 9,2,3,4 Index of 3: 2
includes() 方法 - 此方法用于检查数组是否包含所需方法。
concat() 方法 - 此方法将两个不同的数组首尾相连并返回一个新数组。
forEach() 方法 - 此方法是一个迭代器，用于迭代数组。它将迭代数组中的每个元素，并且我们可以根据自己的选择对它们执行任何操作。
sort() 方法 - 此方法按字母顺序或升序对元素进行排序。
map() 方法 - 此方法迭代数组并根据用户的条件转换数组。它根据用户在映射谓词中定义的映射字段或值。
示例 2
#文件名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4,5];
console.log("Does array include 3: " + array.includes(3));
console.log("Does array include 7: " + array.includes(7));
let secondArray = [6,7,8,9,10];
let newArray = array.concat(secondArray);
console.log("First array: " + array);
console.log("Second array: " + secondArray);
console.log("New array: " + newArray);
console.log("All Elements are: ")
array.forEach(function(element){
console.log(element)
});
array = [3,1,4,5,2]
console.log("Original Array" + array);
array.sort();
console.log("Sorted Array" + array);
console.log("Original Array before mapping: " + array);
let arrayV2 = array.map(function(element){
return element * 5;
});
console.log("Array after mapping: " + arrayV2);
</script>
</body>
</html>输出
它将在控制台中产生以下输出。
Does array include 3: true Does array include 7: false First array: 1,2,3,4,5 Second array: 6,7,8,9,10 New array: 1,2,3,4,5,6,7,8,9,10 All Elements are: 1 2 3 4 5 Original Array3,1,4,5,2 Sorted Array1,2,3,4,5 Original Array before mapping: 1,2,3,4,5 Array after mapping: 5,10,15,20,25
reduce() 方法 - 此方法使用一个 reducer 函数，该函数将结果减少为单个输出。
filter() 方法 - 此方法用于根据用户定义的条件过滤内容。
find() & findIndex() 方法 - 此方法查找第一个通过用户指定条件的值，而findIndexfindIndex() 方法查找第一个通过用户指定条件的索引值。
slice() & splice() 方法 - slice() 方法选择指定数量的元素而不更改实际数组，而splicesplice() 方法从原始数组本身中删除选定的元素。
some() 和 every() 方法 - somesome() 方法检查数组中某些元素的用户指定条件，即它仅检查数组的特定元素，而顾名思义，everyevery() 方法检查数组中每个元素的用户条件。
示例 3
#文件名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4,5]
console.log("Original Array is: " + array);
let sumOfElements = array.reduce(
function (accumulator, element) {
return accumulator + element;
});
console.log("Sum of all elements: " + sumOfElements);
console.log(array);
let newArray = array.filter(function (element) {
return element % 2 === 0;
});
console.log("New Array after filtering: " + newArray);
let findElement = array.find(function(element){
return element > 3
});
console.log("Find Element greater than 3: " + findElement);
let findIndexValue = array.findIndex(function(element){
return element > 3
});
console.log("Find indexes of elements greater than 3: " + findIndexValue);
let sliceArray = array.slice(0, 2);
console.log("Slice Array from 0,2: " + sliceArray);
console.log("Original Array: " + array);
let spliceArray = array.splice(0, 2);
console.log("Splice Array after 0,2: " + spliceArray);
console.log("Original Array after splice: " + array);
let arr = [1, 2, 3, 4, 5];
let NumbersGreaterThanZero = arr.every(
function(element){
return element > 0
});
let NumbersLessThanZero = arr.some(
function(element){
return element < 0
});
console.log("Elements greater than zero with some(): " + NumbersGreaterThanZero);
console.log("Elements greater than zero with every(): " + NumbersLessThanZero);
</script>
</body>
</html>输出
它将在控制台中产生以下输出。
Original Array is: 1,2,3,4,5 Sum of all elements: 15 (5) [1, 2, 3, 4, 5] New Array after filtering: 2,4 Find Element greater than 3: 4 Find indexes of elements greater than 3: 3 Slice Array from 0,2: 1,2 Original Array: 1,2,3,4,5 Splice Array after 0,2: 1,2 Original Array after splice: 3,4,5 Elements greater than zero with some(): true Elements greater than zero with every(): false
更新于： 2022-04-28
141 次查看
广告