JavaScript的數組操做

JavaScript的數組操做

JavaScript數組也是對象，它使用單一的變量存儲一系列的值。

數組和對象的區別

在JavaScript中，數組必須使用數字索引，對象可使用命名索引。
數組是特殊類型的對象，具備特有的一些屬性和方法。

如何區分數組和對象

方案1
ECMAScript5定義新方法Array.isArray()

var arr = [];
var obj = {};
console.log(Array.isArray(arr));
// true
console.log(Array.isArray(obj));
// false

此方案不支持老的瀏覽器。

方案2

var arr = [];
console.log(Object.prototype.toString.call(arr));
// [object Array]
var obj = {};
console.log(Object.prototype.toString.call(obj));
// [object Object]

建立

使用字面量建立

var arr = [];

使用構造函數建立

var arr = new Array();
console.log(arr);
// []
arr = new Array(2);
console.log(arr);
// [empty × 2]，當構造函數只傳一個參數時如2，生成一個長度爲2，都爲空位的數組
arr = new Array(1, 2);
console.log(arr);
// [1, 2]

出於簡潔、可讀性和執行速度的考慮，建議使用第一種方法。

取值

var arr = [1, 2];
console.log(arr[1]);// 2

修改值

var arr = [1, 2];
arr[1] = 3;
console.log(arr);
// [1, 3]

超過數組長度賦值、取值

var arr = [1, 2];
arr[3] = 3;
console.log(arr);
// [1, 2, empty, 3]
console.log(arr[4]);
// undefined

刪除元素

數組屬於對象,因此可使用delete運算符執行刪除操做

var arr = [0];
console.log(arr);
// [0]
delete arr[0];
console.log(arr);
// [empty]

元素長度length

var arr = [1, 2];
console.log(arr.length);
// 2

for循環遍歷

var arr = [1, 2];
for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}
// 1
// 2

for...in循環遍歷

var arr = [1, 2];
for (index in arr) {
  console.log(arr[index]);
}
// 1
// 2

concat()-合併兩個或多個數組

var arr1 = [1];
var arr2 = [2];
console.log(arr1.concat(arr2));
// [1, 2]
var arr = [1];
console.log(arr.concat(2, 3));
// [1, 2, 3]

不會改變原數組

join()-將數組元素拼接成一個字符串

var arr = [1, 2];
console.log(arr.join('-'));
// 1-2

不會改變原數組

sort()-排序

var arr = [1, 2];
console.log(arr.sort());
// [1, 2]
console.log(arr.sort((item1, item2) => {
  return item1 - item2;
}));
// [1, 2]
console.log(arr.sort((item1, item2) => {
  return item2 - item1;
}));
// [2, 1]
console.log(arr);
// [2, 1]

返回對數組的引用，在原數組上進行排序，不生成副本。
說明

1. 函數中比較若是小於零，則排序結果item1在前，item2在後。即return item1 - item2爲升序，反之return item2 - item1爲降序。因此return 0.5 - Math.random()能夠實現隨機排序。
2. sort也能夠對文字排序，和數字排序同樣，聽從ASCII編碼的排序規則

查找最值

方案一
查找最小值(最大值同理)

var arr = [1, 2];
console.log(arr.sort(function (a, b) {
  return a - b;
})[0]);

須要對數組進行排序，效率較低
方案二

var arr = [1, 2];
function getArrMax(arr) {
  return Math.max.apply(null, arr);
}
function getArrMin(arr) {
    return Math.min.apply(null, arr);
}
console.log(getArrMax(arr));
// 2
console.log(getArrMin(arr));
// 1

pop()-刪除並返回數組的最後一個元素

var arr = [1, 2];
console.log(arr.pop());
// 2
console.log(arr);
// [1]

會改變原數組

push()-向數組的末尾添加一個或多個元素，並返回新的長度

var arr = [1, 2];
console.log(arr.push(3));
// 3
console.log(arr);
// [1, 2, 3]

