5 个让 JavaScript 代码更简洁的小妙招🧹

想象一个空荡荡、干净的厨房水槽。它闪闪发光，你甚至可以在里面看到自己的倒影。如果你的盘子很脏，直接把它扔进水槽里可能会让你感觉很不舒服，对吧？你会把它洗干净然后收起来。
如果你的水槽已经满了，脏兮兮的水里漂浮着一堆脏兮兮的食物残渣，那该怎么办？在这种情况下，你只会把盘子扔进去，因为，再多一个盘子也无妨。不幸的是，我们也是这样对待代码库的。我们有时不去整理代码库，反而会引入越来越多的代码异味。
好了，下面是 5 件你可以立即开始整理代码库的事情🚀。

注意：不知何故，Gists 的渲染顺序有时会非常奇怪。如果代码与我写的内容不一致，刷新页面似乎可以解决问题。抱歉！😕

1. 使用 let 和 const，忘记 var

您不应该再使用 var，因为它很容易引入变量遮蔽，并可能导致很多混乱。如果您需要一个不变的值，请使用 const。如果您需要一个不变的变量，但您会在构造函数中初始化它，请使用 readonly。如果您需要一个值会改变的变量，请使用 let。

	🚫
	getPreviousName(current: number): string {
	var track = this.tracks[current - 1];
	if(!track) {
	throw new RangeError(`No track exists at index ${current - 1}`);
	}
	return track.getName();
	}

	getPreviousName(current: number): string {
	const track = this.tracks[current - 1];
	if(!track) {
	throw new RangeError(`No track exists at index ${current - 1}`);
	}
	return track.getName();
	}

view raw 2-use-let-const-var-good.ts hosted with ❤ by GitHub

	🚫
	getPreviousName(current: number): string {
	var track = this.tracks[current - 1];
	if(!track) {
	throw new RangeError(`No track exists at index ${current - 1}`);
	}
	return track.getName();
	}

view raw 1-use-let-const-var-bad.ts hosted with ❤ by GitHub

	getPreviousName(current: number): string {
	const track = this.tracks[current - 1];
	if(!track) {
	throw new RangeError(`No track exists at index ${current - 1}`);
	}
	return track.getName();
	}

view raw 2-use-let-const-var-good.ts hosted with ❤ by GitHub

嘘，我一直在发关于代码的推文。如果你对如何提升开发技能有疑问，可以关注我@mlevkov。

2. 始终使用字符串模板

连接字符串时，应始终坚持使用字符串模板，而不是连接运算符。这会让你的工作更加轻松，因为它允许使用多行字符串，减少字符串带引号时的错误，并且通常更易于阅读。以下是我们尝试创建数据库连接字符串时的样子，分别使用了字符串模板和不使用字符串模板。想象一下厨房水槽的场景。尽量保持代码简洁。

	🚫
	createConnection({
	type: 'sqlite',
	database: path.resolve(__dirname, '..')+'/data/musicnow.sqlite',
	entities: [
	__dirname+'/models/*.ts'
	],
	});

view raw 1-string-templates-bad.ts hosted with ❤ by GitHub

	✅
	createConnection({
	type: 'sqlite',
	database: `${path.resolve(__dirname, '..')}/data/musicnow.sqlite`,
	entities: [
	`${__dirname}/models/*.ts`
	],
	});

view raw 2-string-templates-good.ts hosted with ❤ by GitHub

	🚫
	createConnection({
	type: 'sqlite',
	database: path.resolve(__dirname, '..')+'/data/musicnow.sqlite',
	entities: [
	__dirname+'/models/*.ts'
	],
	});

view raw 1-string-templates-bad.ts hosted with ❤ by GitHub

	✅
	createConnection({
	type: 'sqlite',
	database: `${path.resolve(__dirname, '..')}/data/musicnow.sqlite`,
	entities: [
	`${__dirname}/models/*.ts`
	],
	});

view raw 2-string-templates-good.ts hosted with ❤ by GitHub

3. 尽可能使用对象简写

JavaScript 和 Typescript 竭尽全力减少代码的冗长。我最喜欢的一点是，当使用键创建对象时，可以使用简写注释将变量赋值给正确的键。让我们看一个以不同方式创建用户对象的示例。

	🚫
	let user: User = new User();
	if (firstName.trim().length > 0 && lastName.trim().length > 0 &&
	dob.trim().length > 0 && email.trim().length > 0 &&
	avatarUrl.trim().length > 0 && username.trim().length > 0) {
	user.firstName = firstName;
	user.lastName = lastName;
	user.dob = dob;
	user.email = email;
	user.avatarUrl = avatarUrl;
	user.isActive = isActive;
	}

