2024年前端最新【面试题】前端应该了解的个JavaScript技巧有什么?,腾讯竟然又偷偷开源了一套前端原生UI框架

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

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

3、灵活使用 array.length 调整数组长度或清空数组

有时你需要调整数组长度或清空数组。最有效的方法是使用Array.length

代码列子:

    const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

    console.log(array.length); // 10

    // 调整数组大小
    array.length = 4;

    console.log(array.length); // 4
    console.log(array); // ['a', 'b', 'c', 'd']

    // 清空数组
    array.length = 0;
    console.log(array.length); // 0
    console.log(array); // []

4、如何高效处理数组合并

合并数组时,可能会对浏览器造成严重的压力,尤其是在处理大量数据时。想要保持简单和高效,请使用Array.concat() 和 Array.push.apply(arr1, arr2) 函数。

处理较小的数组,建议使用Array.concat()
代码列子:

let list1 = ['a', 'b'];
let list2 = ['c', 'd'];

console.log(list1.concat(list2)); // ['a', 'b', 'c', 'd']

在较大数组时,它会在创建新数组时消耗大量内存。要解决性能下降问题,建议使用Array.push.apply(arr1, arr2)
代码列子:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.push.apply(list1, list2)); // 10
console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

5、数组过滤使用 filter()

filter()在筛选数组非常有用。在这种情况下,你可以根据数组的特征来排除数据。

代码列子:

let ages = [32, 33, 16, 40];
ages = ages.filter(age => age >= 18);
console.log(ages); // 32,33,40

6、快速去重 ...new Set(arr)

假设你有一个重复值的数组,你需要去重。可以使用扩展语法和对象类型的组合来实现。此方法适用于StringNumber
代码列子:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
const unrepeated_cars = [...new Set(cars)];

console.log(unrepeated_cars); // ['Opel', 'Bugatti', 'Ferrari']

7、正则结合replace()实现替换功能

大家应该熟悉该功能。但是,它默认执行替换一次。假设你需要批量替换,可以配合正则使用。

const grammar = 'synonym synonym';

console.log(grammar.replace('synonym', 'anto')); // anto synonym
console.log(grammar.replace(/syno/, 'anto')); // 'antonym synonym'
console.log(grammar.replace(/syno/g, 'anto')); //'antonym antonym'

8、使用模版字符进行字符串的拼接

模版字符使用(``)字符结合(${}),其中可以包含变量、表达式等。
代码列子:

const name = '三哥';
const age = '26';
// const str = '他叫' + name + age;
const str = `他叫${name}${age}`;

9、如何检查对象是否有值

检查对象是否为空的快速技巧是使用Object.keys()
代码列子:

Object.keys(objectName).length // 如果返回0,则objectName为空,否则显示值的数目

10、灵活使用 ? 与 ??运算符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。操作符的功能类似于( . )链式操作符,不同之处在于,在引用为空null或者 undefined的情况下不会引起错误,该表达式返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined.

在我们日常开发中, 常遇到这样的报错 Cannot read properties of undefined (reading ‘XXX’)

代码列子:

 const obj = {};
 console.log(obj.user.name); // 报错 Cannot read properties of undefined (reading 'name')
 console.log(obj.user?.name); // undefined

空值合并运算符( ?? )是一个逻辑操作符,如果左侧的表达式为 null或者 undefined 时,返回其右侧表达式,否则返回左侧表达式。
代码列子:

null ?? 1; // 1


### 最后前端到底应该怎么学才好?

如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。



不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

(https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值