卡卡網

在JavaScript中，當我們要刪除數(shù)組的元素時，我們可以通過多種方法來實現(xiàn)。JavaScript內置了三個方法，讓我們很輕松地刪除數(shù)組的元素：splice()、pop()、shift()。但這三個方法無論從語法還是功能方面，都非常不同，在本文中，我將詳細介紹這三種方法的用法及注意事項。

• 使用splice()方法刪除數(shù)組元素
• 使用pop()方法刪除數(shù)組元素
• 使用shift()方法刪除數(shù)組元素

使用splice()方法刪除數(shù)組元素

要使用splice()刪除數(shù)組中的元素，需將兩個參數(shù)傳遞給splice()方法，如下所示：

Array.splice(position,num);

position是指定要刪除項目的第一個位置，num參數(shù)確定要刪除的元素數(shù)。

splice()方法更改原始數(shù)組并返回一個包含已刪除元素的數(shù)組。

讓我們看一下下面的例子。

假設你有一個數(shù)組scores，其中包含從 1 到 5 的五個數(shù)字。

let scores = [1, 2, 3, 4, 5];

以下語句scores從第一個元素開始刪除數(shù)組的三個元素。

let deletedScores = scores.splice(0, 3);

scores數(shù)組現(xiàn)在包含兩個元素。

console.log(scores); //  [4, 5]

而deletedScores數(shù)組包含三個元素。

console.log(deletedScores); // [1, 2, 3]

查找元素并用splice方法將其刪除

在實際使用中，我們更多是要先找出要刪除的元素，然后將其刪除。

實例

var arrNames = ['小明','小張','小李'];
function nameRemove(name){
    const nIndex = arrNames.indexOf(name);
    if(nIndex > -1){
        arrNames.splice(nIndex,1);
    }
}
nameRemove("小張")
console.log(arrNames);

輸出

['小明', '小李']

該實例中，先查找元素（item）的索引位置，即是splice()的position值，然后再套用splice()語法將其刪除。

使用pop()方法刪除數(shù)組元素

JavaScript的pop()方法也可以刪除數(shù)組元素，但與splice()不同，pop()只能刪除數(shù)組的最后一個元素。

以下示例使用pop()方法刪除numbers數(shù)組的最后一個元素：

const numbers = [10, 20, 30];
const last = numbers.pop();

console.log(last); // 30
console.log(numbers.length); // 2

輸出：

30
2

在此示例中，pop()方法從數(shù)組numbers中刪除數(shù)字30。此外，它會將數(shù)組的屬性length值減小到2。

對空數(shù)組使用pop()方法

下面的示例中，在一個空數(shù)組上調用pop()方法。在這種情況下，pop()方法返回undefined，并且數(shù)組的長度length值為零：

const numbers = [];
const last = numbers.pop();

console.log(last);
console.log(numbers.length);

輸出：

undefined
0

對類數(shù)組對象使用pop()方法

pop()方法是通用的。因此，可以使用call()或apply()來調用類數(shù)組對象上的pop()方法。在內部，pop()使用類數(shù)組對象的length屬性來確定要刪除的最后一個元素。

請參見以下示例：

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 2,
  removeLast() {
    return [].pop.call(this);
  },
};

let greting = greetings.removeLast();

console.log(greting);
console.log(greetings);

輸出：

'Howdy'

{
  '0': 'Hi',
  '1': 'Hello',
  length: 2,
  removeLast: [Function: removeLast]
}

代碼解釋

首先，定義greetings具有以下內容的對象：

• 四個屬性： 0、1、2 和length。
• 一個removeLast()函數(shù)：使用數(shù)組的call()方法來調用pop()方法。

二、調用greetings對象的removeLast()方法

let greting = greetings.removeLast();

第三，將移除的元素（greeting）和greetings對象輸出到控制臺

console.log(greting);
console.log(greetings);

概括

• 使用pop()方法刪除數(shù)組的最后一個元素。
• 使用call()或apply()調用類數(shù)組對象的pop()方法。

使用shift()方法刪除數(shù)組元素

除了splice()和pop()，我們還可以用shift()方法刪除數(shù)組元素。但與pop()剛好相反，shift()方法是刪除數(shù)組的第一個元素。

語法

array.shift()

示例1

const numbers = [10, 20, 30];
let number = numbers.shift();

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });

輸出：

{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }

代碼解釋

首先，定義包含三個元素的numbers數(shù)組：

const numbers = [10, 20, 30];

其次，從numbers數(shù)組中刪除第一個元素并將刪除的元素分配給number變量。

let number = numbers.shift();

第三，將移除的元素、數(shù)組和數(shù)組的長度輸出到控制臺：

console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });

示例2

下面的例子展示了如何使用shift()方法刪除數(shù)組的所有元素：

const numbers = [10, 20, 30];
let number;
while ((number = numbers.shift()) != undefined) {
  console.log(number);
}

輸出：

10
20
30

示例3

shift()方法是通用的。因此，可以將它與類似數(shù)組的對象一起使用。要將shift()方法與類似數(shù)組的對象一起使用，請使用call()或apply()方法。

下面示例展示了如何使用shift()方法刪除類數(shù)組對象的元素：

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  removeFirst() {
    return [].shift.call(this);
  },
};

const greeting = greetings.removeFirst();

console.log(greeting);
console.log(greetings);

輸出：

Hi

{
  '0': 'Hello',
  '1': 'Howdy',
  length: 2,
  removeFirst: [Function: removeFirst]
}

代碼解釋

首先，定義greetings對象：

let greetings = {
  0: 'Hi',
  1: 'Hello',
  2: 'Howdy',
  length: 3,
  removeFirst() {
    return [].shift.call(this);
  },
};

greetings對象具有由屬性0、1和2表示的三個元素。此外，它還具有存儲對象元素數(shù)量的length屬性。

removeFirst()方法使用call()方法來調用數(shù)組的shift()方法，該數(shù)組使用this引用greetings對象。

其次，調用removeFirst()方法并將移除的元素分配給greeting變量：

const greeting = greetings.removeFirst();

第三，將greeting和greetings輸出到控制臺：

console.log(greeting);
console.log(greetings);

輸出顯示length減少了 1，帶有索引 0 的屬性被移除，其他屬性的索引也相應調整。

概括

• 使用該shift()方法從數(shù)組中刪除第一個元素并返回該元素。
• 通過call()或apply()方法將shift()方法與類似數(shù)組的對象一起使用。

總結

本文詳細介紹了JS刪除數(shù)組元素的三個方法：splice()、pop()和shift()，這三種方法使用起來非常方便，但它們有不同的作用和用法。

您可能對以下文章也感興趣

• JS: forEach和for不同的功能表現(xiàn)【實例】
• 3種方法JS判斷變量是否存在或已定義
• 實例詳解何時使用JS中的let、var和const
• 實例詳解區(qū)別JS三種聲明方式：var,let,const
• JS 3種方法實現(xiàn)字符全替換: replace replaceAll split join

• jquery each()方法遍歷一個列舉元素如Li標簽的兩種寫法
• $.each()循環(huán)遍歷一維數(shù)組、二維數(shù)組、JSON數(shù)據(jù)和DOM元素
• jQuery $.each() 方法的5種使用方式
• JavaScript 示例：兩種方法將所有單詞的首字母大寫
• JavaScript map()與forEach()方法的使用差異

標簽: 刪除數(shù)組元素  splice  pop  shift