写点什么

【译】5 个你需要知道的 JavaScript 小技巧

用户头像
零和幺
关注
发布于: 2020 年 06 月 03 日
【译】5 个你需要知道的 JavaScript 小技巧

JavaScript 是目前最流行的编程语言之一。就像其他任何编程语言一样,它也有很多小技巧,从今天开始你就可以使用它们。



大多数程序员都应该每天训练这些小技巧,直到熟能生巧。



在这篇文章中,我们将一起练习一些技巧,它可以让你成为更好的开发者,也可以提高你的 JavaScript 技能。



1. Every 和 Some



并不是所有开发者都熟悉 everysome 函数。但是,他们在特定的情景下非常有用。我们先从 every函数开始。



如果你想知道一个数组中的所有元素是否都能通过指定的测试,你就可以使用该函数。实际上,该函数会遍历数组中的每一个元素,检查它们是否全部都为 true



这听起来可能很抽象,所以让我们来看下面的例子,事实上它没有想象中的复杂:



const random_numbers = [13, 2, 37, 18, 5];
const more_random_numbers = [0, -1, 30, 22];
const isPositive = (number) => {
return number > 0;
};
random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false



every 函数返回一个布尔值。如果数组中的所有元素都通过了测试,将会返回 true 。哪怕数组中只有一个元素没有通过测试,返回的结果也是 false



如果你喜欢,你也可以使用匿名函数作为测试函数:



random_numbers.every((number) => {
return number > 0;
});



some 函数与 every 函数有异曲同工之妙。唯一的,也是最大的区别是:some 函数测试是否至少有一个数组中的元素通过了测试。



如果我们回头看之前的例子,用 some 函数替代 every 函数,那么两个数组都将返回 true ,因为两个数组中都至少有一个元素满足测试条件。



const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {
return number > 0
}
random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true



2. 设置条件变量



设置条件变量既简单又能让你的代码看起来更加优雅,当你应用这个小技巧后,就不用再多写一个 if 语句了,这也是我最喜欢的一个 JavaScript 小技巧。



那么如何设置一个条件变量呢?



const timezone = user.preferred_timezone || 'America/New_York'



在上面的例子中,我们检查用户是否有首选的时区。如果有,我们就用那个时区;如果没有,我们就用默认的时区 'America/New_York'。



这行代码看起来比 if 语句声明简单多了。



let timezone = 'America/New_York'
if (user.preferred_timezone) {
timezone = user.preferred_timezone
}



3. 转换数组中的值



有一些场景你可能需要转换数组中所有的值,这种情况可能发生在当你用 === 运算符检查数组中是否存在一个特定的数字时。但是某些情况下,数组中的值可能是由字符串组成的:



let selected_values = ['1', '5', '8']



此时如果用了 === 运算符来判断数组中是否存在一个特定的数字就不会成功。



在我的印象中,最完美的解决方案是转换数组中所有字符串的值为数字。然而,完美的解决方案确是使用 ``map`` 函数。



selected_values = selected_values.map(Number) // [1, 5, 8]



你也可以通过改变 map 函数中的参数,方便的转换数组中所有的值为 Boolean 。



selected_values = selected_values.map(Boolean) // [true, true, true]



4. 对象解构



只要你知道了对象解构是什么,你就会每天都去使用它。但是到底什么是的解构呢?



解构是 JavaScript 表达式,它允许你从数组、对象、map、set 中提取数据。它也允许你一次提取对象中的很多属性以及数组中的很多项。



我们来看下面的例子 —— 一个 user 对象。如果你希望存储 user 的 name 值到一个变量,你必须在新的一行声明一个变量。如果你还希望存储 user 中 gender 的值,你还需要再做一遍。



const user = {
name: 'Frank',
age: 23,
gender: 'M',
member: false
}
const name = user.name
const gender = user.gender

如果你用解构的语法,你就可以直接从对象的属性得到变量,就像下面这样:

const { name, age, gender, member } = user;
console.log(name) // Frank
console.log(age) // 23
console.log(gender) // M
console.log(member) // false



5. 调式性能



作为开发者,最常做的一件事就是调试。然而,调试的含义不仅仅是使用 ``console.log()`` 打印一些信息在你的控制台上。



你知道 console 对象有非常好的方法用来分析一段的代码的性能么?其实,大多数开发人员只知道标准的 console.log() 来调试他们的代码。



console 对象有许多有用的方法,比如 timetimeEnd 方法就可以帮助你分析性能。它工作起来也很简单。



在你希望测试的代码片段之前,你可以调用 console.time() 方法。这个方法有一个参数,接收一个字符串用来描述你想分析什么。在你希望测试的代码片段之后,你可以调用 console.timeEnd() 方法,可以给这个方法一个与 time()方法同样的字符串作为参数。这样你就可以看到这段代码片段运行的时间了。



console.time('loop')
for (let i = 0; i < 10000; i++) {
// Do stuff here
}
console.timeEnd('loop')



原文链接:https://levelup.gitconnected.com/5-javascript-tricks-that-are-good-to-know-78045dea6678

用户头像

零和幺

关注

API 调用师,CV 工程师。 公粽号:零幺小馆 2017.10.17 加入

还未添加个人简介

评论 (2 条评论)

发布
用户头像
nice~
2020 年 12 月 14 日 10:56
回复
😄
2020 年 12 月 21 日 19:47
回复
没有更多了
【译】5 个你需要知道的 JavaScript 小技巧