forEach()
- 不會回傳值，會將陣列內的每筆資料一筆一筆放到函式裡執行。
- 帶有 3 個參數：
- 第 1 個參數 item 為當下資料。（必填）
- 第 2 個參數 index 為當下資料的索引值。（選填）
- 第 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 個參數為要插入或刪除的索引位置。（必填）第 2 個參數為要刪除的資料數，會從第 1 個參數所指定的索引位置開始刪除指定資料數。若沒有需要刪除的資料則填0；若不填則會刪除從指定的索引位置開始後面全部的資料。（選填）第 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 個參數 item 為當下資料。（必填）
- 第 2 個參數 index 為當下資料的索引值。（選填）
- 第 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 個參數 item 為當下資料。（必填）
- 第 2 個參數 index 為當下資料的索引值。（選填）
- 第 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 個參數 item 為當下資料。（必填）
- 第 2 個參數 index 為當下資料的索引值。（選填）
第 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 個參數 item 為當下資料。（必填）
- 第 2 個參數 index 為當下資料的索引值。（選填）
- 第 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 個參數 item 為當下資料。
- 第 2 個參數 index 為當下資料的索引值。
- 第 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 個參數：
- 參數 separator 為指定拆分字串。可以代入正則表達式（regex）。
- 參數 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]
