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 条评论
登录 后参与评论

相关文章

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

MFC中注释含义

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

1907
来自专栏web前端教室

js不好学并不是因为它难,而是因为它容易混淆

这段时间我主讲的前端零基础课,让我感觉js这东西是越来越简单了。你当然可以说我这是越讲课越熟。确实是有这部分因素,但更主要的是,我发现js中虽然有许多的概念各不...

2287
来自专栏GopherCoder

『Go 语言学习专栏』-- 第三期

1333
来自专栏行者常至

012.golang 接口interface

701
来自专栏Golang语言社区

实效go编程--1

实效Go编程 版本:2013年12月22日 引言 示例 格式化 注释 命名 包名 获取器 接口名 驼峰记法 分号 控制结构 If 重新声明与再次赋值 For S...

3569
来自专栏北京马哥教育

Python最简编码规范

1857
来自专栏编程

这或许是对小白最友好的python入门了吧——2,变量和字符串

长期以来,编程界都认为刚接触一门新语言时,如果首先使用它来编写一个在屏幕上显示消息 “Hello world!” 的程序,将给你带来好运。 在Python中我...

1936
来自专栏Python爬虫实战

Google Python风格规范(上)

好的代码风格,给人舒服的感觉,今天介绍一下谷歌的Python风格规范,由于规范比较多,将分为两次介绍。

852
来自专栏chafezhou

fire让命令行接口更简单

1185
来自专栏极客猴

内容提取神器 beautiful Soup 的用法

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

793

扫码关注云+社区