JavaScript 开发人员需要知道的简写技巧
本文翻译自:https://www.sitepoint.com/shorthand-javascript-techniques/
转载请注明出自:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。
本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
文章将分成初级篇和高级篇两部分,分别进行介绍。
初级篇
1、三目运算符
下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。
const x = 20;
let answer;
if (x > 10) {
answer = 'greater than 10';
} else {
answer = 'less than 10';
}
简写为:
const answer = x > 10 ? 'greater than 10' : 'less than 10';
2、循环语句
当使用纯 JavaScript(不依赖外部库,如 jQuery 或 lodash)时,下面的简写会非常有用。
for (let i = 0; i < allImgs.length; i++)
简写为:
for (let index of allImgs)
下面是遍历数组 forEach 的简写示例:
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
3、声明变量
在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时:
let x;
let y;
let z = 3;
可以简写为:
let x, y, z=3;
4、if 语句
在使用 if 进行基本判断时,可以省略赋值运算符。
if (likeJavaScript === true)
简写为:
if (likeJavaScript)
5、十进制数
可以使用科学计数法来代替较大的数据,如可以将 10000000 简写为 1e7。
for (let i = 0; i < 10000; i++) { }
简写为:
for (let i = 0; i < 1e7; i++) { }
6、多行字符串
如果需要在代码中编写多行字符串,就像下面这样:
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'
但是还有一个更简单的方法,只使用引号:
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.`
高级篇
1、变量赋值
当将一个变量的值赋给另一个变量时,首先需要确保原值不是 null、未定义的或空值。
可以通过编写一个包含多个条件的判断语句来实现:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
或者简写为以下的形式:
const variable2 = variable1 || 'new';
可以将下面的代码粘贴到 es6console 中,自己测试:
let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // prints foo
2、默认值赋值
如果预期参数是 null 或未定义,则不需要写六行代码来分配默认值。我们可以只使用一个简短的逻辑运算符,只用一行代码就能完成相同的操作。
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
简写为:
const dbHost = process.env.DB_HOST || 'localhost';
3、对象属性
ES6 提供了一个很简单的办法,来分配属性的对象。如果属性名与 key 名相同,则可以使用简写。
const obj = { x:x, y:y };
简写为:
const obj = { x, y };
4、箭头函数
经典函数很容易读写,但是如果把它们嵌套在其它函数中进行调用时,整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写:
function sayHello(name) {
console.log('Hello', name);
} setTimeout(function() {
console.log('Loaded')
}, 2000); list.forEach(function(item) {
console.log(item);
});
简写为:
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
5、隐式返回值
返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数,可以隐式返回结果(函数必须省略括号({ }),以便省略返回关键字)。
要返回多行语句(例如对象文本),需要使用()而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
function calcCircumference(diameter) {
return Math.PI * diameter
}
简写为:
calcCircumference = diameter => (
Math.PI * diameter;
)
6、默认参数值
可以使用 if 语句来定义函数参数的默认值。ES6 中规定了可以在函数声明中定义默认值。
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
简写为:
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
7、模板字符串
过去我们习惯了使用“+”将多个变量转换为字符串,但是有没有更简单的方法呢?
ES6 提供了相应的方法,我们可以使用反引号和 $ { } 将变量合成一个字符串。
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;
简写为:
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
8、解构赋值
解构赋值是一种表达式,用于从数组或对象中快速提取属性值,并赋给定义的变量。
在代码简写方面,解构赋值能达到很好的效果。
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;
简写为:
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
甚至可以指定自己的变量名:
const { store, form, loading, errors, entity:contact } = this.props;
9、展开运算符
展开运算符是在 ES6 中引入的,使用展开运算符能够让 JavaScript 代码更加有效和有趣。
使用展开运算符可以替换某些数组函数。
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd); // cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )
简写为:
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ] // cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
和 concat( ) 功能不同的是,用户可以使用扩展运算符在任何一个数组中插入另一个数组。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
也可以将展开运算符和 ES6 解构符号结合使用:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) //
console.log(b) //
console.log(z) // { c: 3, d: 4 }
10、强制参数
默认情况下,如果不向函数参数传值,那么 JavaScript 会将函数参数设置为未定义。其它一些语言则会发出警告或错误。要执行参数分配,可以使用if语句抛出未定义的错误,或者可以利用“强制参数”。
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
简写为:
mandatory = ( ) => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
return bar;
}
11、Array.find
如果你曾经编写过普通 JavaScript 中的 find 函数,那么你可能使用了 for 循环。在 ES6 中,介绍了一种名为 find()的新数组函数,可以实现 for 循环的简写。
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
简写为:
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
12、Object [key]
虽然将 foo.bar 写成 foo ['bar'] 是一种常见的做法,但是这种做法构成了编写可重用代码的基础。
请考虑下面这个验证函数的简化示例:
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true
上面的函数完美的完成验证工作。但是当有很多表单,则需要应用验证,此时会有不同的字段和规则。如果可以构建一个在运行时配置的通用验证函数,会是一个好选择。
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
} // universal validation function
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
现在有了这个验证函数,我们就可以在所有窗体中重用,而无需为每个窗体编写自定义验证函数。
13、双位操作符
位操作符是 JavaScript 初级教程的基本知识点,但是我们却不常使用位操作符。因为在不处理二进制的情况下,没有人愿意使用 1 和 0。
但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快。
Math.floor(4.9) === 4 //true
简写为:
~~4.9 === 4 //true
总结
上述是一些常用的 JavaScript 简写技巧,如果有其它未提及的简写技巧,也欢迎大家补充。
相关阅读:
JavaScript 开发人员需要知道的简写技巧的更多相关文章
- 2013年JavaScript开发人员调查结果
JavaScript开发人员调查现在已经结束,一如既往社区对结果进行了进一步分析: 总结(汉语) 原始数据(电子表格) 2012年结果 51%的被参与者写客户端代码,而28%的人说他们编写服务器端代码 ...
- 每个JavaScript开发人员应该知道的33个概念
每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...
- JavaScript开发人员必知的10个关键习惯
还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧! 随着新技术的不断发展,JavaScript已 ...
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...
- 初中级Web开发人员的福音:《JavaScript启示录》上市了
经历过14个月的等待,本书终于上市了,完全口语化叙述,请参考右边的链接. 本书介绍 本书无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现.本书的写作目的也不是鉴别Jav ...
- MongoDB成为最受开发人员期待的数据库系统
本文翻译之MongoDB官方博客,原文地址:https://www.mongodb.com/blog/post/stack-overflow-research-developers-mongodb-m ...
- JavaScript 开发的45个经典技巧
JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...
- 15个值得开发人员关注的jQuery开发技巧和心得
在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高 ...
- JavaScript简写技巧总结
在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去 ...
随机推荐
- Java中的基本数据类型和基本数据类型之间的转换
在Java中有8中基本数据类型,分别为: 整型: byte.short.int.long 浮点型:float.double 布尔型:boolean 字符型:char. byte: 8位, 封装 ...
- 201521123117 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- java基础知识4--数组的常用方法(Array)
先说一个idea编辑器的问题,编辑器的光标变成黑色光标无法移动,按一下insert键就好了. 数组是线性数据存储结构.它用牺牲自动扩展大小来换取与集合相比的唯一优势--查询效率的提升.本身是一种引用类 ...
- php-laravel4.0框架 简单快速入门
前提必须已经安装好了laravel4.0版本. 写入权限: 安装完 Laravel ,你还需要为web服务器设置 app/storage 目录的写入权限. 目录结构: 安装完框架后,你需要熟悉一下该项 ...
- hadoop各个类及其作用
1.基础包(包括工具包和安全包) 包括工具和安全包.其中,hdfs.util包含了一些HDFS实现需要的辅助数据结构:hdfs.security.token.block和hdfs.security.t ...
- pig hive hbase比较
Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是有些公司在用,不过我 ...
- 读Zepto源码之Gesture模块
Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- CANVAS模仿龙卷风特效
大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...
- tomcat部署在centos6.8上的乱码问题
web访问经常会莫名其妙的出现各种乱码问题.按照我自己的理解,设置一个charSet的过滤器,代码如下:import java.io.IOException; import javax.servlet ...
- Online Bayesian Probit Regression介绍之Factor Graph
下面就开始讲讲概率图中的Factor Graph.概率图博大精深,非我等鼠辈能够完全掌握,我只是通过研究一些通用的模型,对概率图了解了一点皮毛.其实我只是从概率这头神兽身上盲人摸象地抓掉几根毛,我打算 ...