よくあるJavaScript配列操作テクニックまとめ_JavaScriptスキル

この記事の例は、JavaScript 配列の一般的な操作テクニックをまとめたものです。皆さんの参考に共有してください。詳細は以下の通りです。

はしがき

誰もが、jquery やアンダースコア、$.isArray、_.some、_.find やその他のメソッドなどの他のライブラリでの一般的な配列関連の操作に慣れていると思います。これは、ネイティブ JS での配列操作のための追加のパッケージ化にすぎません。
ここでは主にJavaScriptの配列操作でよく使われるAPIをまとめます。プログラムの問題を解決するのに誰もが役立つと信じています。

1. プロパティ
JavaScript の配列は特別なオブジェクトであり、オフセットを表すために使用されるインデックスはオブジェクトのプロパティであり、インデックスは整数である場合があります。ただし、JavaScript オブジェクトのプロパティ名は文字列である必要があるため、これらの数値インデックスは内部で文字列型に変換されます。

2. 操作

1 配列の種類を決定します

コードをコピー コードは次のとおりです。

var array0 = [] // リテラル
; var array1 = new Array() // コンストラクター
; // 注: Array.isArray メソッドは IE6/7/8 ではサポートされていません
アラート(Array.isArray(array0));
// 互換性を考慮して、
を使用できます alert(array1 配列のインスタンス);
// または
alert(Object.prototype.toString.call(array1) === '[オブジェクト配列]');

2 つの配列と文字列

非常に簡単です。配列から文字列に変換するには結合を使用し、文字列から配列に変換するには分割を使用します。

コードをコピー コードは次のとおりです:

// join - 配列から文字列に変換し、join を使用します
console.log(['Hello', 'World'].join(',')) // Hello,World
// 分割 - 文字列から配列に変換し、split
を使用します console.log('Hello World'.split(' ')) // ["Hello", "World"]

3 要素を検索

誰もが一般的に文字列型のindexOfを使用していると思いますが、配列のindexOfを要素の検索にも使用できることを知っている人はほとんどいません。

コードをコピー コードは次のとおりです:

//indexOf - 要素を検索
console.log(['abc', 'bcd', 'cde'].indexOf('bcd')) // 1

//
var objInArray = [
{
名前: 'キング'、
パス: '123'
}、
{
名前: 'king1'、
パス: '234'
}
];

console.log(objInArray.indexOf({
名前: 'キング'、
パス: '123'
})); // -1

var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray)); // 0

上記からわかるように、オブジェクトを含む配列の場合、indexOf メソッドは詳細な比較を通じて対応する検索結果を取得するのではなく、対応する要素の参照を比較するだけです。

4 アレイ接続

concat を使用します。concat を使用すると、新しい配列が生成されることに注意してください。

コードをコピーします コードは次のとおりです:

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 配列の連結を実装した後、新しい配列が作成されます
console.log(array3);

5種類のリスト操作

要素を追加するにはそれぞれpushとunshiftを使用でき、要素を削除するにはそれぞれpopとshiftを使用できます。

コードをコピーします コードは次のとおりです:

// Push/pop/shift/unshift
var 配列 = [2, 3, 4, 5];

//配列の末尾に追加
array.push(6);
console.log(配列); // [2, 3, 4, 5, 6]

//配列の先頭に追加
array.unshift(1);
console.log(配列); // [1, 2, 3, 4, 5, 6]

//最後の要素を削除します
var elementOfPop = array.pop();
console.log(elementOfPop); // 6
console.log(配列); // [1, 2, 3, 4, 5]

//最初の要素を削除します
var elementOfShift = array.shift();
console.log(elementOfShift); // 1
console.log(配列); // [2, 3, 4, 5]

6 つの接合方法

主な 2 つの用途:
①配列の途中から要素を追加・削除
② 元の配列から新しい配列を取得

もちろん、2 つの使用法が一度に組み合わされることもあります。最初の使用法に焦点を当てたシーンもあれば、2 回目の使用法に焦点を当てたシーンもあります。

配列の途中で要素を追加および削除します。splice メソッドでは、次のパラメーターを指定する必要があります。
① 開始インデックス (つまり、要素の追加を開始する場所)
② 削除する要素の数、または抽出する要素の数 (要素を追加する場合、このパラメータは 0 に設定されます)
③配列に追加したい要素

コードをコピーします コードは次のとおりです:

