数组的方法（改变原数组和不改变原数组）_数组改变原数组的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/bbbyyr/article/details/142853594

1、改变原数组

文章参考csdn博主（很牛）：

(1)删除元素(返回值都是被删除的元素)：pop（删除最后一个）、shift(删除第一个)

const arr=['a','b','c','d','e']

//均以arr为例
console.log(arr.pop()) //'e'
console.log(arr.shift())//'a'

(2)添加元素（返回值都是数组长度）：push（在数组尾部添加）、unshift（在数组头部添加）

const arr=['a','b','c','d','e']
console.log(arr.push('abc')) //6
console.log(arr.unshift('abc'))//6

(3)排序、反转方法（返回值都是数组）：sort、reverse

const arr1=[1,5,11,19,20,21,6]
console.log(arr1.sort())

const arr=['a','b','c','d','e']
console.log(arr.reverse())//['e', 'd', 'c', 'b', 'a']

(4)操作数组：splice

——返回一个数组，包含从数组中被删除的元素（如果没有删除元素，则返回空数组）

const arr=['a','b','c','d','e']
console.log(arr.splice(1,1)) //['b']
console.log(arr.splice(0,2,1,2,2)) //['a', 'b'] 此时的arr[1, 2, 2, 'c', 'd', 'e']
console.log(arr.splice(1,0)) //[] 没有删除元素

(5)复制(返回值就是复制后的新数组):copyWithin、fill

——copyWithin

——fill（它主要用于将数组指定区间内的元素替换为某个值）：arr.fill(value, start[, end = this.length])

value：是要替换为的元素值，start是开始位置的索引，end是结束位置的索引

const arr=['a','b','c','d','e']
//复制索引2~3(包括2不包括3)位置上的元素，其实就是复制索引2位置的元素3，插入到索引为1的位置。
console.log(arr.copyWithin(1,2,3))// ['a', 'c', 'd', 'd', 'e']
//将索引2～4位置的元素全部替换为1
console.log(arr.fill(1，2，4)) //['a', 'b', 1, 1, 'e']
console.log(arr.fill(1)) //[1, 1, 1, 1, 1]
console.log(arr.fill(1,3))//['a', 'b', 'c', 1, 1]

2、不改变原数组

参考文章（很厉害的）：

JS：33种原生JS数组方法（8种改变原数组方法，25种不涉及数组改变的方法）_js数组方法改变原数组-优快云博客

常见：map、forEach、concat、join、slice、filter、some、every、includes、find、findLast、indexOf、lastIndexOf、from、of、toReversed、toSorted、with等

（1）遍历数组 map、forEach、filter

map(返回新数组)：对数组每个元素进行调用

forEach（无返回值）：遍历数组中每个元素并执行一次提供的操作

filter(返回符合条件的新数组)：筛选出符合条件的元素

let arr = [1, 2, 3];
  console.log(arr.map((x) => x * 5)); //[5, 10, 15]
  console.log(arr); // [1, 2, 3]

let arr = [1, 2, 3, 4, 5];
//无返回值，使用console.log输出
  arr.forEach(
      (item) => console.log(item + 1) // 2 3 4 5 6
  );
console.log(arr); // [1, 2, 3, 4, 5]

let arr = [1, 2, 3, 4, 5];
      console.log(arr.filter((x) => x > 3));//[3，4, 5]
      console.log(arr.filter((x) => x > 6));//[]
      console.log(arr);//[1, 2, 3, 4, 5]

（2）查找元素 find、findLast、indexOf、lastIndexOf、findIndex

find、findLast：找到数组中第一个（最后一个）符合提供条件的元素,没有返回undefined

findIndex:查找数组中第一个满足提供的测试函数条件的元素的索引

indexOf、lastIndexOf:查找数组中指定元素的第一个（或最后一个）出现的索引位置。如果没有找到则返回-1

