js常用的处理数组的方法

1. `push()`：向数组末尾添加一个或多个元素，并返回数组的新长度，会改变原数组：

const arr=[1,2,3,4,5]
const b=arr.push(7)
console.log(b)  // 输出：6
console.log(arr)  // 输出：[1, 2, 3, 4, 5, 7]

const arr=[1,2,3,4,5]
const b=arr.push(0,9,8)
console.log(b)  // 输出：8
console.log(arr)  // 输出：[1, 2, 3, 4, 5, 0, 9, 8]

2. `pop()`：删除数组的最后一个元素，并返回删除的元素，会改变原数组：

const arr=[1,2,3,4,5]
const b=arr.pop()
console.log(b)  // 输出：5
console.log(arr)  // 输出：[1, 2, 3, 4]

3. `shift()`：删除数组的第一个元素，并返回删除的元素，会改变原数组：

const arr=[1,2,3,4,5]
const b=arr.shift()
console.log(b)  // 输出：1
console.log(arr)  // 输出：[2, 3, 4, 5]

4. `unshift()`：向数组的开头添加一个或多个元素，并返回数组的新长度，会改变原数组：

const arr=[1,2,3,4,5]
const b=arr.unshift(7)
console.log(b)  // 输出：6
console.log(arr)  // 输出：[7, 1, 2, 3, 4, 5]

const arr=[1,2,3,4,5]
const b=arr.unshift(7,8,9)
console.log(b)  // 输出：8
console.log(arr)  // 输出：[7, 8, 9, 1, 2, 3, 4, 5]

5. `splice()`：从数组中删除、替换或添加元素，会改变原数组。

        splice()方法的语法如下：

        array.splice(start, deleteCount, item1, item2, item3, ... )

        参数解释如下：

        - start：必需。指定修改的起始索引位置。如果值为负数，则从数组末尾开始计数。如果超出数组的长度，则从末尾添加新的元素。
        - deleteCount：可选。指定要删除的元素个数。如果省略，splice()将删除从start到数组末尾的所有元素。
        - item1, item2, item3, ...：可选。指定要插入到数组中的元素(可以插入一个或多个)。如果没有指定任何元素，则splice()只执行删除操作。

        splice()方法的用法示例：

        1. 删除元素

const fruits = ["apple", "banana", "orange", "kiwi"];
const a = fruits.splice(2, 1); // 从索引位置2开始删除一个元素
console.log(a); // 输出：['orange']
console.log(fruits); // 输出：['apple', 'banana', 'kiwi']

        2. 添加或插入元素

const fruits = ["apple", "banana", "orange", "kiwi"];
const a = fruits.splice(1, 0, 'lanMei'); // 从索引位置1开始添加或插入一个元素：'lanMei'
console.log(a); // 输出：[]
console.log(fruits); // 输出：["apple", 'lanMei', "banana", "orange", "kiwi"]

        3. 替换元素

const fruits = ["apple", "banana", "orange", "kiwi"];
const a = fruits.splice(2, 1, 'lanMei'); // 从索引位置2开始删除一个元素，并插入一个元素：'lanMei'
console.log(a); // 输出：['orange']
console.log(fruits); // 输出：['apple', 'banana', 'lanMei', 'kiwi']

6. `concat()`：连接两个或多个数组，并返回一个新数组，不会改变原数组。 

console.log([].concat([3],[5],[1])); // 输出：[3, 5, 1]
console.log([].concat([[1],[6],[3]])); // 输出：[[1], [6], [3]]
console.log([].concat(4,[[8,9],[7]])); // 输出：[4, [8, 9], [7]]

const fruits = ["apple", "banana", "orange", "kiwi"];
const num = [1, 2, 6, 5];
const newArr = fruits.concat(num); // concat方法连接fruits 、num两个数组后，fruits、num两个数组的数据不变，同时会返回一个新的数组。
console.log(fruits); // 输出：['apple', 'banana', 'lanMei', 'kiwi']
console.log(num); // 输出：[1, 2, 6, 5]
console.log(newArr); // 输出：['apple', 'banana', 'lanMei', 'kiwi', 1, 2, 6, 5]

注：需要进行多次的数组合并时，会造成很大的内存浪费，如果是数据量比较小的时候，还可以勉强用 

7. `slice()`：从数组中选取一个或多个元素，并返回一个新数组。

        语法：arrayObject.slice(start,end)

        其中，start必需，表示从何处开始选取，如果是负数，则表示从数组尾部开始算起的位置，即：-1就是最后一个元素，-2就是倒数第二个元素，以此类推。

        end可选，表示从何处结束选取，如果没有指定，则表示选取从开始位置到数组的结尾处的所有元素，如果为负值，则表示从数组尾部开始算起的元素。

        用法：

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.slice(0)) //输出：[1, 2, 3, 4, 5, 6]
console.log(arr.slice(2)) //输出：[3, 4, 5, 6]
console.log(arr.slice(-1)) //输出：[6]
console.log(arr.slice(-2)) //输出：[5, 6]
console.log(arr) //输出：[1, 2, 3, 4, 5, 6]

