详解 JavaScript 数组的常用方法与操作

数组的基本操作

增删数组元素

	方法	用途	返回值	是否改变原数组	语法
1	push	添加数组尾部元素	新数组长度length	是	arr.push(元素)
2	pop	删除数组尾部元素	删除的元素element	是	arr.pop()
3	unshift	添加数组头部元素	新数组长度length	是	arr.unshift(元素)
4	shift	删除数组头部元素	删除的元素element	是	arr.shift()

【注意事项】：
push 和 unshift 可以添加一个或者多个元素。

1 push

含义：向数组尾部追加元素

const arr = [1, 5, 9, 7];
const arrPush = arr.push(0,3); // 返回的是长度 因此不能直接在后面.forEach()
console.log("arrPush:", arrPush); // 返回值：6(长度)
console.log("原数组:", arr); // 原数组：[1, 5, 9, 7,0, 3]

2 pop

含义：删除数组尾部最后一个元素

const arr = [1, 5, 9, 7];
const arrPop = arr.pop();
console.log("arrPop:", arrPop); // 返回值：7
console.log("原数组:", arr); // 原数组：[1, 5, 9]

3 unshift

含义：向数组头部添加元素

const arr = [1, 5, 9, 7];
const arrUnshift = arr.unshift(0);
console.log("arrUnshift:", arrUnshift); // 返回值：5(长度)
console.log("原数组:", arr); // 原数组：[0 ,1, 5, 9, 7]

4 shift

含义：删除数组第一个元素

const arr = [1, 5, 9, 7];
const arrShift = arr.shift();
console.log("arrShift:", arrShift); // 返回值：1
console.log( "原数组:", arr2); // 原数组：[5, 9, 7]

其他常用方法

	方法	用途	返回值	是否改变原数组	语法
1	join	数组转为字符串	字符串	否	arr.join(‘符号’) 不传参默认逗号,拼接
2	split	字符串转为数组	数组	–	str.split(‘符号’)
3	includes	判断数组是否包符合条件的元素	布尔值	否	arr.includes(元素,开始索引可选参数)
4	reverse	反转数组	新数组(新数组=原数组)	是	arr.reverse()
5	sort	排序数组（升序降序）	新数组(新数组=原数组)	是	arr.sort((a,b)=>a-b) 升序 若为b-a则为降序
6	concat	拼接数组	新数组	否	arr.concat(数组1/元素,数组2,…)
7	slice	截取数组	截取的元素	否	arr.slice(开始索引,结束索引)
8	splice	截取数组（可实现删除、插入、替换）	截取的元素	是	arr.splice(开始索引,截取个数,替换元素)

1 join

含义：将数组中数据，通过传入的拼接字符，拼接为一个字符串

const arr = [1,2,3];
console.log(arr.join());   // 字符串 "1,2,3"
console.log(arr.join("-"));   // “1-2-3”
console.log('原数组', arr);   // [1, 2, 3]

2 split

含义：将字符串根据传入的字符，进行分割，形成一个数组

let str = "apple,banana,orange";  
let arr = str.split(","); // 使用逗号作为分隔符  
console.log(arr); // ["apple", "banana", "orange"]

3 includes

含义：判断传入的数据 在数组中是否存在

返回值: true 存在 false 不存在

• 接收参数：
  • 参数1：搜索的元素值
  • 参数2：可选参数 从哪个位置开始搜索 默认为0
• 注意事项：
  • 对于 NaN 会返回 true
  • includes方法 区分大小写

let arr = [1, 2, 3, 4, 5];  
console.log(arr.includes(3, 3)); // 输出: false，因为从索引 3 开始搜索，但 3 在索引 2

// 使用 NaN 的示例
// 因为 NaN 与其自身不相等（使用 ===） 
let arr = [1, 2, NaN, 4, 5]; 
console.log(arr.includes(NaN)); // 输出: true，includes 可以正确处理 NaN

4 reverse

含义：翻转转数组中的数据

返回值：翻转后的数组（原数组也会更改）

let arr = [1, 2, 3, 4];
console.log(arr.reverse());  //[4, 3, 2, 1]
console.log(arr);   //[4, 3, 2, 1]  改变原数组

5 sort

含义：将数组中的数据 按位 进行比较 排序

排序顺序：数字或字母，默认为升序。

返回值: 排序后的数组

let people = [ 
    { name: 'John', age: 20 }, 
    { name: 'Jane', age: 18 }, 
    { name: 'Doe', age: 25 } 
]; 
people.sort(function(a, b) { return a.age - b.age; }); // 根据年龄升序排序
console.log(people); 
// 输出 
// [ 
//    { name: 'Jane', age: 18 }, 
//    { name: 'John', age: 20 }, 
//    { name: 'Doe', age: 25 } 
// ]

