JavaScript
配列

構文

• array = [ 値 、 値 、 ... ]
• array = new Array（ 値 、 値 、 ... ）
• array = Array.of（ 値 、 値 、 ... ）
• array = Array.from（ arrayLike ）

備考

console.log(new Array(53)); // This array has 53 'undefined' elements!

console.log([53]); // Much better!

標準の配列初期化

配列を作成する方法はたくさんあります。最も一般的なのは、配列リテラルまたはArrayコンストラクタを使用することです。

var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);

引数なしでArrayコンストラクタを使用すると、空の配列が作成されます。

var arr3 = new Array();

結果：

[]

それがちょうど1つの引数で使用され、その引数がnumber場合、 undefinedすべての値を持つその長さの配列が代わりに作成されることに注意してください。

var arr4 = new Array(4);

結果：

[undefined, undefined, undefined, undefined]

これは、単一の引数が非数値の場合は適用されません。

var arr5 = new Array("foo");

結果：

["foo"]

Array.of(21, "Hello", "World");

[21, "Hello", "World"]

var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));

[0, 1, 16, 81, 256]

配列スプレッド/レスト

スプレッド演算子

let arr = [1, 2, 3, ...[4, 5, 6]];  // [1, 2, 3, 4, 5, 6]

// in ES < 6, the operations above are equivalent to
arr = [1, 2, 3];
arr.push(4, 5, 6);

let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]

function myFunction(a, b, c) { }
let args = [0, 1, 2];

myFunction(...args);

// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);

[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]

function myFunction(a, b, ...rest) { console.log(rest); }

myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]

値のマッピング

既存の配列の値に基づいて新しい配列を生成する必要があることがよくあります。

たとえば、文字列の配列から文字列長の配列を生成するには、次のようにします。

['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]

['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]

この例では、無名関数がmap()関数に提供され、 map()関数は配列のすべての要素に対してこの関数を呼び出し、次のパラメータをこの順に提供します。

• 要素自体
• 要素のインデックス（0,1 ...）
• 配列全体

さらに、 map()は、マッピング関数でthisの値を設定するために、 オプションの第2パラメータを提供します 。実行環境によっては、 thisデフォルト値が異なる場合があります。

ブラウザでは、 thisデフォルト値は常にwindowです。

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

次のようなカスタムオブジェクトに変更することができます：

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, {
  documentation: 'randomObject'
});

値のフィルタリング

filter()メソッドは、関数として提供されたテストを渡すすべての配列要素で満たされた配列を作成します。

[1, 2, 3, 4, 5].filter(function(value, index, arr) {
  return value > 2;
});

[1, 2, 3, 4, 5].filter(value => value > 2);

新しい配列の結果：

[3, 4, 5]

偽の値をフィルタリングする

var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);

ブール値は [1つのオプションのパラメータ]を取るネイティブのJavaScript関数/コンストラクタであり、フィルタメソッドも関数をとり、それを現在の配列項目にパラメータとして渡すので、次のように読むことができます：

1. Boolean(0)はfalseを返します。
2. Boolean(undefined)はfalseを返します。
3. Boolean({})はtrueを返します。これは返された配列にプッシュすることを意味します
4. Boolean(null)はfalseを返します。
5. Boolean('')はfalseを返します。
6. Boolean(true)はtrueを返します。これは返された配列にプッシュすることを意味します
7. Boolean(5)はtrueを返します。これは返された配列にpushすることを意味します

全体のプロセスが結果になる

[ {}, true, 5 ]

別の簡単な例

この例では、1つの引数をとる関数を渡すのと同じ概念を使用しています

function startsWithLetterA(str) {
    if(str && str[0].toLowerCase() == 'a') {
        return true
    }
    return false;
}

var str              = 'Since Boolean is a native javascript function/constructor that takes [one optional paramater] and the filter method also takes a function and passes it the current array item as a parameter, you could read it like the following';
var strArray         = str.split(" ");
var wordsStartsWithA = strArray.filter(startsWithLetterA);
//["a", "and", "also", "a", "and", "array", "as"]

反復

従来のfor -loop

伝統的なforループには3つのコンポーネントがあります。

1. 初期化： lookブロックが最初に実行される前に実行されます。
2. 条件：ループブロックが実行される前に条件をチェックし、ループが終了するとループを終了します。
3. 補足事項：ループブロック実行後毎回実行

