9 个JavaScript 技巧

做者：Orkhan Jafarov
译者：前端小智
来源：dev

今天送 5 本前端的书，明天开奖，抽奖地址点击这里 https://mp.weixin.qq.com/s/nb...，祝你们好运。

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

1.生成指定范围的数字

在某些状况下，咱们会建立一个处在两个数之间的数组。假设咱们要判断某人的生日是否在某个范围的年分内，那么下面是实现它的一个很简单的方法 😎

let start = 1900, end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// 还有这种方式，但对于很的范围就不太稳定
Array.from({ length: end - start + 1 }, (_, i) => start + i);

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

在某些状况下，咱们须要将值收集到数组中，而后将其做为函数的参数传递。 使用 ES6，可使用扩展运算符(...)并从[arg1, arg2] > (arg1, arg2)中提取数组:

const parts = {
  first: [0, 2],
  second: [1, 3],
}

["Hello", "World", "JS", "Tricks"].slice(...parts.second)
// ["World", "JS"]

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

当咱们须要在数组中使用Math.max或Math.min来找到最大或者最小值时，咱们能够像下面这样进行操做：

const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 474

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

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

Array 有一个很好的方法，称为Array.flat，它是须要一个depth参数，表示数组嵌套的深度，默认值为1。 可是，若是咱们不知道深度怎么办，则须要将其所有展平，只需将Infinity做为参数便可 😎

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]

arrays.flat(Infinity)
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. 防止代码崩溃

在代码中出现不可预测的行为是很差的，可是若是你有这种行为，你须要处理它。

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

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')

console.log(found.name)
// TypeError: Cannot read property 'name' of undefined

咱们能够这样避免它：

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}

console.log(found.name)
// undefined

6. 传递参数的好方法

对于这个方法，一个很好的用例就是styled-components，在ES6中，咱们能够将模板字符中做为函数的参数传递而无需使用方括号。 若是要实现格式化/转换文本的功能，这是一个很好的技巧：

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;
// 1. Hello,World
// 2. World,World

7.交换变量

使用解构赋值语法，咱们能够轻松地交换变量 使用解构赋值语法 😬:

let a = "hello"
let b = "world"

// 错误的方式
a = b
b = a
// { a: 'world', b: 'world' }

// 正确的作法
[a, b] = [b, a]
// { a: 'world', b: 'hello' }

8.按字母顺序排序

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

// 错误的作法
["a", "z", "ä"].sort((a, b) => a - b);
// ['a', 'z', 'ä']

// 正确的作法
["a", "z", "ä"].sort((a, b) => a.localeCompare(b));
// [ 'a', 'ä', 'z' ]

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

9.隐藏隐私

最后一个技巧是屏蔽字符串,当你须要屏蔽任何变量时(不是密码)，下面这种作法能够快速帮你作到：

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

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://dev.to/gigantz/9-java...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。