JavaScript Array 經常使用函數整理

時間 2019-12-13

標籤 javascript array 經常使用函數整理欄目 JavaScript 简体版

原文原文鏈接

按字母順序整理html

索引數組

Array.prototype.concat()瀏覽器

Array.prototype.filter()app

Array.prototype.indexOf()less

Array.prototype.join()函數

Array.prototype.map()測試

Array.prototype.pop()ui

Array.prototype.push()this

Array.prototype.reduce()spa

Array.prototype.reverse()

Array.prototype.shift()

Array.prototype.slice()

Array.prototype.sort()

Array.prototype.splice()

Array.prototype.toString()

Array.prototype.unshift()

Array.prototype.concat()

concat() 方法將傳入的數組或非數組值與原數組合並,組成一個新的數組並返回.

語法

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

參數

valueN: 須要與原數組合並的數組或非數組值。詳見下文。

返回值

新的 Array 實例。

描述

concat 方法將建立一個新的數組，而後將調用它的對象(this 指向的對象)中的元素以及全部參數中的數組類型的參數中的元素以及非數組類型的參數自己按照順序放入這個新數組,並返回該數組.

concat 方法並不修改調用它的對象(this 指向的對象) 和參數中的各個數組自己的值,而是將他們的每一個元素拷貝一份放在組合成的新數組中.原數組中的元素有兩種被拷貝的方式:

對象引用(非對象直接量):concat 方法會複製對象引用放到組合的新數組裏,原數組和新數組中的對象引用都指向同一個實際的對象,因此,當實際的對象被修改時,兩個數組也同時會被修改.

字符串和數字(是原始值,而不是包裝原始值的 String 和 Number 對象): concat 方法會複製字符串和數字的值放到新數組裏.

注意: 鏈接一個或多個數組（值）將不會改變本來的數組/值。進一步說，任何對新數組的操做都不會對原有的數組形成影響（僅當該元素不是對象的引用時），反之亦然。

Array.prototype.filter()

概述

filter() 方法使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組。

語法

var new_arrary = arr.filter(callback[, thisArg])

參數

callback: 用來測試數組的每一個元素的函數。調用時使用參數 (element, index, array)。
返回true表示保留該元素（經過測試），false則不保留。
thisArg: 可選。執行 callback 時的用於 this 的值。

描述

filter 爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或等價於 true 的值的元素建立一個新數組。callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有經過 callback 測試的元素會被跳過，不會被包含在新數組中。

callback 被調用時傳入三個參數：

元素的值
元素的索引
被遍歷的數組

若是爲 filter 提供一個 thisArg 參數，則它會被做爲 callback 被調用時的 this 值。不然，callback 的 this 值在非嚴格模式下將是全局對象，嚴格模式下爲 undefined。
The thisvalue ultimately observable by callback is determined according to the usual rules for determining thethis seen by a function.

filter 不會改變原數組。

filter 遍歷的元素範圍在第一次調用 callback 以前就已經肯定了。在調用 filter 以後被添加到數組中的元素不會被 filter 遍歷到。若是已經存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或歷來未被賦值的元素不會被遍歷到。

Array.prototype.indexOf()

indexOf()方法返回給定元素能找在數組中找到的第一個索引值，不然返回-1。

語法

arr.indexOf(searchElement[, fromIndex = 0])

參數

searchElement: 要查找的元素
fromIndex: 開始查找的位置。若是該索引值大於或等於數組長度，意味着不會在數組裏查找，返回-1。若是參數中提供的索引值是一個負值，則將其做爲數組末尾的一個抵消，即-1表示從最後一個元素開始查找，-2表示從倒數第二個元素開始查找，以此類推。注意：若是參數中提供的索引值是一個負值，仍然從前向後查詢數組。若是抵消後的索引值仍小於0，則整個數組都將會被查詢。其默認值爲0.

描述

indexOf 使用strict equality (不管是 ===, 仍是 triple-equals操做符都基於一樣的方法)進行判斷 searchElement與數組中包含的元素之間的關係。

Array.prototype.join()

join() 方法將數組中的全部元素鏈接成一個字符串。

語法

str = arr.join([separator = ','])

參數

separator: 可選，用於指定鏈接每一個數組元素的分隔符。分隔符會被轉成字符串類型；若是省略的話，默認爲一個逗號。若是 seprator 是一個空字符串，那麼數組中的全部元素將被直接鏈接。

描述

全部的數組元素被轉換成字符串，再用一個分隔符將這些字符串鏈接起來。若是元素是undefined 或者null，則會轉化成空字符串。

Array.prototype.map()

概述

map() 方法返回一個由原數組中的每一個元素調用一個指定方法後的返回值組成的新數組。

語法

array.map(callback[, thisArg])

參數

callback

原數組中的元素通過該方法後返回一個新的元素。

currentValue: callback 的第一個參數，數組中當前被傳遞的元素。
index: callback 的第二個參數，數組中當前被傳遞的元素的索引。
array: callback 的第三個參數，調用 map 方法的數組。

thisArg

