19个JavaScript 代码简写技巧

2017-06-21阅读(2430)评论(0)牵着狗狗看MM

苏州实时公交查询

1.三元运算符

当你想在一行中写if..else 语句时,三元运算符是个很好的选择。

标准写法:
[js]const x = 20;
let answer;
if (x > 10) {
answer = ‘is greater’;
} else {
answer = ‘is lesser’;
}
[/js]

简写:

[js]const answer = x > 10 ? ‘is greater’ : ‘is lesser’;
[/js]

你也可以嵌套if语句:
[js]const big = x > 10 ? " greater 10" : x
[/js]

2.短路求值简写

将变量值赋值给另一个变量时,可能需要确保源变量不为空,未定义或为空。 您可以使用多个条件来写一个很长的if条件,也可以简写。

标准写法:
[js]if (variable1 !== null || variable1 !== undefined || variable1 !== ”) {
let variable2 = variable1;
}
[/js]

简写:
[js]const variable2 = variable1 || ‘new’;
[/js]

如果不信的话,自己试下(把下面代码复制黏贴到 es6console

[js]let variable1;
let variable2 = variable1 || ”;
console.log(variable2 === ”); // 打印 true

variable1 = ‘foo’;
variable2 = variable1 || ”;
console.log(variable2); // 打印 foo
[/js]

3.声明变量

在函数开始时声明变量赋值是个好习惯。 在需要同时声明多个变量时,这种简写方法可以节省大量的时间和空间。

标准写法:
[js]let x;
let y;
let z = 3;
[/js]

简写:

[js]let x, y, z=3;
[/js]

4.if语句简写

这可能微不足道,但值得一提。在执行”if”语句时,有时可以忽略赋值运算符。

标准写法:
[js]if (likeJavaScript === true)
[/js]

简写:

[js]if (likeJavaScript)
[/js]

注意: 注意:这两个例子并不完全相同,只要likeJavaScript是一个真值 ,速记检查就会通过

这是另一个例子。 如果“a”不等于true,则继续。

标准写法:
[js]
let a;
if ( a !== true ) {
// do something…
}
[/js]

简写:

[js]let a;
if ( !a ) {
// do something…
}
[/js]

5.循环简写

如果您想要原生JavaScript并且不依赖外部库(如jQuery或lodash),这个就非常有用。

标准写法:

[js]for (let i = 0; i < allImgs.length; i++)
[/js]

简写:

[js]for (let index in allImgs)
[/js]

对于Array.forEach:

[js]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
[/js]

6.短路求值

我们不需要写六行代码来分配默认值,如果预期参数是null或未定义的,我们可以只使用一个短路逻辑运算符,只用一行代码完成相同的操作。

标准写法:

[js]let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = ‘localhost’;
}
[/js]

简写:

[js]const dbHost = process.env.DB_HOST || ‘localhost’;
[/js]

7.十进制指数

你可能之前有看过。它本质上是一种奇特的方法,不用尾随零来写数字。例如,1e7意味着1后面7个零。它代表一个小数基数(JavaScript解释为浮点类型)等于10000000。
标准写法:

[js]for (let i = 0; i < 10000; i++) {}
[/js]

简写:

[js]for (let i = 0; i < 1e7; i++) {}

// 下面所有的返回都是ture
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
[/js]

8.对象属性的简写

ES6为对象分配属性提供了一种更简单的方法。 如果属性名称与密钥名称相同,则可以利用简写符号。

标准写法:

[js]const obj = { x:x, y:y };
[/js]

简写:

[js]const obj = { x, y };
[/js]

9.箭头函数

经典函数的形式简单,易于阅读和书写。但一旦开始将其嵌套在其他函数调用中,它们往往会变得有点冗长和混乱。

标准写法:

[js]function sayHello(name) {
console.log(‘Hello’, name);
}

setTimeout(function() {
console.log(‘Loaded’)
}, 2000);

list.forEach(function(item) {
console.log(item);
});
[/js]

简写:

[js]sayHello = name => console.log(‘Hello’, name);

setTimeout(() => console.log(‘Loaded’), 2000);

list.forEach(item => console.log(item));
[/js]

10.省略 return

return是我们经常使用的返回函数的最终结果的关键字。 一个使用单个语句的箭头函数会隐藏地返回结果的评估(该函数必须省略大括号( {} ),以省略return关键字)
要返回多行语句(例​​如对象文字),必须使用()而不是{}来包装函数体。 这样可以确保代码被求值为单个语句。

标准写法:

[js]function calcCircumference(diameter) {
return Math.PI * diameter
}
[/js]

