有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

20个超级有用的 JavaScript 技巧

javascript cat 1个月前 (08-21) 58次浏览 已收录 1个评论 扫描二维码

就说你?现在我们开发基本用的都是框架,长时间不玩原生js是不是都遗忘了?

这几天没上班,总结下吧

  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]]
  1. 数组求和,求最大值和最小值
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]
  1. 使用逻辑运算符

如果有这样的代码片段:

if(a > 10) {
    doSomething(a)
}

可以使用逻辑运算符重写。

a > 10 && doSomething(a)
  1. 简化判断

如果有如下判断。

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)  // []
  1. 计算性能

以下操作可用于计算代码的性能。

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
  1. 拼接阵列

如果我们想组合几个数组,我们可以使用扩展运算符。

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)
  1. 验证 undefined 和 null

如果有这样的代码。

if(a === null || a === undefined) {
    doSomething()
}

也就是如果需要验证一个值是否等于null或者undefined,可以使用null合并操作符来简化上面的代码。

a ?? doSomething()

这样,仅当 a 未定义或为空时,才会执行控制合并运算符之后的代码。空合并运算符 ??是一个逻辑运算符,当左侧操作数为 null 或未定义时返回其右侧操作数,否则返回左侧操作数。

  1. 将数组元素转换为数字

如果有一个数组,并且你想将数组的元素转换为数字,你可以使用 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 对象的属性。

如果一个 URL 是 google.com?project=js&type=1 那么通过上面的操作你会得到 ?project=js&type=1。如果你想得到其中一个参数,你可以这样做。

let type = new URLSearchParams(location.search).get('type');
  1. 删除数组元素

如果我们想删除一个数组的元素,可以使用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,则该对象必须为空。

  1. 使用 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;
}
  1. 获取数组中的最后一项

如果要获取数组中的最后一项,通常会这样编写代码。

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

其实,我们也可以使用数组的 slice 方法来获取最后一个元素。

arr.slice(-1)

当我们将 slice 方法的参数设置为负值时,它会从数组后面开始截取数组值,如果要截取最后两个值,则传入参数-2。

  1. 将值转换为布尔值

在 JavaScript 中,以下所有值在布尔转换时都转换为 false,所有其他值都转换为 true。

undefined

null

0

-0

NaN

“”

通常,如果我们想将显式值转换为布尔值,我们会使用 Boolean() 方法进行转换。实际上,我们可以使用 !运算符将值转换为布尔值。

我们知道一个!是将对象转换为布尔值并反转它,两个!就是再次将逆布尔值取反,相当于直接将非布尔值转换为布尔值。与 Boolean() 方法相比,此操作将具有更快的性能,因为它是本机计算机操作:

!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false
  1. 使用对象代替参数列表

当我们使用参数列表给函数传递参数的时候,参数少一点没问题,但如果参数多,问题就更大了,因为我们必须按照参数列表的顺序传递参数。如果你使用 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的实用技巧,希望这些技巧对你有所帮助

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. Good write-up. I absolutely love this site. Stick with it!
    israel-lady.co.il2022-08-30 01:24 回复 Windows 7 | Chrome 47.0.2526.73