web-dev-qa-db-ja.com

特定のインデックス位置の配列に項目を挿入する方法(JavaScript)

私はJavaScriptの配列のinsertメソッドを探しています。

arr.insert(index, item)

できればjQueryで、しかしどんなJavaScript実装でもこの時点でするでしょう。

2464
tags2k

あなたが欲しいのは、ネイティブ配列オブジェクトのsplice関数です。

arr.splice(index, 0, item);は指定されたインデックスでitemarrに挿入します(最初に0項目を削除する、つまり単なる挿入です)。

この例では、配列を作成し、それに要素をインデックス2に追加します。

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());

3846
tvanfosson

こうすることでArray.insertメソッドを実装できます。

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

それからあなたはそれを使うことができます:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
230
FrEsC 81

スプライス以外にも、元の配列を変更するのではなく、追加された項目を使って新しい配列を作成するというこのアプローチを使うことができます。可能な限り突然変異を避けるべきです。ここではES6スプレッド演算子を使用しています。

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

これは、新しい項目に対してrest演算子を使用するように関数を少し微調整することによって複数の項目を追加し、それを返される結果にも展開するために使用できます

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]

72
Gaafar

カスタム配列insertメソッド

1.複数の引数と連鎖のサポート

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

複数の要素を(ネイティブの splice のように)挿入でき、連鎖をサポートします。

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2.配列型引数のマージとチェーニングのサポートあり

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

引数からの配列を与えられた配列とマージすることができ、また連鎖をサポートします。

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

デモ: http://jsfiddle.net/UPphH/

69
VisioN

あなたが一度に配列に複数の要素を挿入したい場合は、このスタックオーバーフローの答えをチェックしてください: JavaScriptで配列に配列を接続するためのより良い方法

両方の例を説明するための関数もいくつかあります。

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

最後にここにjsFiddleがありますので、あなたは自分でそれを見ることができます: http://jsfiddle.net/luisperezphd/Wc8aS/

そして、これはあなたが関数を使う方法です:

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);
33
Luis Perez

適切な関数型プログラミングと連鎖目的のためには、Array.prototype.insert()の発明が不可欠です。実際には、全く意味のない空の配列ではなく、変更された配列を返すのであれば、実際にはspliceは完璧だったでしょう。だからここに行く

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

Array.prototype.splice()を使った上記のものは元の配列を変更しているので、「自分のものではないものは変更すべきではない」と不平を言う人もいるかもしれません。それで公共の福祉のために私は元の配列を変えない別のArray.prototype.insert()を与えたいと思います。ここに行きます。

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

16
Redu

この場合は純粋な JavaScript を使用することをお勧めします。JavaScriptにはinsertメソッドもありませんが、私たちはあなたのために仕事をする 組み込みArray メソッドであるメソッドを持っています splice ...という名前です。

splice() ...を見てみましょう。

Splice()メソッドは既存の要素を削除したり新しい要素を追加したりすることで配列の内容を変更します。

OK、この配列が下にあると想像してください。

const arr = [1, 2, 3, 4, 5];

このようにして3を削除することができます。

arr.splice(arr.indexOf(3), 1);

これは3を返しますが、arrを確認すると、次のようになります。

[1, 2, 4, 5]

これまでのところ、それほど良いことですが、どのようにしてspliceを使って新しい要素を配列に追加することができますか? 3をarrに戻してみましょう...

arr.splice(2, 0, 3);

私たちがしたことを見てみましょう...

再度 splice を使用しますが、今回は2番目の引数として 0 を渡します。つまり、アイテムを削除しないことを意味しますが、同時に3番目の引数として3を追加します。それは2番目のインデックスに追加されます...

あなたは、私たちが delete add を同時にできることに気づいているはずです。

arr.splice(2, 2, 3);

これは、インデックス2で 2個の項目 を削除し、インデックス2で 3 を追加すると、結果は次のようになります。

[1, 2, 3, 5];

これは、スプライスの各項目がどのように機能するかを示しています。

array.splice(開始、削除カウント、項目1、項目2、項目3 ...)

10
Alireza

これはすでに答えられていますが、私はこのメモを別の方法として追加します。

定義上、ソート順になることが保証されていない「連想配列」(つまりオブジェクト)から派生するため、 既知の数 の項目を配列の特定の位置に配置したいと思いました。結果として得られる配列をオブジェクトの配列にしたいのですが、配列はその順序を保証するので、オブジェクトは配列内の特定の順序になるようにします。だから私はこれをしました。

まずソースオブジェクト、PostgreSQLから取得したJSONB文字列。各子オブジェクトの「order」プロパティでソートしたいと思いました。

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

オブジェクト内のノード数はわかっているので、最初に指定された長さの配列を作成します。

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

次に、オブジェクトを反復処理し、新しく作成された一時オブジェクトを配列内の目的の位置に配置します。実際には「ソート」は行われません。

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);
6
Ville

Array#reduceを使用したもう1つの解決策。

var arr = ["Apple", "orange", "raspberry"],
    arr2 = [1, 2, 4];

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.Push(item, a) : s.Push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);

6
kind user

特定のインデックスに単一の要素を追加

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

特定のインデックスに複数の要素を追加

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements
5
Srikrushna Pal

私はこれを試してみました、そしてそれはうまく働いています!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

Indexは要素を挿入または削除したい位置です。 0、つまり2番目のパラメータはインデックスから削除する要素の数を定義します。 itemは作成したい新しいエントリです。配列で。それは一つでも複数でもよい。

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
3
Pawan

まだこの問題に問題を抱えていて、上記のすべてのオプションを試してみたことがなく、それを手に入れたことがない人。私の解決策を私は共有しています、これはあなたがあなたのオブジェクト対配列のプロパティを明示的に述べたくないことを考慮することです。

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

これは、参照配列を繰り返し、それをチェックしたいオブジェクトと比較し、両方を文字列に変換してから、一致した場合は繰り返しを行うという組み合わせです。それならあなたはただ数えることができます。これは改善することができますが、これは私が決心したところです。お役に立てれば。

2
Clyde

以下のようにreduceメソッドの利益を取る:

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

そのため、このようにしてindexに要素が挿入された新しい配列を返すことができ(Pushやspliceを使用するよりも優れた機能的な方法になります)、indexが配列の長さより大きい場合は挿入されます最後に。

2
alejoko

少し古いスレッドですが、スプライスのインターフェイスは紛らわしいため、上記のReduに同意する必要があります。そして、「2番目のパラメーターが0の場合にのみ空の配列を返します。0より大きい場合、配列から削除されたアイテムを返します」というcdbajorinの応答は正確ですが、ポイントを証明しています。関数の目的は、スプライスすること、または以前にJakob Kellerが言ったように、「結合または接続、変更することです。要素を追加または削除することを含む、現在変更している確立された配列があります。」削除された要素の戻り値(ある場合)は、せいぜい厄介です。そして、私は、この方法が自然と思われるもの、スプライスされた要素が追加された新しい配列を返していれば、チェーンに適している可能性があることに100%同意します。次に、["19"、 "17"]。splice(1,0、 "18")。join( "...")または返された配列を使用して好きなことを実行できます。それが削除されたものを返すという事実は、ちょっとナンセンスな私見です。メソッドの意図が「要素のセットを切り取る」ことであり、それが唯一の意図である場合は、おそらく。すでに何をカットしているのかわからない場合は、おそらくこれらの要素をカットする理由がほとんどないようですね。既存の配列を変更するよりも、既存の配列から新しい配列を作成するconcat、map、reduce、sliceなどのように動作する方が良いでしょう。これらはすべてチェーン可能であり、それはIS重要な問題です。配列の操作を連鎖することはかなり一般的です。言語はどちらか一方の方向に進み、可能な限りそれに固執する必要があるようです。 Javascriptは機能的で宣言的ではないため、標準からの奇妙な逸脱のように思えます。

1
meem

ここに2つの方法があります:

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1 : ", array.join(" "));

または

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));
0
M. Hamza Rajput

これが私のアプリケーションの一つで使っている作業関数です。 

これはアイテムが終了したかどうかをチェックします

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position. 
        output.splice(position, 0, item);
    }
    //empty string is so we do not concatenate with comma or anything else. 
    return output.join("");
};

そしてそれを以下で呼びます。 

ifExist("friends", [ ' ( ', ' )' ], 1)}  // output: ( friends )
ifExist("friends", [ ' - '], 1)}  // output:  - friends 
ifExist("friends", [ ':'], 0)}  // output:   friends: 
0
Lesly Revenge