JavaScript 數組

1、 什麼是數組?

數組對象是使用單獨的變量名來存儲一系列的值。

建立一個數組，有三種方法。

下面的代碼定義了一個名爲 myCars的數組對象：

1: 常規方式:

var myCars=new Array();

myCars[0]="Saab";

myCars[1]="Volvo";

myCars[2]="BMW";

2: 簡潔方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

訪問數組

經過指定數組名以及索引號碼，你能夠訪問某個特定的元素。

如下實例能夠訪問myCars數組的第一個值：

var name=myCars[0];

如下實例修改了數組 myCars 的第一個元素:

myCars[0]="Opel";

在一個數組中能夠有不一樣的對象

全部的JavaScript變量都是對象。數組元素是對象。函數是對象。

所以，你能夠在數組中有不一樣的變量類型。

你能夠在一個數組中包含對象元素、函數、數組：

myArray[0]=Date.now;

myArray[1]=myFunction;

myArray[2]=myCars;

2、 數組屬性

屬性                描述

constructor   返回建立數組對象的原型函數。

length      設置或返回數組元素的個數。

prototype   容許你向數組對象添加屬性或方法。

prototype 屬性使您有能力向對象添加屬性和方法。

當構建一個屬性，全部的數組將被設置屬性，它是默認值。

在構建一個方法時，全部的數組均可以使用該方法。

注意： Array.prototype 單獨不能引用數組, Array() 對象能夠。

注意： 在JavaScript對象中，Prototype是一個全局屬性。

事例：

<p id="demo">點擊按鈕建立數組，並調用新建的 ucase() 方法, 最後顯示結果。</p>​

<button onclick="myFunction()">點我</button>​

<script>

Array.prototype.myUcase=function(){

    for (i=0;i<this.length;i++) {

        this[i]=this[i].toUpperCase();

    }

}​

function myFunction(){

    var fruits = ["Banana", "Orange", "Apple", "Mango"];

    fruits.myUcase();

    var x=document.getElementById("demo");

    x.innerHTML=fruits;

}

</script>

3、 數組方法

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。
copyWithin()	從數組的指定位置拷貝元素到數組的另外一個指定位置中。
entries()	返回數組的可迭代對象。
every()	檢測數值元素的每一個元素是否都符合條件。
fill()	使用一個固定值來填充數組。
filter()	檢測數值元素，並返回符合條件全部元素的數組。
find()	返回符合傳入測試（函數）條件的數組元素。
findIndex()	返回符合傳入測試（函數）條件的數組元素索引。
forEach()	數組每一個元素都執行一次回調函數。
from()	經過給定的對象中建立一個數組。
includes()	判斷一個數組是否包含一個指定的值。
indexOf()	搜索數組中的元素，並返回它所在的位置。
isArray()	判斷對象是否爲數組。
join()	把數組的全部元素放入一個字符串。
keys()	返回數組的可迭代對象，包含原始數組的鍵(key)。
lastIndexOf()	返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。
map()	經過指定函數處理數組的每一個元素，並返回處理後的數組。
pop()	刪除數組的最後一個元素並返回刪除的元素。
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reduce()[rɪˈdu:s]	將數組元素計算爲一個值（從左到右）。
reduceRight()	將數組元素計算爲一個值（從右到左）。
reverse()	反轉數組的元素順序。
shift()	刪除並返回數組的第一個元素。
slice()	選取數組的的一部分，並返回一個新數組。
some()[sʌm]	檢測數組元素中是否有元素符合指定條件。
sort()	對數組的元素進行排序。
splice()	從數組中添加或刪除元素。
toString()	把數組轉換爲字符串，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值。

1. concat() 方法用於鏈接兩個或多個數組。

該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。

合併三個數組的值：

var hege = ["Cecilie", "Lone"];

var stale = ["Emil", "Tobias", "Linus"];

var kai = ["Robin"];

var children = hege.concat(stale,kai);

2. toString() 方法可把數組轉換爲字符串，並返回結果。

注意： 數組中的元素之間用逗號分隔。

將數組轉換爲字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.toString();

3. splice() 方法用於添加或刪除數組中的元素。

注意：這種方法會改變原始數組。

數組中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,0,"Lemon","Kiwi");

fruits 輸出結果：

Banana,Orange,Lemon,Kiwi,Apple,Mango

若是僅刪除一個元素，則返回一個元素的數組。 若是未刪除任何元素，則返回空數組。

事例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2);//（-2，0）會倒着數

console.log(a);  //結果：["Apple", "Mango"]

返回值a是刪除內容創建的新數組。

4. slice() 方法可從已有的數組中返回選定的元素。

slice()方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。

注意： slice() 方法不會改變原始數組。

在數組中讀取元素：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(1,3);

citrus 結果輸出:

Orange,Lemon

5. sort() 方法用於對數組的元素進行排序。

排序順序能夠是字母或數字，並按升序或降序。

默認排序順序爲按字母升序。

注意：當數字是按字母順序排列時"40"將排在"5"前面。

使用數字排序，你必須經過一個函數做爲參數來調用。

函數指定數字是按照升序仍是降序排列。

這些提及來可能很難理解，你能夠經過本頁底部實例進一步瞭解它。

注意： 這種方法會改變原始數組！

語法

arr.sort([compareFunction])

參數

compareFunction 可選

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

firstEl

第一個用於比較的元素。

secondEl

第二個用於比較的元素。

返回值

排序後的數組。請注意，數組已原地排序，而且不進行復制。

實例

數組排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

fruits 輸出結果：

Apple,Banana,Mango,Orange

數字排序（數字和升序）：

var points = [40,100,1,5,25,10];

points.sort(function(a,b){return a-b});

fruits輸出結果：

1,5,10,25,40,100

數字排序 (字母和降序):

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

fruits.reverse();

fruits輸出結果：

Orange,Mango,Banana,Apple

6. reverse() 方法用於顛倒數組中元素的順序。

顛倒數組中元素的順序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();

fruits 結果輸出：

Mango,Apple,Orange,Banana

7. shift() 方法

用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

注意： 此方法改變數組的長度！

提示: 移除數組末尾的元素可使用 pop() 方法。

從數組中移除元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.shift()

fruits結果輸出:

Orange,Apple,Mango

8. pop() 方法

用於刪除數組的最後一個元素並返回刪除的元素。

注意：此方法改變數組的長度！

提示： 移除數組第一個元素，請使用 shift() 方法。

移除最後一個數組元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();

fruits 結果輸出：

Banana,Orange,Apple

9. map() 方法

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

map() 方法按照原始數組元素順序依次處理元素。

注意： map() 不會對空數組進行檢測。

注意： map() 不會改變原始數組。

語法：

array.map(function(currentValue,index,arr), thisValue)

currentValue 必須。當前元素的值（哪一個數組調用map方法，這個參數就是它的元素值！）

index         可選。當前元素的索引值（哪一個數組調用map方法，這個參數就是它的元素索引！）

arr         可選。當前元素屬於的數組對象（哪一個數組調用map方法，這個參數就是數組自己！）

thisValue    可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue，或者傳入 null、undefined，那麼回調函數的 this 爲全局對象。

返回值： 返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

返回一個數組，數組中元素爲原始數組的平方根:

var numbers = [4, 9, 16, 25];

function myFunction() {

    x = document.getElementById("demo")

    x.innerHTML = numbers.map(Math.sqrt);

}

輸出結果爲:

2,3,4,5

如下代碼使用一個包含對象的數組來從新建立一個格式化後的數組。

 

var kvArray = [{key: 1, value: 10},

               {key: 2, value: 20},

               {key: 3, value: 30}];

 

var reformattedArray = kvArray.map(function(obj) {

   var rObj = {};

   rObj[obj.key] = obj.value;

   return rObj;

});

// reformattedArray 數組爲： [{1: 10}, {2: 20}, {3: 30}],

// kvArray 數組未被修改:

// [{key: 1, value: 10},

//  {key: 2, value: 20},

//  {key: 3, value: 30}]

10. forEach() 方法

forEach()用於調用數組的每一個元素，並將元素傳遞給回調函數。

注意: forEach() 對於空數組是不會執行回調函數的。

語法

array.forEach(function(currentValue, index, arr), thisValue)

參數             描述

currentValue 必需。當前元素

index          可選。當前元素的索引值。

arr          可選。當前元素所屬的數組對象。

thisValue    可選。傳遞給函數的值通常用 "this" 值。若是這個參數爲空， "undefined" 會傳遞給 "this" 值

列出數組的每一個元素：

<button onclick="numbers.forEach(myFunction)">點我</button>

<p id="demo"></p>

 

<script>

demoP = document.getElementById("demo");

var numbers = [4, 9, 16, 25];

 

function myFunction(item, index) {

    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";

}

</script>

輸出結果：

index[0]: 4

index[1]: 9

index[2]: 16

index[3]: 25

注意： 沒有辦法停止或者跳出 forEach() 循環，除了拋出一個異常。若是你須要這樣使用的話，此時使用forEach() 方法是不合理的。

若須要提早終止循環，可使用：

ü 簡單循環

ü for...of 循環

ü Array.prototype.every()

ü Array.prototype.some()

ü Array.prototype.find()

ü Array.prototype.findIndex()

這些數組方法能夠對數組元素判斷，以便肯定是否須要繼續遍歷：every()，some()，find()，findIndex()

11. reduce() 方法

接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

reduce() 能夠做爲一個高階函數，用於函數的 compose。

注意: reduce() 對於空數組是不會執行回調函數的。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數                    描述

total          必需。初始值, 或者計算結束後的返回值。

currentValue 必需。當前元素

currentIndex 可選。當前元素的索引

