JS陣列方法

如何識別陣列

問題在于 JavaScript 運算子 typeof 回傳 “object”：

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

typeof fruits;             // 回傳 object

typeof 運算子回傳 “object”，因為 JavaScript 陣列屬于物件，

解決方案 1：

為了解決這個問題，ECMAScript 5 定義了新方法 Array.isArray()：

Array.isArray(fruits);     // 回傳 true

此方案的問題在于 ECMAScript 5 不支持老的瀏覽器，

解決方案 2：

創建您自己的 isArray() 函式以解決此問題：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

假如引數為陣列，則上面的函式始侄訓傳 true，

或者更準確的解釋是：假如物件原型包含單詞 “Array” 則回傳 true，

解決方案 3：

假如物件由給定的構造器創建，則 instanceof 運算子回傳 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 回傳 true

toString()

JavaScript 方法 toString() 把陣列轉換為陣列值（逗號分隔）的字串，

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

結果

Banana,Orange,Apple,Mango

🧡join()

join() 方法也可將所有陣列元素結合為一個字串，

它的行為類似 toString()，但是您還可以規定分隔符：

實體

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

結果

Banana * Orange * Apple * Mango

pop()、push()

pop() 方法從陣列中洗掉最后一個元素

pop() 方法回傳“被彈出”的值

push() 方法（在陣列結尾處）向陣列添加一個新的元素

push() 方法回傳新陣列的長度

shift()、unshift()

shift() 方法會洗掉首個陣列元素，并把所有其他元素“位移”到更低的索引

shift() 方法回傳被“位移出”的字串

unshift() 方法（在開頭）向陣列添加新元素，并“反向位移”舊元素

unshift() 方法回傳新陣列的長度

🧡splice()

拼接陣列

splice() 方法可用于向陣列添加新項：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一個引數（2）定義了應添加新元素的位置（拼接），

第二個引數（0）定義應洗掉多少元素，

其余引數（“Lemon”，“Kiwi”）定義要添加的新元素，

splice() 方法回傳一個包含已洗掉項的陣列：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

sort()

sort() 方法以字母順序對陣列進行排序：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();   //['Apple', 'Banana', 'Mango', 'Orange']// 對 fruits 中的元素進行排序

reverse()

reverse() 方法反轉陣列中的元素，

您可以使用它以降序對陣列進行排序：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 對 fruits 中的元素進行排序
fruits.reverse();         // 反轉元素順序

數字排序

默認地，sort() 函式按照字串順序對值進行排序，

該函式很適合字串（“Apple” 會排在 “Banana” 之前），

不過，如果數字按照字串來排序，則 “25” 大于 “100”，因為 “2” 大于 “1”，

正因如此，sort() 方法在對數值排序時會產生不正確的結果，

我們通過一個比值函式來修正此問題：

實體

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

使用相同的技巧對陣列進行降序排序：

實體

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 

比值函式

還可以排序物件陣列

比較函式的目的是定義另一種排序順序，

比較函式應該回傳一個負，零或正值，這取決于引數：

function(a, b){return a-b}

當 sort() 函式比較兩個值時，會將值發送到比較函式，并根據所回傳的值（負、零或正值）對這些值進行排序，

通過比值函式就能查找最高（或最低）的陣列值：因為排好序了

🤣Math.max()

您可以使用 Math.max.apply 來查找陣列中的最高值：

實體

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)，

同理 Math.min()

🤣我的 Min / Max JavaScript 方法

最快的解決方法是使用“自制”方法，

此函式遍歷陣列，用找到的最高值與每個值進行比較：

實體（查找 Max）

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

🤣以隨機順序排序陣列

實體

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

forEach()

該函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

map()

引數同上

map() 方法通過對每個陣列元素執行函式來創建新陣列，

map() 方法不會對沒有值的陣列元素執行函式，

map() 方法不會更改原始陣列，

.filter()

引數同上

filter() 方法創建一個包含通過測驗的陣列元素的新陣列，

🤣🤣🤣reduce()

reduce() 方法在每個陣列元素上運行函式，以生成（減少它）單個值，

reduce() 方法在陣列中從左到右作業，另請參閱 reduceRight()，

reduce() 方法不會減少原始陣列，

這個例子確定陣列中所有數字的總和：

實體

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

請注意此函式接受 4 個引數：

• 總數（初始值/先前回傳的值）
• 專案值
• 專案索引
• 陣列本身

上例并未使用 index 和 array 引數，可以將它改寫為：

實體

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

reduce() 方法能夠接受一個初始值：

實體

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

reduceRight()

…

暫未了解

🤣every()

every() 方法檢查所有陣列值是否通過測驗，

這個例子檢查所有陣列值是否大于 18：

實體

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

請注意此函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

如果回呼函式僅使用第一個引數（值）時，可以省略其他引數：

實體

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

🤣some()

some() 方法檢查某些陣列值是否通過了測驗，

這個例子檢查某些陣列值是否大于 18：

實體

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

請注意此函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

🧡find()

find() 方法回傳通過測驗函式的第一個陣列元素的值，

可用于陣列中找物件

這個例子查找（回傳）大于 18 的第一個元素的值：

實體

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

請注意此函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

findIndex()

findIndex() 方法回傳通過測驗函式的第一個陣列元素的索引，

這個例子查找大于 18 的第一個元素的索引：

實體

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

請注意此函式接受 3 個引數：

• 專案值
• 專案索引
• 陣列本身

陣列 Const

使用 const 宣告陣列已成為一種常見做法：

實體

const cars = ["Saab", "Volvo", "BMW"];

無法重新賦值

用 const 宣告的陣列不能重新賦值

🧡元素可以重新賦值

實體

