JavaScript配列メソッド1/3 -配列の変更

最新のJavaScriptの配列プロトタイプには、開発者が知っておくべき便利な方法がたくさんあります.しかし、それらのいくつかはより最近のecmascriptに導入されました.それで、あなたが最新の標準に遅れないか、あなたがちょうど初心者であるならば、それは新しい何かを学ぶ良い時間です.私はまた、これらのメソッドについていくつかのトリックやトリビアを表示するつもりです.

読む前に

この記事を読む前に絶対初心者ならbrief introduction to JavaScript arrays ここで私はこの構成を簡潔に論じた.

新しいアイテムを配列に加える方法？

push ()を使用してください.配列でできる最も一般的な操作の1つ.配列に新しい要素を追加します.

const array = ["🐒", "🐬", "🐅"];
array.push("🐓");
console.dir(array) // Output: ["🐒", "🐬", "🐅", "🐓"]

push ()は、配列のサイズを自動的に拡張し、最後に新しい要素を追加します.一つ以上の要素を一度にpush ()することもできます.

const array = ["🐒", "🐬", "🐅"];
array.push("🐓", "🐉", "🐄");
console.dir(array) // Output: ["🐒", "🐬", "🐅", "🐓", "🐉", "🐄"]

また、push ()は配列の新しい長さを返すことに注意してください.

const array = ["🐒", "🐬", "🐅"];
console.dir(array.push("🐉")); // Output: 4
console.dir(array); // Output: ["🐒", "🐬", "🐅", "🐉"]

手動で配列を拡張し、あるインデックスで要素を追加する必要がある場合もあります.

const array = [];
array[2] = "🐬";
console.dir(array); // Output: [undefined, undefined, "🐬"]
array[0] = "🐅";
array[1] = "🐉";
console.dir(array); // Output: ["🐅", "🐉", "🐬"]

この例では、空の配列を作成します.次の行は、そのサイズをN + 1に拡張し、🐬 最後の値として.

Thanks to the console.dir() in the third line you can see that there are some undefined values in this array. As I said in my brief introduction to JavaScript arrays, when you're extending the length of an array, JavaScript creates new elements with undefined values to meet the new size.

このメソッドは既存の配列でも動作します.

const array = ["🐅", "🐬"];
array[4] = "🐄";
console.dir(array); // Output: ["🐅", "🐬", undefined, undefined, "🐄"]

どのようにContext /マージ配列？

concat ()の使用方法は次のとおりです.

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const result = array1.concat(array2);
console.dir(result); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉"]

つ以上の配列をマージし、新しい配列を返します.以下に3つの配列の例を示します:

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const array3 = ["🐎", "🐄"];
const result  = array1.concat(array2, array3);
console.dir(result); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉", "🐎", "🐄"]

しかし、3番目の変数を割り当てる必要なしに、1つの配列を別の配列にマージしたい場合はどうすればよいでしょうか?ES 2015は、いわゆるshsh ()と組み合わせて、いわゆる破壊の割り当てを導入しました.

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
array1.push(...array2);
console.dir(array1); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉"]

TAダム!ここでは、最初の配列の2番目の配列の要素をすべて持っています.
破壊を使用すると、concat ()と同様の動作を実現できます.マージされた配列を別の配列に破壊する必要があります.

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const array3 = ["🐎", "🐄"];
const result = [...array1, ...array2, ...array3];
console.dir(result);

配列から要素を削除する

配列から最後の要素を削除するには?

配列のpop ()関数を呼び出すのと同じくらい簡単です.

const array = ["🐅", "🐬", "🐄"];
array.pop();
console.dir(array); // Output: ["🐅", "🐬"]

pop ()は、削除された要素を返すので便利です.

const array = ["🐅", "🐬", "🐄"];
const lastElement = array.pop();
console.dir(lastElement); // Output: "🐄"

配列から最初の要素を削除するには？

ここでは便利です.pop ()と同様、削除される要素も返します.

