ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript - rray カーディオ 2 日目

JavaScript - rray カーディオ 2 日目

WBOY
リリース: 2024-07-17 20:27:43
オリジナル
281 人が閲覧しました

皆さん、ウェスボスの JavaScript30 の別の日へようこそ!さて...前回の投稿から 2 週間以上が経ちましたが、とても残念です。 そうは言っても、私は現在の仕事に通知を出しましたが、彼らは私を現場に追いやっているので、最近はコーディングに取り組む時間がそれほど多くありません...しかし今、私は正式にパートタイムです。この投稿だけではなく他のプロジェクトにも取り組む時間ができるので、これらの投稿がより定期的に、そしておそらくより多様なものになることは間違いありません。 ただし、あなたは私の人生の最新情報を知りにここに来たのではありません。このコースについてもっと知りたいためにここに来ました。 それでは始めましょう!

Array Cardio 2 日目は、1 日目と比べて何もありませんでした。 嘘はつきません。 最初のチャレンジがどうなったかを考えると、このチャレンジに参加するのが本当に怖かったです。 最初のコースでは、常にグーグル検索をしたり、フープを飛び越えたりする必要がありました。 まさにトレーニングのように感じましたが、これはストレッチというかヨガのセッションに近いものでした。 Array Cardio 2 日目の最初の部分では、Array.prototype.some() と Array.protoype.every() を使用しました。 人々とその誕生年のリストを保持する配列内のオブジェクトが与えられました。 この情報をもとに、少なくとも 1 人が 19 歳以上であるかどうか、そしてすべての人が 19 歳以上であるかどうかを把握するよう求められました。

const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];
    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19 or older?
    const isAdult = people.some(person => ((new Date())
  .getFullYear()) - person.year >= 19 )

  console.log({isAdult})
    // Array.prototype.every() // is everyone 19 or older?
    const areAdult = people.every(person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19
    }
  )
  console.log(areAdult)
ログイン後にコピー

この挑戦のこの部分では、私は自分自身についてかなり良い気分になりました。それについては嘘はつきません。 簡単なGoogle検索の後、Array.prototype.some()の使用方法についての答えが得られ、それは.every()にも直接適用されました。 私はそれを完全に吹き飛ばし、この挑戦​​を記録的な速さで完了できると感じました。結局のところ、私は正しかったことも間違っていたことも判明しました...

この課題の 2 番目、そして何らかの形で最後の部分には、Array.prototype.find() と Array.prototype.findIndex() が関係しました。 配列内に別のオブジェクトが与えられましたが、今回は、ある種のレストランのレビューに対するコメントのリストが含まれており、区別するためにすべて独自の ID 番号が付いていました。 先ほどと同じように、簡単な Google 検索を実行すると .find() の使い方とその上手な使い方がわかりましたが、どうやらそれは Wes が探していたものではなかったようです。 console.log を使用しながら、指定された番号に基づいて ID を呼び出す作成した関数を参照するときにのみ .find() を使用しました。 私たち二人が同じ結果に至ったことを考えると、それは彼がやったことと似ていると主張できると思います...ある意味...ご存知のように。 しかし、わかりません。この場合、私は彼のコードよりも私のコードの方が気に入っていると思います。

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    function hasId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.find(hasId))

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    function thisId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.findIndex(thisId))

    const index = comments.findIndex(comment => comment.id === 823423)

    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ]
    console.table(newComments)
ログイン後にコピー

また、彼がチャレンジの最後の部分で私たちに何をして欲しいのかがよく分かっていなかったことも分かりました。 findIndex() を使用させると同時に、先ほど見つけた同じ ID を持つコメントを削除することも求めていました。 VScodeを実行してコメントを手動で削除しました。 公平を期すために言うと、彼はコメントがなくなった場合に何が返されるかを示したかっただけだと思いました。 彼は、.splice または .slice のいずれかを使用して、新しいコード (この演習ではより意味のある) でコメントを削除し、その特定のコメントが含まれていない新しい配列にアクセスできるようにしたいことがわかりました。 そうですね…手動で削除しただけなので、そこまではいきませんでした。 しかし、私は戻って彼と一緒にコードを書き、新しいコード行でどのようにそれが可能になるかを確認しました。

それで、そのとおりです。 Array Cardio 2 日目。これの 3 日目はないと知って安心しました。 これは、配列と配列の操作方法についてこれ以上練習できないと言っているわけではありません。 このコースが進んだ限りでは、おそらくこれまでで最も面白くなかったでしょう。 次回のレッスンに注目してください。時間はもっとあるので、できれば今週か来週初めに公開できると思います。 とにかく、JavaScript30: HTML5 Canvas を楽しむ!

の準備ができていることを願っています。

Fun With HTML5 Canvas

以上がJavaScript - rray カーディオ 2 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート