2019年了，高手们现在都是怎么写JavaScript代码的，有没有一些看了就能用上的技巧，近些年有没有什么新的最佳实践？本文就是应StackOverFlow邀请所做的分享，作者慷慨分享了自己使用的方法和经验。读者可以根据实际情况自己选择，就算不接受也算开阔一下思路。原文评论争论比较激烈，也可以进去看看其他人的观点。
作者：Ryland Goldstein
原文链接： Practical Ways to Write Better JavaScript
有什么切实有效的方法写出更好的 JavaScript ，我看谈论这个话题的人不多，本文就是我最常用的一些实践。
1. 使用 TypeScript
改善JS的第一件事就是不要写JS。对不了解的人说明一下，TypeScript(TS) 是JS的严格超集（现有的JS程序都是合法的TS程序）。TypeScript 为原生 JavaScript 加上了（可选的）全面的类型批注。很长一段时间里，TS的支持不是很好，我也不推荐使用。但是现在大多数框架都支持了。知道了TS是什么，我们来看看为什么要用它。
1.1 TypeScript 强制类型安全
类型安全是这样实现的，编译时检查代码中所有的类型都以合法的方式使用。比如你创建了一个函数 foo 接受一个数字类型参数：
function foo(someNum: number): number {
return someNum + 5;
}
调用这个 foo 函数时，只能传入数字：
// 正确
console.log(foo(2)); // 7
// 错误
console .log(foo("two")); // 不合法的 TS 代码
除了为代码添加类型的工作量，强制类型安全没有任何副作用。但是这样做的收益不容忽视。类型安全能防止一些常见的错误或者bug，这对弱语法的JS来说是一件幸事。
1.2 TypeScript 让大型应用得以重构
重构大型JS应用真的是一场噩梦，过程中最大的痛苦来自于没有强制参数类型检查，也就是说JS函数一点容错性都没有，假设我有一个函数 myAPI 被一千个服务调用：
function myAPI(someNum, someString) {
if (someNum > 0) {
leakCredentials();
} else {
console.log(someString);
}
}
这时候我把参数改成这样：
function myAPI(someString, someNum) {
if (someNum > 0) {
leakCredentials();
} else {
console.log(someString);
}
}
我必须保证这一千个函数调用，都要正确地修改参数，漏掉一个，程序就会出错。而在TS中是这样的：
// before
function myAPITS(someNum: number, someString: string) { ... }
// after
function myAPITS(someString: string, someNum: number) { ... }
如你所见，函数 myAPITS 做了与JS一样的修改，但在JS中不会报错的代码，在TS中会通不过编译，所有调用的地方都会报出类型错误。及早发现错误，而不会有bug隐藏在代码中。
1.3 TypeScript 让团队架构沟通更容易
正确设置 TS 后，不先定义接口和类型就很难开始写代码。这就有了一种简洁、易沟通的架构方案。在TS之前，不是没有类似方案，但是都需要做额外的事来达到同样的效果。用TS后，我可以把下面的提案发给同事：
interface BasicRequest {
body: Buffer;
headers: { [header: string]: string | string[] | undefined; };
secret: Shhh;
}
我要先写一点代码，但是我可以不用花太多时间就能让同事明白我的进度，并获得反馈。我不确定TS本质上是不是比JS更不容易出错，但是我坚信强制开发者先定义接口能写出更好的代码。开发者肯定更熟悉原生JS，但是我现在做的大多数新项目，从一开始就是用TS。
2. 使用新特性
JavaScript 是世界上最流行的编程语言(写不写之一都行)，这是一个数以亿计的人使用过的，超过20年历史的语言。最近很多修改和新特性加到了JS中(严格来说叫ECMAScript)，已经从根本上改变了开发者的体验。作为一个在两年前才开始用JS的人，我的优势是没有偏见和历史包袱。能让我选用或者放弃某些功能，做出更加务实的选择。
2.1 async 和 await
在很长一段时间，异步、事件驱动的回调是JS开发中不可避免的一部分：
// 传统的回调
makeHttpRequest('google.com', function (err, result) {
if (err) {
console.log('Oh boy, an error');
} else {
console.log(result);
}
});
我不在这里花时间解释上述代码的问题（但是我以前解释过）。为了解决回调问题，JS中新增了 Promise 的概念，使用 Promise 可以不用嵌套就能写出异步逻辑。
// 使用 Promise
makeHttpRequest('google.com').then(function (result) {
console.log(result);
}).catch(function (err) {
console.log('Oh boy, an error');
});
Promise 最大的优点在于可读性和链式写法，虽然很棒，但Promise写法还是太像以前的回调。那么有没有一种更好的替代方法呢，ECMAScript委员会决定添加一种新的方法来使用promises、async、wait：
// async 和 await
try {
const result = await makeHttpRequest('google.com');
console.log(result);
} catch (err) {
console.log('Oh boy, an error');
}
唯一需要注意的是使用 await 之前，函数要定义为 async：
// 上面的代码要这样定义 makeHttpRequest 函数
async function makeHttpRequest(url) {
// ...
}
也可以直接 await 一个 Promise ，因为实际上 async 就是一个包装后的 Promise，所以请随意使用 async/await 不必感到内疚，他们与 Promise 是等价的。
2.2 let 和 const
一直以来，JS中声明变量只有一个范围会变化的限定符： var。它的作用范围规则很独特很有趣，var 的作用域不一致，不明确，可能导致意外发生，也是很多bug的元凶。但是在 ES6 中有了替代方法：let 和 const。这就没必要再用var了。所以以后不要使用 var ，任何用 var 的地方都可以转换为等效的 const 或 let 代码。
至于何时使用 const 何时使用 let，我都是先用 const ， const 强制性更强，不可变，写出的代码更好。并没有太多“真正的场景”需要用到 let，可以说我代码里 let 用的不到 const 的 1/20 。
这里说的“不可变”(immutablish)不是C/C++中的 const 。JS中用 const 声明的变量不是说永远不会改变，而是指向变量的地址不变。简单类型(number、booolean等)内容永远不会变，但是所有对象(class、array、dict)，const不保证不改变。
2.3 箭头 => 函数
剪头函数是JS中一种更简洁的声明匿名函数方法。匿名函数就是未明确命名的函数，一般用在回调或者事件处理函数。
// 匿名函数的普通写法
someMethod(1, function () { // has no name
console.log('called');
});
一般情况下，这种写法不算错，但是匿名函数的作用域很“有趣”，可能会导致意料之外的错误。有了箭头函数，再也不用担心作用域的问题了，下面是用箭头函数实现同样的功能：
// 用箭头定义的匿名函数
someMethod(1, () => { // has no name
console.log('called');
});
除了更简洁，箭头函数的作用域更实用，箭头函数的 this 继承自函数定义时的作用域(译注：而不是使用时所在的作用域)。
有时候，箭头函数还可以写的更简洁：
const added = [0, 1, 2, 3, 4].map((item) => item + 1);
console.log(added) // prints "[1, 2, 3, 4, 5]"
单行的箭头函数有个隐式 return 语句，也不用写前面的括号和函数体的分号。
再多说一点，用 var 声明变量的时候可不能这么用（译注：此处是说单行箭头函数返回对象字面量行不通）。普通的匿名函数还是有他的应用场景，默认用箭头函数，比默认用普通匿名函数能节省不少调试时间。
再次声明 MDN文档真好用。
2.4 扩展运算符 …
提取一个对象的键值对放到另外一个对象是常见的场景。以前有好几种方法实现，但是看起来都有些笨拙：
const obj1 = { dog: 'woof' };
const obj2 = { cat: 'meow' };
const merged = Object.assign({}, obj1, obj2);
console.log(merged) // prints { dog: 'woof', cat: 'meow' }
这种写法很常见，也很乏味，多亏了扩展运算符，再也不用像上面那样写了：
const obj1 = { dog: 'woof' };
const obj2 = { cat: 'meow' };
console.log({ ...obj1, ...obj2 }); // prints { dog: 'woof', cat: 'meow' }
更棒的是，数组也可以(译注：但是不能混用)：
const arr1 = [1, 2];
const arr2 = [3, 4];
console.log([ ...arr1, ...arr2 ]); // prints [1, 2, 3, 4]
2.5 模板字符串
在很多语言中，字符串都是最常见的结构之一，所以内置的字符串都做不好也太尴尬了，JS就属于这种语言。有了模板字符串以后，JS变得别具一格，解决了字符串处理中两个大问题，加入变量和换行：
const name = 'Ryland';
const helloString =
`Hello
${name}`;
代码可以说明一切，是不是很棒。
2.6 对象解构
对象解构可以不遍历数据或者访问对象的 key 就能获取值的方法，对象、数组等（译注：有 Iterator 接口的）都可以使用。
// 以前的写法
function animalParty(dogSound, catSound) {}
const myDict = {
dog: 'woof',
cat: 'meow',
};
animalParty(myDict.dog, myDict.cat);
对象解构：
function animalParty(dogSound, catSound) {}
const myDict = {
dog: 'woof',
cat: 'meow',
};
const { dog, cat } = myDict; // 对象解构
animalParty(dog, cat);
还可以在函数参数解构：
function animalParty({ dog, cat }) {}
const myDict = {
dog: 'woof',
cat: 'meow',
};
animalParty(myDict);
数组的例子：
[a, b] = [10, 20];
console.log(a); // prints 10
还有很多新增的现代特性，下面几个我也特别推荐：
3. 始终假设你的系统是分布式的
写并行程序时，你从一开始就会优化，如果一核工作三核围观，就浪费了75%的算力。阻塞式的同步操作，是并行计算的最大敌人。但我们说的是JS，这是一个单线程语言，讨论这个有意义吗？
JS是单线程但不是单文件，没有并行计算，但是有并发。一个HTTP请求可能需要几秒钟甚至几分钟，这时候如果停下来等待请求返回，页面就没法用了。
JavaScript用事件循环解决了这个问题。事件循环遍历已注册的事件，根据JS内部调度和优先级逻辑执行这些事件。这就可以同时发送数千个(译注：浏览器限制一般几个或十几个)HTTP请求，也可以同时加载多个文件。要注意的是：只有正确的使用特性才能利用这一功能，举一个简单的例子， for 循环：
let sum = 0;
const myArray = [1, 2, 3, 4, 5, ... 99, 100];
for (let i = 0; i < myArray.length; i += 1) {
sum += myArray[i];
}
原生的 for 循环是最难并行的构造之一。让for循环并行执行最大的困难源于一些特殊的代码结构，这些结构很少见，但是只要存在，for 循环就很难并行。
let runningTotal = 0;
for (let i = 0; i < myArray.length; i += 1) {
if (i === 50 && runningTotal > 50) {
runningTotal = 0;
}
runningTotal += Math.random() + runningTotal;
}
上面代码只有按顺序迭代执行，才能产生预期结果，如果试图让多个迭代并行，可能就会进入不正确的分支，导致计算结果无效。建议仅在绝对有必要时才使用传统的for循环，平时可以用以下代码代替：
// map
// in decreasing relevancy :0
const urls = ['google.com', 'yahoo.com', 'aol.com', 'netscape.com'];
const resultingPromises = urls.map((url) => makHttpRequest(url));
const results = await Promise.all(resultingPromises);
//map with index
// in decreasing relevancy :0
const urls = ['google.com', 'yahoo.com', 'aol.com', 'netscape.com'];
const resultingPromises = urls.map((url, index) => makHttpRequest(url, index));
const results = await Promise.all(resultingPromises);
//for-each
const urls = ['google.com', 'yahoo.com', 'aol.com', 'netscape.com'];
// note this is non blocking
urls.forEach(async (url) => {
try {
await makHttpRequest(url);
} catch (err) {
console.log(`${err} bad practice`);
}
});
我解释一下，为什么这些写法是对传统for循环的改进，map 并不是以顺序迭代，而是将每个元素分别提交给用户定义的事件处理函数。大多数情况下，各个迭代之间没有依赖关系，因此可以并行。也不是for循环不能做同样的事，可以这样写：
const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
async function testCall() {
// do async stuff here
}
for (let i = 0; i < 10; i += 1) {
testCall();
}
是的for循环也可以，但是没有map简单，来看 map 版本：
const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
items.map(async (item) => {
// do async stuff here
});
用map这样写就可以了，用map还有一个好处就是如果你想等待所有异步操作完成后做处理，也可以很简单的实现，如果是用for循环的话，就需要自己管理一个数组才行，来看map怎么做：
const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const allResults = await Promise.all(items.map(async (item) => {
// do async stuff here
}));
简单吧。
许多情况下，for循环与map和forEach的性能相当，可能更好一些，我仍然认为牺牲几个循环的时间，换来更清晰的API完全值得。未来也有机会改进请求数据的部分，而不用操心循环部分。for循环没有区分各种情况，要优化就麻烦的多了。
map和forEach之外还有其他可用的异步选项，例如for-await-of。
Lint和格式化
代码没有统一的风格，就很难阅读理解。因此高端的代码不管用任何语言写，都需要有统一并且合理的风格。JS语言生态系统广泛，代码格式和指南有很多种，一定要选择一种来格式化你的代码。选不选比选择哪个重要的多。
我看到很多人问到底是该用 eslint 还是 prettier。在我看来他们的用途不同，需要结合使用。Eslint 是一个老牌的lint工具，比起关注样式，更多的注重正确性。我在用AirBNB的Lint规则的配置，使用这个配置的时候以下的语句将会Lint失败：
var fooVar = 3; // airbnb 规则禁止使用 "var"
eslint 对开发的好处显而易见。从本质上说，它确保你的代码遵循最佳实践，有些规则不一定全部适合，可根据实际情况定制。
Prettier 是代码格式化工具，不太关心正确性，更注格式统一。 Prettier 不会抱怨你有没有使用 var，但是会自动对齐代码中的所有括号。我自己的开发过程中，推送代码到 git 之前总会跑一遍 Prettier 把代码格式化。还可以在每次提交git时自动格式化代码，保证入库的代码都有一致的风格。
4. 测试代码
写测试改善JS代码，是一种间接但是非常有效的方法。JS生态系统中有很多成熟的测试工具，没有一个工具可以处理所有的情况，我建议你熟悉各种测试工具，根据需求选择使用。
4.1 测试驱动程序 – Ava
测试驱动程序，简单来说就是一个框架，在高层次提供结构和实用工具，根据测试需求不同，常常与其他特定的测试工具一起使用。
Ava 在功能和简洁之间取得很好的平衡。它的异步特性和并发运行架构是我最喜欢的。更快的运行节约了开发者的时间也为公司省钱。Ava保持简洁的同时，还内置了一些很不错的特性，比如断言。
替代选择：Jest，Mocha，Jasmin。
4.2 Spies 和 Stubs – Sinon
spies 是一个函数分析工具，比如一个函数被调用了多少次，每次调用的详情等数据。
Sinon 可以做很多事，有几个工具超级好用， spies 和 stub 是最出色的两个，功能丰富而且语法简洁，
替代选择： testdouble
4.3 模拟请求 – Nock
HTTP模拟就是拼装http请求，模拟服务器端行为，结合自己的代码方便测试过程。
HTTP模拟写起来可能很麻烦，但是 nock 让这个过程方便不少，它直接重写 nodejs 的内置请求，并拦截传出的请求，让你可以完全控制响应。
替代选择：我没听说有。
4.4 Web 自动化测试 – Selenium
推荐 Selenium 让我心情复杂，由于它是Web自动化最流行的选择，拥有庞大的社区和在线资源。不幸的是，学习曲线相当陡峭，而且也依赖了太多的外部代码库。话虽如此，它也是唯一真正免费的选择，因此除非你是在进行企业级的Web自动化，否则 Selenium 都可以胜任。
替代选择：Cypress,，PhantomJS
永无止境的旅程
跟世间大多数事情一样，写出更好的JavaScript是一个持续的过程，代码总是可以更干净，总会有新特性被添加，测试怎么也不嫌多，让人应接不暇疲于应付，但是有这么多可以改进的地方，如果按照自己的步伐，一步一个脚印的做，不知不觉中就会成为JavaScript高手。