JS Array 陣列處理方法一次搞懂

陣列宣告在 JavaScript 裡面是最常用到的技巧,這篇整理了一下常用處理陣列資料與修改的方法,也包含 ES6 的方法,因為是常用到的技巧,只要能夠對於陣列資料操作熟悉,之後處理資料相信不會有問題的!

這裡整理出操作語法,點選內容目錄可以直接跳轉到對應的說明。

內容目錄

push() 把值放到陣列最後一個位置

push() 簡單說就是可以把值放到陣列最後一個位置,它可輸入一個參數。

語法:array.push(item1, item2, ..., itemX)

參數描述是否必填
item1, item2, …, itemX要添加到 Array 中的項目

let num = [1, 2, 3, 4, 5];
num.push(6, 7);
console.log(num);  // [1, 2, 3, 4, 5, 6, 7]

shift() 取出陣列的第一個元素

shift() 會取出陣列的第一個元素。

語法:array.shift()

let num_a = [1, 2, 3, 4, 5];
let num_b = num_a.shift();
console.log(num_a);  // [2, 3, 4, 5]
console.log(num_b);  // 1

unshift() 元素加到陣列最前面的位置

unshift() 會把你要的元素加到陣列最前面的位置,它可輸入一個參數。

語法:array.unshift(item1, item2, ..., itemX)

參數描述是否必填
item1, item2, …, itemX要添加到 Array 最前面的值

let num = [1, 2, 3, 4, 5];
num.unshift(1, 2, 3);
console.log(num);  // [1, 2, 3, 1, 2, 3, 4, 5]

splice() 移除或新增陣列元素

splice() 可以移除或新增陣列元素,它可輸入三個參數。

語法:array.splice(index, howMany, item1, ....., itemX)

參數描述是否必填
index要移除或要添加的序列號碼
howMany要移除的長度
item1, ….., itemX要添加的內容

let num = [1, 2, 3, 4, 5];
num.splice(3, 1);
console.log(num); // [1, 2, 3, 5] (4 被移除了,注意是從 0 開始算)

let number = [1, 2, 3, 4, 5];
number.splice(3, 1, 100);
console.log(number); //  [1, 2, 3, 100, 5]  (4 被移除了,100 加到第 3 個位置)

let sym = [1, 2, 3, 4, 5];
sym.splice(3, 1, 100, 200);
console.log(sym); //  [1, 2, 3, 100, 200]  (4,5 被移除了,100 加到第 3 個位置, 200加到第 4 個位置)

copyWithin() 拷貝元素到數組的另一個指定位置

copyWithin()指定位置拷貝元素到數組的另一個指定位置中,它可輸入三個參數。

語法:array.copyWithin(target, start, end)

參數描述是否必填
target複製到指定目標索引位置
start元素複製的起始位置
end停止複制的索引位置 (默認為 array.length)。
如果為負值,表示倒數

let num = [1, 2, 3, 4, 5, 6, 7, 8];
num.copyWithin(2);
console.log(num); // [1, 2, 1, 2, 3, 4, 5, 6]

let sym = [1, 2, 3, 4, 5, 6, 7, 8];
sym.copyWithin(3, 1, 3);
console.log(sym); // [1, 2, 3, 2, 3, 6, 7, 8] (複製 2, 3 取代 4, 5)

pop() 移除 ( 取出 ) 陣列的最後一個元素

pop()會移除 ( 取出 ) 陣列的最後一個元素。

語法:array.pop()

let num_a = [1, 2, 3, 4, 5, 6, 7];
let num_b = num_a.pop();
console.log(num_a);  // [1, 2, 3, 4, 5, 6]
console.log(num_b);  // 7

reverse() 陣列反轉

reverse() 會將陣列反轉。

語法:array.reverse()

let num = [1, 2, 3, 4, 5, 6, 7];
num.reverse();
console.log(num); // [7, 6, 5, 4, 3, 2, 1]

sort() 重新排序陣列中的元素

sort()用來重新排序陣列中的元素,它可輸入一個參數。

語法:array.sort(compareFunction)

參數描述是否必填
compareFunction定義替代排序順序的函數,
函數應根據參數返回負,零或正值

let num = ["Banana", "Orange", "Apple", "Mango"];
num.sort();
console.log(num); // ["Apple", "Banana", "Mango", "Orange"]

let number = [1, 100, 50, 5, 25, 10];
let afterSort = number.sort((a, b) => {
  return a - b;
});
console.log(afterSort); // [1, 5, 10, 25, 50, 100]

fill() 陣列中所有元素,置換為指定的值

fill()會把陣列中所有元素,置換為指定的值,它可輸入三個參數。

語法:array.fill(value, start, end)

