From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../global_objects/array/@@iterator/index.html | 126 +++++ .../global_objects/array/@@species/index.html | 73 +++ .../global_objects/array/@@unscopables/index.html | 78 +++ .../global_objects/array/array/index.html | 88 +++ .../global_objects/array/concat/index.html | 141 +++++ .../global_objects/array/copywithin/index.html | 181 +++++++ .../global_objects/array/entries/index.html | 89 ++++ .../global_objects/array/every/index.html | 243 +++++++++ .../reference/global_objects/array/fill/index.html | 147 +++++ .../global_objects/array/filter/index.html | 287 ++++++++++ .../reference/global_objects/array/find/index.html | 236 ++++++++ .../global_objects/array/findindex/index.html | 191 +++++++ .../reference/global_objects/array/flat/index.html | 177 ++++++ .../global_objects/array/flatmap/index.html | 148 ++++++ .../global_objects/array/foreach/index.html | 370 +++++++++++++ .../reference/global_objects/array/from/index.html | 307 +++++++++++ .../global_objects/array/includes/index.html | 137 +++++ .../reference/global_objects/array/index.html | 465 ++++++++++++++++ .../global_objects/array/index/index.html | 22 + .../global_objects/array/indexof/index.html | 215 ++++++++ .../global_objects/array/input/index.html | 25 + .../global_objects/array/isarray/index.html | 120 +++++ .../reference/global_objects/array/join/index.html | 96 ++++ .../reference/global_objects/array/keys/index.html | 70 +++ .../global_objects/array/lastindexof/index.html | 148 ++++++ .../global_objects/array/length/index.html | 125 +++++ .../reference/global_objects/array/map/index.html | 366 +++++++++++++ .../global_objects/array/observe/index.html | 89 ++++ .../reference/global_objects/array/of/index.html | 107 ++++ .../reference/global_objects/array/pop/index.html | 95 ++++ .../global_objects/array/prototype/index.html | 176 ++++++ .../reference/global_objects/array/push/index.html | 126 +++++ .../global_objects/array/reduce/index.html | 592 +++++++++++++++++++++ .../global_objects/array/reduceright/index.html | 353 ++++++++++++ .../global_objects/array/reverse/index.html | 91 ++++ .../global_objects/array/shift/index.html | 98 ++++ .../global_objects/array/slice/index.html | 154 ++++++ .../reference/global_objects/array/some/index.html | 197 +++++++ .../reference/global_objects/array/sort/index.html | 256 +++++++++ .../global_objects/array/splice/index.html | 160 ++++++ .../global_objects/array/tolocalestring/index.html | 179 +++++++ .../global_objects/array/tosource/index.html | 69 +++ .../global_objects/array/tostring/index.html | 73 +++ .../global_objects/array/unobserve/index.html | 134 +++++ .../global_objects/array/unshift/index.html | 108 ++++ .../global_objects/array/values/index.html | 122 +++++ 46 files changed, 7850 insertions(+) create mode 100644 files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/index/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/input/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/unobserve/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/array/values/index.html (limited to 'files/ja/web/javascript/reference/global_objects/array') diff --git a/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..df8c0269be --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,126 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - Beginner + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference + - イテレーター + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +
{{JSRef}}
+ +

@@iterator メソッドは反復プロトコルの一部であり、値の列を同期的に反復する方法を定義します。

+ +

@@iterator プロパティの初期値は {{jsxref("Array.prototype.values()", "values()")}} プロパティの初期値と同じ関数オブジェクトです。

+ +

構文

+ +
arr[Symbol.iterator]()
+ +

返値

+ +

{{jsxref("Array.prototype.values()", "values()")}} イテレーター によって与えられる初期値です。既定では、 arr[Symbol.iterator] を使うと {{jsxref("Array.prototype.values()", "values()")}} を返します。

+ +

例

+ +

for...of ループを用いた反復

+ +

HTML

+ +
<ul id="letterResult">
+</ul>
+ +

JavaScript

+ +
var arr = ['a', 'b', 'c'];
+var eArr = arr[Symbol.iterator]();
+var letterResult = document.getElementById('letterResult');
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+// const and var could also be used
+for (let letter of eArr) {
+ letterResult.innerHTML += "<li>" + letter + "</li>";
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Iteration_using_for...of_loop', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/@@iterator')}}

+ +

他の反復方法

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // a
+console.log(eArr.next().value); // b
+console.log(eArr.next().value); // c
+console.log(eArr.next().value); // d
+console.log(eArr.next().value); // e
+
+ +

括弧表記の使用法

+ +

この構文をドット記法 (Array.prototype.values()) よりも優先して使用する場合は、事前にどのようなオブジェクトになるのかが分からない場合です。イテレータを受け取り、その値を反復処理する関数があるが、そのオブジェクトが [Iterable].prototype.values メソッドを持っているかどうかわからない場合です。これはStringオブジェクトのような組み込みオブジェクトでも、カスタムオブジェクトでもよいでしょう。これは String オブジェクトのような組込みオブジェクトや、独自オブジェクトである可能性があります。

+ +
function logIterable(it) {
+  var iterator = it[Symbol.iterator]();
+  // your browser must support for..of loop
+  // and let-scoped variables in for loops
+  // const and var could also be used
+  for (let letter of iterator) {
+      console.log(letter);
+  }
+}
+
+// Array
+logIterable(['a', 'b', 'c']);
+// a
+// b
+// c
+
+// string
+logIterable('abc');
+// a
+// b
+// c
+
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.Array.@@iterator")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/@@species/index.html b/files/ja/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..24bb647f43 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,73 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +
{{JSRef}}
+ +

Array[@@species] アクセサープロパティは、Array コンストラクターを返します。

+ +

構文

+ +
Array[Symbol.species]
+
+ +

返値

+ +

{{jsxref("Array")}} コンストラクターです。

+ +

解説

+ +

species アクセサープロパティは、 Array オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。

+ +

例

+ +

通常のオブジェクトの spicies

+ +

species プロパティは、Array オブジェクトの既定のコンストラクター関数である Array コンストラクターを返します。

+ +
Array[Symbol.species]; // Array() 関数
+ +

派生オブジェクトの spicies

+ +

派生コレクションオブジェクト (たとえば、独自の配列である MyArray) では、MyArray の species は MyArray コンストラクターです。しかし、派生クラスのメソッドで、親である Array オブジェクトを返すためにこれをオーバーライドしたいかもしれません。

+ +
class MyArrayBuffer extends ArrayBuffer {
+  // MyArray species を親である ArrayBuffer コンストラクタにオーバーライド。
+  static get [Symbol.species]() { return ArrayBuffer; }
+}
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.@@species")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/ja/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..478ccbfb0e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,78 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +
{{JSRef}}
+ +

@@unscopable シンボルプロパティには、 ES2015 以前の ECMAScript 標準には含まれていないプロパティ名があります。それらのプロパティは、with 文のバインディングから除外されます。

+ +

解説

+ +

with バインディングから除外される既定の配列プロパティは次のとおりです。

+ + + +

自作オブジェクトに unscopables を設定する方法については、 {{jsxref("Symbol.unscopables")}} を見てください。

+ +

{{js_property_attributes(0,0,1)}}

+ +

例

+ +

with 環境内での使用

+ +

次のコードは、 ES5 以下であれば正常に動作します。しかし、 ECMAScript 2015 以降では {{jsxref("Array.prototype.keys()")}} メソッドが導入されました。つまり、with 環境内では、 "keys" はメソッドであり、変数ではありません。ここが組込み @@unscopables の役立つ場所です。Array.prototype[@@unscopables] シンボルプロパティが使用されると、配列のいくつかのメソッドが with 文のスコープに入ることを防ぎます。

+ +
var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.@@unscopables")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/array/index.html b/files/ja/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..5aea96686d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,88 @@ +--- +title: Array() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - Array + - Constructor + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +
{{JSRef}}
+ +

Array() コンストラクターは {{jsxref("Array")}} オブジェクトを生成するために使用します。

+ +

構文

+ +
[element0, element1, ..., elementN]
+
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+ +

引数

+ +
+
elementN
+
JavaScript の配列は、与えられた要素で初期化されますが、 Array コンストラクターに単一の引数が渡され、その引数が数値であった場合は例外です (下記の arrayLength 引数を参照してください)。なお、この特殊な場合は JavaScript の配列が Array コンストラクターで生成されたときのみであり、ブラケット構文で配列リテラルを作成した場合は当てはまりません。
+
arrayLength
+
Array コンストラクターに渡された唯一の引数が 0 から 232-1 の間 (両端を含む) の整数であった場合は、新しい JavaScript の配列を返し、その length プロパティがその値になります (注: これは arrayLength 個の空のスロットを持つ配列であり、実際に undefined の値が入ったスロットではありません)。この引数がそれ以外の数値であった場合は、 {{jsxref("RangeError")}} 例外が発生します。
+
+ +

例

+ +

配列リテラル記法

+ +

配列はリテラル記法を使用して生成することができます。

+ +
let fruits = ['りんご', 'バナナ'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "りんご"
+
+ +

単一の引数を持つ Array コンストラクター

+ +

配列は単一の数値の引数を持つコンストラクターで生成することができます。配列は length プロパティにその値が設定されており、配列の要素は空スロットになります。

+ +
let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+
+ +

複数の引数を持つ Array コンストラクター

+ +

2つ以上の引数がコンストラクターに渡された場合、与えられた要素を持つ {{jsxref("Array")}} が生成されます。

+ +
let fruits = new Array('りんご', 'バナナ');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "りんご"
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.Array.Array")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/concat/index.html b/files/ja/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..12b727925a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - array.concat + - concat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +
{{JSRef}}
+ +

concat() メソッドは、2つ以上の配列を結合するために使用します。このメソッドは既存の配列を変更せず、新しい配列を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-concat.html","shorter")}}
+ + + +

構文

+ +
const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])
+ +

引数

+ +
+
valueN {{optional_inline}}
+
新しい配列に連結する配列や値です。すべての valueN 引数が省略された場合、 concat は呼び出された既存の配列のシャローコピーを返します。詳しくは下記の解説をお読みください。
+
+ +

返値

+ +

新しい {{jsxref("Array")}} インスタンス。

+ +

解説

+ +

concat は、メソッドを呼び出した this オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。

+ +

concat は this や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。元の配列の要素は以下のようにして新しい配列にコピーされます。

+ + + +
+

注: 連結した配列/値は元の配列には手を付けません。さらに、新しい配列へどんな操作をしても、元の配列には影響しません。逆もまた同様です（要素がオブジェクト参照ではない場合のみです）。

+
+ +

例

+ +

2 つの配列を連結させる

+ +

以下のコードは 2 つの配列を連結させます。

+ +
const letters = ['a', 'b', 'c'];
+const numbers = [1, 2, 3];
+
+letters.concat(numbers);
+// result in ['a', 'b', 'c', 1, 2, 3]
+
+ +

3 つの配列を連結させる

+ +

以下のコードは 3 つの配列を連結させます。

+ +
const num1 = [1, 2, 3];
+const num2 = [4, 5, 6];
+const num3 = [7, 8, 9];
+
+const numbers = num1.concat(num2, num3);
+
+console.log(numbers);
+// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

配列に値を連結させる

+ +

以下のコードは配列に値を連結させます。

+ +
const letters = ['a', 'b', 'c'];
+
+const alphaNumeric = letters.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// results in ['a', 'b', 'c', 1, 2, 3]
+
+ +

ネストした配列を連結する

+ +

以下のコードはネストした配列同士を連結させます。また、元の配列からの参照を保持しています。

+ +
const num1 = [[1]];
+const num2 = [2, [3]];
+
+const numbers = num1.concat(num2);
+
+console.log(numbers);
+// results in [[1], 2, [3]]
+
+// num1 の最初の要素を変更します
+num1[0].push(4);
+
+console.log(numbers);
+// results in [[1, 4], 2, [3]]
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.concat")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/copywithin/index.html b/files/ja/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..eec6a36bf4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,181 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +
{{JSRef}}
+ +

copyWithin() メソッドは、サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返します。

+ +
{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
+ + + +

構文

+ +
arr.copyWithin(target[, start[, end]])
+ +

引数

+ +
+
target
+
シーケンスのコピー先となる、0 から始まるインデックスです。負の場合、target は最後から数えられます。
+
target が arr.length 以上の場合、何もコピーされません。 target が start より後に配置されている場合、コピーされたシーケンスは arr.length に合うように切り詰められます。
+
start {{optional_inline}}
+
要素のコピー元の始まりを表す、0 から始まるインデックスです。負の場合、 start は最後から数えられます。
+
start が省略された場合、copyWithin は最初の要素からコピーします（つまり、初期値は 0 です）。
+
end {{optional_inline}}
+
要素のコピー元の末尾を表す、0 から始まるインデックスです。 copyWithin のコピーは end を含みません。負の場合、 end は最後から数えられます。
+
end が省略された場合、 copyWithin は最後までコピーします（つまり、初期値は arr.length です）。
+
+ +

戻り値

+ +

変更された配列です。

+ +

説明

+ +

copyWithin メソッドは C 言語や C++ 言語の memmove のような動きをし、{{jsxref("Array")}} のデータをシフトさせる高いパフォーマンスのメソッドです。これは特に {{jsxref("TypedArray/copyWithin", "TypedArray")}} の同名メソッドに当てはまります。シーケンスはコピーされ貼り付けられる処理が一命令で行われます。コピー＆ペースト領域が重なっている場合でも、ペーストされたシーケンスはコピーされた値を持ちます。

+ +

copyWithin 関数は、ジェネリック関数として動作します。this 値が {{jsxref("Array")}} オブジェクトである必要はありません。

+ +

copyWithin は可変メソッドであり、this オブジェクト自身を変更し、コピーではなく、オブジェクト自身を返します。

+ + + +

ポリフィル

+ +
if (!Array.prototype.copyWithin) {
+　 Object.defineProperty(Array.prototype, 'copyWithin', {
+　 　 value: function(target, start/*, end*/) {
+　　    // Steps 1-2.
+   　　 if (this == null) {
+　　      throw new TypeError('this is null or not defined');
+   　　 }
+
+    　　var O = Object(this);
+
+　　    // Steps 3-5.
+　　    var len = O.length >>> 0;
+
+　　    // Steps 6-8.
+   　　 var relativeTarget = target >> 0;
+
+　　    var to = relativeTarget < 0 ?
+   　　   Math.max(len + relativeTarget, 0) :
+      　　Math.min(relativeTarget, len);
+
+　　    // Steps 9-11.
+   　　 var relativeStart = start >> 0;
+
+　　    var from = relativeStart < 0 ?
+   　　   Math.max(len + relativeStart, 0) :
+      　　Math.min(relativeStart, len);
+
+　　    // Steps 12-14.
+   　　 var end = arguments[2];
+   　　 var relativeEnd = end === undefined ? len : end >> 0;
+
+　　    var final = relativeEnd < 0 ?
+   　　   Math.max(len + relativeEnd, 0) :
+      　　Math.min(relativeEnd, len);
+
+　　    // Step 15.
+   　　 var count = Math.min(final - from, len - to);
+
+　　    // Steps 16-17.
+   　　 var direction = 1;
+
+　　    if (from < to && to < (from + count)) {
+   　　   direction = -1;
+　    　　from += count - 1;
+  　　    to += count - 1;
+  　　  }
+
+　　    // Step 18.
+   　　 while (count > 0) {
+      　　if (from in O) {
+        　　O[to] = O[from];
+　　      } else {
+   　　     delete O[to];
+      　　}
+
+　　      from += direction;
+   　　   to += direction;
+      　　count--;
+　　    }
+
+   　　 // Step 19.
+　　    return O;
+　　  },
+　 　 configurable: true,
+　  　writable: true
+　 });
+}
+
+ +

例

+ +

copyWithin の使用

+ +
[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, -2, -1);
+// [4, 2, 3, 4, 5]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 Typed Arrays are subclasses of Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// On platforms that are not yet ES2015 compliant:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+
+ + +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.copyWithin")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/entries/index.html b/files/ja/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..dd7c6eae3e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +
{{JSRef}}
+ +

entries() メソッドは、配列内の各要素に対するキー/値のペアを含む新しい Array イテレーターオブジェクトを返します。

+ +
{{EmbedInteractiveExample("pages/js/array-entries.html")}}
+ + + +

構文

+ +
array.entries()
+ +

返値

+ +

新しい {{jsxref("Array")}} イテレーターオブジェクトを返します。

+ +

例

+ +

インデックスと要素の反復処理

+ +
const a = ['a', 'b', 'c'];
+
+for (const [index, element] of a.entries())
+  console.log(index, element);
+
+// 0 'a'
+// 1 'b'
+// 2 'c'
+
+ +

for…of loop で使う

+ +
var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.entries")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/every/index.html b/files/ja/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..2e797063fb --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,243 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +
{{JSRef}}
+ +

every() メソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-every.html","shorter")}}
+ + + +

構文

+ +
arr.every(callback(element[, index[, array]])[, thisArg])
+ +

引数

+ +
+
callback
+
各要素に対してテストを実行する関数です。次の 3 つの引数を取ります。 +
+
element
+
現在処理されている要素です。
+
index {{Optional_inline}}
+
現在処理されている要素の添字です。
+
array {{Optional_inline}}
+
every が実行されている配列です。
+
+
+
thisArg {{Optional_inline}}
+
callback を実行するときに this として使用すされる値です。
+
+ +

返値

+ +

callback 関数が配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は true。それ以外は false。

+ +

解説

+ +

every は、与えられた callback 関数を、配列に含まれる各要素に対して一度ずつ、callback が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、every メソッドはただちに false を返します。callback がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、every は true を返します。

+ +
+

注意: このメソッドを空の配列に対して呼び出すと、無条件に true を返します。

+
+ +

callback は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。

+ +

callback は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。

+ +

thisArg 引数が every に与えられると、それがコールバックの this として使用されます。それ以外の場合は undefined が this の値として使われます。callback が最終的に監視できる this の値は、関数から見た this の決定に関する一般的なルールによって決定されます。

+ +

every は呼び出された配列を変化させません。

+ +

every によって処理される要素の範囲は、callback が最初に呼び出される前に設定されます。callback は、every の呼び出しが開始された後に追加された要素に対しては、実行されません。既存の配列要素が変更されたり、削除された場合、callback に渡される値は every がそれらを訪れた時点での値になり、every が削除された要素を訪問することはありません。

+ +

every は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。具体的に言うと、空の配列に対しては true を返します。(空集合のすべての要素が与えられた任意の条件を満たすことは空虚に真です。)

+ +

ポリフィル

+ +

every は ECMA-262 標準に第5版で追加されたもので、この標準のそれ以外の実装には存在しないかもしれません。これを回避するには、スクリプトの最初に以下のコードを挿入することで、ネイティブで対応していない実装でも every を使用できるようにすることができます。

+ +

このアルゴリズムは、Object と TypeError が元の値を持ち、callbackfn.call が {{jsxref("Function.prototype.call")}} の元の値に評価されると仮定するもので、ECMA-262 第5版で指定されているものと全く同じです。

+ +
if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function' && Object.prototype.toString.call(callbackfn) !== '[object Function]') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+        var testResult;
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        // of callbackfn with T as the this value if T is not undefined
+        // else is the result of calling callbackfn
+        // and argument list containing kValue, k, and O.
+        if(T) testResult = callbackfn.call(T, kValue, k, O);
+        else testResult = callbackfn(kValue,k,O)
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+
+ +

例

+ +

すべての配列要素の大きさをテストする

+ +

次の例は、配列内のすべての要素が 10 よりも大きいかどうかテストします。

+ +
function isBigEnough(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+
+ +

アロー関数の使用

+ +

アロー関数はより短い構文で同じテストを提供します。

+ +
[12, 5, 8, 130, 44].every(x => x >= 10);   // false
+[12, 54, 18, 130, 44].every(x => x >= 10); // true
+ +

初期配列への影響 (変更、追加、削除)

+ +

次の例は、配列が変更されたときに every メソッドの動作をテストするものです。

+ +
// ---------------
+// Modifying items
+// ---------------
+let arr = [1, 2, 3, 4];
+arr.every( (elem, index, arr) => {
+  arr[index+1] -= 1
+  console.log(`[${arr}][${index}] -> ${elem}`)
+  return elem < 2
+})
+
+// Loop runs for 3 iterations, but would
+// have run 2 iterations without any modification
+//
+// 1st iteration: [1,1,3,4][0] -> 1
+// 2nd iteration: [1,1,2,4][1] -> 1
+// 3rd iteration: [1,1,2,3][2] -> 2
+
+// ---------------
+// Appending items
+// ---------------
+arr = [1, 2, 3];
+arr.every( (elem, index, arr) => {
+  arr.push('new')
+  console.log(`[${arr}][${index}] -> ${elem}`)
+  return elem < 4
+})
+
+// Loop runs for 3 iterations, even after appending new items
+//
+// 1st iteration: [1, 2, 3, new][0] -> 1
+// 2nd iteration: [1, 2, 3, new, new][1] -> 2
+// 3rd iteration: [1, 2, 3, new, new, new][2] -> 3
+
+// ---------------
+// Deleting items
+// ---------------
+arr = [1, 2, 3, 4];
+arr.every( (elem, index, arr) => {
+  arr.pop()
+  console.log(`[${arr}][${index}] -> ${elem}`)
+  return elem < 4
+})
+
+// Loop runs for 2 iterations only, as the remaining
+// items are `pop()`ed off
+//
+// 1st iteration: [1,2,3][0] -> 1
+// 2nd iteration: [1,2][1] -> 2
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.every")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/fill/index.html b/files/ja/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..7b995dd9b7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,147 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +
{{JSRef}}
+ +

fill() メソッドは、開始インデックス（デフォルトは 0）から終了インデックス（デフォルトは array.length）までのすべての要素を、静的な値に変更した配列を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-fill.html")}}
+ + + +

構文

+ +
arr.fill(value[, start[, end]])
+ +

引数

+ +
+
value
+
配列に設定する値です。
+
start＆nbp；{{optional_inline}}
+
開始する位置です。既定値は 0 です。
+
end {{optional_inline}}
+
終了する位置です。既定値は this.length です。
+
+ +

戻り値

+ +

変更された配列です。

+ +

説明

+ + + + +

ポリフィル

+ +
if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length >>> 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Step 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Step 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+
+ +

Object.defineProperty が利用できないとても古い JavaScript エンジンをサポートする必要がある場合、Array.prototype のメソッドを polyfill するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。

+ +

例

+ +

fill を使用する

+ +
[1, 2, 3].fill(4)                // [4, 4, 4]
+[1, 2, 3].fill(4, 1)             // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2)          // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1)          // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3)          // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2)        // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN)      // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5)          // [1, 2, 3]
+Array(3).fill(4)                 // [4, 4, 4]
+[].fill.call({ length: 3 }, 4)   // {0: 4, 1: 4, 2: 4, length: 3}
+
+// A single object, referenced by each slot of the array:
+let arr = Array(3).fill({}) // [{}, {}, {}]
+arr[0].hi = "hi"            // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
+
+ +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.fill")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/filter/index.html b/files/ja/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..0c88f3f260 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,287 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill + - メソッド + - 配列 +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

+ +
{{EmbedInteractiveExample("pages/js/array-filter.html","shorter")}}
+ + + +

構文

+ +
let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])
+
+ +

