面试题前20题解释2025-09-13

正确答案是：B. element.classList.add()

解释：

element.classList.add() 是标准的DOM API方法，用于向HTML元素添加一个或多个类。
其他选项不是标准方法：
- A. element.addClass() 是jQuery中的方法，不是原生DOM方法。
- C. element.appendClass() 不存在。
- D. element.addClassName() 不存在（早期非标准方法，已废弃）。

因此，正确答案是B。

Object.prototype.toString()

var Dog = ['2','3'];
// 正确：使用 Object 的原型方法，并用 call 将 this 指向 Dog 数组
console.log(Object.prototype.toString.call(Dog)); // 输出: [object Array]

样式渗透

在 Vue 的 <style scoped> 中，默认情况下样式只会作用于当前组件的元素，不会渗透到子组件中。如果需要修改子组件（如 Element UI 的 .el-input__inner）的样式，需要使用深度选择器（::v-deep、/deep/ 或 >>>，但部分已被废弃）。
>>>是旧版深度选择器，但在 Vue 3 中已被废弃（改用 ::v-deep）。
注意：实际中，深度选择器的写法取决于预处理器（如Sass）和Vue版本。但根据题目给出的注释（直接说不起效果），C选项被定义为不正确。

内存泄漏

意外的全局变量
未清除的定时器或回调 setInterval、setTimeout、addEventListener 未移除
闭包滥用（如循环引用）
DOM引用未释放（移除元素后未置null）
事件监听未移除

//意外的全局变量
function getName() {
  name = 'javascript'; // 缺少 `let`/`const`/`var`，自动变成全局变量
}
getName();

//DOM引用未释放（移除元素后未置null）
const elements = {
  button: document.getElementById('button')//DOM 引用
};
function removeButton() {
  document.body.removeChild(elements.button);
  elements.button = null; // 清除引用,(正确处理)
}
removeButton();
//定时器未清理
let timer = setInterval(() => {
  const node = document.querySelector('#node');
//如果 #node 一直不存在，clearInterval 永远不会执行，导致定时器一直运行，内存泄漏
  if (node) {
    clearInterval(timer); // 仅在 node 存在时清除定时器
  }
}, 1000);

// 额外添加超时机制（可选）
setTimeout(() => clearInterval(timer), 10000); // 10秒后强制清除

注意空格

//以下js程序的输出是什么()
var val='smtg';console.log("Value is"+(val ==='smtg'? 'Something' :'Nothing'));

[]的valueOf和toString的结果是什么?

let arr = [];
console.log(arr.valueOf());  // 输出: []（数组本身，但显示为空数组）//不是字符串类型
console.log(arr.toString()); // 输出: ""（空字符串）

实例的 valueOf() 方法将 this 值[转换成对象]
基本的 valueOf() 方法返回 this 值本身

const obj = { foo: 1 };
console.log(obj.valueOf() === obj); // true

console.log(Object.prototype.valueOf.call("primitive"));
// String {'primitive'}（一个包装对象）

valueOf()：返回数组本身（即原始值），但数组是对象类型，所以 valueOf 返回的是数组对象（引用），而不是原始值。但在类型转换时，JavaScript会调用 toString 来获取原始值。
toString()：将数组转换为字符串。空数组 [] 转换为空字符串 ""。

在CSS中，权重（特异性）的计算规则如下：

内联样式（style属性）：1000
ID选择器（#id）：100
类选择器（.class）、属性选择器（[type="text"]）、伪类（:hover）：10
元素选择器（div）、伪元素（::before）：1
通用选择器（*）、组合符（+、>、~等）：0

哪个函数会改变原数组值

splice 方法会直接修改原数组，它可以用于添加、删除或替换数组中的元素。
slice 方法不会改变原数组，而是返回一个新数组，包含从开始到结束（不包括结束）的浅拷贝。
filter 方法不会改变原数组，而是返回一个新数组，包含所有通过测试的元素。
map 方法不会改变原数组，而是返回一个新数组，其中的每个元素都是原数组中对应元素调用函数后的结果。

自增i++

function Foo() {
  let i = 0;
  return function() {
    console.log(i++); // 后置递增：先输出当前值，再自增
  };
}

const f1 = Foo(); // 闭包1，捕获独立的 i（初始为 0）
const f2 = Foo(); // 闭包2，捕获另一个独立的 i（初始为 0）

f1(); // 输出 0（闭包1的 i 从 0 → 1）
f1(); // 输出 1（闭包1的 i 从 1 → 2）
f2(); // 输出 0（闭包2的 i 从 0 → 1，与闭包1无关）

在 JavaScript 中，i++（后置递增）和 ++i（前置递增）都是自增操作符，但它们的执行时机不同：

i++（后置递增）：先返回当前值，再自增。
++i（前置递增）：先自增，再返回值。

6. 总结

操作符	执行顺序	适用场景
`i++`	先返回值，再自增	需要先使用当前值，再自增（如 `arr[i++]`）
`++i`	先自增，再返回值	需要先自增，再使用新值（如 `for` 循环）

TreeShaking技木的作用

前端中的 tree-shaking 可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。
Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未被其它模块使用，并将其删除，以此实现打包产物的优化。

字符串（String）和数字（Number）之间的加减乘除运算

5. 结论

运算符	行为
`+`	优先字符串拼接，否则数学加法，其他类型会尝试转为字符串
`-`, `*`, `/`	尝试转为数字后运算，失败则返回 `NaN`

关键点：

+ 可能触发字符串拼接，而 -、*、/ 会尝试转为数字。
隐式转换可能导致意外结果，建议显式转换类型（如 Number()、String()）。
空字符串 ""、null、false 在运算时会被转为 0，而 undefined 会变成 NaN。

示例

console.log("5" + 3);    // "53"（字符串拼接）
console.log(5 + "3");    // "53"（字符串拼接）
console.log("10" - 2);    // 8（字符串 "10" → 数字 10）
console.log(10 - "2");    // 8（字符串 "2" → 数字 2）
console.log("5" * 3);     // 15（字符串 "5" → 数字 5）
console.log("5" * "3");   // 15（两者都转为数字）
console.log("10" / 2);    // 5（字符串 "10" → 数字 10）
console.log("10" / "2");  // 5（两者都转为数字）

面试题前20题解释2025-09-13