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

1,707

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')

原文地址: levelup.gitconnected.com/5-javascrip…

最后,文章会首先发布在我的 Github 上,欢迎关注。