JavaScript 常用简写技术
随着新 ECMAScript 标准的普及,许多曾经的 JavaScript 常见写法可以用更简单清楚的语法重构。本文做了一个简单的整理。
三元操作符
当想写 if...else
语句时,使用三元操作符来代替。
1 | const x = 20; |
简写:
1 | const answer = x > 10 ? "greater than 10" : "less than 10"; |
if
语句也可以像这样嵌套:
1 | const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10"; |
短路求值简写方式
当给一个变量赋值时,你可能想要确定值不是 null
,undefined
或空值。可以写一个多重条件的 if
语句:
1 | if (variable1 !== null || variable1 !== undefined || variable1 !== "") { |
或者可以使用短路求值方法:
1 | const variable2 = variable1 || "new"; |
另一个例子:
1 | let dbHost; |
简写:
1 | const dbHost = process.env.DB_HOST || "localhost"; |
声明变量简写方法
1 | let x; |
简写方法:
1 | let x, y, z = 3; |
if
存在条件简写方法
1 | if (likeJavaScript === true) |
简写:
1 | if (likeJavaScript) |
只有 likeJavaScript
是真值时,二者语句才相等。
如果判断值不是真值,则可以这样:
1 | let a; |
简写:
1 | let a; |
循环简写方法
1 | const fruits = ['mango', 'peach', 'banana']; |
简写:
1 | for (let fruit of fruits) { |
也可以使用 Array.forEach
:
1 | function logArrayElements(element, index, array) { |
十进制指数
当需要写数字带有很多零时(如 1000000),可以采用指数(1e6)来代替这个数字:
1 | for (let i = 0; i < 1000000; i++) {} |
简写:
1 | for (let i = 0; i < 1e7; i++) {} |
对象属性简写
如果属性名与键名相同,则可以采用 ES6 的方法:
1 | const x = 1920, y = 1080; |
简写:
1 | const obj = { x, y }; |
箭头函数简写
传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。
1 | function sayHello(name) { |
简写:
1 | sayHello = name => console.log("Hello", name); |
需要注意的是,箭头函数的 this
与用 function
关键字声明的函数不同,因此两者不完全等价。
隐式返回值简写
箭头函数同样用 return
关键字来返回其运行结果,但对于函数体只有一个语句的箭头函数,能隐式返回其值。正如前面的例子,箭头函数的大括号 {}
和 return
语句都省略了。如果返回值包括多行语句(例如一个对象),则需要使用 ()
包围函数体,避免语法错误。
1 | function calcCircumference(diameter) { |
简写:
1 | calcCircumference = diameter => ( |
默认参数值
为了给函数中参数传递默认值,通常使用 if
语句来编写,但是使用 ES6 定义默认值,则会很简洁:
1 | function volume(l, w, h) { |
简写:
1 | volume = (l, w = 3, h = 4) => (l * w * h); |
JavaScript 中如果没有向函数参数传递值,则默认为 undefined
。有时为了判断参数是否传入,可以使用 if
语句来抛出异常。
1 | function foo(bar) { |
这同样可以利用默认参数简写:
1 | mandatory = () => { |
模板字符串
传统的 JavaScript 语言,输出模板通常是这样写的:
1 | const welcome = "You have logged in as " + first + " " + last + "."; |
ES6 可以使用反引号和 ${}
构成的模板字符串:
1 | const welcome = `You have logged in as ${first} ${last}`; |
模版字符串中的换行符也将得到保留,因此可以直接写多行字符串。
有时你会需要使用 +
来拼接输出多行字符串:
1 | const lorem = "Lorem ipsum dolor sit amet, consectetur\n" |
使用模板字符串,则可以达到简写作用:
1 | const lorem = `Lorem ipsum dolor sit amet, consectetur |
解构赋值简写方法
在 Web 框架中,经常需要从组件和 API 之间来回传递数组或对象字面形式的数据,然后需要解构它
1 | const observable = require("mobx/observable"); |
简写:
1 | import { observable, action, runInAction } from "mobx"; |
你也可以分配不同的变量名:
1 | const { store, form, loading, errors, entity: contact } = this.props; |
Array.find
简写
想从数组中查找某个值,则需要循环。在 ES6 中,find()
函数能实现同样效果。
1 | const pets = [ |
简写:
1 | pet = pets.find(pet => pet.type === "Dog" && pet.name === "Tommy"); |
Object[key]
简写
考虑一个验证函数
1 | function validate(values) { |
假设当需要不同域和规则来验证,能否编写一个通用函数在运行时确认?
1 | // 对象验证规则 |
现在可以有适用于各种情况的验证函数,不需要为每种情况单独编写了。
双重非位运算简写
双重非运算操作符可以用来代替 Math.floor()
,其优势在于运行更快。
1 | Math.floor(4.9) === 4 //true |
简写
1 | ~~4.9 === 4 //true |
幂运算简写
曾经幂运算需要通过 Math.pow
完成
1 | Math.pow(2, 3); // 8 |
现在则可以使用 **
运算符
1 | 2 ** 3 // 8 |
本文转载自:19 个 JavaScript 常用的简写技术