189 8069 5689
本篇文章为大家展示了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) // undefined6. 传递参数的好方法
对于这个方法，一个很好的用例就是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,World7. 交换变量
使用解构赋值语法，我们可以轻松地交换变量 使用解构赋值语法：
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
上述内容就是9个JavaScript技巧分别是哪些，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。