強力なアーリーprototype.splice()

4372 ワード

このapiに対して単独でこのようなブログを書くのは、最近の面接でこのAPIについて話したので、私はその使い方を完全に言えませんでした.一方、熟知していることでこのapiは確かに柔軟で強力だと感じ、javascriptの柔軟性を十分に体現しているからです.だからこのようなブログを書くと、自分がこの方法をもっと深く覚えることができて、もっと多くの同僚にこの方法で自分のjavascriptコードをもっと簡潔にして、もっと効率的にすることができることを望んでいます.
MDN Web Docs中対Array.prototype.splice()の説明情報は以下の通りです.
splice(start, deleteCount, item1, item2, ...) メソッドは、既存の要素を削除または置換したり、新しい要素を追加したりすることで、配列の内容を変更します.
伝達情報は以下の通りである.
1.startが現在の配列をどの位置から変更するか、このパラメータには次のような状況があります.
  • 0から配列長-1、すなわち現在の配列の任意の位置.
  • は配列長-1より大きく、エラーは報告されませんが、現在の配列の要素は削除されません.2番目のパラメータは無効です.しかし、この時点で3番目、4番目に伝わったら..パラメータでは、これらのパラメータ値が配列の末尾に追加され、pushメソッドに似ています.
  • は0未満で、開始位置が負の場合、配列の末尾から逆方向に検索されます.たとえば、-1は最後の要素、-2は最後から2番目の要素です.

  • 2.deleteCount削除するコンテンツの長さ.このパラメータには次のような場合があります.
  • 0または負の数は配列要素を削除しません.
  • が0より大きくstart指定位置から配列の最後の要素までの長さより小さい場合、指定された長さの要素が削除されます.
  • はstart指定位置から配列の最後の要素までの長さより大きく、splice(0,9999999999)のようなstart位置の後ろのすべての要素を削除します.
    3.startの位置から追加または置換する要素は、複数あります.
    上記の説明について、そのすべての使い方を一つ一つ検証します.
    要素の削除(2番目のパラメータは0ではなく、後続のパラメータは入力されず、削除のみ)
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 1); //               
    console.log(ary); // ['a', 'c', 'd', 'e', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 2); //               
    console.log(ary); // ['a', 'd', 'e', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(-2, 1); //          ‘e’
    console.log(ary); // ['a', 'b', 'c', 'd', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(0, ary.length); //       
    console.log(ary); // []

    要素の追加(2番目のパラメータが0で、後続のパラメータが空でない場合は追加のみ削除しません)
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(ary.length, 0, 'x'); //            
    console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f', 'x']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 0, 'x'); //                
    console.log(ary); // ['a','x', 'b', 'c', 'd', 'e', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(-2, 0, 'x'); //                  
    console.log(ary); // ['a', 'b', 'c', 'd', 'x', 'e', 'f']
    let ary = ['a', 'b', 'c'];
    let ary2 = ['d', 'e', 'f']
    ary.splice(ary.length, 0, ...ary2); //     
    console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f']

    要素の更新/置換(2番目のパラメータは0ではなく、後続のパラメータは空ではありません.ここで注意したいのは、入力された置換要素の個数が前の長さに等しくてもよいし、フロントエンドの長さに等しくなくてもよいことです)
    置換要素は実際には削除してから挿入するので、パラメータの意味を明らかにしなければなりません.
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 1, 'x'); //        ‘b’ ‘x’ (               )
    console.log(ary); // ['a', 'x', 'c', 'd', 'e', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 2, 'x'); //            ‘b’ ‘c’,      ‘x’ (             )
    console.log(ary); // ['a', 'x', 'd', 'e', 'f']
    let ary = ['a', 'b', 'c', 'd', 'e', 'f'];
    ary.splice(1, 2, 'x', 'y', 'z'); //            ‘b’ ‘c’,      ‘x’,‘y’, ‘z’ (             )
    console.log(ary); // ['a', 'x','y', 'z', 'd', 'e', 'f']

    以上が私が今まとめたよく使うspliceの使い方です.もっと使い方があれば、伝言討論を歓迎します.