5分钟掌握JavaScript小技巧

译者按: 技巧虽好、重在掌握并使用起来!

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

1. 删除数组尾部元素

一个简单的用来清空或则删除数组尾部元素的简单方法就是改变数组的length属性值。

const arr = [11, 22, 33, 44, 55, 66];// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]// clearingarr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined

2.使用对象解构来模拟命名参数

如果你需要将一系列可选项作为参数传入函数,那么你也许倾向于使用了一个对象(Object)来定义配置(Config)。

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });function doSomething(config) { const foo = config.foo !== undefined ? config.foo : 'Hi'; const bar = config.bar !== undefined ? config.bar : 'Yo!'; const baz = config.baz !== undefined ? config.baz : 13; // ...}

这是一个陈旧、但是很有效的方法,它模拟了JavaScript中的命名参数。不过呢,在doSomething中处理config的方式略显繁琐。在ES2015中,你可以直接使用对象解构。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}

如果你想让这个参数是可选的,也很简单。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}

3. 使用对象解构来处理数组

可以使用对象解构的语法来获取数组的元素:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';const { 2: country, 4: state } = csvFileLine.split(',');

4. 在switch语句中用范围值

可以使用下面的技巧来写满足范围值的switch语句:

function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius <= 0): state = 'Solid'; break; case (tempInCelsius > 0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; } return state;}

5. await多个async函数

在使用async/await的时候,可以使用Promise.all来await多个async函数。

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. 创建一个纯(pure)对象

你可以创建一个100%的纯对象,他不从Object中继承任何属性或则方法(比如,constructortoString()等等)。

const pureObject = Object.create(null);console.log(pureObject); //=> {}console.log(pureObject.constructor); //=> undefinedconsole.log(pureObject.toString); //=> undefinedconsole.log(pureObject.hasOwnProperty); //=> undefined

7. 格式化JSON代码

JSON.stringify不止可以将一个对象字符化,还可以格式化输出JSON对象。

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// => "foo": {// => "bar": [// => 11,// => 22,// => 33,// => 44// => ],// => "baz": {// => "bing": true,// => "boom": "Hello"// => }// => }// =>}"

8. 从数组中移除重复元素

ES2015中,有了集合的语法。通过使用集合语法和Spread操作,可以很容易将重复的元素移除:

const removeDuplicateItems = arr => [...new Set(arr)];removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);//=> [42, "foo", true]

9. 平铺多维数组

使用Spread操作,可以很容易去平铺嵌套多维数组:

const arr = [11, [22, 33], [44, 55], 66];const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

可惜,上面的方法仅仅适用于二维数组。不过,通过递归,我们可以平铺任意维度的嵌套数组。

unction flattenArray(arr) { const flattened = [].concat(...arr); return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;}const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];const flatArr = flattenArray(arr); //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

就这些啦!我希望这些小技巧可以帮你写出更加漂亮的JS代码!如果还不够,那么不妨用Fundebug做你的辅助!

精选评论

  • Ethan B Martin: 这个switch的写法很巧妙,不过不推荐。请不要鼓励开发者用这种方式去写JS代码。我们曾经有一个工程师这么写,后来在代码review的时候,造成了很大的阅读苦难。好在我们及时将其重构为更加容易读懂的代码。不妨对比一下用swtich和if的区别: function getWaterState1(tempInCelsius) { let state; switch (true) { case (tempInCelsius <= 0): state = 'Solid'; break; case (tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; } return state; } function getWaterState2(tempInCelsius) { if (tempInCelsius <= 0) { return 'Solid'; } if (tempInCelsius < 100) { return 'Liquid'; } return 'Gas'; } 第二种写法有几点优势: A) 代码量更少,更加易读;B) 你不需要声明一个局部变量,读者不会一直要去追踪你如何对这个变量做了更改;C) switch(true)真的会让人莫名其妙。
  • Flo Sloot: 很棒的文章!不过不推荐第六招,除非你一定要使用。因为它的执行效率很慢,而且占用空间更大。因为V8并没有对空对象做优化。
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/05/07/learn_js_tricks_in_5_minutes/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright * { box-sizing: border-box; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青玉伏案

算法与数据结构(十六) 快速排序(Swift 3.0版)

 上篇博客我们主要聊了比较高效的归并排序算法,本篇博客我们就来介绍另一种高效的排序算法:快速排序。快速排序的思想与归并排序类似,都是采用分而治之的方式进行排序的...

2105
来自专栏北京马哥教育

Python最简编码规范

1757
来自专栏守候书阁

让我印象深刻的javascript面试题

对于一个web前端来说,面试的时候,难免会遇到javascript的面试题。就我自己而言。有几道面试题,有些是我面试遇到的,有些是在网上看到的,但是都印象深刻。...

783
来自专栏极客猴

内容提取神器 beautiful Soup 的用法

上篇文章只是简单讲述正则表达式如何读懂以及 re 常见的函数的用法。我们可能读懂别人的正则表达式,但是要自己写起正则表达式的话,可能会陷入如何写的困境。正则表达...

683
来自专栏chafezhou

fire让命令行接口更简单

1105
来自专栏云瓣

从 JavaScript 到 TypeScript

TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集,为 JavaScript 的生态增加了类型机制,并最终将代码编译为纯粹的 J...

2434
来自专栏软件开发 -- 分享 互助 成长

工厂方法模式

一、相关介绍 1、工厂方法模式定义一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 2、UML图 ? 3、所属类别:创建...

1917
来自专栏python3

习题33:字典

dict可以让你通过任何东西找到元素,不只是数字,字典可以将一个物件和另外一个东西关联,不管它们的类型是什么,举例说明

793
来自专栏xingoo, 一个梦想做发明家的程序员

MFC中注释含义

下面是 CStdioFile 类的部分列表,其中使用了 MFC 在其类中按类成员的用法划分它们时所采用的大多数标准注释: class CStdioFile :...

1857
来自专栏IMWeb前端团队

走进Sass殿堂

最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~ 一、变量篇 1.1 ...

17810

扫码关注云+社区