JavaScript 此间道理汝明了之?

前言

解了语法拿来就用?搜到了例子照搬不误?NoNoNo!作为21世纪的前端新势力应该树立“书写合格且优雅的规范代码”之最佳典范,高举“大前端是未来趋势”之伟大旗帜,秉持“JavaScript 是世界上最好的语言”之行业思想……以下关于 JavaScript 中各语法在各业务情境中的使用都是博主一坑一坑踩过来的🥺,一为记录,二为分享,愿我们下(qiāo)笔(xià)写(jiàn)出(pán)的都是极具可读性、可扩展性和良好健壮性的高质量代码。

🍽食用方法:正文中的三级标题为用法的简要,🤔后是该用法的原理及相关思考,🔗为推荐阅读的相关链接。

干货

创建空对象的正确方式—Object.create(null)

  • 🤔:JavaScript 编程中的最佳实践,Object.create(null)创建的对象不会继承 Object 原型的toString()hasOwnProperty()等方法,真正的空对象,干净而优雅🤤~而使用{}则反之。

  • 🔗:

    1. 详解 Object.create(null) | 掘金

慎用delete来删除对象的属性

最优雅地实现数组去重并排序

1
arr = [...new Set(arr)].sort((a, b) => a - b);

利用短路语法替代简单的条件语句

1
2
3
4
5
if (zander === 'developer') {
  console.log('He is cool!');
}
// ⬇️
zander === 'developer' && console.log('He is cool!');
1
const length = (zander || []).length;
  • 🧐:&&运算保证第一个参数为 true 时才会执行后面的代码,||运算保证第一个参数为 false 时才会执行后面的代码。短路运算的效率略高于if条件语句,但只适用于简单的if..do...语句优化,如参数验证、设置默认值等。

  • 🔗:

    1. 逻辑运算符 | MDN

高效地格式化数字

1
2
3
const toDecimalMark = num => num.toLocaleString('en-US');

toDecimalMark(19971122.05); // '19,971,122.05'
  • 🧐:这是一个格式化数字函数,可将数字高效地转换为逗号分隔的数字字符串,而不用写一堆正则去处理。toLocaleString() 是 ECMAScript 中的标准方法,用于返回特定语言环境下格式化后的字符串。

  • 🔗:

    1. Number.prototype.toLocaleString() | MDN

根据对象的 Value 获取对应的 Key

1
2
3
function getKey(obj, value, compare = (a, b) => a === b) {
  return Object.keys(obj).find(element => compare(obj[element], value));
}
  • 🧐:要通过 Value 找到 Key 是离不开遍历的,先使用 Object.keys() 方法返回对象可枚举属性组成的数组,数组的 find() 方法可在遍历时完成键值的匹配。但这只针对无相同 Value 的对象,否则只会返回匹配到的第一个 Key,如果没有匹配到的 Key 则返回 undefined

  • 🔗:

    1. Object.keys() | MDN
    2. Array.prototype.find() | MDN

最平滑之滚动

1
2
3
4
5
6
7
const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}
updatedupdated2021-03-172021-03-17
docs: add new tip
加载评论
点击刷新