Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptを使用して特定の配列位置にアイテムを追加する方法

JavaScriptで特定の配列位置(インデックス)にアイテムを追加する方法を学びます。

アイテムを配列に追加したいが、追加(最後に追加)または追加(最初に追加)したくないとします。配列の特定の位置/場所にアイテムを追加したい。

注:特定の位置/場所でデータを操作する場合、それをインデックスと呼ぶことがよくあります。 配列インデックスを使用 0からカウントを開始します 、つまり:

  • 0 1です
  • 1 2です
  • など。

したがって、5つのアイテムを含む配列があり、3番目のアイテムにアクセスしたい場合は、2としてアドレス指定します。 。

了解しました。ここに来た目的を実行しましょう。

splice()メソッドを入力してください

配列内の特定のインデックス位置にアイテムを追加するには、強力なJavaScript array.splice()を使用できます。 方法。 splice() メソッドは、配列にアイテムを追加したり、配列からアイテムを削除したりできます。

splice() 構文は次のようになります:

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

splice() メソッドは3つ以上の引数を取ります:

  • 引数1:startIndex 何かを追加したい場所(位置)です。
  • 引数2:オプション deleteCount 削除するアイテムの数を指定できる引数(startIndexから) 位置)。
  • 引数3:配列に追加する新しいアイテムの値。

実用的なsplice()の例

たとえば、「後で質問する」という架空のアクション満載の映画の俳優のキャストリストがあるとします。 俳優は、映画での役割の大きさに基づいた順序でリストされています。

キャストの1人の俳優は、彼の名前がメインのキャストリストに表示されないため、タントラムを投げることに決めました。

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman"
  "The Rock",
  "Wesley Snipes"
]

そして、動揺した俳優は、全能のスティーブン・セガール(!!)に他なりません。 この映画に登場するのは正確に7秒で、無意味な10人の敵を倒すのに十分な時間です。シーガル氏は、これが彼をメインキャストリストに載せるのに十分なスクリーンタイムであると信じています。

そして、誰がスティーブン・セガールと議論するのですか?

了解しました。splice()を使用して、彼をメインキャストリストに追加しましょう。 学習したメソッドと引数の構文。

スティーブン・セガールをメインキャストリストの2番目の俳優として、マイケルジェイホワイトの直後に追加します(理由はすぐに説明します):

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

スティーブンに行きます。あなたが今幸せになっていることを願っています!

そして、繰り返しが学習の重要な部分であるという理由だけで、これは上記のコードで起こっていることです:

  • splice()を添付します mainCastListへのメソッド 変数
  • 次に、3つの引数をsplice()に適用します。 、startIndexの位置(1 )、deleteCount0 =何も削除されません)、最後に、そのインデックス位置に追加するアイテム("Steven Seagal"

ああ、そして私たちがリストのナンバーワンとしてシーガル氏を追加できない理由は、明らかにマイケル・ジェイ・ホワイトが彼のお尻を蹴るからです。

splice()メソッドについて知っておくと便利です

一度にアイテムを追加

一度にアイテムを追加する場合は、次のようにカンマで区切ります。

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

startIndexからすべてのアイテムを削除

2番目の引数を渡さない場合(この例では、0 )次にすべて startIndexのアイテム 位置はデフォルトで削除されます。したがって、splice()を使用するときは注意してください 実際のプロジェクトについて。

アレイの最後から開始

配列の先頭ではなく末尾からアイテムを追加/削除する位置を指定する場合は、負の値を使用します。 最初のsplice() このような議論:

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

現在、シーガル氏はメインキャストリストの最後から2番目です。これは、自己責任で行う大胆な決断です。


  1. JavaScriptを使用してCSSルールをスタイルシートに追加する方法は?

    insertRule()は、スタイルシートの定義された位置にルールを追加するのに役立ちますが、deleteRule()は特定のスタイルを削除します。 次の例は、JavaScriptを使用してスタイルシートに追加できるCSSルールを示しています。 例 <!DOCTYPE html> <html> <head> <style type="text/css" id="custom"> body {    background-color: silver; } </style> &

  2. MongoDBを使用してネストされた配列に新しいアイテムを追加するにはどうすればよいですか?

    これには、update()とともにfind()を使用します。ドキュメントを使用してコレクションを作成しましょう- > db.demo124.insertOne( ...    { ...       "Name" : "John", ...       "Id" : 101, ...       "ProjectDetails" : [{ ...