javascript Array方法總結（上篇）

fxss5201發表於2019-03-09

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

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

`Array.from()`

描述：從一個類似陣列或可迭代物件中建立一個新的陣列例項。

語法：

new_array = Array.from(arrayLike[, callback(element[, index[, array]])[, thisArg]]);
複製程式碼

引數：

arrayLike：類似陣列或可迭代物件。
callback：新陣列中的每個元素都執行的回撥函式，效果等同於：Array.from(arrayLike).map(callback(element[, index[, array]])[, thisArg])。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。
thisArg：執行回撥函式mapFn時的this物件。

返回值：

new_array：返回的新陣列。

例子：

Array.from('foo'); // ["f", "o", "o"]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]
複製程式碼

`Array.isArray()`

描述：用於確定傳遞的值是否是一個陣列。

語法：

new_boolean = Array.isArray(obj);
複製程式碼

引數：

obj：需要檢測的值。

返回值：

new_boolean：如果檢測的值是陣列，則返回true，否則返回false。

`Array.of()`

描述：傳入可變數量的引數，生成相應的陣列。

語法：

new_array = Array.of(element0[, element1[, ...[, elementN]]]);
複製程式碼

引數：

element0~elementN：任意個引數，將按順序成為返回陣列中的元素。

返回值：

new_array：返回的新陣列。

例子：

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]
複製程式碼

`Array.prototype.concat()`

描述：用於合併兩個或多個陣列。

語法：

new_array = old_array.concat(value1[, value2[, ...[, valueN]]]);
複製程式碼

引數：

old_array/value1~valueN：將陣列或者值合併為新的陣列。

返回值：

new_array：返回的新陣列。

`Array.prototype.copyWithin()`

描述：複製陣列中的一部分值到某個位置，陣列長度不變，並返回，會修改原陣列。

語法：

array = old_array.copyWithin(target[, start[, end]]);
複製程式碼

引數：

old_array：原陣列。
target：將複製的值安放的位置，索引以0開始，如果指定負數，將從陣列的末尾開始往回算。
start：複製元素的起始位置，索引以0開始，如果指定負數，將從陣列的末尾開始往回算。預設值為：0。
end：複製元素的起始位置，索引以0開始，如果指定負數，將從陣列的末尾開始往回算。預設值為：old_array.length。

返回值：

array：在原陣列上覆制貼上，然後將其返回。

例子：

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
複製程式碼

`Array.prototype.entries()`

描述：返回一個新的Array Iterator物件，該物件包含陣列中每個索引的鍵/值對。

語法：

new_array_iterator = old_array.entries();
複製程式碼

引數：

old_array：原陣列。

返回值：

new_array_iterator：一個新的Array迭代器物件。可以通過new_array_iterator.next().value遍歷迭代器取得原陣列的[key,value]。

例子：

var iterator = ['a', 'b', 'c'].entries();
iterator.next().value; // [0, "a"]
iterator.next().value; // [1, "b"]

var iterator1 = ['a', 'b', 'c'].entries();
for (let e of iterator1) {
    console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]
複製程式碼

`Array.prototype.every()`

描述：測試陣列的所有元素是否都通過了指定函式的測試。

語法：

boolean = old_array.every(callback[, thisArg]);
複製程式碼

引數：

old_array：原陣列。
callback：用來測試每個元素的函式。
thisArg：執行callback時使用的this值。

返回值：

boolean：返回一個Boolean值，every方法為陣列中的每個元素執行一次callback函式，直到找到一個使callback返回false或Falsy的元素。如果發現了一個這樣的元素，every方法將會立即返回false。否則，callback為每一個元素返回true，every方法才會返回true。

注意項：

callback只會為已經被賦值的索引呼叫，不會被刪除或從來沒被賦值的索引呼叫。
every不會改變原陣列。
every遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫every之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改，則他們傳入callback的值是 every訪問到他們那一刻的值。那些被刪除的元素或從來未被賦值的元素將不會被訪問到。
空陣列返回true。

例子：

[1, 2, 3, 4, 5].every(x => x > 0); // true
[1, 2, 3, 4, 5].every(x => x > 2); // false
複製程式碼

