中英文模式阅读
中文模式阅读
英文模式阅读


项目1来自JavaScript Algos和DS Certification。


这是我的演练的博客版本。如果您更喜欢视频here is the YouTube video link

The Challenge {#thechallenge}

project-1-intro-screenshot


写一个叫做的函数palindrome
需要一个字符串,str
。如果str
是回文,回归true
,否则返回false

What Is a Palindrome? {#whatisapalindrome}


回文是一个向前和向后读取相同的词。一些例子是

  • Eye
  • Racecar
  • A Man, A Plan, A Canal -- Panama!

无论您是从左到右还是从右到左阅读,您都可以获得相同的字符序列。 We'll be ignoring punctuation like commas, periods, question marks, exclamation points, and casing.

Step 0 - Step Away from the Code {#step0stepawayfromthecode}


我喜欢在工作中必须解决的任何面试或问题中保持这种想法。首先冲进代码通常是一种失败的策略,因为现在你必须在尝试解决问题时考虑语法。


代码应该是最后的


不要让你的神经变得更好。而不是疯狂地破解解决方案并提高血压,深呼吸并尝试在白板或笔记本上写出来。


一旦你想出了解决方案,代码就变得简单了。所有艰苦的工作都发生在你的思想和笔记中,而不是键盘上。

Step 1 - Equalize All Casing {#step1equalizeallcasing}


无论其外壳是否向前或向后读取,回文都是有效的。所以"Racecar"是有效的,即使它在技术上拼写为"racecaR"向后。


为了保护我们免受任何套管问题的影响,我将添加评论说我们将小写一切。


到目前为止这是我的代码(注意我还没有编写真正的代码)。

function palindrome(str) {
  // 1) Lowercase the input
}



palindrome("eye");

Step 2 - Strip Non-Alphanumeric Characters {#step2stripnonalphanumericcharacters}


就像套管场景一样,即使标点符号和空格来回不一致,回文也是有效的。


例如"一个人,一个计划,一个运河 - 巴拿马!"是有效的,因为我们检查它没有任何标记或空格。如果你这样做并小写一切,那就变成了这个。

"A Man, A Plan, A Canal -- Panama!"

// lowercase everything
// strip out non-alphanumeric characters

"amanaplanacanalpanama"

其中向前和向后读取相同的内容。

What does alphanumeric mean? {#whatdoesalphanumericmean}


它的意思是"字母和数字",因此az和0-9中的任何内容都是字母数字字符。为了正确检查我们输入的非字母数字字符(空格,标点符号等)必须去。


这是我们更新的伪代码。

function palindrome(str) {
  // 1) Lowercase the input
  // 2) Strip out non-alphanumeric characters
}



palindrome("eye");

Step 3 - Compare String to Its Reverse {#step3comparestringtoitsreverse}


一旦我们的字符串被正确清理,我们可以翻转它,看看它是否相同。


我正在考虑沿着这些方向进行比较

return string === reversedString

我正在使用三等于(===
)用于JavaScript中的比较。如果两个字符串相同,则它是回文并且我们返回true
!如果不是,我们回来false


这是我们更新的伪代码。

function palindrome(str) {
  // 1) Lowercase the input
  // 2) Strip out non-alphanumeric characters
  // 3) return string === reversedString
}



palindrome("eye");

Executing Step 1 - Lowercase {#executingstep1lowercase}


这是最简单的一步。如果您不确定如何在JavaScript中小写一些内容,那么快速Google搜索应该会导致toLowerCase
方法。


这是一个可用于所有字符串的方法,因此我们可以在执行任何其他操作之前使用它来小写输入。


我将小写版本存储在一个名为的变量中alphanumericOnly
因为我们最终也会删除字母数字字符。

function palindrome(str) {
  // 1) Lowercase the input
  const alphanumericOnly = str.toLowerCase();
  
  // 2) Strip out non-alphanumeric characters
  // 3) return string === reversedString
}



palindrome("eye");

Executing Step 2 - Alphanumeric Only {#executingstep2alphanumericonly}


我们将不得不在这里深入探讨,因为这是最艰难的一步。我们究竟要如何净化一串非字母数字字符?

The .match method {#thematchmethod}


就像toLowerCase
所有字符串都支持一个名为match
。它需要一个参数来指示您希望在给定字符串中查找哪些字符。


我们以我的名字为例。

myName = 'yazeed';

myName.match('e');
// ["e", index: 3, input: "yazeed", groups: undefined]

如你看到的.match
返回包含一些信息的数组。我们关心的部分是第一个元素,'e'
。那是我们在字符串中找到的匹配'yazeed'


但我的名字有两个e!我们如何匹配另一个?

Regular Expressions (Regex) {#regularexpressionsregex}


.match
方法的第一个参数可以改为a regular expression


正则表达式 - 定义搜索模式的字符序列。也被称为"正则表达式"。


而不是字符串的引号,将参数放在正斜杠之间。

myName = 'yazeed';

myName.match(/e/);
// ["e", index: 3, input: "yazeed", groups: undefined]

我们得到相同的结果,所以谁在乎?好吧,看看这个,正则表达式允许我们添加 flags


正则表达式标志 - 指示正则表达式执行特殊操作的指示器。

myName = 'yazeed';

myName.match(/e/g);
// ^^ Notice the little g now ^^
// ["e", "e"]

我们收回了所有的电子邮件!如果您尝试a或z,则只能获得一个匹配的数组。说得通。

myName.match(/a/g);
// ["a"]

myName.match(/z/g);
// ["z"]

Finding all alphanumeric characters {#findingallalphanumericcharacters}


因此正则表达式不仅匹配模式,而且可以匹配 many
同样的模式!这对于我们的算法的下一步来说听起来很完美。


如果你有点谷歌,这可能是你找到匹配所有字母数字字符的正则表达式。

/[a-z0-9]/g

你正在看的定义 alphanumeric
。这个正则表达式可以分为3个部分。

  1. A character set [] - match any character between these brackets. character-sets
  2. a-z - match all lowercase letters a-z
  3. 0-9 - match all numbers 0-9

运行它myName
返回每个字母的数组。

myName = 'yazeed';

myName.match(/[a-z0-9]/g);
// ["y", "a", "z", "e", "e", "d"]

让我们尝试一下项目的测试用例。他们期望成为一个回文疯狂的人怎么样?

crazyInput = '0_0 (: /-\ :) 0-0';

crazyInput.match(/[a-z0-9]/g);
// ["0", "0", "0", "0"]

哇没有疯狂的角色,它只有四个零。是的,这是一个回文!我会更新我们的代码。

function palindrome(str) {
  const alphanumericOnly = str
        // 1) Lowercase the input
        .toLowerCase()
        // 2) Strip out non-alphanumeric characters
        .match(/[a-z0-9]/g);
  
  // 3) return string === reversedString
}



palindrome("eye");

Executing Step 3 - Compare String to Its Reverse {#executingstep3comparestringtoitsreverse}


记住这一点.match
返回一个 array
比赛我们如何使用该数组来比较我们清理后的字符串与其反向自我?

Array.reverse {#arrayreverse}


reverse
方法,如果名称正确,则反转数组的元素。

[1, 2, 3].reverse();
// [3, 2, 1]

这看起来很有用!匹配所有字母数字字符后,我们可以翻转该数组,看看是否所有字符串都排成一行。


但是比较数组并不像比较字符串那么简单,那么我们如何才能将匹配数组转换回字符串呢?

Array.join {#arrayjoin}


join
方法将数组的元素拼接成一个字符串,可选择取一个 separator


分隔符是第一个参数,您不需要提供它。它基本上会"串化"你的数组。

[1, 2, 3].join();
// "1,2,3"

如果您提供它,分隔符将介于每个元素之间。

[1, 2, 3].join('my separator');
// "1my separator2my separator3"

[1, 2, 3].join(',');
// "1,2,3"

[1, 2, 3].join(', ');
// "1, 2, 3"

[1, 2, 3].join('sandwich');
// "1sandwich2sandwich3"

让我们看看它如何适合我们的算法。

'Ra_Ce_Ca_r   -_-'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    .join('');

// "racecar"

看看如何简单地重新创建没有标点符号或混合套管的原始字符串?


如果我们扭转它怎么办?

'Ra_Ce_Ca_r   -_-'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    // flip it around
    .reverse()
    .join('');

// "racecar"

这是一个回文!我的名字不会是回文。

'yazeed'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    // flip it around
    .reverse()
    .join('');

// "deezay"

似乎我们有解决方案。我们来看看最终的代码。

The Final Code {#thefinalcode}

function palindrome(str) {
    const alphanumericOnly = str
        // 1) Lowercase the input
        .toLowerCase()
        // 2) Strip out non-alphanumeric characters
        .match(/[a-z0-9]/g);
        
    // 3) return string === reversedString
    return alphanumericOnly.join('') ===
        alphanumericOnly.reverse().join('');
}



palindrome("eye");

输入这个并运行测试,我们很好!

all-tests-passed

Summary {#summary}

  1. Lowercase input via str.toLowerCase();
  2. Match all alphanumeric characters using a regular expression via str.match(/[a-z0-9]/g).
  3. Use Array.reverse and Array.join on the alphanumeric matches to compare the original against its reversed self. If they're identical we get back true, otherwise we get back false!

Thanks for reading {#thanksforreading}


如果你想要一个更详细的视频,here's the YouTube version again


有关此类更多内容,请访问https://yazeedb.com。请告诉我你还想看到什么!My DMs are open on Twitter.


直到下一次!

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号:银河系1号


联系邮箱:public@space-explore.com


(未经同意,请勿转载)