實用 Array 陣列操作大全

#javascript #Array

Posted by Calon on 2022-04-26

forEach()

  • 不會回傳值，會將陣列內的每筆資料一筆一筆放到函式裡執行。
  • 帶有 3 個參數：
    1. 第 1 個參數 item 為當下資料。（必填）
    2. 第 2 個參數 index 為當下資料的索引值。（選填）
    3. 第 3 個參數 array 為執行的陣列。（選填）
let ary = [1,2,3];
ary.forEach(function(item, index, array){
    // 共 3 筆資料，函式執行 3 次
    console.log(item); // 1  // 2  // 3
    console.log(index); // 0  // 1  // 2
    console.log(array); // [1,2,3]  // [1,2,3]  // [1,2,3]
});


新增、刪除

push()

在陣列的最後一筆後面新增資料，不限資料數量，多筆資料用逗號隔開。

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


pop()

刪除陣列的最後一筆資料。

let ary = [1,2,3];
ary.pop();
console.log(ary); // [1,2]

shift()、unshift()

shift()

刪除陣列第一筆資料。

let ary = [1,2,3];
ary.shift();
console.log(ary); // [2,3]

unshift()

  • 與 shift() 相反，從陣列原本第一筆前面新增資料。
  • 跟 push() 一樣不限資料數量，多筆資料用逗號隔開。
let ary = [1,2,3];
ary.unshift(-0);
console.log(ary); // [0,1,2,3]
ary.unshift(-2,-1);
console.log(ary); //[-2,-1,0,1,2,3]


splice()

splice(start[, deleteCount[, item1[, item2[, ...]]]])

能新增或刪除陣列中的資料，帶有 3 個參數。

  1. 第 1 個參數 為要插入或刪除的索引位置。（必填）
  2. 第 2 個參數 為要刪除的資料數，會從 第 1 個參數 所指定的索引位置開始刪除指定資料數。若沒有需要刪除的資料則填 0；若不填則會刪除從指定的索引位置開始後面全部的資料。（選填）
  3. 第 3 個參數 為選填，填入要新增的資料數，會從 第 1 個參數 所指定的索引位置插入資料。（選填）
let ary = [1,2,3];
ary.splice(1,0,3);
console.log(ary); // [1,3,2,3]
ary.splice(4,0,'hi','John');
console.log(ary); // [1,3,2,3,"hi","John"]

let ary = [1,2,3];
ary.splice(1,1);
console.log(ary); // [1,3]

let ary = [1,2,3];
ary.splice(1);
console.log(ary); // [1]

let ary = [1,2,3];
ary.splice(1);
console.log(ary); // [1]

刪了幾個，就回傳幾個刪掉的元素陣列回來

let ary = [1,2,3];
let ary2 = ary.splice(1);
console.log(ary); // [1]
console.log(ary2); // [2,3]

索引值也可以從後頭開始算

splice() 的 第 1 個參數 可以為負數，這代表從陣列的尾端數回來。-1 並不是從尾端直接增加元素，而是從尾端倒數第一個的位置前面新增資料，所以原本最後一個元素會被往後擠。

let ary = [1,2,3];
let ary2 = ary.splice(-1,0,'last');
console.log(ary); // [1,2,"last",3]
參考資料


不會修改原始陣列，回傳值

find()

將陣列中的每筆資料帶到函式裡並回傳符合條件（true）的==第一筆==資料，如果沒有符合的資料會回傳 undefined。

  • 帶有 3 個參數：
    1. 第 1 個參數 item 為當下資料。（必填）
    2. 第 2 個參數 index 為當下資料的索引值。（選填）
    3. 第 3 個參數 array 為執行的陣列。（選填）
let ary = [1,2,3];
let newAry = ary.find(function(item, index, array){
    return item < 4;
});
console.log(newAry); // 1

newAry = ary.find(function(item, index, array){
    return item > 4;
});
console.log(newAry); // undefined


reduce()

將陣列中的資料從第 1 筆開始帶到函式裡與前一筆資料進行運算並會回傳運算結果。

  • 帶有 4 個參數

    • accumulator 為目前計算後的值，預設值為 initialValue（必填）
    • currentValue 為當前所取出的陣列資料（必填）
    • currentIndex 為當前所取出的陣列資料得索引值（選填）
    • array 為呼叫 reduce() 的陣列（選填）

    • initialValue 為 accumulator 初始值，若沒有填則會代入陣列第 1 個元素（選填）

      Array.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

let ary = [1,2,3];
let newAry = ary.reduce(function(accumulator, currentValue, currentIndex, array){
    return accumulator + currentValue;
}, 0);
console.log(newAry); // 6


every()

將陣列中的每筆資料帶到函式裡並如果每筆資料都符合條件，會回傳 true，如果全部或有部份沒符合的資料會回傳 false。

  • 帶有 3 個參數：
    1. 第 1 個參數 item 為當下資料。（必填）
    2. 第 2 個參數 index 為當下資料的索引值。（選填）
    3. 第 3 個參數 array 為執行的陣列。（選填）
let ary = [1,2,3];
let newAry = ary.every(function(item, index, array){
    return item == 1;
});
console.log(newAry); // false 只有 1 筆資料符合 

newAry = ary.every(function(item, index, array){
    return item < 4;
});
console.log(newAry); // true 全部資料都符合


some()

與 every() 類似，差別在於只要有 1 筆資料符合條件，就會回傳 true，如果全部都沒符合的資料會回傳 false。

let ary = [1,2,3];
let newAry = ary.every(function(item, index, array){
    return item == 1;
});
console.log(newAry); // true 有至少 1 筆資料符合 

newAry = ary.every(function(item, index, array){
    return item > 4;
});
console.log(newAry); // false 全部資料都不符合


join()

將陣列中的所有元素串接成一個字串。不代入任何參數會用預設 , 隔開元素。

  • 帶有 3 個參數：

    1. 第 1 個參數 item 為當下資料。（必填）
    2. 第 2 個參數 index 為當下資料的索引值。（選填）

    3. 第 3 個參數 array 為執行的陣列。（選填）

      array.join([separator])

let ary = [1,2,3];
let str = ary.join();
console.log(str); // '1,2,3'

str = ary.join('');
console.log(str); // '123'

str = ary.join(' ');
console.log(str); // '1 2 3'

str = ary.join('#');
console.log(str); // '1#2#3'


不會修改原始陣列，回傳值並產生新陣列

map()

會建立一個新陣列，並將函式回傳的值加入新陣列裡，沒有回傳的值會代入 undefined，陣列長度為原本陣列的長度。

  • 帶有 3 個參數：
    1. 第 1 個參數 item 為當下資料。（必填）
    2. 第 2 個參數 index 為當下資料的索引值。（選填）
    3. 第 3 個參數 array 為執行的陣列。（選填）
let ary = [1,2,3];
let newAry = ary.map(function(item){});
console.log(newAry); // [undefined, undefined, undefined]

newAry = ary.map(function(item){return false});
console.log(newAry); // [false, false, false]

let dogs = [{
        name: 'Bob',
        age: 3
    },
    {
        name: 'John',
        age: 6
    }
];


newAry = dogs.map(function(item){
    if(item.age < 5){return item.name};
    return false;
}); // ['Bob', false]

newAry = dogs.map(function(item){
    if(item.age < 7){return item.name};
    return false;
}); // ['Bob', 'John']

newAry = dogs.map(function(item){
    if(item.age < 5){return item.name};
}); // ['Bob', undefined]


slice()

arr.slice([begin[, end]])
  • 會回傳一個新陣列，並將指定陣列區段裡的值回傳到新陣列裡。
  • 帶有 2 個參數：
    • 參數 begin 為開始的索引值
    • 參數 end 為要結束的索引值，不代入參數時會提取到陣列最後一筆資料。要注意參數 end 會回傳到代入的索引值的前一筆元素，而不是所代入的索引值。
let ary = [1,2,3,4,5,6];
let newAry = ary.slice(1); // [2, 3, 4, 5, 6]

newAry = ary.slice(2,4); // [3, 4]
  • 代入 0 或不代參數會把陣列所有資料都拷貝一份到新陣列裡。
  • 與 splice() 相同，可以代入負數，slice(0,-1) 代表從提取陣列第 1 筆資料到倒數第 2 筆資料。splice(-1)，則會回傳倒數第 1 個資料。負數超過原始陣列長度會回傳整個陣列資料。
let ary = [1,2,3,4,5,6];
let newAry = ary.slice(); // [1,2,3,4,5,6]

newAry = ary.slice(-1); // [6]

newAry = ary.slice(0,-1); // [1, 2, 3, 4, 5]

newAry = ary.slice(-6); // [1, 2, 3, 4, 5, 6]
參考資料


filter()

會回傳一個新陣列，並將符合條件的資料傳到新陣列裡。

  • 帶有 3 個參數：
    1. 第 1 個參數 item 為當下資料。
    2. 第 2 個參數 index 為當下資料的索引值。
    3. 第 1 個參數 array 為執行的陣列。
let ary = [1,2,3];
let newAry = ary.filter(function(item, index, array){
    return item == 1;
});
console.log(newAry); // [1]

newAry = ary.filter(function(item, index, array){
    return item <= 2;
});
console.log(newAry); // [1, 2]

newAry = ary.filter(function(item, index, array){
    return item < 4;
});
console.log(newAry); // []


split()

str.split([separator[, limit]])

以指定的分割字串決定字串拆分的位置，將拆分結果代入陣列並回傳此陣列。

  • 帶有 2 個參數：
    1. 參數 separator 為指定拆分字串。可以代入正則表達式（regex）。
    2. 參數 limit 為限制陣列長度，如果代入 5，回傳的新陣列會有 5 筆或不超過 5 筆資料。
let message = 'Go lucky Guy';
let strAry = message.split(''); // 代入空字串當分隔符
console.log(strAry); // ['G', 'o', ' ', 'l', 'u', 'c', 'k', 'y', ' ', 'G', 'u', 'y']

strAry = message.split('', 5); // 代入空字串當分隔符
console.log(strAry); // ['G', 'o', ' ', 'l', 'u']

strAry = message.split(' '); // 代入空白當分隔符
console.log(strAry); // ['Go', 'lucky', 'Guy']

strAry = message.split(' ', 5);
console.log(strAry); // ['Go', 'lucky', 'Guy']

strAry = message.split(' ', 1);
console.log(strAry); // ['Go']

strAry = message.split('G');
console.log(strAry); // ['', 'o lucky ', 'uy']

如果沒有代入任何參數或是代入不再呼叫字串內的字串，split() 會將整組字串代入新陣列並回傳。

const message = 'I am a Happy Go lucky Guy';
const strAry = message.split(); // ['I am a Happy Go lucky Guy']

const message = 'I am a Happy Go lucky Guy, how about you?';
const strAry = message.split(','); // ['I am a Happy Go lucky Guy', ' how about you?']

參考資料

排序（會改變原始陣列）

sort()

針對陣列的元素進行排序，裡頭包含了一個排序用的判斷函式，函式內必須包含兩個參數，分別代表陣列裡第 n 個和第 n+1 個元素，透過比較第 n 和第 n+1 個元素的大小來進行排序。

let ary = [1,3,8,4,5,7,6,2];
ary.sort((a,b) => b - a); // [8, 7, 6, 5, 4, 3, 2, 1]
ary.sort((a,b) => a - b); // [1, 2, 3, 4, 5, 6, 7, 8]

reverse()

將陣列排序反轉。

let ary = [1, 2, 3];
ary.reverse(); // [3, 2, 1]
參考資料

#javascript #Array

Calon
在大學就學期間不小心踏入程式領域深坑的小菜鳥，希望留下學習的點點滴滴。




Related Posts

Gaussian Mixture Model - 詳細推導

Gaussian Mixture Model - 詳細推導

 AKai
CS50 TCP/IP DNS HTTP

CS50 TCP/IP DNS HTTP

 adrianwudev
1211. Queries Quality and Percentage

1211. Queries Quality and Percentage

 ikl258794613

Comments