`Array.prototype.fill()`

描述：用一個固定值填充陣列中從起始索引到終止索引之間的全部元素，不包括終止索引。

語法：

array = old_array.fill(value[, start[, end]]);
複製程式碼

引數：

old_array：原陣列。
value：用來填充陣列元素的值。
start：起始索引，索引以0開始，如果指定負數，將從陣列的末尾開始往回算。預設值為：0。
end：終止索引，索引以0開始，如果指定負數，將從陣列的末尾開始往回算。預設值為：old_array.length。

返回值：

array：修改後的陣列。

例子：

[1, 2, 3, 4, 5].fill(0, 2, 4); // [1, 2, 0, 0, 5]
[1, 2, 3, 4, 5].fill(0, -3, 4); // [1, 2, 0, 0, 5]
複製程式碼

`Array.prototype.filter()`

描述：建立一個新陣列, 其包含通過所提供函式測試的所有元素。

語法：

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

引數：

old_array：原陣列。
callback：用來測試陣列的每個元素的函式，返回true或Truthy則測試元素會被新增到返回的新陣列，false或Falsy則不會。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。
thisArg：執行callback時使用的this值。

返回值：

new_array：所有通過測試的元素組成的新陣列，如果沒有通過測試的元素則返回空陣列。

注意項：

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

例子：

[1, 2, 3, 4, 5].filter(x => x > 2); // [3, 4, 5]
複製程式碼

`Array.prototype.find()`

描述：返回通過測試的函式的第一個元素的值，否則返回undefined。

語法：

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

引數：

old_array：原陣列。
callback：用來測試陣列的每個元素的函式，直至callback返回true。當找到了這樣一個元素後，該方法會立即返回這個元素的值，否則返回undefined。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。
thisArg：執行callback時使用的this值。

返回值：

elementN：通過測試的函式的第一個元素的值，否則返回undefined。

注意項：

空陣列返回undefined。
callback函式會為陣列中的每個索引呼叫即從 0 到 length - 1，而不僅僅是那些被賦值的索引（稀疏陣列也會全部呼叫）。
find遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫find之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改，則他們傳入callback的值是find訪問到他們那一刻的值。被刪除的元素仍舊會被訪問到。

例子：

[1, 2, 3, 4, 5].find(x => x > 2); // 3
複製程式碼

`Array.prototype.findIndex()`

描述：返回通過測試的函式的第一個元素的索引，否則返回-1。

語法：

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

引數：

old_array：原陣列。
callback：用來測試陣列的每個元素的函式，直至callback返回true。當找到了這樣一個元素後，該方法會立即返回這個元素的索引，否則返回-1。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。
thisArg：執行callback時使用的this值。

返回值：

number：通過測試的函式的第一個元素的索引，否則返回-1。

注意項：

空陣列返回-1。
callback函式會為陣列中的每個索引呼叫即從 0 到 length - 1，而不僅僅是那些被賦值的索引（稀疏陣列也會全部呼叫）。
findIndex遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫findIndex之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改，則他們傳入callback的值是findIndex訪問到他們那一刻的值。被刪除的元素仍舊會被訪問到。

例子：

[1, 2, 3, 4, 5].findIndex(x => x > 2); // 2
複製程式碼

`Array.prototype.flat()`

描述：會遞迴到指定深度將所有子陣列連線，並返回一個新陣列。

語法：

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

引數：

old_array：原陣列。
depth：指定巢狀陣列中的結構深度，預設值為1。

返回值：

new_array：將子陣列連線起來的新陣列。

例子：一般可用於將多維陣列轉化為一維陣列，例如：

[[1,2,3],[2,[2,3]]].flat(); // [1, 2, 3, 2, [2, 3]]
[[1,2,3],[2,[2,3]]].flat(2); // [1, 2, 3, 2, 2, 3]
[1, 2, , 4, 5].flat(); // [1, 2, 4, 5]
複製程式碼

`Array.prototype.flatMap()`

描述：首先使用對映函式對映每個元素，然後將結果壓縮成一個新陣列。它與先執行相應的map函式在執行flat()效果相同，除了效率略微高一些。

