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

如果你曾经使用过 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;
}