arr         可選。當前元素所屬的數組對象。

initialValue    可選。傳遞給函數的初始值

計算數組元素相加後的總和：

var numbers = [65, 44, 12, 4];

function getSum(total, num) {

    return total + num;

}

function myFunction(item) {

    document.getElementById("demo").innerHTML = numbers.reduce(getSum);

}

輸出結果：

125

12. indexOf() 方法

indexOf() 方法可返回數組中某個指定的元素位置。

該方法將從頭至尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。若是找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引爲 0。

若是在數組中沒找到指定元素則返回 -1。

查找數組中的 "Apple" 元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.indexOf("Apple");

a 結果輸出：

2

語法

array.indexOf(item,start)

參數值

參數         描述

item    必須。查找的元素。

start    可選的整數參數。規定在數組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索。

13. join() 方法

join()方法用於把數組中的全部元素轉換一個字符串。

元素是經過指定的分隔符進行分隔的。

把數組中的全部元素轉換爲一個字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var energy = fruits.join();

energy輸出結果：

Banana,Orange,Apple,Mango

使用不一樣的分隔符：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var energy = fruits.join(" and ");

energy 結果輸出：

Banana and Orange and Apple and Mango

14. filter() 方法

建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。

注意： filter() 不會對空數組進行檢測。

注意： filter() 不會改變原始數組。

語法

array.filter(function(currentValue,index,arr), thisValue)

參數                 描述

currentValue 必須。當前元素的值

index         可選。當前元素的索引值

arr         可選。當前元素屬於的數組對象

thisValue   可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"。

回數組 ages 中全部元素都大於 18 的元素:

var ages = [32, 33, 16, 40];

function checkAdult(age) {

    return age >= 18;

}

function myFunction() {

    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

輸出結果爲:

32,33,40

15. every() 方法

every() 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）。

every() 方法使用指定函數檢測數組中的全部元素：

若是數組中檢測到有一個元素不知足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。

若是全部元素都知足條件，則返回 true。

注意： every() 不會對空數組進行檢測。

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

檢測數組 ages 的全部元素是否都大於等於 18 :

var ages = [32, 33, 16, 40];

function checkAdult(age) {

    return age >= 18;

}

function myFunction() {

    document.getElementById("demo").innerHTML = ages.every(checkAdult);

}

輸出結果爲:

false

16. copyWithin() 方法

用於從數組的指定位置拷貝元素到數組的另外一個指定位置中。

語法

array.copyWithin(target, start, end)

參數

參數          描述

target 必需。複製到指定目標索引位置。

start    可選。元素複製的起始位置。可爲負值，從最後一位倒着數，負幾就是倒着數到第幾位。

end    可選。中止複製的索引位置 (默認爲 array.length，由於最後一位索引不復制)。若是爲負值，表示倒數（意思就是-1不復制最後一個數，-2不復制最後兩個數）。

複製數組的前面兩個元素到後面兩個元素上：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.copyWithin(2, 0);

fruits 輸出結果：

Banana,Orange,Banana,Orange

17. isArray() 方法用於判斷一個對象是否爲數組。

若是對象是數組返回 true，不然返回 false。

判斷對象是否爲數組：

function myFunction() {

    var fruits = ["Banana", "Orange", "Apple", "Mango"];

    var x = document.getElementById("demo");

    x.innerHTML = Array.isArray(fruits);

}

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

舉例——數組去重：

var qc=[1,2,1,1,2,3,4,5,6,7,3,4,5,5];

var arr=[];

for (var i = 0; i < qc.length; i++) {

if (arr.indexOf(qc[i])==-1) {

arr.push(qc[i]);

}

}

 

 

知識拓展：

1. map（）方法

一般狀況下，map 方法中的 callback 函數（回調函數）只須要接受一個參數，就是正在被遍歷的數組元素自己。但這並不意味着 map 只給 callback 傳了一個參數。這個思惟慣性可能會讓咱們犯一個很容易犯的錯誤。

// 下面的語句返回什麼呢:

["1", "2", "3"].map(parseInt);

// 你可能覺的會是[1, 2, 3]

// 但實際的結果是 [1, NaN, NaN]

 

// 一般使用parseInt時,只須要傳遞一個參數.

// 但實際上,parseInt能夠有兩個參數.第二個參數是進制數.

// 能夠經過語句"alert(parseInt.length)===2"來驗證.

// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素,

// 元素索引, 原數組自己.

// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,

// parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.

 

function returnInt(element) {

  return parseInt(element, 10);

}

 

['1', '2', '3'].map(returnInt); // [1, 2, 3]

// 意料之中的結果

 

// 也可使用簡單的箭頭函數，結果同上

['1', '2', '3'].map( str => parseInt(str) );

 

// 一個更簡單的方式:

['1', '2', '3'].map(Number); // [1, 2, 3]

// 與`parseInt` 不一樣，下面的結果會返回浮點數或指數:

['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]