English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript基本教程

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAX基本教程

JavaScriptリファレンスマニュアル

JavaScript 配列メソッド

JavaScriptには多くの便利な内蔵メソッドが配列の処理に用意されています。

元の配列を変更するメソッドと呼ばれます修飾子（変更子）メソッド。

新しい値または表示形式を返すメソッドと呼ばれるaccessor (アクセサー)メソッド。

配列を文字列に変換する

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

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();
テストを試してみて‹/›

join()配列メソッドは、配列のすべての要素を新しい文字列に変換することもできます。

このメソッドの動作はtoString()、しかしjoinメソッドには分隔符を指定することもできます。

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　");　　　//　Banana　+　Apple　+　Mango
fruits.join("　/　");　　　//　Banana　/　Apple　/　Mango
fruits.join("　©　");　　//　Banana © Apple © Mango
テストを試してみて‹/›

元の値が必要な場合、JavaScriptは自動的に配列をカンマ区切りの文字列に変換します。

配列を出力しようとするとき、常にこのようなことが起こります。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
document.getElementById("result").innerHTML = fruits;
テストを試してみて‹/›

push()メソッド - 配列要素の追加

push()配列メソッドは、1つまたは複数の新しい要素を配列の末尾に追加します。

var fruits = ["Banana", "Mango", "Apple"];
fruits.push("Strawberry");
テストを試してみて‹/›

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

以下のコードは、配列に3つの要素を追加します。変数totalには配列の新しい長さが含まれます：

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");
テストを試してみて‹/›

unshift()配列メソッドは、1つまたは複数の新しい要素を配列の先頭に追加します。

var fruits = ["Banana", "Mango", "Apple"];
fruits.unshift("Strawberry");
テストを試してみて‹/›

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

以下のコードは、配列に3つの要素を追加します。変数totalには配列の新しい長さが含まれます：

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");
テストを試してみて‹/›

pop()メソッド - 配列要素の削除

pop()メソッドの作用は、配列の末尾の最後の要素を削除することです。

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
fruits.pop();
テストを試してみて‹/›

pop()メソッドは「弹出された（popped out）」値を返します：

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
var　x　=　fruits.pop();
テストを試してみて‹/›

shift()配列メソッドは配列から最初の要素を削除します。

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
fruits.shift();
テストを試してみて‹/›

shift()メソッドは「移除された（shifted out）」要素を返します：

var　fruits　=　["Banana",　"Mango",　"Apple",　"Orange"];
var　x　=　fruits.shift();
テストを試してみて‹/›

splice()メソッド - 配列を変更する追加

splice()メソッドは、既存の要素を削除し（または）新しい要素を追加することで配列を変更します。

var　months　=　['Jan',　'Mar',　'Apr',　'Jun'];
months.splice(1,　0,　'Feb'第29段: ;);//　adding　'Feb'　at　index　1
テストを試してみて‹/›

第61段: 第1引数（1）は、新しい要素を追加（結合）する位置を定義します。

第59段: 第2引数（0）は、削除すべき要素数を定義します。

第3引数（'Feb'）に追加する新しい要素を定義します。

以下の例では、第4インデックスで置き換えます1要素：

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(4,　1,　'May'第29段: ;);　　　//　replace　'Jun'　with　'May'　at　index　4
テストを試してみて‹/›

