使用JavaScript實現ES數組的常見操作

一、創建數組

在JavaScript中，通過[]或Array()函數可以創建一個新的數組。如果想要定長的空數組，可以使用new Array(length)來創建。

let arr1 = []; //空數組
let arr2 = Array(); //空數組
let arr3 = new Array(3); //長度為3的空數組
console.log(arr1); // []
console.log(arr2); // []
console.log(arr3); // [undefined, undefined, undefined]

如果想要指定數組中的元素，可以直接使用數組字面量或者在Array()函數中傳入元素。

let arr4 = ['apple', 'banana', 'orange']; //包含3個元素的數組
let arr5 = Array('dog', 'cat', 'fish'); //包含3個元素的數組
console.log(arr4); // ["apple", "banana", "orange"]
console.log(arr5); // ["dog", "cat", "fish"]

二、遍曆數組

遍曆數組是常見的操作之一，可以使用for循環或者foreach函數。for循環可以通過下標來訪問數組元素，而foreach函數則可以直接訪問每個元素。

let arr = ['apple', 'banana', 'orange'];
//使用for循環遍曆數組
for(let i=0; i<arr.length; i++){
  console.log(arr[i]);
}
//使用foreach函數遍曆數組
arr.forEach(function(item) {
  console.log(item);
})

三、添加/刪除元素

1. push/pop

push方法可以向數組尾部添加一個或多個元素，同時修改原數組；pop方法可以刪除數組尾部的元素並返回刪除的元素。這兩個方法都可以方便地處理棧。

let arr = ['apple', 'banana', 'orange'];
arr.push('grape'); //返回新數組長度
console.log(arr); // ["apple", "banana", "orange", "grape"]
let lastItem = arr.pop(); //返回刪除的元素
console.log(lastItem); // "grape"
console.log(arr); // ["apple", "banana", "orange"]

2. unshift/shift

unshift方法可以向數組頭部添加一個或多個元素，同時修改原數組；shift方法可以刪除數組頭部的元素並返回刪除的元素。這兩個方法都可以方便地處理隊列。

let arr = ['apple', 'banana', 'orange'];
arr.unshift('grape'); //返回新數組長度
console.log(arr); // ["grape", "apple", "banana", "orange"]
let firstItem = arr.shift(); //返回刪除的元素
console.log(firstItem); // "grape"
console.log(arr); // ["apple", "banana", "orange"]

3. splice

splice方法可以在指定的位置添加/刪除元素。可以通過splice(index, count, item1, item2…)來在index處刪除count個元素，並添加item1, item2…。如果只是想刪除元素，則可以使用splice(index, count)。

let arr = ['apple', 'banana', 'orange'];
arr.splice(1, 1, 'grape', 'kiwi'); //在index=1處刪除1個元素，然後添加兩個元素
console.log(arr); // ["apple", "grape", "kiwi", "orange"]
arr.splice(2, 1); //在index=2處刪除1個元素
console.log(arr); // ["apple", "grape", "orange"]

四、轉換數組

1. join/split

join方法可以將數組中的元素以指定的分隔符連接成字元串，split方法可以將字元串按照指定的分隔符切分成數組。

let arr = ['apple', 'banana', 'orange'];
let joinStr = arr.join(', '); //使用指定的分隔符連接數組元素
console.log(joinStr); // "apple, banana, orange"
let splitArr = joinStr.split(', '); //使用指定的分隔符切分字元串為數組
console.log(splitArr); // ["apple", "banana", "orange"]

2. map/filter/reduce

這三個函數是用於遍曆數組並操作每個元素的常見函數之一。map函數可以根據指定的函數對數組中的每個元素進行操作並返回操作後的數組；filter函數可以根據指定的函數對數組中的元素進行篩選返回符合條件的元素集合；reduce函數可以根據指定的函數對數組中的元素進行累積計算，並返回計算結果。

let arr = [1, 2, 3, 4, 5];
let mapArr = arr.map(function(item){
  return item*2;
});//對數組中的每個元素進行操作
console.log(mapArr); // [2, 4, 6, 8, 10]
let filterArr = arr.filter(function(item){
  return item%2==0;
});//篩選出數組中符合條件的元素
console.log(filterArr); // [2, 4]
let reduceSum = arr.reduce(function(total, item){
  return total + item;
});//對數組中的元素進行累積計算
console.log(reduceSum); // 15

五、排序/查找元素

1. sort/reverse

sort函數可以根據指定的排序規則對數組中的元素進行排序，默認是按照unicode編碼進行排序；reverse函數可以將數組中的元素反轉。

let arr = ['c', 'a', 'd', 'b'];
arr.sort(); //按照unicode編碼進行排序
console.log(arr); // ["a", "b", "c", "d"]
arr.reverse(); //反轉數組
console.log(arr); // ["d", "c", "b", "a"]

2. indexOf/lastIndexOf

indexOf函數可以返回指定元素在數組中的索引值，lastIndexOf函數可以返回從末尾開始的第一個指定元素在數組中的索引值。如果數組中不存在該元素，則返回-1。

let arr = ['apple', 'banana', 'orange', 'apple'];
let index1 = arr.indexOf('apple'); //返回元素在數組中的索引值
console.log(index1); // 0
let index2 = arr.lastIndexOf('apple'); //返回倒數第一個元素在數組中的索引值
console.log(index2); // 3
let index3 = arr.indexOf('grape'); //元素不存在，返回-1
console.log(index3); // -1

3. includes

includes函數可以判斷指定元素是否存在於數組中，並返回布爾值。

let arr = ['apple', 'banana', 'orange'];
let isInclude = arr.includes('apple'); //判斷元素是否存在於數組中
console.log(isInclude); // true
let isInclude2 = arr.includes('grape');
console.log(isInclude2); // false