深入理解JavaScript变量赋值机制：原始值与DOM属性操作的最佳实践

JavaScript变量赋值机制解析

在javascript中，变量的赋值方式取决于其数据类型。理解这一点是解决许多常见编程问题的关键。javascript的数据类型主要分为两大类：原始值（primitives）和引用值（objects）。

原始值（Primitives）的传递：按值复制

原始值包括：String、Number、Boolean、Symbol、BigInt、undefined 和 null。当一个原始值被赋给另一个变量时，实际上是创建了一个该值的副本。后续对副本的修改不会影响到原始值。

示例：

let originalNumber = 10;
let copyNumber = originalNumber; // copyNumber 获取 originalNumber 的副本

copyNumber = 20; // 修改 copyNumber 的值

console.log(originalNumber); // 输出：10 (originalNumber 未受影响)
console.log(copyNumber);    // 输出：20

对于DOM元素的属性，例如input元素的value属性，其值通常是一个字符串（String类型），属于原始值。这意味着当你将inputElement.value赋给一个新变量时，新变量得到的是该字符串的一个副本。

引用值（Objects）的传递：按引用复制

引用值包括：Object、Array 和 Function。当一个引用值被赋给另一个变量时，实际上复制的是对该对象的引用（内存地址）。这意味着两个变量指向的是内存中的同一个对象。因此，通过任一变量修改对象，都会影响到另一个变量所引用的对象。

立即学习“Java免费学习笔记（深入）”；

示例：

let originalObject = { name: "Alice" };
let copyObject = originalObject; // copyObject 获取 originalObject 的引用副本

copyObject.name = "Bob"; // 通过 copyObject 修改对象的属性

console.log(originalObject.name); // 输出：Bob (originalObject 被修改)
console.log(copyObject.name);     // 输出：Bob

问题代码分析：为何修改副本无效？

考虑以下旨在限制输入框字符数量的JavaScript函数：

function maximum(object) {
    const maxlength = 2;
    let x = object.value; // (1) 将 inputElement.value 的副本赋给 x
    if (x.length > maxlength) {
        x = x.slice(0, maxlength); // (2) 修改的是变量 x 的值
    }
    // (3) 函数结束，x 的修改不会影响到 object.value
}

以及对应的HTML调用：

<input type="number" name="year" id="year" placeholder="YY" oninput="maximum(this)">

当用户在输入框中输入内容时，oninput事件会触发maximum(this)函数，并将当前的input元素作为object参数传入。

商汤商量

商汤科技研发的AI对话工具，商量商量，都能解决。

36

查看详情

1. let x = object.value;: 这一行代码是问题的关键。object.value是一个字符串（原始值）。当它被赋给x时，x得到的是object.value的一个副本。此时，x和object.value是两个独立的字符串，尽管它们最初内容相同。
2. x = x.slice(0, maxlength);: 这一行代码仅仅修改了变量x所引用的字符串。例如，如果x最初是"123"，maxlength是2，那么x会被重新赋值为"12"。这个操作只影响了x这个局部变量，而没有对原始的object.value属性进行任何操作。
3. 函数结束: 当maximum函数执行完毕后，局部变量x被销毁，它上面进行的所有修改都与object.value无关。因此，输入框中显示的值不会发生任何变化。

有效代码解析：直接操作DOM属性的关键

对比一个能够正确限制输入长度的函数：

function maxLengthCheck(object) {
    // 直接修改 object.value 属性
    if (object.value.length > object.max.length) {
        object.value = object.value.slice(0, object.max.length);
    }
}

以及对应的HTML调用：

<input name="myInput_DRS" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />

这个函数能够正常工作的原因在于：

• object.value = object.value.slice(0, object.max.length);: 这行代码直接对传入的object（即input元素）的value属性进行了重新赋值。当object.value被直接赋值为一个新的字符串时，浏览器会立即更新输入框中显示的内容。这正是我们期望达到的效果。
• object.max.length: 这是一个巧妙的用法。对于type="number"的输入框，maxlength属性不适用，但max属性可以限制最大值。这里的object.max会返回max属性的字符串值（例如"999"），然后.length获取其长度（例如3）。这提供了一种动态获取最大允许长度的方式，使得函数更加通用。

正确的输入限制函数实现

基于上述分析，要正确实现输入限制功能，必须直接修改DOM元素的value属性。

/**
 * 限制输入框的字符长度
 * @param {HTMLInputElement} inputElement 要操作的输入框元素
 * @param {number} maxLength 允许的最大字符长度
 */
function enforceInputLength(inputElement, maxLength) {
    if (inputElement.value.length > maxLength) {
        // 直接将截取后的字符串重新赋值给 inputElement.value
        inputElement.value = inputElement.value.slice(0, maxLength);
    }
}

HTML 使用示例：

<div class="row2">
    <br><input type="number" name="year" id="year" 
    placeholder="YY" oninput="enforceInputLength(this, 2)">
</div>

<input name="myInput_DRS"
    oninput="enforceInputLength(this, this.max ? String(this.max).length : 999)"
    type="number"
    placeholder="Type..."
    min="1"
    max="999" />

在第二个示例中，this.max ? String(this.max).length : 999 动态地根据max属性来确定最大长度，使其更具灵活性和健壮性。

最佳实践与注意事项

1. 直接修改DOM属性： 当你需要改变一个DOM元素的某个属性（如value、className、src等）时，务必直接对其属性进行赋值操作，而不是将其值赋给一个局部变量后再修改局部变量。
2. 利用HTML原生属性： 对于输入限制，HTML提供了maxlength（适用于type="text"、type="password"等）和max（适用于type="number"、type="date"等）属性。在可能的情况下，应优先使用这些原生属性进行初步限制，JavaScript可以作为更复杂逻辑或跨浏览器兼容性的补充。
   • maxlength：直接限制文本输入框的最大字符数。
   • max：限制数字输入框的最大数值。虽然它不直接限制字符长度，但可以结合JavaScript来推断字符长度限制（如String(inputElement.max).length）。
3. 选择合适的事件： oninput事件在用户输入时即时触发，非常适合实现实时的输入校验和限制。其他事件如onkeyup或onchange可能在某些场景下也适用，但oninput通常提供最佳的用户体验。
4. 类型转换的考虑： 尽管type="number"的输入框在视觉上是数字，但其value属性始终返回一个字符串。因此，对value进行字符串操作（如slice）是安全的。如果需要进行数值计算，则需要显式地将value转换为数字（例如使用parseInt()或parseFloat()）。

总结

本次分析的核心在于理解JavaScript中原始值的“按值复制”特性。当我们将一个原始值（如DOM元素的value属性字符串）赋给一个新变量时，我们得到的是该值的一个独立副本。对这个副本的任何修改都不会影响到原始数据源。要修改DOM元素的属性，我们必须直接对其属性进行赋值操作。掌握这一基础概念，对于编写高效、可预测的JavaScript代码，尤其是在进行DOM操作时，至关重要。

以上就是深入理解JavaScript变量赋值机制：原始值与DOM属性操作的最佳实践的详细内容，更多请关注php中文网其它相关文章！