これらの3つのコンポーネントは、aによって互いに分離されてい;シンボル。これらの3つの構成要素のそれぞれのコンテンツは、以下が最も最小限であることを意味し、オプションであるforの可能なループ：

for (;;) {
    // Do stuff
}

もちろん、 if(condition === true) { break; }を含める必要がありif(condition === true) { break; }またはif(condition === true) { return; }どこかfor -loopが実行を停止するようにします。

ただし、通常、初期化はインデックスを宣言するために使用され、条件はそのインデックスを最小値または最大値と比較するために使用され、補足はインデックスをインクリメントするために使用されます。

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

従来のforループを使用して配列をループする

配列をループする伝統的な方法は次のとおりです。

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

逆にループしたい場合は、次のようにします。

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

しかし、たとえば、次のような多くのバリエーションがあります。

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

...またはこの1つ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

...またはこの1つ：

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

どちらがベストなのかは、主に個人的な好みと、実装している特定のユースケースの両方の問題です。

これらのバリエーションはすべて非常に古いものを含むすべてのブラウザでサポートされています。

whileループ

forループの1つの代替方法は、 whileループです。配列をループするには、次のようにします：

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

伝統的なforループのようにwhile Whileループは最古のブラウザでさえサポートされています。

また、whileループはforループとして書き直すことができます。例えば、 whileループhereabove本とまったく同じように動作for -ループ。

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

JavaScriptでは、これを行うこともできます：

for (i in myArray) {
    console.log(myArray[i]);
}

ただし、これはすべてのケースで従来のforループと同じように動作しないため、注意する必要があります。また、考慮する必要のある潜在的な副作用があります。 See なぜ "for ... in"を配列の繰り返しと一緒に使うのは悪い考えですか？詳細については。

for...of

ES 6では、 for-ofループを使用して配列の値を繰り返し処理することをお勧めします。

let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

次の例は、 for...ofループとfor...inループの違いを示しています。

let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

Array.prototype.keys()メソッドを使用すると、次のようなインデックスを反復処理できます。

let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

.forEach(...)メソッドは、ES 5以上のオプションです。現代のすべてのブラウザーと、Internet Explorer 9以降でサポートされています。

[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

伝統的なforループと比較すると、 .forEach()ループから飛び出すことはできません。この場合、 forループを使用するか、以下に示す部分的な繰り返しを使用します。

JavaScriptのすべてのバージョンでは、従来のCスタイルのforループを使用して配列のインデックスを反復することができます。

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

whileループを使うこともできます：

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

ES5以降、配列の一部を反復処理する場合は、 Array.prototype.everyを使用できます。 Array.prototype.every 、 falseを返すまで反復処理しfalse 。

// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

任意のJavaScriptバージョンに相当：

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.someは、 trueを返すまで繰り返しtrue 。

// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

任意のJavaScriptバージョンに相当：

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

図書館

最後に、多くのユーティリティライブラリには独自のforeachバリエーションもあります。最も人気のあるものの3つは次のとおりです。

jQueryの jQuery.each() ：

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each()で、 Underscore.js ：

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach()で、 Lodash.js ：

_.forEach(myArray, function(value, key) {
    console.log(value);
});

この情報の多くが最初に掲載されたSOに関する次の質問も参照してください。

• JavaScriptで配列をループする

オブジェクト配列のフィルタリング

filter()メソッドはテスト関数を受け取り、テストに合格した元の配列の要素のみを含む新しい配列を返します。

// Suppose we want to get all odd number in an array:
var numbers = [5, 32, 43, 4];

var odd = numbers.filter(function(n) {
  return n % 2 !== 0;
});

let odd = numbers.filter(n => n % 2 !== 0); // can be shortened to (n => n % 2)

oddは次の配列を含みます： [5, 43] 。

また、オブジェクトの配列にも作用します。

var people = [{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}, {
  id: 3,
  name: "Peter",
  age: 55
}];

var young = people.filter(function(person) {
  return person.age < 35;
});

let young = people.filter(person => person.age < 35);

youngは次の配列を含みます：

[{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}]

配列全体で次のような値を検索することができます：

var young = people.filter((obj) => {
  var flag = false;
  Object.values(obj).forEach((val) => {
    if(String(val).indexOf("J") > -1) {
      flag = true;
      return;
    }    
  });
  if(flag) return obj;
});

これにより、

[{
  id: 1,
  name: "John",
  age: 28
},{
  id: 2,
  name: "Jane",
  age: 31
}]

文字列の配列要素を結合する

配列のすべての要素を文字列にjoinするには、 joinメソッドを使用します。

console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"

2行目でわかるように、文字列でない項目は最初に変換されます。

配列のようなオブジェクトを配列に変換する

配列のようなオブジェクトとは何ですか？

JavaScriptには「配列のようなオブジェクト」があり、長さプロパティを持つ配列のオブジェクト表現です。例えば：

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Array-likeオブジェクトの一般的な例は、関数のargumentsオブジェクトと、 document.getElementsByTagNameやdocument.querySelectorAllなどのメソッドから返されるHTMLCollectionオブジェクトまたはNodeListオブジェクトです。

しかし、ArrayとArrayのようなオブジェクトの主な違いの1つは、ArrayのようなオブジェクトがObject.prototype代わりにArray.prototype継承してObject.prototypeことです。つまり、配列のようなオブジェクトはforEach() 、 push() 、 map() 、 filter() 、およびslice()ような一般的なArrayプロトタイプメソッドにはアクセスできません。

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

ES6で配列に似たオブジェクトを配列に変換する

1. Array.from ：

const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works

2. for...of ：

var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}

