用 JavaScript split 方法找出字符串中的最长单词

JavaScript 4月前 29

如果你曾经使用过 JavaScript 的 split 方法，你很有可能遇到过这个错误：TypeError: Cannot read property 'split' of undefined。

你会收到这个错误的原因有几个。最有可能的是，你对 split 的工作原理以及如何在数组中进行迭代存在基本误解。

例如，在“找出字符串中的最长单词”挑战中，如果你尝试提交以下代码：

function findLongestWord(str) { 
  for(let i = 0; i < str.length; i++) {
    const array = str.split(" ");
    array[i].split("");
  }
}

findLongestWord("The quick brown fox jumped over the lazy dog");

它将抛出错误：TypeError: Cannot read property 'split' of undefined。

split 方法

当 split 在一个字符串上被调用时，它会根据作为参数传递的分隔符将该字符串分割成子串。如果一个空的字符串被作为参数传入，split 将每个字符视为一个子串，然后它返回一个包含子串的数组。

const testStr1 = "Test test 1 2";
const testStr2 = "cupcake pancake";
const testStr3 = "First,Second,Third";

testStr1.split(" "); // [ 'Test', 'test', '1', '2' ]
testStr2.split(""); // [ 'c', 'u', 'p', 'c', 'a', 'k', 'e', ' ', 'p', 'a', 'n', 'c', 'a', 'k', 'e' ]
testStr3.split(","); // [ 'First', 'Second', 'Third' ]

请查阅 MDN，了解更多关于 split 的细节。

示例

解决这个难题的关键是了解 split 方法的返回结果以及可能有多少个子串。

让我们再看一下上面的代码，看看为什么它不能像预期那样运行。

function findLongestWord(str) { 
  for(let i = 0; i < str.length; i++) {
    const array = str.split(" ");
    array[i].split("");
  }
}

findLongestWord("The quick brown fox jumped over the lazy dog");

像这样将 str 分割成一个数组（const array = str.split(" ");），如预期的那样运行，将返回 [ 'The', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog' ]。

但是仔细看一下 for 循环，不是用 array 的长度作为迭代 i 的条件，而是用 str.length 代替。

str 是 “The quick brown fox jumped over the lazy dog”，如果你把 str.length 记录到控制台，结果是 44。

for 循环主体中的最后一条语句 array[i].split(""); 是导致错误的原因。数组的长度是 9，所以 i 很快就会远远超过数组的最大长度。

function findLongestWord(str) { 
  for(let i = 0; i < str.length; i++) {
    const array = str.split(" ");
    console.log(array[i]);
    // array[0]: "The"
    // array[1]: "quick"
    // array[2]: "brown"
    // ...
    // array[9]: "dog"
    // array[10]: undefined
    // array[11]: undefined
  }
}

findLongestWord("The quick brown fox jumped over the lazy dog");

调用 array[i].split(""); 将每个字符串分割成字符子串是一个有效的方法，但当它被传递给 undefined 时，它会引发 TypeError: Cannot read property 'split' of undefined。

如何解决用 split 查找一个字符串中最长的单词的问题

让我们快速浏览一下如何解决这个问题的一些伪代码：

将 str 分割成一个单独的单词数组
创建一个变量来跟踪最大的单词长度
遍历单词数组，将每个单词的长度与上面提到的变量进行比较
如果当前单词的长度大于存储在变量中的单词的长度，就用当前单词的长度替换该值
一旦每个字的长度与最大字长变量进行了比较，就从函数中返回这个数字。

首先，将 str 分割成一个单独的单词数组。

function findLongestWordLength(str) {
  const array = str.split(" ");
}

创建一个变量来记录最长的单词长度，并将其设置为零。

function findLongestWordLength(str) {
  const array = str.split(" ");
  let maxWordLength = 0;
}

array 的值是 ['The', 'quick', 'brown', 'fox', 'jumped', 'over', 'the', 'lazy', 'dog']，你可以在 for 循环中使用 array.length。

function findLongestWordLength(str) {
  const array = str.split(" ");
  let maxWordLength = 0;
  
  for (let i = 0; i < array.length; i++) {
    
  }
}

遍历单词数组，检查每个单词的长度。记住，字符串也有一个 length 方法，你可以调用它来轻松获得一个字符串的长度。

function findLongestWordLength(str) {
  const array = str.split(" ");
  let maxLength = 0;
  
  for (let i = 0; i < array.length; i++) {
    array[i].length;
  }
}

使用 if 语句检查当前字的长度（array[i].length）是否大于 maxLength。如果是，就用 array[i].length 替换 maxLength 的值。

function findLongestWordLength(str) {
  const array = str.split(" ");
  let maxLength = 0;
  
  for (let i = 0; i < array.length; i++) {
    if (array[i].length > maxLength) {
      maxLength = array[i].length;
    }
  }
}

最后，在函数的末尾，即 for 循环之后，返回 maxLength。

function findLongestWordLength(str) {
  const array = str.split(" ");
  let maxLength = 0;
  
  for (let i = 0; i < array.length; i++) {
    if (array[i].length > maxLength) {
      maxLength = array[i].length;
    }
  }
    
  return maxLength;
}