會改變原數組
push()方法和pop()方法使用數組提供的先進後出棧的功能。

reverse()-顛倒數組中元素的順序

var arr = [1, 2];
console.log(arr.reverse());
// [2, 1]

會改變原數組

shift()-刪除數組第一個元素，並返回第一個元素的值

var arr = [1, 2];
console.log(arr.shift());
// 1
console.log(arr);
// [2]

會改變原數組

unshift()-向數組的開頭添加一個或更多元素，並返回新的長度

var arr = [1];
console.log(arr.unshift(3));
// 2
console.log(arr);
// [3, 1]

改變原有的數組

slice()-返回選定的元素

arrayObject.slice(start,end)

start、end均可以使用負值從數組的尾部選取元素，

var arr = [1, 2, 3];
console.log(arr.slice(1, 2));
// [2]
console.log(arr);
// [1, 2, 3]

不會改變原數組，若是須要刪除數組中的一段元素，應該使用方法Array.splice()

splice()-從數組中添加/刪除元素，返回被刪除元素

arrayObject.splice(index,howmany,item1,.....,itemX)

howmany若是設置爲0，則不會刪除項目。

var arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 1, 6));
// [3]
console.log(arr);
// [1, 2, 6, 4, 5]

改變原始數組。

toString()-將數組轉換爲字符串

var arr = [1, 2, 3];
console.log(arr.toString());
// 1,2,3

返回值與沒有參數的join()方法返回的字符串相同，元素之間用逗號分隔

toLocaleString()-把數組轉換爲本地字符串

首先調用每一個數組元素的toLocaleString()方法，而後使用地區特定的分隔符把生成的字符串鏈接起來，造成一個字符串。

var arr = ['a', 'b', 'c'];
console.log(arr.toLocaleString());
// a,b,c

valueOf()-返回Array對象的原始值

var arr = [1, 2];
console.log(arr.valueOf());
// [1, 2]

一般由JavaScript在後臺自動調用，並不顯式地出如今代碼中。

forEach()-爲每一個元素調用一次函數

var arr = [1, 2];
arr.forEach(function (item, index, arr) {
  console.log(item);
  console.log(index);
  console.log(arr);
});
// 1
// 0
// [1, 2]
// 2
// 1
// [1, 2]

不改變原數組

map()-對每一個元素執行函數來建立新數組

var arr = [1, 2];
console.log(arr.map(function (item, index, array) {
  return item * 2;
}));
// [2, 4]
console.log(arr);
// [1, 2]

不改變原數組

filter()-經過測試的元素建立新數組

var arr = [1, 2];
console.log(arr.filter(function (item, index, array) {
  return item > 1;
}));
// [2]
console.log(arr);
// [1, 2]

不改變原數組

reduce()-每一個元素運行函數，以生成（減小它）單個值。從左到右工做

var arr = [1, 2, 3];
var sum = arr.reduce(function (total, value, index, array) {
  return total + value;
});
console.log(sum);
// 6
console.log(arr);
// [1, 2, 3]

能夠接受一個初始值

var arr = [1, 2, 3];
var sum = arr.reduce(function (total, value, index, array) {
  return total + value;
}, 4);
console.log(sum);
// 10
console.log(arr);
// [1, 2, 3]

reduceRight()-每一個元素運行函數，以生成（減小它）單個值。從右到左工做

var arr = [1, 2, 3];
var sum = arr.reduceRight(function (total, value, index, array) {
  return total + value;
}, 4);
console.log(sum);
// 10
console.log(arr);
// [1, 2, 3]

every()-檢查全部數組值是否經過測試

var arr = [1, 2, 3];
console.log(arr.every(function (value, index, array) {
  return value < 3;
}));
// false

some()-檢查某些數組值是否經過測試

var arr = [1, 2, 3];
console.log(arr.some(function (value, index, array) {
  return value < 3;
}));
// true

indexOf()-搜索元素值並返回其位置

array.indexOf(item, start)

