JS中数组22种常用API总结，slice、splice、map、reduce、shift(1)

const firstFruit = fruits.shift();
console.log(fruits); //[ ‘香蕉’, ‘橘子’ ]
console.log(firstFruit); //苹果

unshift() 方法用于向数组的`开头添加`一个或多个元素，并返回修改后的数组的新长度。

const fruits = [‘苹果’, ‘香蕉’];
const newLength = fruits.unshift(‘橘子’, ‘西瓜’);
console.log(fruits); //[ ‘橘子’, ‘西瓜’, ‘苹果’, ‘香蕉’ ]
console.log(newLength); //4

## 四、slice() 方法


slice() 方法用于从数组中截取指定位置的元素，返回一个新的数组。


语法是：`array.slice(start, end)`，其中，`start`和`end`都是可选参数，表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组，包含从`start`到`end`（`不包括end`）的元素。

const names = [‘张三’, ‘李四’, ‘王五’, ‘赵六’];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);

//slice不改变原数组
console.log(names); //[ ‘张三’, ‘李四’, ‘王五’, ‘赵六’ ]
console.log(slicedNames); //[ ‘李四’, ‘王五’ ]
console.log(slicedNames1); //[ ‘张三’, ‘李四’, ‘王五’, ‘赵六’ ]
console.log(slicedNames2); //[ ‘张三’, ‘李四’, ‘王五’, ‘赵六’ ]
console.log(slicedNames3); //[ ‘王五’, ‘赵六’ ]
console.log(slicedNames4); //[ ‘赵六’ ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组

## 五、splice() 方法


splice() 方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组，它会直接修改原数组。


语法：`array.splice(start, deleteCount, item1, item2, ...)`


其中，start表示要修改的起始位置，deleteCount表示要删除的元素个数，item1、item2等表示要添加的元素。如果`deleteCount为0`，则表示只添加元素，不删除元素。

//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2)); //[ 1, 2 ] 返回被删除的元素
console.log(arr); //[ 3, 4, 5 ] 该方法会改变原数组

//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2); //[ 1, 666, 777, 2, 3, 4, 5 ] 原数组改变了

// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,“aaa”,“bbb”)); //[ 3 ] 返回被删除的一个元素
console.log(arr3); //[ 1, 2, ‘aaa’, ‘bbb’, 4, 5 ] 可以添加字符串

let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ] 返回被删除的四个元素
console.log(arr4); //[ 1, 666 ]

## 六、join() 方法


join() 方法用于将数组中的所有元素以指定的分隔符连接成一个`字符串`。

const fruits = [‘苹果’, ‘香蕉’, ‘橘子’];
const joinedString = fruits.join(‘,’);
console.log(fruits); //[ ‘苹果’, ‘香蕉’, ‘橘子’ ]
console.log(joinedString); //苹果,香蕉,橘子

## 七、concat() 方法


concat() 方法用于合并两个或多个数组，返回一个新的数组。

const fruits1 = [‘苹果’, ‘橘子’];
const fruits2 = [‘西瓜’, ‘蓝莓’];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ ‘苹果’, ‘橘子’, ‘西瓜’, ‘蓝莓’ ]

## 八、forEach() 方法


forEach() 方法用于对数组中的每个元素执行一个回调函数。

const fruits = [‘火龙果’, ‘蓝莓’, ‘西瓜’, ‘葡萄’];
fruits.forEach(fruit => {
console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});

## 九、map() 方法


map() 方法用于对数组中的每个元素执行一个回调函数，并返回一个新的数组，新数组中的元素为回调函数的返回值。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

## 十、filter() 方法


filter() 方法用于筛选、过滤数组中符合条件的元素，并返回一个新的数组。

//筛选出偶数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]

## 十一、reduce() 方法


reduce() 方法是数组对象的一个方法，用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。


语法：`array.reduce(callback, initialValue)`


该方法接收两个参数，第一个参数是一个回调函数，第二个参数是一个初始值。回调函数中可以接收四个参数，分别是：


1. accumulator：累加器，用于存储上一次回调函数的返回值或初始值。
2. currentValue：当前元素的值。
3. currentIndex：当前元素的索引。
4. array：数组对象本身。


initialValue是初始值，可选参数。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15

## 十二、fill() 方法


JS中的fill方法可以填充一个数组中的所有元素，它会直接修改原数组。


语法：`array.fill(value, start, end)`


其中，value表示要填充的值，start和end表示要填充的起始位置和结束位置。如果不传入start和end，则默认填充整个数组。该方法返回的是被修改后的原数组。

let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr); //[ 0, 0, 6, 6, 0 ]

## 十三、数组查找API


### 1.includes()方法


includes方法用于检查数组中是否包含某个元素，如果包含则返回 true，否则返回 false。


与 indexOf() 方法不同，includes() 方法不支持指定起始位置，它从数组的开头开始搜索。

const fruits = [‘苹果’, ‘香蕉’, ‘橘子’, ‘西瓜’, 1, 2, 3];
console.log(fruits.includes(‘橘子’)); //true
console.log(fruits.includes(‘葡萄’)); //false
console.log(fruits.includes(3)); //true
console.log(fruits.includes(4)); //false

### 2.indexOf()方法


需要注意的是，indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素，该方法只会返回第一个元素的位置。


此外，indexOf方法还可以接受一个可选的第二个参数，用于指定从哪个位置开始查找。

const fruits = [‘苹果’, ‘蓝莓’, ‘橘子’, ‘西瓜’, ‘葡萄’];
console.log(fruits.indexOf(‘橘子’, 1)); //2 返回元素下标
console.log(fruits.indexOf(‘橘子’, 3)); //-1 没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //9

### 3.lastIndexOf()()方法


lastIndexOf() 方法用于查找数组中某个元素最后一次出现的索引（位置），如果找到则返回该索引值，否则返回 -1。

const fruits = [‘火龙果’, ‘橘子’, ‘蓝莓’, ‘西瓜’, ‘葡萄’, ‘橘子’];
console.log(fruits.lastIndexOf(‘橘子’)); //5
console.log(fruits.lastIndexOf(‘柚子’)); //-1

### 4.findIndex()方法


findIndex() 方法用于查找数组中满足条件的元素的索引，如果找到则返回该索引值，否则返回 -1。

const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index); //3 返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1 不存在符合条件的元素

## 十四、sort() 方法


sort() 方法用于对数组进行原地排序，会直接修改原始数组，而不会创建新的数组。默认情况下，它将数组元素视为字符串，并按照 Unicode 码点进行排序。但是，可以传入自定义的比较函数来实现基于其他规则的排序。


`比较函数`：比较函数接收两个参数，通常被称为 a 和 b，表示进行比较的两个元素。它应该返回一个负数、零或正数，表示 a 应该在 b 之前、与 b 相同位置还是在 b 之后。比较函数的返回值规则如下：


1. 如果返回值小于 0，则 a 排在 b 前面。
2. 如果返回值等于 0，则 a 和 b 的相对位置不变。
3. 如果返回值大于 0，则 a 排在 b 后面。

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】