資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
廣告