说 3 个前端新手可能不知道的技巧

现在 AI 时代，我对前端开发最大的感悟是，基础超级重要。

因为前端行业的 隐藏知识 太多了，AI 默认给的方案都太保守了，我们只有对基础了解的越多，才能写出更好用的 AI 代码。

不止前端，其他的 IT 行业也一样。今天就说一下我能直接想起的几个，都是一些很基础、很新手的内容，大部分前端都知道，但是新手可能不知道。

首先是一个最简单的 console ，这个其实还是很好用的。不光有 log ，还有很多种的。

建议大家关注一下，现在是 AI 在写代码，但是我们只能是对这个概念有过手感后，才知道它们的应用。

然后在 AI 提示词里用上一些，开发效率还是可以的。

几个 console 我一直在用的代码

我们可能知道 console 里面有 table 图片 time 等等，但是其实很实用的是 group assert ，这俩才好用。

// 开启分组
console.group('商品详情');
console.log('商品ID：10086');
console.log('商品名称：编程入门手册');
console.log('价格：59.9元');
console.groupEnd(); // 关闭分组

// 使用 CSS
console.log('%c绿色大字', 'color: green; font-size: 24px;');

// 折叠分组（默认收起）
console.groupCollapsed('折叠的库存信息');
console.log('库存：100件');
console.log('销量：20件');
console.groupEnd();

// 条件打印（特别适合 一键切换 调试模式时候使用）
console.assert(1 === 2, '这个条件为false时会打印');
const isDebug = true;
console.assert(!isDebug, '当前是调试模式');
isDebug && console.log('当前是调试模式');  // 这种友好很多

group 和 assert 联合使用，真的适合临时调试，防止控制台变得非常混乱。控制台效果如下：

不过就是红色感叹框，很难看。习惯了就行。习惯不了，就用最后那行。

CSS 里的 where 和 is

然后是 CSS 里，大部分人一辈子都没用过，但是真的用一次就离不开的 where 和 is 选择器。

/* 以前 */
nav h1,
nav h2,
nav h3 {
  margin-bottom: 12px;
  color: #222;
}

/* 其实可以使用 is */
nav :is(h1, h2, h3) {
  margin-bottom: 12px;
  color: #222;
}

/* 或者更保守的，权重为 0 的 where */
nav :where(h1, h2, h3) {
  margin-bottom: 12px;
  color: #222;
}

我个人更推荐使用 where 。看起来更加的优雅，起码像个编程语言，顺眼，对吧。毕竟 CSS 也是编程语言，只要能少点字符且不失可读性，我的强迫症就会强迫我去弄。

不再 JSON.parse(JSON.stringify(obj))

我们前后端对接，会经常用到 JSON ，以及这个语句，当然，业务代码里也用的很多。

标题写的那种，是传统方案。它有很大的缺陷，就是 不支持循环引用，以及一些特殊的对象也不行。

后来我在一个大佬那里学到，用 structuredClone 深拷贝来处理 JSON 。

// 定义包含嵌套数据的原始对象
const originalData = { 
  name: "小李", 
  hobbies: ["编程", "骑行", "摄影"] 
};

// 调用原生API完成深拷贝
const deepCopyData = structuredClone(originalData);

// ---------- 
// 附录
// 什么是 循环引用
const a = {};
a.self = a;  // 这种就是

// 什么是 特殊对象
const obj = { time: new Date() };

上面附录我写的那种，是我几年前真经历过的 bug 。

反正 structuredClone 是万能的。

DOM 转数组技巧

我们在一些原生 js 的小项目里，经常会用到解析类似于 document.querySelectorAll 的结果的情况。

但是，小白是不知道的，这个 querySelectorAll 的结果是 NodeList ！ 它不是数组。

很多很多数组的方法，都无法在这个结果里起效（比如当年我用过的 forEach）。

后来我在 stack overflow 里研究了一下知道了，使用 Array.from 就能轻松搞定了！

示例代码：

const divList = document.querySelectorAll('div');
const divArr = Array.from(divList);  // 现在，它就真的是数组了！

这个建议大家留意一下，关键时刻真的节约很多时间。