JavaScriptz中25种速记编码技术

  • A+
所属分类:JQUERY API

对于任何JavaScript开发人员来说,这确实是必须读取的内容。...我编写了这篇关于速记JavaScript编码技术的指南,这些年来我学到了这些技术。为了帮助您了解正在发生的事情,我包含了Lengghand版本,以给出一些编码视角。

1.三元算子

这是一个很好的代码保护程序,当您想要编写一个

1
if..else

语句只有一行。

伦敦:

1
2
3
4
5
6
7
8
const x = 20;
let answer;

if (x > 10) {
answer = "greater than 10";
} else {
answer = "less than 10";
}

速记:

1
const answer = x > 10 ? "greater than 10" : "less than 10";

你也可以把你的

1
if

这样的声明:

1
const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

2.短路评估速记

当将变量值赋值给另一个变量时,您可能希望确保源变量不是空的、未定义的或空的。你要么写个长篇

1
if

语句具有多个条件,或使用短路评估.

伦敦:

1
2
3
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}

速记:

1
const variable2 = variable1 || 'new';

不相信我?自己测试它(将下面的代码粘贴到es6控制台):

1
2
3
4
5
6
7
let variable1;
let variable2 = variable1 || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log(variable2); // prints foo

请注意,如果您设置

1
variable1

1
false

1
0

,价值

1
bar

将被分配。

3.声明变量

在函数开始时声明变量赋值是很好的做法。这种速记方法在同时声明多个变量时可以节省大量的时间和空间。

伦敦:

1
2
3
let x;
let y;
let z = 3;

速记:

1
let x, y, z=3;

4.如在场速记

这可能是微不足道的,但值得一提。当做“

1
if

“检查”,有时可以省略赋值运算符。

伦敦:

1
if (likeJavaScript === true)

速记:

1
if (likeJavaScript)

注:这两个例子并不完全相等,因为只要

1
likeJavaScript

是真实价值.

这是另一个例子。如果

1
a

不等于真,那就做点什么吧。

伦敦:

1
2
3
4
let a;
if ( a !== true ) {
// do something...
}

速记:

1
2
3
4
let a;
if ( !a ) {
// do something...
}

5.用于循环速记的JavaScript

如果您想要简单的JavaScript并且不想依赖外部库(如jQuery或flash),那么这个小技巧是非常有用的。

伦敦:

1
2
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

速记:

1
for (let fruit of fruits)

如果您只想访问索引,请执行以下操作:

1
for (let index in fruits)

如果您想访问文字对象中的键,这也是可行的:

1
2
3
const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
console.log(key) // output: continent, country, city

是Arrae的简写。对每个人来说:

1
2
3
4
5
6
7
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9

6.短路评估

如果预期参数为NULL或未定义,则不需要编写六行代码来分配默认值,我们只需使用短路逻辑操作符,只需一行代码即可完成相同的任务。

伦敦:

1
2
3
4
5
6
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}

速记:

1
const dbHost = process.env.DB_HOST || 'localhost';

7.十进制指数

你可能见过这个。这本质上是一种不用尾随零写数字的奇特方式。例如,1e7实质上意味着1后面跟着7个零。它表示等于10,000,000的十进制基数(JavaScript将其解释为浮点数类型)。

伦敦:

1
for (let i = 0; i < 10000; i++) {}

速记:

1
2
3
4
5
6
7
8
9
for (let i = 0; i < 1e7; i++) {}

// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8.实物财产速记

用JavaScript定义对象文本可以使生活变得更容易。ES6提供了一种为对象分配属性的更简单的方法。如果变量名与对象键相同,则可以利用速记符号。

伦敦:

1
2
const x = 1920, y = 1080;
const obj = { x:x, y:y };

速记:

1
const obj = { x, y };

9.箭头功能速记

经典函数很容易以简单的形式读写,但一旦您开始在其他函数调用中嵌套它们,它们就会变得有些冗长和混乱。

伦敦:

1
2
3
4
5
6
7
8
9
10
11
function sayHello(name) {
console.log('Hello', name);
}

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

list.forEach(function(item) {
console.log(item);
});

速记:

1
2
3
4
5
sayHello = name => console.log('Hello', name);

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

list.forEach(item => console.log(item));

重要的是要注意

1
this

在箭头函数中,确定的方法与长函数不同,因此这两个例子并不是严格等价的。看见本文讨论箭头函数语法。更多细节。

10.隐式返回速记

返回是我们经常使用的关键字,用于返回函数的最终结果。带有单个语句的箭头函数将隐式返回其计算结果(函数必须省略大括号(

1
{}

),以省略返回关键字)。

若要返回多行语句(例如对象文本),必须使用

1
()

而不是

1
{}

来包裹你的身体。这将确保将代码计算为单个语句。

伦敦:

1
2
3
function calcCircumference(diameter) {
return Math.PI * diameter
}

速记:

1
2
3
calcCircumference = diameter => (
Math.PI * diameter;
)

11.默认参数值

您可以使用

1
if

语句定义函数参数的默认值。在ES6中,可以在函数声明本身中定义默认值。

伦敦:

1
2
3
4
5
6
7
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}

速记:

1
2
3
volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

12.模板文字

你不厌倦用

1
' + '

将多个变量连接到字符串中?难道没有更简单的方法吗?如果你能使用ES6,那么你是幸运的。您所需要做的就是使用回勾,并且

1
${}

把你的变量括起来。

伦敦:

1
2
3
const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

速记:

