JavaScript 是属于网络的脚本语言！被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。同时很容易使用，所以越来越多的开发者选择js代码来实现自己想要的效果，但开发过程中，为了更高的效率和良好的代码规范要求，我们不得不知晓js一些常用的简写技巧，如下我帮大家整理了下，一起进来看看吧~
1. 三元运算符
当你想用一行代码来写if...else语句的时候，使用三元操作符是非常好的选择，例如：
可以简写为：
const answer = x > 10 ? 'is greater' : 'is lesser';
也可以嵌套if语句：
const big = x > 10 ? " greater 10" : x
2. 简写短路求值
当给一个变量分配另一个值的时候，你可能想确定初值不是null，undefined或空值。这时，你可以写一个多重条件的if语句：
或者可以使用短路求值的方法：
const variable2 = variable1 || 'new';
3. 简写变量声明
在定义函数的时候，你可能需要先声明多个变量，例如：
这时，你可以使用简写的方式节省很多时间和空间，即同时声明多个变量：
let x,y,z=3;
4. 简写 if 执行条件
这可能微不足道，但值得一提。在你做if条件检查的时候，其赋值操作可以省略，例如：
if (likeJavaScript === true)
可以简写为：
if (likeJavaScript)
只有当likeJavaScript是真值的时候，以上两个语句才可以替换。如果判断假值，例如：
可以简写为：
5. 简写 JavaScript 循环方法
当你想使用纯 javascript 而不依赖外库（例如jQuery）的时候，这是非常有用的。
for (let i = 0; i < allImgs.length; i++)
可以简写为：
for (let index in allImgs)
也可以使用Array.forEach：
可以简写为：
const dbHost = process.env.DB_HOST || 'localhost';
7. 十进制指数
当数字的尾部为很多的零时（如10000000），咱们可以使用指数（1e7）来代替这个数字，例如：
for (let i = 0; i < 10000; i++) {}
可以简写为：
for (let i = 0; i < 1e7; i++) {}
8. 简写对象属性
在 JavaScript 中定义对象很简单，而且ES6提供了一个更简单的分配对象属性的方法。如果属性名与key值相同，例如：
const obj = { x:x,y:y };
则可以简写为：
const obj = { x,y };
9. 简写箭头函数
传统函数很容易让人理解和编写，但是当它嵌套在另一个函数中的时候，它就会变得冗长和混乱。例如：
这时，可以简写为：
sayHello = name => console.log('Hello',name);
setTimeout(() => console.log('Loaded'),2000);
list.forEach(item => console.log(item));
10. 简写隐式返回值
我们经常使用return语句来返回函数最终结果，仅有一行声明语句的箭头函数能隐式返回其值（这时函数必须省略{}以便省略return关键字）。如果想要返回多行语句，则需要使用()包围函数体。例如：
可以简写为：
11. 默认参数值
我们经常可以使用if语句来为函数中的参数定义默认值。但是在ES6中，咱们可以在函数本身声明参数的默认值。例如：
可以简写为：
volume = (l,w = 3,h = 4 ) => (l * w * h);
volume(2) // output: 24
12. 字符串模板
你是不是厌倦了使用+将多个变量转换为字符串？有没有更简单的方法呢？如果你能够使用ES6，那么很幸运，你仅需使用反引号并将变量置于${}之中即可。例如：
可以简写为：
http://${host}:${port}/${database};
13. 简写赋值方法
如果你正在使用任何流行的 Web 框架，那么你很有可能使用数组或以对象本文的形式将数据在组件和 API 之间进行通信。一旦数据对象到达一个组件，你就需要解压它。例如：
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
可以简写为：
也可以分配变量名：
// 最后一个变量名为 contact
const { store,entity:contact } = this.props;
14. 简写多行字符串
如果你曾发现自己需要在代码中编写多行字符串，那么这估计就是你编写它们的方法，即在输出的多行字符串间用+来拼接：
但是如果使用反引号，你就可以达到简写的目的：
15. 扩展运算符
在ES6中，包括扩展运算符，它可以使你的操作更简单，例如：
const arr = [1,2,4];
const arr2 = arr.slice()
可以简写为：
const arr = [1,4];
const arr2 = [...arr];
不像concat()函数，你可以使用扩展运算符在一个数组中任意处插入另一个数组，例如：
也可以使用扩展运算符：
16. 强制参数
默认情况下，如果不传递值，JavaScript 会将函数参数设置为undefined，而其他一些语言则会报出警告或错误。想要执行参数分配，则可以让if语句抛出undefined的错误，或者使用“强制参数”的方法。例如：
可以简写为：
foo = (bar = mandatory()) => {
return bar;
}
17. Array.find 简写
如果你曾负责编写 JavaScript 中的find函数，那么你很有可能使用了for循环。在此，介绍ES6中一个名为find()的数组函数。
可以简写为：
18. 简写 Object[key]
你知道Foo.bar也可以写成Foo['bar']吗？起初，似乎没有什么理由让你这样写。然而，这个符号给了你编写可重用代码的基础。考虑如下简化的验证函数示例：
这个函数可以完美的完成它的任务。但是，考虑一个场景，你有很多表单，你需要进行验证，但有不同的字段和规则。那么，构建一个可以在运行时配置的通用验证函数不是很好吗？
const validate = (schema,values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema,{first:'Bruce'})); // false
console.log(validate(schema,{first:'Bruce',last:'Wayne'})); // true
现在我们就有了一个可以在所有的form中重用的验证函数，而无需为每个form编写其自定义的验证函数啦！
19. 简写双重按位非运算符
按位运算符绝对是你初学 JavaScript 时了解的但一直没有用武之地的运算符。因为如果不处理二进制，谁会没事操作0和1呢？但是，双重按位非运算符非常实用，例如你可以使用它来替代floor()函数，而且与其他相同的操作相比，按位运算符的操作速度更快。
Math.floor(4.9) === 4 //true
可以简写为：
~~4.9 === 4 //true
20. Suggest One of U?
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对编程之家的支持!
原文链接：https://www.f2er.com/js/37038.html