Javascript基礎鞏固系列——標準庫Array對象

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/13720869.html， 多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

重新學習JavaScript是因爲當年轉前端有點兒趕鴨子上架的意味，我一直在反思我的知識點總是很零散，不能在腦海中形成一個完整的體系，所以這次想通過再次學習將知識點都串聯起來，結合日常開發的項目，達到溫故而知新的效果。與此同時，總結一下我認爲很重要但又被我遺漏的知識點～

靜態方法

Array.isArray()

返回布爾值表示參數是否爲數組，彌補了typeof運算符的不足（對於數組來說直接返回了object類型）。

var arr = [1, 2, 3];

typeof arr // "object"
Array.isArray(arr) // true

實例方法

valueOf()和toString()

數組的valueOf方法返回數組本身，toString方法返回數組的字符串形式（因爲數組對toString做了自定義）。

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]
arr.toString() // "1,2,3"

push()和pop()

push方法在數組末尾添加一個或多個元素並返回添加元素後數組的長度；pop方法刪除數組的最後一個元素並返回該元素。
PS：兩種方法都會改變原始數組，push和pop結合使用構成了“後進先出”的棧結構。

var arr = [];

arr.push(true, {}) // 2
arr // [true, {}]

arr.pop() // {}
arr // [true]

shift()和unshift()

shift方法刪除數組的第一個元素並返回該元素；unshift方法在數組開頭添加一個或多個元素並返回添加元素後數組的長度。
PS：兩種方法都會改變原始數組，push和shift結合使用構成了“先進先出”的棧結構。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

a.unshift('d', 'e') // 4
a // ['d', 'e', 'b', 'c']

join()

• 以指定參數（默認參數爲逗號）作爲分隔符，將所有數組成員連接爲一個字符串返回，成員是undefined或null或空位，會被轉成空字符串。

var a = [1, 2, 3, 4];

a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
[undefined,, null].join('#') // '#'

• 通過call方法，也可以用於字符串或類似數組的對象。

Array.prototype.join.call('hello', '-')
// "h-e-l-l-o"

var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-')
// 'a-b'

concat()

用於多個數組的合併，返回新的數組，不改變原始數組，參數也可接受其他類型的值，如果數組成員爲對象，只能實現淺拷貝。

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[2].concat({a: 1}
// [2, {a: 1}]

reverse()

用於顛倒排列數組元素，返回改變後的數組。
PS：該方法會改變原始數組。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

slice()

用於提取目標數組的一部分，返回一個新數組，原數組不變，一個重要應用是將類似數組的對象轉爲真正的數組。

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1, 2) // ["b"]
a.slice() // ["a", "b", "c"]
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

// 類數組轉數組
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 });
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

splice()

用於刪除原數組的一部分成員，並可以在刪除的位置添加新的數組成員，返回值是被刪除的元素。
PS：該方法會改變原始數組。

// 參數分別爲起始位置、刪除的個數、替換的新元素序列
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
a.splice(1, 0, 3) // []
a // ["a", 3, "b", "c", "d", 1, 2]
a.splice(3) // ["c", "d", 1, 2]
a // ["a", 3, "b" ]

sort()

對數組成員進行排序，默認是按照字典順序排序（數值會被先轉成字符串再按字典順序排序）。
PS：該方法會改變原始數組。

// 默認排序
'd', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']
[10111, 1101, 111].sort()
// [10111, 1101, 111]

// 自定義排序（函數返回值大於0，a排在b後面）
[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

map()

將數組的所有成員依次傳入參數函數，然後把每一次的執行結果組成一個新數組返回，原數組無變化。

// 回調函數的參數分別爲當前成員、當前位置、數組本身
[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

// 通過第二個參數指定回調函數中this的指向
var arr = ['a', 'b', 'c'];

[1, 2].map(function (e) {
  return this[e];
}, arr)
// ['b', 'c']

// 如果數組有空位會直接跳過
var f = function (n) { return 'a' };

[1, undefined, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]

forEach()

對數組的所有成員依次執行參數函數，但無返回值，也會跳過數組的空位。

// 回調函數的參數分別爲當前成員、當前位置、數組本身
function log(element, index, array) {
  console.log('[' + index + '] = ' + element);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

// 也可以接受第二個參數，綁定參數函數的this變量
var out = [];

[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);

out // [1, 4, 9]

filter()

用於過濾數組成員，滿足條件（參數函數中結果爲true）的成員組成一個新數組返回，也可以接受第二個參數，用來綁定參數函數內部的this變量。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

some()和every()

類似“斷言”（assert），返回一個布爾值，表示判斷數組成員是否符合某種條件，some方法是隻要有一個爲true就返回true，every方法是隻要有一個爲false就返回false，也可以接受第二個參數，用來綁定參數函數內部的this變量。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

// 對於空數組，some方法返回false，every方法返回true，回調函數都不會執行
function isEven(x) { return x % 2 === 0 }

[].some(isEven) // false
[].every(isEven) // true

reduce()和reduceRight()

依次處理數組的每個成員，最終累計爲一個值，前者從左往右，後者從右往左，實際應用比如找出數組中字符串最長的成員。

// 回調函數的參數分別爲累計變量（初始值可以放在reduce的第二個參數，可以規避空數組進行累計操作報錯）、當前成員、當前位置、數組本身
[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
}, 10)
// 10 1
// 11 2
// 13 3
// 16 4
// 20 5
//最後結果：25

indexOf()和lastIndexOf()

indexOf方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1（可以接受第二個參數，表示搜索的開始位置）；lastIndexOf方法返回給定元素在數組中最後一次出現的位置，如果沒有出現則返回-1。
PS：均不能搜索NaN的位置，因爲NaN不嚴格等於自身

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.lastIndexOf(7) // -1

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

參考資料

JavaScript 語言入門教程 ：https://wangdoc.com/javascript/index.html