3. スプレッド演算子：

[...arrayLike]

4. Object.values ：

var realArray = Object.values(arrayLike);

5. Object.keys ：

var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

ES5以下で配列に似たオブジェクトを配列に変換する

Array.prototype.sliceようにArray.prototype.slice使用します。

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version

realArray.indexOf('Value 1'); // Wow! this works

また、 Function.prototype.callを使用して、Array-likeオブジェクトのArray.prototypeメソッドを変換せずに直接呼び出すこともできます。

var domList = document.querySelectorAll('#myDropdown option');

domList.forEach(function() { 
  // Do stuff
}); // Error! forEach is not defined.

Array.prototype.forEach.call(domList, function() { 
  // Do stuff
}); // Wow! this works

また、 [].method.bind( arrayLikeObject )を使用して配列メソッドを借用し、それらをオブジェクトにglomすることもできます：

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};

arrayLike.forEach(function() {
  // Do stuff
}); // Error! forEach is not defined.

[].forEach.bind(arrayLike)(function(val){
  // Do stuff with val
}); // Wow! this works

変換中のアイテムの変更

ES6では、 Array.fromを使用して、作成される新しい配列のマップされた値を返すマップ関数を指定できます。

Array.from(domList, element => element.tagName); // Creates an array of tagName's

詳細な解析については、「 配列はオブジェクトです。」を参照してください。

値を小さくする

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];

array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});

array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});

array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

Flatten Arrayの上記のすべての例は、次のようになります。

{
  one: 1,
  two: 2,
  three: 3
}

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]

値の論理的結合

[false, false].some(function(value) {
  return value;
});
// Result: false

[false, true].some(function(value) {
  return value;
});
// Result: true

[true, true].some(function(value) {
  return value;
});
// Result: true

[false, false].every(function(value) {
  return value;
});
// Result: false

[false, true].every(function(value) {
  return value;
});
// Result: false

[true, true].every(function(value) {
  return value;
});
// Result: true

配列の連結

2つの配列

var array1 = [1, 2];
var array2 = [3, 4, 5];

var array3 = array1.concat(array2);  // returns a new array

var array3 = [...array1, ...array2]

新しいArray結果：

[1, 2, 3, 4, 5]

複数の配列

var array1 = ["a", "b"],
    array2 = ["c", "d"],
    array3 = ["e", "f"],
    array4 = ["g", "h"];

var arrConc = array1.concat(array2, array3, array4);

var arrConc = [...array1, ...array2, ...array3, ...array4]

新しいArray結果：

["a", "b", "c", "d", "e", "f", "g", "h"]

最初の配列をコピーしないで

var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
    shortArray = [9, 10];

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

longArrayの値はlongArrayになります。

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2番目の配列が長すぎる場合（> 100,000エントリ）、スタックオーバーフローエラーが発生することがあります（ apply仕組みのため）。安全のために、代わりに反復することができます：

shortArray.forEach(function (elem) {
    longArray.push(elem);
});

配列値と配列以外の値

var array = ["a", "b"];

var arrConc = array.concat("c", "d");

var arrConc = [...array, "c", "d"]

新しいArray結果：

["a", "b", "c", "d"]

また、配列を非配列と混在させることもできます

var arr1 = ["a","b"];
var arr2 = ["e", "f"];

var arrConc = arr1.concat("c", "d", arr2);

