2024年前端最新【面试题】前端应该了解的个JavaScript技巧有什么？(2)，2024年最新大厂的前端面试难吗

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

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

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

### 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)`


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

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` 时，返回其右侧表达式，否则返回左侧表达式。  
 代码列子：





### 更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**

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

![](https://img-blog.csdnimg.cn/img_convert/e3dcb1331bfc3d68e3a72dad94582035.webp?x-oss-process=image/format,png)



《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**

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

[外链图片转存中...(img-wkJrYqkY-1715604597747)]