記錄程式相關的一些實用語法: [轉貼] JavaScript Array 陣列操作方法大全 ( 含 ES6 )

出處：https://www.oxxostudio.tw/articles/201908/js-array.html

陣列的操作是 JavaScript 裡很重要也很常用到的技巧，這篇文章一次整理常用的陣列操作方法 ( 包含 ES6 的 map、forEach、every、some、filter、find、from、of...等 )，熟悉了這些陣列操作的方法，寫起程式也就會更加簡潔俐落呦。

操作方法分類

因為陣列操作的方法有很多，下面是我自己針對這些方法做的簡單分類，點選方法名稱，就能夠跳轉看對應的說明和用法呦～

分類	方法
會改變原始陣列	push()、pop()、shift()、unshift()、reverse()、splice()、sort()、copyWithin()、fill()
回傳陣列元素資訊或索引值	length、indexOf()、lastIndexOf()、find()、findIndex()、filter()
針對每個元素處理	forEach()
產生新的陣列或新的值	join()、concat()、slice()、map()、reduce()、reduceRight()、flat()、flatMap()、Array.from()、Array.of()、toString()
判斷並回傳布林值	every()、some()、includes()、Array.isArray()
其他用法	keys()、valueOf()

push()

push()可以將某些值加入到陣列的最後一個位置，不限制添加數量，欲添加的內容使用逗號隔開即可，加入後陣列長度會增加。

使用push()後會改變原本的陣列內容。

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

pop()

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

使用pop()後會改變原本的陣列內容。

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

shift()、unshift()

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

使用shift()後會改變原本的陣列內容。

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

unshift()會將指定的元素添加到第一個位置。

使用nushift()後會改變原本的陣列內容。

let a = [1,2,3,4,5,6,7,8];
a.unshift(100,200,300);
console.log(a);  // [100, 200, 300, 1, 2, 3, 4, 5, 6, 7, 8]

reverse()

reverse()會將陣列反轉。

使用push()後會改變原本的陣列內容。

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

splice()

splice()可以移除或新增陣列的元素，它包含了三個參數，第一個是要移除或要添加的序列號碼 ( 必填 )，第二個是要移除的長度 ( 選填，若不填則第一個號碼位置後方的所有元素都會被移除，若設定為 0 則不會有元素被移除 )，第三個是要添加的內容 ( 選填 )

使用splice()後會改變原本的陣列內容。

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1);
console.log(a);   // [1, 2, 3, 4, 5, 7, 8] ( 6 被移除了 )

設定第三個參數就能夠添加或取代元素。

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

let b = [1,2,3,4,5,6,7,8];
b.splice(5,3,100,200,300);
console.log(b);   // [1, 2, 3, 4, 5, 100, 200, 300] ( 6,7,8 被移除，100,200,300 加到第 5,6,7 個位置  )

let c = [1,2,3,4,5,6,7,8];
c.splice(5,0,100);
console.log(c);   // [1, 2, 3, 4, 5, 100, 6, 7, 8] ( 沒有元素被移除，100 加到第 5 個位置 )

sort()

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

使用sort()後會改變原本的陣列內容。

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);   // [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);   // [1, 2, 3, 4, 5, 6, 7, 8]

如果不使用判斷函式，預設會將元素轉換成字串，並採用 unicode 來判斷，這也會造成某些數字的排序錯誤。

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a);   // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

copyWithin()

copyWithin()能複製陣列中的某些元素，並將它們放到並取同一個陣列指定的位置，copyWithin()有三個參數，第一個是要置換的位置 ( 必填 )，第二個是從什麼位置開始複製 ( 選填，預設 0 )，第三個是停止複製的元素的前一個位置 ( 選填，預設等於陣列長度 )。

使用copyWithin()後會改變原本的陣列內容。

let a = [1,2,3,4,5,6,7,8];
a.copyWithin(2);
console.log(a); // [1,2,1,2,3,4,5,6] ( 因 7 和 8 超過陣列長度，只出現到 6 )

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

fill()

fill()會把陣列中所有元素，置換為指定的值，fill()有三個參數，第一個是準備要置換的內容 ( 必填 )，第二個是從什麼位置開始置換 ( 選填，不設定就全部置換 )，第三個是停止置換的元素的前一個位置 ( 選填，預設等於陣列長度 )。

使用fill()會改變原本的陣列內容。

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

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

length()

length可以取得陣列的長度 ( 所有元素的數量 )。

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

indexOf()、lastIndexOf()

indexOf()會判斷陣列中是否包含某個值，判斷的方式為「由左而右」，如果有包含就回傳這個值在陣列中的索引值，如果沒有就回傳 -1，有兩個參數，第一個參數表示要判斷的值 ( 必填 )，第二個參數表示從陣列的哪個位置開始判斷 ( 選填，預設為 0 )。

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