引数

+ +
+
callback
+
+

配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。

+ +

この関数は３つの引数を受け付けます。

+ +
+
element
+
配列内で処理中の現在の要素です。
+
index{{optional_inline}}
+
配列内で処理中の現在の要素の位置です。
+
array{{optional_inline}}
+
filter メソッドが実行されている配列です。
+
+
+
thisArg{{optional_inline}}
+
callback を実行するときに this として使用する値です。
+
+ +

返値

+ +

テストに合格した要素からなる新しい配列です。テストに合格した要素がなかった場合は、空の配列が返されます。

+ +

解説

+ +

filter() は、与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback が true と評価される値を返したすべての要素からなる新しい配列を生成します。callback は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。callback によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。

+ +

callback は 3 つの引数と共に呼び出されます。

+ +
    +
  1. 要素の値
    2. +
  2. 要素の添字
    3. +
  3. 走査されている配列オブジェクト
    4. +
+ +

filter に引数 thisArg が与えられた場合、そのオブジェクトは callback 関数内の this 値として使われます。そうでない場合、 undefined が this 値として使われます。callback 関数内の最終的な this 値は関数内の this を決定する一般的ルールに従って決められます。

+ +

filter() は呼び出された配列を変化させません。

+ +

filter() によって処理される配列要素の範囲は、callback が最初に呼び出される前に設定されます。filter() の呼び出しが開始された後に (callback から) 追加された配列要素に対しては、callback は実行されません。既存の配列要素が削除された場合は、同様にそれらの要素は処理されません。

+ +

ポリフィル

+ +

filter() は ECMA-262 標準の第5版で追加されました。したがって、この標準のすべての実装に存在するとは限りません。

+ +

回避策として、スクリプトの最初に以下のコードを挿入して、ネイティブに対応していない ECMA-262 の実装で filter() を使用できるようにすることができます。このアルゴリズムは ECMA-262 第5版で指定されているものと完全に等価で、 fn.call が {{jsxref("Function.prototype.bind()")}} の元の値を評価し、 {{jsxref("Array.prototype.push()")}} が元の値を持つことを仮定しています。

+ +
if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
+        throw new TypeError();
+
+    var len = this.length >>> 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+
+    var kValue;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          kValue = t[i]; // in case t is changed in callback
+          if (func(t[i], i, t)){
+            res[c++] = kValue;
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          kValue = t[i];
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = kValue;
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}
+ +

例

+ +

小さい値をすべて取り除く

+ +

次の例では、filter() を使って 10 未満の値を持つ要素をすべて取り除いた配列を生成します。

+ +
function isBigEnough(value) {
+  return value >= 10
+}
+
+let filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
+// filtered は [12, 130, 44]
+
+ +

配列内の素数をすべて検索する

+ +

以下の例は配列内のすべての素数を返します。

+ +
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
+
+function isPrime(num) {
+  for (let i = 2; num > i; i++) {
+    if (num % i == 0) {
+      return false;
+    }
+  }
+  return num > 1;
+}
+
+console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
+ +

JSON の不正な内容を取り除く

+ +

次の例では、filter() を使って id の数値が 0 以外の要素だけに絞った JSON を生成します。

+ +
let arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+]
+
+let invalidEntries = 0
+
+function filterByID(item) {
+  if (Number.isFinite(item.id) && item.id !== 0) {
+    return true
+  }
+  invalidEntries++
+  return false;
+}
+
+let arrByID = arr.filter(filterByID)
+
+console.log('Filtered Array\n', arrByID)
+// Filtered Array
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries)
+// Number of Invalid Entries = 5
+
+ +

配列内の検索

+ +

次の例では filter() を使って検索条件で配列の絞り込みをしています。

+ +
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
+
+/**
+ * Filter array items based on search criteria (query)
+ */
+function filterItems(arr, query) {
+  return arr.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1
+  })
+}
+
+console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
+console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']
+ +

ES2015 版の実装

+ +
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
+
+/**
+ * Filter array items based on search criteria (query)
+ */
+const filterItems = (arr, query) => {
+  return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1)
+}
+
+console.log(filterItems(fruits, 'ap'))  // ['apple', 'grapes']
+console.log(filterItems(fruits, 'an'))  // ['banana', 'mango', 'orange']
+
+
+ +

初期の配列への影響 (変更、追加、削除)

+ +

以下の例は、配列が変更された時の filter の動作をテストするものです。

+ +
// Modifying each words
+let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+
+const modifiedWords = words.filter( (word, index, arr) => {
+  arr[index+1] +=' extra'
+  return word.length < 6
+})
+
+console.log(modifiedWords)
+// Notice there are three words below length 6, but since they've been modified one is returned
+// ["spray"]
+
+// Appending new words
+words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+const appendedWords = words.filter( (word, index, arr) => {
+  arr.push('new')
+  return word.length < 6
+})
+
+console.log(appendedWords)
+// Only three fits the condition even though the `words` itself now has a lot more words with character length less than 6
+// ["spray" ,"limit" ,"elite"]
+
+// Deleting words
+words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
+const deleteWords = words.filter( (word, index, arr) => {
+  arr.pop()
+  return word.length < 6
+})
+
+console.log(deleteWords)
+// Notice 'elite' is not even obtained as its been popped off `words` before filter can even get there
+// ["spray" ,"limit"]
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.filter")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/find/index.html b/files/ja/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..53241787a3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,236 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +
{{JSRef}}
+ +

find() メソッドは、提供されたテスト関数を満たす配列内の 最初の要素 の 値 を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-find.html")}}
+ + + + + +

構文

+ +
arr.find(callback(element[, index[, array]])[, thisArg])
+ +

引数

+ +
+
callback
+
配列内の各要素に対して実行する関数で、次の 3 つの引数を取ります。 +
+
element
+
配列内で現在処理されている要素です。
+
index {{optional_inline}}
+
配列内で現在処理されている要素の添字 (位置) です。
+
array {{optional_inline}}
+
find を呼び出した元の配列です。
+
+
+
thisArg {{optional_inline}}
+
callback 内で {{jsxref("Operators/this", "this")}} として使われるオブジェクトです。
+
+ +

返値

+ +

配列の中で、提供されたテスト関数を満足する最初の要素の値です。見つからなかった場合は {{jsxref("undefined")}} を返します。

+ +

解説

+ +

find メソッドは、配列のそれぞれの添字に対して一度ずつ、callback 関数を実行し、callback 関数が {{glossary("truthy")}} な値を返すまで繰り返します。その場合、find は直ちにその要素の値を返します。そうでなければ、find は {{jsxref("undefined")}} を返します。

+ +

callback は、値が割り当てられているものに限らず、配列中のすべての添字に対して呼び出されます。すなわち、疎配列では値が割り当てられているもののみを呼び出すメソッドに比べて効率的ではないことを意味します。

+ +

thisArg 引数が find に与えられた場合、callback の呼び出しのたびに、その内部で this 値として使用されます。この引数を省略した場合は {{jsxref("undefined")}} が使用されます。

+ +

find は、呼び出した配列を変更 (mutate) しませんが、callback で提供された関数は変更する可能性があります。その場合、find によって処理される各要素は、最初に callback が呼び出される前に設定されます。したがって、

+ + + + +

ポリフィル

+ +

このメソッドは、ECMAScript 2015 仕様書で追加されたものであり、すべての JavaScript 実装環境で使用できるとは限りません。しかし、Array.prototype.find のポリフィルを以下のスニペットで使用できます。

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+
+ +

Object.defineProperty に対応していない、本当に古い JavaScript エンジンに対応する必要がある場合は、列挙不可に設定することができないため、Array.prototype のポリフィルをまったく使用しないのが最善です。

+ + +

例

+ +

配列内のオブジェクトをプロパティの一つで検索

+ +
const inventory = [
+  {name: 'apples', quantity: 2},
+  {name: 'bananas', quantity: 0},
+  {name: 'cherries', quantity: 5}
+];
+
+function isCherries(fruit) {
+  return fruit.name === 'cherries';
+}
+
+console.log(inventory.find(isCherries));
+// { name: 'cherries', quantity: 5 }
+ +

アロー関数と分割の使用

+ +
const inventory = [
+  {name: 'apples', quantity: 2},
+  {name: 'bananas', quantity: 0},
+  {name: 'cherries', quantity: 5}
+];
+
+const result = inventory.find( ({ name }) => name === 'cherries' );
+
+console.log(result) // { name: 'cherries', quantity: 5 }
+ +

配列内の素数の検索

+ +

次の例は、配列内の素数を探します (配列内に素数が見つからない場合は {{jsxref("undefined")}} を返します)。

+ +
function isPrime(element, index, array) {
+  let start = 2;
+  while (start <= Math.sqrt(element)) {
+    if (element % start++ < 1) {
+      return false;
+    }
+  }
+  return element > 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, 見つからない
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+
+ +

以下の例は存在せず削除された要素が処理されること、コールバックに渡される値が処理時点での値であることを示しています。

+ +
// 添字が 2, 3, 4 の位置に要素がない配列を宣言
+const array = [0,1,,,,5,6];
+
+// 値が割り当てられているものに限らず、すべての添字を表示
+array.find(function(value, index) {
+  console.log('Visited index ', index, ' with value ', value);
+});
+
+// 削除されたものを含め、すべての添字を表示
+array.find(function(value, index) {
+  // 初回で要素 5 を削除
+  if (index === 0) {
+    console.log('Deleting array[5] with value ', array[5]);
+    delete array[5];
+  }
+  // 要素 5 は削除されても処理される
+  console.log('Visited index ', index, ' with value ', value);
+});
+// 期待される出力:
+// Deleting array[5] with value 5
+// Visited index 0 with value 0
+// Visited index 1 with value 1
+// Visited index 2 with value undefined
+// Visited index 3 with value undefined
+// Visited index 4 with value undefined
+// Visited index 5 with value undefined
+// Visited index 6 with value 6
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.find")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/findindex/index.html b/files/ja/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..5a4bc9df41 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,191 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript2015 + - JavaScript + - Method + - Prototype + - polyfill + - メソッド + - 配列 +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +
{{JSRef}}
+ +

findIndex() メソッドは、配列内の指定されたテスト関数を満たす最初の要素の位置を返します。テスト関数を満たす要素がない場合を含め、それ以外の場合は -1 を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}
+ + + +

{{jsxref("Array.find", "find()")}} メソッドも参照してください。このメソッドは、配列内で見つかった要素の位置ではなく、値 を返します。

+ +

構文

+ +
arr.findIndex(callback( element[, index[, array]] )[, thisArg])
+
+ +

引数

+ +
+
callback
+
+

配列内のそれぞれの値に対して実行される関数で、条件を満たす要素が発見されたことを示す true が返るまで続けられます。

+ +

３つの引数を取ります。

+ +
+
element
+
配列内で現在処理されている要素。
+
index {{optional_inline}}
+
配列内で現在処理されている要素の位置。
+
array {{optional_inline}}
+
findIndex() を呼び出した元の配列。
+
+
+
thisArg {{optional_inline}}
+
任意で、 callback を実行する時に this として使うオブジェクト。
+
+ +

返値

+ +

テストを満たした配列の要素の位置を返します。それ以外の場合は、 -1 を返します。

+ +

解説

+ +

findIndex() メソッドは、配列のそれぞれの位置に対して callback を１回ずつ呼び出し、 callback が{{Glossary("truthy", "真値")}}を返すものを見つけるまで繰り返します。

+ +

そのような要素が見つかると、 findIndex() はすぐにその要素の位置を返します。 callback が真値を返すと (または配列の length が 0 であると)、 findIndex() は -1 を返します。

+ +
+

極端な場合の警告: {{jsxref("Array.some()")}} などの他の配列メソッドとは異なり、 callback は値が割り当てられていない位置でも実行されます。

+
+ +

callback は３つの引数で呼び出されます。

+ +
    +
  1. その要素の値
    2. +
  2. その要素の位置
    3. +
  3. 走査されている配列オブジェクト
    4. +
+ +

findIndex に thisArg 引数を与えた場合、各 callback の呼び出し時に、その与えたオブジェクトが、this として使用されます。この引数を省略した場合、this は {{jsxref("undefined")}} になります。

+ +

findIndex() で処理される要素の範囲は、 callback が最初に呼び出される前に設定されます。 callback は最初の findIndex() の呼び出し以降に配列に追加された要素は処理しません。配列内で未処理の既存の要素が callback によって変更された場合、 callback へ渡される値は findIndex() がその要素の位置を処理する時点での値になります。

+ +

削除された値も処理対象になります。

+ +

ポリフィル

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+
+ +

もし、本当に {{jsxref("Object.defineProperty")}} に対応していない古い JavaScript エンジンに対応する必要があるのであれば、 Array.prototype メソッドに対してポリフィルを使用しないようにしないと、これらを列挙不可能にすることができません。

+ +

例

+ +

配列内の素数の位置を検索する

+ +

次の例では、配列の中で素数の入った最初の要素の位置を返し、素数が見つからなかった場合は -1 を返します。

+ +
function isPrime(num) {
+  for (let i = 2; num > i; i++) {
+    if (num % i == 0) {
+      return false;
+    }
+  }
+  return num > 1;
+}
+
+console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)
+
+ +

アロー関数を使用して位置を検索する

+ +

次の例では、アロー関数を使用してフルーツの位置を検索しています。

+ +
const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
+
+const index = fruits.findIndex(fruit => fruit === "blueberries");
+
+console.log(index); // 3
+console.log(fruits[index]); // blueberries
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.findIndex")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/flat/index.html b/files/ja/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..5513f67945 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,177 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - flat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +
{{JSRef}}
+ +

flat() メソッドは、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。

+ +
{{EmbedInteractiveExample("pages/js/array-flat.html")}}
+ + + +

構文

+ +
var newArray = arr.flat([depth]);
+ +

引数

+ +
+
depth {{optional_inline}}
+
ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。既定値は 1 です。
+
+ +

返値

+ +

サブ配列の要素を結合した新しい配列。

+ +

代替手段

+ +

reduce と concat

+ +
const arr = [1, 2, [3, 4]];
+
+// 単一レベルの配列にする
+arr.flat();
+// 次のものと同様
+arr.reduce((acc, val) => acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// または、分割代入の構文を使用して
+const flattened = arr => [].concat(...arr);
+
+ +

reduce + concat + isArray + 再帰

+ +
const arr = [1, 2, [3, 4, [5, 6]]];
+
+// reduce と concat の再帰によって深いレベルを平坦化することができる
+function flatDeep(arr, d = 1) {
+   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
+                : arr.slice();
+};
+
+flatDeep(arr, Infinity);
+// [1, 2, 3, 4, 5, 6]
+
+ +

スタックの使用

+ +
// 再帰を使わずにスタックを使用して平坦化
+// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
+// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while(stack.length) {
+    // pop value from stack
+    const next = stack.pop();
+    if(Array.isArray(next)) {
+      // push back array items, won't modify the original input
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // reverse to restore input order
+  return res.reverse();
+}
+
+const arr = [1, 2, [3, 4, [5, 6]]];
+flatten(arr);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Generator 関数の使用

+ +
function* flatten(array, depth) {
+    if(depth === undefined) {
+      depth = 1;
+    }
+    for(const item of array) {
+        if(Array.isArray(item) && depth > 0) {
+          yield* flatten(item, depth - 1);
+        } else {
+          yield item;
+        }
+    }
+}
+
+const arr = [1, 2, [3, 4, [5, 6]]];
+const flattened = [...flatten(arr, Infinity)];
+// [1, 2, 3, 4, 5, 6]
+
+ + + +

例

+ +

ネストされた配列の平坦化

+ +
const arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+const arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+const arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
+arr4.flat(Infinity);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+ +

平坦化と配列の穴

+ +

flat メソッドは配列内の空要素を削除します。

+ +
const arr5 = [1, 2, , 4, 5];
+arr5.flat();
+// [1, 2, 4, 5]
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.flat', 'Array.prototype.flat')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.flat")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..03e9fb6140 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - JavaScript + - Map + - Method + - Prototype + - Reference + - flatMap +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +
{{JSRef}}
+ +

flatMap() メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは、{{jsxref("Array.prototype.map","map()")}} の後に深さ 1 の {{jsxref("Array.prototype.flat","flat()")}} を行うのと同じですが、これら 2 つのメソッドを別々にコールするよりもわずかに効率的です。

+ + + +

構文

+ +
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}[, thisArg])
+ +

パラメーター

+ +
+
+
currentValue
+
配列で現在処理されている要素です。
+
index{{optional_inline}}
+
配列で現在処理されている要素のインデックスです。
+
array{{optional_inline}}
+
map が呼び出された配列です。
+
+ +
+
callback
+
新しい配列の要素を生成する関数。3 つの引数を受け取ります。
+
thisArg{{optional_inline}}
+
callback を実行するときに this として使用する値です。
+
+ +

戻り値

+ +

各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列です。

+ +

説明

+ +

コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。flatMap メソッドは、map の後に深さ 1 の flat を呼び出すのと同じです。

+ +

代替

+ +

reduce() と concat()

+ +
var arr = [1, 2, 3, 4];
+
+arr.flatMap(x => [x, x * 2]);
+// is equivalent to
+arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
+// [1, 2, 2, 4, 3, 6, 4, 8]
+
+ +

ただし、これは非効率的であり、大きな配列の場合は避けるべきであることに注意してください。処理ごとにガベージコレクションが必要な新しい一時配列を作成し、要素を単に追加するのではなく、現在のアキュムレータ配列から新しい配列に要素をコピーします。

+ + + +

例

+ +

map() と flatMap()

+ +
let arr1 = [1, 2, 3, 4];
+
+arr1.map(x => [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x => [x * 2]);
+// [2, 4, 6, 8]
+
+// only one level is flattened
+arr1.flatMap(x => [[x * 2]]);
+// [[2], [4], [6], [8]]
+
+ +

上記は map を使用することでも実現できますが、ここでは flatMap の使用方法をよりよく示す例を紹介します。

+ +

文章のリストから単語のリストを生成してみましょう。

+ +
let arr1 = ["it's Sunny in", "", "California"];
+
+arr1.map(x => x.split(" "));
+// [["it's","Sunny","in"],[""],["California"]]
+
+arr1.flatMap(x => x.split(" "));
+// ["it's","Sunny","in", "", "California"]
+ +

出力リストの長さは入力リストの長さとは異なる場合があることに注意してください。

+ +

map() のアイテムの追加と削除

+ +

flatMap は、map 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。つまり、常に一対一ではなく、多くのアイテムを多くのアイテムに（入力されたアイテムを個別に扱うことで）マップできるようになります。この意味では、filter の逆のような働きをします。単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。

+ +
// 負の数をすべて取り除き、奇数を偶数と1に分割します。
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =>
+  (n < 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// 期待される出力: [4, 1, 4, 20, 16, 1, 18]
+
+ +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.flatMap")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.html b/files/ja/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..d7328dac1b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,370 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +
{{JSRef}}
+ +

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

+ +
{{EmbedInteractiveExample("pages/js/array-foreach.html")}}
+ + + +

構文

+ +
arr.forEach(callback(currentValue[, index[, array]]) {
+  // execute something
+}[, thisArg]);
+ +

引数

+ +
+
callback
+
各要素に対して実行するコールバック関数で、1 つから 3 つの引数を受け付けます。
+
+
+
currentValue
+
現在処理されている配列の要素です。
+
index {{optional_inline}}
+
配列内の currentValue の添字です。
+
array {{optional_inline}}
+
forEach() が呼び出されている配列です。
+
+
+
thisArg {{optional_inline}}
+
callback 内で this として使用する値です。
+
+ +

返値

+ +

undefined です。

+ +

解説

+ +

forEach() は、与えられた関数 callback を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。インデックスプロパティが削除されていたり、初期化されていなかったりした場合は呼び出されません。(疎らな配列については、下記の例を参照。)

+ +

callback は次の 3 つの引数で呼び出されます。

+ +
    +
  1. 要素の値
    2. +
  2. 要素のインデックス
    3. +
  3. 走査されている配列
    4. +
+ +

forEach() に thisArg 引数が与えられると、callback の呼び出し時にそのオブジェクトが thisArg として使用されます。callback によって究極に管理される this の値は、関数から見える this を特定する一般規則に従います。

+ +

forEach() によって処理される配列要素の範囲は、callback が最初に呼び出される前に設定されます。forEach() の呼び出しが開始された後に追加された配列要素に対しては、callback は実行されません。既存の配列要素が変更または削除された場合、callback に渡される値は forEach() がそれらを参照した時点での値になります。削除された配列要素を参照することはありません。既に参照された配列要素がイテレーションの間 (e.g. {{jsxref("Array.prototype.shift()", "shift()")}}を使用して) に削除された場合、後の要素は飛ばされます。(下記の例を参照してください。)

+ +

forEach() は配列の各要素に対して callback 関数を一度ずつ実行します。{{jsxref("Array.prototype.map()", "map()")}} や {{jsxref("Array.prototype.reduce()", "reduce()")}} と異なり、返値は常に {{jsxref("undefined")}} であり、チェーンできません。チェーンの最後に副作用を生じさせるのが典型的な使用法です。

+ +

forEach() は呼び出された配列を変化させません。(ただし callback が変化させる可能性があります)

+ +
+

例外を発生する以外の方法で、forEach() ループを止めることはできません。ループ中に中断する必要がある場合、forEach() メソッドは適切な方法ではありません。

+ +

早期終了を行うには下記のような手段が適しています。

+ + + +

他の Array のメソッドである {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}} は、配列の要素を検査する際、truthy の値を返すことで以降の繰り返しが必要であるかどうかを決めます。

+
+ +
+

forEach は同期関数を期待する

+forEach はプロミスを待ちません。forEach のコールバックとしてプロミス (または非同期関数) を使用する場合は、その意味合いを理解しておくようにしてください。 + +
コード例
+ +
let ratings = [5, 4, 5];
+let sum = 0;
+
+let sumFunction = async function (a, b)
+{
+  return a + b
+}
+
+ratings.forEach(async function(rating) {
+  sum = await sumFunction(sum, rating)
+})
+
+console.log(sum)
+// 本来期待される出力: 14
+// 実際の出力: 0
+
+
+ + +

ポリフィル

+ +

forEach() は ECMA-262 規格の第 5 版で追加されたもので、この規格のすべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に以下のコードを挿入して、ネイティブにサポートされていない実装でも forEach を使用できるようにします。

+ +

このアルゴリズムは、{{jsxref("Object")}} と {{jsxref("TypeError")}} が元の値を持ち、fun.call が {{jsxref("Function.prototype.call()")}} の元の値に評価されると仮定すると、ECMA-262 規格の第 5 版で指定されているものと全く同じです。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
+
+if (!Array.prototype['forEach']) {
+
+  Array.prototype.forEach = function(callback, thisArg) {
+
+    if (this == null) { throw new TypeError('Array.prototype.forEach called on null or undefined'); }
+
+    var T, k;
+    // 1. Let O be the result of calling toObject() passing the
+    // |this| value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get() internal
+    // method of O with the argument "length".
+    // 3. Let len be toUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. If isCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function'); }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let
+    // T be undefined.
+    if (arguments.length > 1) { T = thisArg; }
+
+    // 6. Let k be 0
+    k = 0;
+
+    // 7. Repeat, while k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //    This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty
+      //    internal method of O with argument Pk.
+      //    This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        // method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Call the Call internal method of callback with T as
+        // the this value and argument list containing kValue, k, and O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+    // 8. return undefined
+  };
+}
+ + + + + + +

例

+ +

初期化されていない値については何もしない (疎らな配列)

+ +
const arraySparse = [1,3,,7]
+let numCallbackRuns = 0
+
+arraySparse.forEach((element) => {
+  console.log(element)
+  numCallbackRuns++
+})
+
+console.log("numCallbackRuns: ", numCallbackRuns)
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// 備考: 見ての通り、存在しない 3 から 7 までの値では、コールバック関数が呼び出されません。
+ +

for ループから forEach への変換

+ +
const items = ['item1', 'item2', 'item3']
+const copyItems = []
+
+// before
+for (let i = 0; i < items.length; i++) {
+  copyItems.push(items[i])
+}
+
+// after
+items.forEach(function(item){
+  copyItems.push(item)
+})
+
+ +

配列の内容の出力

+ +
+

メモ: 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("Console/table", "console.table()")}} を使用することができます。

+ +

以下の例では同じことを forEach() を使用して行う他の方法を説明しています。

+
+ +

次のコードは配列の要素ごとに、コンソールに 1 行ずつ要素の内容を出力します。

+ +
function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element)
+}
+
+// 添字が 2 のものは、配列内のその位置にアイテムが存在しない
+// ため、飛ばされていることに注意してください。
+[2, 5, , 9].forEach(logArrayElements)
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+
+ +

thisArg の使用

+ +

以下の (不自然な) 例は、配列の中の各項目からオブジェクトのプロパティを更新します。

+ +
function Counter() {
+  this.sum = 0
+  this.count = 0
+}
+Counter.prototype.add = function(array) {
+  array.forEach((entry) => {
+    this.sum += entry
+    ++this.count
+  }, this)
+  // ^---- Note
+}
+
+const obj = new Counter()
+obj.add([2, 5, 9])
+obj.count
+// 3
+obj.sum
+// 16
+
+ +

thisArg 引数 (this) が forEach() に提供されているため、callback の呼び出しのたびにこれが渡されます。コールバックはこれを this の値として使用します。

+ +
+

注: コールバック関数の受け渡しにアロー関数式を使用した場合、thisArg 引数は、アロー関数が文法的に {{jsxref("Operators/this", "this")}} の値に結び付けられているため省略可能です。

+
+ +

オブジェクトをコピーする関数

+ +

次のコードは与えられたオブジェクトのコピーを生成します。

+ +

オブジェクトのコピーを生成するには他にもいくつか方法があります。次のものは一つの方法であり、Array.prototype.forEach() が ECMAScript 5 の Object.* メタプロパティ関数を使用することでどのように動作するかを説明するために示しているものです。

+ +
function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj))
+  const propNames = Object.getOwnPropertyNames(obj)
+
+  propNames.forEach((name) => {
+    const desc = Object.getOwnPropertyDescriptor(obj, name)
+    Object.defineProperty(copy, name, desc)
+  })
+
+  return copy
+}
+
+const obj1 = { a: 1, b: 2 }
+const obj2 = copy(obj1) // obj2 looks like obj1 now
+
+ +

配列が繰り返しの間に変更され、他の要素が飛ばされる場合

+ +

次の例では one, two, four をログ出力します。

+ +

値 two を持つ項目に達した時、配列全体の最初の項目はシフトして外れ、すべての残りの項目が 1 つ上の位置に繰り上がります。four が配列の以前の位置に来るため、three が飛ばされます。

+ +

forEach() は繰り返しの前に配列のコピーを生成しません。

+ +
let words = ['one', 'two', 'three', 'four']
+words.forEach((word) => {
+  console.log(word)
+  if (word === 'two') {
+    words.shift()
+  }
+})
+// one
+// two
+// four
+
+ +

配列の平板化

+ +

次の例は学習目的だけのものです。内蔵メソッドを使用して配列を平板化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます (ES2019 の一部となる予定で、一部のブラウザーではすでに実装済み)。

+ +
function flatten(arr) {
+  const result = []
+
+  arr.forEach((i) => {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  })
+
+  return result
+}
+
+// Usage
+const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.forEach")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.html b/files/ja/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..aab6b03cf7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,307 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +
{{JSRef}}
+ +

Array.from() メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい Array インスタンスを生成します。

+ +
{{EmbedInteractiveExample("pages/js/array-from.html")}}
+ + + +

構文

+ +
Array.from(arrayLike[, mapFn[, thisArg]])
+
+ +

引数

+ +
+
arrayLike
+
配列に変換する配列のようなオブジェクトまたは反復可能オブジェクト
+
mapFn {{Optional_inline}}
+
配列のすべての要素に対して呼び出される Map 関数。
+
thisArg {{Optional_inline}}
+
mapFn を実行する時に this として使用する値。
+
+ +

返値

+ +

新しい {{jsxref("Array")}} インスタンス。

+ +

解説

+ +

Array.from() は、以下のものから Array を生成します。

+ + + +

Array.from() は任意の引数 mapFn を持ちます。これは、作成した配列 (もしくは、サブクラスオブジェクト) のすべての要素に対して {{jsxref("Array.prototype.map", "map")}} 関数を実行できます。

+ +

より明確に言うと、中間配列を生成しないことを除いて、Array.from(obj, mapFn, thisArg) は Array.from(obj).map(mapFn, thisArg) と同じ結果です。中間配列は、適切な型に合うように丸められた値を持つ必要があるため、typed arrays のような配列サブクラスにとっては特に重要です。

+ +
これは、型付き配列のような特定の配列のサブクラスでは特に重要です。なぜなら、中間配列の値は適切な型に収まるように切り捨てられている必要があるからです。
+ +

from() メソッドの length プロパティは 1 です。

+ +

ES2015 では、class 構文により定義済みクラスとユーザー定義クラスの両方をサブクラス化することができます。結果として、Array.from のような静的メソッドは Array のサブクラスに「継承」され、Array ではなくサブクラスのインスタンスを生成します。

+ +

例

+ +

String からの配列の生成

+ +
Array.from('foo');
+// [ "f", "o", "o" ]
+ +

Set からの配列の生成

+ +
const set = new Set(['foo', 'bar', 'baz', 'foo']);
+Array.from(set);
+// [ "foo", "bar", "baz" ]
+ +

Map からの配列の生成

+ +
const map = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(map);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+
+ +

配列のようなオブジェクト (引数) からの配列の生成

+ +
function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [ 1, 2, 3 ]
+ +

アロー関数と Array.from の使用

+ +
// 要素を操作するためのマップ関数として
+// アロー関数を使用
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// 連番の生成
+// 配列はそれぞれの場所が `undefined` で初期化されるため、
+// 以下の `v` の値は `undefined` になる
+Array.from({length: 5}, (v, i) => i);
+// [0, 1, 2, 3, 4]
+
+ +

連番の生成 (範囲指定)

+ +
// 連番の生成関数 (Clojure や PHP などでよく "range" と呼ばれる)
+const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
+
+// 0..4 の範囲の数値を生成
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+//  1..10 の範囲の数値を 2 ごとに生成
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Array.from を使用して順番通りになるようアルファベットを生成
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書Initial publication
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}ECMAScript 2015
+ +

ブラウザー実装状況

+ + + +

{{Compat("javascript.builtins.Array.from")}}

+ +

ポリフィル

+ +

Array.from は ECMA-262 標準の第 6 版に追加されました。そのため他の標準の実装には存在しない可能性があります。

+ +

次のコードをスクリプトの先頭に記述する事により、Array.from がネイティブでサポートされていない環境でもこれを使用できるようになります。

+ +
+

ポリフィルの注意: これは、ECMA-262 第 6 版で定められたアルゴリズムと全く同じです。Object と TypeError はそれぞれオリジナルの値を持ち、callback.call は {{jsxref("Function.prototype.call")}} のオリジナルの値として評価されます。

+ +

また、真の iterables ポリフィルできないので、この実装は ECMA-262 第 6 版で定義されている一般的な iterables をサポートしません。

+
+ +
// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+    Array.from = (function () {
+        var symbolIterator;
+        try {
+            symbolIterator = Symbol.iterator
+                ? Symbol.iterator
+                : 'Symbol(Symbol.iterator)';
+        } catch (e) {
+            symbolIterator = 'Symbol(Symbol.iterator)';
+        }
+
+        var toStr = Object.prototype.toString;
+        var isCallable = function (fn) {
+            return (
+                typeof fn === 'function' ||
+                toStr.call(fn) === '[object Function]'
+            );
+        };
+        var toInteger = function (value) {
+            var number = Number(value);
+            if (isNaN(number)) return 0;
+            if (number === 0 || !isFinite(number)) return number;
+            return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+        };
+        var maxSafeInteger = Math.pow(2, 53) - 1;
+        var toLength = function (value) {
+            var len = toInteger(value);
+            return Math.min(Math.max(len, 0), maxSafeInteger);
+        };
+
+        var setGetItemHandler = function setGetItemHandler(isIterator, items) {
+            var iterator = isIterator && items[symbolIterator]();
+            return function getItem(k) {
+                return isIterator ? iterator.next() : items[k];
+            };
+        };
+
+        var getArray = function getArray(
+            T,
+            A,
+            len,
+            getItem,
+            isIterator,
+            mapFn
+        ) {
+            // 16. Let k be 0.
+            var k = 0;
+
+            // 17. Repeat, while k < len… or while iterator is done (also steps a - h)
+            while (k < len || isIterator) {
+                var item = getItem(k);
+                var kValue = isIterator ? item.value : item;
+
+                if (isIterator && item.done) {
+                    return A;
+                } else {
+                    if (mapFn) {
+                        A[k] =
+                            typeof T === 'undefined'
+                                ? mapFn(kValue, k)
+                                : mapFn.call(T, kValue, k);
+                    } else {
+                        A[k] = kValue;
+                    }
+                }
+                k += 1;
+            }
+
+            if (isIterator) {
+                throw new TypeError(
+                    'Array.from: provided arrayLike or iterator has length more then 2 ** 52 - 1'
+                );
+            } else {
+                A.length = len;
+            }
+
+            return A;
+        };
+
+        // The length property of the from method is 1.
+        return function from(arrayLikeOrIterator /*, mapFn, thisArg */) {
+            // 1. Let C be the this value.
+            var C = this;
+
+            // 2. Let items be ToObject(arrayLikeOrIterator).
+            var items = Object(arrayLikeOrIterator);
+            var isIterator = isCallable(items[symbolIterator]);
+
+            // 3. ReturnIfAbrupt(items).
+            if (arrayLikeOrIterator == null && !isIterator) {
+                throw new TypeError(
+                    'Array.from requires an array-like object or iterator - not null or undefined'
+                );
+            }
+
+            // 4. If mapfn is undefined, then let mapping be false.
+            var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+            var T;
+            if (typeof mapFn !== 'undefined') {
+                // 5. else
+                // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+                if (!isCallable(mapFn)) {
+                    throw new TypeError(
+                        'Array.from: when provided, the second argument must be a function'
+                    );
+                }
+
+                // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+                if (arguments.length > 2) {
+                    T = arguments[2];
+                }
+            }
+
+            // 10. Let lenValue be Get(items, "length").
+            // 11. Let len be ToLength(lenValue).
+            var len = toLength(items.length);
+
+            // 13. If IsConstructor(C) is true, then
+            // 13. a. Let A be the result of calling the [[Construct]] internal method
+            // of C with an argument list containing the single item len.
+            // 14. a. Else, Let A be ArrayCreate(len).
+            var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+            return getArray(
+                T,
+                A,
+                len,
+                setGetItemHandler(isIterator, items),
+                isIterator,
+                mapFn
+            );
+        };
+    })();
+}
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/includes/index.html b/files/ja/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..1354404302 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,137 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - inArray + - in_array + - polyfill + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef}}
+ +

includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。

+ +
{{EmbedInteractiveExample("pages/js/array-includes.html")}}
+ + + +

構文

+ +
arr.includes(valueToFind[, fromIndex])
+
+ +

引数

+ +
+
valueToFind
+
+

検索する値です。

+ +
+

メモ: 文字列や文字を比較するとき、includes() は大文字と小文字を区別します。

+
+
+
fromIndex {{optional_inline}}
+
この配列内で valueToFind を探し始める位置です。
+
検索される最初の文字は、fromIndex が正の値の場合は、fromIndex で見つかり、fromIndex が負の数の場合は (fromIndex の{{interwiki("wikipedia", "絶対値")}}だけ配列の末尾から文字数を戻った位置が検索開始地点となり)、fromIndex または arr.length + fromIndex で見つかります。
+
既定値は 0 です。
+
+ +

返値

+ +

{{jsxref("Boolean")}} で、true は valueToFind の値が配列内 (または、fromIndex が指定された場合はそれで示された配列の部分) から見つかった場合です。

+ +

ゼロの値はすべて、符号にかかわらず等しいとみなされます (つまり、-0 は 0 と +0 の両方に等しいとみなされます) が、false は 0 と同じとはみなされません。

+ +
+

注: 技術的に言えば、includes() は sameValueZero アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。

+
+ +

例

+ +
[1, 2, 3].includes(2)      // true
+[1, 2, 3].includes(4)      // false
+[1, 2, 3].includes(3, 3)   // false
+[1, 2, 3].includes(3, -1)  // true
+[1, 2, NaN].includes(NaN)  // true
+
+ +

fromIndex が配列の長さと同じか大きい場合

+ +

fromIndex が配列の長さと同じか大きい場合は配列を検索せずに false を返します。

+ +
let arr = ['a', 'b', 'c']
+
+arr.includes('c', 3)    // false
+arr.includes('c', 100)  // false
+
+ +

計算値のインデックスが 0 より小さい場合

+ +

fromIndex が負の値である場合、計算値のインデックスは配列内で valueToFind の円策を開始する位置として使用するよう計算されます。計算値のインデックスが -1 * arr.length 以下の場合は、配列全体が検索されます。

+ +
// 配列の長さは 3
+// fromIndex は -100
+// 補正されたインデックスは 3 + (-100) = -97
+
+let arr = ['a', 'b', 'c']
+
+arr.includes('a', -100) // true
+arr.includes('b', -100) // true
+arr.includes('c', -100) // true
+arr.includes('a', -2)   // false
+
+ +

ジェネリックメソッドとして使用される includes()

+ +

includes() メソッドは意図的にジェネリックになっています。this が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト (例えば配列風オブジェクト) にも適用することができます。

+ +

以下の例は、includes() メソッドが関数の arguments オブジェクトに対して使用される様子を示しています。

+ +
(function() {
+  console.log(Array.prototype.includes.call(arguments, 'a'))  // true
+  console.log(Array.prototype.includes.call(arguments, 'd'))  // false
+})('a','b','c')
+ + + +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.includes")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/index.html b/files/ja/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..61e36c1e94 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,465 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Class + - Example + - Global Objects + - JavaScript + - Reference + - クラス + - グローバルオブジェクト + - 配列 +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

JavaScript の Array クラスはグローバルオブジェクトで、高水準、リスト風のオブジェクトである配列の構築に使用されます。

+ +

解説

+ +

配列はリストのようなオブジェクトであり、そのプロトタイプは配列に対して横断的な操作や変更を行うメソッドを持っています。 JavaScript の配列は、要素数も要素の型も固定されていません。配列の長さは常に可変であり、データを連続しない位置に格納できるため、 JavaScript の配列は密であることが保証されていません。これはプログラマーの使い方次第です。一般に、これらは便利な特性です。しかし、もし特定の用途で望ましくないのであれば、型付き配列を使用したほうが良いかもしれません。

+ +

配列は (連想配列のように) 要素の添字に文字列を使うことはできず、整数を使う必要があります。整数以外によってブラケット構文 (またはドット構文) を使用して設定やアクセスを行うと、配列のリスト自身の要素を設定したり取得したりすることはできませんが、その配列のオブジェクトプロパティ集合に関連付けられた変数に設定またはアクセスすることになります。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の走査や変更の操作を名前付きプロパティに適用することはできません。

+ +

よくある操作

+ +

配列を作成する

+ +
let fruits = ['りんご', 'バナナ']
+
+console.log(fruits.length)
+// 2
+
+ +

位置を使用して配列にアクセスする

+ +
let first = fruits[0]
+// りんご
+
+let last = fruits[fruits.length - 1]
+// バナナ
+
+ +

配列のループ処理

+ +
fruits.forEach(function(item, index, array) {
+  console.log(item, index)
+})
+// りんご 0
+// バナナ 1
+
+ +

配列の末尾に要素を追加する

+ +
let newLength = fruits.push('みかん')
+// ["りんご", "バナナ", "みかん"]
+
+ +

配列の末尾の要素を削除する

+ +
let last = fruits.pop() // 配列の末尾の要素 "みかん" を削除
+// ["りんご", "バナナ"]
+
+ +

配列の先頭の要素を削除する

+ +
let first = fruits.shift() // 配列の先頭の要素"りんご" を削除
+// ["バナナ"]
+
+ +

配列の先頭に要素を追加する

+ +
let newLength = fruits.unshift('いちご') // 配列の先頭に追加
+// ["いちご", "バナナ"]
+
+ +

要素の添字を取得する

+ +
fruits.push('マンゴー')
+// ["いちご", "バナナ", "マンゴー"]
+
+let pos = fruits.indexOf('バナナ')
+// 1
+
+ +

位置を指定して要素を削除する

+ +
let removedItem = fruits.splice(pos, 1) // 要素を削除する方法
+
+// ["いちご", "マンゴー"]
+ +

位置から複数の要素を削除する

+ +
let vegetables = ['キャベツ', 'かぶ', '大根', 'にんじん']
+console.log(vegetables)
+// ["キャベツ", "かぶ", "大根", "にんじん"]
+
+let pos = 1
+let n = 2
+
+let removedItems = vegetables.splice(pos, n)
+// 複数の要素を削除するには、 n で削除する要素数を定義します
+// 指定位置（pos）以降から n 個分の要素が削除されます
+
+console.log(vegetables)
+// ["Cabbage", "Carrot"] (元の配列が変化)
+
+console.log(removedItems)
+// ["Turnip", "Radish"]
+
+ +

配列をコピーする

+ +
let shallowCopy = fruits.slice() // 配列のコピーを作成できます
+// ["いちご", "マンゴー"]
+
+ +

配列要素へのアクセス

+ +

JavaScript の配列の添字は 0 から始まるので、配列の最初の要素は添字 0 の位置にあります。そして、最後の要素のインデックスは {{jsxref("Array.length", "length")}} プロパティの値から 1 を引いた値になります。

+ +

不正なインデックス番号を使った場合は undefined を返します。

+ +
let arr = ['最初の要素', '2 番目の要素', '最後の要素']
+console.log(arr[0])              // ログ : "最初の要素"
+console.log(arr[1])              // ログ : "2 番目の要素"
+console.log(arr[arr.length - 1]) // ログ : "最後の要素"
+
+ +

toString が一つのプロパティであるのと同様に (ただし厳密には toString() はメソッドですが)、配列における配列要素はオブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が妥当でないため、構文エラーが発生します。

+ +
console.log(arr.0) // 構文エラー
+
+ +

これは、JavaScript の配列とそのプロパティに限った話ではありません。数字から始まるプロパティは、ドット演算子を用いて参照できないため、ブラケット記法を用いる必要があります。

+ +

例えば 3d というプロパティを持つオブジェクトがあった場合は、ドット記法ではなくブラケット記法を用いて参照しなければなりません。

+ +
let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(years.0)   // 構文エラー
+console.log(years[0])  // 正しく動作
+
+ +
renderer.3d.setTexture(model, 'character.png')     // 構文エラー
+renderer['3d'].setTexture(model, 'character.png')  // 正しく動作
+
+ +

3d の例では、'3d' は引用符で括らなければならないことに注意してください。 JavaScript 配列の添字も同様に引用符でくくることができますが (例えば years[2] でなく years['2'])、そうする必要はないでしょう。

+ +

years[2] の 2 は最終的に、JavaScript エンジンが内部的に toString メソッドで型変換することで文字列にされます。これは '2' と '02' が years オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は true がログ出力されます。

+ +
console.log(years['2'] != years['02'])
+
+ +

length と数値プロパティとの関係

+ +

JavaScript の配列の {{jsxref("Array.length", "length")}} プロパティと数値プロパティは関連しています。

+ +

配列の一部の組込みメソッド (例えば {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, など) は、配列の {{jsxref("Array.length", "length")}} プロパティの値はメソッドの呼び出し時の値を考慮します。

+ +

他にも (例えば {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, 等)、結果として配列の {{jsxref("Array.length", "length")}} プロパティを更新するメソッドがあります。

+ +
var fruits = []
+fruits.push('バナナ', 'りんご', 'もも')
+
+console.log(fruits.length) // 3
+
+ +

JavaScript の配列に、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の {{jsxref("Array.length", "length")}} プロパティを更新します。

+ +
fruits[5] = 'マンゴー'
+console.log(fruits[5])            // 'マンゴー'
+console.log(Object.keys(fruits))  // ['0', '1', '2', '5']
+console.log(fruits.length)        // 6
+
+ +

{{jsxref("Array.length", "length")}} を増加させてみます。

+ +
fruits.length = 10
+console.log(fruits)              // ['バナナ', 'りんご', 'もも', undefined, 'マンゴー', <5 empty items>]
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length)       // 10
+console.log(fruits[8])           // undefined
+
+ +

一方、 {{jsxref("Array.length", "length")}} プロパティの数を減らすと、要素が削除されます。

+ +
fruits.length = 2
+console.log(Object.keys(fruits)) // ['0', '1']
+console.log(fruits.length)       // 2
+
+ +

これらについては {{jsxref("Array.length")}} のページで詳しく解説します。

+ +

match の結果を利用して配列を作成

+ +

正規表現 ({{jsxref("RegExp")}}) と文字列の一致の結果から配列を生成することができます。この配列には、プロパティと、一致した者に関する情報を提供する要素を持ちます。このような配列は {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}, {{jsxref("String.replace()")}} から返されます。

+ +

これらのプロパティと要素を理解しやすくするために、以下の例と表を参照してください。

+ +
/ 1文字の d と、続く1文字以上の b と、続く1文字の d に一致します
+// 一致した b およびそれに続く d を記憶します
+// 大文字小文字は区別しません
+
+const myRe = /d(b+)(d)/i
+const myArray = myRe.exec('cdbBdbsbz')
+
+ +

この一致から返されるプロパティと要素は次の通りです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティまたは要素説明例
input
+ {{ReadOnlyInline}}		正規表現が一致の文字列を反映する読み取り専用プロパティです。"cdbBdbsbz"
index
+ {{ReadOnlyInline}}		文字列中で一致場所を、0 から始まる位置で示します。1
[0]
+ {{ReadOnlyInline}}		最後にマッチした文字列です。"dbBd"
[1], ...[n]
+ {{ReadOnlyInline}}		正規表現に含まれる場合、括弧で囲まれた一致た部分文字列を指定する読み取り専用の要素です。括弧で囲まれた部分文字列の数は無制限です。[1]: "bB"
+ [2]: "d"
+ +

コンストラクター

+ +
+
{{jsxref("Array/Array", "Array()")}}
+
新しい Array オブジェクトを生成します。
+
+ +

静的プロパティ

+ +
+
{{jsxref("Array/@@species", "get Array[@@species]")}}
+
コンストラクター関数。派生オブジェクトを生成する時に使われます。
+
+ +

静的メソッド

+ +
+
{{jsxref("Array.from()")}}
+
配列風 (array-like) または反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。
+
{{jsxref("Array.isArray()")}}
+
配列であれば true を、配列でなければ false を返します。
+
{{jsxref("Array.of()")}}
+
可変個の引数から、引数の個数や型に関わらず、新しい Array インスタンスを生成します。
+
+ +

インスタンスプロパティ

+ +
+
{{jsxref("Array.prototype.length")}}
+
配列内の要素数を反映します。
+
{{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}
+
with バインディングのスコープから除外されるプロパティ名を保持するシンボル。
+
+ +

インスタンスメソッド

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
この配列に他の配列や値を結合して新しい配列を返します。
+
{{jsxref("Array.prototype.copyWithin()")}}
+
配列内で配列内の連続した要素をコピーします。
+
{{jsxref("Array.prototype.entries()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。
+
{{jsxref("Array.prototype.every()")}}
+
指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.fill()")}}
+
配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
+
{{jsxref("Array.prototype.filter()")}}
+
指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.find()")}}
+
指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。
+
{{jsxref("Array.prototype.findIndex()")}}
+
指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。
+
{{jsxref("Array.prototype.forEach()")}}
+
配列中のそれぞれの要素について関数を呼び出します。
+
{{jsxref("Array.prototype.includes()")}}
+
この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。
+
{{jsxref("Array.prototype.indexOf()")}}
+
指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.join()")}}
+
配列のすべての要素を結合した文字列を返します。
+
{{jsxref("Array.prototype.keys()")}}
+
新しい Array Iterator を返します。このオブジェクトは配列中の各添字のキーを保持します。
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.map()")}}
+
配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.pop()")}}
+
配列から最後の要素を取り除き、返値として返します。
+
{{jsxref("Array.prototype.push()")}}
+
配列の最後に 1 個以上の要素を追加し、新しい配列の length を返します。
+
{{jsxref("Array.prototype.reduce()")}}
+
アキュムレーターと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.reduceRight()")}}
+
アキュムレーターと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.reverse()")}}
+
配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。
+
{{jsxref("Array.prototype.shift()")}}
+
配列から最初の要素を取り除き、その要素を返します。
+
{{jsxref("Array.prototype.slice()")}}
+
配列の一部を取り出して新しい配列として返します。
+
{{jsxref("Array.prototype.some()")}}
+
指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.sort()")}}
+
配列内で要素を整列し、配列を返します。
+
{{jsxref("Array.prototype.splice()")}}
+
配列に対して複数の要素を追加したり取り除いたりします。
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きします。
+
{{jsxref("Array.prototype.toString()")}}
+
配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.unshift()")}}
+
配列の最初に 1 個以上の要素を追加し、配列の変更後の length を返します。
+
{{jsxref("Array.prototype.values()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。
+
+ +

例

+ +

配列の生成

+ +

次の例では、 msgArray を長さ 0 で生成し、 msgArray[0] と msgArray[99] に値を設定、その後配列の length が 100 である事を確認しています。

+ +
let msgArray = []
+msgArray[0] = 'Hello'
+msgArray[99] = 'world'
+
+if (msgArray.length === 100) {
+  console.log("配列の length は 100 です。")
+}
+
+ +

2 次元配列を生成する

+ +

以下では、文字列の 2 次元配列としてチェスボードを生成しています。最初の動きは 'p' を board[6][4] から board[4][4] にコピーすることでなされます。古い位置 [6][4] は空白にされます。

+ +
let board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ]
+
+console.log(board.join('\n') + '\n\n')
+
+// キングの前のポーンを 2 つ前へ移動
+board[4][4] = board[6][4]
+board[6][4] = ' '
+console.log(board.join('\n'))
+
+ +

出力を以下に示します。

+ +
R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+
+ +

配列を使って値のセットを表にする

+ +
values = []
+for (let x = 0; x < 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+}
+console.table(values)
+ +

結果は次のようになります。

+ +
0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162
+ +

(最初の列は要素の添字です)

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書初回発行
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}ECMAScript 1
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.Array")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/index/index.html b/files/ja/web/javascript/reference/global_objects/array/index/index.html new file mode 100644 index 0000000000..1d2e7a4797 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/index/index.html @@ -0,0 +1,22 @@ +--- +title: index +slug: Web/JavaScript/Reference/Global_Objects/Array/index +--- +

概要

+

正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。

+ + + + + + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョンJavaScript 1.2
diff --git a/files/ja/web/javascript/reference/global_objects/array/indexof/index.html b/files/ja/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..e2c0e4106a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,215 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - indexof + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +
{{JSRef}}
+ +

indexOf() メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-indexof.html")}}
+ + + +

構文

+ +
arr.indexOf(searchElement[, fromIndex])
+ +

引数

+ +
+
searchElement
+
検索する配列要素です。
+
fromIndex {{optional_inline}}
+
検索を始める位置です。もしこの位置が配列の長さ以上の場合は、-1 が返され、配列は検索されません。負の数の場合、これは配列の末尾からのオフセットとみなされます。なお、この位置が負の数であっても、配列は前から後ろに検索されることに注意してください。指定された位置が 0 であれば、配列全体が検索されます。既定値は 0 (配列全体を検索) です。
+
+ +

返値

+ +

見つかった最初の配列要素の添字です。見つからなかった場合は -1 です。

+ +

解説

+ +

indexOf() は searchElement と配列の要素を 厳密等価 (三重イコール演算子 === で使われるのと同じ方法) を使って比較します。

+ +
+

メモ: String メソッドについては、{{jsxref("String.prototype.indexOf()")}} を参照してください。

+
+ +

例

+ +

indexOf() の使用

+ +

以下の例は indexOf() を使って、配列中のある値の位置を探しています。

+ +
var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+
+ +

ある要素の存在をすべて見つける

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+
+ +

要素が配列内に存在するかどうかを調べ、配列を更新する

+ +
function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('New veggies collection is : ' + veggies);
+    } else if (veggies.indexOf(veggie) > -1) {
+        console.log(veggie + ' already exists in the veggies collection.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach already exists in the veggies collection.
+
+ +

ポリフィル

+ +

indexOf() メソッドは ECMA-262 第 5 版で追加されたものであり、すべてのブラウザーで動作するわけではありません。次のコードをスクリプトの先頭に追加することにより、indexOf() がネイティブでサポートされていない環境でも、これが使用可能となります。これは ECMA-262 第 5 版で定められたアルゴリズムと完全に同じものです。{{jsxref("Global_Objects/TypeError", "TypeError")}} と {{jsxref("Math.abs()")}} がオリジナルの値を持つ事を仮定しています。

+ +
// This version tries to optimize by only checking for "in" when looking for undefined and
+// skipping the definitely fruitless NaN search. Other parts are merely cosmetic conciseness.
+// Whether it is actually faster remains to be seen.
+if (!Array.prototype.indexOf)
+  Array.prototype.indexOf = (function(Object, max, min) {
+    "use strict"
+    return function indexOf(member, fromIndex) {
+      if (this === null || this === undefined)
+        throw TypeError("Array.prototype.indexOf called on null or undefined")
+
+      var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len)
+      if (i < 0) i = max(0, Len + i)
+      else if (i >= Len) return -1
+
+      if (member === void 0) {        // undefined
+        for (; i !== Len; ++i) if (that[i] === void 0 && i in that) return i
+      } else if (member !== member) { // NaN
+        return -1 // Since NaN !== NaN, it will never be found. Fast-path it.
+      } else                          // all else
+        for (; i !== Len; ++i) if (that[i] === member) return i
+
+      return -1 // if the value was not found, then return -1
+    }
+  })(Object, Math.max, Math.min)
+
+ +

ですが、ECMA 標準で定義された技術的な部分に興味があり、パフォーマンスや簡潔さを意識しない場合、以下のような、より説明的なポリフィルが役立つことがあるでしょう。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Reference: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+    "use strict";
+    var k;
+
+    // 1. ToObject に this 値を引数として渡した結果を
+    // o とします。
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. "length" を引数として o の Get 内部メソッドを呼んだ結果を
+    //    lenValue とします。
+    // 3. ToUint32(lenValue) を len とします。
+    var len = o.length >>> 0;
+
+    // 4. len が 0 の場合、-1 を返します。
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. n を fromIndex 引数が存在する場合は
+    //   ToInteger(fromIndex)、存在しない場合は 0 とします。
+    var n = fromIndex | 0;
+
+    // 6. n が len 以上の場合 -1 を返します。
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. n が 0 以上の場合 k を n とします。
+    // 8. n が 0 未満の場合 k を len - abs(n) とします。
+    //    k が 0 未満の場合 k を 0 とします。
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. k が len 未満の間は以下を繰り返します。
+    for (; k < len; k++) {
+      // a. Pk を ToString(k) とします。
+      //   これは暗黙的に in 演算子の左辺値です。
+      // b. kPresent を Pk を引数として o の
+      //    HasProperty 内部メソッドを呼んだ結果とします。
+      //   このステップは c と組み合わせることができます。
+      // c. kPresent が真の場合
+      //    i.  elementK を ToString(k) を引数として
+      //        o の [[Get]] 内部メソッドを呼んだ結果とします。
+      //   ii.  same を searchElement と elementK で
+      //        厳密な同一比較アルゴリズムを行った結果とします。
+      //  iii.  same が真の場合 k を返します。
+      if (k in o && o[k] === searchElement)
+        return k;
+    }
+    return -1;
+  };
+}
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.indexOf")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/input/index.html b/files/ja/web/javascript/reference/global_objects/array/input/index.html new file mode 100644 index 0000000000..166ed28656 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/input/index.html @@ -0,0 +1,25 @@ +--- +title: input +slug: Web/JavaScript/Reference/Global_Objects/Array/input +--- +

+

{{ 英語版章題("Summary") }} +

+

概要

+

正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 +

+ + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョン:JavaScript 1.2, NES 3.0
+
+
+{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Array/input", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/input", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Array/input" } ) }} diff --git a/files/ja/web/javascript/reference/global_objects/array/isarray/index.html b/files/ja/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..baf6a3d87a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,120 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

Array.isArray() メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。

+ +
Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false
+
+ +

構文

+ +
Array.isArray(value)
+ +

引数

+ +
+
value
+
チェックするオブジェクト。
+
+ +

返値

+ +

値が {{jsxref("Array")}} の場合は true です。そうでなければ  false を返します。

+ +

解説

+ +

値が {{jsxref("Array")}} の場合は true が返ります。それ以外の場合は false が返ります。

+ +

詳しくは、“Determining with absolute accuracy whether or not a JavaScript object is an array” を参照してください。{{jsxref("TypedArray")}} のインスタンスが与えられると、常に false が返されます。

+ + +

Polyfill

+ +

次のコードを他のコードよりも前に記述する事により、ネイティブで実装されていなくても、Array.isArray() が使用可能になります。

+ +
if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+
+ + +

例

+ +
// 以下の呼び出しはすべて true を返します
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// あまり知られていないものの Array.prototype は配列です
+Array.isArray(Array.prototype);
+
+// 以下の呼び出しはすべて false を返します
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+
+ +

instanceof と isArray

+ +

Array のインスタンスをチェックする際、Array.isArray は iframes で動作するので、instanceof よりも推奨されます。

+ +
var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// 配列を正しくチェックできます
+Array.isArray(arr);  // true
+// iframe を介して配列を正しくチェックできません
+arr instanceof Array; // false
+
+ +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.isArray")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/join/index.html b/files/ja/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..fc56325576 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,96 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Join + - Method + - Prototype + - Reference + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

join() メソッドは、配列 (または配列風オブジェクト) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

+ +
{{EmbedInteractiveExample("pages/js/array-join.html")}}
+ + + +

構文

+ +
arr.join([separator])
+ +

引数

+ +
+
separator {{optional_inline}}
+
配列の各要素を区切る文字列を指定します。 separator は、必要であれば文字列に変換されます。省略した場合、配列の要素はカンマ (",") で区切られます。 separator に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。
+
+ +

返値

+ +

配列の全要素が連結された文字列です。 arr.length が 0 だった場合、空の文字列が返されます。

+ +

解説

+ +

配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。

+ +
+

要素が undefined または null または空配列 [] であった場合は、空の文字列に変換されます。

+
+ +

例

+ +

3 通りの異なる形で配列をつなぐ

+ +

以下の例は、3 個の要素を持つ配列 a を作成し、デフォルト引数、カンマとスペース、そして「と」と空文字を使った 4 パターンの結合を行っています。

+ +
var a = ['風', '水', '火'];
+a.join();      // '風,水,火'
+a.join(', ');  // '風, 水, 火'
+a.join(' + '); // '風 + 水 + 火'
+a.join('');    // '風水火'
+ +

配列風オブジェクトを連結する

+ +

次の例は、配列風オブジェクト （ arguments ）を連結するために、 Array.prototype.join を {{jsxref("Function.prototype.call")}} を使用して呼び出します。

+ +
function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '1,a,true'
+}
+f(1, 'a', true);
+//expected output: "1,a,true"
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.Array.join")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.html b/files/ja/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..7125efbc1e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,70 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +
{{JSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/js/array-keys.html")}}
+ + + +

構文

+ +
arr.keys()
+ +

返値

+ +

新しい {{jsxref("Array")}} のイテレーターオブジェクトです。

+ +

例

+ +

疎な配列を無視しないキーイテレーター

+ +
var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.keys")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..93281881bd --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +
{{JSRef}}
+ +

lastIndexOf() メソッドは、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は fromIndex から逆向きに検索されます。

+ +
{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
+ + + +

構文

+ +
arr.lastIndexOf(searchElement[, fromIndex])
+ +

引数

+ +
+
searchElement
+
検索する配列要素です。
+
fromIndex {{optional_inline}}
+
逆向きに検索し始める添字です。デフォルトは配列の長さ に 1 を引いた値（ arr.length - 1 ）で、つまり配列全体が検索されます。もしこの添字が配列の長さ以上ならば、配列全体が検索されます。負の数の場合、これは配列の終わりからのオフセットとみなされます。この添字が負の数であってもなお、配列は後ろから前に検索されることに注意してください。負の添字の絶対値が配列の長さを超えた場合、-1 が返され、配列は検索されません。
+
+ +

返値

+ +

配列内の一致した要素の最後の位置です。見つからなかった場合は -1 です。

+ +

解説

+ +

lastIndexOf は searchElement と配列の要素を 厳密等価 (三重イコール演算子 === で使われるのと同じ方法) を使って比較します。

+ +

例

+ +

lastIndexOf() の使用

+ +

lastIndexOf を使って配列中のある値の位置を探す例を以下に示します。

+ +
var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+
+ +

ある要素の存在をすべて見つける

+ +

以下の例は lastIndexOf を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array.prototype.push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+
+ +

ここで idx == 0 の場合を分けて扱わないといけないことに注意してください。なぜなら、もし検索する値が配列の最初の要素にあると、その値は fromIndex パラメータにかかわらずいつもヒットしてしまうのです。これは {{jsxref("Array.prototype.indexOf", "indexOf")}} メソッドとは異なります。

+ +

ポリフィル

+ +

lastIndexOf は ECMA-262 第 5 版に追加されたメソッドであり、他のバージョンの標準実装には存在しない場合があります。次のコードをスクリプトの先頭に追加することにより、lastIndexOf がネイティブでサポートされていない環境でも、これを使用する事が可能となります。これは ECMA-262 第 5 版で定められたアルゴリズムと全く同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}}、{{jsxref("Number")}}、{{jsxref("Math.floor")}}、{{jsxref("Math.abs")}}、{{jsxref("Math.min")}}  が、それぞれオリジナルの値を持つことを仮定しています。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length >>> 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length > 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+        n = (n > 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+      if (k in t && t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+
+ +

上記コードのアルゴリズムは Firefox または SpiderMonky の JavaScript エンジンで実際に使用されているものと同じもので、これには間違いなくエッジケースも含まれています。実際にアプリケーションの中でこれを使用する場合、こうしたエッジケースを無視するならば、より複雑でないコードで fromIndex を計算可能であるかもしれません。

+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.lastIndexOf")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/length/index.html b/files/ja/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..efb6157569 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,125 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

length は Array 型のインスタンスであるオブジェクトのプロパティで、配列の要素の数を設定または取得します。値は符号なし 32 ビット整数で、常に配列の最も大きなインデックスよりも数値的に大きくなります。

+ +
{{EmbedInteractiveExample("pages/js/array-length.html")}}
+ + + +

解説

+ +

length プロパティの値は正符号を持つ整数で、2 の 32 乗 (232) 未満の値です。

+ +
var namelistA = new Array(4294967296); //2 to the 32nd power = 4294967296
+var namelistC = new Array(-100) //negative sign
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd power
+console.log(namelistB.length);
+
+//4294967295
+
+ +

length プロパティに値をセットすることで、いつでも配列を短縮することができます。length プロパティの値を現在より大きな値に変更すると、配列内の要素数も増加します。例えば length が現在 2 のところに 3 をセットすると、配列内の要素数は 3 になり、3番目の要素は反復処理できない空のスロットになります。

+ +
const arr = [1, 2];
+console.log(arr);
+// [ 1, 2 ]
+
+arr.length = 5; // 現在 2 の配列の長さを 5 に設定
+console.log(arr);
+// [ 1, 2, <3 の空アイテム> ]
+
+arr.forEach(element => console.log(element));
+// 1
+// 2
+
+ +

ご覧の通り、length プロパティは必ずしも配列内で定義された値の数を示しているわけではありません。詳細は length と数値プロパティとの関係 をご覧ください。

+ +

{{js_property_attributes(1, 0, 0)}}

+ +
+ +
+ +

例

+ +

配列を反復処理する

+ +

以下の例では、配列 numbers がいくつの要素を持っているかを知るために length プロパティを見ることで、配列を反復処理します。その際それぞれの値は 2 倍されます。

+ +
var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i < length; i++) {
+  numbers[i] *= 2;
+}
+// numbers は [2, 4, 6, 8, 10] となった
+
+ +

配列の短縮

+ +

以下の例は配列 numbers の要素数が 3 より大きいかどうかを調べて、大きいならその length を 3 としています。

+ +
var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length > 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3
+
+ +

固定長の空の配列を作成

+ +
var numbers = [];
+numbers.length = 3;
+console.log(numbers); // [undefined, undefined, undefined]
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("javascript.builtins.Array.length")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/map/index.html b/files/ja/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..8d82a82e72 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,366 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +
{{JSRef}}
+ +

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

+ +
{{EmbedInteractiveExample("pages/js/array-map.html")}}
+ + + +

構文

+ +
let new_array = arr.map(function callback( currentValue[, index[, array]]) {
+    // 新しい配列の要素を返す
+}[, thisArg])
+
+ +

引数

+ +
+
callback
+
+

arr の要素ごとに呼び出される関数です。 callback が実行されるたびに、返された値が new_array に追加されます。

+ +

callback 関数は以下の引数を受け付けます。

+ +
+
currentValue
+
現在処理中の要素の値です。
+
index{{optional_inline}}
+
現在処理中の要素の配列内における添字です。
+
array{{optional_inline}}
+
map が実行されている配列です。
+
+
+
thisArg{{optional_inline}}
+
callback を実行するときに this として使う値です。
+
+ +

返値

+ +

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列です。

+ +

解説

+ +

map は、与えられた callback 関数を配列の順番通りに、各要素に対して一度ずつ呼び出し、その結果から新しい配列を生成します。 callback は、値が代入されている配列の要素に対してのみ呼び出されます ({{jsxref("undefined")}} が代入されているものも含みます)。

+ +

これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出しません。

+ + + +

map() を使用すべきではない場合

+ +

map は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("for...of", "for-of")}} を使用してください。

+ +

map を使用するべきでないのは以下の場合です。

+ + + +

引数の詳細

+ +

callback は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。

+ +

thisArg 引数が与えられた場合は、それがコールバックの this として使用されます。引数が省略された場合は、 {{jsxref("undefined")}} が this の値として使用されます。 callback によって最終的に識別できる this の値は、関数における通常の this を決定するルールに従って決まります。

+ +

map は呼び出された配列を変化させません (ただし、呼び出された callback が配列を変更する可能性はあります)。

+ +

map によって処理される要素の範囲は、 callback が最初に呼び出される前に設定されます。 map の呼び出しが開始された後に追加された要素に対しては、 callback は実行されません。既存の配列要素が変更されたり、削除された場合、 callback に渡される値は map がそれらを訪れた時点での値になり、 map が削除された要素を訪問することはありません。

+ +

仕様書で定義されているアルゴリズムによって、 map が呼び出された配列がまばらである場合、結果の配列もまばらとなり、要素を空欄のままにします。

+ +

ポリフィル

+ +

map は ECMA-262 標準に最近追加されたものである為、標準準拠を謳う実装中に存在しない場合があります。

+ +

次のコードをスクリプトの先頭に挿入すると、 map にネイティブで対応していない ECMA-262 実装でも map を使用できるようになります。このアルゴリズムは ECMA-262 第 5 版で指示されたアルゴリズムと全く同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}}、{{jsxref("Array")}} はそれぞれオリジナルの値を持ち、またそれらの {{jsxref("Function.prototype.call")}} のオリジナルの値として評価されます。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback/*, thisArg*/) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length > 1) {
+      T = arguments[1];
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k < len
+    while (k < len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+
+ +

例

+ +

数値の配列を平方根の配列にマッピング

+ +

次のコードは、数値からなる配列を取り、それらの数値の平方根からなる新しい配列を生成します。

+ +
let numbers = [1, 4, 9]
+let roots = numbers.map(function(num) {
+    return Math.sqrt(num)
+})
+// roots の内容は [1, 2, 3] となる
+// numbers の内容は [1, 4, 9] のまま
+
+ +

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

+ +

次のコードは、オブジェクトの配列を受け取り、新たにフォーマットされた新しい配列を生成しています。

+ +
let kvArray = [{key: 1, value: 10},
+               {key: 2, value: 20},
+               {key: 3, value: 30}]
+
+let reformattedArray = kvArray.map(obj => {
+   let rObj = {}
+   rObj[obj.key] = obj.value
+   return rObj
+})
+// フォーマットされた配列の内容は [{1: 10}, {2: 20}, {3: 30}]となる
+
+// kvArray は
+// [{key: 1, value: 10},
+//  {key: 2, value: 20},
+//  {key: 3, value: 30}]
+// のまま
+ +

引数を含む関数を使用して数値配列をマッピングする

+ +

次のコードは、1 つの引数を必要とする関数を使用するときに map がどのように動作するかを示しています。引数は元の配列を通した map ループとして、配列の各要素に自動的に割り当てられます。

+ +
let numbers = [1, 4, 9]
+let doubles = numbers.map(function(num) {
+  return num * 2
+})
+
+// doubles is now   [2, 8, 18]
+// numbers is still [1, 4, 9]
+
+ +

汎用的な map の使用

+ +

以下の例は、各文字を表す ASCII エンコードのバイトの配列を得るために {{jsxref("String")}} に map を使う方法を示しています。:

+ +
let map = Array.prototype.map
+let a = map.call('Hello World', function(x) {
+  return x.charCodeAt(0)
+})
+// a の内容は [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] となる
+
+ +

汎用的な map の使用: querySelectorAll

+ +

この例では、querySelectorAll によって収集されたオブジェクトのコレクションを反復処理する方法を示します。これは querySelectorAll が NodeList (オブジェクトの集合) を返すためです。

+ +

この場合、画面に選択されているすべての option の値を返します。

+ +
let elems = document.querySelectorAll('select option:checked')
+let values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value
+})
+
+ +

もっと簡単な方法は {{jsxref("Array.from()")}} メソッドを使用することです。

+ +

トリッキーな使用例

+ +

(このブログの記事に創発されました)

+ +

コールバック関数は第一引数 (変換するべき要素) だけを意識して指定するケースがほとんどだと思います。しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。

+ +

まずこの例をご覧ください。

+ +
["1", "2", "3"].map(parseInt)
+ +

返値は [1, 2, 3] となりそうですが、実際には [1, NaN, NaN] となります。

+ +

{{jsxref("parseInt")}} は大抵一つの引数のみで使われますが、実際には二つの引数を取っています。一つ目は数値文字列、二つ目は基数です。 Array.prototype.map はコールバックに次の 3 つの引数を与えています。

+ + + +

{{jsxref("parseInt")}} は三つ目の引数を無視しますが、二つ目の引数は無視しません。これは混乱を起こす可能性があるソースです。

+ +

繰り返し手順の正確な例は以下の通りです。

+ +
// parseInt(string, radix) -> map(parseInt(value, index))
+/*  first iteration  (index is 0): */ parseInt("1", 0)  // 1
+/*  second iteration (index is 1): */ parseInt("2", 1)  // NaN
+/*  third iteration  (index is 2): */ parseInt("3", 2)  // NaN
+
+ +

解決策を考えてみましょう。