var nums = [1, 2, 3, 7, 8, 9 ];
nums.splice(3, 0, 4, 5, 6);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// その後、削除操作を実行するか、新しい配列を抽出します
var newnums = nums.splice(3, 4);
console.log(nums); // [1, 2, 3, 8, 9]
console.log(newnums); // [4, 5, 6, 7]

7 並べ替え

主にreverseとsortの2つの方法を紹介します。配列の反転にはreverseを使用し、sortメソッドは単純な並べ替えだけでなく複雑な並べ替えにも使用できます。

コードをコピー コードは次のとおりです:

//配列を反転します
var 配列 = [1, 2, 3, 4, 5];
array.reverse();
console.log(配列); // [5, 4, 3, 2, 1]
まず文字列要素の配列を並べ替えます
var arrayOfNames = ["デビッド"、"マイク"、"シンシア"、"クレイトン"、"ブライアン"、"レイモンド"];
arrayOfNames.sort();
console.log(arrayOfNames); // ["ブライアン"、"クレイトン"、"シンシア"、"デイビッド"、"マイク"、"レイモンド"]

数値要素の配列をソートします

コードをコピー コードは次のとおりです:

// 配列要素が数値型の場合、ソート結果はsort() メソッドは非常に満足できるものではありません
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]

sort メソッドは要素を辞書順に並べ替えるため、要素がすべて文字列型であると想定され、要素が数値型であっても文字列型とみなされます。このとき、メソッドを呼び出すときにサイズ比較関数を渡すことができます。並べ替えるときに、sort() メソッドはこの関数に基づいて配列内の 2 つの要素のサイズを比較し、配列全体の順序を決定します。

コードをコピー コードは次のとおりです。

var Compare = function(num1, num2) {
num1 > num2;
を返します。 };
nums.sort(比較);
console.log(nums); // [1, 2, 3, 4, 100, 200]

var objInArray = [
{
名前: 'キング'、
パス: '123'、
インデックス: 2
}、
{
名前: 'king1'、
パス: '234'、
インデックス: 1
}
];
// 配列内のオブジェクト要素をインデックス
に従って昇順に並べ替えます var Compare = function(o1, o2) {
o1.index > o2.index;
を返します。 };
objInArray.sort(比較);
console.log(objInArray[0].index

8 つの反復子メソッド

主に forEach、every、some、map、filter が含まれます
forEachは皆さんご存知かと思いますので、他の4つの方法を中心に紹介します。
each メソッドは、ブール値を返す関数を受け取り、その関数を配列内の各要素に適用します。関数がすべての要素に対して true を返す場合、このメソッドは true を返します。

コードをコピー コードは次のとおりです:

var nums = [2, 4, 6, 8];
//新しい配列を生成しないイテレータメソッド
var isEven = function(num) {
戻り値 % 2 === 0;
};
// すべて偶数の場合にのみ true を返します
console.log(nums.every(isEven)); // true

一部のメソッドは、戻り値がブール型である関数も受け入れます。関数が true を返す要素がある限り、メソッドは true を返します。
var isEven = function(num) {
戻り値 % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)) // true

map メソッドと filter メソッドは両方とも、新しい配列を生成できます。map によって返される新しい配列は、元の要素に関数を適用した結果です。例:

コードをコピー コードは次のとおりです。

var up = function(grade) {
戻りグレード = 5;
}
var グレード = [72, 65, 81, 92, 85];
var newGrades = 成績.ma

filter メソッドは、every メソッドとよく似ており、戻り値がブール型である関数を渡します。 Every() メソッドとは異なり、関数が配列内のすべての要素に適用され、結果が true の場合、このメソッドは true を返しませんが、関数要素を適用した結果を含む新しい配列を返します。

コードをコピーします コードは次のとおりです。

var isEven = function(num) {
戻り値 % 2 === 0;
};
var isOdd = 関数(数値) {
戻り値 % 2 !== 0;
};
var nums = [];
for (var i = 0; i nums[i] = i 1;
}
var Evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var ods = nums.filter(isOdd);
console.log(odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

3. 概要

上記のメソッドの一部は低レベルのブラウザではサポートされておらず、互換性のある実装には他のメソッドを使用する必要があるという問題もあります。

これらは一般的な方法ですが、誰にとっても簡単に思いつくものではないかもしれません。もっと気を付けたほうがいいかもしれません。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。