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

搜索并没有完全找到我想要的答案

我很好奇将变量设置为queryselector是引用、指针还是值

例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

---

希望这是有意义的。

在Javascript中，对象总是通过引用传递，因此这两个示例具有相同的效果，因为

文档。querySelector

返回一个DOM元素（这是一个对象）

仅供参考：

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

---

您的第一个示例效率更高，因为您只需搜索DOM一次，它们的效果完全没有差别。

在Javascript中，对象始终通过引用传递，因此两个示例的效果相同，因为

文档。querySelector

返回一个DOM元素（这是一个对象）

仅供参考：

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

---

您的第一个示例效率更高，因为您只需搜索DOM一次，它们的效果完全没有差别。

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

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

所以这两个例子是完全相同的。在引擎盖下，正在访问元素对象的classList属性

是的，第一个代码段是有效的，因为我们节省了再次获取DOM节点的周期。如果我们只是访问dom元素节点几次，比如说10-100次（通常在中大型项目中），那么性能不会受到太大影响。我的意思是你可以忽略这一点。这不会产生剧烈的影响。 但是如果我们访问dom节点一百万次，那么这种效果是明显的。 让我们检查一百万次，只是为了访问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总是通过值传递，但当变量引用对象（包括数组）时，“值”是对对象的引用

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

所以这两个例子是完全相同的。在引擎盖下，正在访问元素对象的classList属性

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

---

希望现在一切都清楚了。

我知道它们的功能是一样的。我的问题是关于管理费用/效率。如果返回了一个对象，那么示例一应该更有效。@BryanJosephMyers Answer updated。我喜欢您创建了一个测试。我也在考虑做类似的事情。不过，我不确定这是否符合现实世界的情况。此测试中没有文档层次结构。选择器的复杂性可能会产生相当大的影响。如果页面上只有一个div，那么访问它的次数实际上需要0次遍历。这可能就是最佳实践的闪光点。我知道它们的功能是一样的。我的问题是关于管理费用/效率。如果返回了一个对象，那么示例一应该更有效。@BryanJosephMyers Answer updated。我喜欢您创建了一个测试。我也在考虑做类似的事情。不过，我不确定这是否符合现实世界的情况。此测试中没有文档层次结构。选择器的复杂性可能会产生相当大的影响。如果页面上只有一个div，那么访问它的次数实际上需要0次遍历。这可能就是最佳实践的闪光点。