• 转载
  • 前端开发
  • 5 个你需要知道的 JavaScript 小技巧

    2020.06.05 15:21发布

    6120人阅读

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


    文章来源于网络,版权归原作者所有,内容为作者个人观点,文章仅供学习,如有侵权请联系客服删除,本站拥有对此声明的最终解释权。


     

  • 前端
  • JavaScript
  • 技巧
  • 举报文章

  • 收藏博客:

  • 分享至:
  • 添加评论

    请先登录再评论...

    登录

    评论列表(条评论)

    没有更多评论了