13 个 JavaScript 技巧和最佳实践

48 阅读5分钟

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 //falsefalse == 0 //true
false ===0 //falsenull == 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: 1console.log(+y);
// Expected output: -1console.log(+'');
// Expected output: 0console.log(+true);
// Expected output: 1console.log(+false);
// Expected output: 0console.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/…

[8]  juejin.cn/post/695008…

[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/…

[14]  developer.mozilla.org/zh-CN/docs/…

[15]  developer.mozilla.org/zh-CN/docs/…