ホームページ  >  記事  >  ウェブフロントエンド  >  例を使って JavaScript 配列メソッドを調べる

例を使って JavaScript 配列メソッドを調べる

王林
王林オリジナル
2024-07-18 05:58:00941ブラウズ

Exploring JavaScript Array Methods with Examples

JavaScript 配列は多用途であり、データを効率的に操作、反復、管理するための幅広い組み込みメソッドを提供します。効果的なプログラミングには、これらのメソッドを理解することが重要です。実際の例を使用して、一般的に使用される配列メソッドをいくつか掘り下げてみましょう。

配列メソッド

  • push(): 1 つ以上の要素を配列の末尾に追加し、配列の新しい長さを返します。
let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
  • pop(): 配列から最後の要素を削除し、その要素を返します。
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
  • shift(): 配列から最初の要素を削除し、削除された要素を返します。
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
  • unshift(): 1 つ以上の要素を配列の先頭に追加し、配列の新しい長さを返します。
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
  • forEach(): 提供された関数を配列要素ごとに 1 回実行します。
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
  • map(): 呼び出し配列内のすべての要素に対して提供された関数を呼び出した結果が入力された新しい配列を作成します。
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
  • filter(): 提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
  • find(): 提供されたテスト関数を満たす配列内の最初の要素を返します。
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
  • reduce(): アキュムレータと配列内の各要素に対して (左から右に) 関数を適用して、単一の値に削減します。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
  • indexOf(): 配列内で指定された要素が見つかる最初のインデックスを返します。要素が存在しない場合は -1 を返します。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
  • lastIndexOf(): 配列内で指定された要素が見つかる最後のインデックスを返します。要素が存在しない場合は -1 を返します。
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3

これらの配列メソッドは、JavaScript でデータ構造を効率的に操作するための基本的なツールです。これらのメソッドをマスターすると、さまざまなプログラミング シナリオで配列を処理するための強力なツールキットが得られます。

以上が例を使って JavaScript 配列メソッドを調べるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。