JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript配列メソッド


配列を文字列に変換する

JavaScriptメソッドtoString()は、配列を(コンマ区切りの)配列値の文字列に変換します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果:

Banana,Orange,Apple,Mango

このjoin()メソッドは、すべての配列要素を文字列に結合します。

と同じように動作しtoString()ますが、さらにセパレータを指定できます。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

結果:

Banana * Orange * Apple * Mango

飛び出ると押す

配列を操作する場合、要素を削除したり、新しい要素を追加したりするのは簡単です。

これがポップとプッシュです。

アイテムを配列からポップするか、アイテム配列にプッシュします



JavaScript配列pop()

このpop()メソッドは、配列から最後の要素を削除します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

このpop()メソッドは、「ポップアウト」された値を返します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

JavaScript配列push()

このpush()メソッドは、(最後に)配列に新しい要素を追加します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

このpush()メソッドは、新しい配列の長さを返します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

シフト要素

シフトはポップと同じですが、最後の要素ではなく最初の要素で作業します。


JavaScript配列shift()

このshift()メソッドは、最初の配列要素を削除し、他のすべての要素をより低いインデックスに「シフト」します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

このshift()メソッドは、「シフトアウト」された値を返します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

JavaScript配列unshift()

このunshift()メソッドは、新しい要素を(最初に)配列に追加し、古い要素を「シフト解除」します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

このunshift()メソッドは、新しい配列の長さを返します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

要素の変更

配列要素には、インデックス番号を使用してアクセスします。

配列インデックスは0で始まります:

[0]は最初の配列要素です
[1]は2番目
です[2]は3番目です...

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

JavaScript配列の長さ

このlengthプロパティは、新しい要素を配列に追加する簡単な方法を提供します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

JavaScript配列delete()

警告 !

配列要素は、JavaScript演算子を使用して削除できますdelete

アレイにdelete葉の穴を使用します。undefined

代わりにpop()またはshift()を使用してください。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

配列のマージ(連結)

このconcat()メソッドは、既存の配列をマージ(連結)することによって新しい配列を作成します。

例(2つの配列のマージ)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

このconcat()メソッドは、既存の配列を変更しません。常に新しい配列を返します。

このconcat()メソッドは、任意の数の配列引数を取ることができます。

例(3つのアレイのマージ)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

このconcat()メソッドは、文字列を引数として受け取ることもできます。

例(配列と値のマージ)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

アレイのスプライシングとスライシング

このsplice()メソッドは、新しいアイテムを配列に追加します。

このslice()メソッドは、配列の一部をスライスします。


JavaScript配列splice()

このsplice()メソッドを使用して、配列に新しいアイテムを追加できます。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

最初のパラメーター(2)は、新しい要素を 追加(スプライスイン)する位置を定義します。

2番目のパラメーター(0)は、削除する要素 の数を定義します

残りのパラメーター( "Lemon"、 "Kiwi")は、 追加する新しい要素を定義します。

このsplice()メソッドは、削除されたアイテムを含む配列を返します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

splice()を使用して要素を削除する

巧妙なパラメータ設定を使用splice()すると、配列に「穴」を残さずに要素を削除できます。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

最初のパラメーター(0)は、新しい要素を 追加(スプライスイン)する位置を定義します。

2番目のパラメーター(1)は、削除する要素 の数を定義します

残りのパラメーターは省略されています。新しい要素は追加されません。


JavaScript配列slice()

このslice()メソッドは、配列の一部を新しい配列にスライスします。

この例では、配列要素1(「オレンジ」)から始まる配列の一部を切り取ります。

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

ノート

このslice()メソッドは新しい配列を作成します。

このslice()メソッドは、ソース配列から要素を削除しません。

この例では、配列要素3( "Apple")から始まる配列の一部を切り取ります。

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

このslice()メソッドは、のように2つの引数を取ることができますslice(1, 3)

次に、このメソッドは、開始引数から終了引数までの要素を選択します(ただし、終了引数は含まれません)。

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

最初の例のようにend引数を省略した場合、slice() メソッドは配列の残りの部分をスライスします。

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

自動toString()

プリミティブ値が必要な場合、JavaScriptは配列をコンマ区切りの文字列に自動的に変換します。

これは、配列を出力しようとするときに常に当てはまります。

これらの2つの例では、同じ結果が得られます。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

ノート

すべてのJavaScriptオブジェクトにはtoString()メソッドがあります。


配列内の最大値と最小値の検索

JavaScript配列の最高値または最低値を見つけるための組み込み関数はありません。

このチュートリアルの次の章で、この問題を解決する方法を学習します。


配列の並べ替え

配列の並べ替えについては、このチュートリアルの次の章で説明します。

完全なアレイリファレンス

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Use the correct Array method to remove the last item of the fruits array.

const fruits = ["Banana", "Orange", "Apple"];
;