6 concat

含义：将传入的数据 和原数组中的数据合并为一个新数组

注意事项：如果传入的是数组,则会将数组中的数据 合并到新数组中

返回值: 合并后的新数组

let arr = [1, 3, 5, 7];
let brr = [11, 13]
let arrCopy = arr.concat(brr);
console.log(arrCopy);   // 返回值 [1, 3, 5, 7, 11, 13]
console.log(arr);   // [1, 3, 5, 7] 不改变原数组

7 slice

接收参数：（开始索引，结束索引）

• 只有一个参数：返回从该参数指定位置开始到当前数组末尾的所有元素。
• 有两个参数:返回起始位置和结束位置之间的元素，但不包括结束位置的元素.左闭右开 [开始索引，结束索引）
• 参数为负数：从数组尾部开始算起：-1指最后一个元素，-2 指倒数第二个元素

const arr = ['ant', 'bison', 'camel', 'duck', 'elephant'];
// 1 只有一个参数
console.log(arr.slice(2)); // ["camel", "duck", "elephant"]

// 2 有两个参数
console.log(arr.slice(1, 5)); // ["bison", "camel", "duck", "elephant"]

// 3 参数为负数
console.log(arr.slice(-1)); // ['elephant']
console.log(arr.slice(1, -2)); // ['bison', 'camel']
console.log(arr); // ['ant', 'bison', 'camel', 'duck', 'elephant']  原数组不改变

8 splice

1 删除元素,并返回删除的元素

 let arr = [1, 3, 5, 7, 9, 11];
 let arrRemoved = arr.splice(0, 2);
 console.log(arr);   // 返回值 [5, 7, 9, 11]
 console.log(arrRemoved);   // 返回值 [1, 3]

2 向指定索引处添加元素

let arr = [22, 3, 31, 12];
arr.splice(1, 0, 12, 35);
console.log(arr); // 返回值 [22, 12, 35, 3, 31, 12]

3 替换指定索引位置的元素

 let arr = [22, 3, 31, 12];
 arra.splice(1, 1, 8);
 console.log(arr);  // 返回值 [22, 8, 31, 12]

遍历数组

	方法	用途	返回值	语法
1	forEach	遍历	无返回值 不能return	不能 break 打断 遍历的是 value
2	map	遍历	新数组	不能 break 打断 遍历的是 value
3	every	判断数组的所有元素是否均符合条件	布尔值
4	some	判断数组是否存在符合条件的元素	布尔值
5	filter	筛选数组中符合条件的元素	新数组
6	reduce	计算（累加器）	累加结果	arr.reduce((累加器,元素，元素索引)=>{return 累加器},累加器的初始值)
7	find	查找数组中符合条件的第一个元素	查找到的元素 否则为undefined
8	findIndex	查找数组中符合条件的第一个元素	元素的索引 否则为-1

1 forEach

由于 forEach() 不支持 await（在异步函数中），如果你需要在遍历过程中处理异步操作（如网络请求），你应该考虑使用其他方法，如 for...of 循环配合 async/await，或者使用 Promise.all() 结合 map() 来处理数组中的异步操作。

let numbers = [1, 2, 3, 4, 5];  
// 使用箭头函数  
numbers.forEach(number => console.log(number));  
// 输出:  
// 1  
// 2  
// 3  
// 4  
// 5 

2 map

let numbers = [1, 2, 3, 4, 5];  
// 将每个元素乘以2  
let squared = numbers.map(number => number * number);  
console.log(squared); // 输出: [1, 4, 9, 16, 25]

3 every

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

// 检查数组中是否所有元素都是偶数
let allEven = numbers.every(number => number % 2 === 0);  
console.log(allEven); // 输出: false  

4 some

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

// 检查数组中是否有偶数  
let hasEven = numbers.some(number => number % 2 === 0);  
console.log(hasEven); // 输出: true

5 filter

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = arr.filter((item, index)=> item >= 8);
console.log(arr2);  //[8, 9, 10]

6 reduce

  const result = userList.reduce((sum, obj) => {
    sum += obj.age;
    return sum;
    // return sum + obj.age // 将结果返回到下一次的初始值
  }, 0);
  console.log("reduce-求和", result);

7 find

let numbers = [1, 2, 3, 4, 5];  
  
// 查找第一个偶数  
let foundNumber = numbers.find(number => number % 2 === 0);  
console.log(foundNumber); // 输出: 2

8 findIndex

let numbers = [1, 2, 3, 4, 5];  
  
// 查找第一个偶数  并输出对应索引
let foundIndex = numbers.findIndex(number => number % 2 === 0);  
console.log(foundIndex); // 输出: 1