5分钟掌握JavaScript小技巧

  

  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,[email protected],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并没有对空对象做优化。

  

?

原文地址:https://www.cnblogs.com/qfdsj/p/9117765.html

时间: 2024-10-12 09:32:54

5分钟掌握JavaScript小技巧的相关文章

JavaScript小技巧

1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 1 2 3 4 5 6 7 var myVar   = "3.14159", str     = ""+ myVar,//  to string int     = ~~myVar,  //  to integer float   = 1*myVar,

常用的javascript小技巧

字符串转换为数值 常规方法: var var1 = parseInt("2"); var var2 = parseFloat("2"); var var3 = Number("2"); var var3 = new Number("2"); 简便方法: var var1 = +("2"); 将其他类型转换为boolean类型 在JavaScript中,所有值都能隐式的转化为Boolean类型: 数据类型 转

javascript小技巧之with()方法

With()方法平时用得不多,本文用个小例子来学习一下.在这里记录.个人感觉还是很方便的. 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关.With 语句的语法格式如下所示:With Object {Statements}对象指明了当语句组中对象缺省时的参考对象,这里我们用较为熟悉的 Document 对象对 With 语句举例.例如 当使用与 Document 对象有关的 wr

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

前端知识:12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

javascript小技巧-js小技巧收集(转)

本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得

( 译、持续更新 ) JavaScript小技巧介绍

感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅.原文 能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性:performance(性能), conventions(协议), hacks(代码hack)

10个JavaScript小技巧

1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 1 var myVar = "3.14159", 2 3 str = ""+ myVar,// to string 4 5 int = ~~myVar, // to integer 6 7 float = 1*myVar, // to float 8

javascript小技巧(非常全)

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.act