arrays slice用法 - 在JavaScript中向現有數組添加新值




splice用法 unshift用法 (8)

這個問題在這裡已經有了答案:

在PHP中,我會這樣做:

$array = array();
$array[] = "value1";
$array[] = "value2";
$array[] = "value3";

我如何在JavaScript中做同樣的事情?


Answers

這與jQuery無關,只是一般的JavaScript。

在JavaScript中創建一個數組:

var a = [];

要么:

var a = ['value1', 'value2', 'value3'];

在現有數組末尾附加值:

a.push('value4');

要創建一個新的數組,你應該真的使用[]而不是new Array() ,原因如下:

  • new Array(1, 2)相當於[1, 2] ,但new Array(1) 等同於[1] 。 而後者更接近[undefined] ,因為Array構造函數的單個整數參數指示所需的數組長度。
  • Array ,就像任何其他內置JavaScript類一樣,不是關鍵字。 因此,有人可以在代碼中輕鬆定義Array來完成除構造數組之外的其他功能。

你可以使用.push()方法(這是標準的JavaScript)

例如

var primates = new Array();
primates.push('monkey');
primates.push('chimp');

jQuery是JavaScript的抽象。 將jQuery看作JavaScript的一個子集,旨在與DOM一起工作。 話雖如此; 有一些功能可以將項目添加到集合中。 我會在你的情況下使用基本的JavaScript:

var array;

array[0] = "value1";
array[1] = "value2";
array[2] = "value3";

... 要么:

var array = ["value1", "value2", "value3"];

... 要么:

var array = [];

array.push("value1");
array.push("value2");
array.push("value3");

有幾種方法:

實例化數組:

var arr;

arr = new Array(); // empty array

// ---

arr = [];          // empty array

// ---

arr = new Array(3);
alert(arr.length);  // 3
alert(arr[0]); // undefined

// ---

arr = [3];
alert(arr.length);  // 1
alert(arr[0]); // 3

推入陣列:

arr = [3];     // arr == [3]
arr[1] = 4;    // arr == [3, 4]
arr[2] = 5;    // arr == [3, 4, 5]
arr[4] = 7;    // arr == [3, 4, 5, undefined, 7]

// ---

arr = [3];
arr.push(4);        // arr == [3, 4]
arr.push(5);        // arr == [3, 4, 5]
arr.push(6, 7, 8);  // arr == [3, 4, 5, 6, 7, 8]

使用.push()是添加到數組的更好的方法,因為您不需要知道已經有多少項目,並且可以在一個函數調用中添加多個項目。


的確,你必須初始化數組,然後使用array.push()命令行。

var array = new Array();
array.push("first value");
array.push("second value");

你不需要jQuery。 使用常規的JavaScript

var arr = new Array();
// or var arr = [];
arr.push('value1');
arr.push('value2');

注意:在JavaScript中,你也可以使用Objects作為Arrays,但仍然可以訪問Array原型。 這使對象像一個數組:

var obj = new Object();
Array.prototype.push.call(obj, 'value');

將創建一個如下所示的對象:

{
    0: 'value',
    length: 1
}

您可以像訪問常規數組f.ex obj[0]一樣訪問這些值。


Array是一個JavaScript本地對象,為什麼不嘗試使用它的API? 當您切換到純JavaScript或其他框架時,自行了解API會節省您的時間。

有許多不同的可能性,因此,使用主要針對您的需求的可能性。

使用值創建數組:

var array = ["value1", "value2", "value3"];

為最後添加值

var array = [];
array.push("value1");
array.push("value2");
array.push("value3");

為開始添加值:

var array = [];
array.unshift("value1");
array.unshift("value2");
array.unshift("value3");

在某些索引處添加值:

var array = [];
array[index] = "value1";

或通過使用拼接

array.splice(index, 0, "value1", "value2", "value3");

選擇一個你需要的。


以下是使用JavaScript從數組中刪除項目的幾種方法。

所描述的所有方法都不會改變原始數組 ,而是創建一個新數組

如果您知道項目的索引

假設您有一個數組,並且想要移除位置i中的項目。

一種方法是使用slice()

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i-1).concat(items.slice(i, items.length))

console.log(filteredItems)

slice()使用它接收的索引創建一個新數組。 我們只是創建一個新數組,從開始到我們想要刪除的索引,並從我們刪除的數據到數組末尾之後的第一個位置連接另一個數組。

如果你知道價值

在這種情況下,一個不錯的選擇是使用filter() ,它提供了更具說明性的方法:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)

console.log(filteredItems)

這使用ES6箭頭功能。 您可以使用傳統功能來支持舊版瀏覽器:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})

console.log(filteredItems)

或者您可以使用Babel並將ES6代碼轉發回ES5,使其更易於瀏覽舊瀏覽器,同時在代碼中編寫現代JavaScript。

刪除多個項目

如果不是單個項目,您想要刪除多個項目,該怎麼辦?

讓我們找到最簡單的解決方案。

按索引

您只需創建一個函數並刪除系列中的項目:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

console.log(filteredItems)

按價值

您可以在回調函數中搜索包含:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

console.log(filteredItems)

避免改變原始數組

splice() (不要與slice()混淆)改變原始數組,應該避免。

(最初發佈於https://flaviocopes.com/how-to-remove-item-from-array/







javascript arrays