數組 · 前端

## ## **聲明數組** ``` //第一種 var A=[12,78,[78,78,89]] console.log(A) //第二種 var B=new Array(); B[0]=12 B[1]=34 B[2]=56 console.log(B) //第三種 var C=new Array(3); C[0]=12 C[1]=34 C[2]=56 console.log(C) //第四種 var D=new Array(45,78,89,45); console.log(D) ``` [https://www.runoob.com/jsref/jsref-obj-array.html](https://www.runoob.com/jsref/jsref-obj-array.html) 屬性 length ## Array 對象方法 | 方法 | 描述 | | --- | --- | | [concat()](https://www.runoob.com/jsref/jsref-concat-array.html) | 連接兩個或更多的數組，并返回結果。`arr.concat(arr2, ..., arrn)` | | [copyWithin()](https://www.runoob.com/jsref/jsref-copywithin.html) | 從數組的指定位置拷貝元素到數組的另一個指定位置中。~~【IE】~~ | | [entries()](https://www.runoob.com/jsref/jsref-entries.html) | 返回數組的可迭代對象。~~【IE】~~ | | [every()](https://www.runoob.com/jsref/jsref-every.html) | 檢測數值元素的每個元素是否都符合條件。【IE9】 | | [fill()](https://www.runoob.com/jsref/jsref-fill.html) | 使用一個固定值來填充數組。~~【IE】~~ | | [filter()](https://www.runoob.com/jsref/jsref-filter.html) | 檢測數值元素，并返回符合條件所有元素的數組。【IE9】 | | [find()](https://www.runoob.com/jsref/jsref-find.html) | 返回符合傳入測試（函數）條件的數組元素。~~【IE】~~ | | [findIndex()](https://www.runoob.com/jsref/jsref-findindex.html) | 返回符合傳入測試（函數）條件的數組元素索引。~~【IE】~~ | |flat | 。~~【IE】~~ | | flatMap| 。~~【IE】~~ | | [**forEach()**](https://www.runoob.com/jsref/jsref-foreach.html) | 數組每個元素都執行一次回調函數。【IE9】 | | [from()](https://www.runoob.com/jsref/jsref-from.html) | 通過給定的對象中創建一個數組。~~【IE】~~ | | [includes()](https://www.runoob.com/jsref/jsref-includes.html) | 判斷一個數組是否包含一個指定的值。~~【IE】~~ | | [**indexOf()**](https://www.runoob.com/jsref/jsref-indexof-array.html) | 搜索數組中的元素，并返回它所在的位置。【IE9】 | | [isArray()](https://www.runoob.com/jsref/jsref-isarray.html) | 判斷對象是否為數組。【IE9】 | | [**join()**](https://www.runoob.com/jsref/jsref-join.html) | 把數組的所有元素放入一個字符串。`[a,b,c].join(",");//a,b,c` | | [keys()](https://www.runoob.com/jsref/jsref-keys.html) | 返回數組的可迭代對象，包含原始數組的鍵(key)。~~【IE】~~ | | [**lastIndexOf()**](https://www.runoob.com/jsref/jsref-lastindexof-array.html) | 搜索數組中的元素，并返回它最后出現的位置。 | | [map()](https://www.runoob.com/jsref/jsref-map.html) | 通過指定函數處理數組的每個元素，并返回處理后的數組。【IE9】 | |of| ~~【IE】~~ | | [**pop()**](https://www.runoob.com/jsref/jsref-pop.html) | 刪除數組的最后一個元素并返回刪除的元素。 | | [**push()**](https://www.runoob.com/jsref/jsref-push.html) | 向數組的末尾添加一個或更多元素，并返回新的長度。 | | [reduce()](https://www.runoob.com/jsref/jsref-reduce.html) | 將數組元素計算為一個值（從左到右）。【IE9】 | | [reduceRight()](https://www.runoob.com/jsref/jsref-reduceright.html) | 將數組元素計算為一個值（從右到左）。【IE9】 | | [**reverse()**](https://www.runoob.com/jsref/jsref-reverse.html) | 反轉數組的元素順序。 | | [**shift()**](https://www.runoob.com/jsref/jsref-shift.html) | 刪除并返回數組的第一個元素。 | | [**slice()**](https://www.runoob.com/jsref/jsref-slice-array.html) | 截取數組。選取數組的一部分，并返回一個新數組。 | | [some()](https://www.runoob.com/jsref/jsref-some.html) | 檢測數組元素中是否有元素符合指定條件。【IE9】 | | [**sort()**](https://www.runoob.com/jsref/jsref-sort.html) | 對數組的元素進行排序。 | | [**splice()**](https://www.runoob.com/jsref/jsref-splice.html) | 從數組中添加或刪除元素。 | |[`toLocaleString`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString)| 返回一個字符串表示數組中的元素。數組中的元素將使用各自的?`toLocaleString`方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號 ","）隔開 | | [toString()](https://www.runoob.com/jsref/jsref-tostring-array.html) | 把數組轉換為字符串，并返回結果。 | | [**unshift()**](https://www.runoob.com/jsref/jsref-unshift.html) | 向數組的開頭添加一個或更多元素，并返回新的長度。 | | [valueOf()](https://www.runoob.com/jsref/jsref-valueof-array.html) | 返回數組對象的原始值。 | ``` //數組末尾添加一個元素 console.log(arr.push("b"));//2 console.log(arr);//?["a", "b"] //數組末尾刪除一個元素 console.log(arr.pop());//b console.log(arr);//?["a"] //數組開頭刪除一個元素 console.log(arr.shift());//a console.log(arr);//?[] //數組開頭添加一個元素 console.log(arr.unshift("b"));//1 console.log(arr);//?[ "b"] ``` **找出某個元素在數組中的索引** ~~~js var fruits=["Strawberry", "Banana", "Mango"] var pos = fruits.indexOf('Banana');// 1 ~~~ **通過索引新增、刪除、替換元素** `splice(索引位置, 索引位置開始刪除的個數,"從索引位置開始新增的元素1","...","從索引位置開始新增的元素n")` ``` var collection =["a", "b", "c","d","e","f","g"]; var pos = collection.indexOf('f');// 5 //刪除指定索引之后的所有元素 var removedItem = collection.splice(pos); console.log(removedItem);//?["f", "g"] console.log(collection)//["a", "b", "c", "d", "e"] //刪除指定索引的1個 var removedItem = collection.splice(2, 1); // console.log(removedItem);//?["c"] console.log(collection)//["a", "b", "d", "e"] //刪除指定的多個元素 var removedItem = collection.splice(1, 2); console.log(removedItem);//?["b", "d"] console.log(collection)//["a", "e"] //從指定的索引位置插入元素 var addItem = collection.splice(1, 0,"b","c","d"); console.log(addItem);//?[] console.log(collection)//?["a", "b", "c", "d", "e"] //從指定的索引位置替換元素 var addItem = collection.splice(1, 3,"1","2","3"); console.log(addItem);//?["b", "c", "d"] console.log(collection)//["a", "1", "2", "3", "e"] //替換的原理是先刪除在插入 var addItem = collection.splice(1, 2,"b","c","d"); console.log(addItem);//?["1", "2"] console.log(collection)//["a", "b", "c", "d", "3", "e"] ``` **遍歷數組** 方法1 ~~~js var fruits=["Apple ", "Banana "]; fruits.forEach(function (item, index, arr) { console.log(item, index); }); // Apple 0 // Banana 1 ~~~ 方法2 ``` var arr=["Apple ", "Banana "]; for (var i = 0; i < arr.length; i++) { console.log(arr[i],i); } ``` 方法3： for( var i in array ){}? ??原理：數組中有幾個元素，for..in語句就循環執行多少次 **復制、截取數組** slice(start_index , end_index) 范圍為左閉右開 ~~~js //不填寫參數為復制 var arr=[1,2,3,4]; var newArr=arr.slice(); console.log(newArr);//[1,2,3,4]; //截取 var arr=[1,2,3,4]; //范圍 start_index <= value < end_index var newArr=arr.slice(1); console.log(newArr);//[2，3，4]; var newArr=arr.slice(1,2); console.log(newArr);//[2]; //第二個參數為負數，則從后向前截取，-1代表倒數第一個，-2代表倒數第二個 var newArr=arr.slice(1,-1); console.log(newArr);//[2，3]; ~~~ **數組合并** arr.concat(arr1,...,arrN); ``` var arr=["a","b"]; var arr2=[1,2] var arr3=["A","B"]; var newArr=arr.concat(arr2,arr3,"dash","tom"); console.log(newArr);//["a", "b", 1, 2, "A", "B", "dash", "tom"] ``` **數組轉字符串** 把數組的所有元素放入一個字符串。默認,鏈接 ``` [a,b,c].join();//a,b,c [a,b,c].join(",");//a,b,c [a,b,c].join("");//abc [a,b,c].join("_");//a_b_c ``` **反轉數組** reverse()反轉數組的元素順序。 ``` var arr=[a,b,c]; arr.reverse(); console.log(arr);//["c","b","a"] ``` **數組排序** ``` var arr=[2,3,1]; arr.sort(); console.log(arr);//[1，2，3] ``` 我們可以在sort()添加一個回調函數,來指定排序規則,回調函數中需要定義兩個形參,瀏覽器將會分別使用數組中的元素作為實參去調用回調函數使用哪個元素調用不確定,但是肯定的是在數組中a一定在b前邊" -瀏覽器會根據回調函數的返回值來決定元素的順序如果返回一個大于0的值,則元素會交換位置如果返回一個小于0的值,則元素位置不變如果返回一個0,則認為兩個元素相等,也不交換位置