view raw 1-object-shorthand-bad.ts hosted with ❤ by GitHub

	✅
	let user: User = new User();
	if (firstName.trim().length > 0 && lastName.trim().length > 0 &&
	dob.trim().length > 0 && email.trim().length > 0 &&
	avatarUrl.trim().length > 0 && username.trim().length > 0) {
	user = {
	username,
	firstName,
	lastName,
	dob,
	email,
	avatarUrl,
	isActive,
	};
	}

view raw 2-object-shorthand-good.ts hosted with ❤ by GitHub

	🚫
	let user: User = new User();
	if (firstName.trim().length > 0 && lastName.trim().length > 0 &&
	dob.trim().length > 0 && email.trim().length > 0 &&
	avatarUrl.trim().length > 0 && username.trim().length > 0) {
	user.firstName = firstName;
	user.lastName = lastName;
	user.dob = dob;
	user.email = email;
	user.avatarUrl = avatarUrl;
	user.isActive = isActive;
	}

view raw 1-object-shorthand-bad.ts hosted with ❤ by GitHub

	✅
	let user: User = new User();
	if (firstName.trim().length > 0 && lastName.trim().length > 0 &&
	dob.trim().length > 0 && email.trim().length > 0 &&
	avatarUrl.trim().length > 0 && username.trim().length > 0) {
	user = {
	username,
	firstName,
	lastName,
	dob,
	email,
	avatarUrl,
	isActive,
	};
	}

view raw 2-object-shorthand-good.ts hosted with ❤ by GitHub

4. 合并导入

无论是导入自己的模块还是从已安装的库导入，都需要遵循一些约定。有些约定可能不那么重要，有些则不那么重要。我个人并不在意导入是否按字母顺序排列。但是，如果要从同一个模块导入多个模块，则应该将它们合并为一个。这样可以保持代码整洁，避免导入代码杂乱无章。

	🚫
	import { createConnection } from 'typeorm';
	import { getRepository } from 'typeorm';
	import * as path from 'path';
	import {User} from 'app/models/User';

view raw merge-imports-bad.ts hosted with ❤ by GitHub

	✅
	import { createConnection, getRepository } from 'typeorm';
	import * as path from 'path';
	import {User} from 'app/models/User';

view raw merge-imports-good.ts hosted with ❤ by GitHub

	🚫
	import { createConnection } from 'typeorm';
	import { getRepository } from 'typeorm';
	import * as path from 'path';
	import {User} from 'app/models/User';

view raw merge-imports-bad.ts hosted with ❤ by GitHub

	✅
	import { createConnection, getRepository } from 'typeorm';
	import * as path from 'path';
	import {User} from 'app/models/User';

view raw merge-imports-good.ts hosted with ❤ by GitHub

5. 正确循环迭代器

如果您有一个可迭代对象，例如数组或列表，并且想要遍历其中的值，则应该使用for of而不是for in。如果您想要遍历属性（例如数组中的键）而不是值，则应该使用for in。例如，播放列表对象中的这个方法将列出所有名称。

	🚫
	public getTrackNames(): string[] {
	const names = [];
	for(const track in this.tracks) {
	names.push(this.tracks[track].getName());
	}
	return names;
	}

view raw 1-loop-bad.ts hosted with ❤ by GitHub

	✅
	public getTrackNames(): string[] {
	const names = [];
	for(const track of this.tracks) {
	names.push(track.getName());
	}

	return names;
	}

view raw 1-loop-good.ts hosted with ❤ by GitHub

	🚫
	public getTrackNames(): string[] {
	const names = [];
	for(const track in this.tracks) {
	names.push(this.tracks[track].getName());
	}
	return names;
	}

view raw 1-loop-bad.ts hosted with ❤ by GitHub

	✅
	public getTrackNames(): string[] {
	const names = [];
	for(const track of this.tracks) {
	names.push(track.getName());
	}

	return names;
	}

view raw 1-loop-good.ts hosted with ❤ by GitHub

以上就是 5 个简单的技巧，您可以使用它们来保持代码库整洁。

如果你想提高你的编码技能，我正在编写一个剧本，其中包括：

30 多种常见代码异味及其解决方法
15+ 设计模式实践及其应用方法
20 多个常见的 JS 错误及其预防方法

尽早获得Javascript 剧本。

文章来源：https://dev.to/mlevkov/5-easy-wins-for-cleaner-javascript-code-13of