从String.slice()方法返回奇怪的结果

Question

我的情况是将一个字符串分成字符串数组,然后将每三个字符转换为一个字符串.(例如"xxxyyy" - > ['xxx','yyy'])

const translate = function (RNA) {
    var arrRna = Array.from(RNA);
    var arr = [];
    for (var key in arrRna) {
        if ((key % 3) == 0) {
            var temp = RNA.slice( key,  (key+3));
            arr.push(temp);
        }

    }
    return arr;
}

console.log(translate('xxxyyyzzz'));

预期结果 : ['xxx','yyy','zzz']

但我想要的结果是: [ 'xxx', 'yyyzzz', 'zzz' ]

此外,我注意到切片方法在第一次迭代中按预期工作,但在此之后,奇怪的结果 - >'yyyzzz'.为什么？？

Answer 1

问题是属性名称和属性名称的for..in循环始终是字符串.所以,例如,什么时候是3:key

var temp = RNA.slice( key,  (key+3));

评估为

var temp = RNA.slice('3',  '33');

因为在涉及字符串时+ 连接.你可能会先抛出Number:

const translate = function(RNA) {
  var arrRna = Array.from(RNA);
  var arr = [];
  for (var key in arrRna) {
    key = Number(key);
    if ((key % 3) == 0) {
      var temp = RNA.slice(key, (key + 3));
      arr.push(temp);
    }

  }
  return arr;
}

console.log(translate('xxxyyyzzz'));

或者,您可以使用普通for循环对数组进行分块,其逻辑可能更容易理解:

const translate = function(RNA) {
  const output = [];
  for (let i = 0; i < RNA.length; i += 3) {
    output.push(RNA.slice(i, i + 3));
  }
  return output;
}

console.log(translate('xxxyyyzzz'));

另一种选择是使用全局正则表达式.match:

const translate = RNA => RNA.match(/.{1,3}/g);
console.log(translate('xxxyyyzzz'));

Answer 2

田田!而不是将字符串转换为数组并通过每个字符等待索引为3的倍数,而不是简单地计数3秒.

function translate(rna) {
  let arr = [];
  
  for (let i = 0; i < rna.length; i += 3) {
    arr.push(rna.slice(i, i + 3));
  }
  
  return arr;
}

console.log(translate('xxxydyyzzzd'));