語法：

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

引數：

old_array：原陣列。
callback：可以生成一個新陣列中的元素的函式。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。

返回值：

new_array：一個新的陣列，其中每個元素都是回撥函式的結果。

例子：

var arr1 = [1, 2, 3, 4];
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]
arr1.map(x => [x * 2]).flat(); // [2, 4, 6, 8]
複製程式碼

`Array.prototype.forEach()`

描述：對陣列的每個元素執行一次提供的函式。

語法：

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

引數：

old_array：原陣列。
callback：為陣列中每個元素執行的函式。
1. element：當前在陣列中處理的元素。
2. index：當前在陣列中處理的元素的索引。
3. array：當前陣列。

返回值：undefined。

注意項：

forEach遍歷的元素範圍在第一次呼叫callback之前就已經確定了。在呼叫forEach之後新新增到陣列中的元素不會被callback訪問到。如果陣列中存在的元素被更改，則他們傳入callback的值是forEach訪問到他們那一刻的值。被刪除的元素將不會被訪問到。
沒有辦法中止或者跳出forEach迴圈，除了丟擲一個異常。

例子：

var a = [1, 2, 3, 4].forEach(x => console.log(x * 2));
// 2
// 4
// 6
// 8

console.log(a); // undefined

/** 如果陣列在迭代時被修改了，則其他元素會被跳過。
 * 陣列到two的時候移除第一個元素，所以每個位置上的元素都會往前移動一位，並且當前index為2，所以就得到對應值為four
 */
var words = ["one", "two", "three", "four"];
words.forEach(function(word, index) {
  console.log('No' + index + '. ' + word);
  if (word === "two") {
    words.shift();
  }
});
// No0. one
// No1. two
// No2. four
複製程式碼

`Array.prototype.includes()`

描述：用來判斷一個陣列是否包含一個指定的值，如果包含則返回true，否則返回false。

語法：

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

引數：

old_array：原陣列。
searchElement：需要查詢的元素值。
fromIndex：從該索引處開始查詢searchElement。如果為負值，則按升序從array.length - fromIndex的索引開始搜尋。預設為 0。

返回值：

boolean：如果包含則返回true，否則返回false。

例子：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
複製程式碼

`Array.prototype.indexOf()`

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

語法：

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

引數：

old_array：原陣列。
searchElement：需要查詢的元素值。
fromIndex：從該索引處開始查詢searchElement。如果為負值，則按升序從array.length - fromIndex的索引開始搜尋。預設為 0。

返回值：

number：返回在陣列中找到給定元素的第一個索引，如果不存在，則返回-1。

注意項：

indexOf使用嚴格等於進行判斷（僅當兩個運算元的型別相同且值相等才為true）。

例子：

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

`Array.prototype.join()`

描述：將一個陣列（或一個類陣列物件）的所有元素連線成一個字串並返回這個字串。

語法：

string = old_array.join([separator]);
複製程式碼

引數：

old_array：原陣列。
separator：陣列元素組合成字串時之間的分隔符，預設為,，如不希望使用分隔符，則指定''。

返回值：

string：所有元素連線成的字串。

注意項：

如果元素是undefined或者null，則會轉化成空字串''。

例子：

['a', 'b', 'c'].join();        // "a,b,c"
['a', 'b', 'c'].join('');      // "abc"
['a', 'b', 'c'].join('-');     // "a-b-c"

['a', undefined, null].join(); // "a,,"
複製程式碼

`Array.prototype.keys()`

描述：返回一個包含陣列中每個索引鍵的Array Iterator物件。

語法：

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

引數：

old_array：原陣列。

返回值：

new_iterator：返回一個包含陣列中每個索引鍵的Array Iterator物件。

注意項：

索引迭代器會包含那些沒有對應元素的索引。

例子：

var iterator = ['a', 'b', 'c'].keys();
iterator.next();   // {value: 0,done: false}
iterator.next();   // {value: 1,done: false}
iterator.next();   // {value: 2,done: false}
iterator.next();   // {value: undefined,done: true}

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr); // ["0", "2"]
var denseKeys = [...arr.keys()];   // [0, 1, 2]
複製程式碼