const array = ["🐅", "🐬", "🐄"];
const firstElement = array.shift();
console.dir(firstElement); // Output: "🐅"
console.dir(array); // Output: ["🐬", "🐄"]

特定のインデックスの配列から要素を削除する方法は?

特定の要素を削除するには、削除演算子を使用できます.

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array); // Output: ["🐅", undefined, "🐄"]

この要素は完全に削除されます.配列にはインデックス1の要素がありません.興味深い点は、3の長さの配列で残っていることです.あなたが要素を残して、それが値を持たないことを望むならば、それは未定義にそれをセットします.例:

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: false
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = '🐬';
array[1] = undefined;
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", undefined, "🐄"]

しかし、要素を削除して配列を短くするときにはどうなりますか?この場合、splice ()を使用できます.

const array = ["🐅", "🐬", "🐄"];
array.splice(1, 1);
console.dir(array); // Output: ["🐅", "🐄"]

splice ()の最初の引数はstartIndexで、配列を"切断"したい場所を設定します.番目の引数は“カット”の長さを決定します.0 utの場合、削除するだけです🐬したがって、インデックス1の「切断」を開始し、1つの要素だけを削除します.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.splice(2, 3);
console.dir(array); // Output: ["🐅", "🐬", "🐉"]

今、我々の「カット」は始まった🐄そして、その場所から3つの要素を取り除きたかった.
spliceでは、より多くの引数を渡すことによって、削除された要素のギャップを埋めることもできます.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.splice(2, 2, "🐖", "🦙");
console.dir(array); // Output: ["🐅", "🐬", "🐖", "🦙", "🐓", "🐉"]

または破壊を使用して、我々は別の配列とギャップを埋めることができます.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const fillArray = ["🐖", "🦙"];
array.splice(2, 2, ...fillArray);
console.dir(array); // Output: ["🐅", "🐬", "🐖", "🦙", "🐓", "🐉"]

では、3つのメソッドを比較して、結果を見ましょう!

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: false
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = "🐬";
array[1] = undefined;
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = "🐬";
array.splice(1,1);
console.dir(array.length); // Output: 2
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", "🐄"]

お勧め

delete要素を削除しますが、配列のサイズに影響しません.

未定義の要素を設定すると、完全に削除されず、配列のサイズに影響を与えません.

splice ()は要素を削除し、配列のサイズに影響します.

配列から文字列を作成する

配列のすべての要素から一つの文字列を作成する必要があります.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.join();
console.dir(result); // Output: "🐅,🐬,🐄,🐒,🐓,🐉"

また、セパレータを最初の引数として渡すこともできます.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.join(' | ');
console.dir(result); // Output: "🐅 | 🐬 | 🐄 | 🐒 | 🐓 | 🐉"

文字列から配列を作成する

split ()を文字列で呼び出すことで実現できます.split ()は、配列プロトタイプの一部ではないことを知っていますが、私はその部分について述べています.

const string = "🐅,🐬,🐄,🐒,🐓,🐉";
const result = string.split();
console.dir(result); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]

split ()のデフォルトのセパレータは""ですが、必要に応じて変更できます.

const string = "🐅|🐬|🐄|🐒|🐓|🐉";
const result = string.split("|");
console.dir(result); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]

配列を逆にする方法？

JavaScriptにもこのメソッドがあります.という名前です.reverse ()

const array = ["🐅", "🐬", "🐄"];
const result = array.reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]

しかし、この方法には1つの問題があります.それは我々のオリジナルの配列を突然変異している.さて、元の配列を保存したいなら問題です.

const array = ["🐅", "🐬", "🐄"];
const result = array.reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐄", "🐬", "🐅"]

我々はこの問題を解決するために何をすることができますか?まあ引数なしでconcat ()あるいはslice ()をコールします.

const array = ["🐅", "🐬", "🐄"];
const result = array.concat().reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐅", "🐬", "🐄"]

