让你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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
openPNE常用方法分享
2011/11/29 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Vue实现本地购物车功能
2018/12/05 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
什么时候用assert
2015/05/08 面试题
大学自我鉴定
2013/12/20 职场文书
社区工作感言
2014/02/21 职场文书
职业女性的职业规划
2014/03/04 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
团日活动总结格式
2015/05/11 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Python 文字识别
2022/05/11 Python