新しいArray結果：

["a", "b", "c", "d", "e", "f"]

アイテムを配列に追加/追加する

Unshift

.unshiftを使用して、配列の先頭に1つ以上の項目を追加します。

例えば：

var array = [3, 4, 5, 6];
array.unshift(1, 2);

配列の結果は次のとおりです。

[1, 2, 3, 4, 5, 6]

押す

さらに.pushは、最後に現在存在する項目の後に項目を追加するために使用されます。

例えば：

var array = [1, 2, 3];
array.push(4, 5, 6);

配列の結果は次のとおりです。

[1, 2, 3, 4, 5, 6]

両方のメソッドは新しい配列の長さを返します。

配列へのオブジェクトのキーと値

var object = {
    key1: 10,
    key2: 3,
    key3: 40,
    key4: 20
};
 
var array = [];
for(var people in object) {
  array.push([people, object[people]]);
}

今は配列です

[
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
]

多次元配列のソート

与えられた配列

var array = [
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
];

あなたはそれをソートすることができます番号（2番目のインデックス）

array.sort(function(a, b) {
  return a[1] - b[1];
})

array.sort((a,b) => a[1] - b[1]);

これは出力されます

[
  ["key2", 3],
  ["key1", 10],
  ["key4", 20],
  ["key3", 40]
]

sortメソッドは、配列の所定の場所で動作することに注意してください。それは配列を変更します。他のほとんどの配列メソッドは新しい配列を返し、元の配列メソッドはそのまま残します。これは、関数型プログラミングスタイルを使用し、関数が副作用を持たないことを期待する場合に注意するのが特に重要です。

配列からの項目の削除

シフト

.shiftを使用して、配列の最初の項目を削除します。

例えば：

var array = [1, 2, 3, 4];
array.shift();

配列の結果は次のとおりです。

[2, 3, 4]

ポップ

さらに.popは、配列から最後の項目を削除するために使用されます。

例えば：

var array = [1, 2, 3];
array.pop();

配列の結果は次のとおりです。

[1, 2]

どちらのメソッドも削除された項目を返します。

スプライス

配列から一連の要素を削除するには、 .splice()を使用します。 .splice()は、開始インデックスと削除する要素のオプションの2つのパラメータを受け入れます。 2番目のパラメータが指定されていない場合、 .splice()はすべての要素を配列の最後から始まるインデックスから削除します。

例えば：

var array = [1, 2, 3, 4];
array.splice(1, 2);

array含まれます。

[1, 4]

array.splice()の戻り値は、削除された要素を含む新しい配列です。上記の例の場合、戻り値は次のようになります。

[2, 3]

したがって、2番目のパラメータを省略すると、配列は2つの配列に効率的に分割され、元の配列は指定されたインデックスより前に終了します。

var array = [1, 2, 3, 4];
array.splice(2);

... [1, 2]を含むarrayを残し[1, 2] [3, 4] [1, 2]を返します。

削除

配列の長さを変更せずに配列から項目をdeleteを使います：

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
delete array[2];
console.log(array); // [1, 2, undefined, 4, 5]
console.log(array.length); // 5

Array.prototype.length

配列のlengthに値を代入すると、長さが与えられた値に変更されます。新しい値が配列の長さよりも小さい場合、項目は値の最後から削除されます。

array = [1, 2, 3, 4, 5];
array.length = 2;
console.log(array); // [1, 2]

配列の逆転

.reverseは、配列内の項目の順序を逆にするために使用されます。

.reverse例：

[1, 2, 3, 4].reverse();

結果：

[4, 3, 2, 1]

注意 ： .reverse （ Array.prototype.reverse ）は、配列を元の位置に Array.prototype.reverseことに注意してください。逆のコピーを返すのではなく、同じ配列を返します。

var arr1 = [11, 22, 33];
var arr2 = arr1.reverse();
console.log(arr2); // [33, 22, 11]
console.log(arr1); // [33, 22, 11]

配列を「深く」逆にすることもできます：

function deepReverse(arr) {
  arr.reverse().forEach(elem => {
    if(Array.isArray(elem)) {
      deepReverse(elem);
    }
  });
  return arr;
}

deepReverseの例：

var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];

deepReverse(arr);

結果：

arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]

配列から値を削除する

配列から特定の値を削除する必要がある場合は、次の1行を使用して、指定された値を持たないコピー配列を作成できます。

array.filter(function(val) { return val !== to_remove; });

または、コピーを作成せずに配列自体を変更したい場合（たとえば、配列を関数として取得して操作する関数を記述する場合は、このスニペットを使用できます）

while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }

見つかった最初の値だけを削除する必要がある場合は、whileループを削除します。

var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }

オブジェクトが配列かどうかの確認

Array.isArray(obj)は、オブジェクトがArray場合はtrue返し、そうでない場合はfalse返しtrue 。

Array.isArray([])           // true
Array.isArray([1, 2, 3])    // true
Array.isArray({})           // false
Array.isArray(1)            // false

ほとんどの場合、 instanceofを使ってオブジェクトがArrayかどうかを調べることができinstanceof 。

[] instanceof Array; // true
{} instanceof Array; // false

Array.isArrayは、配列のプロトタイプが変更されていてもtrue返し、配列以外のプロトタイプがArrayプロトタイプに変更された場合にfalseを返すという点でinstanceof checkを使用する利点を持っています。

var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr);   // true
arr instanceof Array; // false

配列の並べ替え

.sort()メソッドは、配列の要素をソートします。デフォルトのメソッドは、文字列のUnicodeコードポイントに従って配列をソートします。配列を数値的にソートするには、 .sort()メソッドにcompareFunction渡す必要があります。

注意： .sort()メソッドは不純です。 .sort()は、配列をインプレースでソートします。つまり、元の配列のソートされたコピーを作成する代わりに、元の配列を並べ替えて返します。

デフォルトのソート

UNICODEの順序で配列をソートします。

['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();

結果：

[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']

注：大文字は小文字より上に移動しました。配列はアルファベット順ではなく、数字は数字順ではありません。

アルファベット順の並べ替え

['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
  return a.localeCompare(b);        
});

結果：

['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']

注意：配列の項目が文字列でない場合、上記のソートはエラーをスローします。配列に文字列ではない項目が含まれていることがわかっている場合は、以下のセーフバージョンを使用してください。

['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
  return a.toString().localeCompare(b);      
});

長さによる文字列ソート（最長の最初の文字列）

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return b.length - a.length;
});

結果は

["elephants", "penguins", "zebras", "dogs"];

長さによる文字列ソート（最短のものから順に）

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return a.length - b.length;
});

結果は

["dogs", "zebras", "penguins", "elephants"];

数値ソート（昇順）

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return a - b;
});

結果：

[1, 10, 100, 1000, 10000]

数値ソート（降順）

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return b - a;
});

結果：

[10000, 1000, 100, 10, 1]

配列を偶数と奇数で並べ替える

[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
    return (a & 1) - (b & 1) || a - b;
});

結果：

[0, 4, 10, 12, 7, 15, 21, 99]

日付ソート（降順）

var dates = [
  new Date(2007, 11, 10),
  new Date(2014, 2, 21),
  new Date(2009, 6, 11),
  new Date(2016, 7, 23)
];

dates.sort(function(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

// the date objects can also sort by its difference
// the same way that numbers array is sorting
dates.sort(function(a, b) {
  return b-a;
});

結果：

[
  "Tue Aug 23 2016 00:00:00 GMT-0600 (MDT)",
  "Fri Mar 21 2014 00:00:00 GMT-0600 (MDT)",
  "Sat Jul 11 2009 00:00:00 GMT-0600 (MDT)",
  "Mon Dec 10 2007 00:00:00 GMT-0700 (MST)"
]

配列のシャロークローニング

場合によっては、オリジナルを変更しないでアレイを操作する必要があります。 cloneメソッドの代わりに、配列には、配列の任意の部分の浅いコピーを実行できるsliceメソッドがあります。これは最初のレベルだけをクローンすることに留意してください。これは、数字や文字列のようなプリミティブ型ではうまく動作しますが、オブジェクトではうまく動作しません。

配列をシャロークローン化する（つまり、新しい配列インスタンスを持ちますが同じ要素を持つ）には、次の1行を使用できます。

var clone = arrayToClone.slice();

これにより、組み込みのJavaScript Array.prototype.sliceメソッドがArray.prototype.sliceれます。 sliceに引数を渡すと、配列の一部の浅いクローンを作成するより複雑な動作を得ることができますが、単にslice()を呼び出すだけで、配列全体の浅いコピーが作成されます。

配列のようなオブジェクトを配列に変換するために使用されるすべてのメソッドは、配列の複製に適用できます 。

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.prototype.slice.call(arrayToClone);
clone2 = [].slice.call(arrayToClone);

配列の検索

推奨される方法（ES5以降）では、 Array.prototype.findを使用します 。

let people = [
  { name: "bob" },
  { name: "john" }
];

let bob = people.find(person => person.name === "bob");

// Or, more verbose
let bob = people.find(function(person) {
  return person.name === "bob";
});

JavaScriptのどのバージョンでもforループの標準も使用できます。

for (var i = 0; i < people.length; i++) {
  if (people[i].name === "bob") {
    break; // we found bob
  }
}

FindIndex

findIndex（）メソッドは、配列内の要素が指定されたテスト関数を満たしている場合、配列内のインデックスを返します。それ以外の場合は-1が返されます。

array = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 }
];
var index = array.findIndex(item => item.value === 3); // 2
var index = array.findIndex(item => item.value === 12); // -1

