前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
【国庆头像】- 国庆爱国 程序员头像！总有一款适合你！
简介
如果你用这些技巧优化你的js码，它可以帮助你编写更干净、整洁、易维护的代码，为你节省编程时间。
1、灵活使用 && 或 || 代替if
在一些简单的情况下，你可以使用逻辑运算符&& 或 || 代替if。
代码列子1：
// 繁琐的
if (isGetData) {
this.getData();
}
// 好的
isGetData && this.getData();
代码列子2：
// 繁琐的
if (res.data) {
return res.data;
} else {
return [];
}
// 好的
return res.data || [];
2、~~运算符取整
~是按位取反运算，~~是取反两次，在这里~~的作用是去掉小数部分
因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数
道理与用！运算符把任意类型转化为 Boolean 类似
代码列子1：
let a = 1;
// 利用!!将a转换成 Boolean 值
a = !!a; // true
a = 0;
a = !!a; // false
a = {}
a = !!a; // true
代码列子2：使用 ~~ 代替 Math.floor(）
// 取整
Math.floor(Math.random() * 50);
// 取整
~~(Math.random() * 50);
~~'1.11111'; // 1
~~'whitedress1'; // 0
~~NaN; // 0
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 时，返回其右侧表达式，否则返回左侧表达式。
代码列子：
null ?? 1; // 1
undefined ?? 2; // 2
true ?? 1; // true
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
【国庆头像】- 国庆爱国 程序员头像！总有一款适合你！