執行 callback 函數時 this 指向的對象。

描述

map 方法會給原數組中的每一個元素都按順序調用一次 callback 函數。callback 每次執行後的返回值組合起來造成一個新數組。 callback 函數只會在有值的索引上被調用；那些歷來沒被賦過值或者使用 delete 刪除的索引則不會被調用。

callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組自己。

若是 thisArg 參數有值，則每次 callback 函數被調用的時候，this 都會指向 thisArg 參數上的這個對象。若是省略了 thisArg 參數,或者賦值爲 null 或 undefined，則 this 指向全局對象。

map 不修改調用它的原數組自己（固然能夠在 callback 執行時改變原數組）。

使用 map 方法處理數組時，數組元素的範圍是在 callback 方法第一次調用以前就已經肯定了。在 map 方法執行的過程當中：原數組中新增長的元素將不會被 callback 訪問到；若已經存在的元素被改變或刪除了，則它們的傳遞到 callback 的值是 map 方法遍歷到它們的那一時刻的值；而被刪除的元素將不會被訪問到。

Array.prototype.pop()

概述

pop() 方法刪除一個數組中的最後的一個元素，而且返回這個元素。

語法

array.pop()

描述

pop 方法刪除一個數組中的最後一個元素，而且把這個刪除掉的元素返回給調用者。

pop 被有意設計成具備通用性，該方法能夠經過 call 或 apply 方法應用於一個類數組（array-like）對象上。

Array.prototype.push()

push() 方法添加一個或多個元素到數組的末尾，並返回數組新的長度（length 屬性值）。

語法

arr.push(element1, ..., elementN)

參數

elementN: 被添加到數組末尾的元素。

返回值

當調用該方法時，新的 length 屬性值將被返回。

描述

push 方法把值添加到數組中。

push 方法有意具備通用性。該方法和 call() 或 apply() 一塊兒使用時，可應用在相似數組的對象上。push 方法根據 length 屬性來決定從哪裏開始插入給定的值。若是 length 不能被轉成一個數值，則插入的元素索引爲 0，包括 length 不存在時。當 length 不存在時，將會建立它。

惟一的原生類數組（array-like）對象是 Strings，儘管如此，它們並不適用該方法，由於字符串是不可改變的。

Array.prototype.reduce()

概述

reduce() 方法接收一個函數做爲累加器（accumulator），數組中的每一個值（從左到右）開始合併，最終爲一個值。

語法

arr.reduce(callback,[initialValue])

參數

callback

執行數組中每一個值的函數，包含四個參數

previousValue: 上一次調用回調返回的值，或者是提供的初始值（initialValue）
currentValue: 數組中當前被處理的元素
index: 當前元素在數組中的索引
array: 調用 reduce 的數組

initialValue

做爲第一次調用 callback 的第一個參數。

描述

reduce 爲數組中的每個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。

回調函數第一次執行時，previousValue 和 currentValue 的取值有兩種狀況，若是 initialValue 在調用 reduce 時被提供，那麼第一個 previousValue 等於 initialValue ，而且currentValue 等於數組中的第一個值；若是initialValue 未被提供，那麼previousValue 等於數組中的第一個值，currentValue等於數組中的第二個值。

若是數組爲空而且沒有提供initialValue，會拋出TypeError 。若是數組僅有一個元素（不管位置如何）而且沒有提供initialValue，或者有提供initialValue可是數組爲空，那麼此惟一值將被返回而且callback不會被執行。

Array.prototype.reverse()

reverse() 方法顛倒數組中元素的位置。第一個元素會成爲最後一個，最後一個會成爲第一個。

語法

 arr.reverse()

參數

無

描述

reverse 方法顛倒數組中元素的位置，並返回該數組的引用。

Array.prototype.shift()

shift() 方法刪除數組的 第一個 元素，並返回這個元素。該方法會改變數組的長度。

語法

arr.shift()

描述

shift 方法移除索引爲 0 的元素(即第一個元素)，並返回被移除的元素，其餘元素的索引值隨之減 1。若是 length 屬性的值爲 0 (長度爲 0)，則返回undefined。

shift 方法並不侷限於數組：該方法亦可經過 call 或 apply 做用於對象上。對於不包含 length 屬性的對象，將添加一個值爲 0 的 length 屬性。

Array.prototype.slice()

slice() 方法會淺複製（shallow copy）數組的一部分到一個新的數組，並返回這個新數組。

語法

arr.slice([begin[, end]])

參數

begin: 從該索引處開始提取原數組中的元素（從0開始）。; 若是該參數爲負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。; 若是省略 begin，則 slice 從索引 0 開始。

end: 在該索引處結束提取原數組元素（從0開始）。slice會提取原數組中索引從 begin 到 end 的全部元素（包含begin，但不包含end）。; slice(1,4) 提取原數組中的第二個元素開始直到第四個元素的全部元素（索引爲 1, 2, 3的元素）。; 若是該參數爲負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。; 若是 end 被省略，則slice 會一直提取到原數組末尾。

返回值

