JS中调用fill_gaps函数无法修改sec变量值问题求助

代码示例 #

function show() {
    let date_ = new Date();

    let sec = String(date_.getSeconds());
    fill_gaps(sec);

    function fill_gaps(candidate) {
        if (candidate.length < 2) {
        candidate = "0" + candidate;
      } else {
      candidate = candidate;
     }
   }

    time_ = String(`${sec}`);
    console.log(time_)
}

问题说明 #

我编写的fill_gaps()函数本应修改变量sec的值，但它并未改变函数外部的sec值，我猜测这是作用域相关的问题。我知道这是基础问题，但作为新手我无法解决。

预期输出 #

console.log(time_) = 0(当前秒数)  // 例：秒数为5时输出05

实际输出 #

console.log(time_) = (当前秒数)  // 例：秒数为5时直接输出5

问题原因 #

核心是JavaScript的参数传递机制：字符串、数字这类原始类型，函数参数传递的是「值的副本」，不是变量本身。你在fill_gaps里修改的candidate只是一个临时副本，和外部的sec没有关联，自然不会影响原变量。

解决方案 #

方案1：让函数返回处理结果 #

修改fill_gaps，让它返回处理后的字符串，再把返回值重新赋值给sec：

function show() {
    let date_ = new Date();

    let sec = String(date_.getSeconds());
    // 接收函数返回的处理后的值
    sec = fill_gaps(sec);

    function fill_gaps(candidate) {
        return candidate.length < 2 ? "0" + candidate : candidate;
    }

    time_ = `${sec}`;
    console.log(time_)
}

方案2：用原生方法简化实现 #

JavaScript字符串自带padStart方法，能直接实现「前面补零到指定长度」的需求，不用自己写函数：

function show() {
    let date_ = new Date();
    // padStart(2, '0')：将字符串补至长度2，不足时在开头添加'0'
    let sec = String(date_.getSeconds()).padStart(2, '0');
    time_ = `${sec}`;
    console.log(time_)
}

方案3：通过对象传递（引用类型特性） #

如果一定要通过函数修改外部变量，可以把变量封装到对象里。对象属于引用类型，传递的是引用地址，修改对象的属性会直接影响原对象：

function show() {
    let date_ = new Date();

    let secObj = { value: String(date_.getSeconds()) };
    fill_gaps(secObj);

    function fill_gaps(obj) {
        if (obj.value.length < 2) {
            obj.value = "0" + obj.value;
        }
    }

    time_ = `${secObj.value}`;
    console.log(time_)
}

内容的提问来源于stack exchange，提问作者luci