JavaScript における一般的な配列操作

JavaScript における一般的な配列操作

1. 連結()

concat()メソッドは、2 つ以上の配列を連結するために使用されます。このメソッドは既存の配列を変更せず、連結された配列のコピーを返すだけです。

var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1); //[1, 2, 3]
console.log(arr3); //[1, 2, 3, 4, 5]

2. 結合()

join()メソッドは、配列内のすべての要素を文字列に格納するために使用されます。要素は指定された区切り文字で区切られ、デフォルトの区切り文字は ',' であり、元の配列は変更されません。

var arr = [2,3,4];
console.log(arr.join()); //2,3,4
console.log(arr); //[2, 3, 4]

3. プッシュ()

push()メソッドは、配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します。最後に追加すると長さが返され、元の配列が変更されます。

var a = [2,3,4];
var b = a.push(5);
コンソールログ(a); //[2,3,4,5]
コンソールログ(b); //4

5. シフト()

shift()メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます。元の配列を変更して最初の要素を返します。

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr); //[3,4]

6. シフト解除()

unshift()メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。元の配列を変更して、新しい長さを返します。

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3, 6, 2, 3, 4, 5]

ヒント:このメソッドではパラメータを渡す必要はありません。パラメータが渡されない場合、要素は追加されません。

7. スライス()

slice()メソッドは、 arrayObject内のstartからendまでの要素 (この要素を除く) を含む新しい配列を返します。選択された要素を返します。このメソッドは元の配列を変更しません。

var arr = [2,3,4,5];
console.log(arr.slice(1,3)); //[3,4]
console.log(arr); //[2,3,4,5]

スプライス()

splice()メソッドは、 indexから始まる 0 個以上の要素を削除し、削除された要素をパラメーター リストで指定された 1 つ以上の値に置き換えます。 arrayObjectから要素が削除された場合、削除された要素を含む配列が返されます。 splice()メソッドは配列を直接変更します。

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a); // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3)); //[6, 7]
コンソール.log(b); //[5, 3, 8]

9. substring() と substr()

類似点:パラメータを 1 つだけ記述する場合、両方の機能は同じです。どちらも、現在の添え字から文字列の末尾までの文字列フラグメントをインターセプトします。

substr(開始インデックス);
部分文字列(開始インデックス);
var str = '123456789';
console.log(str.substr(2)); // "3456789"
console.log(str.substring(2)) ;// "3456789"

相違点: 2 番目のパラメーターsubstr(startIndex,lenth): 2 番目のパラメーターは、インターセプトする文字列の長さです (開始点から特定の長さの文字列をインターセプトします); substring(startIndex, endIndex ): 2 番目のパラメーターは、インターセプトする文字列の最後の添え字です (2 つの位置間の文字列をインターセプトし、先頭は含みますが、末尾は含みません)。

console.log("123456789".substr(2,5)); // "34567"
console.log("123456789".substring(2,5)); // "345"

10. 並べ替え

Unicode code位置で並べ替えます (デフォルトでは昇順)

var fruit = ['チェリー', 'リンゴ', 'バナナ'];
fruit.sort(); // ['リンゴ', 'バナナ', 'チェリー']
var スコア = [1, 10, 21, 2];
スコア.sort(); // [1, 10, 2, 21]

11. 逆順()

reverse()メソッドは、配列内の要素の順序を逆にするために使用されます。返されるのは反転された配列であり、元の配列が変更されます。

var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr); //[4, 3, 2]

12. indexOf と lastIndexOf

indexOflastIndexOfどちらも、検索する値と検索する開始位置の 2 つのパラメータを受け入れます。値が存在しない場合は -1 が返され、値が存在する場合は開始位置が返されます。 indexOf前から後ろへ検索し、 lastIndexOf後ろから前へ検索します。 indexOf

var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
 
(a.indexOf(7) === -1)の場合{
 // 要素が配列に存在しません
}
最後のインデックス
 
var 数値 = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
数値.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

13. すべてのペア配列

every配列内の各項目に対して指定された関数を実行し、各項目が true を返す場合はtureを返しますtrue

関数 isBigEnough(要素, インデックス, 配列) {
 要素 < 10 を返します。
} 
[2, 5, 8, 3, 4].every(isBigEnough); // 真

14. いくつか

some 、配列内の各項目に対して指定された関数を実行し、いずれかが true を返す場合はtureを返しますtrue

関数比較(要素、インデックス、配列) {
 要素 > 10 を返します。
}  
[2, 5, 8, 1, 4].some(比較); // 偽
[12, 5, 8, 1, 4].some(比較); // 真

15. フィルター

filter配列内の各項目に対して指定された関数を実行し、結果がtureなる項目の配列を返します。

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
 word.length > 6 を返します。
});
// フィルタリングされた配列 longWords は ["exuberant", "destruction", "present"] です

16. 地図

配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果で構成される新しい配列を返します。

var 数値 = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
  x * 2 を返します。
});
// doubles は [2, 10, 20, 30] になります
// 数字は [1, 5, 10, 15] のままです

17. forEach配列の走査

定数項目 = ['項目1', '項目2', '項目3'];
定数コピー = [];  
items.forEach(関数(item){
 copy.push(アイテム)
});

ES6配列を操作するための新しいメソッドが追加されました

1. find():

コールバック関数を渡して、現在の検索条件に一致する配列内の最初の要素を検索し、それを返して、検索を終了します。

定数arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2. findIndex():

コールバック関数を渡して、現在の検索条件に一致する配列内の最初の要素を見つけ、そのインデックスを返して、検索を終了します。

定数arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3. 塗りつぶし():

配列内の要素を新しい要素に置き換えます。置き換えの添え字範囲を指定できます。

arr.fill(値、開始、終了)

4. copyWithin():

配列のインデックスを選択し、その位置から配列要素のコピーを開始します。デフォルトでは、0 からコピーを開始します。コピーする要素の範囲を指定することもできます。

arr.copyWithin(ターゲット、開始、終了)
定数arr = [1, 2, 3, 4, 5]
コンソールログ(arr.copyWithin(3))
 // [1,2,3,1,2] はインデックス 3 の要素から始まり、配列をコピーします。そのため、4 と 5 は 1 と 2 に置き換えられます。
定数arr1 = [1, 2, 3, 4, 5]
コンソールログ(arr1.copyWithin(3, 1)) 
// [1,2,3,2,3] はインデックス 3 の要素から開始し、配列をコピーします。コピーされる最初の要素のインデックスは 1 なので、4 と 5 は 2 と 3 に置き換えられます。
定数arr2 = [1, 2, 3, 4, 5]
コンソールログ(arr2.copyWithin(3, 1, 2)) 
// [1,2,3,2,5] はインデックス 3 の要素から始まり、配列をコピーします。コピーされる最初の要素はインデックス 1 で、終了位置は 2 なので、4 は 2 に置き換えられます。

5. から

array-like objectiterableオブジェクトを実際の配列に変換する

const バー = ["a", "b", "c"];
配列.from(バー);
// ["a", "b", "c"]
 
配列.from('foo');
// ["f", "o", "o"]

6.の

値のセットを配列に変換するために使用されます。このメソッドの主な目的は、配列コンストラクターArray()の欠点を補うことです。パラメータの数が異なるため、 Array()の動作は異なります。

配列() // []
配列(3) // [, , ,]
配列(3, 11, 8) // [3, 11, 8]
配列.of(7); // [7]
配列.of(1, 2, 3); // [1, 2, 3]
配列(7); // [ , , , , , , ]
配列(1, 2, 3); // [1, 2, 3]

7.entries()はイテレータを返します。キーと値のペアを返します。

//配列 const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
 コンソールログ(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']
 
//セット
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
 コンソールログ(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']
 
//地図
定数 arr = 新しい Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
 コンソールログ(v)
}
// ['a', 'a'] ['b', 'b']

8. values()はイテレータを返します。キーと値のペアの値を返します。

//配列 const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
 コンソールログ(v)
}
//'a' 'b' 'c'
 
//セット
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
 コンソールログ(v)
}
// 'a' 'b' 'c'
 
//地図
定数 arr = 新しい Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
 コンソールログ(v)
}
// 'あ' 'あ'

9. keys() はイテレータを返します。キーと値のペアのキーを返します。

//配列 const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
 コンソールログ(v)
}
// 0 1 2
 
//セット
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
 コンソールログ(v)
}
// 'a' 'b' 'c'
 
//地図
定数 arr = 新しい Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
 コンソールログ(v)
}
// 'あ' 'あ'

10. 含まれるもの

配列内に要素が存在するかどうかを判定します。パラメータ: 検索する値、開始位置。ES5 ES5indexOf判定メソッドを置き換えることができます。 indexOf要素がNaNであるかどうかを判定し、 NaN の場合はエラーが発生します。

var a = [1, 2, 3];
a.includes(2); // 真
a.includes(4); // 偽

JavaScript でよく使われる配列操作方法についてはこれで終わりです。JavaScript の配列操作方法についてもっと知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptで配列を作成する方法の詳細な説明
  • JavaScript es6 の新しい配列メソッドの詳細な説明
  • JS配列メソッドの詳細な説明
  • JavaScript配列の一般的なメソッドの詳細な説明
  • JavaScript配列の一般的なメソッドの概要
  • よく使われるJavaScript配列メソッド
  • JavaScript 配列メソッドの詳細な例

<<:  Nginx URL 書き換えメカニズムの原理と使用例

>>:  全文検索とキーワードスコアリング方式のMySQL実装例

推薦する

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

MySQL トランザクション同時実行問題の解決

開発中にこのような問題に遭遇しましたビデオ視聴記録が 100 に更新されると、視聴されたことを意味し...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...

nginx 設定場所方法の概要

位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....

Centos7.x での Nginx のインストール、SSL 設定、一般的なコマンドの詳細な説明

1. インストールyumを使用してインストールする ##yum nginx を自動的にインストールす...

MySQLチュートリアルDMLデータ操作言語の例の詳細な説明

目次1. データ操作言語 (DML) 2. データを追加する(挿入) 3. 既存のテーブルをコピーし...

JavaScriptは4桁のランダム検証コードの生成を実装します

この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...

TypeScript の Enum が問題となる理由

目次どうしたの?いつ使うか列挙の数を制御するビット値コントロールインデックス非数値列挙結論はType...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...

Nginx ローカル ディレクトリ マッピング実装コード例

他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

JavaScriptタイマーの詳細な説明

目次簡単な紹介間隔の設定説明するパラメータ戻り値使用法タイムアウトの設定説明するパラメータ使用法:タ...

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...