//输出找到的值
let arr = [1, 2, 3];
      console.log(arr.find((x) => x > 1)); // 2
      console.log(arr.find((x) => x > 4)); // undefined
      console.log(arr); // [1, 2, 3]
let arr = [1, 2, 3];
      console.log(arr.findLast((x) => x > 1)); // 3 
      console.log(arr.findLast((x) => x > 3)); // undefined
      console.log(arr); // [1, 2, 3]
//输出索引号
 let arr = [1, 2, 3];
      console.log(arr.findIndex((x) => x === 3)); // 输出：2
      console.log(arr); // 输出：[1, 2, 3]

let arr = [1, 2, 3, 2];
      console.log(arr.indexOf(2)); // 输出：1
      console.log(arr.lastIndexOf(2)); // 输出：3
      console.log(arr); // 输出：[1, 2, 3, 2]

(3)数组中是否包含某个值some、every、includes (返回值true、false)，at（读到的元素）

some:检查数组中是否有至少一个元素满足提供的条件

every:检查数组中是否所有元素都满足提供的条件

includes:用来判断一个数组是否包含一个指定的值

at:通过索引直接读取数组元素

let arr = [1, 2, 3];
      console.log(arr.some((x) => x > 2)); // true
      console.log(arr.some((x) => x > 3)); // false
      console.log(arr); // [1, 2, 3]

let arr = [1, 2, 3];
      console.log(arr.every((x) => x > 0)); // true
      console.log(arr.every((x) => x > 2)); // false
      console.log(arr); // [1, 2, 3]

let arr = [1, 2, 3, NaN];
      console.log(arr.includes(1)); // true
      console.log(arr.includes(4)); // false
      console.log(arr.includes(NaN)); // true
      console.log(arr); // [1, 2, 3,NaN]

let myArray = ["apple", "banana", "cherry"];
      console.log(myArray.at(0)); // 输出："apple"
      console.log(myArray.at(-1)); // 输出："cherry"

（4）与改变原数组中作用相同但不改变原数组的方法toSpliced（操作数组）、toReversed（反转）、toSorted（排序）

返回值都是新数组

（5）将数组转换为字符串（返回字符串） jion、toString、toLocaleString

let arr = [1, 2, 3];
      console.log(arr.join(",")); //1,2,3

let arr = new Date();
      console.log(arr.toLocaleString()); // 输出："2024/3/13 15:36:59"
      console.log(arr.toString()); // 输出："Wed Mar 13 2024 15:36:59 GMT+0800 (中国标准时间)"
      let arr2 = [1, 2, 3];
      console.log(arr2.toString()); // 输出："1,2,3"
      console.log(arr2.toLocaleString()); // 输出："1,2,3"

（6）slice:提取某个范围内的数组元素，返回值是一个包含提取的元素的新数组

let arr = [1, 2, 3, 4, 5];
//arr.slice(1, 4)提取的元素从下标1开始，包含下标1。从下标4结束，不包含下标4
      console.log(arr.slice(1, 4)); //[2, 3, 4]
      console.log(arr); //[1, 2, 3, 4, 5]

(7)from、of

Array.from()：可以从类数组对象或可迭代对象创建一个新的数组。

Array.of()：用于创建一个具有可变数量参数的新数组。

返回：创建的新数组

console.log(Array.from("foo")); // 输出：['f', 'o', 'o']
console.log(Array.of(1, 2, 3)); // 输出：[1, 2, 3]

(8)with:替换数组中的元素（返回替换元素后的新数组）

let arr = [1, 2, 3, 4, 5];
//用10来替换索引号为1的元素
      let newArr = arr.with(1,10);
      console.log(arr); // [1, 2, 3, 4, 5]
      console.log(newArr); //[1, 10, 3, 4, 5]

let arr = [1, 2, 3, 4, 5];
      let newArr = arr.with(1,10);
      console.log(arr); // [1, 2, 3, 4, 5]
      console.log(newArr); //[1, 10, 3, 4, 5]