JavaScipt 陣列方法的 20 道陰影

本文為普遍級,適合闔家觀賞。

JavaScript 陣列方法

無論哪一個程式語言,處理資料的時候難免會碰到陣列,對陣列方法不熟悉的初學者,很容易陷入焦慮,因此,有效掌握陣列方法,絕對事半功倍!

我在網路上看到有許多前輩整理陣列方法的文章,也決定自己寫一篇,作為未來方便查找的紀錄。

下面引用了 tooto1985 畫的圖,整合了常見的 JS 陣列方法,讓人印象深刻。

操作陣列的20種方法

以下就逐一介紹 JavaScript 中常見的陣列方法(Array Methods),主要聚焦說明方法功能、語法參數以及簡單範例。


concat()

功能:合併兩個以上的陣列。
語法:concat(Array)
範例:

1
2
3
4
var Array = ['a', 'b', 'c'] ;
var ArrayConcat = [1, 3, 5, 7, 9] ;

console.log(Array.concat(ArrayConcat));


push()

功能:在陣列尾端增加多個值。
語法:push(Value1, Value2...)
補充:

  • 若增加的是物件,必須注意傳參考特性
    範例:
    1
    2
    3
    4
    var Array = ['a', 'b', 'c'] ;

    Array.push('c',777, ['55', 66], {name: 'Fei'});
    console.log(Array) ;

pop()

功能:移除陣列最後一個值。
語法:pop()
範例:

1
2
var Array = ['a', 'b', 'c'] ;
console.log(Array.pop());


shift()

功能:移除陣列第一個值。
語法:shift()
範例:

1
2
var Array = ['a', 'b', 'c'] ;
console.log(Array.shift());


unshift()

功能:在陣列前端新增多個值。
語法:unshift(Value1, Value2...)
範例:

1
2
3
4
var Array = ['a', 'b', 'c'] ;

Array.unshift('c',777, ['55', 66], {name: 'Fei'});
console.log(Array) ;


splice()

功能:刪除陣列裡的數個值(並同時在該區段中插入數值)。
語法:splice(startIndex, deleteNum, valueAdd...)
範例:

1
2
3
4
var Array = ['x', 'y', 'z', 55 ,66] ;

Array.splice(0, 3, 1314, '520');
console.log(Array) ;


slice()

