javascript Array方法總結(下篇)

fxss5201發表於2019-03-09

每個方法都有相應的描述、語法、引數、返回值、注意項(可選)、例子(可選)。 語法中的[]裡面中的內容表示引數為可選引數。

原文出自:fxss5201.github.io/practical-c…

Array.prototype.lastIndexOf()

描述:返回從陣列中逆向找到給定元素的第一個索引,如果不存在,則返回-1。

語法

number = old_array.lastIndexOf(searchElement[, fromIndex]);
複製程式碼

引數

  1. old_array:原陣列。
  2. searchElement:需要查詢的元素值。
  3. fromIndex:從該索引處開始逆向查詢searchElement。預設值從array.length - 1,即整個陣列都被查詢。如果該值大於或等於陣列的長度,則整個陣列會被查詢。如果為負值,則從array.length + fromIndex索引出開始逆向查詢。如果負值的絕對值大於陣列長度,則方法返回 -1,即陣列不會被查詢。

返回值

  1. number:返回從陣列中逆向找到給定元素的第一個索引,如果不存在,則返回-1。

注意項

  1. lastIndexOf使用嚴格等於進行判斷(僅當兩個運算元的型別相同且值相等才為true)。

例子

[2, 5, 9].lastIndexOf(2); // 0
[2, 5, 9].lastIndexOf('2'); // -1
複製程式碼

Array.prototype.map()

描述:建立一個新陣列,其結果是該陣列中的每個元素都呼叫提供函式後返回的結果。

語法

new_array = old_array.map(callback(element[, index[, array]])[, thisArg]);
複製程式碼

引數

  1. old_array:原陣列。
  2. callback:原陣列中的每個元素都執行的回撥函式,然後返回新陣列中對應索引處的元素。
    1. element:當前在陣列中處理的元素。
    2. index:當前在陣列中處理的元素的索引。
    3. array:當前陣列。
  3. thisArg:執行回撥函式時的this物件。

返回值

  1. new_arraycallback每次執行後的返回值(包括undefined)組合起來形成一個新陣列。

注意項

  1. map遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫map之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改,則他們傳入callback的值是map訪問到他們那一刻的值。從來沒被賦過值或被刪除的元素將不會被訪問到。

例子

[2, 5, 9].map(x => x * x); // [4, 25, 81]

["1", "2", "3"].map(parseInt); // [1, NaN, NaN]
["1", "2", "3"].map(x => parseInt(x)); // [1, 2, 3]
複製程式碼

Array.prototype.pop()

描述:從陣列中刪除最後一個元素,並返回該元素的值。

語法

last_element = old_array.pop();
複製程式碼

引數

  1. old_array:原陣列。

返回值

  1. last_element:陣列的最後一個元素。

注意項

  1. 在空陣列上呼叫pop(),返回undefined
  2. Array(7)等稀疏陣列上呼叫pop(),返回undefined
  3. 此方法會改變原陣列。

例子

[2, 5, 9].pop(); // 9
[2, 5, [9, 10]].pop(); // [9, 10]

[].pop(); // undefined
Array(7).pop(); // undefined
複製程式碼

Array.prototype.push()

描述:將一個或多個元素新增到陣列的末尾,並返回該陣列的新長度。

語法

new_array_length = old_array.push(element1, ..., elementN);
複製程式碼

引數

  1. old_array:原陣列。
  2. elementN:被新增到陣列末尾的元素。

返回值

  1. new_array_length:返回陣列新增元素之後的新長度。

例子

var arr = [1, 2, 3];
arr.push(4, 5); // 5
console.log(arr); // [1, 2, 3, 4, 5]
複製程式碼

Array.prototype.reduce()

描述:對陣列中的每個元素執行提供的reducer函式(升序執行),將其結果彙總為單個返回值。

語法

number = old_array.reduce(callback(accumulator, element[[, index], array])[, initialValue]);
複製程式碼

