今天,我整理了20个很实用的 JavaScript 开发技巧,希望这些技巧能够帮助你的学习与开发工作。
1. 初始化一个数组
如果你想初始化一个指定长度的一维数组并指定默认值,你可以这样做。
const array = Array(6).fill('');
// ['', '', '', '', '', '']
如果你想初始化一个指定长度的二维数组并指定默认值,你可以这样做。
const matrix = Array(6).fill(0).map(() => Array(5).fill(0));
// [[0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0]]
2. 数组求和,求最大值和最小值
const array = [5,4,7,8,9,2];
求和
array.reduce((a,b) => a+b);
寻找最大值
array.reduce((a,b) => a > b ? a : b); Math.max(...array)
寻找最小值
array.reduce((a,b) => a < b ? a : b); Math.min(...array)
请记住:数组的reduce方法可以用来解决很多数组求值问题。
3.过滤错误值
如果要过滤数组中的值,例如 false、0、null、undefined 等,可以这样做。
const array = [1, 0, undefined, 6, 7, '', false];
array.filter(Boolean);
// [1, 6, 7]
4. 使用逻辑运算符
如果有这样的代码片段:
if(a > 10) {
doSomething(a)
}
可以使用逻辑运算符重写。
a > 10 && doSomething(a)
5. 简化判断
如果有如下判断。
if(a === undefined || a === 10 || a=== 15 || a === null) {
//...
}
可以使用数组来简化这种判断。
if([undefined, 10, 15, null].includes(a)) {
//...
}
这段代码会简洁很多,易于扩展,如果还需要再添加判断,直接添加到数组中即可。
6.空数组
如果要清空数组,可以将数组的长度设置为 0。
let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0
console.log(array) // []
7. 计算性能
以下操作可用于计算代码的性能。
const startTime = performance.now();
for(let i = 0; i < 1000; i++) {
console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 10.3333333
8. 拼接阵列
如果我们想组合几个数组,我们可以使用扩展运算符。
const start = [1, 2]
const end = [5, 6, 7]
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]
或者使用数组的 concat()方法。
const start = [1, 2, 3, 4]
const end = [5, 6, 7]
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]
但是,在使用concat()方法时,如果要合并的数组很大,那么,concat()函数在创建单独的新数组时会消耗大量内存。在这种情况下,可以使用以下方法来合并数组。
Array.prototype.push.apply(start, end)
9. 验证 undefined 和 null
如果有这样的代码。
if(a === null || a === undefined) {
doSomething()
}
也就是如果需要验证一个值是否等于null或者undefined,可以使用null合并操作符来简化上面的代码。
a ?? doSomething()
这样,仅当 a 未定义或为空时,才会执行控制合并运算符之后的代码。空合并运算符 ??是一个逻辑运算符,当左侧操作数为 null 或未定义时返回其右侧操作数,否则返回左侧操作数。
10. 将数组元素转换为数字
如果有一个数组,并且你想将数组的元素转换为数字,你可以使用 map 方法来完成。
const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number); // [12, 1, 3.1415, -10.01]
这样,map 对数组的每个元素执行 Number 构造函数,并在遍历数组时返回结果。
11、将类数组转换为数组
可以使用以下方法将类数组转换为数组。
Array.prototype.slice.call(arguments);
此外,还可以使用扩展运算符来实现。
[...arguments]
12.对象属性的动态声明
如果你想动态地为一个对象声明属性,你可以这样做。
const dynamic = 'color';
var item = {
brand: 'Ford',
[dynamic]: 'Blue'
}
console.log(item);
// { brand: "Ford", color: "Blue" }
13.缩短console.log()
每次debug都要写很多console.log()会比较麻烦,可以用下面的形式来简化这段代码。
const c = console.log.bind(document)
c(222)
c("hello world")
这将每次只执行 c 方法。
14.获取查询参数
如果我们想获取 URL 中的参数,可以使用 window 对象的属性。
window.location.search
如果一个 URL 是 google.com?project=js&type=1 那么通过上面的操作你会得到 ?project=js&type=1。如果你想得到其中一个参数,你可以这样做。
let type = new URLSearchParams(location.search).get('type');
15. 删除数组元素
如果我们想删除一个数组的元素,可以使用delete来完成,但是删除后元素会变成undefined,不会消失,而且执行会消耗很多时间,所以大部分情况下不会满足我们的需求。所以我们可以使用数组的 slice() 方法来删除数组的元素。
const array = ["a", "b", "c", "d"]
array.splice(0, 2) // ["a", "b"]
16.检查对象是否为空
如果我们想检查对象是否为空,我们可以使用以下内容。
Object.keys({}).length // 0
Object.keys({key: 1}).length // 1
Object.keys() 方法用于获取对象的键,它将返回一个包含这些键值的数组。如果返回数组的长度为 0,则该对象必须为空。
17. 使用 switch case 替换 if/else
switch case 的性能比 if/else 好,而且代码看起来更干净。
前:
if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;}
else if (5 == month) {days = 31;}
else if (6 == month) {days = 30;}
else if (7 == month) {days = 31;}
else if (8 == month) {days = 31;}
else if (9 == month) {days = 30;}
else if (10 == month) {days = 31;}
else if (11 == month) {days = 30;}
else if (12 == month) {days = 31;}
后:
switch(month) {
case 1: days = 31; break;
case 2: days = IsLeapYear(year) ? 29 : 28; break;
case 3: days = 31; break;
case 4: days = 30; break;
case 5: days = 31; break;
case 6: days = 30; break;
case 7: days = 31; break;
case 8: days = 31; break;
case 9: days = 30; break;
case 10: days = 31; break;
case 11: days = 30; break;
case 12: days = 31; break;
default: break;
}
18. 获取数组中的最后一项
如果要获取数组中的最后一项,通常会这样编写代码。
const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1] // 5
其实,我们也可以使用数组的 slice 方法来获取最后一个元素。
arr.slice(-1)
当我们将 slice 方法的参数设置为负值时,它会从数组后面开始截取数组值,如果要截取最后两个值,则传入参数-2。
19. 将值转换为布尔值
在 JavaScript 中,以下所有值在布尔转换时都转换为 false,所有其他值都转换为 true。
-
undefined
-
null
-
0
-
-0
-
NaN
-
“”
通常,如果我们想将显式值转换为布尔值,我们会使用 Boolean() 方法进行转换。实际上,我们可以使用 !运算符将值转换为布尔值。
我们知道一个!是将对象转换为布尔值并反转它,两个!就是再次将逆布尔值取反,相当于直接将非布尔值转换为布尔值。与 Boolean() 方法相比,此操作将具有更快的性能,因为它是本机计算机操作:
!!undefined // false
!!"996" // true
!!null // false
!!NaN // false
20. 使用对象代替参数列表
当我们使用参数列表给函数传递参数的时候,参数少一点没问题,但如果参数多,问题就更大了,因为我们必须按照参数列表的顺序传递参数。如果你使用 TypeScript 编写,那么你还需要编写使可选参数列在强制参数之后。
如果我们的函数参数比较多,可以考虑使用对象形式传参。以对象形式传递参数时,传递可选参数不需要在最后,参数的顺序也不重要。它也比参数列表更容易阅读和理解通过对象传递的内容。
请参阅下面的示例。
function getItem(price, quantity, name, description) {}
getItem(15, undefined, 'bananas', 'fruit')
以下是如何使用对象传递。
function getItem(args) {
const {price, quantity, name, description} = args
}
getItem({
name: 'bananas',
price: 10,
quantity: 1,
description: 'fruit'
})
总结
以上就是我今天跟你分享的20个JavaScript的实用技巧,希望这些技巧对你有所帮助,如果你觉得有用的话,请记得点赞我,关注我,并将它分享给你身边的朋友,也许能帮助到他。