1
2
3
const welcome = `You have logged in as ${first} ${last}`;

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

13.分解任务速记

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

伦敦:

1
2
3
4
5
6
7
8
9
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;

速记:

1
2
3
import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

您甚至可以指定自己的变量名:

1
const { store, form, loading, errors, entity:contact } = this.props;

14.多行字串速记

如果您曾经发现自己需要在代码中编写多行字符串,那么您应该这样编写它:

伦敦:

1
2
3
4
5
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'

但还有更简单的方法。用后排。

速记:

1
2
3
4
5
6
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代码更高效、更有趣。它可以用来替换某些数组函数。扩展算子只是由三个点组成的一系列。

龙洲

1
2
3
4
5
6
7
// 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()

速记:

1
2
3
4
5
6
7
8
// 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];

不像

1
concat()

函数,您可以使用扩展运算符在其他数组中的任何位置插入数组。

1
2
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

还可以将Side运算符与ES6析构表示法结合起来:

1
2
3
4
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将将函数参数设置为

1
undefined

如果它们没有被传递一个值。其他一些语言会抛出警告或错误。若要强制执行参数分配,可以使用

1
if

语句引发错误,如果

1
undefined

,或者您可以利用“强制参数速记”。

伦敦:

1
2
3
4
5
6
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}

速记:

1
2
3
4
5
6
7
mandatory = () => {
throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
return bar;
}

17.Array.找速记

如果您曾经接受过用普通JavaScript编写find函数的任务,您可能会使用

1
for

循环。在ES6中,一个名为

1
find()

被介绍了。

伦敦:

1
2
3
4
5
6
7
8
9
10
11
12
13
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];
}
}
}

速记:

1
2
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18.物体[关键]速记

你知道吗

1
Foo.bar

也可以写成

1
Foo['bar']

?起初,似乎没有理由像这样写它。然而,这个表示法给出了编写可重用代码的构造块。

考虑一下验证函数的简化示例:

1
2
3
4
5
6
7
8
9
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

这个功能很好地完成了它的工作。但是,考虑一个场景,在这种情况下,需要应用验证的表单非常多,但是有不同的字段和规则。构建一个可以在运行时配置的通用验证函数不是很好吗?

速记:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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

现在我们有了一个验证函数,我们可以在所有表单中重用,而不需要为每个表单编写一个自定义验证函数。

19.双倍按位而非速记

比特操作符是您在初学者JavaScript教程中了解到的特性之一,您永远无法在任何地方实现它们。此外,如果您不处理二进制文件,那么谁想要处理0和1呢?

然而,对于双位非运算符,有一个非常实用的用例。你可以用它来代替

1
Math.floor()

...双位NOT运算符的优点是它执行同样的操作要快得多。您可以阅读更多有关位运算符的信息。这里.

伦敦:

1
Math.floor(4.9) === 4 //true

速记:

1
~~4.9 === 4 //true

20.指数幂速记

数学指数幂函数的简称:

伦敦:

1
2
3
Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

速记:

1
2
3
2**3 // 8
2**4 // 4
4**3 // 64

21.将字符串转换为数字

有时,您的代码接收字符串格式的数据,但需要以数字格式进行处理。这不是什么大事,我们可以快速转换。

伦敦:

1
2
const num1 = parseInt("100");
const num2 = parseFloat("100.01");

速记:

1
2
const num1 = +"100"; // converts to int data type
const num2 = +"100.01"; // converts to float data type

22.对象属性分配

考虑以下代码:

1
2
let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'}

如何将它们合并成一个对象?一种方法是编写一个函数,将数据从第二个对象复制到第一个对象。不幸的是,这可能不是您想要的-您可能需要创建一个全新的对象而不改变任何现有的对象。最简单的方法是使用

1
Object.assign

ES6中引入的功能:

1
let full_names = Object.assign(fname, lname);

您还可以使用ES8中引入的对象销毁表示法:

1
let full_names = {...fname, ...lname};

可以合并的对象属性的数量没有限制。如果您的对象具有相同的属性名称,则值将按合并顺序被覆盖。

23.比特索引

使用数组执行查找时,

1
indexOf()

函数用于检索要查找的项的位置。如果找不到该项,则值

1
-1

会被归还。在JavaScript中,

1
0

被视为“虚假”,而大于或小于

1
0

被认为是“真实的”。因此,我们必须像这样写正确的代码。

伦敦:

1
2
3
4
5
6
7
if(arr.indexOf(item) > -1) { // Confirm item IS found

}

if(arr.indexOf(item) === -1) { // Confirm item IS NOT found

}

速记:

1
2
3
4
5
6
7
if(~arr.indexOf(item)) { // Confirm item IS found

}

if(!~arr.indexOf(item)) { // Confirm item IS NOT found

}

这个

1
bitwise(~)

运算符将返回除

1
-1

...否定它就像做事情一样简单

1
!~

...或者,我们也可以使用

1
includes()

职能:

1
2
3
if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't

}

24.Object.entry()

这是ES8中引入的特性,它允许您将文字对象转换为键/值对数组。见下面的例子:

1
2
3
4
5
6
7
8
9
10
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);

/** Output:
[ [ 'producer', 'John' ],
[ 'director', 'Jane' ],
[ 'assistant', 'Peter' ]
]
**/

25.Object.value()

这也是es8中引入的一个新特性,它执行类似的功能

1
Object.entries()

,但没有关键部分:

1
2
3
4
5
6
7
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);

/** Output:
[ 'John', 'Jane', 'Peter' ]
**/
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: