5个你应该知道的JavaScript技巧,不能错过!

开发 前端
本文将介绍JavaScript的一系列技巧,而这些技巧能将读者打造为一名更好的开发人员,并增强JavaScript技能。

 本文转载自公众号“读芯术”(ID:AI_Discovery)

JavaScript是目前最流行的编程语言之一。就像任何其他编程语言一样,它有许多让人马上就能学会的小技巧。

每一个技巧都能完成大多数开发人员每天需要完成的工作。根据经验,读者可能已经知道了其中一些,然而仍会对其他的技巧大吃一惊。

本文将介绍一系列技巧,而这些技巧能将读者打造为一名更好的开发人员,并增强JavaScript技能。

我们一起来看看吧~

[[321076]]

1. 对象解构

开发人员一旦了解了对象解构,就可能每天都会用到。

但什么是解构呢?

解构是一个JavaScript表达式,允许将数组、对象、映射和集合中的数据提取到其自己的变量中。它允许您一次从一个或多个对象中提取属性。

一起看看以下示例,其中有一个用户对象。如果要将用户名(name)存储在变量中,则必须将其赋给新行上的变量。如果想把性别(gender)也存储在一个变量中,就必须重复上述操作。

  1. const user = { 
  2.     name: 'Frank', 
  3.     age: 23, 
  4.     gender: 'M', 
  5.     member: false 
  6. }const name = user.name 
  7. const gender = user.gender 

使用解构,就可以通过以下语法直接获取对象属性的变量:

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

2. 使用设备性能以更好地调试

作为一名开发人员,做的最多的事情就是调试。但是调试不仅仅是使用console.log在控制台打印出一堆日志信息这么简单。

知道控制台对象有分析代码片段性能的好办法吗?大多开发人员只知道用标准的console.log方法来调试代码。

控制台对象有很多有用的功能。它有一个time和timeEnd函数,可以帮助分析性能。其工作原理非常简单。

在被测试的代码前调用console.time函数。此函数有一个参数,接受一个描述被分析内容的字符串。在被测试代码的末尾,调用console.timeEnd函数。给这个函数与第一个参数相同的字符串。然后,运行代码所需的时间将会在控制台中显示。

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

3. Every和 some函数

Every和some函数并不是为所有开发人员熟知。然而,它们在某些情况下非常有用。先来讲讲every函数。如果想要知道数组中的所有元素是否都通过了某个测试,那就可以应用此函数。本质上,这是在遍历数组中的每个元素,并且检查它们是否属性都为真。

这听起来可能有些抽象,所以请看以下示例。并没有那么复杂。

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

Every函数返回一个布尔值。如果数组中的所有元素都通过了测试,则返回“真”(true)。如果数组中的某个元素未通过测试,则返回“假” (false)。

也可以使用一个匿名函数作为测试函数:

  1. random_numbers.every((number) =>
  2.     return number > 0 
  3. }) 

some函数与every函数的工作原理几乎完全相同。两个函数只有一个主要区别:some函数测试的是数组中是否至少有一个元素通过了测试。

回顾上述实例,如果使用some函数而不是every函数,那么两个数组都将返回“真”(true),因为两个数组都包含一个正数。

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

4. 有条件地设置一个变量

有条件地设置一个变量很简单,而且能使代码更漂亮。在应用这个技巧的时候并不需要编写if语句——这是笔者最喜欢的JavaScript技巧之一。

所以要如何有条件地设置一个变量?

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

上述例子是检查用户是否有首选时区。如果用户有首选时区,则使用该时区。如果用户没有首选时区,则使用默认时区,即“美国/纽约”(‘America/New_York’)。

这段代码看起来比使用if语句要干净得多。

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

更简洁了,不是吗?

[[321077]]

来源:Pexels

5. 将值转换为字符串数组

有时需要将所有的值转换为字符串数组。例如,当使用Triple equal(===)运算符检查数组中是否存在某个数字时,可能会出现这种情况。

笔者最近遇到了一个问题,其包含multi-select控件。Select选项的HTML值是字符串而不是整数,而这是有意义的,选定值的数组如下所示:

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

问题在于,没能成功检查所选值的数组中是否存在某个整数。笔者使用了一个Intersect函数,它使用了triple equals(===)运算符。并且由于‘5’ !== 5 ,而必须找到一个解决办法。

在笔者看来,最漂亮的解决方案是将数组中的所有值都转换为整数。当笔者进行尝试时,偶然间发现了一个极其简单,却又漂亮的解决办法。

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

与将所有值转换为整数不同,可以通过简单地更改map函数的参数,将数组中的值转化为布尔值。

  1. selected_valuesselected_values =selected_values.map(Boolean) 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2014-03-04 09:35:45

JavaScript调试

2024-11-12 14:56:07

2011-03-25 15:56:58

2013-01-09 13:55:43

2022-06-29 10:06:27

Webpack优化技巧前端

2017-06-06 11:59:26

Docker工具容器

2021-04-12 15:54:45

Android 开发技巧

2021-10-25 14:55:38

Linux技巧命令

2021-06-26 10:04:23

Code特性技巧

2020-03-27 12:30:39

python开发代码

2023-07-07 14:47:46

JavaScript技巧

2024-04-03 10:29:13

JavaScrip优化技巧

2022-10-10 23:14:40

JavaScrip对象属性

2018-10-17 09:00:00

JavaScript工具前端

2022-04-28 08:41:53

JavaScript数组

2020-05-27 10:38:16

开发代码技巧

2021-10-09 10:50:30

JavaScript编程开发

2020-03-05 12:12:54

数据Python开发

2010-05-24 14:06:31

JavaScript

2012-02-13 13:44:46

JavaScript
点赞
收藏

51CTO技术栈公众号