简介
如果你用这些技巧优化你的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)];
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
i', 'Ferrari', 'Opel'];
const unrepeated_cars = [...new Set(cars)];
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/39781ae7861b6a27688df185d8c0ba14.webp?x-oss-process=image/format,png)