lastIndexOf()會判斷陣列中是否包含某個值，判斷的方式為「由右而左」，如果有包含就回傳這個值在陣列中的索引值，如果沒有就回傳 -1，有兩個參數，第一個參數表示要判斷的值 ( 必填 )，第二個參數表示判斷到陣列的哪個位置 ( 選填，預設為整個陣列長度 - 1 )。

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

find()

find()會將陣列中的「每一個」元素帶入指定的函式內做判斷，並會回傳第一個符合判斷條件的元素，如果沒有元素符合則會回傳 undefined。

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

findIndex()

findIndex()會將陣列中的「每一個」元素帶入指定的函式內做判斷，並會回傳第一個符合判斷條件元素的位置號碼，如果沒有元素符合則會回傳 -1。

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

filter()

filter()會將陣列中的「每一個」元素帶入指定的函式內做判斷，如果元素符合判斷條件則會傳出，成為一個新的陣列元素。

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));    // [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0)); // [2, 4, 6, 8]

forEach()

forEach()會將陣列中每個元素套用到指定的函式裡進行運算，函式有三個參數，第一個參數表示每個元素的值 ( 必填 )，第二個參數為該元素的索引值 ( 選填 )，第三個參數則表示原本的陣列 ( 選填 )。

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {
    b = b + item;
});
console.log(b); // 15 ( 1+2+3+4+5 )

如果透過第二和第三個參數搭配，就能做到改變原本陣列的效果。

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {
    arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

join()

join()可以將陣列中所有元素，藉由指定的字符合併在一起變成字串呈現，若沒有指定字符預設會用「逗號」合併。

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

concat()

concat()可以將兩個陣列合併在一起，如果是使用 ES6 語法也可以用擴展運算符...來代替。

let a = [1,2,3,4,5];
let b = [6,7,8,9];

let c = a.concat(b);
let d = [...a, ...b]; // 使用 ...

console.log(c); // [1,2,3,4,5,6,7,8,9]
console.log(d); // [1,2,3,4,5,6,7,8,9]

slice()

slice()可以截取出陣列某部份的元素為一個新的陣列，有兩個必填的參數，第一個是起始位置，第二個是結束位置 ( 操作時數字減 1 )。

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

map()

map()會處理陣列中每個元素，最後回傳出一個新的陣列，裡頭有一個函式 ( 必填 ) 和一個回傳函式裡的 this 參數 ( 選填 )，函式內又包含三個參數，第一個是每個元素的值 ( 必填 )，第二個是當前元素的索引值 ( 選填 )，第三個是當前的陣列 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {
    return e + 10;
});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

套用第二個和第三個參數的變化

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {
    return `${e}${i}${arr.find(e => e%5 == 1)}`; // 組合成「元素 + 索引值 + 除以五餘數為 1 的元素」
});
console.log(b); // ['101', '211', '321', '431', '541', '651', '761', '871']

如果要使用回傳函式裡 this 的參數，則「不能使用」箭頭函式，因為箭頭函式的 this 指向和函式的 this 指向不同，所以要用一般的函式處理。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){
    return e + this; // 此處的 this 為 10
}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

reduce()、reduceRight()

reduce()可以將陣列中每個元素進行計算，每次計算的結果會再與下個元素作計算，直到結束為止，裡頭包含一個函式 ( 必填 ) 和初始計算的數值 ( 選填 )，函式內有四個參數，第一個是計算的值 ( 必填 )，第二個是取得的元素 ( 必填 )，第三個是該元素的索引值 ( 選填 )，第四個是原本的陣列 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total + e;
});
console.log(b); // 36 ( 1+2+3+4+5+6+7+8=36 )

reduceRight()和reduce()大同小異，只是其計算方式是由右到左，對於加法來說沒什麼影響，但對於減法而言就有差異。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total - e; 
});
console.log(b); // -34 ( 1-2-3-4-5-6-7-8 = -34 )
let c = a.reduceRight(function(total, e){
    return total - e;
});
console.log(c); // -20 ( 8-7-6-5-4-3-2-1 = -20 )

flat()

flat()可以將一個多維陣列的深度轉成一維 ( 扁平化 )，它有一個選填的參數，代表要轉換的深度數字，預設為 1，如果深度有很多層，可使用Infinity來全部展開成一維陣列。

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b);   // [1, 2, 3, 4, [5, [6]]]
console.log(c);   // [1, 2, 3, 4, 5, [6]]
console.log(d);   // [1, 2, 3, 4, 5, 6]

flatMap()

flatMap()的方法等於map()和flat()的組合，在運算後直接將陣列扁平化處理。