javascript Array方法總結（下篇）
2019-03-09
JavaScript
最全總結 JavaScript Array 方法詳解
2021-08-09
JavaScript
JS-Array的方法總結
2024-10-14
JS
JavaScript裡的陣列Array使用方法總結，超全的o
2020-04-04
JavaScript陣列
JavaScript Array map() 方法
2019-03-19
JavaScript
JavaScript Array常用方法
2018-04-08
JavaScript
javascript Array.from()方法
2019-05-30
JavaScript
Javascript Object常用方法總結
2019-06-10
JavaScriptObject
javascript遍歷方法總結
2019-02-16
JavaScript
javascript陣列方法總結
2018-08-22
JavaScript陣列
js--陣列的 Array.of() 和 Array.from() 方法的使用總結
2021-11-10
JS陣列
PHP array_flip() array_merge() array+array的使用總結
2014-12-10
PHP
JavaScript陣列方法總結（中）
2021-09-09
JavaScript陣列
JavaScript遍歷物件方法總結
2021-04-24
JavaScript物件
JavaScript陣列去重方法總結
2019-04-05
JavaScript陣列
JavaScript正規表示式方法總結
2016-12-07
JavaScript
模擬 javaScript Array 原型上的方法
2019-04-13
JavaScript原型
JavaScript中有用的Array和Object方法
2018-07-20
JavaScriptObject
網站設計之常見簡單實用的JavaScript特效總結（上篇）
2016-12-19
網站JavaScript特效
JavaScript遍歷方法總結與對比
2019-03-30
JavaScript
JavaScript中textRange物件使用方法總結
2015-03-12
JavaScript物件
JavaScript Array物件
2020-07-28
JavaScript物件
javascript-Array
2018-08-27
JavaScript
JavaScript Array 物件
2018-10-25
JavaScript物件
JavaScript中Array
2011-08-05
JavaScript
JS陣列Array的全部方法彙總
2018-10-25
JS陣列
JavaScript中call,apply,bind方法的總結。
2019-04-08
JavaScriptAPP
jQuery和原生JavaScript的操作方法總結
2017-12-22
jQueryJavaScript
JavaScript中call,apply,bind方法的總結
2016-02-26
JavaScriptAPP
javascript 陣列(array) 常用的方法集錦(上)
2019-03-01
JavaScript陣列
淺談 JavaScript 中 Array 型別的方法使用
2019-07-11
JavaScript型別
JavaScript中Array方法你該知道的正確開啟方法
2018-11-08
JavaScript
javascript Date 總結
2016-09-01
JavaScript
Javascript事件總結
2015-05-15
JavaScript事件
JavaScript 技巧總結
2015-08-30
JavaScript
JavaScript Array 陣列
2018-07-25
JavaScript陣列
判斷是否為陣列的 JavaScript 方法總結
2021-08-22
陣列JavaScript
JavaScript中陣列Array.sort()排序方法詳解
2018-05-26
JavaScript陣列排序

javascript Array方法總結（上篇）

Array.from()

Array.isArray()

Array.of()

Array.prototype.concat()

Array.prototype.copyWithin()

Array.prototype.entries()

Array.prototype.every()

Array.prototype.fill()

Array.prototype.filter()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.flat()

Array.prototype.flatMap()

Array.prototype.forEach()

Array.prototype.includes()

Array.prototype.indexOf()

Array.prototype.join()

Array.prototype.keys()

相關文章

`Array.from()`

`Array.isArray()`

`Array.of()`

`Array.prototype.concat()`

`Array.prototype.copyWithin()`

`Array.prototype.entries()`

`Array.prototype.every()`

`Array.prototype.fill()`

`Array.prototype.filter()`

`Array.prototype.find()`

`Array.prototype.findIndex()`

`Array.prototype.flat()`

`Array.prototype.flatMap()`

`Array.prototype.forEach()`

`Array.prototype.includes()`

`Array.prototype.indexOf()`

`Array.prototype.join()`

`Array.prototype.keys()`