对于任何基于 JavaScript 编程的开发人员来说,都有必要认证阅读一下这篇文章。 我写的这篇文章是学习 JavaScript 简写编码技巧的重要参考资料,这些技巧都是我多年学习和总结出来的。 为了有助于理解这些简写编码技巧,我也给出了相关的编码观点。 2017 年 6 月 14 日:本文已更新,增加了基于 ES6 新的简写技巧。 1. 三元操作符 当你想在一行代码中写一个 if..else 语句时,这是一个很好的节省代码的方式。 普通写法: JavaScript 代码: const x = 20; let answer; if (x> 10) {answer ='is greater';} else {answer ='is lesser';} 简写: JavaScript 代码: const answer = x > 10 ? 'greater than 10' : 'less than 10'; 你也可以像这样嵌套 if 语句: JavaScript 代码: const answer = x > 10 ? "greater than 10" : x 2. 缩短求值简写 将变量值分配给另一个变量时,你可能需要确保源变量不为 null、undefined 或者不为空。你可以使用多个条件写一个很长的 if 语句,也可以使用缩短求值的简写办法。 普通写法: JavaScript 代码: if (variable1 !== null || variable1 !== undefined || variable1 !=='') {let variable2 = variable1;} 简写: JavaScript 代码: const variable2 = variable1 || 'new'; 不相信我的话?你可以自己测试(在 es6console 中粘贴以下代码): JavaScript 代码: let variable1; let variable2 = variable1 || ''; console.log(variable2 ===''); // prints true variable1 = 'foo'; variable2 = variable1 || ''; console.log(variable2); // prints foo 3. 变量声明速简写 在函数开始处声明变量并赋值是一个很好的习惯。这种简写方法可以同时声明多个变量,为您节省大量的时间和空间。 普通写法: JavaScript 代码: let x; let y; let z = 3; 简写: JavaScript 代码: let x, y, z=3; 4. If 条件为真的简写 这可能是微不足道的,但值得一提。在做 "if 检查" 时,碰到条件为真时,比较运算操作可以省略。 普通写法: JavaScript 代码: if (likeJavaScript === true) 简写: JavaScript 代码: if (likeJavaScript) 注意: 这两个例子并不是完全相等,只要 likeJavaScript 变量是一个 真值,该表达式就是成立的。 还有另一个例子。如果 "a" 不等于 true ,如下: 普通写法: JavaScript 代码: let a; if (a !== true) {// do something...} 简写: JavaScript 代码: let a; if (!a) {// do something...} 5. JavaScript for 循环简写 如果你只想要简单的 JavaScript ,而不是依赖外部库,如 jQuery 或 lodash,那这个小技巧会非常有用。 普通写法: JavaScript 代码: for (let i = 0; i < allImgs.length; i++) 简写: JavaScript 代码: for (let index of allImgs) Array.forEach 简写: JavaScript 代码: function logArrayElements(element, index, array) {console.log("a["+ index +"] = "+ element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9 6. 缩短求值 我们可以简单地使用缩短逻辑运算符,只用一行代码完成相同的事情,而不是写 6 行代码来分配缺省值。 普通写法: JavaScript 代码: let dbHost; if (process.env.DB_HOST) {dbHost = process.env.DB_HOST;} else {dbHost ='localhost';} 简写: JavaScript 代码: const dbHost = process.env.DB_HOST || 'localhost'; 7. 十进制数指数 你可能见过这个这种写法。它本质上是一种比较花哨的数字表示法,省去了后面尾随的一堆零。例如,1e7 实际上表示 1 后面跟着 7 个零。它表示一个十进制基数指数 (JavaScript 解释为浮点类型),等于 10,000,000。 普通写法: JavaScript 代码: for (let i = 0; i < 10000; i++) {} 简写: JavaScript 代码: for (let i = 0; i < 1e7; i++) {} // 以下将全部求值为 true 1e0 === 1; 1e1 === 10; 1e2 === 100; 1e3 === 1000; 1e4 === 10000; 1e5 === 100000; 8. 对象属性简写 在 JavaScript 中定义对象字面量非常容易。ES6 提供了一种更简单的方法来将属性分配给对象。如果 name 和 key 名字相同,则可以利用简写符号。 普通写法: JavaScript 代码: const obj = { x:x, y:y}; 简写: JavaScript 代码: const obj = {x, y}; 9. 箭头函数简写 普通写法的函数很容易阅读和书写,但是一旦开始在其他函数调用中嵌套它们,它们就会变得有点冗长和混乱。 普通写法: JavaScript 代码: function sayHello(name) {console.log('Hello', name); } setTimeout(function() {console.log('Loaded')}, 2000); list.forEach(function(item) {console.log(item); }); 简写: JavaScript 代码: sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'), 2000); list.forEach(item => console.log(item)); 需要注意的是,在箭头函数内部的 this 值的确定方式不同于普通写法的函数,所以这两个例子并不完全相同。有关更多详细信息,请参阅 这篇文章中的箭头函数语法。 10. 隐式返回简写 我们经常使用 return 关键字来返回一个函数的最终结果。使用单条语句的箭头函数将隐式返回求值结果(该函数必须省略大括号({})才能省略 return 关键字)。 要返回多行表达式(如对象字面量),那么需要用 () 而不是 {} 来包裹你的函数体。这样可以确保代码作为一个单独的表达式被求值返回。 普通写法: JavaScript 代码: function calcCircumference(diameter) {return Math.PI * diameter} 简写: JavaScript 代码: calcCircumference = diameter => (Math.PI * diameter;) 11. 参数默认值 你可以使用 if 语句为函数参数定义默认值。在 ES6 中,你可以在函数声明本身中定义参数默认值。 普通写法: JavaScript 代码: function volume(l, w, h) {if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h; } 简写: JavaScript 代码: volume = (l, w = 3, h = 4) => (l * w * h); volume(2) //output: 24 12. 模板字面量 你是不是已经厌倦了用 '+' 来连接多个变量拼接成一个字符串?有没有更简单的方式来完成吗?如果你可以使用 ES6 的话,那么恭喜你,你要做的只是使用反引号和 ${} 来包裹你的变量。 普通写法: JavaScript 代码: const welcome ='You have logged in as '+ first +' '+ last +'.'const db ='http://'+ host +':'+ port +'/'+ database; 简写: JavaScript 代码: const welcome = `You have logged in as ${first} ${last}`; const db = `http://${host}:${port}/${database}`; 13. 解构赋值简写 如果你正在使用任何流行的 web 框架,那么你很有可能会使用数组或者对象字面量形式的数据在组件和 API 之间传递信息。一旦组件接收到数据对象,你就需要将其展开。 普通写法: JavaScript 代码: const observable = require('mobx/observable'); const action = require('mobx/action'); const runInAction = require('mobx/runInAction'); const store = this.props.store; const form = this.props.form; const loading = this.props.loading; const errors = this.props.errors; const entity = this.props.entity; 简写: JavaScript 代码: import {observable, action, runInAction} from 'mobx'; const {store, form, loading, errors, entity} = this.props; 你甚至可以给变量重新分配变量名: JavaScript 代码: const {store, form, loading, errors, entity:contact} = this.props; 14. 多行字符串简写 如果你曾经发现自己需要在代码中编写多行字符串,那么你将会这样写: 普通写法: JavaScript 代码: const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t' + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t' + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t' + 'veniam, quis nostrud exercitation ullamco laboris\n\t' + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t' + 'irure dolor in reprehenderit in voluptate velit esse.\n\t' 但是有一种更简单的方法。只需使用反引号。 简写: JavaScript 代码: const lorem = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.` 15. 展开运算符简写 在 ES6 中引入的 展开运算符 有几个用例,使 JavaScript 代码更高效、更有趣。它可以用来替换某些数组函数。展开运算符写起来很简单,就是三个点。 普通写法: JavaScript 代码: // 拼接数组 const odd = [1, 3, 5]; const nums = [2 ,4 , 6].concat(odd); // 克隆数组 const arr = [1, 2, 3, 4]; const arr2 = arr.slice() 简写: JavaScript 代码: // 拼接数组 const odd = [1, 3, 5]; const nums = [2 ,4 , 6, ...odd]; console.log(nums); // [2, 4, 6, 1, 3, 5] // 克隆数组 const arr = [1, 2, 3, 4]; const arr2 = [...arr]; 和 concat() 函数不同,你可以在另一个数组里的任意位置插入一个数组。 JavaScript 代码: const odd = [1, 3, 5]; const nums = [2, ...odd, 4 , 6]; 你也可以将展开运算符和 ES6 解构赋值结合起来使用: JavaScript 代码: const {a, b, ...z} = {a: 1, b: 2, c: 3, d: 4}; console.log(a) // 1 console.log(b) // 2 console.log(z) // {c: 3, d: 4} 16. 强制参数简写 默认情况下,如果 JavaScript 传递的值没赋值,它将设置函数参数为 undefined 。其他一些语言会抛出警告或错误。为了强制给参数赋值,如果参数没有定义的话,你可以使用 if 表达式抛出错误,或者可以可以利用强制参数简写。 普通写法: JavaScript 代码: function foo(bar) {if(bar === undefined) {throw new Error('Missing parameter!');} return bar; } 简写: JavaScript 代码: mandatory = () => {throw new Error('Missing parameter!');} foo = (bar = mandatory()) => {return bar;} 17. Array.find 简写 如果你曾经使用原生 JavaScript 写一个查找函数,你可能会使用 for 循环。在 ES6 中,你可以使用名为 find() 的新数组函数。 普通写法: JavaScript 代码: const pets = [ { type:'Dog', name:'Max'}, {type:'Cat', name:'Karl'}, {type:'Dog', name:'Tommy'},] function findDog(name) { for(let i = 0; i
来源: http://www.qdfuns.com/notes/48737/3a7e257c52967fced0d44ba550e25570.html