let a = [1,2,[3],[4,5]];
let b = a.flatMap(e => e+1);
let c = a.map(e => e+1).flat();
console.log(b);  // [2, 3, "31", "4,51"] ( 可以看到 b 和 c 得到的結果相同 )
console.log(c);  // [2, 3, "31", "4,51"]

Array.isArray()

Array.isArray()能判斷一個物件是否為陣列，如果是就回傳 true，不然就回傳 false。

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

Array.from()

Array.from()會將「類陣列物件」或是「可迭代的物件」轉換成陣列，Array.from()有兩個參數，第一個參數為「類陣列物件」或「可迭代的物件」( 必填 )，第二個參數則是改變轉換成陣列元素的函式 ( 選填 )。

類陣列物件具有 length 屬性以及索引化 index 的元素，可迭代物件表示具有可以利用迭代的方式取得它自己本身的元素，例如 Map 和 Set...等。( 參考 MDN 說法 )

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']

let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

類陣列物件寫法必須包含 length 屬性，且物件 key 須為 0 開始的數字，對應轉換後的元素索引。

let a = {
    '0': 14, 
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b);  // [14,7,13,9,6]

Array.of()

Array.of()可以快速將數字、字串等內容，轉換成陣列。

let a = Array.of(1,'a',2,'b',3);
console.log(a);   // [1, "a", 2, "b", 3]

toString()

toString()會把整個陣列轉換成文字。

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

every()

every()會將陣列中的「每一個」元素帶入指定的函式內做判斷，只要有任何一個元素不符合判斷條件，會回傳 false，如果全部符合，就會回傳 true。

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3)); // fasle ( 因為 1、2 小於 3，3 等於 3 )
console.log(a.every(e => e > 0)); // true

some()

some()會將陣列中的「每一個」元素帶入指定的函式內做判斷，只要有任何一個元素符合判斷條件，就會回傳 true，如果全都不符合，就會回傳 false。

let a = [1,2,3,4,5,6];
console.log(a.some(e => e > 3)); // 回傳 true，因為 4、5、6 大於 3
console.log(a.some(e => e > 6)); // 回傳 fasle，因為全都小於或等於 6

includes()

includes()會判斷陣列中是否包含某個值，如果有包含就回傳 true，否則回傳 false，有兩個參數，第一個參數表示要判斷的值 ( 必填 )，第二個參數表示從陣列的哪個位置開始判斷 ( 選填 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.includes(2));   // true
console.log(a.includes(2,2)); // false ( 搜尋 3,4,5,6,7,8 沒有 2 )

valueOf()

valueOf()會回傳陣列的原始值，如果原本的陣列有修改，那麼回傳的原始值也會跟著改變

let a = [1,2,3,4,5,6,7,8];
let b = a.valueOf();
console.log(a);    // [1, 2, 3, 4, 5, 6, 7, 8]
let c = a.valueOf();
a.shift();
console.log(a);    // [2, 3, 4, 5, 6, 7, 8]
console.log(b);    // [2, 3, 4, 5, 6, 7, 8] ( 因為 a 的原始值更動了，所以 b 也變了 )
console.log(c);    // [2, 3, 4, 5, 6, 7, 8]

keys()

keys()會回傳陣列中的每一個索引值 ( key ) 成為一個新的 Array Iterator 物件，因為是 Array Iterator 物件，可以透過for...of來取得。

let a = ['a','b','c','d','e'];
let b = a.keys(); 

for (let key of b) {
    console.log(key); // 連續出現 1、2、3、4、5
}

記錄程式相關的一些實用語法

2020年2月6日星期四

[轉貼] JavaScript Array 陣列操作方法大全 ( 含 ES6 )

push()

pop()

shift()、unshift()

reverse()

splice()

sort()

copyWithin()

fill()

length()

indexOf()、lastIndexOf()

find()

findIndex()

filter()

forEach()

join()

concat()

slice()

map()

reduce()、reduceRight()

flat()

flatMap()

Array.isArray()

Array.from()

Array.of()

toString()

every()

some()

includes()

valueOf()

keys()

沒有留言:

張貼留言

2020年2月6日 星期四

[轉貼] JavaScript Array 陣列操作方法大全 ( 含 ES6 )

push()

pop()

shift()、unshift()

reverse()

splice()

sort()

copyWithin()

fill()

length()

indexOf()、lastIndexOf()

find()

findIndex()

filter()

forEach()

join()

concat()

slice()

map()

reduce()、reduceRight()

flat()

flatMap()

Array.isArray()

Array.from()

Array.of()

toString()

every()

some()

includes()

valueOf()

keys()

沒有留言:

張貼留言

2020年2月6日星期四