简写:

[js]calcCircumference = diameter => (
Math.PI * diameter;
)
[/js]

11.默认参数值

您可以使用if语句为函数参数定义默认值。 在ES6中,您可以在函数声明本身中定义默认值。

标准写法:

[js]function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
[/js]

简写:

[js]volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //输出: 24
[/js]

12.模板常量

你是不是厌倦了使用' + '将多个变量转换为字符串?这样做有没有更简单的方法呢?如果你能够使用ES6,那么你是幸运的。所有你需要做的是使用反引号,和${}附上你的变量。
标准写法:
[js]const welcome = ‘You have logged in as ‘ + first + ‘ ‘ + last + ‘.’

const db = ‘http://’ + host + ‘:’ + port + ‘/’ + database;
[/js]

简写:

[js]const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;
[/js]

13.解构赋值

如果您正在使用任何流行的Web框架,您将很有可能以对象文本的形式使用数组或数据来传递组件和api之间的信息。一旦数据对象到达一个组件,您就需要解压它。

标准写法:
[js]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;
[/js]

简写:

[js]import { observable, action, runInAction } from ‘mobx’;

const { store, form, loading, errors, entity } = this.props;
[/js]

14.多行字符串

如果您曾经发现自己需要在代码中编写多行字符串,下面就是如何去编写的:
标准写法:
[js]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’
[/js]
这里有一个更简单的方法。 只需使用反引号。
简写:

[js]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.`
[/js]

15.扩展运算符

在ES6中引入的扩展运算符有几个用例,使JavaScript代码更有效率,更有趣的使用。 它可以用于替换某些数组函数。扩展运算符简单的说就是三个点(...)。

标准写法:
[js]// 加入数组
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// 克隆数组
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
[/js]

简写:

[js]// 加入数组
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];
[/js]

concat()函数不一样的是,您可以使用扩展运算符将数组插入另一个数组的任何位置。

[js]const odd = [1, 3, 5 ];
const nums = [2, …odd, 4 , 6];
[/js]
您还可以将扩展运算符与ES6解构符号组合:

[js]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 }
[/js]

16.强类型参数

默认情况下,JavaScript将函数参数设置为undefined如果它们未传递值。 其他一些语言会引发警告或错误。 要强制设定参数类型,可以使用if语句在undefined抛出错误,或者您可以利用强类型参数的简写。
标准写法:
[js]function foo(bar) {
if(bar === undefined) {
throw new Error(‘Missing parameter!’);
}
return bar;
}
[/js]

简写:

[js]mandatory = () => {
throw new Error(‘Missing parameter!’);
}

foo = (bar = mandatory()) => {
return bar;
}
[/js]

17.Array.find

如果您曾经负责编写普通JavaScript中的find函数,那么您可能使用了for循环。在ES6中,介绍了一种新的数组函数find()
标准写法:
[js]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];
}
}
}
[/js]

简写:

[js]pet = pets.find(pet => pet.type ===’Dog’ && pet.name === ‘Tommy’);
console.log(pet); // { type: ‘Dog’, name: ‘Tommy’ }
[/js]

18.对象 [key]

你知道foo.bar也可以写成 Foo['bar']吗?起初,似乎没有什么理由让你这样写。然而,这个标记给了你编写可重用代码的基础。
请考虑这个验证函数的简化示例:

[js]function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}

console.log(validate({first:’Bruce’,last:’Wayne’})); // true
[/js]
这个函数完美地完成了它的工作。但是,考虑一个场景,您有很多表单,您需要应用验证,但有不同的字段和规则。构建一个可以在运行时配置的通用验证函数不是很好吗?

简写:

[js]//对象验证规则
const schema = {
first: {
required:true
},
last: {
required:true
}
}

// 通用验证函数
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
[/js]
现在我们有一个验证函数,我们可以在所有形式中重用,而不需要为每个函数编写自定义验证函数。

19.~~运算符

按位运算符是您在初学者JavaScript教程中学到的功能之一,您永远不会在任何地方实现它们。 此外,如果你不处理二进制文件,谁想要处理这些零和零

但是,对于~~运算符,这是非常实际的用例。 您可以使用它作为Math.floor()的替代。 ~~运算符的优点是它执行相同的操作更快。 您可以在这里阅读更多关于位运算符的介绍。

标准写法:

[js]Math.floor(4.9) === 4 //true
[/js]
简写:

[js]~~4.9 === 4 //true
[/js]

原文地址:https://www.sitepoint.com/shorthand-javascript-techniques/

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 19个JavaScript 代码简写技巧
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