splice（）を使用した要素の削除/追加

splice()メソッドは、配列から要素を削除するために使用できます。この例では、最初の3を配列から削除します。

var values = [1, 2, 3, 4, 5, 3];
var i = values.indexOf(3);
if (i >= 0) {
  values.splice(i, 1);
}
// [1, 2, 4, 5, 3]

splice()メソッドは、配列に要素を追加するためにも使用できます。この例では、配列の最後に6,7、および8の数字を挿入します。

var values = [1, 2, 4, 5, 3];
var i = values.length + 1;
values.splice(i, 0, 6, 7, 8);
//[1, 2, 4, 5, 3, 6, 7, 8]

splice()メソッドの最初の引数は、要素を削除/挿入するインデックスです。 2番目の引数は、削除する要素の数です。 3番目の引数以降は、配列に挿入する値です。

配列の比較

単純な配列の比較のために、JSON stringifyを使用して出力文字列を比較することができます：

JSON.stringify(array1) === JSON.stringify(array2)

注：これは、両方のオブジェクトがJSONシリアライズ可能であり、循環参照を含んでいない場合にのみ機能します。 TypeError: Converting circular structure to JSONする可能性がありTypeError: Converting circular structure to JSON

再帰関数を使用して配列を比較できます。

function compareArrays(array1, array2) { 
  var i, isA1, isA2;
  isA1 = Array.isArray(array1);
  isA2 = Array.isArray(array2);
  
  if (isA1 !== isA2) { // is one an array and the other not?
    return false;      // yes then can not be the same
  }
  if (! (isA1 && isA2)) {      // Are both not arrays 
    return array1 === array2;  // return strict equality
  }
  if (array1.length !== array2.length) { // if lengths differ then can not be the same
    return false;
  }
  // iterate arrays and compare them
  for (i = 0; i < array1.length; i += 1) {
    if (!compareArrays(array1[i], array2[i])) { // Do items compare recursively
      return false;
    }           
  }
  return true; // must be equal
}

警告：上記の関数を使用するのは危険です。配列に循環参照がある可能性があると思われる場合は、 try catchラップする必要があります（配列への参照が含まれています）

a = [0] ;
a[1] = a;
b = [0, a]; 
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded

注意：この関数は厳密な等価演算子===を使用して、配列以外のアイテム{a: 0} === {a: 0}を比較し{a: 0} === {a: 0}はfalse

配列を破壊する

const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;

length === 3;     // → true
height === 4;     // → true
hypotneuse === 5; // → true

const [,b,,c] = [1, 2, 3, 4];

console.log(b, c); // → 2, 4

const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]

function area([length, height]) {
  return (length * height) / 2;
}

const triangle = [3, 4, 5];

area(triangle); // → 6

重複する要素の削除

ES5.1以降では、ネイティブメソッドArray.prototype.filterを使用して配列をループし、指定のコールバック関数を渡すエントリだけを残すことができます。

次の例では、コールバックは配列に指定された値が存在するかどうかを調べます。存在する場合、それは複製であり、結果の配列にはコピーされません。

var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) { 
  return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']

環境がES6をサポートしている場合は、 Setオブジェクトを使用することもできます。このオブジェクトを使用すると、プリミティブ値でもオブジェクト参照でも、すべての型の一意の値を格納できます。

var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];

次のアンサーを参照してください。

• 関連するSOの答え
• ES6での関連解答

すべての要素を削除する

var arr = [1, 2, 3, 4];

方法1

新しい配列を作成し、既存の配列参照を新しいもので上書きします。

arr = [];