參數描述是否必填
value填的值
start起始位置值
end結束位置值

let num = [1, 2, 3, 4, 5, 6, 7, 8];
num.fill('a');
console.log(num); // ['a','a','a','a','a','a','a','a']

let sym = [1, 2, 3, 4, 5, 6, 7, 8];
sym.fill('b', 3, 5);
console.log(sym); // [1, 2, 3, 'b', 'b', 6, 7, 8]

length 取得陣列的長度

length 可以取得陣列的長度。

語法:array.length

let num = [1, 2, 3, 4, 5, 6];
console.log(num.length);  // 6

indexOf() 返回某個指定的字符串值在字符串中首次出現的位置

indexOf() 返回某個指定的字符串值在字符串中首次出現的位置,它可輸入兩個參數。

語法:array.indexOf(item, start)

參數描述是否必填
item要判斷的值
start從陣列的哪個位置開始判斷(預設為 0)

let num = [1, 2, 3, 4, 5, 6];
console.log(num.indexOf(4));   // 3
console.log(num.indexOf(3, 5));   // -1 ( 搜尋 4, 5, 6 沒有 3 )

lastIndexOf() 判斷陣列中是否包含某個值

lastIndexOf()會判斷陣列中是否包含某個值,它可輸入兩個參數。

語法:array.lastIndexOf(item, start)

參數描述是否必填
item要判斷的值
start判斷到陣列的哪個位置(預設 -1)

let num = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(num.lastIndexOf(3));   // 2
console.log(num.lastIndexOf(3, 1)); // -1 ( 只判斷 1,2,所以沒有 3 )

concat() 連接兩個或多個數組

concat() 主要是用來連接兩個或多個數組。它可以輸入一個參數。

語法:array1.concat(array2, array3, ..., arrayX)

參數描述是否必填
array2, array3, …, arrayX要加入 Array 的值

let name_a = ["Cecilie", "Lone"];
let name_b = ["Emil", "Tobias", "Linus"];
console.log(name_a.concat(name_b)); //  ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

entries() 返回帶有鍵/值對的 Array Iterator 對象

entries() 主要是返回帶有鍵/值對的 Array Iterator 對象。

語法:array.entries()

let num = ["Banana", "Orange", "Apple", "Mango"];
let f = num.entries();

for (x of f) {
  console.log(x);
}
// [0, "Banana"]
// [1, "Orange"]
// [2, "Apple"]
// [3, "Mango"]

every() 檢查數組中的所有元素是否都通過判斷

every() 主要是檢查數組中的所有元素是否都通過判斷,它可以輸入兩個參數。

語法:array.every(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [32, 33, 12, 40];
let checkAdult = age => age >= 20;
console.log(ages.every(checkAdult)); // false

filter() 回傳所有通過判斷的元素

filter() 創建一個數組,其中包含所有通過判斷的元素,它可以輸入兩個參數。

語法:array.filter(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [32, 33, 16, 40];
let checkAdult = age => age >= 18;
console.log(ages.filter(checkAdult)); // [32, 33, 40]

find() 通過判斷的數組中第一個元素的值

find() 返回通過判斷的數組中第一個元素的值,它可以輸入兩個參數。

語法:array.find(function(currentValue, index, arr),thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [32, 33, 16, 40];
let checkAdult = age => age >= 18;
console.log(ages.find(checkAdult)); // 32

findIndex() 返回通過判斷數組中第一個元素的索引

findIndex() 方法為返回通過判斷數組中第一個元素的索引,它可以輸入兩個參數。

語法:array.findIndex(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [32, 33, 16, 40];
let checkAdult = age => age >= 35;
console.log(ages.findIndex(checkAdult)); // 3

forEach() 數組中的每個元素依次調用一個函數

forEach() 方法為數組中的每個元素依次調用一個函數,它可以輸入兩個參數。

語法:array.forEach(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [32, 33, 16, 40];
let checkAdult = age => {
  console.log(age);
};
ages.forEach(checkAdult);

// 32
// 33
// 16
// 40

from() 從具有 length 屬性或可迭代對象的任何對象返回 Array 對象

from() 方法為從具有 length 屬性或可迭代對象的任何對象返回 Array 對象,它可以輸入三個參數。

語法:Array.from(object, mapFunction, thisValue)

參數描述是否必填
object要轉換為數組的對象
mapFunction一個映射函數,用於調用數組的每個項目
thisValue執行 mapFunction 時用作此值

let arr = Array.from("ABCDEFG");
console.log(arr); // ["A", "B", "C", "D", "E", "F", "G"]

includes() 確定數組是否包含指定的元素

includes() 方法為確定數組是否包含指定的元素,如果數組包含元素,則此方法返回 true,否則返回 false,它可輸入兩個參數。

方法:array.includes(element, start)

參數描述是否必填
element要搜索的元素
start默認值 0。在數組中開始搜索的位置

let name = ["Banana", "Orange", "Apple", "Mango"];
let n = name.includes("Banana", 3);
console.log(n);  // false

isArray() 確定對像是否為數組

isArray() 方法為確定對像是否為數組,如果對像是數組,則此函數返回 true;否則返回 false,它可輸入一個參數。

語法:Array.isArray(obj)

參數描述是否必填
obj要測試的對象

let arr = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(arr)); // true

join() 以字符串形式返回數組

join() 方法為以字符串形式返回數組,元素將由指定的分隔符分隔。 默認的分隔符是逗號(,),它可輸入一個參數。

語法:array.join(separator)

參數描述是否必填
separator要使用的分隔符。
如果省略,則元素之間用逗號分隔

let arr = ["Banana", "Orange", "Apple", "Mango"];
console.log(arr.join()); // "Banana,Orange,Apple,Mango"

keys() 方法返回帶有數組鍵的 Array Iterator 對象

keys() 方法返回帶有數組鍵的 Array Iterator 對象,此方法不會更改原始數組。

語法:array.keys()

let arr = ["Banana", "Orange", "Apple", "Mango"];
console.log(arr.keys());  // Array Iterator {}

map() 數組中的每個元素一次調用提供的函數

map() 方法為創建一個新數組,並為每個數組元素調用一個函數,它可以輸入兩個參數。

語法:array.map(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let numbers = [65, 44, 12, 4];
let myFunction = num => num * 10;
let newArray = numbers.map(myFunction);
console.log(newArray); // [650, 440, 120, 40]

prototype 原型構造函數使您可以向 Array() 對象添加新的屬性和方法

prototype 方法為原型構造函數使您可以向 Array() 對象添加新的屬性和方法。

語法:Array.prototype.name = value

Array.prototype.myUcase = () => {
  for (i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase();
  }
};

reduce() 函數的返回值存儲在累加器中

reduce() 方法為函數的返回值存儲在累加器中(結果/總計),它可以輸入兩個參數。

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

參數描述是否必填
function(total, currentValue, currentIndex, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入四個參數。

參數描述是否必填
total函數的 initialValue 或先前返回的值
currentValue當前元素的值
currentIndex當前元素的數組索引
arr當前元素所屬的數組對象

let numbers = [175, 50, 25];
let myFunc = (total, num) => total - num;
console.log(numbers.reduce(myFunc)); // 100

reduceRight() 將數組縮小為單個值

reduceRight() 方法為將數組縮小為單個值,函數的返回值存儲在累加器中(結果/總計),它可以輸入兩參數。

語法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

參數描述是否必填
function(total, currentValue, currentIndex, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入四個參數。

參數描述是否必填
total函數的 initialValue 或先前返回的值
currentValue當前元素的值
currentIndex當前元素的數組索引
arr當前元素所屬的數組對象

let numbers = [175, 50, 25];
let myFunc = (total, num) => total - num;
console.log(numbers.reduceRight(myFunc)); // -200

slice() 將數組中選定的元素作為新的數組對象返回

slice() 方法為將數組中選定的元素作為新的數組對象返回,它可以輸入兩個參數。

語法:array.slice(start, end)

參數描述是否必填
start一個整數,
指定從何處開始選擇(第一個元素的索引為 0 )。
使用負數從數組末尾選擇。
如果省略,它的作用類似於 “0”
end一個整數,
指定結束選擇的位置。
如果省略,將選擇從數組的開始位置到數組結尾的所有元素。
使用負數從數組末尾選擇

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(1, 3)); // ["Orange", "Lemon"]

some() 檢查數組中的任何元素是否通過判斷

some() 方法為檢查數組中的任何元素是否通過測試(作為函數提供),它可以輸入兩個參數。

語法:array.some(function(currentValue, index, arr), thisValue)

參數描述是否必填
function(currentValue, index, arr)要運行的函式
thisValue傳遞給函數的值用作其 this

函式可以輸入三個參數。

參數描述是否必填
currentValue當前元素的值
index當前元素的數組索引
arr當前元素所屬的數組對象

let ages = [3, 10, 18, 20];
let checkAdult = age => age >= 18;
console.log(ages.some(checkAdult)); // true

toString() 返回一個字符串,其中包含所有數組值,並用逗號分隔

toString() 方法為返回一個字符串,其中包含所有數組值,並用逗號分隔。

語法:array.toString()

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); // Banana,Orange,Apple,Mango

valueOf() 返回數組

valueOf() 方法返回數組。

語法:array.valueOf()

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.valueOf()); // ["Banana", "Orange", "Apple", "Mango"]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *