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

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



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



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



1. Every 和 Some



并不是所有开发者都熟悉 every 和 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.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 对象有许多有用的方法，比如 time 和 timeEnd 方法就可以帮助你分析性能。它工作起来也很简单。



在你希望测试的代码片段之前，你可以调用 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