9个JavaScript日常开发小技巧

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

掌握这些小技巧，在日常开发过程中可以避免很多不必要的错误，更多关于javascript日常开发小技巧请查看下面的相关链接