引數

  1. old_array:原陣列。
  2. callback:原陣列中的每個元素都執行的回撥函式。
    1. accumulator:上一次呼叫回撥的返回值,或提供的initialValue
    2. element:當前在陣列中處理的元素。
    3. index:當前在陣列中處理的元素的索引。
    4. array:當前陣列。
  3. initialValue:用作第一次呼叫callback的引數值。如果未提供初始值,則將使用陣列中的第一個元素。空陣列在沒有初始值時呼叫reduce()丟擲TypeError

返回值

  1. number:對陣列中的每個元素執行提供的reducer函式(升序執行),將其結果彙總為單個返回值。

注意項

  1. reduce為陣列中的每一個元素依次執行callback函式,不包括陣列中被刪除或從未被賦值的元素。
  2. 如果呼叫reduce時提供了initialValueaccumulator取值為initialValueelement取陣列中的第一個值;如果沒有提供initialValue,那麼accumulator取陣列中的第一個值,element取陣列中的第二個值。
  3. 如果沒有提供initialValuereduce會從索引 1 的地方開始執行callback方法,跳過第一個索引。如果提供initialValue,從索引 0 開始。
  4. 如果陣列僅有一個元素(無論位置如何)並且沒有提供initialValue,或者有提供initialValue但是陣列為空,那麼此唯一值將被返回並且callback不會被執行。

例子:(程式碼註釋中的->表示執行一次的結果)

[0, 1, 2, 3, 4].reduce(function(accumulator, element, index, array){
  console.log(accumulator); // 0 -> 1 -> 3 -> 6
  return accumulator + element;
}); // 10
[0, 1, 2, 3, 4].reduce(function(accumulator, element, index, array){
  console.log(accumulator); // 10 -> 10 -> 11 -> 13 -> 16
  return accumulator + element;
}, 10); // 20
複製程式碼

Array.prototype.reduceRight()

描述:從右到左對陣列中的每個元素執行提供的reduceRight函式,將其結果彙總為單個返回值。

語法

number = old_array.reduceRight(callback(previousValue, element[[, index], array])[, initialValue]);
複製程式碼

引數

  1. old_array:原陣列。
  2. callback:原陣列中的每個元素都執行的回撥函式。
    1. previousValue:上一次呼叫回撥的返回值,或提供的initialValue
    2. element:當前在陣列中處理的元素。
    3. index:當前在陣列中處理的元素的索引。
    4. array:當前陣列。
  3. initialValue:用作第一次呼叫reduceRight的引數值。如果未提供初始值,則將使用陣列中的最後一個元素。空陣列在沒有初始值時呼叫reduceRight()丟擲TypeError

返回值

  1. number:從右到左對陣列中的每個元素執行提供的reduceRight函式,將其結果彙總為單個返回值。

注意項

  1. reduceRight為陣列中的每一個元素依次執行callback函式,不包括陣列中被刪除或從未被賦值的元素。
  2. 如果呼叫reduceRight時提供了initialValuepreviousValue取值為initialValueelement取陣列中的最後一個值;如果沒有提供initialValue,那麼previousValue取陣列中的最後一個值,element取陣列中的倒數第二個值。
  3. 如果陣列僅有一個元素(無論位置如何)並且沒有提供initialValue,或者有提供initialValue但是陣列為空,那麼此唯一值將被返回並且callback不會被執行。

例子

[0, 1, 2, 3, 4].reduceRight(function(accumulator, element, index, array){
  console.log(accumulator); // 4 -> 7 -> 9 -> 10
  return accumulator + element;
}); // 10
[0, 1, 2, 3, 4].reduceRight(function(accumulator, element, index, array){
  console.log(accumulator); // 10 -> 14 -> 17 -> 19 -> 20
  return accumulator + element;
}, 10); // 20
複製程式碼

Array.prototype.reverse()

描述:將陣列中元素的位置顛倒。

語法

new_array = old_array.reverse();
複製程式碼

