让你5分钟掌握9个JavaScript小技巧


Posted in Javascript onJune 09, 2018

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

  • 原文: Learn these neat JavaScript tricks in less than 5 minutes
  • 译者: Fundebug

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

1. 删除数组尾部元素

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

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.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中继承任何属性或则方法(比如,constructor,toString()等等)。

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.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并没有对空对象做优化。

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
javascript 特殊字符串
Feb 25 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
JavaScript表单验证开发
Nov 23 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
JS实现区分中英文并统计字符个数的方法示例
Jun 09 #Javascript
详解angular脏检查原理及伪代码实现
Jun 08 #Javascript
解析vue路由异步组件和懒加载案例
Jun 08 #Javascript
node中modules.exports与exports导出的区别
Jun 08 #Javascript
Vue不能观察到数组length的变化
Jun 08 #Javascript
Node.js中的child_process模块详解
Jun 08 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JS原型链怎么理解
2016/06/27 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python实现实时监控文件的方法
2016/08/26 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Django重设Admin密码过程解析
2020/02/10 Python
信号生成及DFT的python实现方式
2020/02/25 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
授权委托书公证
2014/09/14 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
学期个人自我总结
2015/02/13 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL