卡卡網(wǎng)

在JavaScript中，當(dāng)我們要?jiǎng)h除數(shù)組的元素時(shí)，我們可以通過(guò)多種方法來(lái)實(shí)現(xiàn)。JavaScript內(nèi)置了三個(gè)方法，讓我們很輕松地刪除數(shù)組的元素：splice()、pop()、shift()。但這三個(gè)方法無(wú)論從語(yǔ)法還是功能方面，都非常不同，在本文中，我將詳細(xì)介紹這三種方法的用法及注意事項(xiàng)。

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

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

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

Array.splice(position,num);

position是指定要?jiǎng)h除項(xiàng)目的第一個(gè)位置，num參數(shù)確定要?jiǎng)h除的元素?cái)?shù)。

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

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

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

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

以下語(yǔ)句scores從第一個(gè)元素開(kāi)始刪除數(shù)組的三個(gè)元素。

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

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

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

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

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

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

在實(shí)際使用中，我們更多是要先找出要?jiǎng)h除的元素，然后將其刪除。

實(shí)例

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

輸出

['小明', '小李']

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

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

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

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

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。此外，它會(huì)將數(shù)組的屬性length值減小到2。

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

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

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

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

輸出：

undefined
0

對(duì)類(lèi)數(shù)組對(duì)象使用pop()方法

pop()方法是通用的。因此，可以使用call()或apply()來(lái)調(diào)用類(lèi)數(shù)組對(duì)象上的pop()方法。在內(nèi)部，pop()使用類(lèi)數(shù)組對(duì)象的length屬性來(lái)確定要?jiǎng)h除的最后一個(gè)元素。

請(qǐng)參見(jiàn)以下示例：

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具有以下內(nèi)容的對(duì)象：

• 四個(gè)屬性： 0、1、2 和length。
• 一個(gè)removeLast()函數(shù)：使用數(shù)組的call()方法來(lái)調(diào)用pop()方法。

二、調(diào)用greetings對(duì)象的removeLast()方法

let greting = greetings.removeLast();

第三，將移除的元素（greeting）和greetings對(duì)象輸出到控制臺(tái)

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

概括

• 使用pop()方法刪除數(shù)組的最后一個(gè)元素。
• 使用call()或apply()調(diào)用類(lèi)數(shù)組對(duì)象的pop()方法。

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

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

語(yǔ)法

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 }

代碼解釋

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

const numbers = [10, 20, 30];

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

let number = numbers.shift();

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

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()方法是通用的。因此，可以將它與類(lèi)似數(shù)組的對(duì)象一起使用。要將shift()方法與類(lèi)似數(shù)組的對(duì)象一起使用，請(qǐng)使用call()或apply()方法。

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

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對(duì)象：

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

greetings對(duì)象具有由屬性0、1和2表示的三個(gè)元素。此外，它還具有存儲(chǔ)對(duì)象元素?cái)?shù)量的length屬性。

removeFirst()方法使用call()方法來(lái)調(diào)用數(shù)組的shift()方法，該數(shù)組使用this引用greetings對(duì)象。

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

const greeting = greetings.removeFirst();

第三，將greeting和greetings輸出到控制臺(tái)：

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

輸出顯示length減少了 1，帶有索引 0 的屬性被移除，其他屬性的索引也相應(yīng)調(diào)整。

概括

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

總結(jié)

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

您可能對(duì)以下文章也感興趣

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

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

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