功能:擷取陣列的某一個區段。
語法:slice(startIndex, endIndex)

  • startIndex:從哪個索引值的值開始擷取
  • endIndex:從哪個索引值的值開始不擷取(即不會擷取到 endIndex 的值

補充:

  • 可用於字串(String)。

範例:

1
2
3
4
5
6
var Array = ['Fei', 'Bai', 'Han', 'Chu', 'Bubu'] ;
var Str = 'Ed Sheeran' ;

console.log(Array.slice(1,4));
console.log(Str.slice(0,2));
console.log(Str.slice(3));


join()

功能:將陣列所有值透過 Separator 串成一個字串後回傳。
語法:join(separatorString)
範例:

1
2
3
4
5
6
var Array = [55, 66, '520'] ;

console.log(Array.join()); // 預設為 ,
console.log(Array.join(''));
console.log(Array.join(' '));
console.log(Array.join('-'));


forEach()

功能:將陣列裡的每個值逐一傳入給定的函式執行。(不會產生新的陣列
語法:forEach(function(Value, Index, Array){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值
  • Index:目前被函式處理的值的索引值
  • Array:陣列本身

範例:

1
2
3
4
5
6
var Array = [1, 3, 5, 7, 99] ;

Array.forEach(function(item, index){
console.log(item * index) ;
});
console.log(Array) ;


map()

功能:將陣列裡的每個值逐一傳入給定的函式,執行後回傳。(產生新的陣列
語法:map(function(Value, Index, Array){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值
  • Index:目前被函式處理的值的索引值
  • Array:陣列本身

範例:

1
2
3
4
5
6
7
8
9
10
var Array = [1, 3, 5, 7, 99] ;

ArrayNew = Array.map(function(item){
return item * item ;
});

// ES6 箭頭函式簡化
// ArrayNew = Array.map(item => item * item);

console.log(Array, ArrayNew) ;


filter()

功能:將陣列裡的每個值逐一傳入給定的函式進行過濾,回傳符合條件的值。(產生新的陣列
語法:filter(function(Value, Index, Array){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值
  • Index:目前被函式處理的值的索引值
  • Array:陣列本身

範例:

1
2
3
4
5
var Array = [1984, 3, 55, 777, 99, 123] ;

var filteredArr = Array.filter(value => value > 100);

console.log(filteredArr) ;


reduce()

功能:將陣列裡的每一個數值加總後回傳。(產生新的陣列
語法:reduce(function(Accumulator, currentValue){ ... })

  • function(){...}:給定的函式
  • Accumulator:目前累加的數值
  • currentValue:目前被處理的數值

範例:

1
2
3
4
5
var Array = [1, 3, 5, 7, 99] ;

totalNum = Array.reduce((prev, next) => prev + next);

console.log(totalNum) ;


sort()

功能:對陣列內的數值進行排列。(不會產生新的陣列
排列方法:將數值轉化為字串(String),並根據字元的 Unicode 進行排序。
語法:sort()
範例:

1
2
3
4
5
6
7
var Array1 = [1984, 3, 55, 777, 99, 123] ;
var Array2 = ['Nov', 'Oct', 'Apr', 'May', 'Jul'] ;
var Array3 = [5, 6, 3, 1, 9, 10] ;

console.log(Array1.sort()) ;
console.log(Array2.sort()) ;
console.log(Array3.sort()) ;


reverse()

功能:將陣列數值順序反轉。
語法:reverse()
範例:

1
2
3
4
5
var Array1 = [1984, 3, 55, 777, 99, 123] ;
var Array2 = ['Nov', 'Oct', 'Apr', 'May', 'Jul'] ;

console.log(Array1.reverse()) ;
console.log(Array2.reverse()) ;


find()

功能:將陣列裡的每個值逐一傳入給定的函式進行篩選,回傳第一個符合條件的值
語法:find(function(Value, Index, Array){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值
  • Index:目前被函式處理的值的索引值
  • Array:陣列本身

範例:

1
2
3
4
5
var Array = [1984, 3, 55, 777, 99, 123] ;

var foundValue = Array.find(value => value > 100);

console.log(foundValue);


every()

功能:將陣列裡的每個值逐一傳入給定的函式,若所有值都符合條件就回傳 true ,否則回傳 false
語法:every(function(Value){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值

範例:

1
2
3
4
5
var Array = [1984, 3, 55, 777, 99, 123] ;

var result = Array.every(value => value < 1999);

console.log(result);


some()

功能:將陣列裡的每個值逐一傳入給定的函式,若部分值都符合條件就回傳 true ,否則回傳 false
語法:some(function(Value){ ... })

  • function(){...}:給定的函式
  • Value:目前被函式處理的值

範例:

1
2
3
4
5
var Array = [1984, 3, 55, 777, 99, 123] ;

var result = Array.some(value => value < 1999);

console.log(result);


includes()

功能:判斷陣列中是否包含特定的值,是就回傳 true ,否則回傳 false
語法:includes(specificValue)
範例:

1
2
3
4
5
var Array = [1984, 3, 55, 777, 99, 123] ;

var result = Array.includes(5566);

console.log(result);


indexOf()

功能:尋找陣列中符合給定值的索引值,若找不到就回傳 -1
語法:indexOf(specificValue, startIndex)

  • specificValue:給定值
  • startIndex:從哪個索引開始找

補充:

  • startIndex 可以輸入負值(陣列最後一個值為 -1),但仍會由左至右開始找
  • 可用於字串(String)。

範例:

1
2
3
4
5
6
7
8
var Array = ['Fei', 'Bai', 'Han', 'Chu', 'Bubu'] ;
var Str = 'Ed Sheeran' ;

console.log(Array.indexOf('Fei', 2));
console.log(Array.indexOf('Chu', 2));
console.log(Array.indexOf('Bai', -5)); // 1
console.log(Str.indexOf(' ', 1));
console.log(Str.indexOf('e', 1));


for…of

功能:遍歷陣列中的每一個值,與 forEach() 類似。
語法:for(let value of Array){ ... }
補充:

  • 可用於字串(String)。
  • for..in 完全不同, for..in 只能用在物件,用來遍歷其所擁有的 Property Name。

範例:

1
2
3
4
5
6
7
8
9
10
11
12
var Array = ['Fei', 'Bai', 'Han', 'Chu', 'Bubu'] ;
var Str = '1234567890' ;

for (let value of Array) {
value += ' <3' ;
console.log(value);
}

for (let char of Str) {
char += ' !?' ;
console.log(char);
}


小叮嚀

  • 若方法需要給定函式,須注意函式中 this 代指的對象。
  • 若方法會改變陣列資料,如新增或移除,必須注意資料傳值與傳參考特性
  • 若方法會改變陣列資料,必須注意是否變更原始陣列?還是產生一個新的陣列?

參考資料

  1. tooto1985:js-array-operations
  2. Day2-陣列操作常用的20個函式
畫出簡單的 SVG 向量圖形 HTML5 語意標籤

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×