NOTE. This works because concat() and slice() are returning a copy of the array - not a reference. By using reverse() after them we're only altering the copy.

または(クリーナーソリューション)我々の親友を使用して、我々はすべての必要なヒーローが、彼に値する、割り当てを破壊しなかった.

const array = ["🐅", "🐬", "🐄"];
const result = [...array].reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐅", "🐬", "🐄"]

NOTE. Here we are just destructuring our array into another array, which is going to be reversed. So it's basically also calling reverse() on a copy.

また、私たち自身の逆関数を実装することができます.
ただ冗談、我々は車輪を再発明するつもりはない.つまり、しかし、...私はあまりにも忙しいし、いくつかの方法をカバーする必要があります.しかしthese guys これを行うには時間があり、いくつかのファンキーなソリューションのスレッドを確認することができます.

配列の先頭に新しい要素を追加するには?

JavaScriptメソッドが人であれば、push ()およびshift ()はunshift ()という名前の子です.push ()のようなunshift ()は配列に新しい要素を追加します.

const array = ["🐅", "🐬", "🐄"];
array.unshift("🐉", "🐓");
console.dir(array); // Output: ["🐉", "🐓", "🐅", "🐬", "🐄"]

push ()と同様に1つ以上の要素を受け付けます.

const array1 = ["🐅", "🐬", "🐄"];
const array2 = ["🐎", "🐄"];
array1.unshift(...array1);
console.dir(array1); // Output: ["🐉", "🐓", "🐅", "🐬", "🐄"]

また、破壊を使用して配列を別の先頭にマージできます.
push ()と同様に、unshift ()は配列の新しい長さを返します.

const array = ["🐒", "🐬", "🐅"];
console.dir(array.unshift("🐓")); // Output: 4
console.dir(array); // Output: ["🐓", "🐒", "🐬", "🐅"]

JavaScriptの配列の並べ替え方法

jsでのソートはsort ()メソッドで行います.それは配列をコピーしないように、場所のアルゴリズムを利用して、それは元を変更します.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.sort();
console.dir(array); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

オリジナルにしたいなら、reverse ()と同じトリックを行うことができます.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.slice().sort();
console.dir(array); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]
console.dir(result); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = [...array].sort();
console.dir(array); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]
console.dir(result); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

NOTE. Emojis are just unicode characters and every emoji has it's unique code. For example 🐄 is U+1F404 and 🐉 is U+1F409. The algorithm is going to sort by this codes.

既定では、このメソッドは昇順を使用して要素をソートします.降順にソートしたいなら、私たち自身の比較関数を書くことができます.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.sort().reverse();
console.dir(array); // Output: ["🐬", "🐓", "🐒", "🐉", "🐅", "🐄"]

sort ()メソッドのデフォルトの振る舞いも非常に興味深い問題を引き起こします.

const array = [3, 45, 12, 1, 78, 369];
array.sort();
console.dir(array); // Output: [1, 12, 3, 369, 45, 78]

それは1つの結論を提供します.

デフォルトでは、要素は文字列に変換され、UTF - 16で比較されます.それで、「水」と「火」のような単語を比較するとき、「Fire」は最初に来ます、しかし、100と5のようなストリングに数字を変換するとき、我々は「5」の前に「100」に来ています.これを解決するためには、最初の引数として独自の比較関数を用意する必要があります.

const array = [3, 45, 12, 1, 78, 369];
array.sort((first, second) => first - second);
console.dir(array); // Output: [1, 3, 12, 45, 78, 369]

ああ、ずっと良い.

NOTE. We use first - second rather than first > second because it's more performant.

並べ替え番号の配列の問題は私たちの唯一の懸念ではありません.あなたはフランス語、ポーランド語、ドイツ語、チェコ語、スペイン語、またはネイティブの言語がdiacriticsといくつかの文字を持っている他の国の市民なら、いくつかのローカル文字列を比較する.さてあなたの人生は容易ではない.ここでは、hello ()はアクセント文字で動作します.

