【JS基礎】Array數組的建立與操做方法

本文參考：《JS高級程序設計》（紅寶書）、

JS數組的獨特性

JS中Array類型屬於引用類型，是除了Object以外最經常使用的類型。

JS的數組與其餘語言的數組有着至關大的區別，它十分靈活，在JS中：

• 數組的每一項均可以是任何類型的數據 （也就是數組各項的類型能夠不一樣）。
• 數組的大小能夠動態調整，可隨數組的添加自動增加。

建立數組的兩種基本方式

• 構造函數方式：能夠省略new，可傳遞數值表明項數，或者傳遞其餘類型表明數組內容。
• 數組字面量表示法：數組字面量由一對包含數組向的方括號表示，多個數組項之間以逗號隔開。

下面是兩種方法的實例

// 一、構造函數方式

var colors = new Array(); // new 可省略

// 傳遞數值表明項數。
var colors = new Array(20); // 建立一個包含20項的數組

// 傳遞其餘類型表明數組內容
var colors = new Array("red", "blue", "green"); 
複製代碼

// 二、數組字面量表示法

var names = []; // 空數組

var colors = ["red", "blue", "green"]; // 包含三項

alert(colors[0]); // red，顯示第一項

colors[1] = "Nike"; // 修改第二項

colors[3] = "add"; // 增長數組的第四項

alert(colors.length); // 4
複製代碼

length屬性的妙用

1. Array.length = 數組的長度
2. length 可用來移除或增長數組的項,被移除或新增項的值爲undefined
3. Array[Array.length]能夠方便的在數組末尾添加項

// 移除
var colors = ["red", "blue", "green"]; // 本來長度爲3
colors.length = 2; // 設置長度爲2，則移除最後一項

alert(colors[2]); // undefined


// 新增
colors.length = 4; // 設置長度爲4
alert(colors[3]); // undefined


// 在數組末尾新增一項
colors[colors.length] = "black"; 


// 從新改變數組長度
colors[99] = "white";
alert(colors.length); // 100
// 中間位置都是undefined
複製代碼

迭代數組的五種方法

數組有5個迭代方法，做用以下：

• every()：函數對每項都返回true，就返回true
• filter()：返回該函數會返回true的項組成的數組
• forEach()：只對數組中的每一項運行給定函數，無返回值（即返回undefined）。本質與for循環迭代數組同樣
• map()：返回每次函數調用的結果組成的數組
• some()：函數對任一項返回true，就返回true

每一個方法都接收2個參數：

1. 要在每項上運行的函數。該函數接收3個參數：
   • 數組項的值
   • （可選）該項在數組中的位置（索引）
   • （可選）數組對象自己
2. （可選）運行改函數的做用域對象--影響this 的值

下面分類進行詳細描述。

遍歷的兩種方法

1. forEach()：對數組的每一個元素執行一次提供的函數，無返回值（即返回undefined）。本質與for循環迭代數組同樣。

語法：arr.forEach(callback[, thisArg]);

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

numbers.forEach(function(item, index, array) {
    console.log(item);
    numbers[index]++; // 執行後numbers數組改變，每項增長1
}); // 1 2 3 4 5 4 3 2 1
複製代碼

注意forEach()沒有生成新數組，能夠改變原有數組。

2. map()：建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果（返回每次函數調用的結果組成的數組）。

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

var mapResult = numbers.map(function(item, index, array) {
    return item * 2;
});

alert(mapResult); // [2,4,6,8,10,8,6,4,2]
複製代碼

注意map()生成新數組，不會改變原數組。

數組判斷（斷言）的三種方法

1. every()：測試數組的全部元素是否都經過了指定函數的測試。全經過則返回true，只要有一項不經過就返回false。

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

var everyResult = numbers.every(function(item,index,array){
    return (item > 2);
});

alert(everyResult); // false
複製代碼

注意every()不會改變原數組。

2. some()：測試是否至少有一個元素經過由提供的函數實現的測試。是返回true，不然返回false。

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

var someResult = numbers.some(function (item,index,array) {
    return (item > 2);·
});

alert(someResult); // true
複製代碼

注意some() 不會改變原數組。

3. filter()：建立一個新數組, 其包含經過所提供函數實現的測試的全部元素。 返回值爲一個新的經過測試的元素的集合的數組，若是沒有經過測試則返回空數組。

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

var filterResult = numbers.filter(function(item,index,array){
    return (item > 2);
});

alert(filterResult); // [3,4,5,4,3]
複製代碼

注意filter() 不會改變原數組，它返回過濾後的新數組。

查找的兩種方法

ES5爲數組實例添加了兩個位置方法indexOf()和 lastIndexOf()。

1. indexOf() 方法返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。

2. lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最後一個的索引，若是不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。

這兩個方法都接收兩個參數：

• 要查找的項（searchElement）
• （可選）表示查找起點位置的索引（fromIndex）

這兩個方法的查找方向：

• indexOf()方法：從開頭向後查找
• lastIndexOf()：從末尾向前查找

這兩個方法都返回：

• 要查找的項所在數組中的位置，沒找到的狀況下返回-1

注意要求查找的項必須嚴格相等（即 ===）

下面是一個實例，比較兩種方法

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

alert(numbers.indexOf(4)); // 3。注意4是value，3是index
alert(numbers.lastIndexOf(4)); // 5

alert(numbers.indexOf(4, 4)); // 5
alert(numbers.lastIndexOf(4,4)); // 3。由於是從索引4向前查找，因此第一個找到的是索引3
複製代碼

模擬隊列的四種方法

隊列特色：先進先出，隊列在列表末端添加，前端移除。

正向模擬隊列的兩種方法

1. push()：就是棧方法，數組末端添加n項。

將一個或多個元素添加到數組的末尾，並返回該數組的新長度。

此方法更改數組的長度。

var colors = new Array();
var count = colors.push("red", "green");

alert(count); // 2
複製代碼

2. shift()：數組前端移除一項，長度-1，返回移除的項（即原數組第一項）

從數組中刪除第一個元素，並返回該元素的值。

此方法更改數組的長度。

var colors = new Array();
var count = colors.push("red", "green");

alert(colors.shift()); // "red"
複製代碼

反向模擬隊列的兩種方法

1. pop()，數組末端移除一項，返回移除項

從數組中刪除最後一個元素，並返回該元素的值。

此方法更改數組的長度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// "tomato"
複製代碼

2. unshift()，數組前端添加任意項，返回新數組長度

將一個或多個元素添加到數組的開頭，並返回該數組的新長度。

此方法更改數組的長度。

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

複製代碼

操做數組的三種方法

1. concat()：合併兩個或多個數組。至關於+。

建立當前數組的副本，將接收到的參數添加到副本末尾，返回副本。

此方法不會更改現有數組，而是返回一個新數組。

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
複製代碼

2. slice()：剝離複本，基於當前數組中的幾項建立一個新數組。

返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

原型：arrayObject.slice(start,end),start必選，end可選。start如果負值，則從尾部選取。

此方法不會更改現有數組，而是返回一個新數組。

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2); // green,blue,yellow,purple
alert(colors3); // green,blue,yellow
複製代碼

3. splice()：向數組中添加或從數組中刪除項目，而後以數組形式返回被修改的內容。

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

• start 必需。整數，指定修改的開始位置（從0計數）。使用負數可從數組結尾處規定位置。

• deleteCount 可選。整數，表示要移除的數組元素的個數。

  若是 deleteCount 是 0或者負數，則不移除元素。這種狀況下，至少應添加一個新元素。

  若是 deleteCount 大於start 以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。

  若是deleteCount被省略，則其至關於(arr.length - start)。

• item1, item2, ... 可選。要添加進數組的元素，從start 位置開始。若是不指定，則 splice() 將只刪除數組元素。

轉換數組的四種方法

全部對象都具備的toLocaleString()、toString()、 valueOf()方法和改變分隔符的 join() 方法。

1. toLocaleString()：返回一個字符串表示數組中的元素。

2. toString()：返回逗號分隔的字符串形式拼接

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

var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

複製代碼

3. valueOf()：返回數組自己

返回一個新的 Array Iterator 對象，該對象包含數組每一個索引的值。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value); // expected output: "a" "b" "c"
}
複製代碼

4. join()：改變分隔符，返回字符串

方法將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。

var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());
// expected output: "Fire,Wind,Rain"

console.log(elements.join(''));
// expected output: "FireWindRain"

console.log(elements.join('-'));
// expected output: "Fire-Wind-Rain"

複製代碼

重排序方法的兩種方法

1.sort()：對數組元素進行排序，直接在原數組上進行排序，不會新建數組。

語法： arr.sort([compareFunction])

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

若是指明瞭 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 < b ) {           // 按某種排序標準進行比較, a 小於 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
複製代碼

2. Array.reverse()將數組中元素的位置顛倒,並返回該數組。該方法會改變原數組。

var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']
複製代碼

數組計算的兩種方法

reduce()和reduceRight()方法，一個從頭日後遍歷，一個從後往前遍歷

這兩個方法都接收兩個參數：

1. 在每一項上調用的函數。函數有4個參數：前一個值，當前值，項的索引，數組對象。

   該函數返回的任何值都會做爲第一個參數自動傳給下一項。

2. 做爲歸併基礎的初始值（可選）

1.reduce() 方法對數組中的每一個元素執行一個由您提供的 reducer函數 (升序執行)，將其結果彙總爲單個返回值。

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

var sum = values.reduce(function(prev,cur,index,array){
//第一次prev是1,cur是2；第二次prev是1+2=3，cur是3
    return prev+cur;
});
alert(sum);//15
複製代碼

2. reduceRight() 方法接受一個函數做爲累加器（accumulator）和數組的每一個值（從右到左）將其減小爲單個值。

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

var sum = values.reduceRight(function(prev,cur,index,array){
 // 第一次prev是5，cur是4；第二次prev是5+4=9，cur是3
    return prev+cur;
});
alert(sum); // 15
複製代碼