Web前端最新JavaScript之手撕常用数组高阶函数(1)，2024前端大厂面试真题

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

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

资料截图 ：

高级前端工程师必备资料包

// 回调函数执行为true

if (callbackFn.call(thisArg, _arr[i], i, _arr)) {

res.push(_arr[i]);

}

}

return res;

}

every

---

用法

every并不返回数组，返回布尔值true/false，数组的每个元素执行回调函数，如果执行结果全为true，every返回true，否则返回false。

arr = [1, 3, 5, 7, 8, 9]

// false，8为偶数，不满足

arr.every(ele => ele % 2 == 1)

arr2 = [2, 4, 6]

// true 都是偶数

arr2.every(ele => ele % 2 == 0)

模拟实现

Array.prototype.myEvery = function(callbackFn) {

var _arr = this, thisArg = arguments[1] || window;

// 开始标识值为true

// 遇到回调返回false，直接返回false

// 如果循环执行完毕，意味着所有回调返回值为true，最终结果为true

var flag = true;

for (var i = 0; i<_arr.length; i++) {

// 回调函数执行为false，函数中断

if (!callbackFn.call(thisArg, _arr[i], i, _arr)) {

return false;

}

}

return flag;

}

some

---

用法

some与every功能类似，都是返回布尔值。只要回调函数结果有一个true，some便返回true，否则返回false。

模拟实现

Array.prototype.mySome = function(callbackFn) {

var _arr = this, thisArg = arguments[1] || window;

// 开始标识值为false

// 遇到回调返回true，直接返回true

// 如果循环执行完毕，意味着所有回调返回值为false，最终结果为false

var flag = false;

for (var i = 0; i<_arr.length; i++) {

// 回调函数执行为false，函数中断

if (callbackFn.call(thisArg, _arr[i], i, _arr)) {

return true;

}

}

return flag;

}

find/findIndex

---

用法

find与findIndex是ES6新添加的数组方法，返回满足回调函数的第一个数组元素/数组元素索引。当数组中没有能满足回调函数的元素时，会分别返回undefined和-1。

const users = [

{ name: ‘John’, age: 34 },

{ name: ‘Amy’, age: 20 },

{ name: ‘camperCat’, age: 10 }

];

1. 返回name为John的年龄

在没有find方法时，实现类似效果，需要循环遍历，查找到name=Jonn后，找到年龄。但使用find就可以轻松快捷的实现。

JohnAge = users.find(user => user.name === ‘John’).age

2. 返回name为Amy的索引

ES6以前Array提供了查找数组中元素的方法：indexOf，lastIndexOf，但是这两个方法在查找对象时都无能为力。

// 返回值为-1，说明未查到Amy

users.indexOf({ name: ‘Amy’, age: 20 })

// 返回hi为1，成功查到Amy

users.findIndex(user => user.name === ‘Amy’)

indexOf虽然可以用来查找基本类型的元素索引，但其语义化并不好，每次需要与-1进行比较，因此ES6添加了新的includes方法。

模拟实现

find/findIndex都是寻找到第一个满足回调函数的元素返回，上面我们学习的some也是类似机制，因此它们的原生代码类似。

Array.prototype.myFind = function(callbackFn) {

var _arr = this, thisArg = arguments[1] || window;

// 遇到回调返回true，直接返回该数组元素

// 如果循环执行完毕，意味着所有回调返回值为false，最终结果为undefined

for (var i = 0; i<_arr.length; i++) {

// 回调函数执行为false，函数中断

if (callbackFn.call(thisArg, _arr[i], i, _arr)) {

return _arr[i];

}

}

return undefined;

}

reduce

---

用法

reduce与前面的方法有略微的差别：

arr.reduce(callback(accumulator, currentValue[, index[, array]]){

}[, initialValue])

• callback：对数组元素进行操作的回调函数

• accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue

• currentValue：正在处理的当前元素

• 当前元素的索引

• 调用高阶函数的数组

• initialValue：作为第一次调用函数的初始值。如果没有提供初始值，则使用数组中的第一个元素。

没有初始值的空数组调用reduce会报错

可累加的效果为reduce增添了很多精彩，也产生了很多很有用的用途。

1. 数组累加和

arr = [0, 1, 2, 3, 4]

arr.reduce((accu, current) => accu + current, 0)

2. 累加对象数组和

这里如果只是像上面一样使用reduce，最终的结果会存在问题

objArr = [{x: 1}, {x:2}, {x:3}]

objArr.reduce((accu, current) => accu.x + current.x, 0)

上述代码返回的结果为NaN，为什么那？

上文提过accumulator它的值为上一次调用之后的累计值或初始值，因此第一次调用过后将3赋值给accumulator，不再具有x属性，因此最终返回NaN

// 法一：先借助map将数值提取出来

objArr.map(obj => obj.x).((accu, current) => accu + current, 0)

// 法二：赋予初值，每次运行accu + current.x

objArr.reduce((accu, current) => accu + current.x, 0)

3. 计算数组中每个元素出现的次数

var names = [‘Alice’, ‘Bob’, ‘Tiff’, ‘Bruce’, ‘Alice’];

var countedNames = names.reduce(function (allNames, name) {

if (name in allNames) {

allNames[name]++;

}

else {

allNames[name] = 1;

}

return allNames;

}, {});

模拟实现

Array.prototype.myReduce = function(callbackFn) {

var _arr = this, accumulator = arguments[1];

var i = 0;

// 判断是否传入初始值

if (accumulator === undefined) {

// 没有初始值的空数组调用reduce会报错

if (_arr.length === 0) {

throw new Error(‘initVal and Array.length>0 need one’)

}

// 初始值赋值为数组第一个元素

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

0. {

throw new Error(‘initVal and Array.length>0 need one’)

}

// 初始值赋值为数组第一个元素

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

[外链图片转存中…(img-9d0eoh02-1715905620191)]

[外链图片转存中…(img-01mEI0ba-1715905620192)]