关灯
开启左侧

你知道几个让JavaScript 更加简洁的小技巧

[复制链接]
老蚊子 发表于 2018-11-1 12:55:17 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
推荐9个使 JavaScript 代码变得更加简洁的小技巧。

1.清空或截断数组
在不重新给数组赋值的情况下,清空或截断数组的最简单方法是更改​​其 length 属性值:

  1. const arr = [11, 22, 33, 44, 55, 66];
  2. // truncanting
  3. arr.length = 3;
  4. console.log(arr); //=> [11, 22, 33]
  5. // clearing
  6. arr.length = 0;
  7. console.log(arr); //=> []
  8. console.log(arr[2]); //=> undefined
复制代码
2.使用对象解构(destructuring)模拟命名参数
当您需要将一组可选变量传递给某个函数时,你很可能已经在使用配置对象了,如下所示:

  1. doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
  2. function doSomething(config) {
  3. const foo = config.foo !== undefined ? config.foo : 'Hi';
  4. const bar = config.bar !== undefined ? config.bar : 'Yo!';
  5. const baz = config.baz !== undefined ? config.baz : 13;
  6. // ...
  7. }
复制代码
这是一个古老但有效的模式,它试图在 JavaScript 中模拟命名参数。 函数调用看起来很好。 另一方面,配置对象处理逻辑不必要地冗长。 使用ES2015 对象解构,您可以绕过这个缺点:
  1. function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
  2. // ...
  3. }
复制代码
如果你需要使配置对象也可选,也很简单:

  1. function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  2. // ...
  3. }
复制代码
此处使用 ES6 的 默认参数 新特性,可以查看 JavaScript 函数中默认参数 .

3.使用对象解构来处理数组
可以使用对象解构将数组项分配给各个变量:

  1. const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
  2. const { 2: country, 4: state } = csvFileLine.split(',');
复制代码
4.switch 语句中使用范围值
注意:经过一番思考后,我决定将这个技巧与本文中的其他技巧区分开来。 这不是一种节省时间的技术,不适用于现实生活中的代码。 请记住:“If”语句在这种情况下总是更好。
与这篇文章中的其他提示不同,它更像是一种好奇探索而不是真正使用的东西。
但是,出于历史原因,我会在本文中保留它。
这是在 switch 语句中使用范围值的简单技巧:

  1. function getWaterState(tempInCelsius) {
  2. let state;
  3. switch (true) {
  4. case (tempInCelsius < = 0): state = 'Solid'; break; case (tempInCelsius > 0 && tempInCelsius < 100):
  5. state = 'Liquid';
  6. break;
  7. default:
  8. state = 'Gas';
  9. }
  10. return state;
  11. }
复制代码
5.使用 async/await 来 await多个async函数
可以使用 Promise.all 来 await 多个 async(异步)函数。

  1. await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
复制代码
6.创建纯(pure)对象
您可以创建一个 100% 纯对象,它不会从 Object 继承任何属性或方法(例如,constructor,toString() 等)。

  1. const pureObject = Object.create(null);
  2. console.log(pureObject); //=> {}
  3. console.log(pureObject.constructor); //=> undefined
  4. console.log(pureObject.toString); //=> undefined
  5. console.log(pureObject.hasOwnProperty); //=> undefined
复制代码
7.格式化JSON代码
JSON.stringify 不仅可以简单地将对象转化为字符串。你也可以用它来格式化JSON输出:

  1. const obj = {
  2. foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }
  3. };
  4. // The third parameter is the number of spaces used to
  5. // beautify the JSON output.
  6. JSON.stringify(obj, null, 4);
  7. // =>"{
  8. // =>    "foo": {
  9. // =>        "bar": [
  10. // =>            11,
  11. // =>            22,
  12. // =>            33,
  13. // =>            44
  14. // =>        ],
  15. // =>        "baz": {
  16. // =>            "bing": true,
  17. // =>            "boom": "Hello"
  18. // =>        }
  19. // =>    }
  20. // =>}"
复制代码
8.从数组中删除重复元素(数组去重)
通过使用通过使用集合语法和 Spread(展开)运算符,您可以轻松地从数组中删除重复项:

  1. const removeDuplicateItems = arr => [...new Set(arr)];
  2. removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
  3. //=> [42, "foo", true]
复制代码
9.平铺多维数组
使用 Spread(展开),可以很容易去平铺嵌套多维数组:

  1. const arr = [11, [22, 33], [44, 55], 66];
  2. const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
复制代码
上面的方法仅仅适用于二维数组。不过,通过递归,我们可以平铺任意维度的嵌套数组。

  1. unction flattenArray(arr) {
  2. const flattened = [].concat(...arr);
  3. return flattened.some(item => Array.isArray(item)) ?
  4. flattenArray(flattened) : flattened;
  5. }
  6. const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
  7. const flatArr = flattenArray(arr);
  8. //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
复制代码

小伙伴些,你们掌握了几个技巧呢?
 

精彩评论4

正序浏览
于老斯 发表于 2018-11-1 12:58:06 | 显示全部楼层
 
沙发沙发沙发沙发沙发
 
老蚊子 发表于 2018-11-1 12:59:06 | 显示全部楼层
 
看看,到目前阶段,你看懂了几个?
 
石心 发表于 2018-11-1 15:51:17 来自手机 | 显示全部楼层
 
没抢到沙发,没关系来了就值了!
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

13粉丝

75帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )