diff options
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/array')
46 files changed, 7850 insertions, 0 deletions
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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>@@iterator</strong></code> メソッドは<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">反復プロトコル</a>の一部であり、値の列を同期的に反復する方法を定義します。</p> + +<p><code><strong>@@iterator</strong></code> プロパティの初期値は {{jsxref("Array.prototype.values()", "values()")}} プロパティの初期値と同じ関数オブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Array.prototype.values()", "values()")}} <strong>イテレーター</strong> によって与えられる初期値です。既定では、 <code>arr[Symbol.iterator]</code> を使うと {{jsxref("Array.prototype.values()", "values()")}} を返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Iteration_using_for...of_loop" name="Iteration_using_for...of_loop">for...of ループを用いた反復</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><ul id="letterResult"> +</ul></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">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>"; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Iteration_using_for...of_loop', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/@@iterator')}}</p> + +<h3 id="Alternative_iteration" name="Alternative_iteration">他の反復方法</h3> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Use_Case_for_brace_notation" name="Use_Case_for_brace_notation">括弧表記の使用法</h3> + +<p>この構文をドット記法 (<code>Array.prototype.values()</code>) よりも優先して使用する場合は、事前にどのようなオブジェクトになるのかが分からない場合です。イテレータを受け取り、その値を反復処理する関数があるが、そのオブジェクトが [Iterable].prototype.values メソッドを持っているかどうかわからない場合です。これはStringオブジェクトのような組み込みオブジェクトでも、カスタムオブジェクトでもよいでしょう。これは <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a> オブジェクトのような組込みオブジェクトや、独自オブジェクトである可能性があります。</p> + +<pre class="brush: js notranslate">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 + +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array[@@species]</code></strong> アクセサープロパティは、<code>Array</code> コンストラクターを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Array[Symbol.species] +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Array")}} コンストラクターです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>species</code> アクセサープロパティは、 <code>Array</code> オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Species_in_ordinary_objects" name="Species_in_ordinary_objects">通常のオブジェクトの spicies</h3> + +<p><code>species</code> プロパティは、<code>Array</code> オブジェクトの既定のコンストラクター関数である <code>Array</code> コンストラクターを返します。</p> + +<pre class="brush: js notranslate">Array[Symbol.species]; // Array() 関数</pre> + +<h3 id="Species_in_derived_objects" name="Species_in_derived_objects">派生オブジェクトの spicies</h3> + +<p>派生コレクションオブジェクト (たとえば、独自の配列である <code>MyArray</code>) では、<code>MyArray</code> の species は <code>MyArray</code> コンストラクターです。しかし、派生クラスのメソッドで、親である <code>Array</code> オブジェクトを返すためにこれをオーバーライドしたいかもしれません。</p> + +<pre class="brush: js notranslate">class MyArrayBuffer extends ArrayBuffer { + // MyArray species を親である ArrayBuffer コンストラクタにオーバーライド。 + static get [Symbol.species]() { return ArrayBuffer; } +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>@@unscopable</strong></code> シンボルプロパティには、 ES2015 以前の ECMAScript 標準には含まれていないプロパティ名があります。それらのプロパティは、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 文のバインディングから除外されます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>with</code> バインディングから除外される既定の配列プロパティは次のとおりです。</p> + +<ul> + <li>{{jsxref("Array.prototype.copyWithin()", "copyWithin()")}}</li> + <li>{{jsxref("Array.prototype.entries()", "entries()")}}</li> + <li>{{jsxref("Array.prototype.fill()", "fill()")}}</li> + <li>{{jsxref("Array.prototype.find()", "find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()", "findIndex()")}}</li> + <li>{{jsxref("Array.prototype.includes()", "includes()")}}</li> + <li>{{jsxref("Array.prototype.keys()", "keys()")}}</li> + <li>{{jsxref("Array.prototype.values()", "values()")}}</li> +</ul> + +<p>自作オブジェクトに <code>unscopables</code> を設定する方法については、 {{jsxref("Symbol.unscopables")}} を見てください。</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Use_in_with_environments" name="Use_in_with_environments">with 環境内での使用</h3> + +<p>次のコードは、 ES5 以下であれば正常に動作します。しかし、 ECMAScript 2015 以降では {{jsxref("Array.prototype.keys()")}} メソッドが導入されました。つまり、<code>with</code> 環境内では、 "keys" はメソッドであり、変数ではありません。ここが組込み <code>@@unscopables</code> の役立つ場所です。<code>Array.prototype[@@unscopables]</code> シンボルプロパティが使用されると、配列のいくつかのメソッドが <code>with</code> 文のスコープに入ることを防ぎます。</p> + +<pre class="brush: js notranslate">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array()</code></strong> コンストラクターは {{jsxref("Array")}} オブジェクトを生成するために使用します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] + +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>JavaScript の配列は、与えられた要素で初期化されますが、 <code>Array</code> コンストラクターに単一の引数が渡され、その引数が数値であった場合は例外です (下記の arrayLength 引数を参照してください)。なお、この特殊な場合は JavaScript の配列が <code>Array</code> コンストラクターで生成されたときのみであり、ブラケット構文で配列リテラルを作成した場合は当てはまりません。</dd> + <dt><code>arrayLength</code></dt> + <dd><code>Array</code> コンストラクターに渡された唯一の引数が 0 から 2<sup>32</sup>-1 の間 (両端を含む) の整数であった場合は、新しい JavaScript の配列を返し、その <code>length</code> プロパティがその値になります (<strong>注:</strong> これは <code>arrayLength</code> 個の空のスロットを持つ配列であり、実際に <code>undefined</code> の値が入ったスロットではありません)。この引数がそれ以外の数値であった場合は、 {{jsxref("RangeError")}} 例外が発生します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Array_literal_notation" name="Array_literal_notation">配列リテラル記法</h3> + +<p>配列は<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">リテラル</a>記法を使用して生成することができます。</p> + +<pre class="brush: js notranslate">let fruits = ['りんご', 'バナナ']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "りんご" +</pre> + +<h3 id="Array_constructor_with_a_single_parameter" name="Array_constructor_with_a_single_parameter">単一の引数を持つ Array コンストラクター</h3> + +<p>配列は単一の数値の引数を持つコンストラクターで生成することができます。配列は <code>length</code> プロパティにその値が設定されており、配列の要素は空スロットになります。</p> + +<pre class="brush: js notranslate">let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +</pre> + +<h3 id="Array_constructor_with_multiple_parameters" name="Array_constructor_with_multiple_parameters">複数の引数を持つ Array コンストラクター</h3> + +<p>2つ以上の引数がコンストラクターに渡された場合、与えられた要素を持つ {{jsxref("Array")}} が生成されます。</p> + +<pre class="brush: js notranslate">let fruits = new Array('りんご', 'バナナ'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "りんご" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.Array")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}} クラス</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>concat()</strong></code> メソッドは、2つ以上の配列を結合するために使用します。このメソッドは既存の配列を変更せず、新しい配列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html","shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>new_array</var> = <var>old_array</var>.concat([<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>value<em>N</em></code> {{optional_inline}}</dt> + <dd>新しい配列に連結する配列や値です。すべての <code>value<em>N</em></code> 引数が省略された場合、 <code>concat</code> は呼び出された既存の配列のシャローコピーを返します。詳しくは下記の解説をお読みください。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} インスタンス。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>concat</code> は、メソッドを呼び出した <code>this</code> オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。</p> + +<p><code>concat</code> は <code>this</code> や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。元の配列の要素は以下のようにして新しい配列にコピーされます。</p> + +<ul> + <li>オブジェクトの参照 (実際のオブジェクトではなく): <code>concat</code> はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。これはつまり、もし参照されているオブジェクトが修正されれば、その変更は元の配列と新しい配列の両方に現れるわけです。</li> + <li>文字列や数値、真偽値 ({{jsxref("Global_Objects/String", "String")}} オブジェクトや {{jsxref("Global_Objects/Number", "Number")}} オブジェクト、{{jsxref("Global_Objects/Boolean", "Boolean")}} オブジェクトではなく): <code>concat</code> は文字列や数値の値を新しい配列にコピーします。</li> +</ul> + +<div class="note"> +<p><strong>注:</strong> 連結した配列/値は元の配列には手を付けません。さらに、新しい配列へどんな操作をしても、元の配列には影響しません。逆もまた同様です（要素がオブジェクト参照ではない場合のみです）。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="2_つの配列を連結させる">2 つの配列を連結させる</h3> + +<p>以下のコードは 2 つの配列を連結させます。</p> + +<pre class="brush: js notranslate">const letters = ['a', 'b', 'c']; +const numbers = [1, 2, 3]; + +letters.concat(numbers); +// result in ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="3_つの配列を連結させる">3 つの配列を連結させる</h3> + +<p>以下のコードは 3 つの配列を連結させます。</p> + +<pre class="brush: js notranslate">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] +</pre> + +<h3 id="配列に値を連結させる">配列に値を連結させる</h3> + +<p>以下のコードは配列に値を連結させます。</p> + +<pre class="brush: js notranslate">const letters = ['a', 'b', 'c']; + +const alphaNumeric = letters.concat(1, [2, 3]); + +console.log(alphaNumeric); +// results in ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="ネストした配列を連結する">ネストした配列を連結する</h3> + +<p>以下のコードはネストした配列同士を連結させます。また、元の配列からの参照を保持しています。</p> + +<pre class="brush: js notranslate">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]] +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.concat")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} - 配列末尾への要素の追加 / 配列末尾の要素の削除</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} - 配列の先頭に要素を追加 / 配列の先頭の要素を削除</li> + <li>{{jsxref("Array.splice", "splice")}} - 配列の指定位置に要素を追加 / 指定位置の要素を削除</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – 平坦化を制御</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>copyWithin()</strong></code> メソッドは、サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.copyWithin(<var>target[</var>, <var>start</var>[, <var>end</var>]])</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>target</code></dt> + <dd>シーケンスのコピー先となる、0 から始まるインデックスです。負の場合、<code>target</code> は最後から数えられます。</dd> + <dd><code>target</code> が <code>arr.length</code> 以上の場合、何もコピーされません。 <code>target</code> が <code>start</code> より後に配置されている場合、コピーされたシーケンスは <code>arr.length</code> に合うように切り詰められます。</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>要素のコピー元の始まりを表す、0 から始まるインデックスです。負の場合、 <code>start</code> は最後から数えられます。</dd> + <dd><code>start</code> が省略された場合、<code>copyWithin</code> は最初の要素からコピーします（つまり、初期値は 0 です）。</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>要素のコピー元の末尾を表す、0 から始まるインデックスです。 <code>copyWithin</code> のコピーは <code>end</code> を含みません。負の場合、 <code>end</code> は最後から数えられます。</dd> + <dd><code>end</code> が省略された場合、 <code>copyWithin</code> は最後までコピーします（つまり、初期値は <code>arr.length</code> です）。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>変更された配列です。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>copyWithin</code> メソッドは C 言語や C++ 言語の <code>memmove</code> のような動きをし、{{jsxref("Array")}} のデータをシフトさせる高いパフォーマンスのメソッドです。これは特に {{jsxref("TypedArray/copyWithin", "TypedArray")}} の同名メソッドに当てはまります。シーケンスはコピーされ貼り付けられる処理が一命令で行われます。コピー＆ペースト領域が重なっている場合でも、ペーストされたシーケンスはコピーされた値を持ちます。</p> + +<p><code>copyWithin</code> 関数は、ジェネリック関数として動作します。<code>this</code> 値が {{jsxref("Array")}} オブジェクトである必要はありません。</p> + +<p><code>copyWithin</code> は<em>可変メソッド</em>であり、<code>this</code> オブジェクト自身を変更し、コピーではなく、オブジェクト自身を返します。</p> + + + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js notranslate">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 + }); +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="copyWithin_の使用">copyWithin の使用</h3> + +<pre class="brush: js notranslate">[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] +</pre> + + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>entries()</code></strong> メソッドは、配列内の各要素に対するキー/値のペアを含む新しい <strong>Array イテレーター</strong>オブジェクトを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>array</var>.entries()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} イテレーターオブジェクトを返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Iterating_with_index_and_element" name="Iterating_with_index_and_element">インデックスと要素の反復処理</h3> + +<pre class="brush:js notranslate">const a = ['a', 'b', 'c']; + +for (const [index, element] of a.entries()) + console.log(index, element); + +// 0 'a' +// 1 'b' +// 2 'c' +</pre> + +<h3 id="Using_a_for…of_loop" name="Using_a_for…of_loop"><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> loop で使う</h3> + +<pre class="brush:js notranslate">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復処理プロトコル</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>every()</code></strong> メソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html","shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.every(<var>callback</var>(<var>element</var>[, <var>index</var>[, <var>array</var>]])[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd>各要素に対してテストを実行する関数です。次の 3 つの引数を取ります。 + <dl> + <dt><code><var>element</var></code></dt> + <dd>現在処理されている要素です。</dd> + <dt><code><var>index</var></code> {{Optional_inline}}</dt> + <dd>現在処理されている要素の添字です。</dd> + <dt><code><var>array</var></code> {{Optional_inline}}</dt> + <dd><code>every</code> が実行されている配列です。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{Optional_inline}}</dt> + <dd><code><var>callback</var></code> を実行するときに <code>this</code> として使用すされる値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code><var>callback</var></code> 関数が配列のすべての要素について{{Glossary("truthy", "真値")}}を返した場合は <strong><code>true</code></strong>。それ以外は <strong><code>false</code></strong>。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>every</code> は、与えられた <code><var>callback</var></code> 関数を、配列に含まれる各要素に対して一度ずつ、<code><var>callback</var></code> が{{Glossary("falsy", "偽値")}}を返す要素が見つかるまで呼び出します。そのような要素が見つかると、<code>every</code> メソッドはただちに <code>false</code> を返します。<code><var>callback</var></code> がすべての要素に対して{{Glossary("truthy", "真値")}}を返した場合、<code>every</code> は <code>true</code> を返します。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: このメソッドを空の配列に対して呼び出すと、無条件に <code>true</code> を返します。</p> +</div> + +<p><code><var>callback</var></code> は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。</p> + +<p><code><var>callback</var></code> は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。</p> + +<p><code><var>thisArg</var></code> 引数が <code>every</code> に与えられると、それがコールバックの <code>this</code> として使用されます。それ以外の場合は <code>undefined</code> が <code>this</code> の値として使われます。<code><var>callback</var></code> が最終的に監視できる <code>this</code> の値は、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this">関数から見た <code>this</code> の決定に関する一般的なルール</a>によって決定されます。</p> + +<p><code>every</code> は呼び出された配列を変化させません。</p> + +<p><code>every</code> によって処理される要素の範囲は、<code><var>callback</var></code> が最初に呼び出される前に設定されます。<code><var>callback</var></code> は、<code>every</code> の呼び出しが開始された後に追加された要素に対しては、実行されません。既存の配列要素が変更されたり、削除された場合、<code><var>callback</var></code> に渡される値は <code>every</code> がそれらを訪れた時点での値になり、<code>every</code> が削除された要素を訪問することはありません。</p> + +<p><code>every</code> は数学における「∀ （すべての / for all）」記号と同様のふるまいをします。具体的に言うと、空の配列に対しては <code>true</code> を返します。(<a href="https://en.wikipedia.org/wiki/Empty_set#Properties">空集合</a>のすべての要素が与えられた任意の条件を満たすことは<a href="https://en.wikipedia.org/wiki/Vacuous_truth">空虚に真</a>です。)</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>every</code> は ECMA-262 標準に第5版で追加されたもので、この標準のそれ以外の実装には存在しないかもしれません。これを回避するには、スクリプトの最初に以下のコードを挿入することで、ネイティブで対応していない実装でも <code>every</code> を使用できるようにすることができます。</p> + +<p>このアルゴリズムは、<code>Object</code> と <code>TypeError</code> が元の値を持ち、<code><var>callbackfn</var>.call</code> が {{jsxref("Function.prototype.call")}} の元の値に評価されると仮定するもので、ECMA-262 第5版で指定されているものと全く同じです。</p> + +<pre class="brush: js notranslate">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; + }; +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Testing_size_of_all_array_elements" name="Testing_size_of_all_array_elements">すべての配列要素の大きさをテストする</h3> + +<p>次の例は、配列内のすべての要素が 10 よりも大きいかどうかテストします。</p> + +<pre class="brush: js notranslate">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Using_arrow_functions" name="Using_arrow_functions">アロー関数の使用</h3> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>はより短い構文で同じテストを提供します。</p> + +<pre class="brush: js notranslate">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h3 id="初期配列への影響_変更、追加、削除">初期配列への影響 (変更、追加、削除)</h3> + +<p>次の例は、配列が変更されたときに <code>every</code> メソッドの動作をテストするものです。</p> + +<pre class="brush: js notranslate">// --------------- +// 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</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>fill()</strong></code> メソッドは、開始インデックス（デフォルトは <code>0</code>）から終了インデックス（デフォルトは <code>array.length</code>）までのすべての要素を、静的な値に変更した配列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>value</code></dt> + <dd>配列に設定する値です。</dd> + <dt><code>start</code>＆nbp；{{optional_inline}}</dt> + <dd>開始する位置です。既定値は 0 です。</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>終了する位置です。既定値は <code>this.length</code> です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>変更された配列です。</p> + +<h2 id="Description" name="Description">説明</h2> + +<ul> + <li><code>start</code> が負の場合 <code>array.length + start</code> として扱われます。</li> + <li><code>end</code> が負の場合 <code>array.length + end</code> として扱われます。</li> + <li><code>fill</code> メソッドはジェネリック関数であり、<code>this</code> が配列オブジェクトである必要はありません。</li> + <li><code>fill</code> メソッドは可変メソッドで、配列のコピーではなく、変更された配列そのものを返します。</li> + <li>最初のパラメータがオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します。</li> +</ul> + + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js notranslate">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; + } + }); +} +</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> が利用できないとても古い JavaScript エンジンをサポートする必要がある場合、<code>Array.prototype</code> のメソッドを polyfill するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_fill" name="Using_fill">fill を使用する</h3> + +<pre class="brush: js notranslate">[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" }] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>filter()</code></strong> メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる<strong>新しい配列を生成</strong>します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html","shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">let <var>newArray</var> = <var>arr</var>.filter(<var>callback</var>(<var>element</var>[, <var>index</var>, [<var>array</var>]])[, <var>thisArg</var>]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>配列の各要素に対して実行するテスト関数です。この関数が <code>true</code> を返した要素は残され、<code>false</code> を返した要素は取り除かれます。</p> + + <p>この関数は３つの引数を受け付けます。</p> + + <dl> + <dt><code><var>element</var></code></dt> + <dd>配列内で処理中の現在の要素です。</dd> + <dt><code><var>index</var></code>{{optional_inline}}</dt> + <dd>配列内で処理中の現在の要素の位置です。</dd> + <dt><code><var>array</var></code>{{optional_inline}}</dt> + <dd><code>filter</code> メソッドが実行されている配列です。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code>{{optional_inline}}</dt> + <dd><code><var>callback</var></code> を実行するときに <code>this</code> として使用する値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>テストに合格した要素からなる新しい配列です。テストに合格した要素がなかった場合は、空の配列が返されます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>filter()</code> は、与えられた <code><var>callback</var></code> 関数を配列の各要素に対して一度ずつ呼び出し、<code><var>callback</var></code> が <a href="/ja/docs/Glossary/Truthy"><code>true</code> と評価される値</a>を返したすべての要素からなる新しい配列を生成します。<code><var>callback</var></code> は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。<code><var>callback</var></code> によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。</p> + +<p><code><var>callback</var></code> は 3 つの引数と共に呼び出されます。</p> + +<ol> + <li>要素の値</li> + <li>要素の添字</li> + <li>走査されている配列オブジェクト</li> +</ol> + +<p><code>filter</code> に引数 <code><var>thisArg</var></code> が与えられた場合、そのオブジェクトは <code><var>callback</var></code> 関数内の <code>this</code> 値として使われます。そうでない場合、 <code>undefined</code> が <code>this</code> 値として使われます。<code><var>callback</var></code> 関数内の最終的な <code>this</code> 値は<a href="/ja/docs/Web/JavaScript/Reference/Operators/this">関数内の <code>this</code> を決定する一般的ルール</a>に従って決められます。</p> + +<p><code>filter()</code> は呼び出された配列を変化させません。</p> + +<p><code>filter()</code> によって処理される配列要素の範囲は、<code><var>callback</var></code> が最初に呼び出される前に設定されます。<code>filter()</code> の呼び出しが開始された後に (<code><var>callback</var></code> から) 追加された配列要素に対しては、<code><var>callback</var></code> は実行されません。既存の配列要素が削除された場合は、同様にそれらの要素は処理されません。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>filter()</code> は ECMA-262 標準の第5版で追加されました。したがって、この標準のすべての実装に存在するとは限りません。</p> + +<p>回避策として、スクリプトの最初に以下のコードを挿入して、ネイティブに対応していない ECMA-262 の実装で filter() を使用できるようにすることができます。このアルゴリズムは ECMA-262 第5版で指定されているものと完全に等価で、 <code>fn.call</code> が {{jsxref("Function.prototype.bind()")}} の元の値を評価し、 {{jsxref("Array.prototype.push()")}} が元の値を持つことを仮定しています。</p> + +<pre class="brush: js notranslate">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; + }; +}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Filtering_out_all_small_values" name="Filtering_out_all_small_values">小さい値をすべて取り除く</h3> + +<p>次の例では、<code>filter()</code> を使って <code>10</code> 未満の値を持つ要素をすべて取り除いた配列を生成します。</p> + +<pre class="brush: js notranslate">function isBigEnough(value) { + return value >= 10 +} + +let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) +// filtered は [12, 130, 44] +</pre> + +<h3 id="Find_all_prime_numbers_in_an_array" name="Find_all_prime_numbers_in_an_array">配列内の素数をすべて検索する</h3> + +<p>以下の例は配列内のすべての素数を返します。</p> + +<pre class="notranslate"><code>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]</code></pre> + +<h3 id="Filtering_invalid_entries_from_JSON" name="Filtering_invalid_entries_from_JSON">JSON の不正な内容を取り除く</h3> + +<p>次の例では、<code>filter()</code> を使って <code>id</code> の数値が 0 以外の要素だけに絞った JSON を生成します。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Searching_in_array" name="Searching_in_array">配列内の検索</h3> + +<p>次の例では <code>filter()</code> を使って検索条件で配列の絞り込みをしています。</p> + +<pre class="brush: js notranslate">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']</pre> + +<h4 id="ES2015_Implementation" name="ES2015_Implementation">ES2015 版の実装</h4> + +<pre class="brush: js notranslate">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'] + +</pre> + +<h3 id="初期の配列への影響_変更、追加、削除">初期の配列への影響 (変更、追加、削除)</h3> + +<p>以下の例は、配列が変更された時の <code>filter</code> の動作をテストするものです。</p> + +<pre class="brush: js notranslate">// 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"]</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>find()</strong></code> メソッドは、提供されたテスト関数を満たす配列内の <strong>最初の要素</strong> の <strong>値</strong> を返します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<ul> + <li>配列内で見つかった要素の<strong>添字</strong>が必要な場合は、{{jsxref("Array.findIndex", "findIndex()")}} を使用してください。</li> + <li><strong>値の添字</strong>を検索する必要がある場合は、{{jsxref("Array.prototype.indexOf()")}} を使用してください。({{jsxref("Array.findIndex", "findIndex()")}} と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。)</li> + <li>配列内に値が<strong>存在する</strong>かどうかを調べる必要がある場合は、{{jsxref("Array.prototype.includes()")}} を使用してください。</li> + <li>指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、{{jsxref("Array.prototype.some()")}} を使用してください。</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.find(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd>配列内の各要素に対して実行する関数で、次の 3 つの引数を取ります。 + <dl> + <dt><code><var>element</var></code></dt> + <dd>配列内で現在処理されている要素です。</dd> + <dt><code><var>index</var></code> {{optional_inline}}</dt> + <dd>配列内で現在処理されている要素の添字 (位置) です。</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd><code>find</code> を呼び出した元の配列です。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd><code><var>callback</var></code> 内で {{jsxref("Operators/this", "this")}} として使われるオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列の中で、提供されたテスト関数を満足する<strong>最初の要素</strong>の<strong>値</strong>です。見つからなかった場合は {{jsxref("undefined")}} を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>find</code> メソッドは、配列のそれぞれの添字に対して一度ずつ、<code><var>callback</var></code> 関数を実行し、<code><var>callback</var></code> 関数が {{glossary("truthy")}} な値を返すまで繰り返します。その場合、<code>find</code> は直ちにその要素の値を返します。そうでなければ、<code>find</code> は {{jsxref("undefined")}} を返します。</p> + +<p><code><var>callback</var></code> は、値が割り当てられているものに限らず、配列中の<em>すべて</em>の添字に対して呼び出されます。すなわち、疎配列では値が割り当てられているもののみを呼び出すメソッドに比べて効率的ではないことを意味します。</p> + +<p><code><var>thisArg</var></code> 引数が <code>find</code> に与えられた場合、<code><var>callback</var></code> の呼び出しのたびに、その内部で <code>this</code> 値として使用されます。この引数を省略した場合は {{jsxref("undefined")}} が使用されます。</p> + +<p><code>find</code> は、呼び出した配列を変更 (mutate) しませんが、<code><var>callback</var></code> で提供された関数は変更する可能性があります。その場合、<code>find</code> によって処理される各要素は、最初に <code><var>callback</var></code> が呼び出される<em>前に</em>設定されます。したがって、</p> + +<ul> + <li><code><var>callback</var></code> は <code>find</code> の呼び出しが始まった後に追加された要素に対しては実行されません。</li> + <li>配列の、既存のまだ呼び出していない要素が <code><var>callback</var></code> によって変更された場合、<code><var>callback</var></code> に渡される値は <code>find</code> がその要素の添字を処理した時点での値になります。</li> + <li>{{jsxref("delete", "削除")}}された要素も処理されます。</li> +</ul> + + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>このメソッドは、ECMAScript 2015 仕様書で追加されたものであり、すべての JavaScript 実装環境で使用できるとは限りません。しかし、<code>Array.prototype.find</code> のポリフィルを以下のスニペットで使用できます。</p> + +<pre class="brush: js notranslate">// 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 + }); +} +</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> に対応していない、本当に古い JavaScript エンジンに対応する必要がある場合は、列挙不可に設定することができないため、<code>Array.prototype</code> のポリフィルをまったく使用しないのが最善です。</p> + + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Find_an_object_in_an_array_by_one_of_its_properties" name="Find_an_object_in_an_array_by_one_of_its_properties">配列内のオブジェクトをプロパティの一つで検索</h3> + +<pre class="brush: js notranslate">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 }</pre> + +<h4 id="Using_arrow_function_and_destructuring" name="Using_arrow_function_and_destructuring">アロー関数と分割の使用</h4> + +<pre class="brush: js notranslate">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 }</pre> + +<h3 id="Find_a_prime_number_in_an_array" name="Find_a_prime_number_in_an_array">配列内の素数の検索</h3> + +<p>次の例は、配列内の素数を探します (配列内に素数が見つからない場合は {{jsxref("undefined")}} を返します)。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>以下の例は存在せず削除された要素が処理<em>される</em>こと、コールバックに渡される値が処理時点での値であることを示しています。</p> + +<pre class="brush: js notranslate">// 添字が 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 +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – インデックスを見つけて返す</li> + <li>{{jsxref("Array.prototype.includes()")}} – 配列内に値が存在するかどうかをテストする</li> + <li>{{jsxref("Array.prototype.filter()")}} – マッチしない要素をすべて削除する</li> + <li>{{jsxref("Array.prototype.every()")}} – すべての要素をテストする</li> + <li>{{jsxref("Array.prototype.some()")}} – 1つの要素が一致するまでテストする</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>findIndex()</strong></code> メソッドは、配列内の<strong>指定されたテスト関数を満たす</strong>最初の要素の<strong>位置</strong>を返します。テスト関数を満たす要素がない場合を含め、それ以外の場合は <code>-1</code> を返します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>{{jsxref("Array.find", "find()")}} メソッドも参照してください。このメソッドは、配列内で見つかった要素の位置ではなく、<strong>値</strong> を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>( <var>element</var>[, <var>index</var>[, <var>array</var>]] )[, <var>thisArg</var>]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>配列内のそれぞれの値に対して実行される関数で、条件を満たす要素が発見されたことを示す <code>true</code> が返るまで続けられます。</p> + + <p>３つの引数を取ります。</p> + + <dl> + <dt><code><var>element</var></code></dt> + <dd>配列内で現在処理されている要素。</dd> + <dt><code><var>index</var></code> {{optional_inline}}</dt> + <dd>配列内で現在処理されている要素の位置。</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd><code>findIndex()</code> を呼び出した元の配列。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd>任意で、 <code><var>callback</var></code> を実行する時に <code>this</code> として使うオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>テストを満たした配列の要素の位置を返します。それ以外の場合は、 <code>-1</code> を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>findIndex()</code> メソッドは、配列のそれぞれの位置に対して <code><var>callback</var></code> を１回ずつ呼び出し、 <code><var>callback</var></code> が{{Glossary("truthy", "真値")}}を返すものを見つけるまで繰り返します。</p> + +<p>そのような要素が見つかると、 <code>findIndex()</code> はすぐにその要素の位置を返します。 <code><var>callback</var></code> が真値を返すと (または配列の <code>length</code> が <code>0</code> であると)、 <code>findIndex()</code> は <code>-1</code> を返します。</p> + +<div class="blockIndicator note"> +<p><strong>極端な場合の警告:</strong> {{jsxref("Array.some()")}} などの他の配列メソッドとは異なり、 <code><var>callback</var></code> は値が割り当てられていない位置でも実行されます。</p> +</div> + +<p><code><var>callback</var></code> は３つの引数で呼び出されます。</p> + +<ol> + <li>その要素の値</li> + <li>その要素の位置</li> + <li>走査されている配列オブジェクト</li> +</ol> + +<p><code>findIndex</code> に <code>thisArg</code> 引数を与えた場合、各 <code>callback</code> の呼び出し時に、その与えたオブジェクトが、<code>this</code> として使用されます。この引数を省略した場合、<code>this</code> は {{jsxref("undefined")}} になります。</p> + +<p><code>findIndex()</code> で処理される要素の範囲は、 <code><var>callback</var></code> が最初に呼び出される前に設定されます。 <code><var>callback</var></code> は最初の <code>findIndex()</code> の呼び出し以降に配列に追加された要素は処理しません。配列内で未処理の既存の要素が <code><var>callback</var></code> によって変更された場合、 <code><var>callback</var></code> へ渡される値は <code>findIndex()</code> がその要素の位置を処理する時点での値になります。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">削除</a>された値も処理対象になります。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js">// 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 + }); +} +</pre> + +<p>もし、本当に {{jsxref("Object.defineProperty")}} に対応していない古い JavaScript エンジンに対応する必要があるのであれば、 <code>Array.prototype</code> メソッドに対してポリフィルを使用しないようにしないと、これらを列挙不可能にすることができません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Find_the_index_of_a_prime_number_in_an_array" name="Find_the_index_of_a_prime_number_in_an_array">配列内の素数の位置を検索する</h3> + +<p>次の例では、配列の中で素数の入った最初の要素の位置を返し、素数が見つからなかった場合は <code>-1</code> を返します。</p> + +<pre class="brush: js">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) +</pre> + +<h3 id="Find_index_using_arrow_function" name="Find_index_using_arrow_function">アロー関数を使用して位置を検索する</h3> + +<p>次の例では、アロー関数を使用してフルーツの位置を検索しています。</p> + +<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>flat()</strong></code> メソッドは、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-flat.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<em>[depth]</em>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>ネストされた配列構造で、どの程度の深さをフラット化するか指定する深さレベルです。既定値は 1 です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>サブ配列の要素を結合した新しい配列。</p> + +<h2 id="Alternatives" name="Alternatives">代替手段</h2> + +<h3 id="reduce_and_concat" name="reduce_and_concat">reduce と concat</h3> + +<pre class="brush: js notranslate">const arr = [1, 2, [3, 4]]; + +// 単一レベルの配列にする +arr.flat(); +// 次のものと同様 +arr.reduce((acc, val) => acc.concat(val), []); +// [1, 2, 3, 4] + +// または、分割代入の構文を使用して +const flattened = arr => [].concat(...arr); +</pre> + +<h3 id="reduce_concat_isArray_recursivity" name="reduce_concat_isArray_recursivity">reduce + concat + isArray + 再帰</h3> + +<pre class="brush: js notranslate">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] +</pre> + +<h3 id="Use_a_stack" name="Use_a_stack">スタックの使用</h3> + +<pre class="brush: js notranslate">// 再帰を使わずにスタックを使用して平坦化 +// 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] +</pre> + +<h3 id="Use_Generator_function" name="Use_Generator_function">Generator 関数の使用</h3> + +<pre class="brush: js notranslate">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] +</pre> + +<div class="hidden"> +<p>この記事にポリフィルを追加しないでください。参考までに、<a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a> をチェックしてください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Flattening_nested_arrays" name="Flattening_nested_arrays">ネストされた配列の平坦化</h3> + +<pre class="brush: js notranslate">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] +</pre> + +<h3 id="Flattening_and_array_holes" name="Flattening_and_array_holes">平坦化と配列の穴</h3> + +<p>flat メソッドは配列内の空要素を削除します。</p> + +<pre class="brush: js notranslate">const arr5 = [1, 2, , 4, 5]; +arr5.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.flat', 'Array.prototype.flat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>flatMap()</strong></code> メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは、{{jsxref("Array.prototype.map","map()")}} の後に深さ 1 の {{jsxref("Array.prototype.flat","flat()")}} を行うのと同じですが、これら 2 つのメソッドを別々にコールするよりもわずかに効率的です。</p> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // return element for new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>配列で現在処理されている要素です。</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>配列で現在処理されている要素のインデックスです。</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd><code>map</code> が呼び出された配列です。</dd> +</dl> + +<dl> + <dt><code>callback</code></dt> + <dd>新しい配列の要素を生成する関数。3 つの引数を受け取ります。</dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd><code>callback</code> を実行するときに <code>this</code> として使用する値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列です。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>コールバック関数の詳細な説明は {{jsxref("Array.prototype.map()")}} を参照してください。<code>flatMap</code> メソッドは、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> の後に深さ 1 の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> を呼び出すのと同じです。</p> + +<h3 id="Alternative" name="Alternative">代替</h3> + +<h4 id="reduce_and_concat" name="reduce_and_concat"><code>reduce()</code> と <code>concat()</code></h4> + +<pre class="brush: js notranslate">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] +</pre> + +<p>ただし、これは非効率的であり、大きな配列の場合は避けるべきであることに注意してください。処理ごとにガベージコレクションが必要な新しい一時配列を作成し、要素を単に追加するのではなく、現在のアキュムレータ配列から新しい配列に要素をコピーします。</p> + +<div class="hidden"> +<p>Please do not add polyfills on this article. For reference, please check: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="map_and_flatMap" name="map_and_flatMap"><code>map()</code> と <code>flatMap()</code></h3> + +<pre class="brush: js notranslate">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]] +</pre> + +<p>上記は map を使用することでも実現できますが、ここでは <code>flatMap</code> の使用方法をよりよく示す例を紹介します。</p> + +<p>文章のリストから単語のリストを生成してみましょう。</p> + +<pre class="brush: js notranslate">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"]</pre> + +<p>出力リストの長さは入力リストの長さとは異なる場合があることに注意してください。</p> + +<h3 id="For_adding_and_removing_items_during_a_map" name="For_adding_and_removing_items_during_a_map"><code>map()</code> のアイテムの追加と削除</h3> + +<p><code>flatMap</code> は、<code>map</code> 中にアイテムの追加と削除（アイテムの数を変更）を行う方法として利用できます。つまり、常に<em>一対一</em>ではなく、<em>多くのアイテムを多くのアイテムに</em>（入力されたアイテムを個別に扱うことで）マップできるようになります。この意味では、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a> の逆のような働きをします。単純に、アイテムを保持するには 1 要素の配列を返し、アイテムを追加するには複数要素の配列を返し、アイテムを削除するには 0 要素の配列を返します。</p> + +<pre class="brush: js notranslate">// 負の数をすべて取り除き、奇数を偶数と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] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>forEach()</code></strong> メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.forEach(<var>callback(currentValue[, index[, array]]) { +</var> // execute something +<var>}</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd>各要素に対して実行するコールバック関数で、1 つから 3 つの引数を受け付けます。</dd> + <dd> + <dl> + <dt><code><var>currentValue</var></code></dt> + <dd>現在処理されている配列の要素です。</dd> + <dt><code><var>index</var></code> {{optional_inline}}</dt> + <dd>配列内の <code><var>currentValue</var></code> の添字です。</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd><code>forEach()</code> が呼び出されている配列です。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd><code><var>callback</var></code> 内で <code>this</code> として使用する値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>forEach()</code> は、与えられた関数 <code><var>callback</var></code> を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。インデックスプロパティが削除されていたり、初期化されていなかったりした場合は呼び出されません。(疎らな配列については、<a href="#sparseArray">下記の例を参照</a>。)</p> + +<p><code><var>callback</var></code> は次の 3 つの引数で呼び出されます。</p> + +<ol> + <li>要素の値</li> + <li>要素のインデックス</li> + <li>走査されている配列</li> +</ol> + +<p><code>forEach()</code> に <code><var>thisArg</var></code> 引数が与えられると、<code><var>callback</var></code> の呼び出し時にそのオブジェクトが <code><var>thisArg</var></code> として使用されます。<code><var>callback</var></code> によって究極に管理される <code>this</code> の値は、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this">関数から見える <code>this</code> を特定する一般規則</a>に従います。</p> + +<p><code>forEach()</code> によって処理される配列要素の範囲は、<code><var>callback</var></code> が最初に呼び出される前に設定されます。<code>forEach()</code> の呼び出しが開始された後に追加された配列要素に対しては、<code><var>callback</var></code> は実行されません。既存の配列要素が変更または削除された場合、<code><var>callback</var></code> に渡される値は <code>forEach()</code> がそれらを参照した時点での値になります。削除された配列要素を参照することはありません。既に参照された配列要素がイテレーションの間 (e.g. {{jsxref("Array.prototype.shift()", "shift()")}}を使用して) に削除された場合、後の要素は飛ばされます。(<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Modifying_the_array_during_iteration">下記の例を参照してください</a>。)</p> + +<p><code>forEach()</code> は配列の各要素に対して <code><var>callback</var></code> 関数を一度ずつ実行します。{{jsxref("Array.prototype.map()", "map()")}} や {{jsxref("Array.prototype.reduce()", "reduce()")}} と異なり、返値は常に {{jsxref("undefined")}} であり、チェーンできません。チェーンの最後に副作用を生じさせるのが典型的な使用法です。</p> + +<p><code>forEach()</code> は呼び出された配列を変化させません。(ただし <code><var>callback</var></code> が変化させる可能性があります)</p> + +<div class="note"> +<p>例外を発生する以外の方法で、<code>forEach()</code> ループを止めることはできません。ループ中に中断する必要がある場合、<code>forEach()</code> メソッドは適切な方法ではありません。</p> + +<p>早期終了を行うには下記のような手段が適しています。</p> + +<ul> + <li>単純な <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループ</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> / <a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> ループ</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>他の Array のメソッドである {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}} は、配列の要素を検査する際、truthy の値を返すことで以降の繰り返しが必要であるかどうかを決めます。</p> +</div> + +<div class="note"> +<h4 id="forEach_expects_a_synchronous_function" name="forEach_expects_a_synchronous_function">forEach は同期関数を期待する</h4> +<code>forEach</code> はプロミスを待ちません。<code>forEach</code> のコールバックとしてプロミス (または非同期関数) を使用する場合は、その意味合いを理解しておくようにしてください。 + +<h5 id="Example_Code" name="Example_Code">コード例</h5> + +<pre class="brush: js notranslate">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 +</pre> +</div> + + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>forEach()</code> は ECMA-262 規格の第 5 版で追加されたもので、この規格のすべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に以下のコードを挿入して、ネイティブにサポートされていない実装でも <code>forEach</code> を使用できるようにします。</p> + +<p>このアルゴリズムは、{{jsxref("Object")}} と {{jsxref("TypeError")}} が元の値を持ち、<code><var>fun</var>.call</code> が {{jsxref("Function.prototype.call()")}} の元の値に評価されると仮定すると、ECMA-262 規格の第 5 版で指定されているものと全く同じです。</p> + +<pre class="brush: js notranslate">// 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 + }; +}</pre> + + + + + + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="sparseArray" name="sparseArray">初期化されていない値については何もしない (疎らな配列)</h3> + +<pre class="brush: js notranslate">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 までの値では、コールバック関数が呼び出されません。</pre> + +<h3 id="Converting_a_for_loop_to_forEach" name="Converting_a_for_loop_to_forEach">for ループから forEach への変換</h3> + +<pre class="brush:js notranslate">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) +}) +</pre> + +<h3 id="Printing_the_contents_of_an_array" name="Printing_the_contents_of_an_array">配列の内容の出力</h3> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("Console/table", "console.table()")}} を使用することができます。</p> + +<p>以下の例では同じことを <code>forEach()</code> を使用して行う他の方法を説明しています。</p> +</div> + +<p>次のコードは配列の要素ごとに、コンソールに 1 行ずつ要素の内容を出力します。</p> + +<pre class="brush:js notranslate">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 +</pre> + +<h3 id="Using_thisArg" name="Using_thisArg">thisArg の使用</h3> + +<p>以下の (不自然な) 例は、配列の中の各項目からオブジェクトのプロパティを更新します。</p> + +<pre class="brush:js notranslate">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 +</pre> + +<p><code><var>thisArg</var></code> 引数 (<code>this</code>) が <code>forEach()</code> に提供されているため、<code><var>callback</var></code> の呼び出しのたびにこれが渡されます。コールバックはこれを <code>this</code> の値として使用します。</p> + +<div class="note"> +<p><strong>注:</strong> コールバック関数の受け渡しに<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数式</a>を使用した場合、<code><var>thisArg</var></code> 引数は、アロー関数が文法的に {{jsxref("Operators/this", "this")}} の値に結び付けられているため省略可能です。</p> +</div> + +<h3 id="An_object_copy_function" name="An_object_copy_function">オブジェクトをコピーする関数</h3> + +<p>次のコードは与えられたオブジェクトのコピーを生成します。</p> + +<p>オブジェクトのコピーを生成するには他にもいくつか方法があります。次のものは一つの方法であり、<code>Array.prototype.forEach()</code> が ECMAScript 5 の <code>Object.*</code> メタプロパティ関数を使用することでどのように動作するかを説明するために示しているものです。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="If_the_array_is_modified_during_iteration_other_elements_might_be_skipped." name="If_the_array_is_modified_during_iteration_other_elements_might_be_skipped.">配列が繰り返しの間に変更され、他の要素が飛ばされる場合</h3> + +<p>次の例では <samp>one</samp>, <samp>two</samp>, <samp>four</samp> をログ出力します。</p> + +<p>値 <code>two</code> を持つ項目に達した時、配列全体の最初の項目はシフトして外れ、すべての残りの項目が 1 つ上の位置に繰り上がります。<code>four</code> が配列の以前の位置に来るため、<code>three</code> が飛ばされます。</p> + +<p><code>forEach()</code> は繰り返しの前に配列のコピーを生成しません。</p> + +<pre class="brush:js notranslate">let words = ['one', 'two', 'three', 'four'] +words.forEach((word) => { + console.log(word) + if (word === 'two') { + words.shift() + } +}) +// one +// two +// four +</pre> + +<h3 id="Flatten_an_array" name="Flatten_an_array">配列の平板化</h3> + +<p>次の例は学習目的だけのものです。内蔵メソッドを使用して配列を平板化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます (ES2019 の一部となる予定で、一部のブラウザーではすでに実装済み)。</p> + +<pre class="brush: js notranslate">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] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.from()</strong></code> メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい <code>Array</code> インスタンスを生成します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>配列に変換する配列のようなオブジェクトまたは反復可能オブジェクト</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>配列のすべての要素に対して呼び出される Map 関数。</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd><code>mapFn</code> を実行する時に <code>this</code> として使用する値。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} インスタンス。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Array.from()</code> は、以下のものから <code>Array</code> を生成します。</p> + +<ul> + <li>配列のようなオブジェクト (<code>length</code> プロパティおよびインデックス付けされた要素を持つオブジェクト) もしくは</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能オブジェクト</a> ({{jsxref("Map")}} や {{jsxref("Set")}} のような要素を取得するオブジェクト)</li> +</ul> + +<p><code>Array.from()</code> は任意の引数 <code>mapFn</code> を持ちます。これは、作成した配列 (もしくは、サブクラスオブジェクト) のすべての要素に対して {{jsxref("Array.prototype.map", "map")}} 関数を実行できます。</p> + +<p>より明確に言うと、中間配列を生成しないことを除いて、<code>Array.from(obj, mapFn, thisArg)</code> は <code>Array.from(obj).map(mapFn, thisArg)</code> と同じ結果です。中間配列は、適切な型に合うように丸められた値を持つ必要があるため、<a href="/docs/Web/JavaScript/Typed_arrays">typed arrays</a> のような配列サブクラスにとっては特に重要です。</p> + +<div class="note">これは、<a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a>のような特定の配列のサブクラスでは特に重要です。なぜなら、中間配列の値は適切な型に収まるように切り捨てられている必要があるからです。</div> + +<p><code>from()</code> メソッドの <code>length</code> プロパティは 1 です。</p> + +<p>ES2015 では、class 構文により定義済みクラスとユーザー定義クラスの両方をサブクラス化することができます。結果として、<code>Array.from</code> のような静的メソッドは <code>Array</code> のサブクラスに「継承」され、<code>Array</code> ではなくサブクラスのインスタンスを生成します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Array_from_a_String" name="Array_from_a_String"><code>String</code> からの配列の生成</h3> + +<pre class="brush: js notranslate">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Array_from_a_Set" name="Array_from_a_Set"><code>Set</code> からの配列の生成</h3> + +<pre class="brush: js notranslate">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Array_from_a_Map" name="Array_from_a_Map"><code>Map</code> からの配列の生成</h3> + +<pre class="brush: js notranslate">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']; +</pre> + +<h3 id="Array_from_an_Array-like_object_arguments" name="Array_from_an_Array-like_object_(arguments)">配列のようなオブジェクト (引数) からの配列の生成</h3> + +<pre class="brush: js notranslate">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Using_arrow_functions_and_Array.from" name="Using_arrow_functions_and_Array.from">アロー関数と <code>Array.from</code> の使用</h3> + +<pre class="brush: js notranslate">// 要素を操作するためのマップ関数として +// アロー関数を使用 +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] +</pre> + +<h3 id="Sequence_generator_range" name="Sequence_generator_(range)">連番の生成 (範囲指定)</h3> + +<pre class="brush: js notranslate">// 連番の生成関数 (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"] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">Initial publication</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>ECMAScript 2015</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>Array.from</code> は ECMA-262 標準の第 6 版に追加されました。そのため他の標準の実装には存在しない可能性があります。</p> + +<p>次のコードをスクリプトの先頭に記述する事により、<code>Array.from</code> がネイティブでサポートされていない環境でもこれを使用できるようになります。</p> + +<div class="blockIndicator note"> +<p><strong>ポリフィルの注意:</strong> これは、ECMA-262 第 6 版で定められたアルゴリズムと全く同じです。<code>Object</code> と <code>TypeError</code> はそれぞれオリジナルの値を持ち、<code>callback.call</code> は {{jsxref("Function.prototype.call")}} のオリジナルの値として評価されます。</p> + +<p>また、真の iterables ポリフィルできないので、この実装は ECMA-262 第 6 版で定義されている一般的な iterables をサポートしません。</p> +</div> + +<pre class="notranslate">// 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 + ); + }; + })(); +}</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>includes()</strong></code> メソッドは、特定の要素が配列に含まれているかどうかを <code>true</code> または <code>false</code> で返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.includes(<var>valueToFind</var>[, <var>fromIndex</var>]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>valueToFind</var></code></dt> + <dd> + <p>検索する値です。</p> + + <div class="blockIndicator note"> + <p><strong>メモ:</strong> 文字列や文字を比較するとき、<code>includes()</code> は<em>大文字と小文字を区別します</em>。</p> + </div> + </dd> + <dt><code><var>fromIndex</var></code> {{optional_inline}}</dt> + <dd>この配列内で <code><var>valueToFind</var></code> を探し始める位置です。</dd> + <dd>検索される最初の文字は、<code><var>fromIndex</var></code> が正の値の場合は、<code><var>fromIndex</var></code> で見つかり、<code><var>fromIndex</var></code> が負の数の場合は (<code><var>fromIndex</var></code> の{{interwiki("wikipedia", "絶対値")}}だけ配列の末尾から文字数を戻った位置が検索開始地点となり)、<code><var>fromIndex</var></code> または <code><var>arr</var>.length + fromIndex</code> で見つかります。</dd> + <dd>既定値は 0 です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{jsxref("Boolean")}} で、<code>true</code> は <code><var>valueToFind</var></code> の値が配列内 (または、<code><var>fromIndex</var></code> が指定された場合はそれで示された配列の部分) から見つかった場合です。</p> + +<p>ゼロの値はすべて、符号にかかわらず等しいとみなされます (つまり、<code>-0</code> は <code>0</code> と <code>+0</code> の両方に等しいとみなされます) が、<code>false</code> は <code>0</code> と同じとはみなされ<em>ません</em>。</p> + +<div class="note"> +<p><strong>注:</strong> 技術的に言えば、<code>includes()</code> は <code><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">[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 +</pre> + +<h3 id="fromIndex_is_greater_than_or_equal_to_the_array_length" name="fromIndex_is_greater_than_or_equal_to_the_array_length"><code><var>fromIndex</var></code> が配列の長さと同じか大きい場合</h3> + +<p><code><var>fromIndex</var></code> が配列の長さと同じか大きい場合は配列を検索せずに <code>false</code> を返します。</p> + +<pre class="brush: js notranslate">let arr = ['a', 'b', 'c'] + +arr.includes('c', 3) // false +arr.includes('c', 100) // false +</pre> + +<h3 id="Computed_index_is_less_than_0" name="Computed_index_is_less_than_0">計算値のインデックスが 0 より小さい場合</h3> + +<p><code><var>fromIndex</var></code> が負の値である場合、計算値のインデックスは配列内で <code><var>valueToFind</var></code> の円策を開始する位置として使用するよう計算されます。計算値のインデックスが <code>-1 * <var>arr</var>.length</code> 以下の場合は、配列全体が検索されます。</p> + +<pre class="brush: js notranslate">// 配列の長さは 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 +</pre> + +<h3 id="includes_used_as_a_generic_method" name="includes_used_as_a_generic_method">ジェネリックメソッドとして使用される includes()</h3> + +<p><code>includes()</code> メソッドは意図的にジェネリックになっています。<code>this</code> が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト (例えば配列風オブジェクト) にも適用することができます。</p> + +<p>以下の例は、<code>includes()</code> メソッドが関数の <a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> オブジェクトに対して使用される様子を示しています。</p> + +<pre class="brush: js notranslate">(function() { + console.log(Array.prototype.includes.call(arguments, 'a')) // true + console.log(Array.prototype.includes.call(arguments, 'd')) // false +})('a','b','c') </pre> + +<div class="hidden"> +<p>参照記事にポリフィルを追加しないでください。詳細や議論については、<a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a> を参照して下さい。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>JavaScript の <strong><code>Array</code></strong> クラスはグローバルオブジェクトで、高水準、リスト風のオブジェクトである配列の構築に使用されます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>配列はリストのようなオブジェクトであり、そのプロトタイプは配列に対して横断的な操作や変更を行うメソッドを持っています。 JavaScript の配列は、要素数も要素の型も固定されていません。配列の長さは常に可変であり、データを連続しない位置に格納できるため、 JavaScript の配列は密であることが保証されていません。これはプログラマーの使い方次第です。一般に、これらは便利な特性です。しかし、もし特定の用途で望ましくないのであれば、型付き配列を使用したほうが良いかもしれません。</p> + +<p>配列は (<a href="https://ja.wikipedia.org/wiki/%E9%80%A3%E6%83%B3%E9%85%8D%E5%88%97">連想配列</a>のように) 要素の添字に文字列を使うことはできず、整数を使う必要があります。整数以外によって<a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">ブラケット構文</a> (または<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">ドット構文</a>) を使用して設定やアクセスを行うと、配列のリスト自身の要素を設定したり取得したりすることはできませんが、その配列の<a href="/ja/docs/Web/JavaScript/Data_structures#Properties">オブジェクトプロパティ集合</a>に関連付けられた変数に設定またはアクセスすることになります。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の<a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">走査や変更の操作</a>を名前付きプロパティに適用することはできません。</p> + +<h3 id="Common_operations" name="Common_operations">よくある操作</h3> + +<p><strong>配列を作成する</strong></p> + +<pre class="brush: js notranslate">let fruits = ['りんご', 'バナナ'] + +console.log(fruits.length) +// 2 +</pre> + +<p><strong>位置を使用して配列にアクセスする</strong></p> + +<pre class="brush: js notranslate">let first = fruits[0] +// りんご + +let last = fruits[fruits.length - 1] +// バナナ +</pre> + +<p><strong>配列のループ処理</strong></p> + +<pre class="brush: js notranslate">fruits.forEach(function(item, index, array) { + console.log(item, index) +}) +// りんご 0 +// バナナ 1 +</pre> + +<p><strong>配列の末尾に要素を追加する</strong></p> + +<pre class="brush: js notranslate">let newLength = fruits.push('みかん') +// ["りんご", "バナナ", "みかん"] +</pre> + +<p><strong>配列の末尾の要素を削除する</strong></p> + +<pre class="brush: js notranslate">let last = fruits.pop() // 配列の末尾の要素 "みかん" を削除 +// ["りんご", "バナナ"] +</pre> + +<p><strong>配列の先頭の要素を削除する</strong></p> + +<pre class="brush: js notranslate">let first = fruits.shift() // 配列の先頭の要素"りんご" を削除 +// ["バナナ"] +</pre> + +<p><strong>配列の先頭に要素を追加する</strong></p> + +<pre class="brush: js notranslate">let newLength = fruits.unshift('いちご') // 配列の先頭に追加 +// ["いちご", "バナナ"] +</pre> + +<p><strong>要素の添字を取得する</strong></p> + +<pre class="brush: js notranslate">fruits.push('マンゴー') +// ["いちご", "バナナ", "マンゴー"] + +let pos = fruits.indexOf('バナナ') +// 1 +</pre> + +<p><strong>位置を指定して要素を削除する</strong></p> + +<pre class="brush: js notranslate">let removedItem = fruits.splice(pos, 1) // 要素を削除する方法 + +// ["いちご", "マンゴー"]</pre> + +<p><strong>位置から複数の要素を削除する</strong></p> + +<pre class="brush: js notranslate">let vegetables = ['キャベツ', 'かぶ', '大根', 'にんじん'] +console.log(vegetables) +// ["キャベツ", "かぶ", "大根", "にんじん"] + +let pos = 1 +let n = 2 + +let removedItems = vegetables.splice(pos, n) +// 複数の要素を削除するには、 <em>n</em> で削除する要素数を定義します +// 指定位置（pos）以降から n 個分の要素が削除されます + +console.log(vegetables) +// ["Cabbage", "Carrot"] (元の配列が変化) + +console.log(removedItems) +// ["Turnip", "Radish"] +</pre> + +<p><strong>配列をコピーする</strong></p> + +<pre class="brush: js notranslate">let shallowCopy = fruits.slice() // 配列のコピーを作成できます +// ["いちご", "マンゴー"] +</pre> + +<h3 id="Accessing_array_elements" name="Accessing_array_elements">配列要素へのアクセス</h3> + +<p>JavaScript の配列の添字は 0 から始まるので、配列の最初の要素は添字 <code>0</code> の位置にあります。そして、最後の要素のインデックスは {{jsxref("Array.length", "length")}} プロパティの値から 1 を引いた値になります。</p> + +<p>不正なインデックス番号を使った場合は <code>undefined</code> を返します。</p> + +<pre class="brush: js notranslate">let arr = ['最初の要素', '2 番目の要素', '最後の要素'] +console.log(arr[0]) // ログ : "最初の要素" +console.log(arr[1]) // ログ : "2 番目の要素" +console.log(arr[arr.length - 1]) // ログ : "最後の要素" +</pre> + +<p><code>toString</code> が一つのプロパティであるのと同様に (ただし厳密には <code>toString()</code> はメソッドですが)、配列における配列要素はオブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が妥当でないため、構文エラーが発生します。</p> + +<pre class="brush: js notranslate">console.log(arr.0) // 構文エラー +</pre> + +<p>これは、JavaScript の配列とそのプロパティに限った話ではありません。数字から始まるプロパティは、ドット演算子を用いて参照できないため、ブラケット記法を用いる必要があります。</p> + +<p>例えば <code>3d</code> というプロパティを持つオブジェクトがあった場合は、ドット記法ではなくブラケット記法を用いて参照しなければなりません。</p> + +<pre class="brush: js notranslate">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] +console.log(years.0) // 構文エラー +console.log(years[0]) // 正しく動作 +</pre> + +<pre class="brush: js notranslate">renderer.3d.setTexture(model, 'character.png') // 構文エラー +renderer['3d'].setTexture(model, 'character.png') // 正しく動作 +</pre> + +<p><code>3d</code> の例では、<code>'3d'</code> は引用符で括らなければならないことに注意してください。 JavaScript 配列の添字も同様に引用符でくくることができますが (例えば <code>years[2]</code> でなく <code>years['2']</code>)、そうする必要はないでしょう。</p> + +<p><code>years[2]</code> の 2 は最終的に、JavaScript エンジンが内部的に <code>toString</code> メソッドで型変換することで文字列にされます。これは '2' と '02' が <code>years</code> オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は <code>true</code> がログ出力されます。</p> + +<pre class="brush: js notranslate">console.log(years['2'] != years['02']) +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties">length と数値プロパティとの関係</h3> + +<p>JavaScript の配列の {{jsxref("Array.length", "length")}} プロパティと数値プロパティは関連しています。</p> + +<p>配列の一部の組込みメソッド (例えば {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, など) は、配列の {{jsxref("Array.length", "length")}} プロパティの値はメソッドの呼び出し時の値を考慮します。</p> + +<p>他にも (例えば {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, 等)、結果として配列の {{jsxref("Array.length", "length")}} プロパティを更新するメソッドがあります。</p> + +<pre class="brush: js notranslate">var fruits = [] +fruits.push('バナナ', 'りんご', 'もも') + +console.log(fruits.length) // 3 +</pre> + +<p>JavaScript の配列に、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の {{jsxref("Array.length", "length")}} プロパティを更新します。</p> + +<pre class="brush: js notranslate">fruits[5] = 'マンゴー' +console.log(fruits[5]) // 'マンゴー' +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 6 +</pre> + +<p>{{jsxref("Array.length", "length")}} を増加させてみます。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>一方、 {{jsxref("Array.length", "length")}} プロパティの数を減らすと、要素が削除されます。</p> + +<pre class="brush: js notranslate">fruits.length = 2 +console.log(Object.keys(fruits)) // ['0', '1'] +console.log(fruits.length) // 2 +</pre> + +<p>これらについては {{jsxref("Array.length")}} のページで詳しく解説します。</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">match の結果を利用して配列を作成</h3> + +<p>正規表現 ({{jsxref("RegExp")}}) と文字列の一致の結果から配列を生成することができます。この配列には、プロパティと、一致した者に関する情報を提供する要素を持ちます。このような配列は {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}, {{jsxref("String.replace()")}} から返されます。</p> + +<p>これらのプロパティと要素を理解しやすくするために、以下の例と表を参照してください。</p> + +<pre class="brush: js notranslate">/ 1文字の d と、続く1文字以上の b と、続く1文字の d に一致します +// 一致した b およびそれに続く d を記憶します +// 大文字小文字は区別しません + +const myRe = /d(b+)(d)/i +const myArray = myRe.exec('cdbBdbsbz') +</pre> + +<p>この一致から返されるプロパティと要素は次の通りです。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th class="header" scope="col">プロパティまたは要素</th> + <th class="header" scope="col">説明</th> + <th class="header" scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>input</code><br> + {{ReadOnlyInline}}</td> + <td>正規表現が一致の文字列を反映する読み取り専用プロパティです。</td> + <td>"<code>cdbBdbsbz</code>"</td> + </tr> + <tr> + <td><code>index</code><br> + {{ReadOnlyInline}}</td> + <td>文字列中で一致場所を、0 から始まる位置で示します。</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>[0]</code><br> + {{ReadOnlyInline}}</td> + <td>最後にマッチした文字列です。</td> + <td>"<code>dbBd</code>"</td> + </tr> + <tr> + <td><code>[1], ...[n]</code><br> + {{ReadOnlyInline}}</td> + <td>正規表現に含まれる場合、括弧で囲まれた一致た部分文字列を指定する読み取り専用の要素です。括弧で囲まれた部分文字列の数は無制限です。</td> + <td><code>[1]: "bB"<br> + [2]: "d"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{jsxref("Array/Array", "Array()")}}</dt> + <dd>新しい <code>Array</code> オブジェクトを生成します。</dd> +</dl> + +<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> + +<dl> + <dt>{{jsxref("Array/@@species", "get Array[@@species]")}}</dt> + <dd>コンストラクター関数。派生オブジェクトを生成する時に使われます。</dd> +</dl> + +<h2 id="Static_methods" name="Static_methods">静的メソッド</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>配列風 (array-like) または反復可能 (iterable) オブジェクトから新しい <code>Array</code> インスタンスを生成します。</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>配列であれば <code>true</code> を、配列でなければ <code>false</code> を返します。</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>可変個の引数から、引数の個数や型に関わらず、新しい <code>Array</code> インスタンスを生成します。</dd> +</dl> + +<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> + +<dl> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>配列内の要素数を反映します。</dd> + <dt>{{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd><a href="/ja/docs/Web/JavaScript/Reference/Statements/with"><code>with</code></a> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd> +</dl> + +<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>配列内で配列内の連続した要素をコピーします。</dd> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>配列中のそれぞれの要素について関数を呼び出します。</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、<code>-1</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>配列のすべての要素を結合した文字列を返します。</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各添字のキーを保持します。</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、<code>-1</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>配列から最後の要素を取り除き、返値として返します。</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の <code>length</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>アキュムレーターと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>アキュムレーターと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>配列から最初の要素を取り除き、その要素を返します。</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>配列の一部を取り出して新しい配列として返します。</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>配列内で要素を整列し、配列を返します。</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きします。</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の <code>length</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_an_array" name="Creating_an_array">配列の生成</h3> + +<p>次の例では、 <code><var>msgArray</var></code> を長さ <code>0</code> で生成し、 <code>msgArray[0]</code> と <code>msgArray[99]</code> に値を設定、その後配列の <code>length</code> が <code>100</code> である事を確認しています。</p> + +<pre class="brush: js notranslate">let msgArray = [] +msgArray[0] = 'Hello' +msgArray[99] = 'world' + +if (msgArray.length === 100) { + console.log("配列の length は 100 です。") +} +</pre> + +<h3 id="Creating_a_two-dimensional_array" name="Creating_a_two-dimensional_array">2 次元配列を生成する</h3> + +<p>以下では、文字列の 2 次元配列としてチェスボードを生成しています。最初の動きは <code>'p'</code> を <code>board[6][4]</code> から <code>board[4][4]</code> にコピーすることでなされます。古い位置 <code>[6][4]</code> は空白にされます。</p> + +<pre class="brush: js notranslate">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')) +</pre> + +<p>出力を以下に示します。</p> + +<pre class="eval notranslate">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 +</pre> + +<h3 id="Using_an_array_to_tabulate_a_set_of_values" name="Using_an_array_to_tabulate_a_set_of_values">配列を使って値のセットを表にする</h3> + +<pre class="brush: js notranslate">values = [] +for (let x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +} +console.table(values)</pre> + +<p>結果は次のようになります。</p> + +<pre class="eval notranslate">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</pre> + +<p>(最初の列は要素の添字です)</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">初回発行</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>ECMAScript 1</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>From the JavaScript Guide: + <ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">“Indexing object properties”</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">“Indexed collections: <code>Array</code> object”</a></li> + </ul> + </li> + <li><a href="/ja/docs/JavaScript_typed_arrays">型付き配列</a></li> +</ul> 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 +--- +<h2 id="Summary" name="Summary">概要</h2> +<p>正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。</p> +<table class="standard-table"> + <thead> + <tr> + <td class="header" colspan="2"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> のプロパティ</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"><b>静的</b></td> + </tr> + <tr> + <td>実装されたバージョン</td> + <td>JavaScript 1.2</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>indexOf()</strong></code> メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.indexOf(<var>searchElement</var>[, <var>fromIndex</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>searchElement</var></code></dt> + <dd>検索する配列要素です。</dd> + <dt><code><var>fromIndex</var></code> {{optional_inline}}</dt> + <dd>検索を始める位置です。もしこの位置が配列の長さ以上の場合は、-1 が返され、配列は検索されません。負の数の場合、これは配列の末尾からのオフセットとみなされます。なお、この位置が負の数であっても、配列は前から後ろに検索されることに注意してください。指定された位置が 0 であれば、配列全体が検索されます。既定値は 0 (配列全体を検索) です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>見つかった最初の配列要素の添字です。見つからなかった場合は <strong>-1</strong> です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>indexOf()</code> は <code><var>searchElement</var></code> と配列の要素を <a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">厳密等価</a> (三重イコール演算子 <code>===</code> で使われるのと同じ方法) を使って比較します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> String メソッドについては、{{jsxref("String.prototype.indexOf()")}} を参照してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_indexOf" name="Using_indexOf">indexOf() の使用</h3> + +<p>以下の例は <code>indexOf()</code> を使って、配列中のある値の位置を探しています。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Finding_all_the_occurrences_of_an_element" name="Finding_all_the_occurrences_of_an_element">ある要素の存在をすべて見つける</h3> + +<pre class="brush: js notranslate">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] +</pre> + +<h3 id="Finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array" name="Finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array">要素が配列内に存在するかどうかを調べ、配列を更新する</h3> + +<pre class="brush: js notranslate">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. +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>indexOf()</code> メソッドは ECMA-262 第 5 版で追加されたものであり、すべてのブラウザーで動作するわけではありません。次のコードをスクリプトの先頭に追加することにより、<code>indexOf()</code> がネイティブでサポートされていない環境でも、これが使用可能となります。これは ECMA-262 第 5 版で定められたアルゴリズムと完全に同じものです。{{jsxref("Global_Objects/TypeError", "TypeError")}} と {{jsxref("Math.abs()")}} がオリジナルの値を持つ事を仮定しています。</p> + +<pre class="brush: js notranslate">// 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) +</pre> + +<p>ですが、ECMA 標準で定義された技術的な部分に興味があり、パフォーマンスや簡潔さを意識しない場合、以下のような、より説明的なポリフィルが役立つことがあるでしょう。</p> + +<pre class="brush: js notranslate">// 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; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> 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 +--- +<p> +</p><p>{{ 英語版章題("Summary") }} +</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81"> 概要 </h3> +<p>正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2"><a href="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> のプロパティ</td> +</tr> +<tr> +<td colspan="2"><b>静的</b></td> +</tr> +<tr> +<td>実装されたバージョン:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +</tbody></table> +<div class="noinclude"> +</div> +{{ 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.isArray()</strong></code> メソッドは、渡された値が {{jsxref("Array")}} かどうかを判断します。</p> + +<pre class="brush: js notranslate">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Array.isArray(<var>value</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>value</var></dt> + <dd>チェックするオブジェクト。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>値が {{jsxref("Array")}} の場合は <code>true</code> です。そうでなければ <code>false</code> を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>値が {{jsxref("Array")}} の場合は <code>true</code> が返ります。それ以外の場合は <code>false</code> が返ります。</p> + +<p>詳しくは、<a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> を参照してください。{{jsxref("TypedArray")}} のインスタンスが与えられると、常に <code>false</code> が返されます。</p> + + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>次のコードを他のコードよりも前に記述する事により、ネイティブで実装されていなくても、<code>Array.isArray()</code> が使用可能になります。</p> + +<pre class="brush: js notranslate">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">// 以下の呼び出しはすべて 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 }); +</pre> + +<h3 id="instanceof_vs_isArray" name="instanceof_vs_isArray"><code>instanceof</code> と <code>isArray</code></h3> + +<p><code>Array</code> のインスタンスをチェックする際、<code>Array.isArray</code> は <code>iframes</code> で動作するので、<code>instanceof</code> よりも推奨されます。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>join()</strong></code> メソッドは、配列 (または<a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">配列風オブジェクト</a>) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.join([<var>separator</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>separator</var></code> {{optional_inline}}</dt> + <dd>配列の各要素を区切る文字列を指定します。 separator は、必要であれば文字列に変換されます。省略した場合、配列の要素はカンマ (",") で区切られます。 <code>separator</code> に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列の全要素が連結された文字列です。 <code><em>arr</em>.length</code> が <code>0</code> だった場合、空の文字列が返されます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。</p> + +<div class="warning"> +<p>要素が <code>undefined</code> または <code>null</code> または空配列 <code>[]</code> であった場合は、空の文字列に変換されます。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Joining_an_array_three_different_ways" name="Joining_an_array_three_different_ways">3 通りの異なる形で配列をつなぐ</h3> + +<p>以下の例は、3 個の要素を持つ配列 <code>a</code> を作成し、デフォルト引数、カンマとスペース、そして「と」と空文字を使った 4 パターンの結合を行っています。</p> + +<pre class="brush: js notranslate">var a = ['風', '水', '火']; +a.join(); // '風,水,火' +a.join(', '); // '風, 水, 火' +a.join(' + '); // '風 + 水 + 火' +a.join(''); // '風水火'</pre> + +<h3 id="Joining_an_array-like_object" name="Joining_an_array-like_object">配列風オブジェクトを連結する</h3> + +<p>次の例は<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font>配列風オブジェクト （ <code><a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code> ）を連結するために、 <code>Array.prototype.join</code> を {{jsxref("Function.prototype.call")}} を使用して呼び出します。</p> + +<pre class="brush: js notranslate">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true); +//expected output: "1,a,true" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>keys()</code></strong> メソッドは、配列内の各インデックスのキーを含む、新しい <strong>Array Iterator</strong> オブジェクトを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.keys()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} のイテレーターオブジェクトです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Key_iterator_doesnt_ignore_holes" name="Key_iterator_doesnt_ignore_holes">疎な配列を無視しないキーイテレーター</h3> + +<pre class="brush: js notranslate">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復処理プロトコル </a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>lastIndexOf()</code></strong> メソッドは、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は <code>fromIndex</code> から逆向きに検索されます。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.lastIndexOf(<var>searchElement</var>[, <var>fromIndex</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>searchElement</var></code></dt> + <dd>検索する配列要素です。</dd> + <dt><code><var>fromIndex</var></code> {{optional_inline}}</dt> + <dd>逆向きに検索し始める添字です。デフォルトは配列の長さ に 1 を引いた値（ <code>arr.length - 1</code> ）で、つまり配列全体が検索されます。もしこの添字が配列の長さ以上ならば、配列全体が検索されます。負の数の場合、これは配列の終わりからのオフセットとみなされます。この添字が負の数であってもなお、配列は後ろから前に検索されることに注意してください。負の添字の絶対値が配列の長さを超えた場合、-1 が返され、配列は検索されません。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列内の一致した要素の最後の位置です。見つからなかった場合は <strong>-1</strong> です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>lastIndexOf</code> は <code><var>searchElement</var></code> と配列の要素を <a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">厳密等価</a> (三重イコール演算子 <code>===</code> で使われるのと同じ方法) を使って比較します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_lastIndexOf" name="Using_lastIndexOf">lastIndexOf() の使用</h3> + +<p><code>lastIndexOf</code> を使って配列中のある値の位置を探す例を以下に示します。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Finding_all_the_occurrences_of_an_element" name="Finding_all_the_occurrences_of_an_element">ある要素の存在をすべて見つける</h3> + +<p>以下の例は <code>lastIndexOf</code> を使って、与えられた配列中のある値の添字すべてを探しています。{{jsxref("Array.prototype.push", "push")}} を使って、値が見つかる度に別の配列にその添字を追加しています。</p> + +<pre class="brush: js notranslate">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] +</pre> + +<p>ここで <code>idx == 0</code> の場合を分けて扱わないといけないことに注意してください。なぜなら、もし検索する値が配列の最初の要素にあると、その値は <code>fromIndex</code> パラメータにかかわらずいつもヒットしてしまうのです。これは {{jsxref("Array.prototype.indexOf", "indexOf")}} メソッドとは異なります。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>lastIndexOf</code> は ECMA-262 第 5 版に追加されたメソッドであり、他のバージョンの標準実装には存在しない場合があります。次のコードをスクリプトの先頭に追加することにより、<code>lastIndexOf</code> がネイティブでサポートされていない環境でも、これを使用する事が可能となります。これは ECMA-262 第 5 版で定められたアルゴリズムと全く同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}}、{{jsxref("Number")}}、{{jsxref("Math.floor")}}、{{jsxref("Math.abs")}}、{{jsxref("Math.min")}} が、それぞれオリジナルの値を持つことを仮定しています。</p> + +<pre class="brush: js notranslate">// 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; + }; +} +</pre> + +<p>上記コードのアルゴリズムは Firefox または SpiderMonky の JavaScript エンジンで実際に使用されているものと同じもので、これには間違いなくエッジケースも含まれています。実際にアプリケーションの中でこれを使用する場合、こうしたエッジケースを無視するならば、より複雑でないコードで <code>fromIndex</code> を計算可能であるかもしれません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>length</strong></code> は <code>Array</code> 型のインスタンスであるオブジェクトのプロパティで、配列の要素の数を設定または取得します。値は符号なし 32 ビット整数で、常に配列の最も大きなインデックスよりも数値的に大きくなります。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>length</code> プロパティの値は正符号を持つ整数で、2 の 32 乗 (2<sup>32</sup>) 未満の値です。</p> + +<pre class="brush: js notranslate">var namelistA = new Array(4294967296); //2 to the 32nd power<sup> = </sup>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 +</pre> + +<p><code>length</code> プロパティに値をセットすることで、いつでも配列を短縮することができます。<code>length</code> プロパティの値を現在より大きな値に変更すると、配列内の要素数も増加します。例えば <code>length</code> が現在 2 のところに 3 をセットすると、配列内の要素数は 3 になり、3番目の要素は反復処理できない空のスロットになります。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>ご覧の通り、<code>length</code> プロパティは必ずしも配列内で定義された値の数を示しているわけではありません。詳細は <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="length と数値プロパティとの関係"><code>length</code> と数値プロパティとの関係</a> をご覧ください。</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<div> +<ul> + <li><code>Writable</code>: この属性が <code>false</code> に設定されている場合、プロパティの値を変更することはできません。</li> + <li><code>Configurable</code>: この属性が <code>false</code> に設定されている場合、プロパティの削除や属性 (<code>Writable</code>, <code>Configurable</code>, <code>Enumerable</code>) の変更の試みは失敗します。</li> + <li><code>Enumerable</code>: この属性が <code>true</code> に設定されている場合、プロパティは <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> や <a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a> ループ中で反復処理の対象にされます。</li> +</ul> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Iterating_over_an_array" name="Iterating_over_an_array">配列を反復処理する</h3> + +<p>以下の例では、配列 <code>numbers</code> がいくつの要素を持っているかを知るために <code>length</code> プロパティを見ることで、配列を反復処理します。その際それぞれの値は 2 倍されます。</p> + +<pre class="brush: js notranslate">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] となった +</pre> + +<h3 id="Shortening_an_array" name="Shortening_an_array">配列の短縮</h3> + +<p>以下の例は配列 <code>numbers</code> の要素数が 3 より大きいかどうかを調べて、大きいならその <code>length</code> を 3 としています。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="固定長の空の配列を作成">固定長の空の配列を作成</h3> + +<pre class="brush: js notranslate">var numbers = []; +numbers.length = 3; +console.log(numbers); // [undefined, undefined, undefined] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Array.length")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>map()</strong></code> メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる<strong>新しい配列を生成します</strong>。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) { + // 新しい配列の要素を返す +}[, <var>thisArg</var>]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p><code><var>arr</var></code> の要素ごとに呼び出される関数です。 <code><var>callback</var></code> が実行されるたびに、返された値が <code><var>new_array</var></code> に追加されます。</p> + + <p><code><var>callback</var></code> 関数は以下の引数を受け付けます。</p> + + <dl> + <dt><code><var>currentValue</var></code></dt> + <dd>現在処理中の要素の値です。</dd> + <dt><code><var>index</var></code>{{optional_inline}}</dt> + <dd>現在処理中の要素の配列内における添字です。</dd> + <dt><code><var>array</var></code>{{optional_inline}}</dt> + <dd><code>map</code> が実行されている配列です。</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd><code><var>callback</var></code> を実行するときに <code>this</code> として使う値です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>map</code> は、与えられた <code><var>callback</var></code> 関数を配列の順番通りに、<strong>各要素に対して一度ずつ呼び出し</strong>、その結果から新しい配列を生成します。 <code><var>callback</var></code> は、値が代入されている配列の要素に対してのみ呼び出されます ({{jsxref("undefined")}} が代入されているものも含みます)。</p> + +<p>これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出し<em>ません</em>。</p> + +<ul> + <li>設定されたことがない添字</li> + <li>削除された要素</li> + <li>値を割り当てられたことがない要素</li> +</ul> + +<h3 id="When_not_to_use_map" name="When_not_to_use_map">map() を使用すべきではない場合</h3> + +<p><code>map</code> は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに {{jsxref("Array/forEach", "forEach")}} または {{jsxref("for...of", "for-of")}} を使用してください。</p> + +<p><code>map</code> を使用するべきでないのは以下の場合です。</p> + +<ul> + <li>返された配列を使用しない場合</li> + <li>コールバックから値を返さない場合</li> +</ul> + +<h3 id="Parameters_in_Detail" name="Parameters_in_Detail">引数の詳細</h3> + +<p><code><var>callback</var></code> は、要素の値、要素の添字、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。</p> + +<p><code>thisArg</code> 引数が与えられた場合は、それがコールバックの <code>this</code> として使用されます。引数が省略された場合は、 {{jsxref("undefined")}} が <code>this</code> の値として使用されます。 <code><var>callback</var></code> によって最終的に識別できる <code>this</code> の値は、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this">関数における通常の <code>this</code> を決定するルール</a>に従って決まります。</p> + +<p><code>map</code> は呼び出された配列を変化させません (ただし、呼び出された <code><var>callback</var></code> が配列を変更する可能性はあります)。</p> + +<p><code>map</code> によって処理される要素の範囲は、 <code><var>callback</var></code> が最初に呼び出される前に設定されます。 <code>map</code> の呼び出しが開始された後に追加された要素に対しては、 <code><var>callback</var></code> は実行されません。既存の配列要素が変更されたり、削除された場合、 <code><var>callback</var></code> に渡される値は <code>map</code> がそれらを訪れた時点での値になり、 <code>map</code> が削除された要素を訪問することはありません。</p> + +<p>仕様書で定義されているアルゴリズムによって、 <code>map</code> が呼び出された配列がまばらである場合、結果の配列もまばらとなり、要素を空欄のままにします。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>map</code> は ECMA-262 標準に最近追加されたものである為、標準準拠を謳う実装中に存在しない場合があります。</p> + +<p>次のコードをスクリプトの先頭に挿入すると、 <code>map</code> にネイティブで対応していない ECMA-262 実装でも <code>map</code> を使用できるようになります。このアルゴリズムは ECMA-262 第 5 版で指示されたアルゴリズムと全く同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}}、{{jsxref("Array")}} はそれぞれオリジナルの値を持ち、またそれらの {{jsxref("Function.prototype.call")}} のオリジナルの値として評価されます。</p> + +<pre class="brush: js notranslate">// 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; + }; +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Mapping_an_array_of_numbers_to_an_array_of_square_roots">数値の配列を平方根の配列にマッピング</h3> + +<p>次のコードは、数値からなる配列を取り、それらの数値の平方根からなる新しい配列を生成します。</p> + +<pre class="brush: js notranslate">let numbers = [1, 4, 9] +let roots = numbers.map(function(num) { + return Math.sqrt(num) +}) +// roots の内容は [1, 2, 3] となる +// numbers の内容は [1, 4, 9] のまま +</pre> + +<h3 id="Using_map_to_reformat_objects_in_an_array" name="Using_map_to_reformat_objects_in_an_array">map を使用して配列内のオブジェクトを再フォーマット</h3> + +<p>次のコードは、オブジェクトの配列を受け取り、新たにフォーマットされた新しい配列を生成しています。</p> + +<pre class="brush: js notranslate">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}] +// のまま</pre> + +<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">引数を含む関数を使用して数値配列をマッピングする</h3> + +<p>次のコードは、1 つの引数を必要とする関数を使用するときに <code>map</code> がどのように動作するかを示しています。引数は元の配列を通した <code>map</code> ループとして、配列の各要素に自動的に割り当てられます。</p> + +<pre class="brush: js notranslate">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] +</pre> + +<h3 id="Using_map_generically" name="Using_map_generically">汎用的な map の使用</h3> + +<p>以下の例は、各文字を表す ASCII エンコードのバイトの配列を得るために {{jsxref("String")}} に map を使う方法を示しています。:</p> + +<pre class="brush: js notranslate">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] となる +</pre> + +<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">汎用的な map の使用: querySelectorAll</h3> + +<p>この例では、<code>querySelectorAll</code> によって収集されたオブジェクトのコレクションを反復処理する方法を示します。これは <code>querySelectorAll</code> が <code>NodeList</code> (オブジェクトの集合) を返すためです。</p> + +<p>この場合、画面に選択されているすべての <code>option</code> の値を返します。</p> + +<pre class="brush: js notranslate">let elems = document.querySelectorAll('select option:checked') +let values = Array.prototype.map.call(elems, function(obj) { + return obj.value +}) +</pre> + +<p>もっと簡単な方法は {{jsxref("Array.from()")}} メソッドを使用することです。</p> + +<h3 id="Tricky_use_case" name="Tricky_use_case">トリッキーな使用例</h3> + +<p>(<a href="http://www.wirfs-brock.com/allen/posts/166">このブログの記事に創発されました</a>)</p> + +<p>コールバック関数は第一引数 (変換するべき要素) だけを意識して指定するケースがほとんどだと思います。しかし一般的に第一引数しか使わないような関数でも、実は追加のオプション引数を受け取っている場合があります。これは混乱につながる可能性があります。</p> + +<p>まずこの例をご覧ください。</p> + +<pre class="brush: js notranslate">["1", "2", "3"].map(parseInt)</pre> + +<p>返値は <code>[1, 2, 3]</code> となりそうですが、実際には <code>[1, NaN, NaN]</code> となります。</p> + +<p>{{jsxref("parseInt")}} は大抵一つの引数のみで使われますが、実際には二つの引数を取っています。一つ目は数値文字列、二つ目は基数です。 <code>Array.prototype.map</code> はコールバックに次の 3 つの引数を与えています。</p> + +<ul> + <li>その要素</li> + <li>その添字</li> + <li>その配列</li> +</ul> + +<p>{{jsxref("parseInt")}} は三つ目の引数を無視しますが、二つ目の引数は無視<em>しません</em>。これは混乱を起こす可能性があるソースです。</p> + +<p>繰り返し手順の正確な例は以下の通りです。</p> + +<pre class="brush: js notranslate">// 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 +</pre> + +<p>解決策を考えてみましょう。</p> + +<pre class="brush: js notranslate">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] +</pre> + +<p>{{jsxref("parseInt")}} を引数として呼び出された map メソッドの代替出力の 1 つは、次のように実行されます。</p> + +<pre class="brush: js notranslate">let xs = ['10', '10', '10'] + +xs = xs.map(parseInt) + +console.log(xs) +// 実際の結果 10,NaN,2 は上記の説明からすると意外なものかもしれません。</pre> + +<h3 id="undefined_を持つマップされた配列">undefined を持つマップされた配列</h3> + +<p>{{jsxref("undefined")}} または nothing を返すと、以下のものを返します。</p> + +<pre class="brush: js notranslate">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] のまま + +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> 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 +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p><strong><code>Array.observe()</code></strong> メソッドは、配列への変更を非同期で監視するために使用されました。オブジェクト用の {{jsxref("Object.observe()")}} と似ています。変更内容は、発生した順番に時系列で提供されます。accept type list <code>["add", "update", "delete", "splice"]</code> で呼び出された <code>Object.observe()</code> と同等です。しかしながら、この API の使用は非推奨となり、ブラウザから削除されています。代わりに、一般的な {{jsxref("Proxy")}} オブジェクトを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>監視される配列。</dd> + <dt><code>callback</code></dt> + <dd>変更されるたびに毎回呼び出される関数。次の引数を持ちます: + <dl> + <dt><code>changes</code></dt> + <dd>変更されたオブジェクトの配列。変更オブジェクトのプロパティは次の通り: + <ul> + <li><strong><code>name</code></strong>: 変更されたプロパティの名前。</li> + <li><strong><code>object</code></strong>: 変更後の配列。</li> + <li><strong><code>type</code></strong>: 変更の種類を示す文字列。 <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, <code>"splice"</code> のいずれか一つ。</li> + <li><strong><code>oldValue</code></strong>: <code>"update"</code>, <code>"delete"</code> の場合のみ、変更前の値。</li> + <li><strong><code>index</code></strong>: <code>"splice"</code> の場合のみ。変更が発生したインデックス。</li> + <li><strong><code>removed</code></strong>: <code>"splice"</code> の場合のみ。取り除かれた要素の配列。</li> + <li><strong><code>addedCount</code></strong>: <code>"splice"</code> の場合のみ。追加された要素の数。</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>callback</code> 関数は、<code>arr</code> に変更が発生する度に呼ばれます。すべての変更が発生した順に配列として渡されます。</p> + +<div class="note"> +<p><a href="/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a> など、Array メソッド経由の変更は、<code>"splice"</code> 変更として報告されます。配列の長さが変更されないインデックスの割り当て変更は、<code>"update"</code> 変更として報告されます。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id='="Logging_different_change_types"' name='="Logging_different_change_types"'>異なる変更のログを取る</h3> + +<pre class="brush: js">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}] +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.observe")}}</p> +</div> + +<p> </p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.of()</strong></code> メソッドは、引数の数や型にかかわらず、可変長引数から、新しい <code>Array</code> インスタンスを生成します。</p> + +<p><code><strong>Array.of()</strong></code> と <code>Array</code> コンストラクタの違いは整数引数の扱いにあります。<code><strong>Array.of(7)</strong></code> は単一の要素、<code>7</code> を持つ配列を作成しますが、<code><strong>Array(7)</strong></code> は <code>length</code> プロパティが 7 の空の配列を作成します（<strong>注:</strong> これは実際の <code>undefined</code> の値を持つスロットではなく、7 つの空のスロットの配列を意味します）。</p> + +<pre class="brush: js notranslate">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // 7 つの空のスロットの配列 +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>element<em>N</em></var></code></dt> + <dd>生成する配列の要素。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} インスタンス。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>この関数は、ECMAScript 標準の第 6 版の一部です。詳しい情報は、<a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> と <code>Array.from</code> 提案</a>、<a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> 互換コード</a> をご覧ください。</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> + + +<h2 id="ポリフィル">ポリフィル</h2> + +<p>以下のコードを他のコードよりも前に記述する事により、ネイティブで実装されていなくても、<code>Array.of()</code> が使用可能になります。</p> + +<pre class="brush: js notranslate">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; + } +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Array.of_の使用">Array.of の使用</h3> + +<pre class="brush: js notranslate">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>pop()</code></strong> メソッドは、配列から<strong>最後</strong>の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arrName</var>.pop()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列の最後の要素。配列が空だった場合は、{{jsxref("undefined")}}。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>pop</code> メソッドは配列の最後の要素を取り除き、呼び出し元にその値を返します。</p> + +<p><code>pop</code> は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している <code>length</code> プロパティを含まないオブジェクトでは効果がないかもしれません。</p> + +<p>空の配列に対して <code>pop()</code> を実行した場合は、{{jsxref("undefined")}} を返します。</p> + +<p>{{jsxref("Array.prototype.shift()")}} は <code>pop</code> と同様の動作をしますが、配列の最初の要素に適用されます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Removing_the_last_element_of_an_array" name="Removing_the_last_element_of_an_array">配列の最後の要素を取り除く</h3> + +<p>以下のコードは、4 つの要素を含んだ配列 <code>myFish</code> を生成し、その後その最後の要素を取り除き、変数に代入しています。</p> + +<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + +<h3 id="Using_apply_or_call_on_array-like_objects" name="Using_apply_or_call_on_array-like_objects">配列風のオブジェクトでの apply( ) や call ( ) の使用</h3> + +<p>以下のコードは、4 つの要素と長さのパラメータを含む配列のような <code>myFish</code> オブジェクトを作成し、最後の要素を削除して長さのパラメータをデクリメントします。</p> + +<pre class="brush: js notranslate">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' +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Array")}} インスタンスは、 <code>Array.prototype</code> を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての <code>Array</code> オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。</p> + +<p>ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript への機能の追加</a>の際に問題が発生することがあります。</p> + +<p>豆知識: <code>Array.prototype</code> はそれ自体が {{jsxref("Array")}} です。</p> + +<pre class="brush: js notranslate">Array.isArray(Array.prototype); // true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>オブジェクトの prototype を生成する関数を指定します。</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>配列内の要素数を反映します。</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Mutator メソッド</h3> + +<p>これらのメソッドは、配列を書き換えます。</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>配列内で配列内の連続した要素をコピーします。</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>配列から最後の要素を取り除き、戻り値として返します。</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>配列から最初の要素を取り除き、その要素を返します。</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>配列内で要素を整列し、配列を返します。</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">アクセサーメソッド</h3> + +<p>これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>配列のすべての要素を結合した文字列を返します。</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>配列の一部を取り出して新しい配列として返します。</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">反復メソッド</h3> + +<p>いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の <code>length</code> 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>配列中のそれぞれの要素について関数を呼び出します。</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各インデックスのキーを保持します。</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> +</dl> + +<h3 id="Generic_methods_non-standard" name="Generic_methods_(non-standard)">ジェネリックメソッド (非標準)</h3> + +<p>JavaScript の <code>Array</code> オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも <code>length</code> プロパティを持ち、数値プロパティ名を使う (<code>array[5]</code> のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの <code>length</code> や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや <code>length</code> が変更可能であることを要求するため、<code>length</code> プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES7')}}</td> + <td><code>includes()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.prototype")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>push()</strong></code> メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.push([<var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>配列の末尾に追加する要素。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>メソッドが呼び出されたオブジェクトの新しい {{jsxref("Array.length", "length")}} プロパティ。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>push</code> メソッドは配列の末尾に要素を追加します。</p> + +<p><code>push</code> は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。なお、<code>push</code> は配列の末尾から要素を挿入する必要性があるため、 <code>length</code> プロパティに依存しています。<code>length</code> が数値に変換できない場合、0 が用いられます。また、 <code>length</code> が存在しない場合は <code>length</code> も作成されることになります。</p> + +<p>ネイティブのみで、配列のようなオブジェクトは {{jsxref("Global_Objects/String", "strings", "", 1)}} ですが、文字列は変化しないので、このメソッドの効果を受けるには相応しくありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Adding_elements_to_an_array" name="Adding_elements_to_an_array">配列に要素を追加する</h3> + +<p>以下のコードは 2 つの要素を持つ配列 <code>sports</code> を生成し、それに 2 つの要素を追加します。コードの実行後、変数 <code>total</code> には 4 が入ります。</p> + +<pre class="brush: js notranslate">let sports = ['soccer', 'baseball'] +let total = sports.push('football', 'swimming') + +console.log(sports) // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total) // 4 +</pre> + +<h3 id="Merging_two_arrays" name="Merging_two_arrays">２つの配列をマージする</h3> + +<p>この例では {{jsxref("Function.apply", "apply()")}} を利用することで 2 つ目の配列の全ての要素を 1 つ目の要素にマージさせています。</p> + +<p>2 番目の配列 (例では <code>moreVegs</code>) が非常に大きい場合はこのメソッドを<em>使用しない</em>でください。なぜなら、1 つの関数が取ることのできるパラメータの最大数は実際には制限されているからです。詳細は {{jsxref("Function.apply", "apply()")}} を参照してください。</p> + +<pre class="brush: js notranslate">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'] +</pre> + +<h3 id="Using_an_object_in_an_array-like_fashion" name="Using_an_object_in_an_array-like_fashion">オブジェクトを配列のように使用する</h3> + +<p>上述したように、<code>push</code> は内部的には汎用的なので、その利点を活かすことができます。この例が示しているように、オブジェクト上で <code>Array.prototype.push</code> は正しく動作します。</p> + +<p>オブジェクトのコレクションを保存するために、配列を生成していないことに注意してください。代わりに、コレクションをオブジェクト自体に保存して、配列を扱っているかのように見せかけるために <code>Array.prototype.push</code> 上で <code>call</code> を使用しています。そして、JavaScript は実行コンテキストの確立を許可しているおかげで、これは動作します。</p> + +<pre class="brush: js notranslate">let obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length は、要素が追加されるたびに自動的に増分する。 + [].push.call(this, elem) + } +} + +// 例示のために空のオブジェクトを追加する。 +obj.addElem({}) +obj.addElem({}) +console.log(obj.length) +// → 2 +</pre> + +<p><code>obj</code> は配列ではありませんが、本当の配列を扱っているかのように <code>push</code> メソッドは <code>obj</code> の <code>length</code> プロパティを増加させできていることに注意してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>reduce()</strong></code> メソッドは、配列の各要素に対して (引数で与えられた) <strong>reducer</strong> 関数を実行して、単一の出力値を生成します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><strong>reducer</strong> 関数は 4 つの引数を取ります。</p> + +<ol> + <li>アキュムレーター (<code><var>acc</var></code>)</li> + <li>現在値 (<code><var>cur</var></code>)</li> + <li>現在の添字 (<code><var>idx</var></code>)</li> + <li>元の配列 (<code><var>src</var></code>)</li> +</ol> + +<p><strong>reducer</strong> 関数の返値はアキュムレーターに代入され、配列内の各反復に対してこの値を記憶します。最終的に単一の結果値になります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.reduce(<var>callback</var>( <var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]] ) { + // return result from executing something for <var>accumulator</var> or <var>currentValue</var> +}[, <var>initialValue</var>]);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>配列のすべての要素 (<code><var>initialValue</var></code> が提供されなかった場合は、最初を除く) に対して実行される関数です。</p> + + <p>これは 4 つの引数を取ります。</p> + + <dl> + <dt><code><var>accumulator</var></code></dt> + <dd><var>callback</var> の返値を蓄積するアキュームレーターです。これは、コールバックの前回の呼び出しで返された値、あるいは <code><var>initialValue</var></code> が指定されている場合はその値となります (以下を参照ください)。</dd> + <dt><code><var>currentValue</var></code></dt> + <dd>現在処理されている配列の要素です。</dd> + <dt><code><var>index</var></code> {{optional_inline}}</dt> + <dd>現在処理されている配列要素のインデックスです。<code>initialValue</code> が指定された場合はインデックス <code>0</code> から、そうでない場合はインデックス <code>1</code> から開始します。</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd><code>reduce()</code> が呼び出された配列です。</dd> + </dl> + </dd> + <dt><code><var>initialValue</var></code> {{optional_inline}}</dt> + <dd><code><var>callback</var></code> の最初の呼び出しの最初の引数として使用する値。<code><var>initialValue</var></code> が与えられなかった場合、配列の最初の要素がアキュムレーターの初期値として使用され、<code><var>currentValue</var></code> としてスキップされます。空の配列に対して <code>reduce()</code> を呼び出した際、<code><var>initialValue</var></code> が指定されていないと {{jsxref("TypeError")}} が発生します。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>畳み込みによって得られた 1 つの値です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>reduce()</code> メソッドは、配列に存在する各要素ごとに対して、<code>callback</code> 関数を次の 4 つの引数を渡しながら一度だけ実行します。</p> + +<ol> + <li><code><var>accumulator</var></code></li> + <li><code><var>currentValue</var></code></li> + <li><code><var>currentIndex</var></code></li> + <li><code><var>array</var></code></li> +</ol> + +<p>コールバックが最初に呼び出されたとき、<code><var>accumulator</var></code> と <code><var>currentValue</var></code> が 2 つの値になります。<code><var>initialValue</var></code> が <code>reduce()</code> の呼び出しで提供されていた場合、<code><var>accumulator</var></code> は <code><var>initialValue</var></code> と等しくなり、<code><var>currentValue</var></code> は配列の最初の値と等しくなります。<code><var>initialValue</var></code> が提供されなかった場合は、<code><var>accumulator</var></code> は配列の最初の値と等しくなり、<code><var>currentValue</var></code> は 2番目の値と等しくなります。</p> + +<div class="note"> +<p><strong>注:</strong> <code><var>initialValue</var></code> が指定されなかった場合は、<code>reduce()</code> は最初の要素を飛ばしてインデックス <code>1</code> から実行されます。<code><var>initialValue</var></code> が指定されていたらインデックス <code>0</code> から開始します。</p> +</div> + +<p>配列が空で <code><var>initialValue</var></code> が指定されなかった場合は {{jsxref("TypeError")}} が発生します。</p> + +<p>配列が (位置に関わらず) 1 つの要素しか持たず、<code><var>initialValue</var></code> が指定されなかった場合、または <code><var>initialValue</var></code> が指定されていても配列が空だった場合、<em><code>callback</code> が実行されずに</em>要素が返却されます。</p> + +<p><code><var>initialValue</var></code> を指定しなかった場合、下記の例のような 4 種類の結果が発生しうるため、<code><var>initialValue</var></code> を指定する方が通常は安全です。</p> + +<pre class="brush: js notranslate">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 ); +</pre> + +<h3 id="How_reduce_works" name="How_reduce_works">reduce() はどう動くか</h3> + +<p>次のコードのように <code>reduce()</code> を使用した場合について見てみましょう。</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue +}) +</pre> + +<p>コールバック関数は 4 回呼び出され、各回の引数の内容は以下のようになっています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code><var>callback</var></code> の反復</th> + <th scope="col"><code><var>accumulator</var></code></th> + <th scope="col"><code><var>currentValue</var></code></th> + <th scope="col"><code><var>currentIndex</var></code></th> + <th scope="col"><code><var>array</var></code></th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼出し</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼出し</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼出し</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼出し</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p><code>reduce()</code> の返値は、コールバック呼び出しの最後の返値である (<code>10</code>) となるでしょう。</p> + +<p>通常の関数の代わりに{{jsxref("Functions/Arrow_functions", "アロー関数","",1)}}を指定することができます。下記のコードは上述のコードと同じ結果を返します。</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ) +</pre> + +<p><code>reduce()</code> の 2 つ目の引数に初期値を設定した場合は、コールバック各回の内部的な動作はこのようになります。</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue +}, 10) +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code><var>callback</var></code> の反復</th> + <th scope="col"><code><var>accumulator</var></code></th> + <th scope="col"><code><var>currentValue</var></code></th> + <th scope="col"><code><var>currentIndex</var></code></th> + <th scope="col"><code><var>array</var></code></th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼出し</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼出し</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼出し</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼出し</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">5 回目の呼出し</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>この場合の <code>reduce()</code> の返値は <code>20</code> となります。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js notranslate">// 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; + } + }); +} +</pre> + +<div class="blockIndicator note"> +<p><strong>警告:</strong> {{jsxref("Object.defineProperty()")}} に対応していない本当に時代遅れの JavaScript エンジンに対応する必要がある場合、<code>Array.prototype</code> を<strong>列挙不可能</strong>にすることはできないので、メソッドのポリフィルを使わない方が良いでしょう。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Sum_all_the_values_of_an_array" name="Sum_all_the_values_of_an_array">配列内の値の合計値を出す</h3> + +<pre class="brush: js notranslate">let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue +}, 0) +// sum is 6 + +</pre> + +<p>また、アロー関数を用いて書くことも出来ます。</p> + +<pre class="brush: js notranslate">let total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +)</pre> + +<h3 id="Sum_of_values_in_an_object_array" name="Sum_of_values_in_an_object_array">オブジェクトの配列の値の合計値を出す</h3> + +<p>オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために <code><var>initialValue</var></code> を指定する<strong>必要があります</strong>。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>また、アロー関数を用いて書くことも出来ます。</p> + +<pre class="brush: js notranslate">let initialValue = 0 +let sum = [{x: 1}, {x: 2}, {x: 3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + , initialValue +) + +console.log(sum) // logs 6</pre> + +<h3 id="Flatten_an_array_of_arrays" name="Flatten_an_array_of_arrays">二次元配列を一次元配列にする</h3> + +<pre class="brush: js notranslate">let flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue) + }, + [] +) +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>また、アロー関数を用いて書くことも出来ます。</p> + +<pre class="brush: js notranslate">let flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +) +</pre> + +<h3 id="Counting_instances_of_values_in_an_object" name="Counting_instances_of_values_in_an_object">オブジェクトの値のインスタンスを数える</h3> + +<pre class="brush: js notranslate">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 } +</pre> + +<h3 id="Grouping_objects_by_a_property" name="Grouping_objects_by_a_property">プロパティによってオブジェクトをグループ化する</h3> + +<pre class="brush: js notranslate">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 }] +// } +</pre> + +<h3 id="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue" name="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue">スプレッド演算子と initialValue を使ってオブジェクトの配列に含まれる配列を結合させる</h3> + +<pre class="brush: js notranslate">// 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' +// ]</pre> + +<h3 id="Remove_duplicate_items_in_array" name="Remove_duplicate_items_in_array">配列内の重複要素を除去する</h3> + +<div class="blockIndicator note"> +<p><strong>注:</strong> {{jsxref("Set")}} と {{jsxref("Array.from()")}} に対応している環境を使っている場合、<code>let orderedArray = Array.from(new Set(myArray))</code> を使うことで重複要素を除去された配列を取得することができます。</p> +</div> + +<pre class="brush: js notranslate">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)</pre> + +<h3 id="Replace_.filter.map_with_.reduce" name="Replace_.filter.map_with_.reduce">.filter().map() を .reduce() で置き換える</h3> + +<p>{{jsxref("Array.filter()")}} を使用した後で {{jsxref("Array.map()")}} を使用すると配列を二度走査しますが、{{jsxref("Array.reduce()")}} では同じ効果を一度の操作で実現することができ、もっと効率的です。(for ループが好きなのであれば、{{jsxref("Array.forEach()")}} で一度の操作で filter と map を行うことができます)。</p> + +<pre class="brush: js notranslate">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]</pre> + +<h3 id="Running_Promises_in_Sequence" name="Running_Promises_in_Sequence">シーケンス上の Promise を動かす</h3> + +<pre class="brush: js notranslate">/** + * 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 +</pre> + +<h3 id="Function_composition_enabling_piping" name="Function_composition_enabling_piping">パイプによって関数を合成する</h3> + +<pre class="brush: js notranslate">// 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 + +</pre> + +<h3 id="write_map_using_reduce" name="write_map_using_reduce">reduce を使って map メソッドを書く</h3> + +<pre class="brush: js notranslate">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] + +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>reduceRight()</strong></code> メソッドは、隣り合う 2 つの配列要素に対して (右から左へ) 関数を適用して、単一の値にします。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.reduceRight(<var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]])[, <var>initialValue</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd>4 つの引数を取って、配列内の各値に対し実行するコールバック関数 + <dl> + <dt><code><var>accumulator</var></code></dt> + <dd>現在処理されている配列要素の 1 つ前の要素。もしくは、指定されていれば <code><var>initialValue</var></code>。(下記参照)</dd> + <dt><code><var>currentValue</var></code></dt> + <dd>現在処理されている配列要素</dd> + <dt><code><var>index</var></code>{{optional_inline}}</dt> + <dd>現在処理されている配列要素のインデックス</dd> + <dt><code><var>array</var></code>{{optional_inline}}</dt> + <dd><code>reduceRight()</code> によって呼ばれる配列</dd> + </dl> + </dd> + <dt><code><var>initialValue</var></code> {{optional_inline}}</dt> + <dd><code><var>callback</var></code> の最初の呼び出しのときに、最初の実引数として用いるためのオブジェクト。initialValue が渡されなかった際は、配列の最後の要素が適用されます。また、空の配列に対して、初期値なしで呼び出すと <code>TypeError</code> になります。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>畳み込みによって得られた 1 つの値です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>reduceRight</code> は、配列に存在する各要素に対して、<code>callback</code> 関数を一度だけ実行します。配列における穴は対象からはずされ、初期値（あるいは、直前の <code>callback</code> 呼び出し）、現在の要素の値、現在のインデックス、繰り返しが行われる配列の 4 つの引数を受け取ります。</p> + +<p>reduceRight の <code><var>callback</var></code> の呼び出しは、以下のように見えるでしょう。</p> + +<pre class="brush: js notranslate">array.reduceRight(function(accumulator, currentValue, index, array) { + // ... +}); +</pre> + +<p>関数が初めて呼び出されたとき、<code><var>accumulator</var></code> と <code><var>currentValue</var></code> は、2 つの値のいずれかになります。<code>reduceRight</code> の呼び出しで <code><var>initialValue</var></code> が指定された場合、<code><var>accumulator</var></code> は <code><var>initialValue</var></code> と等しくなり、<code><var>currentValue</var></code> は配列の最後の値と等しくなります。<code><var>initialValue</var></code> が指定されなかった場合、<code><var>accumulator</var></code> は配列の最後の値に等しく、<code><var>currentValue</var></code> は最後から 2 番目の値に等しくなります。</p> + +<p>配列が空で、<code><var>initialValue</var></code> が指定されていない場合、{{jsxref("TypeError")}} が投げられます。配列に要素が 1 つしかなく（位置に関係なく）、<code><var>initialValue</var></code> が指定されていない場合、または <code><var>initialValue</var></code> が指定されているが配列が空の場合、<code><var>callback</var></code> を呼び出さずに単独の値が返されます。</p> + +<p>この関数を使用した場合について見てみましょう。</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}); +</pre> + +<p>コールバックは 4 回呼び出され、各コールの引数と戻り値は以下のようになります。</p> + +<table> + <thead> + <tr> + <th scope="col"><code><var>callback</var></code></th> + <th scope="col"><code><var>accumulator</var></code></th> + <th scope="col"><code><var>currentValue</var></code></th> + <th scope="col"><code><var>index</var></code></th> + <th scope="col"><code><var>array</var></code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼出し</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼出し</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼出し</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼出し</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p><code>reduceRight</code> の返値は、コールバック呼び出しの最後の返値である (<code>10</code>) になります。</p> + +<p><code>initialValue</code> を与えた場合、その結果は以下のようになります。</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code><var>callback</var></code></th> + <th scope="col"><code><var>accumulator</var></code></th> + <th scope="col"><code><var>currentValue</var></code></th> + <th scope="col"><code><var>index</var></code></th> + <th scope="col"><code><var>array</var></code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼出し</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼出し</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼出し</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼出し</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">5 回目の呼出し</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>この場合の <code>reduceRight</code> の返値は <code>20</code> になります。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code>reduceRight</code> は ECMA-262 の第5版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブにはサポートされていない実装でも <code>reduceRight</code> を使用できるようにします。</p> + +<pre class="brush: js notranslate">// 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; + }; +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Sum_up_all_values_within_an_array" name="Sum_up_all_values_within_an_array">配列内のすべての値を合計する</h3> + +<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +</pre> + +<h3 id="Flatten_an_array_of_arrays" name="Flatten_an_array_of_arrays">配列中の配列を平坦化する</h3> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] + +</pre> + +<h3 id="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next" name="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next">一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す</h3> + +<pre class="brush: js notranslate">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); +}</pre> + +<h3 id="Difference_between_reduce_and_reduceRight" name="Difference_between_reduce_and_reduceRight"><code>reduce</code> と <code>reduceRight</code> の違い</h3> + +<pre class="brush: js notranslate">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"</pre> + +<h3 id="Defining_Composible_Function" name="Defining_Composible_Function">関数合計の定義</h3> + +<p>関数合成のコンセプトはシンプルで、n個の関数を組み合わせたものです。これは右から左へと流れ、最後の関数の出力を使用して各関数を呼び出します。</p> + +<pre class="brush: js notranslate">/** + * 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 +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>reverse()</code></strong> メソッドは、配列の要素を <em><a href="https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0">In-place アルゴリズム</a></em>で反転させます。最初の要素が最後の要素に、最後の要素が最初の要素になります。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>a</var>.reverse()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>反転した配列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>reverse</code> メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。</p> + +<p><code>reverse</code> は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している <code>length</code> プロパティを含まないオブジェクトでは効果がないかもしれません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Reversing_the_elements_in_an_array" name="Reversing_the_elements_in_an_array">配列の要素を反転させる</h3> + +<p>次の例は、3 つの要素を含む配列 <code>a</code> を作成し、その配列を反転させます。<code>reverse()</code> の呼び出しは、反転した配列 <code>a</code> への参照を返します。</p> + +<pre class="brush: js notranslate">const a = [1, 2, 3]; + +console.log(a); // [1, 2, 3] + +a.reverse(); + +console.log(a); // [3, 2, 1] + +</pre> + +<h3 id="Reversing_the_elements_in_an_array-like_object" name="Reversing_the_elements_in_an_array-like_object">配列状オブジェクトの要素を反転させる</h3> + +<p>次の例は、3 つの要素と length プロパティを含む配列状オブジェクト <code>a</code> を作成し、その配列状オブジェクトを反転させます。<code>reverse()</code> の呼び出しは、反転した配列状オブジェクト <code>a</code> への参照を返します。</p> + +<pre class="brush: js notranslate">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} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>shift()</code></strong> メソッドは、配列から<strong>最初</strong>の要素を取り除き、その要素を返します。このメソッドは配列の長さを変えます。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.shift()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列から取り除かれた要素を返します。配列が空の場合は、{{jsxref("undefined")}} を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>shift</code> メソッドは 0 番目の添え字の要素を取り除き、続く添え字の値を小さい方向にずらします。そして、削除された値を返します。{{jsxref("Array.length", "length")}} プロパティが 0 の場合、{{jsxref("undefined")}} を返します。</p> + +<p><code>shift</code> は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり、{{jsxref("Function.apply", "適用し", "", 1)}}たりすることもできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している <code>length</code> プロパティを含まないオブジェクトでは効果がないかもしれません。</p> + +<p>{{jsxref("Array.prototype.pop()")}} は <code>shift</code> と似た動作をしますが、配列の最後の要素に適用されます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Removing_an_element_from_an_array" name="Removing_an_element_from_an_array">配列から要素を除去</h3> + +<p>以下のコードは <code>myFish</code> 配列を、その最初の要素を取り除く前後で表示します。また、取り除いた要素も表示します。</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="shift_メソッドの_while_ループ内での使用する">shift() メソッドの while ループ内での使用する</h3> + +<p>shift() メソッドは時に、 while 文の条件内において用いられます。以下のコードでは、要素がすべて無くなるまで、各くり返し内でその配列内の次の要素を取り除きます。</p> + +<pre class="brush: js notranslate">var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; + +while( (i = names.shift()) !== undefined ) { + console.log(i); +} +// Andrew, Edward, Paul, Chris, John +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>slice()</code></strong> メソッドは、<code>start</code> と <code>end</code> が配列の中の項目のインデックスを表している場合、<code>start</code> から <code>end</code> まで (<code>end</code> は含まれない) で選択された配列の一部の浅いコピーを新しい配列オブジェクトに作成して返します。元の配列は変更されません。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.slice([<var>start</var>[, <var>end</var>]]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>start</var></code> {{optional_inline}}</dt> + <dd>取り出しの開始位置を示す 0 から始まるインデックスです。</dd> + <dd>負のインデックスを使って、列の終わりからのオフセットを指定することができます。<code>slice(-2)</code> は列の最後の 2 つの要素を取り出します。</dd> + <dd><code><var>start</var></code> が指定されなかった場合、<code>slice</code> はインデックス <code>0</code> から開始します。</dd> + <dd><code><var>start</var></code> が列のインデックスの範囲よりも大きい場合は、空の配列が返されます。</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>取り出しを終える直前の位置を示す 0 から始まるインデックスです。<code>slice</code> は <code><var>end</var></code> 自体は含めず、その直前まで取り出します。例えば、<code>slice(1,4)</code> は 2 番目から 4 番目までの要素 (インデックスがそれぞれ 1, 2, 3 番目の要素) を取り出します。</dd> + <dd>負のインデックスを使って、列の終わりからのオフセットとして指定することができます。<code>slice(2,-1)</code> は列の 3 番目から、最後から 2 番目までの要素を取り出します。</dd> + <dd><code><var>end</var></code> が省略された場合、<code>slice</code> は列の最後 (<code><var>arr</var>.length</code>) までを取り出します。</dd> + <dd><code><var>end</var></code> がシーケンスの長さを超えた場合も、<code>slice</code> はシーケンスの最後 (<code><var>arr</var>.length</code>) までを取り出します。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>取り出された要素を含む新しい配列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>slice</code> は元の配列を変更せず、元の配列から要素をシャローコピー (1 段階の深さのコピー) した新しい配列を返します。元の配列の要素は以下のように返される配列にコピーされます。</p> + +<ul> + <li>(実際のオブジェクトではない) オブジェクトの参照については、<code>slice</code> はオブジェクトの参照を新しい配列にコピーします。元の配列も新しい配列も同じオブジェクトを参照します。参照されたオブジェクトが修正された場合、その変更は新しい配列と元の配列の両方に現れます。</li> + <li>({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} オブジェクトではなく) 文字列、数値、真偽値では、<code>slice</code> は値を新しい配列にコピーします。一方の配列の文字列や数値に変更を加えても、他の配列に影響はしません。</li> +</ul> + +<p>一方の配列に新しい要素が追加されても、他方の配列に影響はしません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Return_a_portion_of_an_existing_array" name="Return_a_portion_of_an_existing_array">既存の配列の一部を返す</h3> + +<pre class="brush: js notranslate">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +var citrus = fruits.slice(1, 3); + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Using_slice" name="Using_slice">slice の使用</h3> + +<p>以下の例で、<code>slice</code> は新しい配列 <code>newCar</code> を <code>myCar</code> から生成します。両者ともオブジェクト <code>myHonda</code> への参照を含んでいます。<code>myHonda</code> の色が purple に変更されると、両方の要素がその変更を反映します。</p> + +<pre class="brush: js notranslate">// 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) +</pre> + +<p>このスクリプトの出力は次の様になります。</p> + +<pre class="notranslate">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 +</pre> + +<h3 id="Array-like_objects" name="Array-like_objects">配列状オブジェクト</h3> + +<p><code>slice</code> メソッドを呼び出すことで、配列状オブジェクトやコレクションを新しい配列に変換することができます。メソッドをオブジェクトに {{jsxref("Function.prototype.bind", "bind")}} するだけです。配列状オブジェクトの一例として、{{jsxref("Functions/arguments", "arguments")}} が挙げられます。以下に例を示します。</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3] +</pre> + +<p><ruby>結合<rp> (</rp><rt>Binding</rt><rp>) </rp></ruby>は {{jsxref("Function.prototype")}} の {{jsxref("Function.prototype.call", "call()")}} メソッドを用いて行うことができますし、<code>[].slice.call(arguments)</code> を <code>Array.prototype.slice.call</code> の代わりに使って減らすこともできます。</p> + +<p>いずれにせよ、{{jsxref("Function.prototype.bind", "bind")}} を使用することで簡略化することができます。</p> + +<pre class="brush: js notranslate">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]</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>some()</code></strong> メソッドは、配列の少なくとも一つの要素が、指定された関数で実装されたテストに合格するかどうかをテストします。これはブール値を返します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.some(<var>callback</var>(<var>element</var>[, <var>index</var>[, <var>array</var>]])[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>各要素に対してテストを実行する関数です。次の 3 つの引数を取ります。</p> + + <dl> + <dt><code><var>element</var></code></dt> + <dd>現在処理されている要素です。</dd> + <dt><code><var>index</var></code>{{optional_inline}}</dt> + <dd>現在処理されている要素のインデックスです。</dd> + <dt><code><var>array</var></code>{{optional_inline}}</dt> + <dd><code>some()</code> が実行されている配列です。</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code>{{optional_inline}}</dt> + <dd><code><var>callback</var></code> を実行するときに <code>this</code> として使用するオブジェクトです。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列内の少なくとも1つの要素でコールバック関数が{{Glossary("truthy", "真と解釈される")}}値を返した場合は <strong><code>true</code></strong> です。それ以外は <strong><code>false</code></strong> です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>some()</code> は、与えられた <code><var>callback</var></code> 関数を、配列に含まれる各要素に対して一度ずつ、<code><var>callback</var></code> が<em>真と解釈される</em>値 (論理型に変換した際に真となる値) を返す要素が見つかるまで呼び出します。そのような要素が見つかると、<code>some()</code> はただちに <code>true</code> を返します。見つからなかった場合、<code>some()</code> は <code>false</code> を返します。<code><var>callback</var></code> は値が代入されている配列の要素に対してのみ呼び出されます。つまり、すでに削除された要素や、まだ値が代入されていない要素に対しては呼び出されません。</p> + +<p><code><var>callback</var></code> は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数を伴って呼び出されます。</p> + +<p><code><var>thisArg</var></code> 引数が <code>some()</code> に与えられると、それがコールバックのの <code>this</code> として使用されます。それ以外は、{{jsxref("undefined")}} 値が <code>this</code> として使用されるでしょう。 <code><var>callback</var></code> が最終的に見ることができる <code>this</code> の値は、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this">関数から見た <code>this</code> の決定に関する一般的なルール</a>によって決定されます。</p> + +<p><code>some()</code> は呼び出された配列を変化させません。</p> + +<p><code>some()</code> によって処理される要素の範囲は、<code><var>callback</var></code> が最初に呼び出される前に設定されます。<code>some()</code> の呼び出しが開始された後に追加された要素に対しては、<code><var>callback</var></code> は実行されません。既存の配列要素が変更されたり、削除されたりした場合、<code><var>callback</var></code> に渡される値は <code>some()</code> がそれらを訪れた時点での値になり、削除された要素を訪問することはありません。</p> + +<div class="note"> +<p><strong>注</strong>: このメソッドは空の配列ではあらゆる条件式に対して <code>false</code> を返します。</p> +</div> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>some()</code> は ECMA-262 標準の第 5 版に追加されたメソッドなので、この標準に準拠したすべての実装に存在するわけではありません。次のコードをスクリプトの先頭に追加することにより <code>some()</code> にネイティブで対応していない実装上でも使用可能になります。</p> + +<p>このアルゴリズムは ECMA-262 第 5 版で指示されたアルゴリズムとまったく同じものです。 {{jsxref("Object")}}、{{jsxref("TypeError")}} はそれぞれオリジナルの値を持ち、またそれらの <code>fun.call</code> {{jsxref("Function.prototype.call()")}} のオリジナルの値として評価されます。</p> + +<pre class="brush: js notranslate">// 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; + }; +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Testing_value_of_array_elements" name="Testing_value_of_array_elements">配列要素の値のテスト</h3> + +<p>次の例は、配列のいずれかの要素が 10 よりも大きいかどうかをテストします。</p> + +<pre class="brush: js notranslate">function isBiggerThan10(element, index, array) { + return element > 10; +} + +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true</pre> + +<h3 id="Testing_array_elements_using_arrow_functions" name="Testing_array_elements_using_arrow_functions">アロー関数を使った配列要素のテスト</h3> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> はより短い構文で同じテストを提供します。</p> + +<pre class="brush: js notranslate">[2, 5, 8, 1, 4].some(x => x > 10); // false +[12, 5, 8, 1, 4].some(x => x > 10); // true</pre> + +<h3 id="Checking_whether_a_value_exists_in_an_array" name="Checking_whether_a_value_exists_in_an_array">ある値が配列に存在するかどうかのチェック</h3> + +<p><code>includes()</code> メソッドを真似て、このカスタム関数は配列にその要素が存在する場合に <code>true</code> を返します。</p> + +<pre class="brush: js notranslate">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</pre> + +<h3 id="Checking_whether_a_value_exists_using_an_arrow_function" name="Checking_whether_a_value_exists_using_an_arrow_function">アロー関数を使ったある値が存在するかどうかのチェック</h3> + +<pre class="brush: js notranslate">const fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(arrVal => val === arrVal); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Converting_any_value_to_Boolean" name="Converting_any_value_to_Boolean">任意の値の Boolean への変換</h3> + +<pre class="brush: js notranslate">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</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("ESDraft", "#sec-array.prototype.some", "Array.prototype.some")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>sort()</strong></code> メソッドは、配列の要素を <em><a href="https://ja.wikipedia.org/wiki/In-place アルゴリズム">in place</a></em> でソートします。既定のソート順は昇順で、要素を文字列に変換してから、UTF-16 コード単位の値の並びとして比較します。</p> + +<p>このソートで消費される CPU時間やメモリースペースは実装に依存するので、ここで言及することは出来ません。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>ソート順を定義する関数を指定します。省略された場合、配列の各要素は文字列に変換され、各文字の <a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> のコードポイント順に従ってソートされます。</dd> + <dl> + <dt><code>firstEl</code></dt> + <dd>比較対象の一つ目の要素を指定します。</dd> + <dt><code>secondEl</code></dt> + <dd>比較対象の二つ目の要素を指定します。</dd> + </dl> + +</dl> + + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>ソートされた結果の配列。ソートは対象配列上で <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em> に行われることに注意して下さい。コピーされた別の配列が準備されることはありません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>compareFunction</code> (比較関数) が与えられなかった場合、<code>undefined</code> 以外のすべての配列要素は文字列に変換され、文字列が UTF-16 コード単位順でソートされます。例えば、"banana" は "cherry" の前に来ます。数値のソートでは、9 が 80 の前に来ますが、数値は文字列に変換されるため、Unicode 順で "80" が "9" の前に来ます。<code>undefined</code> の要素はすべて、配列の末尾に並べられます。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> UTF-16 では、<code>\uFFFF</code> を超える Unicode 文字は 2 つのサロゲートコード単位にエンコードされ、<code>\uD800</code>-<code>\uDFFF</code> の範囲になります。それぞれのコード単位の値は比較では別々に扱われます。したがって、<code>\uD655\uDE55</code> というサロゲートペアで形成される文字は、<code>\uFF3A</code> の文字よりも前に並べられます。</p> +</div> + +<p><code>compareFunction</code> が与えられた場合、<code>undefined</code> 以外のすべての配列要素は比較関数の返値に基づきソートされます (<code>undefined</code> の要素はすべて、<code>compareFunction</code> を呼び出すことなく配列の末尾へ並べられます)。もし <code>a</code> と <code>b</code> を比較しようとする場合は、次のようになります。</p> + +<ul> + <li><code>compareFunction(a, b)</code> が 0 未満の場合、<code>a</code> を <code>b</code> より小さいインデックスにソートします。(つまり、<code>a</code> が先に来るようにします)</li> + <li><code>compareFunction(a, b)</code> が 0 を返した場合、<code>a</code> と <code>b</code> は互いに変更せず、他のすべての要素に対してソートします。注意: ECMAScript 標準はこの振る舞いを保証していないため、一部のブラウザー (例えば、遅くとも 2003 年以前のバージョンの Mozilla) はこれを遵守していません。</li> + <li><code>compareFunction(a, b)</code> が 0 より大きい場合、<code>b</code> を <code>a</code> より小さいインデックスにソートします。(つまり、<code>b</code> が先に来るようにします)</li> + <li><code>compareFunction(a, b)</code> に与えられた引数が同じなら返値も同じでなければなりません。もし一貫性のない値を返した場合の挙動は未定義となります。</li> +</ul> + +<p>よって、比較関数は以下のような形式をもちます。</p> + +<pre class="brush: js notranslate">function compare(a, b) { + if (ある順序の基準において a が b より小) { + return -1; + } + if (その順序の基準において a が b より大) { + return 1; + } + // a は b と等しいはず + return 0; +} +</pre> + +<p>文字列の代わりに数字を比較する場合、比較関数は単純に <code>a</code> から <code>b</code> を引けばよいでしょう。次のように比較関数を定義すれば昇順に並べることができます (<code>Infinity</code> や <code>NaN</code> がなければですが)。</p> + +<pre class="brush: js notranslate">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>比較関数には{{jsxref("Operators/function", "関数式", "", 1)}}を使うと便利です。</p> + +<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 では{{jsxref("Functions/Arrow_functions", "アロー関数式", "", 1)}}によるより短い構文も利用できます。</p> + +<pre class="brush: js notranslate">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>オブジェクトはプロパティの値の 1 つを指定して並べ替えることができます。</p> + +<pre class="brush: js notranslate">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; +});</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_displaying_and_sorting_an_array" name="Creating_displaying_and_sorting_an_array">配列の生成、表示、ソート</h3> + +<p>以下の例は 4 つの配列を生成し、元の配列を表示したのちに、ソートした配列を表示します。数値の配列は比較関数なしでソートされたのち、比較関数ありでソートされます。</p> + +<pre class="brush: js notranslate">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)); +</pre> + +<p>この例は以下のような出力をもたらします。出力結果が示すように、比較関数が使われた場合、数値はそれが数値か数字の文字列かにかかわらず正しくソートされます。</p> + +<pre class="notranslate">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 +</pre> + +<h3 id="Sorting_non-ASCII_characters" name="Sorting_non-ASCII_characters">非ASCII文字のソート</h3> + +<p>非 ASCII 文字、つまりアクセント記号付き文字 (e, é, è, a, ä など) を含む文字列をソートする場合、英語以外の文字列は {{jsxref("String.localeCompare")}} を使用してください。この関数は、それらの文字を比較して正しい順序で表示することができます。</p> + +<pre class="brush: js notranslate">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é'] +</pre> + +<h3 id="Sorting_with_map" name="Sorting_with_map">map を利用したソート</h3> + +<p><code>compareFunction</code> (比較関数) は、配列内の要素毎に複数回呼び出すことができます。ただ <code>compareFunction</code> の性質によっては、これが多大なオーバーヘッドをもたらす可能性もあります。<code>compareFunction</code> がたくさんの処理を行えば行うほど、そしてソート対象の要素数が多ければ多いほど、ソートに <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> を利用すると効率が上がるでしょう。すなわち、対象の配列を一度だけ走査してソート対象の実際の値を取り出し、一時的な配列に格納した上でソートを行い、その上で一時的な配列を走査して正しい並び順を実現するやりかたです。</p> + +<pre class="brush: js notranslate">// ソートする配列 +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]; +}); +</pre> + +<p>There is an open source library available called <a href="https://null.house/open-source/mapsort">mapsort</a> which applies this approach.</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>splice()</code></strong> メソッドは、<a href="https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0">in place</a> で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>arrDeletedItems</var> = <var>array</var>.splice(<var>start</var>[, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>start</var></code></dt> + <dd>配列を変更する開始位置を表すインデックスです。</dd> + <dd>値が配列の長さより大きい場合は、<code><var>start</var></code> は配列の長さに設定されます。この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された item[n*] の数だけ要素を追加します。</dd> + <dd>値が負数の場合は、配列の末尾から要素数を戻ったところから始まります (<code>-1</code> が原点で、<code>-<var>n</var></code> は最後の要素から <code><var>n</var></code> 番目であることを意味し、したがってインデックスが <code><var>array</var>.length - <var>n</var></code> であるのと同等です)。</dd> + <dd><code><var>start</var></code> の絶対値が配列の長さよりも大きい場合は、インデックス <code>0</code> から始まります。</dd> + <dt><code><var>deleteCount</var></code> {{optional_inline}}</dt> + <dd>配列の <code><var>start</var></code> から取り除く古い要素の数を示す整数です。</dd> + <dd><code><var>deleteCount</var></code> 引数が省略された場合、または <code>array.length - start</code> 以上 (つまり、<code><var>start</var></code> から始まり、配列に残る要素の数以上の場合) の場合、<code><var>start</var></code> 以降のすべての要素が取り除かれます。</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>メモ:</strong> IE8 では、<code><var>deleteCount</var></code> が省略された場合はすべての要素を削除しません。</p> + </div> + </dd> + <dd><code><var>deleteCount</var></code> が <code>0</code> か負数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります (以下参照)。</dd> + <dt><code><var>item1</var>, <var>item2</var>, ...</code> {{optional_inline}}</dt> + <dd>配列に追加する要素で、<code><var>start</var></code> から始まります。要素を指定しなかった場合、<code>splice()</code> は単に配列から要素を取り除きます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>取り除かれた要素を含む配列です。</p> + +<p>要素が 1 つのみ削除された場合は、要素数 1 の配列が返されます。</p> + +<p>要素が削除されなかった場合、空の配列が返されます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>取り除こうとする要素数と異なる数の要素を挿入するように指定した場合、関数呼び出しが終わったとき配列は初めと異なる長さになります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Remove_0_zero_elements_before_index_2_and_insert_drum" name="Remove_0_zero_elements_before_index_2_and_insert_drum">index 2 の位置 (3番目の要素の前) から 0 個の要素を削除して "drum" を挿入する</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2, 0, 'drum') + +// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed は [], どの要素も取り除かれていない (空配列) </pre> + +<h3 id="Remove_0_zero_elements_before_index_2_and_insert_drum_and_guitar" name="Remove_0_zero_elements_before_index_2_and_insert_drum_and_guitar">index 2 の位置 (3 番目の要素の前) から 0 個の要素を削除して、"drum" と "guitar" を挿入する</h3> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Remove_1_element_at_index_3" name="Remove_1_element_at_index_3">index 3 の位置 (4番目の要素) から一つ取り除く</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] +let removed = myFish.splice(3, 1) + +// removed は ["mandarin"] +// myFish は ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Remove_1_element_at_index_2_and_insert_trumpet" name="Remove_1_element_at_index_2_and_insert_trumpet">index 2 の位置 (3 番目の要素) から 1 つ取り除いて "trumpet" を挿入する</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'drum', 'sturgeon'] +let removed = myFish.splice(2, 1, 'trumpet') + +// myFish は ["angel", "clown", "trumpet", "sturgeon"] +// removed は ["drum"]</pre> + +<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue" name="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">index 0 の位置 (先頭の要素) から二つ取り除き、そこへ "parrot" と "anemore" と "blue" を挿入する</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'trumpet', 'sturgeon'] +let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue') + +// myFish は ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed は ["angel", "clown"]</pre> + +<h3 id="Remove_2_elements_from_index_2" name="Remove_2_elements_from_index_2">配列長 - 3 の位置 (後ろから 3番目) から 2 つ取り除く</h3> + +<pre class="brush: js notranslate">let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] +let removed = myFish.splice(-3, 2) + +// myFish は ["parrot", "anemone", "sturgeon"] +// removed は ["blue", "trumpet"]</pre> + +<h3 id="Remove_1_element_from_index_-2" name="Remove_1_element_from_index_-2">index -2 の位置 (後ろから 2番目) から 1 つ取り除く</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(-2, 1) + +// myFish は ["angel", "clown", "sturgeon"] +// removed は ["mandarin"]</pre> + +<h3 id="Remove_all_elements_after_index_2_incl." name="Remove_all_elements_after_index_2_incl.">index 2 の位置 (3番目の要素) から末端までを取り除く</h3> + +<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2) + +// myFish は ["angel", "clown"] +// removed は ["mandarin", "sturgeon"]</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} - 配列末尾の要素の追加 / 削除</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} - 配列先頭の要素の追加 / 削除</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} - 配列に他の配列や値をつないでできた新しい配列を返す</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>toLocaleString()</code></strong> メソッドは、配列の要素を表す文字列を返します。配列の要素は、それぞれの <code>toLocaleString</code> メソッドを使い、ロケール固有の文字列に変換されます (例えばカンマ “,”など)。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html","shorter")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>BCP 47 言語タグの文字列か、その配列です。<code>locales</code> 引数の一般的な形式と解釈については {{jsxref("Intl")}} ページを参照してください。</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>設定プロパティのオブジェクトです。数値に関しては {{jsxref("Number.prototype.toLocaleString()")}} を、日付に関しては {{jsxref("Date.prototype.toLocaleString()")}} を見てください。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列の要素を表す文字列です。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<pre class="brush: js notranslate">// 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; + } + }); +} +</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> が利用できないとても古い JavaScript エンジンをサポートする必要がある場合、<code>Array.prototype</code> のメソッドを polyfill するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_locales_and_options" name="Using_locales_and_options">locales と options の使用</h3> + +<p>配列の要素は、その <code>toLocaleString</code> メソッドを使用して文字列に変換されます。</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p><code>prices</code> 配列内の文字列と数値の通貨を常に表示します。</p> + +<pre class="brush: js notranslate">var prices = ['￥7', 500, 8123, 12]; +prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "￥7,￥500,￥8,123,￥12" +</pre> + +<p>さらに多くの例を知りたいなら、 {{jsxref("Intl")}} や {{jsxref("NumberFormat")}}、{{jsxref("DateTimeFormat")}} ページを見てください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> 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 +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p><code><strong>toSource()</strong></code> メソッドは、配列のソースコードを表す文字列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.toSource()</pre> + +<h3 id="Return_value" name="Return_value">返り値</h3> + +<p>配列のソースコードを表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>toSource</code> メソッドは以下の値を返します。</p> + +<ul> + <li>組み込みの {{jsxref("Array")}} オブジェクトにおいては、<code>toSource</code> はソースコードが利用不可能なことを示す以下の文字列を返します。 + + <pre class="brush: js notranslate">function Array() { + [native code] +} +</pre> + </li> + <li>{{jsxref("Array")}} のインスタンスにおいては、<code>toSource</code> はソースコードを表す文字列を返します。</li> +</ul> + +<p>このメソッドはたいてい JavaScript によって内部的に呼び出され、コードで明示的に呼び出されることはありません。デバッグ中に <code>toSource</code> を呼び出すことで、あなたは配列の内容を調べることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Examining_the_source_code_of_an_array" name="Examining_the_source_code_of_an_array">配列のソースコードを調べる</h3> + +<p>配列のソースコードを調べるには以下のようにします。</p> + +<pre class="brush: js notranslate">var alpha = new Array('a', 'b', 'c'); + +alpha.toSource(); +// ['a', 'b', 'c'] が返る +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>あらゆる標準仕様に組み込まれていません。JavaScript 1.3 で実装されました。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.toSource")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString()</strong></code> メソッドは、指定された配列とその要素を表す文字列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.toString()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>配列の要素を表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の <code>toString</code> メソッドを上書きしています。Array オブジェクトでは、<code>toString</code> メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。</p> + +<p>配列が文字列値として表される必要がある場合や、配列が文字列の結合として参照される時、JavaScript は <code>toString</code> メソッドを自動的に呼び出します。</p> + +<h3 id="ECMAScript_5_semantics" name="ECMAScript_5_semantics">ECMAScript 5 でのセマンティック</h3> + +<p>JavaScript 1.8.5 （Firefox 4）以降、および ECMAScript 第 5 版では、<code>toString()</code> メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_toString" name="Using_toString">toString を使用する</h3> + +<pre class="brush: js notranslate">const array1 = [1, 2, 'a', '1a']; + +console.log(array1.toString()); +// expected output: "1,2,a,1a" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> 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 +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Array<strong>.unobserve()</strong>メソッドは、{{jsxref("Array.observe()")}} で設定された監視を削除するために使われていましたが、非推奨となりブラウザから削除されました。代わりに、一般的な {{jsxref("Proxy")}} オブジェクトを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>監視を停止する配列。</dd> + <dt><code>callback</code></dt> + <dd><strong>arr</strong> 配列の変更時に毎回呼び出されるのを停止するための、オブザーバへの参照。</dd> +</dl> + +<h2 id="Description" name="Description">説明</h2> + +<p>配列からオブザーバを削除するため、<code>Array.unobserve()</code> は {{jsxref("Array.observe()")}} の後に呼び出される必要があります。</p> + +<p>callback は関数への参照とすべきであり、匿名関数ではいけません。なぜなら、この参照は以前のオブザーバを解除するために使用されるからです。callback として匿名関数を使った <strong>Array.unobserve()</strong> の呼び出しは、オブザーバを削除できないので無意味です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Unobserving_an_array" name="Unobserving_an_array">配列の監視を削除</h3> + +<pre class="brush: js">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 は呼び出されなかった。</pre> + +<h3 id="Using_an_anonymous_function" name="Using_an_anonymous_function">匿名関数の使用</h3> + +<pre class="brush: js">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 は常に呼び出される。 +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome("36")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome 49 で非推奨になりました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><code><strong>unshift()</strong></code> メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd><code><var>arr</var></code> の先頭に追加する要素。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>メソッドを呼び出した後のオブジェクトの新しい {{jsxref("Array.length", "length")}} プロパティの値です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>unshift</code> メソッドは、与えられた要素を配列のようなオブジェクトの一番最初に挿入します。</p> + +<p><code>unshift</code> は意図して汎用的です。このメソッドは，配列に類似したオブジェクトに対して{{jsxref("Function.call", "呼び出し", "", 1)}}たり，{{jsxref("Function.apply", "適用し", "", 1)}}たりすることができます。 <code>length</code> プロパティ、すなわち連続の最後を示すゼロベースの数値プロパティ、を反映しているため、意味のある振る舞いができない可能性があります。</p> + +<p>複数の要素が引数として渡された場合、引数として渡されたものと全く同じ順番で、オブジェクトの最初のチャンクに挿入されることに注意してください。したがって、 <code>unshift</code> を <code><var>n</var></code> 個の引数で1回呼び出すのと、1個の引数で <code><var>n</var></code> 回 (例えばループを使って) 呼び出すのとでは同じ結果にはなりません。</p> + +<p>例をご覧ください。</p> + +<pre class="syntaxbox notranslate">let arr = [4, 5, 6] + +arr.unshift(1, 2, 3) +console.log(arr); +// [<strong>1, 2, 3</strong>, 4, 5, 6] + +arr = [4, 5, 6] // 配列をリセット + +arr.unshift(1) +arr.unshift(2) +arr.unshift(3) + +console.log(arr) +// [<strong>3, 2, 1</strong>, 4, 5, 6] +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_unshift" name="Using_unshift">unshift の使用</h3> + +<pre class="brush: js notranslate">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 ] +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>values()</code></strong> メソッドは、配列の各インデックスの値を含む新しい <strong><code>Array Iterator</code></strong> オブジェクトを返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-values.html")}}</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.values()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{jsxref("Array")}} iterator オブジェクトです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Iteration_using_for...of_loop" name="Iteration_using_for...of_loop">for...of ループを用いた反復処理</h3> + +<pre class="brush: js notranslate">var arr = ['a', 'b', 'c', 'd', 'e']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} //"a" "b" "c" "d" "e" +</pre> + +<p><strong>Array.prototype.values</strong> は <strong>Array.prototype[Symbol.iterator]</strong> の既定の実装です。</p> + +<pre class="notranslate">Array.prototype.values === Array.prototype[Symbol.iterator] //true</pre> + +<h3 id="Iteration_using_.next" name="Iteration_using_.next">.next() を使用した反復処理</h3> + +<pre class="brush: js notranslate">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 </pre> + +<div class="blockIndicator warning"> +<p>一度だけの使用: 配列の反復子オブジェクトは一度だけの使用またはテンポラリオブジェクトです</p> +</div> + +<p>例:</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p><strong>理由:</strong> <code>next().done=true</code> または <code>currentIndex>length</code> が <code>for..of</code> の終了条件だからです。<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復処理プロトコル</a>を参照して下さい。</p> + +<p><strong>値</strong>: 配列の反復子オブジェクトには値が格納されません。その代わりに、その作成に使用された配列のアドレスが格納されるので、その配列に格納されている値に依存します。</p> + +<pre class="brush: js notranslate">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" +</pre> + +<div class="blockIndicator note"> +<p>配列内の値が変化した場合は、配列の反復子オブジェクトの値も変化します。</p> +</div> + +<p class="hidden"><strong>TODO</strong>: please write about why we need it, use cases.</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> |