// 您可以創建常量陣列：
const cars = ["Saab", "Volvo", "BMW"];
// 您可以更改元素：
cars[0] = "Toyota";
// 您可以添加元素：
cars.push("Audi");

const塊作用域

用 const 宣告的陣列具有塊作用域，

在塊中宣告的陣列與在塊外宣告的陣列不同：

實體

const cars = ["Saab", "Volvo", "BMW"];
// 此處 cars[0] 為 "Saab"
{
  const cars = ["Toyota", "Volvo", "BMW"];
  // 此處 cars[0] 為 "Toyota"
}
// 此處 cars[0] 為 "Saab"

const cars = ["Volvo", "BMW"];       // 允許
{
  const cars = ["Volvo", "BMW"];     // 允許
}
{
  const cars = ["Volvo", "BMW"];     // 允許
}

🧡Array.from()

ES6陣列擴展、將偽陣列物件或可遍歷物件轉換為真陣列

該類陣列物件必須具有length屬性，用于指定陣列的長度，如果沒有length屬性，那么轉換后的陣列是一個空陣列，

該類陣列物件的屬性名必須為數值型或字串型的數字

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4//注意如果這個地方不是‘length’沒有‘’、則回傳4個undefined的陣列
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

🧡🧡🧡將Set結構的資料轉換為真正的陣列：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

將字串轉換為陣列：

let  str = 'hello world!';//同字串split方法
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

**🧡🧡🧡Array.from引數是一個真正的陣列：**淺拷貝、因為參考型別改變還是會互相影響

let a = [1,2,3,{
            c:4
        }];
let b = Array.from(a)//Array.from會回傳一個一模一樣的新陣列，
a===b//false

fill()

ES6為Array增加了fill()函式，使用制定的元素填充陣列，其實就是用默認內容初始化陣列，

引數：

• arr.fill(value, start, end)

• value：填充的值

• start： 開始的下標值

• end：結束的下標值

//傳遞三個引數
let a = [1,2,3,4,5]
let b = a.fill(6,1,4)
console.log(b)   //[1, 6, 6, 6, 5]
//傳遞兩個引數，那么最后一個值就是到陣列的末尾
let a = [1,2,3,4,5]
let b = a.fill(6,1)
console.log(b)   //[1, 6, 6, 6, 6]
//傳遞一個引數
let a = [1,2,3,4,5]
let b = a.fill(6)
console.log(b)   //[6, 6, 6, 6, 6]

Array.of()和Array()的區別

感覺這兩方法都大可不必、直接字面量創建

Array() : 可以有沒引數，表示創建一個陣列

? 如果一個引數，設定陣列的長度，如果這個值是Number型別，則回傳[empty × num]

? 如果 多個引數，表示創建陣列陣列并且初始化

? Array()是構造方法

a = new Array(1, 2, 3);
a = Array(1, 2, 3); // new可省略

Array.of(): 總是回傳引數值組成的陣列ES6

? Array.of()是靜態方法，也回傳一個陣列

? Array.of(…elements) 創建一個具有可變數量引數的新的陣列實體

if (! Array.of) {
  Array.of = function() {
    // 用到了arr.slice(?start, ?end)方法，且置換了運行時其內部的this，
    return Array.prototype.slice.call(arguments);
  }
}

其他

flat()，flatMap()

用于將嵌套的陣列“拉平”，變成一維的陣列，該方法回傳一個新陣列，對原資料沒有影響，

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原陣列有空位，flat()方法會跳過空位，

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法對原陣列的每個成員執行一個函式（相當于執行Array.prototype.map()），然后對回傳值組成的陣列執行flat()方法，該方法回傳一個新陣列，不改變原陣列，

// 相當于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

delete 運算子

既然 JavaScript 陣列屬于物件，其中的元素就可以使用 JavaScript delete 運算子來洗掉：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首個元素改為 undefined

使用 delete 會在陣列留下未定義的空洞，請使用 pop() 或 shift() 取而代之，

自動 toString()

如果需要原始值，則 JavaScript 會自動把陣列轉換為字串，下面兩個例子將產生相同的結果：

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

實體

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; 

所有 JavaScript 物件都擁有 toString() 方法，

entries keys values這三個陣列里不咋用

小知識點

無需使用 new Array()，出于簡潔、可讀性和執行速度的考慮，請使用第一種方法（陣列文本方法），

注意改變陣列的7個方法、非純函式

🧡所有 JavaScript 物件都擁有 toString() 方法，

for和if都會形成作用域

陣列切片就用splice來做吧、作用更大

和字串相同方法

concat()、slice()、indexOf()、includes()

concat()

合并（連接）陣列

concat() 方法通過合并（連接）現有陣列來創建一個新陣列

concat() 方法不會更改現有陣列，它總是回傳一個新陣列，

concat() 方法可以使用任意數量的陣列引數：

實體（合并三個陣列）

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 將arr1、arr2 與 arr3 連接在一起

slice()

裁剪陣列

slice() 方法用陣列的某個片段切出新陣列，

本例從陣列元素 1 （“Orange”）開始切出一段陣列：

實體

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); //['Orange', 'Lemon', 'Apple', 'Mango']

slice() 方法創建新陣列，它不會從源陣列中洗掉任何元素，

本例從陣列元素 3 （“Apple”）開始切出一段陣列：

實體

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); 

slice() 可接受兩個引數，比如 (1, 3)，

該方法會從開始引數選取元素，直到結束引數（不包括）為止，

實體

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 

如果結束引數被省略，比如第一個例子，則 slice() 會切出陣列的剩余部分，

實體

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); 

includes()

同字串方法

該方法的第二個引數表示搜索的起始位置，默認為0，如果第二個引數為負數，則表示倒數的位置，如果這時它大于陣列長度（比如第二個引數為-4，但陣列長度為3），則會重置為從0開始，