JavaScript 个变量是引用、值还是指针

Question

搜索并没有完全找到我正在寻找的答案。

我很好奇将变量设置为查询选择器是引用、指针还是值。

示例 1：

// lets assume there is only one ".class"
var element = document.queryselector(".class");

element.classList.remove("effect1");
element.classList.add("effect2");

示例 2：

document.queryselector(".class").classList.remove("effect1");
document.queryselector(".class").classList.add("effect2");

这些是一回事吗？或者通过将变量设置为选择器，您是否节省了开销？

我的想法是，如果变量是一个值，那么在使用变量时查询选择器将不会搜索 DOM。

希望这是有道理的。

Answer 1

在 Javascript 中，对象总是通过引用传递，因此两个示例具有相同的效果，因为 document.querySelector returns 一个 DOM 元素（它是一个对象）。

作为简短的 FYI：

基本类型总是按值传递
数组也通过引用传递

你的第一个例子效率更高，因为你只需要搜索 DOM 一次，而且它们的效果完全没有区别。

Answer 2

Javascript总是按值传递，但是当变量引用对象（包括数组）时，“值”是对对象的引用。

var element = document.queryselector(".class"); // element is an object

所以这两个例子完全一样。在引擎盖下只是访问元素对象的类列表属性。

是的，第一个代码片段很有效，因为我们节省了再次获取 DOM 个节点的周期。如果我们只是访问 dom 个元素节点几次，比如 10-100（通常在中型到大型项目中），那么性能不会受到太大影响。我的意思是你可以忽略它。这不会是一个剧烈的影响。但是，是的，如果我们访问 dom 个节点一百万次，那么这种影响是显而易见的。让我们检查100万次，只为了访问DOM个元素节点。

first = performance.now();
new Array(1000000).fill(1).forEach(() => {
    div = document.querySelector('div');
})
second = performance.now();
console.log(`${second - first} milliseconds`);   //337.2850000159815 milliseconds
// Result can alter from machine to machine

希望现在已经清楚了。

JavaScript 个变量是引用、值还是指针

Are JavaScript variables a reference, value or pointer

javascript

pointers

queryselector