引數

  1. old_array:原陣列。

返回值

  1. new_array:顛倒陣列中元素的位置,並返回該陣列的引用。

例子

var arr = ['one', 'two', 'three'];
var reversed = arr.reverse();
console.log('reversed: ', reversed); // ["three", "two", "one"]
console.log('arr: ', arr); // ["three", "two", "one"]
複製程式碼

Array.prototype.shift()

描述:從陣列中刪除第一個元素,並返回該元素的值。此方法更改陣列的長度。

語法

first_element = old_array.shift();
複製程式碼

引數

  1. old_array:原陣列。

返回值

  1. first_element:陣列中的第一個元素。

注意項

  1. 如果陣列的length屬性的值為 0 (長度為 0),則返回undefined

例子

var arr = ['one', 'two', 'three'];
var shift = arr.shift();
console.log('shift: ', shift); // one
console.log('arr: ', arr); // ['two', 'three']

[].shift(); // undefined
複製程式碼

Array.prototype.slice()

描述slice不修改原陣列,只會返回一個淺複製了原陣列中的元素的一個新陣列。

語法

new_array = old_array.slice([start[, end]);
複製程式碼

引數

  1. old_array:原陣列。
  2. start:從該索引處開始複製原陣列中的元素(包含該索引處的值),索引以0開始,如果指定負數,將從陣列的末尾開始往回算。預設值為:0。
  3. end:在該索引處結束複製原陣列元素(不包含該索引處的值),索引以0開始,如果指定負數,將從陣列的末尾開始往回算。預設值為:old_array.length

返回值

  1. new_array:返回淺複製的新陣列。

注意項

  1. 如果原陣列中當前複製元素是物件引用 (不是實際的物件),slice會拷貝這個物件引用到新的陣列裡。兩個物件引用都引用了同一個物件。如果被引用的物件發生改變,則新的和原來的陣列中的這個元素都會發生改變。
  2. 對於字串、數字及布林值來說(不是StringNumber或者Boolean物件),slice會拷貝這些值到新的陣列裡。在別的陣列裡修改這些字串或數字或是布林值,將不會影響其他陣列。

例子

var arr1 = [1, 2, 3],
    arr2 = [arr1, 4, 5, 6], // [[1, 2, 3], 4, 5, 6]
    arr3 = arr2.slice(0, 2), // [[1, 2, 3], 4]
    arr4 = arr2.slice(1, 3); // [4, 5]
arr1[0] = 7;
arr2[1] = 8;
console.log(arr2); // [[7, 2, 3], 8, 5, 6]
console.log(arr3); // [[7, 2, 3], 4]
console.log(arr4); // [4, 5]
複製程式碼

Array.prototype.some()

描述:測試是否至少有一個元素通過提供的函式的測試。

語法

boolean = old_array.some(callback(element[, index[, array]])[, thisArg]);
複製程式碼

引數

  1. old_array:原陣列。
  2. callback:用來測試陣列的每個元素的函式,符合條件則返回true,否則返回false
    1. element:當前在陣列中處理的元素。
    2. index:當前在陣列中處理的元素的索引。
    3. array:當前陣列。
  3. thisArg:執行callback時使用的this值。

返回值

  1. boolean:如果至少有一個元素符合條件則返回true,否則返回false

注意項

  1. 空陣列呼叫some方法返回false
  2. some為陣列中的每一個元素執行一次callback函式,直到找到一個使得callback返回一個trueTruthy。如果找到了這樣一個值,some()將會立即返回 true,否則返回falsecallback只會在那些”有值“的索引上被呼叫,不會在那些被刪除或從來未被賦值的索引上呼叫。
  3. some遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫some之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改,則他們傳入callback的值是some訪問到他們那一刻的值。那些被刪除的元素或從來未被賦值的元素將不會被訪問到。

例子

[].some(x => x > 0); // false

[1, 2, 3].some(x => x > 2); // true
複製程式碼

Array.prototype.sort()

描述:對陣列的元素進行排序,並返回陣列。預設排序順序是根據字串Unicode排序。

語法

new_array = old_array.sort([compareFunction]);
複製程式碼

引數

  1. old_array:原陣列。
  2. compareFunction:用來指定按某種順序進行排列的函式。如果省略,元素按照轉換為的字串的各個字元的Unicode進行排序。

返回值

  1. new_array:排序後的陣列。

例子

[1, 20, 8, 16].sort(); // [1, 16, 20, 8]

[1, 20, 8, 16].sort((a,b) => a - b); // [1, 8, 16, 20]
複製程式碼

Array.prototype.splice()

描述:通過刪除現有元素和 / 或新增新元素來修改陣列,並以陣列返回原陣列中被刪除的內容。

語法

new_array = old_array.splice(start[, deleteCount[, item1[, item2[, ...]]]]);
複製程式碼

引數

  1. old_array:原陣列。
  2. start:從該索引處開始刪除現有元素和 / 或新增新元素來修改陣列,索引以0開始,如果指定負數,將從陣列的末尾開始往回算。預設值為:0。
  3. deleteCount:整數,表示要移除的陣列元素的個數。
    1. 如果deleteCount是 0或者負數,則不移除元素。這種情況下,至少應新增一個新元素。
    2. 如果deleteCount大於start之後的元素的總數,則從start後面的元素都將被刪除(含第start位)。
    3. 如果deleteCount被省略,則其相當於old_array.length - start
  4. itemN:從start索引開始新增進陣列的元素。如果不指定,則splice將只刪除陣列元素。

返回值

  1. new_array:由被刪除的元素組成的一個陣列。如果只刪除了一個元素,則返回只包含一個元素的陣列。如果沒有刪除元素,則返回空陣列。

例子

[1, 20, 8, 16].splice(1); // [20, 8, 16]
[1, 20, 8, 16].splice(1, 2); // [20, 8]

var arr1 = [1, 20, 8, 16],
    arr2 = arr1.splice(1, 2, 2, 3, 4);
console.log(arr1); // [1, 2, 3, 4, 16]
console.log(arr2); // [20, 8]
複製程式碼

Array.prototype.toString()

描述:返回一個字串,表示指定的陣列及其元素。

語法

str = old_array.toString();
複製程式碼

引數

  1. old_array:原陣列。

返回值

  1. str:返回一個字串,表示指定的陣列及其元素。

例子

[1, 20, 8, 16].toString(); // "1,20,8,16"

[1, [20, [10, 15], 8], 16].toString(); // "1,20,10,15,8,16"
複製程式碼

Array.prototype.unshift()

描述:將一個或多個元素新增到陣列的開頭,並返回該陣列的新長度。

語法

new_array_length = old_array.unshift(element1, ..., elementN);
複製程式碼

引數

  1. old_array:原陣列。
  2. elementN:要新增到陣列開頭的元素。

返回值

  1. new_array_length:將一個或多個元素新增到陣列的開頭,並返回該陣列的新長度。

例子

var arr1 = [1, 20, 8, 16],
    len = arr1.unshift(-1, 0);
console.log(arr1); // [-1, 0, 1, 20, 8, 16]
console.log(len); // 6
複製程式碼

Array.prototype.values()

描述:返回一個新的 Array Iterator 物件,該物件包含陣列每個索引的值。

語法

new_iterator = old_array.values();
複製程式碼

引數

  1. old_array:原陣列。
  2. elementN:要新增到陣列開頭的元素。

返回值

  1. new_iterator:返回一個新的 Array Iterator 物件,該物件包含陣列每個索引的值。

例子

var iterator = ['a', 'b', 'c'].values();
iterator.next();   // {value: "a",done: false}
iterator.next();   // {value: "b",done: false}
iterator.next();   // {value: "c",done: false}
iterator.next();   // {value: undefined,done: true}
複製程式碼

相關文章