javascript - 为什么Array()。splice无法在索引处插入值？

我有一个密码或OTP输入模式来验证用户的电子邮件和电话号码。

<form>
 <span id="ap-email-otp" class="actions-pack-otp">
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="0" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="1" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="2" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="3" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="4" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="email" data-index="5" maxlength="1" required>
 </span>
 <span id="ap-phone-otp" class="actions-pack-otp">
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="0" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="1" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="2" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="3" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="4" maxlength="1" required>
   <input type="tel" class="ap-otp-input" data-channel="phone" data-index="5" maxlength="1" required>
 </span>
</form>

我想在每个otp事件上更新一个对象keyup。

otp = {};

$document.on('keyup', '.ap-otp-input', function (e){

    if( e.keyCode === 8 || e.keyCode === 37 ){
        $(this).prev(':input').focus();
    }
    else{
        $(this).next(':input').focus();
    }

    otp[$(this).attr('data-channel')] = Array(6).splice( $(this).attr('data-index'), 0, $(this).val());

});

输出获取：

otp{
  email : [], // Empty array
  phone : [], // Empty array
}

预期产量
输入的值应插入其数据索引中。

注意：“频道”名称（例如电子邮件，电话等）是不可预测的。它是根据输入的数据通道属性动态计算的。

最佳答案

用两个空数组初始化otp：

otp = { email: [], phone: [] };

然后，您可以更新这些数组；无需在每个键上构造一个新数组：

otp[$(this).data('channel')][$(this).data("index")] = $(this).val();

还请注意，可以通过jQuery data-方法更轻松地访问.data()属性。

如果您的“通道”名称不可预测，那么您需要做的就是在看到新的数组时初始化数组：

if (!otp[$(this).data('channel')])
  otp[$(this).data('channel')] = [];

关于javascript - 为什么Array()。splice无法在索引处插入值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61559533/