使用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