《JavaScript 数组操作及高阶函数详解》一、改变原数组 1. push(添加的元素) 在数组的最后一位添加元素

一、改变原数组

1. push(添加的元素)

在数组的最后一位添加元素返回新数组的长度

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

2. unshift(添加的元素)

在数组的第一位添加元素返回新数组的长度

   let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    let unshift = arr.unshift('unshift')
    console.log(arr, 'arr') // ['unshift', 1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10] 'arr'
    console.log(unshift, 'unshift')//12

3. pop()

删除最后一位 返回该元素

    let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    let pop = arr.pop()
    console.log(arr, 'arr') // [1, 2, 3, 4, 10, 5, 6, 7, 8, 9] 'arr'
    console.log(pop, 'pop')// 10

4. shift()

删除第一位 返回该元素

    let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    const shift = arr.shift()
    console.log(shift, 'shift')//1 'shift'
    console.log(arr, 'arr')//[2, 3, 4, 10, 5, 6, 7, 8, 9, 10] 'arr'

5. reveres()

翻转数组返回翻转后的数组

    let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    const revers = arr.reverse()
    console.log(revers, 'revers')// [10, 9, 8, 7, 6, 5, 10, 4, 3, 2, 1] 'revers'
    console.log(arr, 'arr') // [10, 9, 8, 7, 6, 5, 10, 4, 3, 2, 1] 'arr'

6. sort()

将数组中的(数子或者字母)进行升序或者降序排列
注：返回升序 || 降序的数组

   let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    // #升序
    const sort = arr.sort((a, b) => {
        return a - b
    }) 
    console.log(sort, 'sort')//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10] 'sort'
    console.log(arr, 'arr')//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10] 'sort'
    // #降序
    const sort1 = arr.sort((a, b) => {
        return b - a
    })
    console.log(sort1, 'sort') // [10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1] 'sort'
    console.log(arr, 'arr') // [10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1] 'sort'

7. splice()

向数组中删除、插入或者替换元素
删除：splice(从第几个下标开始，删除几个)

#删除
    let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    const splice = arr.splice(2, 3) //从下标为2 开始删除三个元素
    console.log(splice, 'splice') // [3, 4, 10] 'splice'
    console.log(arr, 'arr') //[1, 2, 5, 6, 7, 8, 9, 10] 'arr'
#插入

插入、替换：splice(从第几个下标开始，删除几个,添加几个)

   let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    const splice = arr.splice(2, 2, '下标为2开始删除2个', '添加两个')
    console.log(splice, 'splice') //[3, 4] 'splice'
    console.log(arr, 'arr') //[1, 2, '下标为2开始删除2个', '添加两个', 10, 5, 6, 7, 8, 9, 10] 'arr'

二、不改变原数组

1. indexOf(要查找的元素 ,开始查找的索引)

从头到尾查找，找到了返回该元素的索引没找到该元素则返回 -1

  let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    let indexof= arr.indexOf(10)
    console.log(indexof,'indexof') //4

2. lastIndexOf(要查找的元素 ,开始查找的索引)

从后往前查找，找到了返回该元素的索引没找到该元素则返回 -1

   let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    let lastIndexOf=arr.lastIndexOf(10)
    console.log(lastIndexOf,'lastIndexOf') //10

3. concat()

将两个数组合并

 let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
    let arr2 = [11, 22, 33, 44]
    const arr3 = arr.concat(arr2) // [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10,11, 22, 33, 44]'合并后的数组'
    console.log(arr3, '合并后的数组')

4. join()

将数组转为字符串

let arr = [1, 2, 3, 4, 10, 5, 6, 7, 8, 9, 10]
     const result = arr.join('')
     console.log(result,'result')//1234105678910 result

5. JSON.parse()

用于将JSON格式转换为javascript对象
JSON.parse(JSON.stringify(arry)) 这种⽅式会重新复制⼀个数组，也是实现深拷贝的⼀种⽅式，但不会拷贝undefined

6. JSON.stringify()

用于将javascript对象转换为JSON格式

7. slice(start,end)

slice()方法用于从数组或字符串中提取一部分元素或字符，并返回一个新的数组或字符串

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 3); // [2, 3]
console.log(newArr);

8. Array.from()

用于将类数组对象（如 arguments 对象、DOM 节点集合等）或可迭代对象（如 Set、Map 等）转换为数组

// 使用 Array.from() 将类数组对象转换为数组
const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

const newArray = Array.from(arrayLike);
console.log(newArray); // 输出：['a', 'b', 'c']

// 使用 Array.from() 将 Set 转换为数组
const set = new Set(['a', 'b', 'c']);
const newArrayFromSet = Array.from(set);
console.log(newArrayFromSet); // 输出：['a', 'b', 'c']

// 使用 Array.from() 将 Map 转换为数组
const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
const newArrayFromMap = Array.from(map);
console.log(newArrayFromMap); // 输出：[['a', 1], ['b', 2], ['c', 3]]

9. ...

扩展运算符， 用于将数组或对象的元素展开到另一个数组或对象中。它使用三个点（...）表示

//数组扩展：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

//对象扩展：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

函数参数扩展：
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

10. concat()

方法用于将两个或多个数组合并成一个新数组。它不会改变原始数组，而是返回一个新数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]

注：
concat()方法和扩展运算符在合并数组时有相似之处，但它们并不完全相同。以下是具体分析：

concat() 方法：是Array原型上的一个方法，它可以接受多个数组或值作为参数，并将它们合并成一个新的数组。这个方法不会改变原数组，而是返回一个新的数组包含所有参数元素。
扩展运算符：是一种简洁的语法，用于将一个数组或对象的元素展开到另一个数组或对象中。使用扩展运算符时，它会将数组或对象的元素分解开来，然后再进行合并。

11. map()

创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果

// 将每个数字乘以 2
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

12. filter()

创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

const numbers = [1, 2, 3, 4, 5];

// 保留数组中的偶数
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

13. reduce()

对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

const numbers = [1, 2, 3, 4, 5];

// 求和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 15 (1 + 2 + 3 + 4 + 5)

14. Object.assign()

方法用于将一个或多个源对象的属性复制到目标对象。如果多个源对象具有相同的属性，则后续对象的属性将覆盖前面对象的属性。

// 目标对象
const target = { a: 1, b: 2 };

// 源对象1
const source1 = { b: 3, c: 4 };

// 源对象2
const source2 = { c: 5, d: 6 };

// 将源对象的属性复制到目标对象
const result = Object.assign(target, source1, source2);

console.log(result); // 输出: { a: 1, b: 3, c: 5, d: 6 }
console.log(target); // 输出: { a: 1, b: 3, c: 5, d: 6 }

// 注意，目标对象被修改了，且返回的值是目标对象的引用
console.log(result === target); // 输出: true

后续会更Es6以及lodash 常用方法让数据处理不再是问题