資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究JavaScript 中的 shift() 方法和 pop() 方法比較？
要使用 JavaScript 從陣列中刪除元素，可以使用 shift() 和 pop() 函式。但是，它們之間存在細微的差別。pop() 刪除陣列中的最後一個元素，而 shift() 刪除陣列中的第一個元素。
使用 shift() 方法時，在刪除第零位元素並將後續索引處的數值向下移動後，將返回已刪除的值。如果 length 屬性為 0，則返回值為 undefined。
shift() 是一個修改資料的函式。它會改變內容和長度。如果你想保持其值不變，但返回一個刪除了第一個元素的新陣列，請使用 arr.slice(1)。
Array.prototype.shift() 的通用性質允許將其呼叫或應用於類似陣列的物件。對於缺少表示最終連續基於零的數值屬性的 length 屬性的物件，其行為可能毫無意義。
如果陣列為空，此函式返回 undefined，但 pop() 方法會將刪除的元素返回到陣列中。如果陣列為空，此函式的返回值為 undefined。
兩種方法都用於將陣列的長度減少 1。
shift() 和 pop() 是物件陣列的內建函式。
兩種方法都會修改原始陣列。
語法
shift() array.shift()
返回值
陣列中刪除的元素；如果陣列為空，則為 undefined。
Shift() 方法
示例 1
在這個例子中，讓我們瞭解 JavaScript 中的陣列 shift() 方法。
<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
function myFunc() {
// Original array
let tutpoint = ["Tutorialspoint ", "has free Online", "Tutorials", "and Courses"];
// Check condition in array
let result = tutpoint.shift();
document.write(result);
document.write("<br />");
document.write(tutpoint);
}
myFunc();
</script>
</body>
</html>
示例 2
.shift() 方法還允許我們從現有陣列的開頭刪除一個數組、一個物件或兩者。讓我們以刪除開頭陣列為例。
<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
let sports = [
["Football", " Cycling"],"Wrestling", " Shooting"," Hockey", " Badminton " ];
let result = sports.shift();
document.write(result +"<br>"); //output : [ "Football", "Cycling"]
document.write(sports); //output: ["Wrestling","Shooting","Hockey", "Badminton"]
</script>
</body>
</html>
pop() 方法
pop() 方法刪除陣列中的最後一個元素，然後返回已刪除的元素。此方法會更改陣列的長度。pop() 方法刪除陣列中的最後一個元素，然後將刪除的值返回給呼叫者。如果對空陣列呼叫 pop()，則返回 undefined。Array.prototype.pop() 和 shift() 的行為類似，但 shift() 隻影響陣列的第一個元素。
使用 pop() 方法是會改變原陣列的。它會改變內容和長度。如果你想返回一個刪除了最後一個元素的新陣列，同時保持 this 的當前值，可以使用 arr.slice(0, -1)。Array.prototype.pop() 可以有意地呼叫或應用於類似陣列的物件。
對於不具有反映最終連續基於零的數字屬性的 length 屬性的物件，其行為可能毫無意義。
語法
pop() array.pop()
返回值
被刪除的陣列元素；如果陣列為空，則為 undefined。
示例 3
在這個例子中，讓我們瞭解如何使用 Array.pop() 函式從現有陣列的末尾刪除單個專案。
<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
function myFunc() {
var langArr = ['JavaScript', 'React JS', 'Angular', 'Tutorialspoint'];
// You will see the last element will be popping from the array
document.write(langArr.pop());
}
myFunc();
</script>
</body>
</html>
示例 4
pop() 方法與 shift() 方法類似，它將從現有陣列的開頭刪除一個數組、一個物件或兩者。在這個例子中，我們將從陣列的末尾刪除一個物件。
<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<script>
let sports = [ 'Football', ' Cycling',' Wrestling', ' Shooting',['Hockey',' Badminton'] ];
let result = sports.pop();
document.write(result +'<br>'); //output: {'H':'Hockey','B':'Badminton'}
document.write(sports); //output: [ 'Football', 'Cycling','Wrestling', 'Shooting' ]
</script>
</body>
</body>
</html>
簡而言之
可以使用 Array.shift() 方法快速刪除任何陣列的第一個元素。它修改起始陣列的長度並返回被刪除項的值。此方法可以使用任何資料型別陣列。它通常在迴圈中使用以獲得最佳結果。但是，在使用大型陣列時必須小心，因為如果不瞭解方法執行的概念，它可能會顯著降低程式的效率。
pop() 是使用陣列的一種方法。它刪除陣列的最後一個元素，修改原始陣列並返回已刪除的元素。這是它的三個主要特徵。pop() 方法可以多次使用，前提是陣列至少有一個元素。否則，將會出現“undefined”錯誤。
2K+ 次瀏覽