const array = ["turkuć podjadek", "konik polny", "komar", "mucha", "ćma"];
array.sort();
console.dir(array); // Output: ["komar", "konik polny", "mucha", "turkuć podjadek", "ćma"]

この例は、いくつかのポーランドの昆虫の名前を使用しています.アクセントの付いた言葉は、最後に置かれます.例えば、「アンマ」は最初でなければなりませんが、それは最後です.これを修正するには、再び私たち自身の比較関数を提供する必要があります.

const array = ["turkuć podjadek", "konik polny", "komar", "mucha", "ćma"];
array.sort((first, second) => first.localeCompare(second));
console.dir(array); // Output: ["ćma", "komar", "konik polny", "mucha", "turkuć podjadek"]

現在、それは働いています.localecompare ()は、指定した文字列が与えられた文字列の後または前に来るかどうかを調べます.

配列からの最初の/最後の/ N要素を得る方法？

slice ()はあなたが探している解決策です.これは2つの引数、start indexとend indexを受け取ります.ここにいくつかの便利なスニペットです.

配列の最初の3つの要素を取得する

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(0, 3);
console.dir(result); // Output: ["🐄", "🐅", "🐉"]

配列の最後の要素を取得する

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(-1);
console.dir(result); // Output: ["🐬"]

配列の後半を得る

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(array.length / 2);
console.dir(result); // Output: ["🐒", "🐓", "🐬"]

配列の前半を得る

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(0, array.length / 2);
console.dir(result); // Output: ["🐄", "🐅", "🐉"]

番目の要素の後に要素を取得する

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(4);
console.dir(result); // Output: ["🐓", "🐬"]

配列のスライスを取得する

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(2, 4);
console.dir(result); // Output: ["🐉", "🐒"]

ご覧のように、slice ()は多くのことができます.

配列を平らにする方法？

平坦化は、配列の寸法を減らすことを意味する.例えば、2次元配列を持っていれば、フラット()を使って1次元だけに減らすことができます.

const array = [["🐓", "🐄"], ["🐅", "🐒"]];
const result = array.flat();
console.dir(result); // Output: ["🐓", "🐄", "🐅", "🐒"]

平坦化は、元の配列に影響しません.それは価値をコピーしている.
デフォルトではflater ()は1次元のみを平らにします.つの次元に3つ以上の次元配列を平らにする必要がある場合は、深さ引数を提供する必要があります.

const array = [["🐓", "🐄"], ["🐅", ["🐒", "🐒"]]];
const result = array.flat(2);
console.dir(result); // Output: ["🐓", "🐄", "🐅", "🐒", "🐒"]

配列内の要素のコピー方法

場合によっては、1つの位置から別の要素をコピーします.このため、copy within ()を使用することができます.slice ()のように、このメソッドには多くの使用可能なケースがあります.

最初の2つの要素を最後の2つの要素にコピーする

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(-2);
console.dir(array); // Output: ["🐉", "🐒", "🐓", "🐬", "🐉", "🐒"]

ある値を別の値と置き換える

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(2, 0, 1);
console.dir(array); // Output: ["🐉", "🐒", "🐉", "🐬", "🐄", "🐅"]

ここで我々は🐓 インデックス2では、インデックス0からインデックス1までの部分を🐉. 2番目の引数を2に変更することにより、🐬, 基本的に挿入する🐉 and 🐒 場所🐓 and 🐬 があった.

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(2, 0, 2);
console.dir(array); // Output: ["🐉", "🐒", "🐉", "🐒", "🐄", "🐅"]

今のところ-それはすべてです.配列を変更するのに使用される配列プロトタイプからすべてのメソッドを議論しました.このシリーズは3つの部分に分割され、次の部分は配列イテレータを扱い、それらを通してループし、3番目は配列の要素を探索することです.あなたが私の仕事に感謝するならばmy blog そして、私のニュースレターに署名します(私はスパムをしません、あなたは私の最新の内容についてだけに気がつきます:D).