9 个JavaScript 技巧

开发 前端
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。本文主要介绍关于JavaScript的9个技巧。

1. 生成指定范围的数字

[[344478]]

在某些情况下,我们会创建一个处在两个数之间的数组。假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法:

  1. let start = 1900end = 2000
  2. [...new Array(end + 1).keys()].slice(start); 
  3. // [ 1900, 1901, ..., 2000] 
  4.  
  5. // 还有这种方式,但对于很的范围就不太稳定 
  6. Array.from({ length: end - start + 1 }, (_, i) => start + i); 

2. 使用值数组作为函数的参数

在某些情况下,我们需要将值收集到数组中,然后将其作为函数的参数传递。使用 ES6,可以使用扩展运算符(...)并从[arg1, arg2] > (arg1, arg2)中提取数组:

  1. const parts = { 
  2.   first: [0, 2], 
  3.   second: [1, 3], 
  4.  
  5. ["Hello", "World", "JS", "Tricks"].slice(...parts.second) 
  6. // ["World", "JS"] 

3. 将值用作 Math 方法的参数

当我们需要在数组中使用Math.max或Math.min来找到最大或者最小值时,我们可以像下面这样进行操作:

  1. const elementsHeight =  [...document.body.children].map( 
  2.   el => el.getBoundingClientRect().y 
  3. ); 
  4. Math.max(...elementsHeight); 
  5. // 474 
  6.  
  7. const numbers = [100, 100, -1000, 2000, -3000, 40000]; 
  8. Math.min(...numbers); 
  9. // -3000 

4. 合并/展平数组中的数组

Array 有一个很好的方法,称为Array.flat,它是需要一个depth参数,表示数组嵌套的深度,默认值为1。但是,如果我们不知道深度怎么办,则需要将其全部展平,只需将Infinity作为参数即可

  1. const arrays = [[10], 50, [100, [2000, 3000, [40000]]]] 
  2.  
  3. arrays.flat(Infinity) 
  4. // [ 10, 50, 100, 2000, 3000, 40000 ] 

5. 防止代码崩溃

在代码中出现不可预测的行为是不好的,但是如果你有这种行为,你需要处理它。

例如,常见错误TypeError,试获取undefined/null等属性,就会报这个错误。

  1. const found = [{ name: "Alex" }].find(i => i.name === 'Jim') 
  2.  
  3. console.log(found.name) 
  4. // TypeError: Cannot read property 'name' of undefined 

我们可以这样避免它:

  1. const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {} 
  2.  
  3. console.log(found.name) 
  4. // undefined 

6. 传递参数的好方法

对于这个方法,一个很好的用例就是styled-components,在ES6中,我们可以将模板字符中作为函数的参数传递而无需使用方括号。如果要实现格式化/转换文本的功能,这是一个很好的技巧:

  1. const makeList = (raw) => 
  2.   raw 
  3.     .join() 
  4.     .trim() 
  5.     .split("\n") 
  6.     .map((s, i) => `${i + 1}. ${s}`) 
  7.     .join("\n"); 
  8.  
  9. makeList` 
  10. Hello, World 
  11. Hello, World 
  12. `; 
  13. // 1. Hello,World 
  14. // 2. World,World 

7. 交换变量

使用解构赋值语法,我们可以轻松地交换变量 使用解构赋值语法:

  1. let a = "hello" 
  2. let b = "world" 
  3.  
  4. // 错误的方式 
  5. a = b 
  6. b = a 
  7. // { a: 'world', b: 'world' } 
  8.  
  9. // 正确的做法 
  10. [a, b] = [b, a] 
  11. // { a: 'world', b: 'hello' } 

8. 按字母顺序排序

需要在跨国际的项目中,对于按字典排序,一些比较特殊的语言可能会出现问题,如下所示:

  1. // 错误的做法 
  2. ["a", "z", "ä"].sort((a, b) => a - b); 
  3. // ['a', 'z', 'ä'] 
  4.  
  5. // 正确的做法 
  6. ["a", "z", "ä"].sort((a, b) => a.localeCompare(b)); 
  7. // [ 'a', 'ä', 'z' ] 

localeCompare() :用本地特定的顺序来比较两个字符串。

9. 隐藏隐私

 

最后一个技巧是屏蔽字符串,当你需要屏蔽任何变量时(不是密码),下面这种做法可以快速帮你做到:

  1. const password = "hackme"
  2. password.substr(-3).padStart(password.length, "*"); 
  3. // ***kme 

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:赵宁宁 来源: 大迁世界
相关推荐

2019-12-20 14:32:55

JavaScript函数开发

2020-12-23 08:03:01

JavaScript开发代码

2020-12-14 08:30:02

JavaScript开发代码

2019-07-31 10:24:16

JavaScript浏览器口袋妖怪

2020-12-07 08:01:59

JavaScript入门技巧

2020-05-09 17:05:50

Python字符串代码

2019-07-24 15:29:55

JavaScript开发 技巧

2011-04-07 16:46:09

Solaris

2022-11-28 23:44:26

JavaScript技巧程序员

2023-11-26 17:54:07

JavaScript开发

2022-12-22 14:44:06

JavaScript技巧

2020-08-21 17:40:15

JavaScript开发 技巧

2022-12-25 16:03:31

JavaScript技巧

2023-08-11 17:39:43

JavaScriptWeb 应用程序

2020-06-09 10:24:58

JavaScript开发技术

2010-09-25 09:42:59

Java内存管理

2021-01-31 23:56:49

JavaScript开发代码

2021-03-15 08:13:19

JavaScript开发代码

2023-08-18 15:12:00

JavaScript开发

2023-06-28 00:02:40

点赞
收藏

51CTO技术栈公众号