これは元の配列からアイテムを削除しないので注意が必要です。配列は、関数に渡されたときに閉じられた可能性があります。あなたはこれに気づいていないかもしれませんが、配列は関数の存続期間中はメモリに残っています。これはメモリリークの一般的な原因です。

不良アレイの消去によるメモリリークの例：

var count = 0;

function addListener(arr) { // arr is closed over
  var b = document.body.querySelector("#foo" + (count++));
  b.addEventListener("click", function(e) { // this functions reference keeps
    // the closure current while the
    // event is active
    // do something but does not need arr       
  });
}

arr = ["big data"];
var i = 100;
while (i > 0) {
  addListener(arr); // the array is passed to the function
  arr = []; // only removes the reference, the original array remains
  array.push("some large data"); // more memory allocated
  i--;
}
// there are now 100 arrays closed over, each referencing a different array
// no a single item has been deleted

メモリリークの危険を避けるには、上記の例のwhileループで配列を空にするには、次の2つの方法のいずれかを使用します。

方法2

lengthプロパティを設定すると、すべての配列要素が新しい配列の長さから古い配列の長さに削除されます。配列内のすべての項目を削除および参照解除する最も効率的な方法です。元の配列への参照を保持する

arr.length = 0;

方法3

方法2と同様ですが、削除された項目を含む新しい配列を返します。アイテムを必要としない場合は、新しい配列がただちに参照解除されるように作成されるため、このメソッドは非効率的です。

arr.splice(0); // should not use if you don't want the removed items
// only use this method if you do the following
var keepArr = arr.splice(0); // empties the array and creates a new array containing the
                             // removed items

関連する質問 。

マップを使用して配列内のオブジェクトを再フォーマットする

Array.prototype.map() ：元の配列のすべての要素に提供された関数を呼び出した結果を含む新しい配列を返します。

次のコード例では、人物の配列をとり、 'fullName'プロパティを持つ人物を含む新しい配列を作成します

var personsArray = [
  {
    id: 1,
    firstName: "Malcom",
    lastName: "Reynolds"
  }, {
    id: 2,
    firstName: "Kaylee",
    lastName: "Frye"
  }, {
    id: 3,
    firstName: "Jayne",
    lastName: "Cobb"
  }
];

// Returns a new array of objects made up of full names.
var reformatPersons = function(persons) {
  return persons.map(function(person) {
    // create a new object to store full name.
    var newObj = {};
    newObj["fullName"] = person.firstName + " " + person.lastName;

    // return our new object.
    return newObj;
  });
};

私たちは今、 reformatPersons(personsArray)を呼び出すことができ、各人の正式な名前の新しい配列を受け取りました。

var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
  { fullName: "Malcom Reynolds" }, 
  { fullName: "Kaylee Frye" },
  { fullName: "Jayne Cobb" }
]

personsArrayとその内容は変更されません。

console.log(personsArray);
/// Output
[
  {
    firstName: "Malcom",
    id: 1,
    lastName: "Reynolds"
  }, {
    firstName: "Kaylee",
    id: 2,
    lastName: "Frye"
  }, {
    firstName: "Jayne",
    id: 3,
    lastName: "Cobb"
  }
]

キー値のペアとして2つの配列をマージする

2つの別々の配列があり、その2つの配列からキーの値のペアを作成したい場合は、以下のように配列のreduce関数を使用できます。

var columns = ["Date", "Number", "Size", "Location", "Age"];
var rows = ["2001", "5", "Big", "Sydney", "25"];
var result =  rows.reduce(function(result, field, index) {
  result[columns[index]] = field;
  return result;
}, {})

console.log(result);

出力：

{
  Date: "2001",
  Number: "5",
  Size: "Big",
  Location: "Sydney",
  Age: "25"
}

文字列を配列に変換する

.split()メソッドは、文字列を部分文字列の配列に分割します。デフォルトで.split()は文字列をスペース（ " " ）の部分文字列に分割します。これは.split(" ")を呼び出すのと同じです。

.split()渡されるパラメータは、文字列の分割に使用する文字または正規表現を指定します。

文字列を配列に分割するには、空の文字列（ "" ）を持つ.splitを呼び出します。 重要な注意：これは、すべての文字が、ほとんどの英語とヨーロッパのほとんどの言語をカバーするUnicodeの下限文字に収まる場合にのみ機能します。 3バイトと4バイトのユニコード文字を必要とする言語の場合、 slice("")はそれらを区切ります。

var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]

var strArray = [..."sky is blue"];        
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]

すべての配列項目が等しいかどうかをテストする

.everyメソッドは、すべての配列要素が指定された述語テストをパスするかどうかをテストします。

すべてのオブジェクトが等しいかどうかをテストするには、次のコードスニペットを使用します。

[1, 2, 1].every(function(item, i, list) { return item === list[0]; }); // false
[1, 1, 1].every(function(item, i, list) { return item === list[0]; }); // true

[1, 1, 1].every((item, i, list) => item === list[0]); // true

次のコードスニペットは、プロパティの等価性をテストします。

let data = [
  { name: "alice", id: 111 },
  { name: "alice", id: 222 }
];

data.every(function(item, i, list) { return item === list[0]; }); // false
data.every(function(item, i, list) { return item.name === list[0].name; }); // true

data.every((item, i, list) => item.name === list[0].name); // true

配列の一部をコピーする

slice（）メソッドは、配列の一部のコピーを返します。

arr.slice([begin[, end]]) 2つのパラメータがarr.slice([begin[, end]])です。

ベギン

抽出の開始点であるゼロベースのインデックス。

終わり

ゼロベースのインデックスは抽出の終わりで、このインデックスまでスライスしますが、含まれません。

末尾が負の数の場合、 end = arr.length + end 。

例1

// Let's say we have this Array of Alphabets
var arr = ["a", "b", "c", "d"...];

// I want an Array of the first two Alphabets
var newArr = arr.slice(0, 2); // newArr === ["a", "b"]

例2

// Let's say we have this Array of Numbers
// and I don't know it's end
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9...];

// I want to slice this Array starting from
// number 5 to its end
var newArr = arr.slice(4); // newArr === [5, 6, 7, 8, 9...]

最小または最大要素の検索

配列または配列のようなオブジェクトが数値である場合、つまりすべての要素が数値である場合は、 Math.min.applyまたはMath.max.apply使用して、最初の引数としてnullを渡し、2番目の引数として配列を渡しnull 。

var myArray = [1, 2, 3, 4];

Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4

var myArray = [1, 2, 3, 4, 99, 20];

var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1

次の例では、 forループを使用しforます。

var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
   var currentValue = myArray[i];
   if(currentValue > maxValue) {
      maxValue = currentValue;
   }
}

var myArray = [1, 2, 3, 4];

myArray.reduce(function(a, b) {
  return Math.min(a, b);
}); // 1

myArray.reduce(function(a, b) {
  return Math.max(a, b);
}); // 4

myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4

function myMax(array) {
  return array.reduce(function(maxSoFar, element) {
    return Math.max(maxSoFar, element);
  }, -Infinity);
}

myMax([3, 5]);             // 5
myMax([]);                 // -Infinity
Math.max.apply(null, []);  // -Infinity

配列の平坦化

2次元配列

function flattenES6(arr) {
  return [].concat(...arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]

function flatten(arr) {
  return [].concat.apply([], arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]

高次元配列

そのように深くネストされた配列

var deeplyNested = [4,[5,6,[7,8],9]];

この魔法で平らにすることができます

console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]

または

const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]

上記の両方の方法は、配列が数字だけで構成されている場合にのみ機能します。この方法では、オブジェクトの多次元配列を平坦化することはできません。

特定のインデックスの配列に項目を挿入する

単純な項目の挿入は、 Array.prototype.spliceメソッドで行うことができます。

arr.splice(index, 0, item);

複数の引数と連鎖サポートを備えた高度なバリアント：

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  this.splice.apply(this, [index, 0].concat(
    Array.prototype.slice.call(arguments, 1)));
  return this;
};

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);  // ["b", "X", "Y", "Z", "c"]

そして、配列型引数のマージと連鎖のサポート：

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  index = Math.min(index, this.length);
  arguments.length > 1
    && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
    && this.insert.apply(this, arguments);
  return this;
};

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");  // "a-b-V-W-X-Y-Z-c-d"

entries（）メソッド

entries()メソッドは、配列内の各インデックスのキーと値のペアを含む新しいArray Iteratorオブジェクトを返します。

var letters = ['a','b','c'];

for(const[index,element] of letters.entries()){
  console.log(index,element);
}

結果

0 "a"
1 "b"
2 "c"

注 ： この方法はInternet Explorerではサポートされていません。

CC-by-SA 2.5の下でライセンスされたMozilla Contributorsに Array.prototype.entriesのこのコンテンツの一部