以下の例では、インデックス値3から削除1要素：

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(3,　1第17段:
テストを試してみて‹/›

以下の例では、インデックス値2削除を開始2要素：

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
months.splice(2,　2第17段:
テストを試してみて‹/›

splice()メソッドは削除された要素を含む配列を返します：

var　months　=　['Jan',　'Feb',　'Mar',　'Apr',　'Jun'];
var　arr　=　months.splice(2,　2第17段:
テストを試してみて‹/›

注意splice()以下と混同しないでください第56段: slice()アクセサー配列の混乱、後者はアクセサーアレイであり、配列の一部をコピーします。

配列要素の修正

新しい値を割り当てることで、配列のいかなる値も上書きすることができます。

let　fruits　=　["Apple",　"Mango",　"Banana",　"Orange"];
fruits[0]　=　"Monkey";
テストを試してみて‹/›

concat()メソッド - 配列の結合

concat()配列メソッドは、2つ以上の配列を結合して新しい配列を作成するために使用されます。

以下の例では、2つの配列を作成し、それらを新しい配列に組み合わせます：

var　fruits　=　["Apple",　"Mango",　"Banana"];
var　numbers　=　[5,　10,　12,　98,　3
var　arr　=　fruits.concat(numbers);
テストを試してみて‹/›

concat()メソッドは複数の引数を取り、複数の配列を1つのメソッドで結合して効率的に使用することができます。

var　num1　=　[1,　2,　3
var　num2　=　[4,　5,　6
var　num3　=　[7,　8,　9
var　nums　=　num1.concat(num2、num3第17段:
テストを試してみて‹/›

第64段: slice()メソッド - 第63段: 配列スライス

第56段: slice()第62段: ）は配列の一部を新しい配列にコピーします。

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange'];
第51段: var　extract　=　fruits.slice(1,　3第17段://　第50段: return　Mango,　Apple
テストを試してみて‹/›

第61段: 第1引数（1第60段: ）は切り取る開始位置を定義します。

第59段: 第2引数（3第58段: ）は切り取る位置を定義します。

第57段: 第2引数を省略すると、この第56段: slice()第55段: メソッドは配列の残りの部分を切り取ります。

第54段: 以下の例では、第2引数を使用しないで要素を抽出します：

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange'];
第51段: var　extract　=　fruits.slice(1第17段://　第53段: return　Mango,　Apple,　Orange
テストを試してみて‹/›

第52段: 以下の例では、負の値を使用して配列の要素を抽出します：

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange'];
第51段: var　extract　=　fruits.slice(-3,　-1第17段://　第50段: return　Mango,　Apple
テストを試してみて‹/›

第49段: 配列中の要素を検索する

第48段: indexOf()第47段: 配列メソッドは指定された要素が配列に見つかった最初のインデックスを返します。

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange'];
第43段: fruits.indexOf('第32段: ;Apple'第29段: ;);//　第28段: returns　2
テストを試してみて‹/›

第46段: 注意：第45段: 第1要素のインデックスは0であり、第2要素のインデックスは1第44段: 、そのようにして続きます。

第37段: ある場合、与えられた引数が配列に存在しない値であれば、それが返されます。-1。

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange'];
第43段: fruits.indexOf('第30段: ;Beer'第29段: ;);//　第28段: returns　-1
テストを試してみて‹/›

第39段: lastIndexOf()第42段: 配列メソッドは指定された要素が配列に見つかった最後のインデックスを返します。

第41段: indexOf()の同じ例をテストすることができます、その例には「Apple」が2つ含まれています。

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange',　'第32段: ;Apple'];
第31段: fruits.lastIndexOf('第32段: ;Apple'第29段: ;);//　第28段: returns　4
テストを試してみて‹/›

第40段: 注：第39段: lastIndexOf()第38段: 末尾から始めて配列を検索し、最初に見つけたインデックス番号を返します。

第37段: ある場合、与えられた引数が配列に存在しない値であれば、それが返されます。-1。

第36段: var　fruits　=　['第35段: ;Banana',　'第34段: ;Mango',　'第32段: ;Apple',　'第33段: ;Orange',　'第32段: ;Apple'];
第31段: fruits.lastIndexOf('第30段: ;Beer'第29段: ;);//　第28段: returns　-1
テストを試してみて‹/›

第27段: fill()メソッド

第16段: fill()第26段: 配列メソッドは配列のすべての要素に静的値を置き換えます。

var　nums　=　[1,　2,　3,　4
第25段: nums.fill(17第17段:
テストを試してみて‹/›

第24段: 配列のすべての4つの要素が同じ値に置き換わります17。

第16段: fill()第23段: また、オプションの始点と終点の引数を受け入れます。

第22段: 位置2第21段: 位置4第20段: 填充0（4第19段: ）

var　nums　=　[1,　2,　3,　4
第18段: nums.fill(0,　2,　4第17段:
テストを試してみて‹/›

第9段: 使用第16段: fill()第15段: 配列の1つまたは複数の要素を静的値で置き換えることができます。

第14段: 配列ソートと配列反転

第8段: reverse()第13段: 配列メソッドは配列の要素の順序を反転します。

var　nums　=　[10,　2第12段: 0,　3第12段: 0,　4第12段: 0,　5第11段: 0];
第10段: nums.reverse();
テストを試してみて‹/›

第9段: 使用第8段: reverse()第7段: その後、最後の要素は最初の要素であり、最初の要素は最後の要素となります。

sort()第6段: 配列メソッドは配列の要素に対して最初の文字に基づいて配列の要素をソートします。最初の文字が同じ場合、次の行に進み、次の文字を比較し、そのようにして続きます。

第5段: デフォルトでは、sort()第4段: 全ての大文字または小文字の文字列配列をアルファベット順に並べます。

var　months　=　['March',　'Jan',　'Feb',　'第3段: ;Dec'];
months.sort();
テストを試してみて‹/›

第2段: そのためsort()第1段: 基于第一个unicode字符，それにより大文字の要素に対してソートを行い、次に小文字に対してソートを行います。

让我们修改原始数组，以使我们的字符串之一以小写字母开头。

var　months　=　['March',　'Jan',　'Feb',　'dec'];
months.sort();
テストを試してみて‹/›

可以使用sort()方法对数字进行排序。

var　nums　=　[5,　1,　2,　7,　3,　6,　4
nums.sort();
テストを試してみて‹/›

sort()不会按大小对数字数组排序。相反，它只检查数字中的第一个字符。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort();
テストを試してみて‹/›

为了正确地对数字进行排序，您可以创建一个比较函数作为参数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(function(a,　b)　{return　a　-　b});
テストを試してみて‹/›

如果需要重复对数字进行排序，则可以创建一个单独的函数。

var　nums　=　[5,　1,　2,　17,　13,　6,　34
nums.sort(sortNumerically);
//　数字のサイズに基づいてソートするファンクション
var　sortNumerically　=　(a,　b)　=>　{
　　return　a　-　b;
}
テストを試してみて‹/›

完全な配列リファレンス

完全な属性とメソッドのリファレンスについては、当社のJavaScript Array 配列リファレンスマニュアル。

参考部分には、すべての配列属性とメソッドの説明と例が含まれています。

JavaScript 配列イテレーションメソッドJavaScript Array(配列) オブジェクト