9个JavaScript技巧

1. 生成指定范围的数字

成都服务器托管,成都创新互联公司提供包括服务器租用、西信服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询:18980820575

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

 
 
 
 
  1. let start = 1900, end = 2000;
  2. [...new Array(end + 1).keys()].slice(start);
  3. // [ 1900, 1901, ..., 2000]
  4. // 还有这种方式,但对于很的范围就不太稳定
  5. 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. const numbers = [100, 100, -1000, 2000, -3000, 40000];
  7. Math.min(...numbers);
  8. // -3000

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

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

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

5. 防止代码崩溃

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

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

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

我们可以这样避免它:

 
 
 
 
  1. const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}
  2. console.log(found.name)
  3. // 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. makeList`
  9. Hello, World
  10. Hello, World
  11. `;
  12. // 1. Hello,World
  13. // 2. World,World

7. 交换变量

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

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

8. 按字母顺序排序

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

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

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

9. 隐藏隐私

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

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

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

网站名称:9个JavaScript技巧
标题路径:http://www.shufengxianlan.com/qtweb/news0/183250.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联