item 必需。要檢索的項目。
start 可選。從哪裏開始搜索。負值將從結尾開始的給定位置開始，並搜索到結尾。

未找到項目返回-1。
項目屢次出現，返回第一次出現的位置。

var arr = [1, 2, 3];
console.log(arr.indexOf(2));
// 1

lastIndexOf()-搜索元素值並返回其位置，從結尾開始搜索

array.lastIndexOf(item, start)

item 必需。要檢索的項目。
start 可選。從哪裏開始搜索。負值將從結尾開始的給定位置開始，並搜索到開頭。

var arr = [1, 2, 3];
console.log(arr.lastIndexOf(2));
// 1

find()-返回經過測試函數的第一個元素的值

var arr = [1, 2, 3];
console.log(arr.find(function (value, index, array) {
  return value > 1;
}));
// 2

findIndex()-返回經過測試函數的第一個元素的索引

var arr = [1, 2, 3];
console.log(arr.findIndex(function (value, index, array) {
  return value > 1;
}));
// 1

es6中的數組操做

Array.from()-將相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構Set和Map）轉爲真正的數組

所謂相似數組的對象，本質特徵只有一點，即必須有length屬性。

var arrLike = {
  "0": 1,
  "1": 2,
  length: 2,
};
// ES5的寫法
console.log([].slice.call(arrLike));
// [1, 2]
// ES6的寫法
console.log(Array.from(arrLike));
// [1, 2]

只要部署了Iterator接口的數據結構，Array.from都能將其轉爲數組，如Set和Map。

var set = new Set([1, 2])
console.log(Array.from(set));
// [1, 2]

Array.from還能夠接受第二個參數，做用相似於數組的map方法。

var arrLike = {
  "0": 1,
  "1": 2,
  length: 2,
};
console.log(Array.from(arrLike, value => value *2));
// [2, 4]

若是map函數裏面用到了this關鍵字，還能夠傳入Array.from的第三個參數，用來綁定this。

var arrLike = {
  "0": 1,
  "1": 2,
  length: 2,
};
var context = {
  key: 1,
}
console.log(Array.from(arrLike, function () { return this.key *2 }, context));
// [2, 2]

Array.of()-將一組值轉換爲數組

console.log(Array.of(1, 2));
// [1, 2]
console.log(Array.of(2));
// [2]

參數個數不一樣，不會有像new Array()同樣行爲有差別。

Array.of()的模擬實現

function ArrayOf(){
  return [].slice.call(arguments);
}

Array.prototype.copyWithin()-在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

1. target（必需）：從該位置開始替換數據。若是爲負值，表示倒數。
2. start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示從末尾開始計算。
3. end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示從末尾開始計算。

var arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, 3));
// [4, 5, 3, 4, 5]
console.log(arr);
// [4, 5, 3, 4, 5]

Array.prototype.fill()-使用給定值，填充一個數組

arr.fill(value, start, end);

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

Array.prototype的entries()、keys()和values()

keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

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

for (let value of [1, 2].values()) {
  console.log(value);
}
// 1
// 2

for (let [index, value] of [1, 2].entries()) {
  console.log(index, value);
}
// 0 1
// 1 2

Array.prototype.includes()-表示數組是否包含給定的值，與字符串的includes方法相似。

Array.prototype.includes(value, start);

該方法的第二個參數表示搜索的起始位置。

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

includes不會致使對NaN的誤判

Array.prototype.flat()-將嵌套的數組「拉平」

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

flat()的參數表明「拉平」幾層的嵌套數組，使用Infinity關鍵字，無論多少層嵌套，均可以轉成一維數組。

Array.prototype.flatMap()-對原數組的每一個成員執行一個函數，對返回值組成的數組執行flat()方法

arr.flatMap(function callback(currentValue, index, array) {
  // ...
}, thisArg)

console.log([2, 3, 4].flatMap((x) => [x, x * 2]));
// [2, 4, 3, 6, 4, 8]

只能展開一層數組。

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

參考

1. es6標準入門
2. w3school數組相關內容