总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包
// 回调函数执行为true
if (callbackFn.call(thisArg, _arr[i], i, _arr)) {
res.push(_arr[i]);
}
}
return res;
}
用法
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
与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
是ES6
新添加的数组方法,返回满足回调函数的第一个数组元素/数组元素索引。当数组中没有能满足回调函数的元素时,会分别返回undefined和-1
。
const users = [
{ name: ‘John’, age: 34 },
{ name: ‘Amy’, age: 20 },
{ name: ‘camperCat’, age: 10 }
];
- 返回name为John的年龄
在没有find方法时,实现类似效果,需要循环遍历,查找到name=Jonn后,找到年龄。但使用find就可以轻松快捷的实现。
JohnAge = users.find(user => user.name === ‘John’).age
- 返回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
与前面的方法有略微的差别:
arr.reduce(callback(accumulator, currentValue[, index[, array]]){
}[, initialValue])
-
callback
:对数组元素进行操作的回调函数 -
accumulator
:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue
-
currentValue
:正在处理的当前元素 -
当前元素的索引
-
调用高阶函数的数组
-
initialValue
:作为第一次调用函数的初始值。如果没有提供初始值,则使用数组中的第一个元素。
没有初始值的空数组调用reduce会报错
可累加的效果为reduce增添了很多精彩,也产生了很多很有用的用途。
- 数组累加和
arr = [0, 1, 2, 3, 4]
arr.reduce((accu, current) => accu + current, 0)
- 累加对象数组和
这里如果只是像上面一样使用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)
- 计算数组中每个元素出现的次数
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)
- {
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)]