前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
const users = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35},
];
const names = users.map(function(user) {
return user.name;
});
console.log(names); // ['Alice', 'Bob', 'Charlie']
⭐将一个数组中的字符串转换为另一个数组,只保留长度大于等于5的字符串:
const words = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const longWords = words.map(function(word) {
if (word.length >= 5) {
return word;
}
});
console.log(longWords); // ['apple', 'banana', 'cherry', undefined, 'elderberry']
⭐⭐⭐需要注意的是,在使用 map()
方法时,我们可以选择传递可选参数 thisArg
来设置回调函数的 this
值。如果不传递 thisArg
参数,则默认情况下,回调函数的 this
值为undefined
。
举个例子:
let numbers = [1, 2, 3];
let obj = { multiplier: 2 };
let doubled = numbers.map(function(num) {
return num \* this.multiplier;
}, obj);
console.log(doubled); // 输出 [2, 4, 6]
上面的例子中,我们定义了一个名为 numbers
的数组,其中包含三个数字。我们还定义了一个名为 obj
的对象,其中包含一个名为 multiplier
的属性,该属性的值为 2。我们在回调函数中使用 this.multiplier
,其中 this
值为 obj
,来将数组中的每个元素乘以 2。
map()的优缺点
优点:
- map()默认会有返回值,一般返回一个数组。这里要强调一下,函数默认没有返回值。如果函数内部没有明确使用return语句返回一个值,那么该函数执行完毕后会自动返回undefined。所以这个也是map()的一个特色
- 可以方便地对数组中的每个元素进行操作,并生成一个新的数组;
- 不会改变原始数组。
缺点:
- 无法使用break,continue,return等关键字控制循环,必须全部遍历完毕才能停止;
- 对于大型数据集合而言,可能会导致性能问题。
数据小的时候,用map()循环非常的爽,不是很消耗性能。但数据大的情况下,用map()会很耗性能,因为map()会对数组中的每个元素执行一次callback方法。建议数据大的时候,用for循环。虽然多次for循环嵌套看着恶心,但是性能好,是底层的东西。而所谓的map(),set(),for in,for of 都是在for循环的基础上再封装。单从性能角度考虑,远不如for循环优秀。
map()的使用场景
- 将一组数据转换为另一种形式或格式;
- 对一组数据进行过滤、去重等操作;
- 对一组DOM元素进行修改等操作;
去重
一般情况下,去重一个数组,有这么几种方法。
双重for循环配合splie去重
//先定义一个数组
var arr=[1,2,2,3,4,4,5]
//双重for循环
for(i = 0;i < arr.length; i++){
for(j = i+1;j < arr.length; j++){
//如果数组中有两个数相等,这里用三位运算符
if(arr[i] === arr[j]){
//在第j个元素开始删除,删除1个元素。splice方法,还可以对多个对象中的某个或某几个对象删除
arr.splice(j,1);
j--;
}
}
}
console.log(arr)
map循环配合Array.from去重
const arr = [1, 2, 2, 3, 4, 4, 5];
const newArr = Array.from(new Map(arr.map(item => [item, item])).values());
console.log(newArr); // [1, 2, 3, 4, 5]
这段代码的原理是,先使用map
方法将数组元素映射为键值对的数组。然后使用Map
构造函数将键值对数组转换为Map
对象,其中键和值均为数组的元素。由于Map
对象中键是唯一的,这样就自动去除了数组中的重复项。最后,通过Array.from()
方法将去重后的Map
对象的值转换为新的数组。
set()去重
以下是使用Set
数据结构进行数组去重的例子:
let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4, 5]
这里使用了ES6中的Set
数据结构来创建一个去重后的新数组newArr
。
filter()去重
let arr = [1, 2, 2, 3, 4, 4, 5];
let newArr = arr.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(newArr); // [1, 2, 3, 4, 5]
filter()
函数遍历数组中的每个元素,并通过比较当前元素在数组中的索引位置来判断是否保留。只有第一次出现的元素会被保留下来,从而实现了去重的效果
最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
己在和面试官说项目说技术时的话就好了
[外链图片转存中…(img-l8aQjjv5-1715372454851)]
[外链图片转存中…(img-FZYGeuyF-1715372454852)]