1. 程式人生 > >超詳細的JavaScript Array陣列相關彙總

超詳細的JavaScript Array陣列相關彙總

前言

在RN中涉及到比較多的陣列的相關操作,所以在這裡對這塊內容進行一個整理總結,也是對這塊知識的學習!
本文前一部分內容,根據菜鳥教程整理!

建立陣列

建立陣列一般來說有下邊三種方式:

var array = new Array();
var array = new Array(length);
var array = new Array(element0, element1, ..., elementn);
//或者
var array = [element0, element1, ..., elementn];

Array()是建構函式,一般來說使用 new Array()來返回新建立並被初始化了的陣列。當它做為函式呼叫時,跟它使用new 運算子呼叫一樣!

第一個沒有引數,就返回一個空陣列。
第二個一個引數,那麼這個引數就表示你想要建立的陣列的長度length,返回一個長度為指定引數的空位陣列。
比如:

Array(3)
//[,,,]

第三個多個引數(最少2個),這些引數就表示陣列中的元素,返回一個以這些引數為元素的陣列。

屬性

屬性沒什麼好說的,有下邊3個屬性:

  • constructor 返回對建立此物件的陣列函式的引用。
  • length 設定或返回陣列中元素的數目。
  • prototype 向陣列物件新增屬性和方法。

方法

  • concat() 連線兩個或更多的陣列,並返回一個新的陣列
    語法:array1.concat(array2,array3,...,arrayX)


    引數可以是一個或者多個數組,也可以是一個或者多個元素。
    注意:array1並不會變化,返回的是一個新的陣列。

  • copyWithin() 從陣列的指定位置拷貝元素到陣列的另一個指定位置中,返回當前陣列
    語法:array.copyWithin(target, start, end)
    第一個引數target必需。複製到指定目標索引位置。
    第二個引數start可選。元素複製的起始位置。(預設為0)如果為負值,表示倒數。
    第三個引數end可選。到該位置前停止讀取資料 (預設為 array.length)如果為負值,表示倒數。
    注意:這個方法是ES6新加入的!

  • every() 檢測數值元素的每個元素是否都符合條件。返回true或者false,並不改變當前陣列中的元素


    語法:array.every(function(currentValue,index,arr), thisValue)
    首先every()的第一個引數是一個函式,也就是所說的指定條件!這個引數是必需的。陣列中的每一個元素都會執行這個函式,來檢測是否符合條件。如果陣列中檢測到有一個元素不滿足,則整個表示式返回 false ,且剩餘的元素不會再進行檢測。如果所有元素都滿足條件,則返回 true。函式中第一個引數currentValue 必需。表示當前元素的值。第二個引數index 可選。當前元素的索引值。第三個引數arr 可選。當前元素屬於的陣列物件。
    然後every()的第二個引數thisValue是可選的。物件作為該執行回撥時使用,傳遞給函式,用來繫結回撥函式的this物件。如果省略了 thisValue ,”this” 的值為 “undefined”

  • fill() 使用一個固定值來填充陣列。返回當前陣列
    語法:array.fill(value, start, end)
    第一個引數value必需。填充的值。
    第二個引數start可選。開始填充位置。(預設為0)
    第三個引數end 可選。停止填充位置(不包含) 。(預設為 array.length)
    注意:這個方法是ES6新加入的!

  • filter() 檢測數值元素,並返回符合條件所有元素的一個新的陣列。
    語法:array.filter(function(currentValue,index,arr), thisValue)
    這個方法中所有引數跟every()方法相同!

  • find() 返回第一個符合傳入測試(函式)條件的陣列元素。如果沒有則返回undefined並沒有改變陣列的原始值。
    語法:array.find(function(currentValue, index, arr),thisValue)
    這個方法中所有引數跟every()方法相同!
    注意:這個方法是ES6新加入的!

  • findIndex() 返回第一個符合傳入測試(函式)條件的陣列元素索引。如果沒有則返回-1。並沒有改變陣列的原始值。
    語法:array.findIndex(function(currentValue, index, arr), thisValue)
    這個方法中所有引數跟every()方法相同!
    注意:這個方法是ES6新加入的!

  • forEach() 陣列每個元素都執行一次回撥函式,常用來遍歷陣列中的元素
    語法:array.forEach(function(currentValue, index, arr), thisValue)
    這個方法中所有引數跟every()方法相同!

  • indexOf() 搜尋陣列中的元素,並返回它第一個所在的位置。如果沒有該元素則返回-1。
    語法:array.indexOf(item,start)
    第一個引數item 必須。查詢的元素。
    第二個元素start 可選的整數引數(預設為0)。規定在字串中開始檢索的位置。它的合法取值是 0 到 array.length - 1。

  • join() 把陣列的所有元素放入一個字串。返回轉換後的字串
    語法:array.join(separator)
    引數separator是可選的,指定要使用的分隔符。如果省略該引數,則使用逗號作為分隔符。

  • lastIndexOf() 返回一個指定的字串值最後出現的位置,在一個字串中的指定位置從後向前搜尋
    語法:array.lastIndexOf(item,start)
    引數和indexOf()相同,不過因為是從後往前搜尋,第二個引數start的預設值為array.length - 1。

  • map() 通過指定函式處理陣列的每個元素,並返回處理後的新的陣列,並不會改變源陣列的值
    語法:array.map(function(currentValue,index,arr),thisValue)
    這個方法中所有引數跟every()方法相同!

  • pop() 刪除陣列的最後一個元素並返回刪除的元素。會更改原始陣列的長度
    語法:array.pop()

  • push() 向陣列的末尾新增一個或更多元素,並返回新的長度。會更改原始陣列的長度
    語法:array.push(item1, item2, ..., itemX)

  • reduce() 將陣列元素計算為一個值(從左到右)。
    語法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    reduce()接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。
    第一個引數為function(total,currentValue, index,arr) 必需。用於執行每個陣列元素的函式。函式中第一個引數total 必需。初始值, 或者計算結束後的返回值。第二個引數currentValue必需。當前元素。第三個引數currentIndex可選。當前元素的索引。第四個參arr可選。當前元素所屬的陣列物件。
    第二個引數initialValue可選。傳遞給函式的初始值。

  • reduceRight() 將陣列元素計算為一個值(從右到左)。
    語法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
    這個方法引數和reduce()相同。不同的是它從陣列的末尾向前將陣列中的陣列項做累加。

  • reverse() 反轉陣列的元素順序。會將原陣列元素順序反轉。
    語法:array.reverse()

  • shift() 刪除並返回陣列的第一個元素。會更改原始陣列的長度
    語法:array.shift()

  • slice() 選取陣列的的一部分,並返回一個新陣列,並不會更改原始陣列的值。常用來擷取陣列。
    語法:array.slice(start, end)
    第一個引數start 必需。規定從何處開始選取。如果是負數,那麼它規定從陣列尾部開始算起的位置。也就是說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。
    第二個引數end 可選(預設為陣列長度)。規定從何處結束選取(不包含)。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數,那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數,那麼它規定的是從陣列尾部開始算起的元素。

  • some() 檢測陣列元素中是否有元素符合指定條件。返回ture或者false,並不改變當前陣列中的元素
    語法:array.some(function(currentValue,index,arr),thisValue)
    這個方法中所有引數跟every()方法相同!
    但是我們需要注意其與every()方法的區別:
    some() 方法會依次執行陣列的每個元素:如果有一個元素滿足條件,則表示式返回true , 剩餘的元素不會再執行檢測。如果沒有滿足條件的元素,則返回false。

  • sort() 對陣列的元素進行排序。會改變原始陣列
    語法:array.sort(sortfunction)
    引數sortfunction是可選的,是一個函式,來規定排序順序。
    排序順序可以是字母或數字,並按升序或降序。預設排序順序為按字母升序。

  • splice() 從陣列中新增,替換或刪除元素。會改變原始陣列
    語法:array.splice(index,howmany,item1,.....,itemX)
    第一個引數index 必需。規定從何處新增/刪除元素。該引數是開始插入和(或)刪除的陣列元素的下標,必須是數字。
    第二個引數howmany必需。規定應該刪除多少元素。必須是數字,但可以是 “0”。如果未規定此引數,則刪除從 index 開始到原陣列結尾的所有元素。
    第三個引數item1, ..., itemX可選。要新增到陣列的新元素。

  • toString() 把陣列轉換為字串,並返回結果。陣列中的元素之間用逗號分隔。
    語法:array.toString()

  • unshift() 向陣列的開頭新增一個或更多元素,並返回新的長度。會更改原始陣列的長度
    語法:array.unshift(item1,item2, ..., itemX)

  • valueOf() 返回陣列物件的原始值。並不改變原始陣列。
    語法:array.valueOf()
    valueOf() 方法返回 Array 物件的原始值。
    該原始值由 Array 物件派生的所有物件繼承。
    valueOf() 方法通常由 JavaScript 在後臺自動呼叫,並不顯式地出現在程式碼中。

ES6中陣列的拓展

除了上邊方法中提到的ES6中新新增的之外,還有一些其他的關於陣列的拓展,下邊是根據阮一峰老師的ECMAScript 6 入門 陣列的擴充套件做的筆記!

擴充套件運算子

擴充套件運算子(spread)就是是三個點...,主要用於函式呼叫,作用就是將一個數組,變為引數序列
比如:

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

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

function push(array, ...items) {
  array.push(...items);
}

由於擴充套件運算子可以展開陣列,所以不再需要apply方法,將陣列轉為函式的引數了。

// ES5 的寫法
Math.max.apply(null, [14, 3, 77])

// ES6 的寫法
Math.max(...[14, 3, 77])

// 等同於
Math.max(14, 3, 77);

其他相關的內容,可以去上邊連結中檢視!

Array.from()

Array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)的物件(包括 ES6 新增的資料結構 Set 和 Map)。
比如:

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

另外上邊說的擴充套件運算子...,是可以將部署了遍歷器介面(Symbol.iterator)的物件轉換為陣列。Array.from方法還支援類似陣列的物件。所謂類似陣列的物件,本質特徵只有一點,即必須有length屬性。因此,任何有length屬性的物件,都可以通過Array.from方法轉為陣列,而此時擴充套件運算子就無法轉換。

Array.from還可以接受第二個引數,作用類似於陣列的map方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

Array.of方法用於將一組值,轉換為陣列。這個方法的主要目的,是彌補陣列建構函式Array()的不足。因為引數個數的不同,會導致Array()的行為有差異。
Array.of基本上可以用來替代Array()或new Array(),並且不存在由於引數不同而導致的過載。它的行為非常統一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of總是返回引數值組成的陣列。如果沒有引數,就返回一個空陣列。

陣列例項的 entries(),keys() 和 values()

ES6 提供三個新的方法——entries(),keys()和values()——用於遍歷陣列。它們都返回一個遍歷器物件,可以用for…of迴圈進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。
比如:

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b

陣列例項的 includes()

Array.prototype.includes方法返回一個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似。ES2016 引入了該方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

該方法的第二個引數表示搜尋的起始位置,預設為0。如果第二個引數為負數,則表示倒數的位置,如果這時它大於陣列長度(比如第二個引數為-4,但陣列長度為3),則會重置為從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true