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

Dear 丶 2023-02-14 15:50 13阅读 0赞

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

点此链接领取：[添加链自己是一名从事了多年开发的web前端老程序员，今年年初我花了一个月整理了一份最适合2020年学习的前端学习干货，想分享给每一位喜欢前端的小伙伴接描述][web_2020]

[web_2020]: https://docs.qq.com/doc/DUEJhRnRvZ3V2VEdp