const arr = [1,2,3,4,5,6]
const newArr = arr.slice(1,3)
console.log(arr) //输出：[1, 2, 3, 4, 5, 6]
console.log(newArr) //输出：[2, 3]

const arr = [1,2,3,4,5,6]
const newArr = arr.slice(1,-2)
console.log(arr) //输出：[1, 2, 3, 4, 5, 6]
console.log(newArr) //输出：[2, 3, 4]

const arr = [1,2,3,4,5,6]
const newArr = arr.slice(-4,-2)
console.log(arr) //输出：[1, 2, 3, 4, 5, 6]
console.log(newArr) //输出：[3, 4]

 总结：slice选取元素时，包含开始位置的元素，不包含结束位置的元素

8. `indexOf()`：搜索数组中指定元素的索引值，即：返回注定元素在数组中的位置索引。

        语法：arrayObject.indexOf(item,start)

        其中，item 必须，指要查找的元素，start可选，如果指定start，则表示从start开始的位置进行查找，如果没有指定start，则表示在整个数组中进行查找

        如果在数组中找到 item ，则返回 item 在数组中第一次出现的位置索引，如果没找到 item，则返回 -1。

const arrs= ["123", "545", "343", "765","999"]
console.log(arrs.indexOf('545')) //输出：1
console.log(arrs.indexOf('666')) //输出：-1
console.log(arrs.indexOf('545',2)) //输出：-1
console.log(arrs.indexOf('545',-3)) //输出：-1
console.log(arrs.indexOf('545',-4)) //输出：1

9. `lastIndexOf()`：反向搜索数组中指定元素的索引值。

        lastIndexOf() 和 indexOf() 相反，lastIndexOf()用于查找指定元素在数组中最后一次出现的位置索引。

        语法：arrayObject.lastIndexOf(item,end)

        其中，item 必须，指要查找的元素，end可选，如果指定end，则表示从数组的开头到end结束的位置进行查找，如果没有指定end，则表示在整个数组中进行查找

        如果在数组中找到 item ，则返回 item 在数组中第一次出现的位置索引，如果没找到 item，则返回 -1。

const arrs= ["123", "545", "343", "545", "765","999"]
console.log(arrs.lastIndexOf('545')) //输出：3
console.log(arrs.lastIndexOf('666')) //输出：-1
console.log(arrs.lastIndexOf('545',2)) //输出：1
console.log(arrs.lastIndexOf('545',-3)) //输出：3
console.log(arrs.lastIndexOf('545',-4)) //输出：1
console.log(arrs.lastIndexOf('545',-6)) //输出：-1

10. filter 过滤器，遍历数组并返回符合条件的新数组，新数组中的元素为原数组中符合条件的元素，不会改变原数组：

const arr = [1, 2, 3, 4, 5, 6]
const newArr = arr.filter(item => item % 2 === 0)
console.log(arr) // 输出：[1, 2, 3, 4, 5, 6]
console.log(newArr) // 输出：[2, 4, 6]

11. map 遍历数组并返回处理后的新数组，新数组中的元素为原数组元素调用函数处理的后值，不会改变原数组：

const arr = [1, 2, 3, 4, 5, 6]
const newArr = arr.map(item => item * 2)
console.log(arr) // 输出：[1, 2, 3, 4, 5, 6]
console.log(newArr) // 输出：[2, 4, 6, 8, 10, 12]

const list = [{ a: 1, b: 2 }, { a: 3, b: 4 }]
const newList = list.map(item => {
  return {
    ...item,
    a: item.a * 6
  }
})
console.log(list) // 输出：[{ a: 1, b: 2 }, { a: 3, b: 4 }]
console.log(newList) // 输出：[{ a: 6, b: 2 }, { a: 18, b: 4 }]

12. `reduce()`：从左到右对数组中的元素进行累计操作，并返回一个结果。 

        数组所有元素求和：

var arr = [1,2,3,4];
var value = arr.reduce((pre, cur) => {
  return pre + cur;
}, 0);     
console.log(value);// 输出：10

      list的key值求和：

var arr = [{ x: 4 }, { x: 2 }, { x: 3 }]; 
var value = arr.reduce((pre, cur) => {
  return pre + cur.x;
}, 0);    
console.log(value);// 输出：9

      将二维数组转为一维数组：

var arr = [
 [6, 1],
 [8, 3],
 [2, 5],
]; 
var value = arr.reduce((pre, cur) => {
 return pre.concat(cur);
}, []);
console.log(value); // 输出：[6, 1, 8, 3, 2, 5]

        数组去重： 

var arr = [null, false, 6, 2, 8, 2, 2, 8, 9, null, 0, false, true];
var value = arr.reduce((pre, cur) => {
 return pre.includes(cur) ? pre : pre.concat(cur);
}, []);
console.log(value);//[null, false, 6, 2, 8, 9, 0, true]

13. forEach 对数组进行遍历，没有返回值，会改变原数组：（实际开发中，用 forEach 处理数据需考虑原数组改变是否会对其他地方造成影响）

const list = [{ a: 1, b: 2 }, { a: 3, b: 4 }]
list.forEach(item => {
  item.a = item.a*2
})
console.log(list) // 输出：[{ a: 2, b: 2 }, { a: 6, b: 4 }]