+ +
function returnInt(element) {
+  return parseInt(element, 10)
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// 期待した通り、数値の配列が返る。
+
+// アロー関数構文を使って、より簡潔に上記と同じ結果を得ることが出来ます。
+['1', '2', '3'].map( str => parseInt(str) )
+
+// ちなみにこの命題ではもっと簡単に同じ結果を得る方法があります。
+['1', '2', '3'].map(Number)  // [1, 2, 3]
+
+// parseInt() とは違って、 Number() は float または (解決した) 指数表現を返します。
+['1.1', '2.2e2', '3e300'].map(Number)  // [1.1, 220, 3e+300]
+
+// 比較のために、上記の配列に parseInt() を用いると次のようになります。
+['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ) // [1, 2, 3]
+
+ +

{{jsxref("parseInt")}} を引数として呼び出された map メソッドの代替出力の 1 つは、次のように実行されます。

+ +
let xs = ['10', '10', '10']
+
+xs = xs.map(parseInt)
+
+console.log(xs)
+// 実際の結果 10,NaN,2 は上記の説明からすると意外なものかもしれません。
+ +

undefined を持つマップされた配列

+ +

{{jsxref("undefined")}} または nothing を返すと、以下のものを返します。

+ +
let numbers = [1, 2, 3, 4]
+let filteredNumbers = numbers.map(function(num, index) {
+  if (index < 3) {
+     return num
+  }
+})
+// index は 0 から始まるので、 filterNumbers は 1,2,3 および undefined になります。
+// filteredNumbers は [1, 2, undefined, undefined]
+// numbers は [1, 2, 3, 4] のまま
+
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.map")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/observe/index.html b/files/ja/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..e480baf2e3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,89 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - Array + - JavaScript + - Method + - Obsolete +translation_of: Archive/Web/JavaScript/Array.observe +--- +
{{JSRef}} {{obsolete_header}}
+ +

Array.observe() メソッドは、配列への変更を非同期で監視するために使用されました。オブジェクト用の {{jsxref("Object.observe()")}} と似ています。変更内容は、発生した順番に時系列で提供されます。accept type list ["add", "update", "delete", "splice"] で呼び出された Object.observe() と同等です。しかしながら、この API の使用は非推奨となり、ブラウザから削除されています。代わりに、一般的な {{jsxref("Proxy")}} オブジェクトを使用してください。

+ +

構文

+ +
Array.observe(arr, callback)
+ +

引数

+ +
+
arr
+
監視される配列。
+
callback
+
変更されるたびに毎回呼び出される関数。次の引数を持ちます: +
+
changes
+
変更されたオブジェクトの配列。変更オブジェクトのプロパティは次の通り: +
    +
  • name: 変更されたプロパティの名前。
    • +
  • object: 変更後の配列。
    • +
  • type: 変更の種類を示す文字列。 "add", "update", "delete", "splice" のいずれか一つ。
    • +
  • oldValue: "update", "delete" の場合のみ、変更前の値。
    • +
  • index: "splice" の場合のみ。変更が発生したインデックス。
    • +
  • removed: "splice" の場合のみ。取り除かれた要素の配列。
    • +
  • addedCount: "splice" の場合のみ。追加された要素の数。
    • +
+
+
+
+
+ +

説明

+ +

callback 関数は、arr に変更が発生する度に呼ばれます。すべての変更が発生した順に配列として渡されます。

+ +
+

Array.prototype.pop() など、Array メソッド経由の変更は、"splice" 変更として報告されます。配列の長さが変更されないインデックスの割り当て変更は、"update" 変更として報告されます。

+
+ +

例

+ +

異なる変更のログを取る

+ +
var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: , name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: , index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: , index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]
+
+ +

仕様

+ +

Strawman proposal specification.

+ +

ブラウザ実装状況

+ +
+

{{Compat("javascript.builtins.Array.observe")}}

+
+ +

 

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/of/index.html b/files/ja/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..d6ce7c06df --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,107 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

Array.of() メソッドは、引数の数や型にかかわらず、可変長引数から、新しい Array インスタンスを生成します。

+ +

Array.of() と Array コンストラクタの違いは整数引数の扱いにあります。Array.of(7) は単一の要素、7 を持つ配列を作成しますが、Array(7) は length プロパティが 7 の空の配列を作成します（注: これは実際の undefined の値を持つスロットではなく、7 つの空のスロットの配列を意味します）。

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // 7 つの空のスロットの配列
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

構文

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+ +

引数

+ +
+
elementN
+
生成する配列の要素。
+
+ +

返値

+ +

新しい {{jsxref("Array")}} インスタンス。

+ +

解説

+ +

この関数は、ECMAScript 標準の第 6 版の一部です。詳しい情報は、Array.of と Array.from 提案、Array.of 互換コード をご覧ください。

+ + + + +

ポリフィル

+ +

以下のコードを他のコードよりも前に記述する事により、ネイティブで実装されていなくても、Array.of() が使用可能になります。

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+    // Or
+    let vals = [];
+    for(let prop in arguments){
+        vals.push(arguments[prop]);
+    }
+    return vals;
+  }
+}
+
+ +

例

+ +

Array.of の使用

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ + +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("javascript.builtins.Array.of")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/pop/index.html b/files/ja/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..5c4aef66da --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,95 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

pop() メソッドは、配列から最後の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます。

+ +
{{EmbedInteractiveExample("pages/js/array-pop.html")}}
+ + + +

構文

+ +
arrName.pop()
+ +

返値

+ +

配列の最後の要素。配列が空だった場合は、{{jsxref("undefined")}}。

+ +

解説

+ +

pop メソッドは配列の最後の要素を取り除き、呼び出し元にその値を返します。

+ +

pop は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している length プロパティを含まないオブジェクトでは効果がないかもしれません。

+ +

空の配列に対して pop() を実行した場合は、{{jsxref("undefined")}} を返します。

+ +

{{jsxref("Array.prototype.shift()")}} は pop と同様の動作をしますが、配列の最初の要素に適用されます。

+ +

例

+ +

配列の最後の要素を取り除く

+ +

以下のコードは、4 つの要素を含んだ配列 myFish を生成し、その後その最後の要素を取り除き、変数に代入しています。

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'
+ +

配列風のオブジェクトでの apply( ) や call ( ) の使用

+ +

以下のコードは、4 つの要素と長さのパラメータを含む配列のような myFish オブジェクトを作成し、最後の要素を削除して長さのパラメータをデクリメントします。

+ +
var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( )
+
+console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3}
+
+console.log(popped); // 'sturgeon'
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.pop")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..dc20c31a41 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Junk + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

解説

+ +

{{jsxref("Array")}} インスタンスは、 Array.prototype を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての Array オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。

+ +

ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 JavaScript への機能の追加の際に問題が発生することがあります。

+ +

豆知識: Array.prototype はそれ自体が {{jsxref("Array")}} です。

+ +
Array.isArray(Array.prototype); // true
+
+ +

{{js_property_attributes(0, 0, 0)}}

+ +

プロパティ

+ +
+
Array.prototype.constructor
+
オブジェクトの prototype を生成する関数を指定します。
+
{{jsxref("Array.prototype.length")}}
+
配列内の要素数を反映します。
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
with バインディングのスコープから除外されるプロパティ名を保持するシンボル。
+
+ +

メソッド

+ +

Mutator メソッド

+ +

これらのメソッドは、配列を書き換えます。

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
配列内で配列内の連続した要素をコピーします。
+
{{jsxref("Array.prototype.fill()")}}
+
配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
+
{{jsxref("Array.prototype.pop()")}}
+
配列から最後の要素を取り除き、戻り値として返します。
+
{{jsxref("Array.prototype.push()")}}
+
配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。
+
{{jsxref("Array.prototype.reverse()")}}
+
配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。
+
{{jsxref("Array.prototype.shift()")}}
+
配列から最初の要素を取り除き、その要素を返します。
+
{{jsxref("Array.prototype.sort()")}}
+
配列内で要素を整列し、配列を返します。
+
{{jsxref("Array.prototype.splice()")}}
+
配列に対して複数の要素を追加したり取り除いたりします。
+
{{jsxref("Array.prototype.unshift()")}}
+
配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。
+
+ +

アクセサーメソッド

+ +

これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
この配列に他の配列や値を結合して新しい配列を返します。
+
{{jsxref("Array.prototype.includes()")}}
+
この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。
+
{{jsxref("Array.prototype.indexOf()")}}
+
指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.join()")}}
+
配列のすべての要素を結合した文字列を返します。
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.slice()")}}
+
配列の一部を取り出して新しい配列として返します。
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toString()")}}
+
配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。
+
+ +

反復メソッド

+ +

いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の length 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。
+
{{jsxref("Array.prototype.every()")}}
+
指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.filter()")}}
+
指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.find()")}}
+
指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。
+
{{jsxref("Array.prototype.findIndex()")}}
+
指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。
+
{{jsxref("Array.prototype.forEach()")}}
+
配列中のそれぞれの要素について関数を呼び出します。
+
{{jsxref("Array.prototype.keys()")}}
+
新しい Array Iterator を返します。このオブジェクトは配列中の各インデックスのキーを保持します。
+
{{jsxref("Array.prototype.map()")}}
+
配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.reduce()")}}
+
アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.reduceRight()")}}
+
アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.some()")}}
+
指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.values()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
+ +

ジェネリックメソッド (非標準)

+ +

JavaScript の Array オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも length プロパティを持ち、数値プロパティ名を使う (array[5] のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの length や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや length が変更可能であることを要求するため、length プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('ES1')}}{{Spec2('ES1')}}初回定義
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() メソッドを追加
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}includes() メソッドを追加
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("javascript.builtins.Array.prototype")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/push/index.html b/files/ja/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..935dcfe945 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,126 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +
{{JSRef}}
+ +

push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-push.html")}}
+ + + +

構文

+ +
arr.push([element1[, ...[, elementN]]])
+ +

引数

+ +
+
elementN
+
配列の末尾に追加する要素。
+
+ +

返値

+ +

メソッドが呼び出されたオブジェクトの新しい {{jsxref("Array.length", "length")}} プロパティ。

+ +

解説

+ +

push メソッドは配列の末尾に要素を追加します。

+ +

push は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。なお、push は配列の末尾から要素を挿入する必要性があるため、 length プロパティに依存しています。length が数値に変換できない場合、0 が用いられます。また、 length が存在しない場合は length も作成されることになります。

+ +

ネイティブのみで、配列のようなオブジェクトは {{jsxref("Global_Objects/String", "strings", "", 1)}} ですが、文字列は変化しないので、このメソッドの効果を受けるには相応しくありません。

+ +

例

+ +

配列に要素を追加する

+ +

以下のコードは 2 つの要素を持つ配列 sports を生成し、それに 2 つの要素を追加します。コードの実行後、変数 total には 4 が入ります。

+ +
let sports = ['soccer', 'baseball']
+let total = sports.push('football', 'swimming')
+
+console.log(sports)  // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total)   // 4
+
+ +

２つの配列をマージする

+ +

この例では {{jsxref("Function.apply", "apply()")}} を利用することで 2 つ目の配列の全ての要素を 1 つ目の要素にマージさせています。

+ +

2 番目の配列 (例では moreVegs) が非常に大きい場合はこのメソッドを使用しないでください。なぜなら、1 つの関数が取ることのできるパラメータの最大数は実際には制限されているからです。詳細は {{jsxref("Function.apply", "apply()")}} を参照してください。

+ +
let vegetables = ['parsnip', 'potato']
+let moreVegs = ['celery', 'beetroot']
+
+// 1 つ目の配列に 2 つ目の配列をマージさせます
+// vegetables.push('celery', 'beetroot'); と同じ結果になります
+Array.prototype.push.apply(vegetables, moreVegs)
+
+console.log(vegetables)  // ['parsnip', 'potato', 'celery', 'beetroot']
+
+ +

オブジェクトを配列のように使用する

+ +

上述したように、push は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で Array.prototype.push は正しく動作します。

+ +

オブジェクトのコレクションを保存するために、配列を生成していないことに注意してください。代わりに、コレクションをオブジェクト自体に保存して、配列を扱っているかのように見せかけるために Array.prototype.push 上で call を使用しています。そして、JavaScript は実行コンテキストの確立を許可しているおかげで、これは動作します。

+ +
let obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length は、要素が追加されるたびに自動的に増分する。
+        [].push.call(this, elem)
+    }
+}
+
+// 例示のために空のオブジェクトを追加する。
+obj.addElem({})
+obj.addElem({})
+console.log(obj.length)
+// → 2
+
+ +

obj は配列ではありませんが、本当の配列を扱っているかのように push メソッドは obj の length プロパティを増加させできていることに注意してください。

+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.push")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/reduce/index.html b/files/ja/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..a6a874f2e6 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,592 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/reduce +tags: + - Array + - Array method + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reduce + - Reference + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +
{{JSRef}}
+ +

reduce() メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の出力値を生成します。

+ +
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+ + + +

reducer 関数は 4 つの引数を取ります。

+ +
    +
  1. アキュムレーター (acc)
    2. +
  2. 現在値 (cur)
    3. +
  3. 現在の添字 (idx)
    4. +
  4. 元の配列 (src)
    5. +
+ +

reducer 関数の返値はアキュムレーターに代入され、配列内の各反復に対してこの値を記憶します。最終的に単一の結果値になります。

+ +

構文

+ +
arr.reduce(callback( accumulator, currentValue[, index[, array]] ) {
+  // return result from executing something for accumulator or currentValue
+}[, initialValue]);
+ +

引数

+ +
+
callback
+
+

配列のすべての要素 (initialValue が提供されなかった場合は、最初を除く) に対して実行される関数です。

+ +

これは 4 つの引数を取ります。

+ +
+
accumulator
+
callback の返値を蓄積するアキュームレーターです。これは、コールバックの前回の呼び出しで返された値、あるいは initialValue が指定されている場合はその値となります (以下を参照ください)。
+
currentValue
+
現在処理されている配列の要素です。
+
index {{optional_inline}}
+
現在処理されている配列要素のインデックスです。initialValue が指定された場合はインデックス 0 から、そうでない場合はインデックス 1 から開始します。
+
array {{optional_inline}}
+
reduce() が呼び出された配列です。
+
+
+
initialValue {{optional_inline}}
+
callback の最初の呼び出しの最初の引数として使用する値。initialValue が与えられなかった場合、配列の最初の要素がアキュムレーターの初期値として使用され、currentValue としてスキップされます。空の配列に対して reduce() を呼び出した際、initialValue が指定されていないと {{jsxref("TypeError")}} が発生します。
+
+ +

返値

+ +

畳み込みによって得られた 1 つの値です。

+ +

解説

+ +

reduce() メソッドは、配列に存在する各要素ごとに対して、callback 関数を次の 4 つの引数を渡しながら一度だけ実行します。

+ +
    +
  1. accumulator
    2. +
  2. currentValue
    3. +
  3. currentIndex
    4. +
  4. array
    5. +
+ +

コールバックが最初に呼び出されたとき、accumulator と currentValue が 2 つの値になります。initialValue が reduce() の呼び出しで提供されていた場合、accumulator は initialValue と等しくなり、currentValue は配列の最初の値と等しくなります。initialValue が提供されなかった場合は、accumulator は配列の最初の値と等しくなり、currentValue は 2番目の値と等しくなります。

+ +
+

注: initialValue が指定されなかった場合は、reduce() は最初の要素を飛ばしてインデックス 1 から実行されます。initialValue が指定されていたらインデックス 0 から開始します。

+
+ +

配列が空で initialValue が指定されなかった場合は {{jsxref("TypeError")}} が発生します。

+ +

配列が (位置に関わらず) 1 つの要素しか持たず、initialValue が指定されなかった場合、または initialValue が指定されていても配列が空だった場合、callback が実行されずに要素が返却されます。

+ +

initialValue を指定しなかった場合、下記の例のような 4 種類の結果が発生しうるため、initialValue を指定する方が通常は安全です。

+ +
let maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
+let maxCallback2 = ( max, cur ) => Math.max( max, cur );
+
+// reduce without initialValue
+[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
+[ { x: 2 }, { x: 22 }            ].reduce( maxCallback ); // 22
+[ { x: 2 }                       ].reduce( maxCallback ); // { x: 2 }
+[                                ].reduce( maxCallback ); // TypeError
+
+// map & reduce with initialValue; better solution, also works for empty or larger arrays
+[ { x: 22 }, { x: 42 } ].map( el => el.x )
+                        .reduce( maxCallback2, -Infinity );
+
+ +

reduce() はどう動くか

+ +

次のコードのように reduce() を使用した場合について見てみましょう。

+ +
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue
+})
+
+ +

コールバック関数は 4 回呼び出され、各回の引数の内容は以下のようになっています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callback の反復accumulatorcurrentValuecurrentIndexarray返値
初回の呼出し011[0, 1, 2, 3, 4]1
2 回目の呼出し122[0, 1, 2, 3, 4]3
3 回目の呼出し333[0, 1, 2, 3, 4]6
4 回目の呼出し644[0, 1, 2, 3, 4]10
+ +

reduce() の返値は、コールバック呼び出しの最後の返値である (10) となるでしょう。

+ +

通常の関数の代わりに{{jsxref("Functions/Arrow_functions", "アロー関数","",1)}}を指定することができます。下記のコードは上述のコードと同じ結果を返します。

+ +
[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue )
+
+ +

reduce() の 2 つ目の引数に初期値を設定した場合は、コールバック各回の内部的な動作はこのようになります。

+ +
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
+    return accumulator + currentValue
+}, 10)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callback の反復accumulatorcurrentValuecurrentIndexarray返値
初回の呼出し1000[0, 1, 2, 3, 4]10
2 回目の呼出し1011[0, 1, 2, 3, 4]11
3 回目の呼出し1122[0, 1, 2, 3, 4]13
4 回目の呼出し1333[0, 1, 2, 3, 4]16
5 回目の呼出し1644[0, 1, 2, 3, 4]20
+ +

この場合の reduce() の返値は 20 となります。

+ +

ポリフィル

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length >= 2) {
+        value = arguments[1];
+      } else {
+        while (k < len && !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k >= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+
+ +
+

警告: {{jsxref("Object.defineProperty()")}} に対応していない本当に時代遅れの JavaScript エンジンに対応する必要がある場合、Array.prototype を列挙不可能にすることはできないので、メソッドのポリフィルを使わない方が良いでしょう。

+
+ +

例

+ +

配列内の値の合計値を出す

+ +
let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue
+}, 0)
+// sum is 6
+
+
+ +

また、アロー関数を用いて書くことも出来ます。

+ +
let total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) => accumulator + currentValue,
+  0
+)
+ +

オブジェクトの配列の値の合計値を出す

+ +

オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために initialValue を指定する必要があります。

+ +
let initialValue = 0
+let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x
+}, initialValue)
+
+console.log(sum) // logs 6
+
+ +

また、アロー関数を用いて書くことも出来ます。

+ +
let initialValue = 0
+let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
+    (accumulator, currentValue) => accumulator + currentValue.x
+    , initialValue
+)
+
+console.log(sum) // logs 6
+ +

二次元配列を一次元配列にする

+ +
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue)
+  },
+  []
+)
+// flattened is [0, 1, 2, 3, 4, 5]
+
+ +

また、アロー関数を用いて書くことも出来ます。

+ +
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) => accumulator.concat(currentValue),
+  []
+)
+
+ +

オブジェクトの値のインスタンスを数える

+ +
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
+
+let countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++
+  }
+  else {
+    allNames[name] = 1
+  }
+  return allNames
+}, {})
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+
+ +

プロパティによってオブジェクトをグループ化する

+ +
let people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    let key = obj[property]
+    if (!acc[key]) {
+      acc[key] = []
+    }
+    acc[key].push(obj)
+    return acc
+  }, {})
+}
+
+let groupedPeople = groupBy(people, 'age')
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age: 21 }]
+// }
+
+ +

スプレッド演算子と initialValue を使ってオブジェクトの配列に含まれる配列を結合させる

+ +
// friends - an array of objects
+// where object field "books" is a list of favorite books
+let friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}]
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+let allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books]
+}, ['Alphabet'])
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]
+ +

配列内の重複要素を除去する

+ +
+

注: {{jsxref("Set")}} と {{jsxref("Array.from()")}} に対応している環境を使っている場合、let orderedArray = Array.from(new Set(myArray)) を使うことで重複要素を除去された配列を取得することができます。

+
+ +
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
+let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
+  if (accumulator.indexOf(currentValue) === -1) {
+    accumulator.push(currentValue)
+  }
+  return accumulator
+}, [])
+
+console.log(myOrderedArray)
+ +

.filter().map() を .reduce() で置き換える

+ +

{{jsxref("Array.filter()")}} を使用した後で {{jsxref("Array.map()")}} を使用すると配列を二度走査しますが、{{jsxref("Array.reduce()")}} では同じ効果を一度の操作で実現することができ、もっと効率的です。(for ループが好きなのであれば、{{jsxref("Array.forEach()")}} で一度の操作で filter と map を行うことができます)。

+ +
const numbers = [-5, 6, 2, 0,];
+
+const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => {
+  if (currentValue > 0) {
+    const doubled = currentValue * 2;
+    accumulator.push(doubled);
+  }
+  return accumulator;
+}, []);
+
+console.log(doubledPositiveNumbers); // [12, 4]
+ +

シーケンス上の Promise を動かす

+ +
/**
+ * Runs promises from array of functions that can return promises
+ * in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  )
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 5)
+  })
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 2)
+  })
+}
+
+// function 3  - will be wrapped in a resolved promise by .then()
+function f3(a) {
+ return a * 3
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 4)
+  })
+}
+
+const promiseArr = [p1, p2, f3, p4]
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log)   // 1200
+
+ +

パイプによって関数を合成する

+ +
// Building-blocks to use for composition
+const double = x => x + x
+const triple = x => 3 * x
+const quadruple = x => 4 * x
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
+    input
+)
+
+// Composed functions for multiplication of specific values
+const multiply6 = pipe(double, triple)
+const multiply9 = pipe(triple, triple)
+const multiply16 = pipe(quadruple, quadruple)
+const multiply24 = pipe(double, triple, quadruple)
+
+// Usage
+multiply6(6)   // 36
+multiply9(9)   // 81
+multiply16(16) // 256
+multiply24(10) // 240
+
+
+ +

reduce を使って map メソッドを書く

+ +
if (!Array.prototype.mapUsingReduce) {
+  Array.prototype.mapUsingReduce = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array)
+      return mappedArray
+    }, [])
+  }
+}
+
+[1, 2, , 3].mapUsingReduce(
+  (currentValue, index, array) => currentValue + index + array.length
+) // [5, 7, , 10]
+
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.reduce")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..3854e0e330 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,353 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +
{{JSRef}}
+ +

reduceRight() メソッドは、隣り合う 2 つの配列要素に対して (右から左へ) 関数を適用して、単一の値にします。

+ +
{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}}
+ + + +

左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。

+ +

構文

+ +
arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
+ +

引数

+ +
+
callback
+
4 つの引数を取って、配列内の各値に対し実行するコールバック関数 +
+
accumulator
+
現在処理されている配列要素の 1 つ前の要素。もしくは、指定されていれば initialValue。(下記参照)
+
currentValue
+
現在処理されている配列要素
+
index{{optional_inline}}
+
現在処理されている配列要素のインデックス
+
array{{optional_inline}}
+
reduceRight() によって呼ばれる配列
+
+
+
initialValue {{optional_inline}}
+
callback の最初の呼び出しのときに、最初の実引数として用いるためのオブジェクト。initialValue が渡されなかった際は、配列の最後の要素が適用されます。また、空の配列に対して、初期値なしで呼び出すと TypeError になります。
+
+ +

返値

+ +

畳み込みによって得られた 1 つの値です。

+ +

解説

+ +

reduceRight は、配列に存在する各要素に対して、callback 関数を一度だけ実行します。配列における穴は対象からはずされ、初期値（あるいは、直前の callback 呼び出し）、現在の要素の値、現在のインデックス、繰り返しが行われる配列の 4 つの引数を受け取ります。

+ +

reduceRight の callback の呼び出しは、以下のように見えるでしょう。

+ +
array.reduceRight(function(accumulator, currentValue, index, array) {
+  // ...
+});
+
+ +

関数が初めて呼び出されたとき、accumulator と currentValue は、2 つの値のいずれかになります。reduceRight の呼び出しで initialValue が指定された場合、accumulator は initialValue と等しくなり、currentValue は配列の最後の値と等しくなります。initialValue が指定されなかった場合、accumulator は配列の最後の値に等しく、currentValue は最後から 2 番目の値に等しくなります。

+ +

配列が空で、initialValue が指定されていない場合、{{jsxref("TypeError")}} が投げられます。配列に要素が 1 つしかなく（位置に関係なく）、initialValue が指定されていない場合、または initialValue が指定されているが配列が空の場合、callback を呼び出さずに単独の値が返されます。

+ +

この関数を使用した場合について見てみましょう。

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+});
+
+ +

コールバックは 4 回呼び出され、各コールの引数と戻り値は以下のようになります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValueindexarrayreturn value
初回の呼出し433[0, 1, 2, 3, 4]7
2 回目の呼出し722[0, 1, 2, 3, 4]9
3 回目の呼出し911[0, 1, 2, 3, 4]10
4 回目の呼出し1000[0, 1, 2, 3, 4]10
+ +

reduceRight の返値は、コールバック呼び出しの最後の返値である (10) になります。

+ +

initialValue を与えた場合、その結果は以下のようになります。

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorcurrentValueindexarrayreturn value
初回の呼出し1044[0, 1, 2, 3, 4]14
2 回目の呼出し1433[0, 1, 2, 3, 4]17
3 回目の呼出し1722[0, 1, 2, 3, 4]19
4 回目の呼出し1911[0, 1, 2, 3, 4]20
5 回目の呼出し2000[0, 1, 2, 3, 4]20
+ +

この場合の reduceRight の返値は 20 になります。

+ +

ポリフィル

+ +

reduceRight は ECMA-262 の第5版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブにはサポートされていない実装でも reduceRight を使用できるようにします。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.22
+// Reference: http://es5.github.io/#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback /*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length >>> 0, k = len - 1, value;
+    if (arguments.length >= 2) {
+      value = arguments[1];
+    } else {
+      while (k >= 0 && !(k in t)) {
+        k--;
+      }
+      if (k < 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k >= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+
+ +

例

+ +

配列内のすべての値を合計する

+ +
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// sum is 6
+
+ +

配列中の配列を平坦化する

+ +
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// flattened is [4, 5, 2, 3, 0, 1]
+
+
+ +

一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す

+ +
const waterfall = (...functions) => (callback, ...args) =>
+  functions.reduceRight(
+    (composition, fn) => (...results) => fn(composition, ...results),
+    callback
+  )(...args);
+
+const randInt = max => Math.floor(Math.random() * max)
+
+const add5 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x + 5);
+};
+const mult3 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x * 3);
+};
+const sub2 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x - 2);
+};
+const split = (callback, x) => {
+  setTimeout(callback, randInt(1000), x, x);
+};
+const add = (callback, x, y) => {
+  setTimeout(callback, randInt(1000), x + y);
+};
+const div4 = (callback, x) => {
+  setTimeout(callback, randInt(1000), x / 4);
+};
+
+const computation = waterfall(add5, mult3, sub2, split, add, div4);
+computation(console.log, 5) // -> 14
+
+// same as:
+
+const computation2 = (input, callback) => {
+  const f6 = x=> div4(callback, x);
+  const f5 = (x, y) => add(f6, x, y);
+  const f4 = x => split(f5, x);
+  const f3 = x => sub2(f4, x);
+  const f2 = x => mult3(f3, x);
+  add5(f2, input);
+}
+ +

reduce と reduceRight の違い

+ +
var a = ['1', '2', '3', '4', '5'];
+var left  = a.reduce(function(prev, cur)      { return prev + cur; });
+var right = a.reduceRight(function(prev, cur) { return prev + cur; });
+
+console.log(left);  // "12345"
+console.log(right); // "54321"
+ +

関数合計の定義

+ +

関数合成のコンセプトはシンプルで、n個の関数を組み合わせたものです。これは右から左へと流れ、最後の関数の出力を使用して各関数を呼び出します。

+ +
/**
+ * Function Composition is way in which result of one function can
+ * be passed to another and so on.
+ *
+ * h(x) = f(g(x))
+ *
+ * Function execution happens right to left
+ *
+ * https://en.wikipedia.org/wiki/Function_composition
+ */
+
+const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
+
+// Increment passed number
+const inc = (n) => n + 1
+
+// Doubles the passed value
+const double = (n) => n * 2
+
+// using composition function
+console.log(compose(double, inc)(2)); // 6
+
+// using composition function
+console.log(compose(inc, double)(2)); // 5
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.reduceRight")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/reverse/index.html b/files/ja/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..4ff1fd367c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,91 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

reverse() メソッドは、配列の要素を In-place アルゴリズムで反転させます。最初の要素が最後の要素に、最後の要素が最初の要素になります。

+ +
{{EmbedInteractiveExample("pages/js/array-reverse.html")}}
+ + + +

構文

+ +
a.reverse()
+ +

返値

+ +

反転した配列です。

+ +

解説

+ +

reverse メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。

+ +

reverse は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している length プロパティを含まないオブジェクトでは効果がないかもしれません。

+ +

例

+ +

配列の要素を反転させる

+ +

次の例は、3 つの要素を含む配列 a を作成し、その配列を反転させます。reverse() の呼び出しは、反転した配列 a への参照を返します。

+ +
const a = [1, 2, 3];
+
+console.log(a); // [1, 2, 3]
+
+a.reverse();
+
+console.log(a); // [3, 2, 1]
+
+
+ +

配列状オブジェクトの要素を反転させる

+ +

次の例は、3 つの要素と length プロパティを含む配列状オブジェクト a を作成し、その配列状オブジェクトを反転させます。reverse() の呼び出しは、反転した配列状オブジェクト a への参照を返します。

+ +
const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); //apply() を使用するのと同じ構文
+
+console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.reverse")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/shift/index.html b/files/ja/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..5dff35d03f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,98 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

shift() メソッドは、配列から最初の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。

+ +
{{EmbedInteractiveExample("pages/js/array-shift.html")}}
+ + + +

構文

+ +
arr.shift()
+ +

返値

+ +

配列から取り除かれた要素を返します。配列が空の場合は、{{jsxref("undefined")}} を返します。

+ +

解説

+ +