一個含有提取元素的新數組

描述

slice 不修改原數組，只會返回一個淺複製了原數組中的元素的一個新數組。原數組的元素會按照下述規則拷貝：

若是該元素是個對象引用（不是實際的對象），slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變，則新的和原來的數組中的這個元素也會發生改變。

對於字符串、數字及布爾值來講（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值，將不會影響另外一個數組。

若是向兩個數組任一中添加了新元素，則另外一個不會受到影響。

Array.prototype.sort()

sort() 方法對數組的元素作原地的排序，並返回這個數組。 sort 排序多是不穩定的。默認按照字符串的Unicode碼位點（code point）排序。

語法

arr.sort([compareFunction])

參數

compareFunction: 可選。用來指定按某種順序進行排列的函數。若是省略，元素按照轉換爲的字符串的諸個字符的Unicode位點進行排序。

描述

若是沒有指明 compareFunction ，那麼元素會按照轉換爲的字符串的諸個字符的Unicode位點進行排序。例如 "Banana" 會被排列到 "cherry" 以前。數字比大小時，9 出如今 80 以前，但這裏比較時數字會先被轉換爲字符串，因此 "80" 比 "9" 要靠前。

var fruit = ['cherries', 'apples', 'bananas'];

fruit.sort(); // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 2, 21];

scores.sort(); // [1, 10, 2, 21]

// Watch out that 10 comes before 2,

// because '10' comes before '2' in Unicode code point order.

var things = ['word', 'Word', '1 Word', '2 Words'];

things.sort(); // ['1 Word', '2 Words', 'Word', 'word']

// In Unicode, numbers come before upper case letters,

// which come before lower case letters.

若是指明瞭 compareFunction ，那麼數組會按照調用該函數的返回值排序。記 a 和 b 是兩個將要被比較的元素：

若是 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 以前；

若是 compareFunction(a, b) 等於 0 ， a 和 b 的相對位置不變。備註： ECMAScript 標準並不保證這一行爲，並且也不是全部瀏覽器都會遵照（例如 Mozilla 在 2003 年以前的版本）；

若是 compareFunction(a, b) 大於 0 ， b 會被排列到 a 以前。
compareFunction(a, b) 必須老是對相同的輸入返回相同的比較結果，不然排序的結果將是不肯定的。

因此，比較函數格式以下：

function compare(a, b) {

if (a is less than b by some ordering criterion) {

return -1;

}

if (a is greater than b by the ordering criterion)

{

return 1;

} // a must be equal to b return 0;

}

但願比較數字而非字符串，比較函數能夠簡單的以 a 減 b，以下的函數將會將數組升序排列

function compareNumbers(a, b) { return a - b; }

sort 方法可使用函數表達式方便地書寫：

var numbers = [4, 2, 5, 1, 3];

numbers.sort(function(a, b) {

return a - b;

});

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

對象能夠按照某個屬性排序：

var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic' }, { name: 'Zeros', value: 37 } ];

items.sort(function (a, b) {

if (a.value > b.value) {

return 1;

}

if (a.value < b.value) {

return -1;

} // a 必須等於 b return 0; });

Array.prototype.splice()

splice() 方法用新元素替換舊元素，以此修改數組的內容。

語法

array.splice(start, deleteCount[, item1[, item2[, ...]]])

參數

start: 從數組的哪一位開始修改內容。若是超出了數組的長度，則從數組末尾開始添加內容；若是是負值，則表示從數組末位開始的第幾位。

deleteCount: 整數，表示要移除的數組元素的個數。若是 deleteCount 是 0，則不移除元素。這種狀況下，至少應添加一個新元素。若是 deleteCount 大於start以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。

itemN: 要添加進數組的元素。若是不指定，則 splice() 只刪除數組元素。

返回值

由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組。

描述

若是添加進數組的元素個數不等於被刪除的元素個數，數組的長度會發生相應的改變。

提示和註釋

註釋：請注意，splice() 方法與 slice() 方法的做用是不一樣的，splice() 方法會直接對數組進行修改。

示例

使用 `splice()`

以下代碼演示了 splice 的用法：

Array.prototype.toString()

概述

toString() 返回一個字符串，表示指定的數組及其元素。

語法

arr.toString()

參數

無

描述

Array 對象覆蓋了 Object 的 toString 方法。對於數組對象，toString 方法返回一個字符串，該字符串由數組中的每一個元素的 toString() 返回值經調用 join() 方法鏈接（由逗號隔開）組成。例如，下面的代碼建立了一個數組，而後使用 toString 方法把該數組轉成一個字符串。

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];

var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.

當一個數組被做爲文本值或者進行字符串鏈接操做時，將會自動調用其 toString 方法。

ECMAScript 5 semantics

從 JavaScript 1.8.5 (Firefox 4) 開始，和 ECMAScript 第5版語義（semantics）一致，toString() 方法是通用的，可被用於任何對象。若是對象有一個 join() 方法，將會被調用，其返回值將被返回。沒有則調用 Object.prototype.toString() 方法。