JavaScript最佳代码实践合集01
列举当下的JavaScript最佳实践代码片段，也是日常开发中需要提醒自己的，以确保本框架走在最新的JavaScript规范上。
使用const和let代替var
关键词var会导致变量提升，也可以先使用后定义，存在潜在的风险，应该使用const和let代替var，任何情况下都不要使用var。
//bad
var name = 'Bob';
//good
const PI = 3.14159;
let count = 0;
使用模板字符串
以前写模板字符串需要对变量进行拼接，现在使用模板字符串`${变量}`可以更优雅的拼接字符串，而且不受换行限制，当然简单的单行模板依然可以使用传统的模板拼接方式。
//bad
const greeting = "Hello, " name "!";
//good
const greeting = `Hello, ${name}!`;
使用箭头函数
如果定义的函数不需要使用绑定this，则务必使用箭头函数，箭头函数足够简洁。
//bad
function greet(name) {}
//good
let greet = (name) => {console.log(name)}
//best
let greet = name => console.log(name);
使用默认参数
传统参数的默认值写法是使用||来表示，当前可直接在参数中表明默认值。
//bad
let greet = (name) => console.log(name || 'Lily');
//good
let greet = (name='Lily') => console.log(name);
合并对象
如果需要简单的合并对象，可不使用其他语法，而使用简单的扩展符...，执行效率差不多，但是够简洁。
//bad
let data01 = {a:1,b:2};
let data02 = {c:1,d:2};
let data03 = Object.assign(data01,data02);
//good
let data01 = {a:1,b:2};
let data02 = {c:1,d:2};
let data03 = {...data01,...data02};
合并数组
如果需要简单的合并数组，concat(可不使用其他语法，而使用简单的扩展符...，执行效率差不多，但是够简洁。
//bad
let data01 = [1,2];
let data02 = [3,4];
let data03 = data01.c\oncat(data02);
//good
let data01 = [1,2];
let data02 = [3,4];
let data03 = [...data01,...data02];
异步操作
传统的异步操作通常会借助setTimeout或者setInterval来实现，现在主要使用Promise和async/await来实现。
//bad
setTimeout(() => {
console.log('hello world');
}, 1000);
//good
let p = new Promise(resolve => {
setTimeout(() => resolve("Data fetched"), 1000);
});
p.then(data => console.log(data));
//best
let a = async ()=>{
return new Promise(resolve => {
resolve("Data fetched");
});
}
await a();
数组去重
对于简单的一维数组去重，可以使用new Set方法。如果数组复杂的话，需要使用其他方法。
//bad
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((num, index, arr) => arr.indexOf(num) === index);
//good
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
错误处理
系统性错误，浏览器会直接抛出并阻止继续执行；如果有条件应该使用try cacth主动捕获错误并自定义错误。
//bad
JSON.parse('JSON')
//good
try {
JSON.parse('JSON');
} catch (error) {
console.error("Invalid JSON:", error.message);
}
使用for循环
for循环比forEach循环性能更好，有条件的应该使用for循环。
//bad
[0,1,2].forEach((k)=>console.log(k));
//good
for(let k of [0,1,2])console.log(k);
链式申明变量
申明多个变量不需要使用多个let或const，应该链式表达。
//bad
let a=0;
let b=1;
let c=2;
//good
let a=0,b=1,c=2;
连等赋值
如果需要对多个变量赋值，而且多个变量的值是非引用类型(string/number/boolean)且相等，那么应该使用连等的方式赋值。
//bad
a=0;
b=0;
c=0;
//good
a=b=c=0;
类型相等
在js中，==和===的区别是，==会隐式转换类型，而===不会。所以要求值类型一致时请务必使用===。
不过，如果允许类型不一致，那么应该使用==。
在js中，'1'==1为 true，但是'1'===1为false，因为他们的类型不同。
//bad
if(a == '1'){
console.log('ok');
}
//good
if(a === '1'){
console.log('ok');
}
减少绑定事件
如果多个子节点绑定相同的事件，那么不应该对每个子节点都绑定事件，而应该将事件绑定的父节点上，通过evt.target.matches()来判断事件是否触发。
//bad
document.querySelectorAll(".btn").forEach(btn => {
btn.addEventListener("click", () => {
console.log("Button clicked!");
});
});
//good
document.querySelector(".container").addEventListener("click", (event) => {
if (event.target.matches(".btn")) {
console.log("Button clicked!");
}
});