shift メソッドは 0 番目の添え字の要素を取り除き、続く添え字の値を小さい方向にずらします。そして、削除された値を返します。{{jsxref("Array.length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。

+ +

shift は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している length プロパティを含まないオブジェクトでは効果がないかもしれません。

+ +

{{jsxref("Array.prototype.pop()")}} は shift と似た動作をしますが、配列の最後の要素に適用されます。

+ +

例

+ +

配列から要素を除去

+ +

以下のコードは myFish 配列を、その最初の要素を取り除く前後で表示します。また、取り除いた要素も表示します。

+ +
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before:', JSON.stringify(myFish));
+// myFish 処理前: ['angel', 'clown', 'mandarin', 'surgeon']
+
+var shifted = myFish.shift();
+
+console.log('myFish 処理後:', myFish);
+// myFish 処理後: ['clown', 'mandarin', 'surgeon']
+
+console.log('取り除いた要素:', shifted);
+// 取り除いた要素: angel
+
+ +

shift() メソッドの while ループ内での使用する

+ +

shift() メソッドは時に、 while 文の条件内において用いられます。以下のコードでは、要素がすべて無くなるまで、各くり返し内でその配列内の次の要素を取り除きます。

+ +
var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];
+
+while( (i = names.shift()) !== undefined ) {
+    console.log(i);
+}
+// Andrew, Edward, Paul, Chris, John
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.shift")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/slice/index.html b/files/ja/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..285e3593e8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,154 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

slice() メソッドは、start と end が配列の中の項目のインデックスを表している場合、start から end まで (end は含まれない) で選択された配列の一部の浅いコピーを新しい配列オブジェクトに作成して返します。元の配列は変更されません。

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

構文

+ +
arr.slice([start[, end]])
+
+ +

引数

+ +
+
start {{optional_inline}}
+
取り出しの開始位置を示す 0 から始まるインデックスです。
+
負のインデックスを使って、列の終わりからのオフセットを指定することができます。slice(-2) は列の最後の 2 つの要素を取り出します。
+
start が指定されなかった場合、slice はインデックス 0 から開始します。
+
start が列のインデックスの範囲よりも大きい場合は、空の配列が返されます。
+
end {{optional_inline}}
+
取り出しを終える直前の位置を示す 0 から始まるインデックスです。slice は end 自体は含めず、その直前まで取り出します。例えば、slice(1,4) は 2 番目から 4 番目までの要素 (インデックスがそれぞれ 1, 2, 3 番目の要素) を取り出します。
+
負のインデックスを使って、列の終わりからのオフセットとして指定することができます。slice(2,-1) は列の 3 番目から、最後から 2 番目までの要素を取り出します。
+
end が省略された場合、slice は列の最後 (arr.length) までを取り出します。
+
end がシーケンスの長さを超えた場合も、slice はシーケンスの最後 (arr.length) までを取り出します。
+
+ +

返値

+ +

取り出された要素を含む新しい配列です。

+ +

解説

+ +

slice は元の配列を変更せず、元の配列から要素をシャローコピー (1 段階の深さのコピー) した新しい配列を返します。元の配列の要素は以下のように返される配列にコピーされます。

+ + + +

一方の配列に新しい要素が追加されても、他方の配列に影響はしません。

+ +

例

+ +

既存の配列の一部を返す

+ +
let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+var citrus = fruits.slice(1, 3);
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']
+
+ +

slice の使用

+ +

以下の例で、slice は新しい配列 newCar を myCar から生成します。両者ともオブジェクト myHonda への参照を含んでいます。myHonda の色が purple に変更されると、両方の要素がその変更を反映します。

+ +
// slice を使って、myCar から newCar を生成する。
+let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
+let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
+let newCar = myCar.slice(0, 2)
+
+// myCar, newCar と両方の要素から参照されている myHonda の color の
+//  値を書きだす。
+console.log('myCar = ' + JSON.stringify(myCar))
+console.log('newCar = ' + JSON.stringify(newCar))
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+// myHonda の色を変える。
+myHonda.color = 'purple'
+console.log('The new color of my Honda is ' + myHonda.color)
+
+// 両方の要素から参照されている myHonda の color を書き出す。
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+ +

このスクリプトの出力は次の様になります。

+ +
myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+
+ +

配列状オブジェクト

+ +

slice メソッドを呼び出すことで、配列状オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに {{jsxref("Function.prototype.bind", "bind")}} するだけです。配列状オブジェクトの一例として、{{jsxref("Functions/arguments", "arguments")}} が挙げられます。以下に例を示します。

+ +
function list() {
+  return Array.prototype.slice.call(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+
+ +

結合 (Binding) は {{jsxref("Function.prototype")}} の {{jsxref("Function.prototype.call", "call()")}} メソッドを用いて行うことができますし、[].slice.call(arguments) を Array.prototype.slice.call の代わりに使って減らすこともできます。

+ +

いずれにせよ、{{jsxref("Function.prototype.bind", "bind")}} を使用することで簡略化することができます。

+ +
let unboundSlice = Array.prototype.slice
+let slice = Function.prototype.call.bind(unboundSlice)
+
+function list() {
+  return slice(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.Array.slice")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/some/index.html b/files/ja/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..9899199ae8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,197 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +
{{JSRef}}
+ +

some() メソッドは、配列の少なくとも一つの要素が、指定された関数で実装されたテストに合格するかどうかをテストします。これはブール値を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-some.html")}}
+ + + +

構文

+ +
arr.some(callback(element[, index[, array]])[, thisArg])
+ +

引数

+ +
+
callback
+
+

各要素に対してテストを実行する関数です。次の 3 つの引数を取ります。

+ +
+
element
+
現在処理されている要素です。
+
index{{optional_inline}}
+
現在処理されている要素のインデックスです。
+
array{{optional_inline}}
+
some() が実行されている配列です。
+
+
+
thisArg{{optional_inline}}
+
callback を実行するときに this として使用するオブジェクトです。
+
+ +

返値

+ +

配列内の少なくとも1つの要素でコールバック関数が{{Glossary("truthy", "真と解釈される")}}値を返した場合は true です。それ以外は false です。

+ +

解説

+ +

some() は、与えられた callback 関数を、配列に含まれる各要素に対して一度ずつ、callback が真と解釈される値 (論理型に変換した際に真となる値) を返す要素が見つかるまで呼び出します。そのような要素が見つかると、some() はただちに true を返します。見つからなかった場合、some() は false を返します。callback は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。

+ +

callback は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数を伴って呼び出されます。

+ +

thisArg 引数が some() に与えられると、それがコールバックのの this として使用されます。それ以外は、{{jsxref("undefined")}} 値が this として使用されるでしょう。 callback が最終的に見ることができる this の値は、関数から見た this の決定に関する一般的なルールによって決定されます。

+ +

some() は呼び出された配列を変化させません。

+ +

some() によって処理される要素の範囲は、callback が最初に呼び出される前に設定されます。some() の呼び出しが開始された後に追加された要素に対しては、callback は実行されません。既存の配列要素が変更されたり、削除されたりした場合、callback に渡される値は some() がそれらを訪れた時点での値になり、削除された要素を訪問することはありません。

+ +
+

注: このメソッドは空の配列ではあらゆる条件式に対して false を返します。

+
+ +

Polyfill

+ +

some() は ECMA-262 標準の第 5 版に追加されたメソッドなので、この標準に準拠したすべての実装に存在するわけではありません。次のコードをスクリプトの先頭に追加することにより some() にネイティブで対応していない実装上でも使用可能になります。

+ +

このアルゴリズムは ECMA-262 第 5 版で指示されたアルゴリズムとまったく同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}} はそれぞれオリジナルの値を持ち、またそれらの fun.call {{jsxref("Function.prototype.call()")}} のオリジナルの値として評価されます。

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun, thisArg) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+
+    for (var i = 0; i < len; i++) {
+      if (i in t && fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+
+ +

例

+ +

配列要素の値のテスト

+ +

次の例は、配列のいずれかの要素が 10 よりも大きいかどうかをテストします。

+ +
function isBiggerThan10(element, index, array) {
+  return element > 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+ +

アロー関数を使った配列要素のテスト

+ +

アロー関数 はより短い構文で同じテストを提供します。

+ +
[2, 5, 8, 1, 4].some(x => x > 10);  // false
+[12, 5, 8, 1, 4].some(x => x > 10); // true
+ +

ある値が配列に存在するかどうかのチェック

+ +

includes() メソッドを真似て、このカスタム関数は配列にその要素が存在する場合に true を返します。

+ +
const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true
+ +

アロー関数を使ったある値が存在するかどうかのチェック

+ +
const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal => val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true
+ +

任意の値の Boolean への変換

+ +
const TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName("ESDraft", "#sec-array.prototype.some", "Array.prototype.some")}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.some")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/sort/index.html b/files/ja/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..6719c55cd4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,256 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Array + - Array method + - JavaScript + - Method + - Prototype + - Sorting +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +
{{JSRef}}
+ +

sort() メソッドは、配列の要素を in place でソートします。既定のソート順は昇順で、要素を文字列に変換してから、UTF-16 コード単位の値の並びとして比較します。

+ +

このソートで消費される CPU時間やメモリースペースは実装に依存するので、ここで言及することは出来ません。

+ +
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+ + + +

構文

+ +
arr.sort([compareFunction])
+
+ +

引数

+ +
+
compareFunction {{optional_inline}}
+
ソート順を定義する関数を指定します。省略された場合、配列の各要素は文字列に変換され、各文字の Unicode のコードポイント順に従ってソートされます。
+
+
firstEl
+
比較対象の一つ目の要素を指定します。
+
secondEl
+
比較対象の二つ目の要素を指定します。
+
+ +
+ + +

返値

+ +

ソートされた結果の配列。ソートは対象配列上で in place に行われることに注意して下さい。コピーされた別の配列が準備されることはありません。

+ +

解説

+ +

compareFunction (比較関数) が与えられなかった場合、undefined 以外のすべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。例えば、"banana" は "cherry" の前に来ます。数値のソートでは、9 が 80 の前に来ますが、数値は文字列に変換されるため、Unicode 順で "80" が "9" の前に来ます。undefined の要素はすべて、配列の末尾に並べられます。

+ +
+

注: UTF-16 では、\uFFFF を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、\uD800-\uDFFF の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、\uD655\uDE55 というサロゲートペアで形成される文字は、\uFF3A の文字よりも前に並べられます。

+
+ +

compareFunction が与えられた場合、undefined 以外のすべての配列要素は比較関数の返値に基づきソートされます (undefined の要素はすべて、compareFunction を呼び出すことなく配列の末尾へ並べられます)。もし a と b を比較しようとする場合は、次のようになります。

+ + + +

よって、比較関数は以下のような形式をもちます。

+ +
function compare(a, b) {
+  if (ある順序の基準において a が b より小) {
+    return -1;
+  }
+  if (その順序の基準において a が b より大) {
+    return 1;
+  }
+  // a は b と等しいはず
+  return 0;
+}
+
+ +

文字列の代わりに数字を比較する場合、比較関数は単純に a から b を引けばよいでしょう。次のように比較関数を定義すれば昇順に並べることができます (Infinity や NaN がなければですが)。

+ +
function compareNumbers(a, b) {
+  return a - b;
+}
+
+ +

比較関数には{{jsxref("Operators/function", "関数式", "", 1)}}を使うと便利です。

+ +
var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+
+ +

ES2015 では{{jsxref("Functions/Arrow_functions", "アロー関数式", "", 1)}}によるより短い構文も利用できます。

+ +
let numbers = [4, 2, 5, 1, 3];
+numbers.sort((a, b) => a - b);
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+ +

オブジェクトはプロパティの値の 1 つを指定して並べ替えることができます。

+ +
var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// 値順にソート
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// 名前順にソート
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // 大文字と小文字を無視する
+  var nameB = b.name.toUpperCase(); // 大文字と小文字を無視する
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+});
+ +

例

+ +

配列の生成、表示、ソート

+ +

以下の例は 4 つの配列を生成し、元の配列を表示したのちに、ソートした配列を表示します。数値の配列は比較関数なしでソートされたのち、比較関数ありでソートされます。

+ +
var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('ソート結果:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('比較関数なしのソート結果:', numberArray.sort());
+console.log('compareNumbers でのソート結果:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('比較関数なしのソート結果:', numericStringArray.sort());
+console.log('compareNumbers でのソート結果:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('比較関数なしのソート結果:', mixedNumericArray.sort());
+console.log('compareNumbers でのソート結果:', mixedNumericArray.sort(compareNumbers));
+
+ +

この例は以下のような出力をもたらします。出力結果が示すように、比較関数が使われた場合、数値はそれが数値か数字の文字列かにかかわらず正しくソートされます。

+ +
stringArray: Blue,Humpback,Beluga
+ソート結果: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+比較関数なしのソート結果: 1,200,40,5
+compareNumbers でのソート結果: 1,5,40,200
+
+numericStringArray: 80,9,700
+比較関数なしのソート結果: 700,80,9
+compareNumbers でのソート結果: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+比較関数なしのソート結果: 1,200,40,5,700,80,9
+compareNumbers でのソート結果: 1,5,9,40,80,200,700
+
+ +

非ASCII文字のソート

+ +

非 ASCII 文字、つまりアクセント記号付き文字 (e, é, è, a, ä など) を含む文字列をソートする場合、英語以外の文字列は {{jsxref("String.localeCompare")}} を使用してください。この関数は、それらの文字を比較して正しい順序で表示することができます。

+ +
var items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items は ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']
+
+ +

map を利用したソート

+ +

compareFunction (比較関数) は、配列内の要素毎に複数回呼び出すことができます。ただ compareFunction の性質によっては、これが多大なオーバーヘッドをもたらす可能性もあります。compareFunction がたくさんの処理を行えば行うほど、そしてソート対象の要素数が多ければ多いほど、ソートに map を利用すると効率が上がるでしょう。すなわち、対象の配列を一度だけ走査してソート対象の実際の値を取り出し、一時的な配列に格納した上でソートを行い、その上で一時的な配列を走査して正しい並び順を実現するやりかたです。

+ +
// ソートする配列
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// temporary array holds objects with position and sort-value
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// sorting the mapped array containing the reduced values
+mapped.sort(function(a, b) {
+  if (a.value > b.value) {
+    return 1;
+  }
+  if (a.value < b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// container for the resulting order
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+
+ +

There is an open source library available called mapsort which applies this approach.

+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.sort")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/splice/index.html b/files/ja/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..3f30251a3e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,160 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - remove + - replace + - splice + - プロトタイプ + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

splice() メソッドは、in place で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

+ +
{{EmbedInteractiveExample("pages/js/array-splice.html")}}
+ + + +

構文

+ +
let arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
+
+ +

引数

+ +
+
start
+
配列を変更する開始位置を表すインデックスです。
+
値が配列の長さより大きい場合は、start は配列の長さに設定されます。この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された item[n*] の数だけ要素を追加します。
+
値が負数の場合は、配列の末尾から要素数を戻ったところから始まります (-1 が原点で、-n は最後の要素から n 番目であることを意味し、したがってインデックスが array.length - n であるのと同等です)。
+
start の絶対値が配列の長さよりも大きい場合は、インデックス 0 から始まります。
+
deleteCount {{optional_inline}}
+
配列の start から取り除く古い要素の数を示す整数です。
+
deleteCount 引数が省略された場合、または array.length - start 以上 (つまり、start から始まり、配列に残る要素の数以上の場合) の場合、start 以降のすべての要素が取り除かれます。
+
+
+

メモ: IE8 では、deleteCount が省略された場合はすべての要素を削除しません。

+
+
+
deleteCount が 0 か負数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります (以下参照)。
+
item1, item2, ... {{optional_inline}}
+
配列に追加する要素で、start から始まります。要素を指定しなかった場合、splice() は単に配列から要素を取り除きます。
+
+ +

返値

+ +

取り除かれた要素を含む配列です。

+ +

要素が 1 つのみ削除された場合は、要素数 1 の配列が返されます。

+ +

要素が削除されなかった場合、空の配列が返されます。

+ +

解説

+ +

取り除こうとする要素数と異なる数の要素を挿入するように指定した場合、関数呼び出しが終わったとき配列は初めと異なる長さになります。

+ +

例

+ +

index 2 の位置 (3番目の要素の前) から 0 個の要素を削除して "drum" を挿入する

+ +
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
+let removed = myFish.splice(2, 0, 'drum')
+
+// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed は [], どの要素も取り除かれていない (空配列)
+ +

index 2 の位置 (3 番目の要素の前) から 0 個の要素を削除して、"drum" と "guitar" を挿入する

+ +
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
+let removed = myFish.splice(2, 0, 'drum', 'guitar')
+
+// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed is [], no elements removed
+
+ +

index 3 の位置 (4番目の要素) から一つ取り除く

+ +
let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
+let removed = myFish.splice(3, 1)
+
+// removed は ["mandarin"]
+// myFish は ["angel", "clown", "drum", "sturgeon"]
+
+ +

index 2 の位置 (3 番目の要素) から 1 つ取り除いて "trumpet" を挿入する

+ +
let myFish = ['angel', 'clown', 'drum', 'sturgeon']
+let removed = myFish.splice(2, 1, 'trumpet')
+
+// myFish は ["angel", "clown", "trumpet", "sturgeon"]
+// removed は ["drum"]
+ +

index 0 の位置 (先頭の要素) から二つ取り除き、そこへ "parrot" と "anemore" と "blue" を挿入する

+ +
let myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
+let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')
+
+// myFish は ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed は ["angel", "clown"]
+ +

配列長 - 3 の位置 (後ろから 3番目) から 2 つ取り除く

+ +
let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
+let removed = myFish.splice(-3, 2)
+
+// myFish は ["parrot", "anemone", "sturgeon"]
+// removed は ["blue", "trumpet"]
+ +

index -2 の位置 (後ろから 2番目) から 1 つ取り除く

+ +
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
+let removed = myFish.splice(-2, 1)
+
+// myFish は ["angel", "clown", "sturgeon"]
+// removed は ["mandarin"]
+ +

index 2 の位置 (3番目の要素) から末端までを取り除く

+ +
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
+let removed = myFish.splice(2)
+
+// myFish は ["angel", "clown"]
+// removed は ["mandarin", "sturgeon"]
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.splice")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/ja/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..b539cfa293 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,179 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - Internationalization + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +
{{JSRef}}
+ +

toLocaleString() メソッドは、配列の要素を表す文字列を返します。配列の要素は、それぞれの toLocaleString メソッドを使い、ロケール固有の文字列に変換されます (例えばカンマ “,”など)。

+ +
{{EmbedInteractiveExample("pages/js/array-tolocalestring.html","shorter")}}
+ +

構文

+ +
arr.toLocaleString([locales[, options]]);
+
+ +

引数

+ +
+
locales {{optional_inline}}
+
BCP 47 言語タグの文字列か、その配列です。locales 引数の一般的な形式と解釈については {{jsxref("Intl")}} ページを参照してください。
+
options {{optional_inline}}
+
設定プロパティのオブジェクトです。数値に関しては {{jsxref("Number.prototype.toLocaleString()")}} を、日付に関しては {{jsxref("Date.prototype.toLocaleString()")}} を見てください。
+
+ +

返値

+ +

配列の要素を表す文字列です。

+ +

ポリフィル

+ +
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length >>> 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k < len
+      while (k < len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+
+ +

Object.defineProperty が利用できないとても古い JavaScript エンジンをサポートする必要がある場合、Array.prototype のメソッドを polyfill するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。

+ +

例

+ +

locales と options の使用

+ +

配列の要素は、その toLocaleString メソッドを使用して文字列に変換されます。

+ + + +

prices 配列内の文字列と数値の通貨を常に表示します。

+ +
var prices = ['￥7', 500, 8123, 12];
+prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+
+ +

さらに多くの例を知りたいなら、 {{jsxref("Intl")}} や {{jsxref("NumberFormat")}}、{{jsxref("DateTimeFormat")}} ページを見てください。

+ +

仕様書

+ + + + + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}
{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.toLocaleString")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/tosource/index.html b/files/ja/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..d9feb311b9 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,69 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Method + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +
{{JSRef}} {{obsolete_header}}
+ +

toSource() メソッドは、配列のソースコードを表す文字列を返します。

+ +

構文

+ +
arr.toSource()
+ +

返り値

+ +

配列のソースコードを表す文字列です。

+ +

解説

+ +

toSource メソッドは以下の値を返します。

+ + + +

このメソッドはたいてい JavaScript によって内部的に呼び出され、コードで明示的に呼び出されることはありません。デバッグ中に toSource を呼び出すことで、あなたは配列の内容を調べることができます。

+ +

例

+ +

配列のソースコードを調べる

+ +

配列のソースコードを調べるには以下のようにします。

+ +
var alpha = new Array('a', 'b', 'c');
+
+alpha.toSource();
+// ['a', 'b', 'c'] が返る
+
+ +

仕様書

+ +

あらゆる標準仕様に組み込まれていません。JavaScript 1.3 で実装されました。

+ +

ブラウザー実装状況

+ + + +

{{Compat("javascript.builtins.Array.toSource")}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html b/files/ja/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..70dd6b5ece --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,73 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +
{{JSRef}}
+ +

toString() メソッドは、指定された配列とその要素を表す文字列を返します。

+ +
{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}
+ +

構文

+ +
arr.toString()
+ +

返値

+ +

配列の要素を表す文字列です。

+ +

解説

+ +

{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の toString メソッドを上書きしています。Array オブジェクトでは、toString メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。

+ +

配列が文字列値として表される必要がある場合や、配列が文字列の結合として参照される時、JavaScript は toString メソッドを自動的に呼び出します。

+ +

ECMAScript 5 でのセマンティック

+ +

JavaScript 1.8.5 （Firefox 4）以降、および ECMAScript 第 5 版では、toString() メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。

+ +

例

+ +

toString を使用する

+ +
const array1 = [1, 2, 'a', '1a'];
+
+console.log(array1.toString());
+// expected output: "1,2,a,1a"
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.toString")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/unobserve/index.html b/files/ja/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..1eafff5efa --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,134 @@ +--- +title: Array.unobserve +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +tags: + - Array + - JavaScript + - Method + - Obsolete +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +
{{JSRef}} {{obsolete_header}}
+ +

Array.unobserve()メソッドは、{{jsxref("Array.observe()")}} で設定された監視を削除するために使われていましたが、非推奨となりブラウザから削除されました。代わりに、一般的な {{jsxref("Proxy")}} オブジェクトを使用してください。

+ +

構文

+ +
Array.unobserve(arr, callback)
+ +

引数

+ +
+
arr
+
監視を停止する配列。
+
callback
+
arr 配列の変更時に毎回呼び出されるのを停止するための、オブザーバへの参照。
+
+ +

説明

+ +

配列からオブザーバを削除するため、Array.unobserve() は {{jsxref("Array.observe()")}} の後に呼び出される必要があります。

+ +

callback は関数への参照とすべきであり、匿名関数ではいけません。なぜなら、この参照は以前のオブザーバを解除するために使用されるからです。callback として匿名関数を使った Array.unobserve() の呼び出しは、オブザーバを削除できないので無意味です。

+ +

例

+ +

配列の監視を削除

+ +
var arr = [1, 2, 3];
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Array.observe(arr, observer);
+​
+arr.push(4);
+// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observer);
+
+arr.pop();
+// callback は呼び出されなかった。
+ +

匿名関数の使用

+ +
var persons = ['Khalid', 'Ahmed', 'Mohammed'];
+
+Array.observe(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.shift();
+// [{type: "splice", object: <arr>, index: 0, removed: [ "Khalid" ], addedCount: 0 }]
+
+Array.unobserve(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.push('Abdullah');
+// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }]
+// callback は常に呼び出される。
+
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatChrome("36")}} [1]{{CompatNo}}{{CompatNo}}{{CompatOpera("23")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatChrome("36")}} [1]{{CompatNo}}{{CompatNo}}{{CompatOpera("23")}}{{CompatNo}}
+
+ +

[1] Chrome 49 で非推奨になりました。

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/unshift/index.html b/files/ja/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..cd4c85714a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,108 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +
{{JSRef}}
+ +

unshift() メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。

+ +
{{EmbedInteractiveExample("pages/js/array-unshift.html")}}
+ +

構文

+ +
arr.unshift(element1[, ...[, elementN]])
+ +

引数

+ +
+
elementN
+
arr の先頭に追加する要素。
+
+ +

返値

+ +

メソッドを呼び出した後のオブジェクトの新しい {{jsxref("Array.length", "length")}} プロパティの値です。

+ +

解説

+ +

unshift メソッドは、与えられた要素を配列のようなオブジェクトの一番最初に挿入します。

+ +

unshift は意図して汎用的です。このメソッドは，配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり，{{jsxref("Function.apply", "適用し", "", 1)}}たりすることができます。 length プロパティ、すなわち連続の最後を示すゼロベースの数値プロパティ、を反映しているため、意味のある振る舞いができない可能性があります。

+ +

複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 unshift を n 個の引数で1回呼び出すのと、1個の引数で n 回 (例えばループを使って) 呼び出すのとでは同じ結果にはなりません。

+ +

例をご覧ください。

+ +
let arr = [4, 5, 6]
+
+arr.unshift(1, 2, 3)
+console.log(arr);
+// [1, 2, 3, 4, 5, 6]
+
+arr = [4, 5, 6] // 配列をリセット
+
+arr.unshift(1)
+arr.unshift(2)
+arr.unshift(3)
+
+console.log(arr)
+// [3, 2, 1, 4, 5, 6]
+
+ +

例

+ +

unshift の使用

+ +
let arr = [1, 2]
+
+arr.unshift(0)               // 呼び出しの返値は 3、新しい配列の長さ
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1)          // 新しい配列の長さは 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-4, -3])        // 新しい配列の長さは 6
+// arr is [[-4, -3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5])  // 新しい配列の長さは 8
+// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.unshift")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/global_objects/array/values/index.html b/files/ja/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..29b90252b6 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,122 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript2015 + - Iterator + - JavaScript + - Method + - Prototype + - メソッド + - 反復子 +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +
{{JSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/js/array-values.html")}}
+ +

構文

+ +
arr.values()
+ +

返値

+ +

新しい {{jsxref("Array")}} iterator オブジェクトです。

+ +

例

+ +

for...of ループを用いた反復処理

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}  //"a" "b" "c" "d" "e"
+
+ +

Array.prototype.values は Array.prototype[Symbol.iterator] の既定の実装です。

+ +
Array.prototype.values === Array.prototype[Symbol.iterator]      //true
+ +

.next() を使用した反復処理

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+var iterator = arr.values();
+iterator.next();               // Object { value: "a", done: false }
+iterator.next().value;         // "b"
+iterator.next()["value"];      // "c"
+iterator.next();               // Object { value: "d", done: false }
+iterator.next();               // Object { value: "e", done: false }
+iterator.next();               // Object { value: undefined, done: true }
+iteraror.next().value;         // undefined
+ +
+

一度だけの使用: 配列の反復子オブジェクトは一度だけの使用またはテンポラリオブジェクトです

+
+ +

例:

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+ var iterator = arr.values();
+ for (let letter of iterator) {
+ console.log(letter);
+} //"a" "b" "c" "d" "e"
+for (let letter of iterator) {
+console.log(letter);
+} // undefined
+
+ +

理由: next().done=true または currentIndex>length が for..of の終了条件だからです。反復処理プロトコルを参照して下さい。

+ +

値: 配列の反復子オブジェクトには値が格納されません。その代わりに、その作成に使用された配列のアドレスが格納されるので、その配列に格納されている値に依存します。

+ +
var arr = ['a', 'b', 'c', 'd', 'e'];
+var iterator = arr.values();
+console.log(iterator);        // Array Iterator {  }
+iterator.next().value;        // "a"
+arr[1]='n';
+iterator.next().value;        //  "n"
+
+ +
+

配列内の値が変化した場合は、配列の反復子オブジェクトの値も変化します。

+
+ + + +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Array.values")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf