JavaScript 无处不在。
- 超过 94% 的网站使用 JavaScript。
- JavaScript 连续第九年成为最常用的编程语言。
JavaScript 强大而灵活,允许以任何你喜欢的方式编写代码,本文总结了一些 JavaScript 技巧和最佳实践。
1. 规范的命名
结合 W3School 规范,JavaScript 命名应符合以下四个特征:
- 名称必须以字母 或 $ 或 _ 开头,可以包括字母、数字、下划线和美元符号;
- 命名区分大小写,建议使用驼峰命名
- 保留字( JavaScript 等)不能作为变量名
- 变量名应简洁明了,具有可解释性,容易发音
// BAD 🤨
const f = "firstName";
const ln = "lastName";
const idos = assets.filter(a => a.type==='video')
// GOOD 🤗
const f = "firstName";
const ln = "lastName";
const idos = assets.filter(a => a.type==='video')
2. 谨慎使用相等运算符(==)
相等运算符(==
)检查其两个操作数是否相等,返回一个布尔值结果。与严格相等运算符(===
)不同,它会比较不同类型的操作数,并尝试强制类型转换。
严格相等运算符(===
)会检查它的两个操作数是否相等,并且返回一个布尔值结果。与相等运算符不同,严格相等运算符总是认为不同类型的操作数是不同的。
在项目中,建议使用严格相等运算符。
100 == [100] //true
100 === [100] //false
'100' == 100 //true
'100' === 100 //false
'' == false //true
'' === false //false
'' == 0 //true
'' === 0 //false
false == 0 //true
false ===0 //false
null == undefined //true
null === undefined //false
3. 判断属性是否在对象中
in 运算符 如果指定的属性在指定的对象或其原型链中,返回 true
。
const car = { make: 'Honda', model: 'Accord', year: 1998 };
console.log('make' in car);
// Expected output: true
delete car.make;
if ('make' in car === false) {
car.make = 'Suzuki';
}
console.log(car.make);
// Expected output: "Suzuki"
4. String 转 Number
JavaScript 有 11 种以上将 String 转为 Number 的方法。一元加(+)是将字符串转为数字的最快方法,如果值已经是数字,它不会执行任何操作。
const x = 1;
const y = -1;
console.log(+x);
// Expected output: 1
console.log(+y);
// Expected output: -1
console.log(+'');
// Expected output: 0
console.log(+true);
// Expected output: 1
console.log(+false);
// Expected output: 0
console.log(+'hello');
// Expected output: NaN
5. 使用 slice 和 padStart 替换字符
slice() 方法将数组中的选定元素作为新数组返回。负数从数组末尾选择。
padStart() 方法用另一个字符串填充当前字符串,直到结果字符串达到给定的长度。填充从当前字符串的开头开始应用。
两者可以使用更少的代码进行替换。
const phoneNumber = '13922321234';
const last4Digit = phoneNumber.slice(-4);
const maskNumber = last4Digit.padStart(phoneNumber.length, '*');
console.log(maskNumber); // *******1234
6. 使用对象来提高 console.log 的可读性
const name = 'text';
// 繁琐 🤨
console.log('name: ', name) // name: text
// 高效 🤗
console.log({ name }) // { name: "text" }
在 JavaScript 中使用 console.log() 来记录变量或消息。当变量日志太多时,通常需要加上变量名避免错乱。
我们可以将变量包装在一对大括号 {variable-name} 中,提高可读性。
7. 交换两个变量
使用解构赋值方法,在一行语句中执行交换。 适用于任何数据类型,如数字、字符串、布尔值或对象。
let firstName = 'lastName';
let lastName = 'firstName';
[firstName, lastName] = [lastName, firstName]
console.log({ firstName, lastName }) //{ firstName: "firstName", lastName: "lastName" }
8.判断数组每个元素
every() 方法检查是否所有数组元素都通过提供的函数实现的测试。
如果函数对所有元素都返回 true,则返回 true。
如果函数对一个元素返回 false,则返回 false。 当 every() 发现错误结果时,它将停止循环并不再继续,从而提高性能。
every() 方法不会更改原始数组。
const assets = [{ isActive: true, title: 'One' }, { isActive: true, title: 'Two' }, { isActive: true, title: 'Three' }]
const isAllActive = assets.every(asset => asset.isActive === true);
console.log({ isAllActive }) //{ isAllActive: true }
9. 空值合并运算符(??)
const foo = null ?? 'default string';
console.log(foo); //default string
const baz = 0 ?? 42;
console.log(baz); //0
const foo = null || 'default string';
console.log(foo); //default string
const baz = 0 || 42;
console.log(baz); //42
空值合并运算符(??
)是一个逻辑运算符,当左侧的操作数为 null或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
与逻辑或运算符(||
)不同,逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 ||
来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,''
或 0
)时。见下面的例子。
10. 平滑滚动到特定元素
Element 接口的 scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。
const element = document.getElementById('#id');
element.scrollIntoView({
behavior: "smooth"
});
注意:该方法在低版本浏览器下会导致样式错乱。
解决方法:stackoverflow.com/questions/1…
11. JSON.stringify 替换参数
const assets = { isActive: true, title: 'One', count: 1 }
const doubleCount = (key, val) => { return key === 'count' ? val * 2 : val }
const result = JSON.stringify(assets, doubleCount);
console.log({ result }) //{ result: "{"isActive":true,"title":"One","count":2}" }
JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
JSON.stringify() 的第二个参数是替换器或过滤器,可以是函数或数组。
当第二个参数作为替换函数传递时,它会改变字符串化过程的行为。 作为一个函数,它有两个参数,键和被字符串化的值。
12.扩展运算符添加对象属性
展开语法 (...) 将一个对象有条件地扩展到另一个对象中。
将条件与 && 运算符一起使用可将新属性添加到对象。 如果条件匹配,它将向对象添加一个属性。
const condition = true
const asset = { isActive: true, title: 'One', count: 1 }
if (condition) {
asset.step = 1
}
console.log({ asset }) //{ count: 1, isActive: true, step: 1, title: "One" } }
// better 🤗
const condition = true
const asset = { isActive: true, title: 'One', count: 1, ...(condition && { step: 1 }) }
console.log({ asset }) //{ count: 1, isActive: true, step: 1, title: "One" } }
13. Array.filter 使用 Boolean 过滤假值
const numbers = [1, 23, 0, "", false, NaN, false, undefined, null]
const result = numbers.filter(Boolean)
console.log(result) //[1, 23]
假值是在作为布尔值检查时被视为假的值。
Boolean 意味着从数组中删除所有虚假值。
JavaScript 中的假值是 false、null、0、undefined、NaN 和""(空字符串)。
将布尔值作为第一个参数传递给 Array.filter,它将删除数组中所有假值。
感谢阅读,希望这些技巧提高代码的生产力和可读性。
引用
[1] www.w3schools.com/js/js_varia…
[2] www.w3schools.com/js/js_reser…
[3] developer.mozilla.org/zh-CN/docs/…
[4] developer.mozilla.org/zh-CN/docs/…
[5] developer.mozilla.org/zh-CN/docs/…
[6] www.freecodecamp.org/news/how-to…
[7] developer.mozilla.org/zh-CN/docs/…
[9] developer.mozilla.org/zh-CN/docs/…
[10] developer.mozilla.org/zh-CN/docs/…
[11] developer.mozilla.org/zh-CN/docs/…
[12] developer.mozilla.org/zh-CN/docs/…
[13] developer.mozilla.org/zh-CN/docs/…