diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/vi/web/javascript/reference/global_objects/array | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/vi/web/javascript/reference/global_objects/array')
33 files changed, 6487 insertions, 0 deletions
diff --git a/files/vi/web/javascript/reference/global_objects/array/concat/index.html b/files/vi/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..f19a1b981b --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>concat()</strong></code> dùng để kết nối 2 hay nhiều mảng với nhau. Phương thức này không làm thay đổi các mảng đã có mà thay vào đó sẽ trả về 1 mảng mới.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">var <var>newArray</var> = <var>oldArray</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Các giá trị hay mảng dùng để nối lại với nhau trong mảng mới .</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một mảng {{jsxref("Array")}} mới.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Phương thức <code>concat</code> tạo ra 1 mảng mới bao gồm các phần tử trong đối tượng mà nó được gọi thực thi, và theo thứ tự lần lượt, với mỗi tham số truyền vào là các phần tử của tham số đó (nếu tham số truyền vào là 1 mảng) hoặc là chính tham số đó (nếu tham số truyền vào không phải là 1 mảng). Phương thức này sẽ không thực thi 1 cách đệ quy cho các tham số là mảng lồng nhau.</p> + +<p>Phương thức <code>concat</code> không thay đổi <code>this</code> (mảng được gọi thực thi) hay bất cứ mảng được truyền vào làm tham số mà thay vào đó nó sẽ trả về 1 bản sao tham chiếu (shallow copy) bao gồm các bản sao của cùng 1 phần tử được kết hợp từ các mảng ban đầu. Các phần từ của mảng ban đầu được sao chép vào mảng mới như sau: </p> + +<ul> + <li>Đối với tham chiếu đối tượng (và không phải đối tượng thực tế): <code>concat</code> sao chép tham chiếu đối tượng vào mảng mới. Cả mảng ban đầu và mảng mới đều tham chiếu tới cùng 1 đối tượng. Nghĩa là nếu đối tượng được tham chiếu tới bị thay đổi thì việc thay đổi đó sẽ ảnh hưởng trong cả mảng ban đầu và mảng mới. Điều này bao gồm các phần tử của các mảng làm tham số cũng đều là mảng. </li> + <li>Đối với dữ liệu kiểu chuỗi(strings), số(numbers), và booleans (không phải là các đối tượng kiểu {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, và {{jsxref("Global_Objects/Boolean", "Boolean")}}): <code>concat</code> sẽ sao chép giá trị của chuỗi, số vào mảng mới.</li> +</ul> + +<div class="note"> +<p><strong>Chú ý:</strong> Việc ghép nối các mảng hay giá trị sẽ không "đụng chạm" tới các giá trị ban đầu. Hơn nữa, bất cứ thao tác nào trên mảng trả về (ngoại trừ các thao tác trên các phần từ là tham chiếu đối tượng) sẽ không ảnh hưởng tới các mảng ban đầu, và ngược lại.</p> +</div> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Nối_2_mảng">Nối 2 mảng</h3> + +<p>Đoạn mã dưới đây sẽ nối 2 mảng lại với nhau:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; +var numeric = [1, 2, 3]; + +alpha.concat(numeric); +// result in ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Nối_3_mảng">Nối 3 mảng</h3> + +<p>Đoạn mã dưới đây sẽ nối 3 mảng lại với nhau</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var nums = num1.concat(num2, num3); + +console.log(nums); +// results in [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Nối_các_giá_trị_vào_1_mảng">Nối các giá trị vào 1 mảng</h3> + +<p>Đoạn mã sau đây sẽ nối 3 giá trị vào 1 mảng:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +var alphaNumeric = alpha.concat(1, [2, 3]); + +console.log(alphaNumeric); +// results in ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Nối_mảng_lồng_nhau">Nối mảng lồng nhau</h3> + +<p>Đoạn mã sau đây sẽ nối các mảng lồng nhau và thể hiện sự lưu trữ tham chiếu:</p> + +<pre class="brush: js">var num1 = [[1]]; +var num2 = [2, [3]]; + +var nums = num1.concat(num2); + +console.log(nums); +// results in [[1], 2, [3]] + +// modify the first element of num1 +num1[0].push(4); + +console.log(nums); +// results in [[1, 4], 2, [3]] +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Định nghĩa lần đầu. Hiện thực trong JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.concat")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — thêm/xóa phần tử từ cuối mảng</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — thêm/xóa các phần tử từ đầu mảng</li> + <li>{{jsxref("Array.splice", "splice")}} — thêm/xóa các phần tử tại vị trí xác định trong mảng</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – control flattening.</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/copywithin/index.html b/files/vi/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..fd216cbc54 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,170 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p> <code><strong>copyWithin() </strong></code> là một phương thức sao chép cạn một phần của mảng tới một vị trí khác trong mảng đó và trả về giá trị mà không thay đổi độ dài của mảng</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">target</span></font></dt> + <dd>Zero-based index at which to copy the sequence to. If negative, <code>target</code> will be counted from the end.</dd> + <dd>If <code>target</code> is at or greater than <code>arr.length</code>, nothing will be copied. If <code>target</code> is positioned after <code>start</code>, the copied sequence will be trimmed to fit <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Zero-based index at which to start copying elements from. If negative, <code>start</code> will be counted from the end.</dd> + <dd>If <code>start</code> is omitted, <code>copyWithin</code> will copy from index <code>0</code>. </dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Zero-based index at which to end copying elements from. <code>copyWithin</code> copies up to but not including <code>end</code>. If negative, <code>end</code> will be counted from the end.</dd> + <dd>If <code>end</code> is omitted, <code>copyWithin</code> will copy until the last index (default to <code>arr.length</code>).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The modified array.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>copyWithin</code> works like C and C++'s <code>memmove</code>, and is a high-performance method to shift the data of an {{jsxref("Array")}}. This especially applies to the {{jsxref("TypedArray/copyWithin", "TypedArray")}} method of the same name. The sequence is copied and pasted as one operation; pasted sequence will have the copied values even when the copy and paste region overlap.</p> + +<p>The <code>copyWithin</code> function is intentionally <em>generic</em>, it does not require that its <code>this</code> value be an {{jsxref("Array")}} object.</p> + +<p>The <code>copyWithin</code> method is a mutable method. It does not alter the length of <code>this</code>, but it will change its content and create new properties, if necessary.</p> + +<h2 id="Polyfill">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">Examples</h2> + +<h3 id="Using_copyWithin">Using 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(-2, -3, -1) +// [1, 2, 3, 3, 4] + +[].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">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/entries/index.html b/files/vi/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..6be2131071 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,82 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Phương thức <strong><code>entries()</code></strong> trả về một mảng đối tượng <strong>Array Iterator</strong> chứa cặp key/value cho mỗi chỉ mục trong mảng.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>array</var>.entries()</pre> + +<h3 id="Return_value">Return value</h3> + +<p>Một {{jsxref("Array")}} đối tượng iterator.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Iterating_with_index_and_element">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">Using a <a href="/en-US/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">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="See_also">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="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/every/index.html b/files/vi/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..efeaa2deca --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,236 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>Phương thức <strong>every()</strong> sẽ kiểm tra xem mọi phần tử bên trong một array được truyền vào có vượt qua được bài kiểm tra khi thực hiện với function được cung cấp không. every() sẽ return về một kết quả Boolean.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html","shorter")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</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">Parameters</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd>Một function với chức năng là kiểm tra từng phần tử trong mảng được cung cấp cho every(), nhận vào 3 đối số: + <dl> + <dt><code><var>element</var></code></dt> + <dd>Là phần tử hiện tại của mảng đang được function xử lý.</dd> + <dt><code><var>index</var></code> {{Optional_inline}}</dt> + <dd>Index của phần tử trên.</dd> + <dt><code><var>array</var></code> {{Optional_inline}}</dt> + <dd>Mảng mà every() gọi.</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{Optional_inline}}</dt> + <dd>A value to use as <code>this</code> when executing <code><var>callback</var></code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code><strong>true</strong></code> if the <code><var>callback</var></code> function returns a <a href="/en-US/docs/Glossary/truthy">truthy</a> value for every array element. Otherwise, <code><strong>false</strong></code>.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>every</code> method executes the provided <code><var>callback</var></code> function once for each element present in the array until it finds the one where <code><var>callback</var></code> returns a <a href="/en-US/docs/Glossary/falsy">falsy</a> value. If such an element is found, the <code>every</code> method immediately returns <code>false</code>. Otherwise, if <code><var>callback</var></code> returns a <a href="/en-US/docs/Glossary/truthy">truthy</a> value for all elements, <code>every</code> returns <code>true</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Caution</strong>: Calling this method on an empty array will return <code>true</code> for any condition!</p> +</div> + +<p><code><var>callback</var></code> is invoked only for array indexes which have assigned values. It is not invoked for indexes which have been deleted, or which have never been assigned values.</p> + +<p><code><var>callback</var></code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p> + +<p>If a <code><var>thisArg</var></code> parameter is provided to <code>every</code>, it will be used as callback's <code>this</code> value. Otherwise, the value <code>undefined</code> will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code><var>callback</var></code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> + +<p><code>every</code> does not mutate the array on which it is called.</p> + +<p>The range of elements processed by <code>every</code> is set before the first invocation of <code><var>callback</var></code>. Therefore, <code><var>callback</var></code> will not run on elements that are appended to the array after the call to <code>every</code> begins. If existing elements of the array are changed, their value as passed to <code><var>callback</var></code> will be the value at the time <code>every</code> visits them. Elements that are deleted are not visited.</p> + +<p><code>every</code> acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns <code>true</code>. (It is <a href="http://en.wikipedia.org/wiki/Vacuous_truth">vacuously true</a> that all elements of the <a href="https://en.wikipedia.org/wiki/Empty_set#Properties">empty set</a> satisfy any given condition.)</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> was added to the ECMA-262 standard in the 5<sup>th</sup> edition, and it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>every</code> in implementations which do not natively support it.</p> + +<p>This algorithm is exactly the one specified in ECMA-262, 5<sup>th</sup> edition, assuming <code>Object</code> and <code>TypeError</code> have their original values, and that <code><var>callbackfn</var>.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}.</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">Examples</h2> + +<h3 id="Testing_size_of_all_array_elements">Testing size of all array elements</h3> + +<p>The following example tests whether all elements in the array are bigger than 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">Using arrow functions</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> provide a shorter syntax for the same test.</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="Affecting_Initial_Array_modifying_appending_and_deleting">Affecting Initial Array (modifying, appending, and deleting)</h3> + +<p>The following examples tests the behaviour of the <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">every</span></font> method when the array is modified.</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">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="See_also">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/vi/web/javascript/reference/global_objects/array/fill/index.html b/files/vi/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..e7e8201c46 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,149 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>fill()</strong></code> điền (sửa đổi) tất cả các phần tử của một mảng từ một chỉ mục bắt đầu (số không mặc định) đến một chỉ mục kết thúc (độ dài mảng mặc định) với một giá trị tĩnh. Nó trả về mảng đã sửa đổi</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Value to fill an array.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Start index, defaults to 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>End index, defaults to <code>this.length</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The modified array.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>fill</code> method takes up to three arguments <code>value</code>, <code>start</code> and <code>end</code>. The <code>start</code> and <code>end</code> arguments are optional with default values of <code>0</code> and the <code>length</code> of the <code>this</code> object.</p> + +<p>If <code>start</code> is negative, it is treated as <code>length+start</code> where <code>length</code> is the length of the array. If <code>end</code> is negative, it is treated as <code>length+end</code>.</p> + +<p><code>fill</code> is intentionally generic, it does not require that its <code>this</code> value be an Array object.</p> + +<p><code>fill</code> is a mutable method, it will change <code>this</code> object itself, and return it, not just return a copy of it.</p> + +<p>When <code>fill</code> gets passed an object, it will copy the reference and fill the array with references to that object.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">[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} + +// Objects by reference. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">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>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/filter/index.html b/files/vi/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..900c22a1ac --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,232 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>filter()</strong></code> dùng để tạo một mảng mới với tất cả các phần tử thỏa điều kiện của một hàm test.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + +<p class="hidden">Mã nguồn của ví dụ tương tác này được lưu tại GitHub. Nếu bạn muốn đóng góp cho các ví dụ tương tác này, hãy clone repo <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> và gửi pull request cho chúng tôi.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Đây là hàm thử, dùng để kiểm tra từng phần tử của mảng. Trả về <code>true</code> để giữ lại phần tử, hoặc <code>false</code> để loại nó ra. Nó được gọi với ba tham số:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Phần tử đang được xử lý trong mảng.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Chỉ mục (index) của phần tử đang được xử lý.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Mảng nguồn mà hàm <code>filter</code> đang xử lý.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Không bắt buộc. Giá trị của <code>this</code> bên trong hàm <code>callback</code>.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một mảng mới với các phần tử đã thỏa điều kiện của hàm test. Nếu không có phần tử nào thỏa điều kiện, một mảng rỗng sẽ được trả về.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>filter()</code> sẽ thực thi hàm <code>callback</code> trên từng phần tử của mảng, và xây dựng một mảng mới với các phần tử mà giá trị trả về của <code>callback</code> <a href="/en-US/docs/Glossary/Truthy">nếu ép kiểu sẽ mang giá trị <code>true</code></a>. <code>callback</code> chỉ được thực thi tại những chỉ mục (index) của mảng mà chúng được gán giá trị; nó không được thực thi tại chỉ mục đã bị xóa hoặc chưa từng được gán giá trị. Những phần tử không thỏa điều kiện tại hàm thử <code>callback</code> sẽ bị bỏ qua, không được cho vào mảng mới.</p> + +<p><code>callback</code> được gọi với ba tham số:</p> + +<ol> + <li>giá trị của phần tử</li> + <li>chỉ mục (index) của phần tử</li> + <li>mảng ban đầu mà hàm thử đang được gọi lên</li> +</ol> + +<p>Nếu tham số <code>thisArg</code> được truyền cho hàm <code>filter</code>, nó sẽ được thay vào giá trị của từ khóa <code>this</code> trong hàm callback. Nếu không, giá trị <code>undefined</code> sẽ được dùng cho <code>this</code>. Tóm lại, giá trị của từ khóa <code>this</code> trong hàm <code>callback</code> được xác định tuân theo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">các quy tắc thông thường để xác định <code>this</code> trong một hàm</a>.</p> + +<p><code>filter()</code> không làm thay đổi mảng mà nó được gọi.</p> + +<p>Các phần tử được <code>filter()</code> chạy qua được xác định từ đầu trước khi <code>callback</code> được gọi lần đầu tiên. Những phần tử mới được thêm vào sau khi <code>filter()</code> bắt đầu chạy sẽ không được truyền vào <code>callback</code>. Trong lúc <code>filter()</code> đang chạy, nếu những phần tử hiện tại của mảng bị thay đổi, thì giá trị của chúng khi được truyền cho <code>callback</code> là giá trị tại thời điểm <code>filter()</code> chạy qua; những phần tử đã xóa sẽ bị bỏ qua.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Lọc_bỏ_các_giá_trị_nhỏ">Lọc bỏ các giá trị nhỏ</h3> + +<p>Ví dụ sau sẽ dùng <code>filter()</code> để tạo một mảng lọc không có các phần tử nào nhỏ hơn 10.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Lọc_các_giá_trị_không_hợp_lệ_khỏi_JSON">Lọc các giá trị không hợp lệ khỏi JSON</h3> + +<p>Ví dụ sau sẽ dùng hàm <code>filter()</code> để lọc lại các phần tử của JSON chỉ chứa <code>id</code> có giá trị số và khác 0.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id) && item.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +var 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="Tìm_kiếm_trong_mảng">Tìm kiếm trong mảng</h3> + +<p>Ví dụ sau dùng <code>filter()</code> để lọc ra phần tử có nội dung thỏa chuỗi tìm kiếm</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="Ví_dụ_ở_trên_với_ES2015">Ví dụ ở trên với ES2015</h3> + +<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +const filterItems = (query) => { + return fruits.filter((el) => + el.toLowerCase().indexOf(query.toLowerCase()) > -1 + ); +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange'] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> chỉ được thêm vào đặc tả ECMA-262 phiên bản thứ 5; cho nên nó có thể không tồn tại trong một số hiện thực (implementation) của đặc tả. Bạn có thể xoay sở bằng cách thêm vào đoạn code bên dưới vào đầu script của bạn, cho phép sử dụng <code>filter()</code> tại những nơi mà nó không được hỗ trợ sẵn. Giải thuật trong hàm polyfill này chính xác với đặc tả trong ECMA-262, 5th edition, với yêu cầu <code>fn.call</code> trả về giá trị ban đầu của {{jsxref("Function.prototype.bind()")}}, và {{jsxref("Array.prototype.push()")}} không bị thay đổi.</p> + +<pre class="brush: js">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; + if (thisArg === undefined){ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func(t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + else{ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func.call(thisArg, t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + + res.length = c; // shrink down array to proper size + return res; + }; +}</pre> + +<p> </p> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Định nghĩa lần đầu. Được hiện thực trong JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Tương_tự">Tương tự</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/vi/web/javascript/reference/global_objects/array/find/index.html b/files/vi/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..ba4631a924 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,226 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>find() </strong></code>sẽ trả về <strong>giá trị đầu tiên tìm thấy</strong> ở trong mảng được cung cấp. Hoặc có thể trả về {{jsxref("undefined")}} .</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + + + +<p>Xem thêm phương thức {{jsxref("Array.findIndex", "findIndex()")}} , sẽ trả về <strong>index</strong> của phần tử tìm thấy trong mảng thay vì giá trị của nó.</p> + +<p>Nếu bạn muốn tìm vị trí của phần tử hoặc tìm phần tử đó có tồn tại trong mảng hay không, hãy thử sử dụng {{jsxref("Array.prototype.indexOf()")}} or {{jsxref("Array.prototype.includes()")}}.</p> + +<h2 id="Cú_Pháp">Cú Pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.find(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters_(_thông_số_đầu_vào_)">Parameters ( thông số đầu vào )</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm thực thi với mỗi giá trị trong mảng, chuyền vào 3 giá trị : + <dl> + <dt><code>element</code></dt> + <dd>Phần tử hiện tại đang được xử lý trong mảng.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Thứ tự của phần tử hiện tại đang được xử lý trong mảng..</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Mảng được gọi.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Đối tượng tùy chọn để sử dụng như thế này khi thực hiện <code>callback</code>.</dd> +</dl> + +<h3 id="Return_value_(_giá_trị_trả_về_)">Return value ( giá trị trả về )</h3> + +<p><strong>Giá trị ( value )</strong> của<strong> phần tử đầu tiên ( first element )</strong> trong mảng thỏa mãn chức năng kiểm tra được cung cấp. Nếu không, sẽ trả về {{jsxref("undefined")}}.</p> + +<h2 id="Mô_Tả">Mô Tả</h2> + +<p>Phương thức <code>find thực thi hàm</code> <code>callback</code> với mỗi giá trị trong mảng cho đến khi tìm được giá trị mà hàm <code>callback</code> trả về giá trị. Nếu phần tử đó được tìm thấy, phương thức <code>find sẽ</code> trả về giá trị của phần tử đó. Nếu không tìm thấy, <code>find</code> sẽ trả về {{jsxref("undefined")}}. <code>callback</code> được gọi cho mọi <code>index</code> có trong mảng từ <code>0</code> đến<code>length - 1</code> và cho tất cả các <code>indexes</code>, không chỉ những giá trị đã được gán. Điều này chỉ ra rằng nó có thể kém hiệu quả hơn so với các phương thức khác chỉ truy cập các <code>indexes</code> có giá trị được gán.</p> + +<p><code>callback</code> được gọi với ba <strong>arguments</strong>: giá trị của phần tử ( the value of the element ), biến đếm của phần tử ( the index of the element ) và đối tượng mảng cần tìm ( the Array object being traversed ).</p> + +<p>Nếu <code>thisArg</code> tham số ( <strong>parameter </strong>) cung cấp cho phương thức <code>find</code>, nó sẽ được sử dụng như là giá trị <code>this</code> cho mỗi lần gọi <code>callback</code>. Nếu không được cung cấp tham số, thì {{jsxref("undefined")}} sẽ được thay thế.</p> + +<p>Phương thức <code>find</code> sẽ không làm thay đổi mảng mà nó được gọi hoặc sử dụng.</p> + +<p>Phạm vi của các phần tử được xử lý bởi <code>find</code> sẽ được gán trước ghi gọi hàm <code>callback</code>. Vì thế, <code>callback</code> sẽ không truy cập các phần tử được gắn vào mảng sau khi phương thức <code>find được</code> bắt đầu. Các phần tử bị xóa vẫn có thể truy cập được.</p> + +<h2 id="Ví_Dụ">Ví Dụ</h2> + +<h3 id="Tìm_một_đối_tượng_trong_một_mảng_bằng_một_trong_các_thuộc_tính">Tìm một đối tượng trong một mảng bằng một trong các thuộc tính</h3> + +<pre class="brush: js">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="Sử_dụng_arrow_function_(_ES2015_)">Sử dụng arrow function ( ES2015 )</h4> + +<pre class="brush: js">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +const result = inventory.find( fruit => fruit.name === 'cherries' ); + +console.log(result) // { name: 'cherries', quantity: 5 }</pre> + +<h3 id="Tìm_số_nguyên_tố_trong_mảng">Tìm số nguyên tố trong mảng</h3> + +<p>Theo ví dụ sau đây tìm thấy một phần tử trong mảng là số nguyên tố (hoặc sẽ trả về {{jsxref("undefined")}} nếu trong mảng không có số nguyên tố nào).</p> + +<pre class="brush: js">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, not found +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<p>Ví dụ sau đây cho thấy các phần tử không tồn tại và bị xóa vẫn được truy cập và giá trị được chuyển cho <code>callback </code>lại là giá trị của chúng khi được truy cập.</p> + +<pre class="brush: js">// Declare array with no element at index 2, 3 and 4 +const array = [0,1,,,,5,6]; + +// Shows all indexes, not just those that have been assigned values +array.find(function(value, index) { + console.log('Visited index ' + index + ' with value ' + value); +}); + +// Shows all indexes, including deleted +array.find(function(value, index) { + + // Delete element 5 on first iteration + if (index == 0) { + console.log('Deleting array[5] with value ' + array[5]); + delete array[5]; + } + // Element 5 is still visited even though deleted + console.log('Visited index ' + index + ' with value ' + value); +}); +// expected output: +// 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="Polyfill">Polyfill</h2> + +<p>Phương pháp này đã được thêm vào ECMAScript 2015 và có thể không có sẵn trong tất cả các phiên bản JavaScript. Tuy nhiên, bạn có thể sử dụng <code>Array.prototype.find</code> với cú pháp :</p> + +<pre class="brush: js">// 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 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 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> + +<h2 id="Đặc_Điểm">Đặc Điểm</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tính_Tương_Thích_Với_Trình_Duyệt_Web">Tính Tương Thích Với Trình Duyệt Web</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="Những_Phương_Thức_Liên_Quan">Những Phương Thức Liên Quan</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – find and return an index</li> + <li>{{jsxref("Array.prototype.includes()")}} – test whether a value exists in the array</li> + <li>{{jsxref("Array.prototype.filter()")}} – find all matching elements</li> + <li>{{jsxref("Array.prototype.every()")}} – test all elements together</li> + <li>{{jsxref("Array.prototype.some()")}} – test at least one element</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/findindex/index.html b/files/vi/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..3c8d822f07 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,207 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>findIndex()</strong></code> trả về <strong>chỉ số (index)</strong> của phần tử đầu tiên trong mảng thỏa mãn hàm truyền vào. Nếu không phần tử nào thỏa mãn, phương thức trả lại -1.</p> + +<pre class="brush: js">function isBigEnough(element) { + return element >= 15; +} + +[12, 5, 8, 130, 44].findIndex(isBigEnough); // Trả về 3, phần tử thứ 4.</pre> + +<p>Xem thêm phương thức {{jsxref("Array.find", "find()")}}, trả về <strong>giá trị (value)</strong> của phần tử được tìm thấy thay vì chỉ số.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm kiểm tra, được thực thi cho mỗi phần tử của mảng, có thể chứa 3 tham số: + <dl> + <dt><code>element</code></dt> + <dd>Phần tử đang xét.</dd> + <dt><code>index</code></dt> + <dd>Chỉ số của phần tử đang xét.</dd> + <dt><code>array</code></dt> + <dd>Mảng được gọi.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Optional. Object to use as <code>this</code> when executing <code>callback</code>.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một chỉ số của mảng nếu tìm được phần tử đầu tiên thỏa mãn hàm kiểm tra; otherwise, <strong>-1</strong>.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Phương thức <code>findIndex</code> thực thi hàm <code>callback</code> từng lần cho toàn bộ chỉ số mảng từ <code>0..length-1</code> (bao gồm hai nút) trong mảng cho tới khi tìm thấy chỉ số mà phần tử tại đó làm cho <code>callback</code> trả về một giá trị đúng (a value that coerces to <code>true</code>). Nếu một phần tử được tìm thấy, <code>findIndex</code> lập tức trả về chỉ số của phần tử này. Nếu hàm callback luôn nhận giá trị không đúng hoặc số phần tử của mảng bằng 0, <code>findIndex</code> trả về -1. Không giống như cách phương thức về mảng khác như Array#some, trong mảng thưa thớt hàm <code>callback</code> được gọi là ngay cả đối với các chỉ mục của mục không có trong mảng đó.</p> + +<p><code>callback</code> được gọi với 3 đối số: giá trị của phần tử, chỉ số của phần tử, và mảng đang được xét.</p> + +<p>Nếu tham số <code>thisArg</code> được đưa vào <code>findIndex</code>, Nó sẽ được sử dụng như là <code>this</code> cho mỗi lần gọi <code>callback</code>. Nếu nó không được đưa vào, thì {{jsxref("undefined")}} sẽ được sử dụng.</p> + +<p><code>findIndex</code> không làm thay đổi mảng mà nó được gọi.</p> + +<p>The range of elements processed by <code>findIndex</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>findIndex</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>findIndex</code> visits that element's index; elements that are deleted are not visited.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Tìm_chỉ_số_của_một_số_nguyên_tố_trong_mảng">Tìm chỉ số của một số nguyên tố trong mảng</h3> + +<p>Ví dụ dưới đây tìm chỉ số của một phần tử trong mảng mà là số nguyên tố (trả về -1 nếu không tìm thấy).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h2 id="Polyfill">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; + } + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p> + +<h2 id="Các_thông_số">Các thông số</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>Yes</td> + <td>Yes</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/flat/index.html b/files/vi/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..065a92a7a5 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,179 @@ +--- +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> + +<div>Phương thức <code><strong>flat()</strong></code> trả về một mảng mới. Trong đó, tất cả các phần tử của mảng con được gán ngược vào nó bằng cách đệ quy lên đến độ sâu đã chỉ định.</div> + + + +<p>{{EmbedInteractiveExample("pages/js/array-flat.html")}}</p> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<em>[depth]</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Chỉ định độ sâu của mảng kết quả cuối cùng. Mặc định là 1</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Một mảng mới với các phần tử của mảng con được nối với nó.</p> + +<h2 id="Alternatives">Alternatives</h2> + +<h3 id="reduce_and_concat">reduce and concat</h3> + +<pre class="brush: js notranslate">const arr = [1, 2, [3, 4]]; + +// Trả về mảng chỉ có 1 level +arr.flat(); + +// Nó ngang với việc sử dụng reduce +arr.reduce((acc, val) => acc.concat(val), []); +// [1, 2, 3, 4] + +// hoặc decomposition syntax +const flattened = arr => [].concat(...arr); +</pre> + +<h3 id="reduce_concat_isArray_recursivity">reduce + concat + isArray + recursivity</h3> + +<pre class="brush: js notranslate">const arr = [1, 2, [3, 4, [5, 6]]]; + +// ?Sử dụng reduce, concat và deep level +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">Use a stack</h3> + +<pre class="brush: js notranslate">// Sử dụng stack để đệ quy không cần báo deep level + +function flatten(input) { + const stack = [...input]; + const res = []; + while(stack.length) { + // Lấy gía trị ra khỏi stack + const next = stack.pop(); + if(Array.isArray(next)) { + // Gán trở lại arry, không thay đổi giá trị của item đó + stack.push(...next); + } else { + res.push(next); + } + } + // Đảo ngược array để trả về đúng order ban đầu + 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">Use Generator function</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>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">Examples</h2> + +<h3 id="Flattening_nested_arrays">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">Flattening and array holes</h3> + +<p>The flat method removes empty slots in arrays:</p> + +<pre class="brush: js notranslate">const arr5 = [1, 2, , 4, 5]; +arr5.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.flat', 'Array.prototype.flat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="See_also">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/vi/web/javascript/reference/global_objects/array/foreach/index.html b/files/vi/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..6121f40a83 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,303 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>forEach()</strong></code> sẽ thực thi một hàm khi duyệt qua từng phần tử của mảng.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue[, index[, array]]) { + //your iterator +}</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm sẽ thực thi lên từng phần tử của mảng được gọi, hàm này nhận 3 tham số: + <dl> + <dt><code>currentValue</code>{{optional_inline}}</dt> + <dd>Giá trị của phần tử đang được duyệt.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Chỉ mục của phần tử đang được duyệt.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Mảng mà hàm <code>forEach()</code> đang duyệt.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd> + <p>Giá trị được gán cho từ khóa <code><strong>this</strong></code> bên trong hàm <code>callback</code> khi được thực thi.</p> + </dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Mô_tả_chi_tiết">Mô tả chi tiết</h2> + +<p><code>forEach()</code> thực thi hàm <code>callback</code> trong lúc duyệt tới từng phần tử của mảng theo thứ tự tăng dần. Nó sẽ không được gọi cho vị trí index đã bị xóa hoặc không được khởi tạo (đối với mảng thưa - sparse arrays).</p> + +<p><code>callback</code> được gọi với <strong>3 tham số</strong>:</p> + +<ul> + <li><strong>giá trị của phần tử</strong></li> + <li><strong>index của phần tử</strong></li> + <li><strong>mảng đang được duyệt </strong></li> +</ul> + +<p>Nếu tham số <code>thisArg</code> được truyền vào cho <code>forEach()</code>, nó sẽ được dùng cho từ khóa <code>this</code> trong hàm callback. Nếu không, giá trị {{jsxref("undefined")}} sẽ được dùng cho từ khóa <code>this</code>. Tóm lại, giá trị của từ khóa <code>this</code> trong hàm <code>callback</code> được xác định tuân theo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">các quy tắc thông thường để xác định <code>this</code> trong một hàm</a>.</p> + +<p>Khoảng các phần tử được xử lý bởi <code>forEach()</code> được thiết lập trước lần gọi đầu tiên của <code>callback</code>. Phần tử được thêm vào mảng sau khi gọi <code>forEach()</code> sẽ không được <code>callback</code> bắt gặp. Nếu giá trị của các phần tử sẵn có trong mảng thay đổi, thì giá trị truyền vào <code>callback</code> sẽ là giá trị lúc <code>forEach()</code> gặp chúng; phần tử bị xoá trước khi bắt gặp sẽ không tính. Nếu phần tử đã gặp rồi bị loại đi (ví dụ dùng {{jsxref("Array.prototype.shift()", "shift()")}}) trong quá trình lặp, các phần tử sau sẽ bị bỏ qua - xem ví dụ phía dưới.</p> + +<p><code>forEach()</code> executes the <code>callback</code> function once for each array element; unlike {{jsxref("Array.prototype.map()", "map()")}} or {{jsxref("Array.prototype.reduce()", "reduce()")}} it always returns the value {{jsxref("undefined")}} and is not chainable. The typical use case is to execute side effects at the end of a chain.</p> + +<p><code>forEach()</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p> + +<div class="note"> +<p>Khác với cú pháp lặp truyền thống, không có cách nào để ngừng vòng lặp forEach ngoài việc ném ra một ngoại lệ. Nếu vì một mục đích nào đó mà bạn cần ngừng vòng lặp thì nên dùng cách khác thay vì dùng forEach</p> + +<p>Một số cách có thể dùng trong trường hợp đó:</p> + +<ul> + <li>Vòng lặp <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> đơn giản</li> + <li>Vòng lặp <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</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>Một số hàm khác trên kiểu mảng: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, and {{jsxref("Array.prototype.findIndex()", "findIndex()")}} test the array elements with a predicate returning a truthy value to determine if further iteration is required.</p> +</div> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Converting_a_for_loop_to_forEach">Converting a for loop to forEach</h3> + +<p>before</p> + +<pre class="brush:js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +for (let i=0; i<items.length; i++) { + copy.push(items[i]) +} +</pre> + +<p>after</p> + +<pre class="brush:js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +items.forEach(function(item){ + copy.push(item) +}); + +</pre> + +<h3 id="Printing_the_contents_of_an_array">Printing the contents of an array</h3> + +<p>The following code logs a line for each element in an array:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('a[' + index + '] = ' + element); +} + +// Notice that index 2 is skipped since there is no item at +// that position in the array. +[2, 5, , 9].forEach(logArrayElements); +// logs: +// a[0] = 2 +// a[1] = 5 +// a[3] = 9 +</pre> + +<h3 id="Using_thisArg">Using <code>thisArg</code></h3> + +<p>The following (contrived) example updates an object's properties from each entry in the array:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0; + this.count = 0; +} +Counter.prototype.add = function(array) { + array.forEach(function(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>Since the <code>thisArg</code> parameter (<code>this</code>) is provided to <code>forEach()</code>, it is passed to <code>callback</code> each time it's invoked, for use as its <code>this</code> value.</p> + +<div class="note"> +<p>If passing the function argument using an <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> the <code>thisArg</code> parameter can be omitted as arrow functions lexically bind the {{jsxref("Operators/this", "this")}} value.</p> +</div> + +<h3 id="An_object_copy_function">An object copy function</h3> + +<p>The following code creates a copy of a given object. There are different ways to create a copy of an object; the following is just one way and is presented to explain how <code>Array.prototype.forEach()</code> works by using ECMAScript 5 <code>Object.*</code> meta property functions.</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)); + const propNames = Object.getOwnPropertyNames(obj); + + propNames.forEach(function(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.">If the array is modified during iteration, other elements might be skipped.</h3> + +<p>The following example logs "one", "two", "four". When the entry containing the value "two" is reached, the first entry of the whole array is shifted off, which results in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped. <code>forEach()</code> does not make a copy of the array before iterating.</p> + +<pre class="brush:js">var words = ['one', 'two', 'three', 'four']; +words.forEach(function(word) { + console.log(word); + if (word === 'two') { + words.shift(); + } +}); +// one +// two +// four +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>forEach()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>forEach()</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>callback.call()</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// 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*/) { + + 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(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 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="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_tương_thích">Trình duyệt tương thích</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</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/vi/web/javascript/reference/global_objects/array/from/index.html b/files/vi/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..cee1cc84f7 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,228 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Phương Thức + - Tham khảo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>Array.from()</strong></code> tạo ra một thực thể <code>Array</code> mới được sao chép cạn (shallow-copied) từ các đối tượng giống mảng hoặc các đối tượng khả duyệt.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre>Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Đối tượng có tính chất giống mảng hoặc khả duyệt</dd> + <dt><code>mapFn</code>{{Optional_inline}}</dt> + <dd>Hàm Map được gọi khi thực thi trên từng phần tử.</dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Giá trị được sử dụng như <code>this</code>, thường là tham chiếu đến phạm vi của đối tượng gọi hàm <code>mapFn</code>.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một thực thể {{jsxref("Array")}} mới.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>Array.from()</code> cho phép tạo <code>Array</code> từ:</p> + +<ul> + <li>Các đối tượng giống mảng (một đối tượng giống mảng sẽ có thuộc tính mô tả chiều dài <code>length</code> và các phần tử được đánh chỉ mục) </li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> - đối tượng khả duyệt (là các đối tượng mà các phần tử của nó có thể được duyệt ví dụ như {{jsxref("Map")}} và {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> còn cung cấp thêm một tham số tuỳ chọn là <code>mapFn</code>, vốn là một hàm được tự động thực thi khi duyệt qua từng phần tử của {{jsxref("Array.prototype.map", "map")}}. Điểm khác biệt quan trọng của<code> Array.from(obj, mapFn, thisArg)</code> so với <code>Array.from(obj).map(mapFn, thisArg)</code> là nó không tạo ra mảng trung gian. Đây là điểm quan trọng cho các mảng kế thừa như <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> vì mảng trung gian nhất thiết sẽ có các giá trị được cắt ngắn để vừa với loại thích hợp.</p> + +<p>Thuộc tính <code>length</code> của phương thức <code>from()</code> là 1.</p> + +<p>Với ES2015 thì cú pháp class cho phép kế thừa từ cả các lớp có sẵn hoặc do người dùng định nghĩa, tất nhiên kể cả các phương thức tĩnh như <code>Array.from</code> cũng được kế thừa trong subclass, và kết quả trả về của <code>from</code> trong subclass là thực thể của subclass, không phải <code>Array</code>.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Tạo_mảng_từ_chuỗi">Tạo mảng từ chuỗi</h3> + +<pre class="brush: js">Array.from('foo'); +// ["f", "o", "o"]</pre> + +<h3 id="Tạo_mảng_từ_tập_hợp_Set">Tạo mảng từ tập hợp <code>Set</code></h3> + +<pre class="brush: js">var s = new Set(['foo', window]); +Array.from(s); +// ["foo", window]</pre> + +<h3 id="Tạo_mảng_từ_một_Map"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Tạo mảng từ một </span></font>Map</code></h3> + +<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + +var mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Tạo_mảng_từ_một_đối_tượng_có_tính_chất_giống_mảng_(arguments)">Tạo mảng từ một đối tượng có tính chất giống mảng (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [1, 2, 3]</pre> + +<h3 id="Hàm_arrow_trong_Array.from">Hàm arrow trong <code>Array.from</code></h3> + +<pre class="brush: js">// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> đã được thêm vào tiêu chuẩn ECMA-262 trong ấn bản thứ 6 (ES2015); như vậy nó có thể không có mặt trong các bản hiện thực khác của ECMA-262 khác. Bạn có thể giải quyết vấn đề này bằng cách chèn đoạn mã sau vào đầu các đoạn mã JavaScript cho phép sử dụng <code>Array.from</code> trong các bản thực thi không hỗ trợ <code>Array.from</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + 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); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - 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); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Khởi tạo.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_hỗ_trợ">Trình duyệt hỗ trợ</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/includes/index.html b/files/vi/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..bc4b1980f4 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - JavaScript + - Mảng + - Phương Thức + - Pollyfill + - Prototype + - Tham khảo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>includes()</strong></code> kiểm tra xem phần tử đã cho có tồn tại trong mảng hay không, trả về kết quả <code>true</code> hoặc <code>false</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.includes(<var>valueToFind</var>[, <var>fromIndex</var>]) +</pre> + +<h3 id="Các_tham_số">Các tham số</h3> + +<dl> + <dt><code><var>valueToFind</var></code></dt> + <dd> + <p>Giá trị muốn kiểm tra.</p> + + <div class="blockIndicator note"> + <p><strong>Lưu ý:</strong> Khi kiểm tra chuỗi hoặc kí tự, <code>includes()</code> sẽ <strong>phân biệt hoa thường</strong>.</p> + </div> + </dd> + <dt><code><var>fromIndex</var></code> {{optional_inline}}</dt> + <dd>Vị trí trong mảng để bắt đầu tìm kiếm <code><var>valueToFind</var></code>; đầu tìm kiếm tại <code><var>fromIndex</var></code> khi <code><var>fromIndex</var></code> mang giá trị dương, hoặc tại <code>array.length + fromIndex</code> khi <code><var>fromIndex</var></code> mang giá trị âm (sử dụng {{interwiki("wikipedia", "absolute value", "giá trị tuyệt đối")}} của <code><var>fromIndex</var></code> làm số lượng kí tự tính từ cuối mảng làm vị trí bắt đầu). Giá trị mặc định là 0.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Có kiểu {{jsxref("Boolean")}}, trả về <code>true</code> nếu <code><var>valueToFind</var></code> được tìm thấy trong mảng (hoặc một phần của mảng được xác định bởi <code><var>fromIndex</var></code> nếu có). Các giá trị "không" được coi là bằng nhau (-0 sẽ bằng 0 và +0), nhưng <code>false</code> thì không bằng 0.</p> + +<div class="note"> +<p><strong>Lưu ý:</strong> Về mặt kĩ thuật, <code>includes()</code> sử dụng thuật toán <code><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> để kiểm tra phần tử đã cho có tìm thấy hay không.</p> +</div> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<pre class="brush: js">[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_lớn_hơn_hoặc_bằng_độ_dài_mảng"><code><var>fromIndex</var></code> lớn hơn hoặc bằng độ dài mảng</h3> + +<p>Nếu <code><var>fromIndex</var></code> lớn hơn hoặc bằng độ dài mảng, trả về kết quả <code>false</code></p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false +arr.includes('c', 100); // false</pre> + +<h3 id="Computed_index_nhỏ_hơn_0">Computed index nhỏ hơn 0</h3> + +<p>Nếu <code><var>fromIndex</var></code> là số âm, computed index sẽ được dùng làm vị trí bắt đầu để tìm kiếm <code><var>valueToFind</var></code>. Nếu computed index nhỏ hơn hoặc bằng <code>-1 * array.length</code>, phần tử đã cho sẽ được tìm kiếm trong toàn bộ mảng (tương tự như <code><var>fromIndex</var></code> bằng 0).</p> + +<pre class="brush: js">// độ dài mảng là 3 +// fromIndex là -100 +// computed index là 3 + (-100) = -97 + +var 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"><code>includes()</code> used as a generic method</h3> + +<p><code>includes()</code> method is intentionally generic. It does not require <code>this</code> value to be an Array object, so it can be applied to other kinds of objects (e.g. array-like objects). The example below illustrates <code>includes()</code> method called on the function's <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> object.</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true + console.log([].includes.call(arguments, 'd')); // false +})('a','b','c');</pre> + +<div class="hidden"> +<p>Please do not add polyfills on reference articles. For more details and discussion, see <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="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</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/vi/web/javascript/reference/global_objects/array/index.html b/files/vi/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..151242e596 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,433 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>Đối tượng <strong><code>Array</code></strong> trong JavaScript là đối tượng toàn cục được dùng để xây dựng nên các mảng; là những đối tượng cấp cao và giống một dạng danh sách.</p> + +<p><strong>Tạo một Mảng</strong></p> + +<pre class="brush: js notranslate">var fruits = ['Apple', 'Banana']; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Truy cập (bằng chỉ mục) đến một phần tử của Mảng</strong></p> + +<pre class="brush: js notranslate">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Lặp qua một Mảng</strong></p> + +<pre class="brush: js notranslate">fruits.forEach(function(item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Thêm phần tử vào cuối Mảng</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.push('Orange'); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Xóa phần tử từ cuối Mảng</strong></p> + +<pre class="brush: js notranslate">var last = fruits.pop(); // xoá bỏ Orange (từ vị trí cuối) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Xóa phần tử từ đầu Mảng</strong></p> + +<pre class="brush: js notranslate">var first = fruits.shift(); // xoá bỏ Apple từ vị trí đầu +// ["Banana"]; +</pre> + +<p><strong>Thêm phần tử vào đầu Mảng</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.unshift('Strawberry') // thêm vào vị trí đầu +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Tìm chỉ mục của một phần tử trong Mảng</strong></p> + +<pre class="brush: js notranslate">fruits.push('Mango'); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf('Banana'); +// 1 +</pre> + +<p><strong>Xóa một phần tử bằng chỉ mục của nó</strong></p> + +<pre class="brush: js notranslate">var removedItem = fruits.splice(pos, 1); // đây là cách để xoá bỏ một phần tử + +// ["Strawberry", "Mango"]</pre> + +<p><strong>Xóa các phần tử bắt đầu từ vị trí của chỉ mục</strong></p> + +<pre class="brush: js notranslate">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +console.log(vegetables); +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// đây là cách để xoá các phần tử, n định nghĩa số phần tử cần xoá bỏ, +// từ vị trí đó (pos) trở đi đến cuối mảng. + +console.log(vegetables); +// ["Cabbage", "Carrot"] (mảng ban đầu đã bị thay đổi) + +console.log(removedItems); +// ["Turnip", "Radish"]</pre> + +<p><strong>Sao chép một Mảng</strong></p> + +<pre class="brush: js notranslate">var shallowCopy = fruits.slice(); // đây là cách để tạo một bản sao +// ["Strawberry"] +</pre> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox notranslate"><code>[ <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>)</code></pre> + +<dl> + <dt><code>nguyên tố <em>N</em></code></dt> + <dd>Một mảng JavaScript được khởi tạo với các yếu tố nhất định, ngoại trừ trong trường hợp một đối số duy nhất được truyền vào <code>mảng</code> xây dựng và lập luận đó là một con số. (Xem bên dưới). Lưu ý rằng trường hợp đặc biệt này chỉ áp dụng cho các mảng JavaScript tạo ra với các <code>mảng</code> xây dựng, không mảng literals tạo ra với cú pháp khung.</dd> + <dt><code>arrayLength</code></dt> + <dd>Nếu đối số duy nhất được truyền cho các <code>mảng</code> constructor là một số nguyên giữa 0 và 2 <sup>32</sup> -1 (bao gồm), điều này trả về một mảng JavaScript mới với chiều dài thiết lập để con số đó. Nếu đối số là số nào khác, một {{jsxref ("Global_Objects / RangeError", "RangeError")}} ngoại lệ được ném ra.</dd> +</dl> + +<h2 id="Miêu_tả">Miêu tả</h2> + +<p>Mảng là đối tượng danh sách giống như nguyên mẫu mà có phương pháp để thực hiện traversal và đột biến hoạt động. Cả chiều dài của một mảng JavaScript hay các loại của các yếu tố của nó được cố định. Vì chiều dài kích thước của một mảng lớn hoặc thu nhỏ bất cứ lúc nào, các mảng JavaScript là không đảm bảo được dày đặc. Nói chung, đây là những đặc điểm thuận tiện; nhưng nếu các tính năng này không được mong muốn sử dụng cụ thể của bạn, bạn có thể xem xét sử dụng các mảng gõ.</p> + +<p>Một số người nghĩ rằng <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">bạn không nên sử dụng một mảng như là một mảng kết hợp</a> . Trong mọi trường hợp, bạn có thể sử dụng đồng bằng {{jsxref ("Global_Objects / Object", "đối tượng")}} thay vào đó, mặc dù làm như vậy đi kèm với hãy cẩn thận của mình. Xem các bài viết <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">từ điển JavaScript nhẹ với các phím tùy ý</a> như là một ví dụ.</p> + +<h3 id="Truy_cập_vào_các_phần_tử_mảng">Truy cập vào các phần tử mảng</h3> + +<p>Mảng JavaScript được zero-lập chỉ mục: phần tử đầu tiên của mảng là lúc chỉ số <code>0</code> , và các yếu tố cuối cùng là chỉ số tương đương với giá trị của của mảng {{jsxref ("Array.length", "chiều dài")}} tài sản trừ đi 1.</p> + +<pre class="brush: js notranslate">var arr = ['đây là yếu tố đầu tiên "," đây là yếu tố thứ hai']; +console.log(arr[0]); // Nhật ký này là yếu tố đầu tiên ' +console.log(arr[1]); // Nhật ký này là yếu tố thứ hai ' +console.log(arr[arr.length - 1]); // Nhật ký này là yếu tố thứ hai ' +</pre> + +<p>Các phần tử mảng là thuộc tính đối tượng trong cùng một cách mà <code>toString</code> là một thuộc tính, nhưng cố gắng để truy cập vào một phần tử của mảng như sau ném một lỗi cú pháp, bởi vì tên sở hữu là không hợp lệ:</p> + +<pre class="brush: js notranslate">console.log(arr.0); // Một lỗi cú pháp +</pre> + +<p>Có gì đặc biệt về mảng JavaScript và các thuộc tính gây ra điều này là. Tính JavaScript bắt đầu bằng một chữ số không thể được tham chiếu với ký hiệu dấu chấm; và phải được truy cập bằng cách sử dụng ký hiệu khung. Ví dụ, nếu bạn đã có một đối tượng với một thuộc tính có tên <code>'3D'</code> , nó chỉ có thể được tham chiếu bằng cách sử dụng ký hiệu khung. Ví dụ như:</p> + +<pre class="brush: js notranslate">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // Một lỗi cú pháp +console.log(years[0]); // Đúng cú pháp +</pre> + +<pre class="brush: js notranslate">renderer.3d.setTexture (model, 'character.png'); // Một lỗi cú pháp +renderer['3D']setTexture (model, 'character.png.'); // Đúng cú pháp +</pre> + +<p>Lưu ý rằng trong ví dụ <code>3d</code> , <code>'3D'</code> đã được trích dẫn. Có thể trích dẫn các chỉ số mảng JavaScript cũng như (ví dụ, <code>năm ['2']</code> thay vì <code>năm [2]</code> ), mặc dù nó không cần thiết. 2 trong <code>năm [2]</code> là bị cưỡng chế vào một chuỗi các công cụ JavaScript thông qua một tiềm ẩn <code>toString</code> chuyển đổi. Chính vì lý do này mà <code>'2'</code> và <code>'02'</code> sẽ chỉ đến hai khe cắm khác nhau trên <code>năm</code> đối tượng và các ví dụ sau đây có thể là <code>sự thật</code> :</p> + +<pre class="brush: js notranslate">console.log(years['2'] = years['02']!); +</pre> + +<p>Tương tự, thuộc tính đối tượng đó xảy ra để được dành riêng chỉ có thể được truy cập như các chuỗi trong ký hiệu khung:</p> + +<pre class="brush: js notranslate">var promise = { + 'Var': 'text', + 'Array': [1, 2, 3, 4] +}; + +console.log(promise['Array']); +</pre> + +<h3 id="Mối_quan_hệ_giữa_chiều_dài_và_số_thuộc_tính">Mối quan hệ giữa <code>chiều dài</code> và số thuộc tính</h3> + +<p>Một mảng của JavaScript {{jsxref ("Array.length", "chiều dài")}} tài sản và tính toán được kết nối. Một số phương pháp mảng xây dựng trong (ví dụ, {{jsxref ("Array.join", "tham gia")}}, {{jsxref ("Array.slice", "lát cắt")}}, {{jsxref (" Array.indexOf "," indexOf ")}}, vv) có tính đến các giá trị của một mảng {{jsxref (" Array.length "," chiều dài ")}} tài sản khi chúng được gọi. Các phương pháp khác (ví dụ, {{jsxref ("Array.push", "đẩy")}}, {{jsxref ("Array.splice", "mối nối")}}, vv) cũng cho kết quả trong bản cập nhật tới một mảng của { {jsxref ("Array.length", "chiều dài")}} thuộc tính.</p> + +<pre class="notranslate"><code>var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3</code></pre> + +<p>Khi thiết lập một thuộc tính trên một mảng JavaScript khi tài sản là một chỉ số mảng hợp lệ và chỉ số đó là ngoài giới hạn hiện tại của mảng, engine sẽ cập nhật thuộc tính {{jsxref ("Array.length", "chiều dài")}} của mảng cho phù hợp:</p> + +<pre class="notranslate"><code>fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6</code></pre> + +<p>Tăng {{jsxref ("Array.length", "chiều dài")}}.</p> + +<pre class="brush: js notranslate">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Giảm thuộc tính {{jsxref ("Array.length", "chiều dài")}} , tuy nhiên, xóa các phần tử.</p> + +<pre class="brush: js notranslate">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>Điều này được giải thích thêm về {{jsxref ("Array.length")}} trang.</p> + +<h3 id="Tạo_một_mảng_bằng_cách_sử_dụng_kết_quả_của_một_trận_đấu">Tạo một mảng bằng cách sử dụng kết quả của một trận đấu</h3> + +<p>Kết quả của một trận đấu giữa một biểu hiện thường xuyên và một chuỗi có thể tạo ra một mảng JavaScript. Mảng này có các tính chất và các yếu tố trong đó cung cấp thông tin về trận đấu. Một mảng đó được trả về bởi {{jsxref ("RegExp.exec")}}, {{jsxref ("String.match")}} và {{jsxref ("string.Replace")}}. Để giúp giải thích các thuộc tính và các yếu tố, nhìn vào ví dụ sau đây và sau đó tham khảo bảng dưới đây:</p> + +<pre class="brush: js notranslate">// Trận đấu một d theo sau bởi một hoặc nhiều b theo sau bởi một d +// Ghi phù hợp của b và d sau +// Bỏ qua trường hợp + +var Myre = / d (b +) (d) / i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>Các tính chất và các yếu tố trở về từ trận đấu này như sau:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Bất động sản / tử</td> + <td class="header">Miêu tả</td> + <td class="header">Thí dụ</td> + </tr> + <tr> + <td><code>đầu vào</code></td> + <td>Một thuộc tính chỉ đọc phản ánh các chuỗi ban đầu dựa vào đó các biểu thức chính quy được kết hợp.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>mục lục</code></td> + <td>Một thuộc tính chỉ đọc mà là chỉ số không dựa trên các trận đấu trong chuỗi.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Một yếu tố chỉ đọc mà xác định các ký tự tương ứng cuối cùng.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ... [n]</code></td> + <td>Chỉ đọc các yếu tố đó chỉ định các trận đấu substring parenthesized, nếu có trong các biểu hiện thường xuyên. Số lượng các chuỗi con trong ngoặc có thể là không giới hạn.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Thuộc_tính">Thuộc tính</h2> + +<dl> + <dt>{{Jsxref ("Array.length")}}</dt> + <dd>Thuộc tính chiều dài của <code>Array</code> trong constructor (hàm dựng) có giá trị là 1.</dd> + <dt>{{Jsxref ("Array.prototype")}}</dt> + <dd>Cho phép bổ sung các thuộc tính cho tất cả các đối tượng mảng.</dd> +</dl> + +<h2 id="Phương_thức">Phương thức</h2> + +<dl> + <dt>{{Jsxref ("Array.from()")}} {{experimental_inline}}</dt> + <dd>Tạo ra một <code>Mảng</code> mới từ một đối tượng giống mảng hoặc iterable.</dd> + <dt>{{Jsxref ("Array.isArray()")}}</dt> + <dd>Trả về true nếu một biến là một mảng, ngược lại false nếu không phải là mảng.</dd> + <dt>{{Jsxref ("Array.of()")}} {{experimental_inline}}</dt> + <dd>Tạo ra một <code>Array</code> mới với một số lượng các đối số, bất kể số hoặc loại của các đối số.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>Tất cả instance <code>Array </code>kế thừa từ {{jsxref ("Array.prototype")}}. Các đối tượng nguyên mẫu của <code>Array</code> constructor có thể được sửa đổi để ảnh hưởng đến tất cả các instance <code>Array</code>.</p> + +<h3 id="Thuộc_tính_2">Thuộc tính</h3> + +<div>{{Page ('/ en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / mẫu', 'Properties')}}</div> + +<h3 id="Phương_thức_2">Phương thức</h3> + +<h4 id="Phương_thức_mutator">Phương thức mutator</h4> + +<div>{{Page ('en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / mẫu', 'Mutator_methods')}}</div> + +<h4 id="Phương_thức_accessor">Phương thức accessor</h4> + +<div>{{Page ('en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / mẫu', 'Accessor_methods')}}</div> + +<h4 id="Phương_thức_lặp_đi_lặp_lại">Phương thức lặp đi lặp lại</h4> + +<div>{{Page ('en-US / docs / Web / JavaScript / Reference / Global_Objects / Array / mẫu', 'Iteration_methods')}}</div> + +<h2 id="Array_phương_thức_chung"><code>Array</code> phương thức chung</h2> + +<p>Đôi khi bạn muốn áp dụng phương thức mảng các chuỗi hoặc các đối tượng mảng giống khác (chẳng hạn như chức năng {{jsxref ("Chức năng / lập luận", "lý luận", "", 1)}}). Bằng cách này, bạn đối xử với một chuỗi như là một mảng kí tự (hoặc nếu không điều trị một phi mảng như là một mảng). Ví dụ, để kiểm tra xem tất cả các nhân vật trong biến <var>str</var> là một lá thư, bạn có thể viết:</p> + +<pre class="brush: js notranslate">function isLetter (person) { + return person >= 'a' && person <= 'z'; +} + +if (Array.prototype.every.call (str, isLetter)) { + console.log("<code>The string</code> " + str + " <code>contains only letters</code>!"); +} +</pre> + +<p>Ký hiệu này là khá lãng phí và JavaScript 1.6 giới thiệu một cách viết tắt chung:</p> + +<pre class="brush: js notranslate">if (Array.every (str, isLetter)) { + console.log("<code>The string</code> " + str + " <code>contains only letters</code>!"); +} +</pre> + +<p>{{Jsxref ("Global_Objects / String", "Generics", "#String_generic_methods", 1)}} cũng có sẵn trên {{jsxref ("Global_Objects / String", "String")}}.</p> + +<p>Đây không phải là một phần của tiêu chuẩn ECMAScript và chúng không được hỗ trợ bởi các trình duyệt không phải là Gecko. Như một thay thế tiêu chuẩn, bạn có thể chuyển đổi đối tượng của bạn thành một mảng bằng cách sử dụng ({{jsxref ("Array.from ()")}}, mặc dù phương pháp này có thể không được hỗ trợ trong các trình duyệt cũ:</p> + +<pre class="notranslate"><code>if (Array.from(str).every(isLetter)) { + console.log("The string " + str + " contains only letters!"); +}</code></pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Tạo_một_mảng">Tạo một mảng</h3> + +<p>Ví dụ sau tạo một mảng, <code>msgArray</code> , với chiều dài 0, sau đó gán giá trị cho <code>[0] msgArray</code> và <code>msgArray [99]</code> , thay đổi độ dài của mảng đến 100.</p> + +<pre class="brush: js notranslate">var msgArray = []; +msgArray [0] = "Hello"; +msgArray [99] = 'World'; + +if (msgArray.length === 100) { + console.log('Chiều dài là 100'); +} +</pre> + +<h3 id="Tạo_một_mảng_hai_chiều">Tạo một mảng hai chiều</h3> + +<p>Sau đây tạo ra một bàn cờ như là một mảng hai chiều của chuỗi. Động thái đầu tiên được thực hiện bằng cách sao chép 'p' trong (6,4) đến (4,4). Các vị trí cũ (6,4) được làm trống.</p> + +<pre class="notranslate"><code>var 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'); + +// Di chuyển King's Pawn về phía trước 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n'));</code></pre> + +<p>Đây là kết quả:</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="Sử_dụng_một_mảng_để_sắp_xếp_một_tập_các_giá_trị">Sử dụng một mảng để sắp xếp một tập các giá trị</h3> + +<pre class="notranslate"><code>values = []; +for (var x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +}; +console.table(values)</code></pre> + +<p>Kết quả là:</p> + +<pre class="notranslate"><code>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</code></pre> + +<p>(Cột đầu tiên là index (chỉ mục))</p> + +<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc điểm kỹ thuật</th> + <th scope="col">Trạng thái</th> + <th scope="col">Chú thích</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Định nghĩa ban đầu.</td> + </tr> + <tr> + <td>{{SpecName("ES5.1", "#sec-15.4", "Array")}}</td> + <td>{{Spec2("ES5.1")}}</td> + <td>Phương thức mới được thêm vào: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf ")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array. prototype.forEach","forEach")}}, {{jsxref("Array.prototype.map","map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName("ES6", "#sec-array-objects", "Array")}}</td> + <td>{{Spec2 ("ES6")}}</td> + <td>Phương thức mới được thêm vào: {{jsxref ("Array.from")}}, {{jsxref ("Array.of")}}, {{jsxref ("Array.prototype.find", "find")}}, {{jsxref ("Array.prototype.findIndex", "findIndex")}}, {{jsxref ("Array.prototype.fill", "fill")}}, {{jsxref ("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_trình_duyệt">Khả năng tương thích trình duyệt</h2> + +<div>{{Compat("javascript.builtins.Array")}}</div> + +<div id="compat-desktop"></div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">Hướng dẫn JavaScript: "thuộc tính đối tượng Indexing"</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: Array Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Mảng Typed</a></li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/indexof/index.html b/files/vi/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..1ac4ea6321 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,228 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>Phương thức <strong>indexOf()</strong> sẽ trả về giá trị index đầu tiên của mảng, nơi mà nó đc tìm thấy trong mảng, hoặc trả về -1 nếu không tồn tại trong mảng.</p> + +<div class="note"> +<p><strong>Chú ý:</strong> sử dụng indexOf() cho String, xem ở đây {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Các_tham_số">Các tham số</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Phần tử cần tìm trong mảng.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Vị trí index nơi bắt đầu tìm kiếm. Nếu index lớn hơn hoặc bằng số phần tử trong mảng, <strong>-1</strong> sẽ được trả về, việc tìm kiếm sẽ không xảy ra. Nếu giá trị <code>fromIndex</code> là một số âm, vị trí index được tính từ cuối mảng. Lưu ý: cho dù <code>fromIndex</code> là số âm, kết quả tìm kiếm vẫn tính từ đầu mảng trở về sau. Nếu index bằng 0, cả mảng sẽ được tìm kiếm. Mặc định: 0 (cả mảng sẽ được tìm kiếm)</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Index đầu tiên của phần tử tìm thấy trong mảng; <strong>-1</strong> nếu không tìm thấy.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>indexOf()</code> sẽ so sánh giá trị <code>searchElement</code> với các phần tử của mảng sử dụng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">so sánh chặt</a> (tương đương với việc so sánh toán tử ba-dấu-bằng <code>===</code>)</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Sử_dụng_indexOf">Sử dụng <code>indexOf()</code></h3> + +<p>Ví dụ sau sẽ dùng <code>indexOf()</code> để tìm vị trí của giá trị trong một mảng.</p> + +<pre class="brush: js">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="Tìm_tất_cả_các_lần_xuất_hiện_của_phần_tử">Tìm tất cả các lần xuất hiện của phần tử</h3> + +<pre class="brush: js">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="Xác_định_phần_tử_đã_tồn_tại_trong_mảng_hay_chưa_và_cập_nhật_lại_mảng">Xác định phần tử đã tồn tại trong mảng hay chưa và cập nhật lại mảng</h3> + +<pre class="brush: js">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">Polyfill</h2> + +<p><code>indexOf()</code> được thêm vào đặc tả ECMA-262, phiên bản 5; nên có thể nó không có sẵn trong tất cả trình duyệt. Bạn có thể work around bằng cách thêm vào đoạn code bên dưới vào đầu script. Polyfill này sẽ giúp bạn vẫn sử dụng được <code>indexOf</code> dù trình duyệt nào đó vẫn chưa hỗ trợ sẵn. Giải thuật của polyfill này tương đương với đặc tả của <code>indexOf</code> trong ECMA-262, 5th edition, với yêu cầu {{jsxref("Global_Objects/TypeError", "TypeError")}} và {{jsxref("Math.abs()")}} không bị thay đổi.<br> + </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// This version tries to optimize by only checking for "in" when looking for undefined and</span> +<span class="comment token">// skipping the definitely fruitless NaN search. Other parts are merely cosmetic conciseness.</span> +<span class="comment token">// Whether it is actually faster remains to be seen.</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>indexOf<span class="punctuation token">)</span> + <span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>indexOf <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">Object<span class="punctuation token">,</span> max<span class="punctuation token">,</span> min</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="string token">"use strict"</span> + <span class="keyword token">return</span> <span class="keyword token">function</span> <span class="function token">indexOf</span><span class="punctuation token">(</span><span class="parameter token">member<span class="punctuation token">,</span> fromIndex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span> <span class="operator token">===</span> <span class="keyword token">null</span> <span class="operator token">||</span> <span class="keyword token">this</span> <span class="operator token">===</span> <span class="keyword token">undefined</span><span class="punctuation token">)</span> + <span class="keyword token">throw</span> <span class="function token">TypeError</span><span class="punctuation token">(</span><span class="string token">"Array.prototype.indexOf called on null or undefined"</span><span class="punctuation token">)</span> + + <span class="keyword token">var</span> that <span class="operator token">=</span> <span class="function token">Object</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">,</span> Len <span class="operator token">=</span> that<span class="punctuation token">.</span>length <span class="operator token">>>></span> <span class="number token">0</span><span class="punctuation token">,</span> i <span class="operator token">=</span> <span class="function token">min</span><span class="punctuation token">(</span>fromIndex <span class="operator token">|</span> <span class="number token">0</span><span class="punctuation token">,</span> Len<span class="punctuation token">)</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token"><</span> <span class="number token">0</span><span class="punctuation token">)</span> i <span class="operator token">=</span> <span class="function token">max</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> Len <span class="operator token">+</span> i<span class="punctuation token">)</span> + <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">>=</span> Len<span class="punctuation token">)</span> <span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>member <span class="operator token">===</span> <span class="keyword token">void</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// undefined</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="punctuation token">;</span> i <span class="operator token">!==</span> Len<span class="punctuation token">;</span> <span class="operator token">++</span>i<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>that<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">===</span> <span class="keyword token">void</span> <span class="number token">0</span> <span class="operator token">&&</span> i <span class="keyword token">in</span> that<span class="punctuation token">)</span> <span class="keyword token">return</span> i + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>member <span class="operator token">!==</span> member<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// NaN</span> + <span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span> <span class="comment token">// Since NaN !== NaN, it will never be found. Fast-path it.</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">// all else</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="punctuation token">;</span> i <span class="operator token">!==</span> Len<span class="punctuation token">;</span> <span class="operator token">++</span>i<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>that<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">===</span> member<span class="punctuation token">)</span> <span class="keyword token">return</span> i + + <span class="keyword token">return</span> <span class="operator token">-</span><span class="number token">1</span> <span class="comment token">// if the value was not found, then return -1</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Object<span class="punctuation token">,</span> Math<span class="punctuation token">.</span>max<span class="punctuation token">,</span> Math<span class="punctuation token">.</span>min<span class="punctuation token">)</span></code></pre> + +<p>Tuy nhiên, nếu bạn muốn hiểu rõ mọi chi tiết của đặc tả ECMA, và không mấy quan tâm đến performance hay cần phải ngắn gọn, thì bạn nên tham khảo đoạn polyfill bên dưới:</p> + +<pre class="brush: js">// 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) { + + var k; + + // 1. Let o be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + 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 len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = fromIndex | 0; + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. If n >= 0, then Let k be n. + // 8. Else, n<0, Let k be len - abs(n). + // If k is less than 0, then let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repeat, while k < len + while (k < len) { + // 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 + // i. Let elementK be the result of calling the Get + // internal method of o with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Định nghĩa lần đầu. Được hiện thực trong JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Lưu_ý_về_tương_thích">Lưu ý về tương thích</h2> + +<ul> + <li>Kể từ Firefox 47 {{geckoRelease(47)}}, phương thức này không còn trả về <code>-0</code>. Ví dụ: <code>[0].indexOf(0, -0)</code> sẽ luôn trả về <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Tương_tự">Tương tự</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/vi/web/javascript/reference/global_objects/array/isarray/index.html b/files/vi/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..9f34413842 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,130 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript 5 + - JavaScript + - Phương Thức + - Tham khảo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.isArray()</strong></code> là một phương thức để xác định liệu giá trị truyền vào có phải là một mảng kiểu {{jsxref("Array")}}.</p> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">Array.isArray(value)</pre> + +<h3 id="Tham_Số">Tham Số</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Giá trị được kiểm tra.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p><code>true</code> nếu giá trị là kiểu mảng {{jsxref("Array")}}; <code>false</code> nếu không phải mảng.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Nếu giá trị là {{jsxref("Array")}}, trả về <code>true</code>, nếu không thì trả về <code>false</code>.</p> + +<p>Xem bài viết <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> để có thêm chi tiết. Giả sử ta có một {{jsxref("TypedArray")}} instance, <code>false</code> sẽ luôn được trả về.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<pre class="brush: js">// all following calls return true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Little known fact: Array.prototype itself is an array: +Array.isArray(Array.prototype); + +// all following calls return 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"><code>instanceof</code> vs <code>isArray</code></h3> + +<p>Để kiểm tra kiểu <code>Array</code>, nên dùng <code>Array.isArray</code> hơn là <code>instanceof</code> bởi vì nó vẫn ra đúng khi giá trị kiểm tra được truyền qua <code>iframes</code>.</p> + +<pre class="brush: js">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] + +// Correctly checking for Array +Array.isArray(arr); // true +// Considered harmful, because doesn't work through iframes +arr instanceof Array; // false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Chạy mã dưới đây đầu tiên trước các mã khác sẽ tạo <code>Array.isArray()</code> nếu nó không có sẵn.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Định nghĩa lần đầu. Được hiện thực trong JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_hỗ_trợ">Trình duyệt hỗ trợ</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/join/index.html b/files/vi/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..12e5286a98 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,113 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - JavaScript + - Mảng + - Phương Thức + - Prototype + - Tham khảo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Phương thức <code><strong>join()</strong></code> tạo ra một chuỗi mới bằng cách nối tất cả các phần tử của mảng (hoặc một <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>), ngăn cách chúng bởi dấu phẩy hoặc một chuỗi ký tự xác định. Nếu mảng chỉ có một phần tử, kết quả sẽ trả về chính phần tử đó.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.join([<var>chuỗi_ngăn_cách</var>])</pre> + +<h3 id="Các_tham_số">Các tham số</h3> + +<dl> + <dt><code>chuỗi_ngăn_cách</code> {{optional_inline}}</dt> + <dd>Là một chuỗi xác định dùng để ngăn cách các phần tử liền kề của mảng. Nếu bỏ qua, các phần tử sẽ được ngăn cách bởi dấu phẩy (","). Nếu là một chuỗi rỗng, các phần tử sẽ nối với nhau mà không có bất kì ký tự nào ngăn cách chúng.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Trả về một chuỗi với giá trị là các phần tử đã được nối với nhau. Nếu <code><em>arr</em>.length</code> bằng <code>0</code>, sẽ trả về một chuỗi rỗng.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Chuyển giá trị của tất cả các phần tử mảng thành chuỗi và nối chúng lại thành một chuỗi.</p> + +<div class="warning"> +<p>Nếu phần tử mảng là <code>undefined</code> hoặc <code>null</code>, sẽ trả về một chuỗi rỗng.</p> +</div> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Nối_chuỗi_với_4_cách_khác_nhau">Nối chuỗi với 4 cách khác nhau</h3> + +<p>Tạo một mảng <code>a</code> với ba phần tử, sau đó nối chúng lại với 4 cách khác nhau: dùng <code>chuỗi_ngăn_cách</code> mặc định, với dấu phẩy và khoảng cách, với dấu cộng và một chuỗi rỗng.</p> + +<pre class="brush: js notranslate">var a = ['Wind', 'Water', 'Fire']; +a.join(); // 'Wind,Water,Fire' +a.join(', '); // 'Wind, Water, Fire' +a.join(' + '); // 'Wind + Water + Fire' +a.join(''); // 'WindWaterFire'</pre> + +<h3 id="Nối_một_array-like_object">Nối một array-like object</h3> + +<p>Nối <span class="seoSummary"><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a></span> (<code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>), bằng cách gọi {{jsxref("Function.prototype.call")}} <code>Array.prototype.join</code>.</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="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Chú thích</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Được đưa vào lần đầu trong JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2> + + + +<p>{{Compat("javascript.builtins.Array.join")}}</p> + +<h2 id="Xem_thêm_các_mục_tương_tự">Xem thêm các mục tương tự</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/vi/web/javascript/reference/global_objects/array/length/index.html b/files/vi/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..01186b015a --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,144 @@ +--- +title: Array.length +slug: "Web/JavaScript/Reference/Global_Objects/Array/\blength" +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Thuộc tính <code><strong>length</strong></code> của một mảng trả về số phần tử trong mảng đó. Đó là một số nguyên 32 bit không dấu và luôn lớn hơn chỉ mục lớn nhất của mảng (chỉ mục lớn nhất chính là dộ dài của mảng trừ đi 1).</p> + +<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> + + + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Giá trị hợp lệ mà </span></font>length</code> có thể biểu diễn là một số nguyên dương có miền giá trị nằm trong khoảng 2 đến 2<sup>32</sup>.</p> + +<pre class="brush: js">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> có thể được dùng để thay đổi số lượng phần tử có trong mảng bằng cách gán lại giá trị của <code>length</code> . Trong ví dụ dưới đây, khi mảng chỉ có 2 phần tử nhưng ta thay đổi <code>length</code> thành 3 thì mảng sẽ tự động có thêm một phần tử mới. Tuy nhiên việc cố tình thay đổi này sẽ hình thành phần tử mới mang giá trị <code>undefined</code>.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +printEntries(arr); + +arr.length = 5; // set array length to 5 while currently 3. +printEntries(arr); + +function printEntries(arr) { + var length = arr.length; + for (var i = 0; i < length; i++) { + console.log(arr[i]); + } + console.log('=== printed ==='); +} + +// 1 +// 2 +// 3 +// === printed === +// 1 +// 2 +// 3 +// undefined +// undefined +// === printed ===</pre> + +<p>Thực sự thì bản chất của <code>length</code> property không thể hiện số phần tử 'defined' có trong mảng. Tham khảo thêm từ <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Relationship between <code>length</code> and numerical properties</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<div> +<ul> + <li><code>Writable</code>: Nếu thuộc tính này mang giá trị <code>false</code>, giá trị của thuộc tính sẽ không thể bị thay đổi.</li> + <li><code>Configurable</code>: Nếu thuộc tính này mang giá trị <code>false</code>, tất cả các tác vụ cố tình thay đổi hoặc xoá như <code>Writable</code>, <code>Configurable</code>,hoặc <code>Enumerable </code>sẽ thất bại.</li> + <li><code>Enumerable</code>: Nếu thuộc tính này mang giá trị <code>true</code>, thuộc tính có thể được duyệt thông qua các vòng lập <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li> +</ul> +</div> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Duyệt_mảng">Duyệt mảng</h3> + +<p>Trong ví dụ sau, việc duyệt một mảng với các phần tử kiểu <code>numbers</code> có thể được thực hiện thông qua <code>length</code>. Tại mỗi bước, giá trị của mảng được gán lại gấp đôi.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="Cẳt_mảng">Cẳt mảng</h3> + +<p>Trong phần mô tả ở trên, nếu <code>length</code> có thể dùng để tăng thêm số phần tử trong mảng thì ta có thể dùng <code>length </code>để cắt bớt số phần tử trong mảng. Ví dụ dưới đây minh hoạ cho việc cắt bớt 2 phần tử cuối có trong mảng 5 phần tử.</p> + +<pre class="brush: js">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> + +<h2 id="Đặc_tả"> Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả </th> + <th scope="col">Tình trạng</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Định nghĩa lần đâu</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích">Tính tương thích</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.length")}}</p> +</div> + +<h2 id="Liên_quan">Liên quan</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/map/index.html b/files/vi/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..fe3b6c1c37 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,316 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>map()</strong></code> giúp tạo ra một mảng mới với các phần tử là kết quả từ việc thực thi một hàm lên từng phần tử của mảng được gọi.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { + // Trả về element mới cho new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm để tạo ra phần tử cho mảng mới, nhận vào ba tham số: + <dl> + <dt> </dt> + <dt><code>currentValue</code></dt> + <dd>Giá trị của phần tử trong mảng đang được xử lý</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Index của phần tử trong mảng đang được xử lý</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Mảng đang được gọi với <code>map</code></dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Giá trị gán cho từ khóa <code>this</code> bên trong <code> callback</code>.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một mảng mới với phần tử là kết quả của hàm <code>callback</code>.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>map</code> sẽ gọi hàm <code>callback</code> lên <strong>từng phần tử </strong>của mảng, theo thứ tự trong mảng, và tạo ra một mảng mới chứa các phần tử kết quả. <code>callback</code> chỉ được gọi cho những vị trí index của mảng được gán giá trị, bao gồm cả <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Nó không được gọi cho những vị trí <strong>index trống</strong> (là các index của mảng chưa bao giờ được khởi tạo, bao gồm index chưa được gán giá trị hoặc đã bị xóa bằng <code>delete</code>).</p> + +<p><code>callback</code> được gọi với ba tham số: giá trị của phần tử, index của phần tử, và chính mảng đang được gọi.</p> + +<p>Nếu tham số <code>thisArg</code> được truyền cho <code>map</code>, nó sẽ được gán cho từ khóa <code>this</code> trong hàm callback. Nếu không, giá trị <code>undefined</code> sẽ được dùng cho <code>this</code> với strict mode. Tóm lại, giá trị của từ khóa <code>this</code> trong hàm <code>callback</code> được xác định tuân theo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">các quy tắc thông thường để xác định <code>this</code> trong một hàm</a>.</p> + +<p><code>map</code> không làm thay đổi mảng ban đầu mà nó được gọi (mặc dù mảng ban đầu vẫn có thể bị thay đổi trong hàm <code>callback</code>).</p> + +<p>Các phần tử được <code>map()</code> xử lý được xác định từ đầu trước khi <code>callback</code> được gọi lần đầu tiên. Những phần tử mới được thêm vào sau khi <code>map</code> đã bắt đầu chạy sẽ không được <code>callback</code> gọi đến. Trong lúc <code>map</code> đang chạy, nếu những phần tử hiện tại của mảng bị thay đổi, thì giá trị mới của chúng sẽ được truyền cho hàm <code>callback</code> ngay tại thời điểm <code>callback</code> chạy qua. Những phần tử bị xóa sau khi <code>map</code> đã bắt đầu và trước khi đến lượt nó cũng sẽ bị bỏ qua.</p> + +<p>Do thuật toán đã quy định trong đặc tả, nếu như mảng ban đầu đã có sẵn những lỗ trống (index rỗng) thì sau khi được gọi với <code>map</code>, mảng đầu ra cũng sẽ có những index rỗng như mảng ban đầu.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Map_(ánh_xạ)_một_mảng_các_số_thành_một_mảng_các_giá_trị_căn_bậc_hai">Map (ánh xạ) một mảng các số thành một mảng các giá trị căn bậc hai</h3> + +<p>Đoạn code sau sẽ map một mảng các số thành một mảng mới chứa giá trị là căn bậc hai của các số trong mảng ban đầu.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(Math.sqrt); +// mảng roots: [1, 2, 3] +// mảng numbers vẫn là: [1, 4, 9] +</pre> + +<h3 id="Dùng_map_để_format_lại_các_object_trong_mảng">Dùng map để format lại các object trong mảng</h3> + +<p>Đoạn code sau sẽ xử lý một mảng các object và trả về một mảng mới chứa các object đã được format lại:</p> + +<pre class="brush: js">var kvArray = [{key: 1, value: 10}, + {key: 2, value: 20}, + {key: 3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray bây giờ là: [{1: 10}, {2: 20}, {3: 30}], + +// kvArray vẫn là: +// [{key: 1, value: 10}, +// {key: 2, value: 20}, +// {key: 3, value: 30}] +</pre> + +<h3 id="Map_một_mảng_các_số_sử_dụng_hàm_có_tham_số">Map một mảng các số sử dụng hàm có tham số</h3> + +<p>Đoạn code sau minh họa cách thức map hoạt động khi <code>callback</code> có sử dụng tham số. Tham số này sẽ có giá trị của từng phần tử của mảng ban đầu khi map duyệt qua mảng này.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles is now [2, 8, 18] +// numbers is still [1, 4, 9] +</pre> + +<h3 id="Sử_dụng_map_một_cách_độc_lập">Sử dụng <code>map</code> một cách độc lập</h3> + +<p>Ví dụ sau sẽ minh họa cách dùng <code>map</code> lên một {{jsxref("String")}} một cách độc lập để trả về một mảng các mã byte trong bảng ASCII đại diện cho từng ký tự của chuỗi.</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Sử_dụng_map_với_kết_quả_của_querySelectorAll">Sử dụng <code>map</code> với kết quả của <code>querySelectorAll</code></h3> + +<p>Ví dụ sau minh họa cách duyệt qua một tập các object (không phải mảng) trả về từ <code>querySelectorAll</code>. Trong trường hợp này, chúng ta sẽ in ra giá trị của tất cả các option được chọn (của các thẻ select) lên console: </p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Cách trên có thể được giải quyết đơn giản hơn bằng cách sử dụng {{jsxref("Array.from()")}}.</p> + +<h3 id="Trường_hợp_đặc_biệt">Trường hợp đặc biệt</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(ý tưởng từ bài viết này)</a></p> + +<p>Chúng ta hay dùng map với hàm một tham số (tham số đó chính là phần tử được duyệt). Và có một số hàm đặc biệt cũng thường được gọi với một tham số, mặc dù chúng có thêm tham số phụ không bắt buộc. Những thói quen này có thể dẫn đến những kết quả ngoài dự đoán.</p> + +<pre class="brush: js" dir="rtl">// Lấy ví dụ: +['1', '2', '3'].map(parseInt); +// Bạn sẽ nghĩ rằng kết quả là [1, 2, 3] +// Nhưng kết quả lại là [1, NaN, NaN] + +// parseInt thường được dùng với 1 tham số, nhưng nó có thể nhận đến 2 tham số. +// Tham số thứ nhất là một biểu thức giá trị và tham số thứ hai là cơ số +// Với hàm callback của Array.prototype.map, nó sẽ nhận vào 3 tham số: +// phần tử, index, mảng ban đầu +// Tham số thứ 3 sẽ được parseInt bỏ qua, nhưng tham số thứ 2 lại có vai trò +// và sẽ dẫn đến kết quả không mong muốn. + +// Sau đây là kết quả thực thi tại từng phần tử: +// parseInt(string, radix) -> map(parseInt(value, index)) +// lần chạy 1 (index là 0): parseInt('1', 0) // cho ta parseInt('1', 0) -> 1 +// lần chạy 2 (index là 1): parseInt('2', 1) // cho ta parseInt('2', 1) -> NaN +// lần chạy 3 (index là 2): parseInt('3', 2) // cho ta parseInt('3', 2) -> NaN + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Thông qua hàm returnInt, kết quả trả về là mảng các số (như mong muốn) + +// Tương tự như trên, nhưng sử dụng một hàm arrow +['1', '2', '3'].map( str => parseInt(str) ); + +// Một cách nữa đơn giản hơn nhưng tránh được vấn đề hàm nhiều tham số: +['1', '2', '3'].map(Number); // [1, 2, 3] +// Tuy nhiên khác với `parseInt`, cách này sẽ giữ lại định dạng +// số thập phân hoặc ký hiệu mũ từ chuỗi ban đầu +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +</pre> + +<p>Một ví dụ khác khi gọi <code>map</code> với <code>parseInt</code> là tham số cho callback:</p> + +<pre class="brush: js">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Kết quả trả về là 10,NaN,2 như đã lý giải ở trên.</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>map()</code> chỉ được thêm vào đặc tả ECMA-262 với phiên bản lần thứ 5; cho nên nó có thể không tồn tại trong một số hiện thực (implementation) của đặc tả. Bạn có thể work around bằng cách thêm vào đoạn code bên dưới vào đầu script của bạn, cho phép sử dụng hàm <code>map</code> tại những nơi mà nó không được hỗ trợ sẵn. Giải thuật trong polyfill này tương đương với hàm <code>map</code> được mô tả trong đặc tả ECMA-262, 5th edition với điều kiện {{jsxref("Object")}}, {{jsxref("TypeError")}}, và {{jsxref("Array")}} không bị thay đổi và <code>callback.call</code> chính là hàm được định nghĩa trong <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<div class="note"> +<p>Ghi chú bản dịch: những đoạn comment trong code bên dưới trích từ đặc tả ECMA nên sẽ giữ nguyên.</p> +</div> + +<pre><code>// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19</code> +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="Đặc_Tả">Đặc Tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Định nghĩa lần đầu. Hiện thực trong JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/of/index.html b/files/vi/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..fdd6d03d53 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,92 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>Array.of()</strong></code> được dùng để tạo ra một mảng mới với các phần tử được truyền vào thông qua tham số truyền vào.</p> + +<p>Cả <code><strong>Array.of()</strong></code>và <code><strong>Array </strong></code>đều chấp nhận tham số đầu vào là các số nguyên để khởi tạo một mảng mới, tuy nhiên chúng ta cần lưu ý trong trường hợp chỉ truyền vào một giá trị nguyên, <code><strong>Array.of()</strong></code> sẽ tạo ra một mảng số nguyên có một phần tử duy nhất, trong khi <code><strong>Array()</strong></code> ?sẽ tạo ra một mảng có số lượng phần tử rỗng (phần tử rỗng không mang giá trị undefined hoặc null) tương ứng với giá trị số nguyên truyền vào.</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Cú_pháp"> Cú pháp</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Các phần tử dùng để khởi tạo mảng</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Kết quả sau khi thực thi sẽ trả về một mảng mới</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Đây là một phương thức chuẩncủa ECMAScript 2015. Có thể tham khảo thêm <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> proposal</a> và <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Nếu trình duyệt không hỗ trợ <code>Array.of()</code>, có thể gắn đoạn mã JS sau và thực thi nó trước tất cả các đoạn mã JS khác.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Định nghĩa lần đầu.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích_giữa_các_trình_duyệt">Tính tương thích giữa các trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Tham_khảo_thêm">Tham khảo thêm</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/pop/index.html b/files/vi/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..b5740406a5 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,96 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - JavaScript + - Mảng +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>pop()</strong></code> xoá phần tử<strong> cuối cùng</strong> của một mảng và trả về phần tử đó. Phương thức này làm thay đổi độ dài của mảng.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Phần tử bị xoá từ mảng; {{jsxref("undefined")}} nếu mảng rỗng.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>The <code>pop</code> method removes the last element from an array and returns that value to the caller.<br> + Phương thức <code>pop</code> xoá phần tử cuối cùng của một mảng và trả về giá trị đó cho lời gọi.</p> + +<p><code>pop</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} ?or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<p>Nếu bạn gọi <code>pop()</code> trên một mảng rỗng, nó trả về {{jsxref("undefined")}}.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Xoá_phần_tử_cuối_cùng_của_một_mảng">Xoá phần tử cuối cùng của một mảng</h3> + +<p>Đoạn mã sau tạo mảng <code>myFish</code> chứa 4 phần tử, sau đó xoá phần tử cuối cùng.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">?Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Định nghĩa lần đầu. Cài đặt trong JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="See_also">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/vi/web/javascript/reference/global_objects/array/push/index.html b/files/vi/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..2b3e6cca4d --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,136 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>push()</strong></code> giúp thêm 1 hay nhiều phần tử vào cuối mảng và trả về chiều dài mới của mảng.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Các phần tử sẽ thêm vào cuối mảng.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Giá trị mới của thuộc tính {{jsxref("Array.length", "length")}} của mảng mà phương thức được gọi thực thi.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Phương thức <code>push</code> giúp thêm các giá trị vào mảng.</p> + +<p><code>push</code> là "intentionally generic". Phương thức này có thể được dùng với {{jsxref("Function.call", "call()")}} hoặc {{jsxref("Function.apply", "apply()")}} trên các đối tượng giống với mảng. Phương thức <code>push</code> phụ thuộc vào thuộc tính <code>length</code> để xác định vị trí bắt đầu thêm các giá trị mới. Nếu thuộc tính <code>length</code> không thể convert thành số, vị trí bắt đầu sẽ là 0. Điều này cũng bao gồm cả trường hợp thuộc tính <code>length</code> không tồn tại, khi đó <code>length</code> sẽ được tạo.</p> + +<p>Các đối tượng tương tự mảng (array-like) như {{jsxref("Global_Objects/String", "strings", "", 1)}}, không thích hợp để áp dụng phương thức này, vì các chuỗi là bất biến.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Thêm_phần_tử_vào_mảng">Thêm phần tử vào mảng</h3> + +<p>Đoạn mã dưới đây tạo mảng <code>sports</code> gồm 2 phần tử, sau đó sẽ thêm 2 phần tử vào cuối mảng này. Biến <code>total</code> có giá trị là chiều dài mới của mảng.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Merge_2_mảng">Merge 2 mảng</h3> + +<p>Ví dụ này sẽ sử dụng {{jsxref("Function.apply", "apply()")}} để thêm tất cả các phần tử từ mảng thứ 2 vào mảng đầu.</p> + +<p><em>Không</em> sử dụng phương thức này nếu mảng thứ 2 (trong ví dụ này là <code>moreVegs</code>) quá lớn, vì số lượng tối đa các tham số mà 1 hàm có thể nhận là giới hạn. Xem thêm chi tiết {{jsxref("Function.apply", "apply()")}}.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// Merge the second array into the first one +// Equivalent to vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h3 id="Sử_dụng_một_đối_tượng_theo_kiểu_tương_tự_mảng">Sử dụng một đối tượng theo kiểu tương tự mảng</h3> + +<p>Như đã để cập ở trên, <code>push</code> là "intentionally generic", và chúng ta có thể lợi dụng điều đó. <code>Array.prototype.push</code> có thể được thực thi trên 1 đối tượng, như ví dụ dưới đây. Chú ý rằng chúng ta không tạo mảng để lưu trữ các đối tượng. Mà thay vào đó chúng ta lưu trữ trên chính bản thân đối tượng bằng cách sử dụng <code>call</code> trên <code>Array.prototype.push</code> để áp dụng phương thức như là đang thao tác với mảng, việc này có thể thực hiện được chính là nhờ cái cách mà JavaScript cho phép chúng ta thiết lập ngữ cảnh thực thi.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length is automatically incremented + // every time an element is added. + [].push.call(this, elem); + } +}; + +// Let's add some empty objects just to illustrate. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Chú ý rằng <code>obj</code> không phải là mảng, phương thức <code>push</code> vẫn tăng giá trị thuộc tính <code>length</code> của <code>obj</code> như khi chúng ta thao tác với 1 mảng thực sự.</p> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Định nghĩa lần đầu. Hiện thực trong JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</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/vi/web/javascript/reference/global_objects/array/reduce/index.html b/files/vi/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..c665d37ad3 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,553 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>reduce()</strong></code> dùng để thực thi một hàm lên từng phần tử của mảng (từ trái sang phải) với một biến tích lũy để thu về một giá trị duy nhất.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback[, </var><var>initialValue]</var>)</pre> + +<h3 id="Các_tham_số">Các tham số</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm dùng để thực thi với từng phần tử (element) của mảng, nhận vào 04 tham số: + <dl> + <dt><code>accumulator</code></dt> + <dd>Biến tích lũy, truyền giá trị trả về của mỗi lần gọi callback; nó là giá trị tích lũy được trả về trong lần gọi callback trước, hoặc giá trị của tham số <code>initialValue</code>, nếu được cung cấp (xem bên dưới).</dd> + <dt><code>currentValue</code></dt> + <dd>Phần tử trong mảng hiện tại đang được xử lý.</dd> + <dt><code>currentIndex</code>{{optional_inline}}</dt> + <dd>Chỉ mục (index) của phần tử đang được xử lý. Bắt đầu tại 0, nếu giá trị <code>initialValue</code> được cung cấp, và tại 1 nếu không có <code>initialValue</code>.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Mảng đang được gọi với <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><code>initialValue</code>{{optional_inline}}</dt> + <dd>Giá trị cho tham số thứ nhất (<code>accumulator</code>) của hàm <code>callback</code> trong lần gọi đầu tiên. Nếu giá trị ban đầu này không được cung cấp, phần tử đầu tiên của mảng sẽ được dùng. Do đó, gọi <code>reduce()</code> trên một mảng rỗng và không có giá trị ban đầu sẽ gây ra lỗi.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Giá trị sau khi rút gọn.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>reduce()</code> thực thi hàm <code>callback</code> lên từng phần tử đang tồn tại trong mảng, bỏ qua những lỗ trống không giá trị, và nhận vào 04 tham số:</p> + +<ul> + <li><code>accumulator</code></li> + <li><code>currentValue</code></li> + <li><code>currentIndex</code></li> + <li><code>array</code></li> +</ul> + +<p>Trong lần đầu tiên <code>callback</code> được gọi, <code>accumulator</code> and <code>currentValue</code> có thể có một trong hai giá trị. Nếu tham số <code>initialValue</code> được cung cấp cho <code>reduce()</code>, thì <code>accumulator</code> sẽ bằng <code>initialValue</code>, và <code>currentValue</code> sẽ bằng phần tử đầu tiên của mảng. Nếu không có <code>initialValue</code>, <code>accumulator</code> sẽ bằng phần tử đầu tiên của mảng, và <code>currentValue</code> sẽ bằng phần tử thứ hai.</p> + +<div class="note"> +<p><strong>Ghi chú:</strong> Nếu <code>initialValue</code> không được cung cấp, <code>reduce()</code> sẽ thực thi callback bắt đầu từ index 1, bỏ qua index đầu tiên. Nếu <code>initialValue</code> được cung cấp, index sẽ bắt đầu từ 0.</p> +</div> + +<p>Nếu mảng rỗng, và <code>initialValue</code> không được cung cấp, gọi <code>reduce()</code> sẽ gây ra lỗi {{jsxref("TypeError")}}. Nếu mảng chỉ có một phần tử có giá trị (bất kể vị trí index) đồng thời không có <code>initialValue</code>, hoặc có <code>initialValue</code> nhưng mảng lại rỗng, thì giá trị duy nhất đó sẽ được trả về và <em><code>callback</code> sẽ không được gọi</em>.</p> + +<p>Sẽ an toàn hơn nếu giá trị ban đầu được cung cấp, bởi vì có đến ba khả năng xảy ra nếu không có <code>initialValue</code> như ở ví dụ sau:</p> + +<pre class="brush: js">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() không có initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; giải pháp hay hơn, và nó có thể áp dụng được cho mảng rỗng hoặc lớn hơn +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="Cách_reduce()_làm_việc">Cách reduce() làm việc</h3> + +<p>Giả sử có một đoạn code với <code>reduce()</code> được hiện thực như sau:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p>Callback sẽ được gọi bốn lần, với giá trị tham số và trả về trong mỗi lần gọi như sau:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">giá trị trả về</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">lần gọi thứ nhất</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td>1</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">lần gọi thứ hai</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td>2</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">lần gọi thứ ba</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td>3</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">lần gọi thứ tư</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td>4</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Giá trị trả về cho <code>reduce()</code> chính là giá trị trả về của lần gọi callback cuối cùng (<code>10</code>).</p> + +<p>Bạn cũng có thể cung cấp một hàm mũi tên {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} thay vì một hàm đầy đủ. Đoạn code sau đây sẽ cho kết quả giống như đoạn code ở trên:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ); +</pre> + +<p>Nếu bạn cung cấp giá trị <code>initialValue</code> cho tham số thứ hai của hàm <code>reduce()</code>, thì kết quả sẽ như bên dưới:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">giá trị trả về</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">lần gọi thứ nhất</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">lần gọi thứ hai</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">lần gọi thứ ba</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">lần gọi thứ tư</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">lần gọi thứ năm</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>Giá trị trả về cho <code>reduce()</code> lần này sẽ là <code>20</code>.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Tính_tổng_của_tất_cả_các_phần_tử_của_mảng">Tính tổng của tất cả các phần tử của mảng</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 + +</pre> + +<p>Tương tự, nhưng viết bằng hàm arrow function</p> + +<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Tính_tổng_các_giá_trị_bên_trong_một_mảng_các_object">Tính tổng các giá trị bên trong một mảng các object</h3> + +<p>Để tính tổng các giá trị nằm bên trong các phần tử là object, bạn <strong>phải</strong> cung cấp một giá trị ban đầu để từng phần tử đều được callback chạy qua (và <code>accumulator</code> luôn luôn là giá trị kiểu số):</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>Tương tự, viết bằng arrow function:</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Trải_phẳng_một_mảng_chứa_nhiều_mảng_con">Trải phẳng một mảng chứa nhiều mảng con</h3> + +<pre class="brush: js">var 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>Tương tự, viết bằng arrow function:</p> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Đếm_số_lần_xuất_hiện_của_phần_tử_trong_mảng">Đếm số lần xuất hiện của phần tử trong mảng</h3> + +<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var 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="Nhóm_các_đối_tượng_theo_giá_trị_property_nào_đó">Nhóm các đối tượng theo giá trị property nào đó</h3> + +<pre class="brush: js">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="Ghép_các_mảng_con_bên_trong_các_object_sử_dụng_toán_tử_spread_và_initialValue">Ghép các mảng con bên trong các object sử dụng toán tử spread và initialValue</h3> + +<pre class="brush: js">// friends - an array of objects +// where object field "books" - list of favorite books +var 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 +var 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="Xóa_các_phần_tử_bị_trùng_trong_mảng">Xóa các phần tử bị trùng trong mảng</h3> + +<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((accumulator, current) => { + const length = accumulator.length + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current); + } + return accumulator; +}, []); +console.log(result); //[1,2,3,4,5] +</pre> + +<h3 id="Chạy_các_Promise_theo_trình_tự">Chạy các Promise theo trình tự</h3> + +<pre class="brush: js">/** + * 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="Tổ_hợp_các_hàm_và_gọi_chuyền_(piping)">Tổ hợp các hàm và gọi chuyền (piping)</h3> + +<pre class="brush: js">// 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="Hiện_thực_lại_map()_sử_dụng_reduce()">Hiện thực lại map() sử dụng reduce()</h3> + +<pre class="brush: js">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="Polyfill">Polyfill</h2> + +<pre class="brush: js">// 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> + +<p>Nếu bạn thực sự cần chức năng này trên những engine JavaScript không hỗ trợ <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, bạn không nên thêm polyfill này vào <code>Array.prototype</code> bởi vì không có cách nào làm cho nó <em>không-duyệt-qua</em> (non-enumerable) được (property mới sẽ xuất hiện trong các vòng lặp for).</p> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Định nghĩa lần đầu. Hiện thực trong JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/reduceright/index.html b/files/vi/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..7334a47f25 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,347 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - JavaScr + - Mảng + - Phương thức + - Thuộc tính +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>reduceRight()</strong></code> đảo ngược các giá trị trong mảng (từ phải sang trái), xử lý và trả về một giá trị duy nhất.</p> + +<pre class="brush: js">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> + +<p>Xem thêm {{jsxref("Array.prototype.reduce()")}} cho việc sắp xếp từ trái qua phải.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</pre> + +<h3 id="Tham_số_truyền_vào">Tham số truyền vào</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm gọi thực thi mỗi giá trị của mảng, truyền vào 4 tham số: + <dl> + <dt><code>previousValue</code></dt> + <dd>Giá trí trả về của hàm callback sau khi xử lý phần tử trước nó hoặc là <code>initialValue, </code>nếu như nó là phần tử đầu tiên (Xem bên dưới.)</dd> + <dt><code>currentValue</code></dt> + <dd>Giá trị hiện tại đang được duyệt.</dd> + <dt><code>index</code></dt> + <dd>Chỉ số vị trí của phần tử trong mảng.</dd> + <dt><code>array</code></dt> + <dd>Mảng phần tử ban đầu.</dd> + </dl> + </dd> + <dt><code>initialValue</code></dt> + <dd>Giá trị không bắt buộc. Đối tượng sử dụng cho phần tử đầu tiền của mảng, khi mà chưa có kết quả nào từ hàm <code>callback </code>trả về.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Giá trị trả về từ việc rút gọn.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>reduceRight</code> xử lý từng phần tử trong mảng, trừ các phần tử vô giá trị (rỗng), truyền vào 4 tham số: giá trị ban đâu (or hoặc giá trị trả về sau khi xử lý một phần tử trước đó), giá trị phần tử hiện tại, vị trí phần tử hiện tại, và giá trị mảng ban đầu.</p> + +<p>Việc xử lý phần tử hiện tại sẽ làm trong dấu (...) :</p> + +<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) { + // ... xử lý tại đây +}); +</pre> + +<p>Trong lần đầu xử lý, tham số <code>previousValue</code> và <code>currentValue</code> có thể là một trong hai.</p> + +<ol> + <li>Nếu tham sô <code>initialValue</code> được truyền vào <code>reduceRight</code>, thì tham số <code>previousValue</code> sẽ bằng giá trị tham số <code>initialValue (</code>nói cách khác nó chính là<code> initialValue)</code> and <code>currentValue</code> sẽ là giá trị cuối cùng của mảng.</li> + <li>Nếu tham số <code>initialValue</code> không được truyền vào, thì <code>previousValue</code> sẽ là giá trị cuối cùng của mảng và <code>currentValue</code> sẽ là giá trị cuối cùng thứ 2 của mảng ( giá trị thứ 2 tỉnh từ cuối mảng ).</li> +</ol> + +<p>Nếu mảng rỗng và không có tham số initialValue nào được truyền vào thì {{jsxref("TypeError")}} xảy ra. Nếu mảng chỉ có một phần tử (bất kể vị trí) à không có tham số initialValue nào được truyền vào, hoặc nếu <code>initialValue</code> được truyền vào nhưng mảng lại rỗng, giá trị duy nhất sẽ được trả lại mà không cần tới hàm <code>callback</code>.</p> + +<p>Một số ví dụ mô tả luồng hoạt động của <code>reduceRight</code>, bạn có thể xem :</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}); +</pre> + +<p>Bảng mô tả cách xử lý phần tử trong mảng ở ví dụ trên như sau:</p> + +<p><em>(*Tên gọi các tham số giữ nguyên để tiện theo dõi)</em></p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">lần 1</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">lần 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">lần 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">lần 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><font face="Open Sans, Arial, sans-serif">Giá trị trả về của hàm </font>reduceRight</code> sẽ là giá trị của lần thực thi cuối cùng (<code>10</code>).</p> + +<p>Và nếu bạn có đưa vào một giá trị <code>initialValue</code>, thì kết quả nó sẽ như thế này :</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">first call</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">second call</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">third call</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">fourth call</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">fifth call</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>Và tất nhiên giá trị trả về của hàm <code>reduceRight </code>sẽ là <code>20</code>.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Tính_tổng_các_giá_trị_trong_một_mảng">Tính tổng các giá trị trong một mảng</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +</pre> + +<h3 id="Ghép_nhiều_mảng_thành_một_mảng">Ghép nhiều mảng thành một mảng</h3> + +<pre class="brush: js">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="Sự_khác_nhau_giữa_reduce_và_reduceRight">Sự khác nhau giữa <code>reduce</code> và <code>reduceRight</code></h3> + +<pre class="brush: js">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> + +<h2 id="Polyfill">Polyfill </h2> + +<p><em>Đây là thuật ngữ dùng để chỉ các đoạn code được dùng để cung cấp một chức năng (hoặc công nghệ) của các trình duyệt hiện đại cho các trình duyệt cũ. Thông qua đó, các trang web sử dụng các công nghệ mới (như HTML5) có thể chạy ổn định trên các trình duyệt cũ chưa hỗ trợ.</em></p> + +<p><code>reduceRight</code> đã được thêm vào chuẩn ECMA-262 trong lần sửa đổi thứ 5; do đó có thể nó không xuất hiện trong các trình duyệt chưa hỗ trợ nó . Bạn có thể dùng <code>reduceRight </code>bằng việc thêm đoạn mã sau vào code của bạn với khi làm việc với các trình duyệt không hỗ trợ nó.</p> + +<pre class="brush: js">// 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="Điều_khoản">Điều khoản</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_hỗ_trợ">Trình duyệt hỗ trợ</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/reverse/index.html b/files/vi/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..19e4c5ce6d --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,124 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Mảng + - hàm +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Hàm <code><strong>reverse()</strong> khi gọi bởi một mảng thì</code> đảo ngược thứ tự của chính mảng đó. Phần tử đầu tiên của mảng trở thành phần tử cuối và ngược lại, phần tử cuối trở thành phần tử đầu tiên của mảng.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Tham_số">Tham số</h3> + +<p>Không.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Hàm <code>reverse</code> đảo ngược thứ tự các phần tử của bản thân mảng, thay đổi mảng, và trả về tham chiếu của mảng đó.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Đảo_ngược_thứ_tự_của_một_mảng">Đảo ngược thứ tự của một mảng</h3> + +<p>Ví dụ dưới đây tạo một mảng <code>myArray </code>chứa 3 phần tử, sau đó đảo ngược thứ tự của các phần tử trong mảng.</p> + +<pre class="brush: js">var myArray = ['one', 'two', 'three']; +myArray.reverse(); + +console.log(myArray) // ['three', 'two', 'one'] +</pre> + +<h2 id="Các_đặc_tả">Các đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Định nghĩa ban đầu. Được cài đặt ở JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích_đối_với_các_trình_duyệt">Tính tương thích đối với các trình duyệt</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Xem_thêm">Xem thêm</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/vi/web/javascript/reference/global_objects/array/shift/index.html b/files/vi/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..19dd4b4aab --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Array + - JavaScript + - Method + - Mảng + - Nguyên mẫu + - Prototype + - hàm +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>Hàm <code><strong>shift()</strong></code> sẽ xóa <strong>phần tử đầu tiên</strong> của một mảng và trả về phần tử đó. Hàm này sau khi thực thi sẽ làm thay đổi kích thước của mảng bị tác động.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.shift()</code></pre> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Phần tử đầu tiên của mảng.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Hàm <code>shift</code> sẽ xóa phần tử ở vị trí 0 trong mảng và dịch vị trí của các phần tử tiếp theo xuống, sau đó trả về giá trị của phần tử bị xóa. Nếu giá trị của thuộc tính {{jsxref("Array.length", "length")}} bằng 0, giá trị {{jsxref("undefined")}} được trả về.</p> + +<p><code>shift</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Xóa_bỏ_một_phần_tử_khỏi_một_mảng">Xóa bỏ một phần tử khỏi một mảng</h3> + +<p>Đoạn mã code dưới đây hiển thị mảng <code>myFish</code> trước và sau khi xóa bỏ phần tử đầu tiên của mảng đó. Nó cũng hiển thị phần tử bị xóa bỏ:</p> + +<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before: ' + myFish); +// "myFish before: angel,clown,mandarin,surgeon" + +var shifted = myFish.shift(); + +console.log('myFish after: ' + myFish); +// "myFish after: clown,mandarin,surgeon" + +console.log('Removed this element: ' + shifted); +// "Removed this element: angel"</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Chú thích</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Đã cài đặt từ phiên bản JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_với_trình_duyệt">Tương thích với trình duyệt</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Tính năng</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Đã hỗ trợ</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Tính năng</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>Đã hỗ trợ</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Xem_thêm_các_mục_tương_tự">Xem thêm các mục tương tự</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/slice/index.html b/files/vi/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..ee7fd81890 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,249 @@ +--- +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>Phương thức <code><strong>slice()</strong></code> trả về một bản sao tham chiếu (shallow copy) một phần của một mảng dưới dạng một mảng mới nhận các giá trị có chỉ số từ <code>begin</code> dến <code>end</code> (không bao gồm <code>end</code>). Mảng ban đầu không bị thay đổi.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">Mã nguồn của đoạn demo này được lưu ở một repository trên Github. Bạn có thể giúp đỡ cho dự án này bằng cách clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> và gửi pull request cho chúng tôi.</p> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.slice() +<var>arr</var>.slice(<em>begin</em>) +<var>arr</var>.slice(<var>begin</var>, <var>end</var>) +</pre> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>begin</code> {{optional_inline}}</dt> + <dd>Chỉ số bắt đầu chọn phần tử từ phần tử 0.</dd> + <dd>Nếu chỉ số này là số âm, được xem như tính ngược từ cuối của mảng. <code>slice(-2)</code> chọn hai phần tử cuối cùng của mảng.</dd> + <dd>Nếu <code>begin</code> là không xác định (undefined), <code>slice</code> bắt đầu từ chỉ số <code>0</code>.</dd> +</dl> + +<p> Nếu begin lớn hơn độ dài của mảng, một mảng trống được trả về.</p> + +<dl> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Chỉ số ngừng chọn phần tử. <code>slice</code> chọn ra các phần tử có chỉ số trước chỉ số <code>end</code>.</dd> + <dd>Ví dụ, <code>slice(1,4)</code> chọn phần thử thứ hai, thứ ba và thứ tư (ở các chỉ số 1, 2, và 3).</dd> + <dd>Chỉ số âm tính ngược từ cuối mảng về. <code>slice(2,-1)</code> chọn các phần tử thứ ba cho đến phần tử sát cuối của mảng, không bao gồm phần từ cuối cùng ở chỉ số -1.</dd> + <dd>Nếu tham số <code>end</code> không được truyền vào, <code>slice</code> chọn đến cuối mảng (<code>arr.length</code>)<code>.</code></dd> + <dd>Nếu <code>end</code> lớn hơn độ dài mảng, <code>slice</code> chỉ chọn đến cuối mảng (<code>arr.length</code>).</dd> +</dl> + +<h3 id="Gia_trị_trả_về">Gia trị trả về</h3> + +<p>Một mảng mới chứa các phần tử được chọn.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p><code>slice</code> không chỉnh sửa mảng ban đầu mà trả về bản sao tham chiếu (shallow copy, chỉ copy một cấp) phần được chọn từ mảng ban đầu. Các phần tử của mảng gốc được copy vào mảng trả về như sau:</p> + +<ul> + <li>Đối với tham chiếu đối tượng, <code>slice</code> sao chép tham chiếu của đối tượng vào mảng mới. Cả mảng ban đầu và mảng mới trả về đều tham chiếu tới chung đối tượng. Nếu đối tượng được tham chiếu thay đổi, cả hai mảng đều nhận sự thay đổi này.</li> + <li>Đối với giá trị kiểu chuỗi, số và bool, (không phải các đối tượng kiểu {{jsxref("String")}}, {{jsxref("Number")}} và {{jsxref("Boolean")}} ), <code>slice</code> sao chép các giá trị vào mảng mới. Những thay đổi đối với các giá trị kiểu chuỗi, số và bool ở mảng này không còn ảnh hưởng tới mảng kia.</li> +</ul> + +<p>Nếu một phần tử được thêm vào một trong hai mảng, mảng còn lại không bị thay đổi.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Trả_về_mảng_con_của_một_mảng">Trả về mảng con của một mảng </h3> + +<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; +var citrus = fruits.slice(1, 3); + +// fruits có giá trị ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus có giá trị ['Orange','Lemon'] +</pre> + +<h3 id="Sử_dụng_slice">Sử dụng <code>slice</code></h3> + +<p>Trong ví dụ sau, <code>slice</code> tạo một mảng mới, <code>newCar</code>, từ <code>myCar</code>. Cả hai chứa tham chiếu tới đối tượng <code>myHonda</code>. Khi trường color của đối tượng <code>myHonda</code> đổi sang purple, cả hai mảng đều thấy sự thay đổi này.</p> + +<pre class="brush: js">// Using slice, create newCar from myCar. +var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']; +var newCar = myCar.slice(0, 2); + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +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); + +// Change the color of myHonda. +myHonda.color = 'purple'; +console.log('The new color of my Honda is ' + myHonda.color); + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Đoạn mã trên in ra:</p> + +<pre class="brush: js">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> + +<h2 id="Các_đối_tượng_giống_kiểu_mảng">Các đối tượng giống kiểu mảng</h2> + +<p><code>slice</code> còn được dùng để thao tác với chuyển các đối tượng giống kiểu mảng (Array-like objects / collections) sang một mảng mới. Bạn chỉ cần gọi phương thức này trên đối tượng đó. Biến {{jsxref("Functions/arguments", "arguments")}} trong một hàm là ví dụ của một đối tượng kiểu mảng.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Để sử dụng phương thức này, sử dụng phương thức.<code>call</code> {{jsxref("Function.prototype")}} để gọi <code>[].slice.call(arguments)</code> thay vì <code>Array.prototype.slice.call</code>. Hoặc đơn giản hơn là {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Sử_dụng_trên_nhiều_trình_duyệt">Sử dụng trên nhiều trình duyệt</h2> + +<p>Mặc dù các đối tượng trên trình duyệt (ví dụ các đối tượng DOM) không được yêu cầu theo chuẩn phải theo định nghĩa cả Mozilla khi chuyển <code>Array.prototype.slice</code> và IE < 9 không làm thế, các phiên bản IE từ bản 9 hỗ trợ phương thức này. “Shimming” giúp đảm bảo phương thức này được hỗ trợ trên các trình duyệt khác nhau. Vì các trình duyệt ngày nay tiếp tục hỗ trợ tính năng này (IE, Mozilla, Chrome, Safari, and Opera), những nhà phát triển phần mềm đọc (DOM-supporting) mã slice dựa trên shim sẽ không bị nhầm lẫn về ngữ nghĩa; họ có thể tin tưởng dựa trên ngữ nghĩa này để mang lại hành vi được xem là tiêu chuẩn này. (Mã shim sửa IE cho tham số thứ hai của <code>slice()</code> để chuyển ra giá trị {{jsxref("null")}}/{{jsxref("undefined")}} không có trong các phiên bản trước của IE nhưng các trình duyệt ngày nay đều hỗ trợ, kể cả IE >= 9.)</p> + +<pre class="brush: js">/** + * Shim for "fixing" IE's lack of support (IE < 9) for applying slice + * on host objects like NamedNodeMap, NodeList, and HTMLCollection + * (technically, since host objects have been implementation-dependent, + * at least before ES2015, IE hasn't needed to work this way). + * Also works on strings, fixes IE < 9 to allow an explicit undefined + * for the 2nd argument (as in Firefox), and prevents errors when + * called on other DOM objects. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Can't be used with DOM elements in IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // This will work for genuine arrays, array-like objects, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 gets unhappy with an undefined end argument + end = (typeof end !== 'undefined') ? end : this.length; + + // For native Array objects, we use the native slice function + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // For array like object we handle it ourselves. + var i, cloned = [], + size, len = this.length; + + // Handle negative value for "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Handle negative value for "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Actual expected size of the slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Bình luận</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Định nghĩa ban đầu. Xuất hiện ở Javascript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Độ_tương_thích_với_trình_duyệt">Độ tương thích với trình duyệt</h2> + +<div> +<div class="hidden">Bảng độ tương thích trong trang này được tạo ra từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp cho dữ liệu này, hãy gửi một cho chúng tôi một pull request đến github <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div> + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</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/vi/web/javascript/reference/global_objects/array/some/index.html b/files/vi/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..bbc279dc5c --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - ECMAScript 5 + - JavaScript + - Mảng + - Phương Thức + - Prototype + - Tham khảo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>some()</strong></code> kiểm tra xem có ít nhất một phần tử của mảng thoả điều kiện ở hàm được truyền vào hay không. Kết quả trả về có kiểu <code>Boolean</code>. </p> + +<div class="note"> +<p><strong>Chú ý</strong>: Phương thức này sẽ trả về <code>false</code> nếu mảng rỗng.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Các_tham_số">Các tham số</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Hàm dùng để kiểm tra từng phần tử, nhận vào ba đối số: + <dl> + <dt><code>element</code></dt> + <dd>Phần tử đang được kiểm tra.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>Chỉ mục của phần tử đang được kiểm tra.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Là bản thân mảng đã gọi phương thức <code>some()</code> ở trên.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Được sử dụng làm giá trị <code>this</code> khi thực thi hàm <code>callback</code>.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p><code><strong>true</strong></code> khi hàm <code>callback</code> trả về một giá trị {{Glossary("truthy")}} nếu có ít nhất một phần tử của mảng thoả điều kiện. Ngược lại sẽ trả về <code><strong>false</strong></code>.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Phương thức <code>some()</code> thực thi hàm <code>callback</code> một lần và lặp qua từng phần tử của mảng cho đến khi hàm <code>callback</code> trả về một giá trị <em>truthy</em> (tức là <strong><code>true</code></strong> khi được chuyển sang kiểu Boolean). Nếu như có một phần tử thoả mãn, <code>some()</code> sẽ lập tức trả về <code>true</code>. Ngược lại <code>sẽ trả về</code> <code>false</code>. <code>callback</code> được gọi chỉ khi các phần tử của mảng có giá trị.</p> + +<p><code>callback</code> được gọi với ba đối số: giá trị của phần tử, số chỉ mục của phần tử và mảng đang được lặp qua.</p> + +<p>Nếu như tham số <code>thisArg</code> được truyền vào <code>some()</code>, nó sẽ được sử dụng làm giá trị <code>this</code> của <code>callback</code>. Nếu bỏ qua, <code>this</code> sẽ có giá trị {{jsxref("undefined")}}. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> + +<p><code>some()</code> không làm thay đổi mảng ban đầu.</p> + +<p>The range of elements processed by <code>some()</code> is set before the first invocation of <code>callback</code>. Elements appended to the array after the call to <code>some()</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>some()</code> visits that element's index. Elements that are deleted are not visited.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Kiểm_tra_giá_trị_của_các_phần_tử">Kiểm tra giá trị của các phần tử</h3> + +<p>Ví dụ bên dưới đang kiểm tra xem có phần tử nào lớn hơn 10 hay không.</p> + +<pre class="brush: js">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="Kiểm_tra_giá_trị_của_các_phần_tử_sử_dụng_arrow_function">Kiểm tra giá trị của các phần tử sử dụng arrow function</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> làm cho cú pháp trở nên gọn hơn.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // false +[12, 5, 8, 1, 4].some(x => x > 10); // true +</pre> + +<h3 id="Kiểm_tra_phần_tử_có_tồn_tại_trong_mảng_hay_không">Kiểm tra phần tử có tồn tại trong mảng hay không</h3> + +<p>Hàm <code>checkAvailability()</code> bên dưới đang mô phỏng lại phương thức <code>includes()</code>, trả về <code>true</code> nếu phần tử có tồn tại trong mảng:</p> + +<pre class="brush: js">var 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="Kiểm_tra_phần_tử_có_tồn_tại_trong_mảng_hay_không_sử_dụng_arrow_function">Kiểm tra phần tử có tồn tại trong mảng hay không sử dụng arrow function</h3> + +<pre class="brush: js">var 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="Chuyển_giá_trị_bất_kì_sang_kiểu_Boolean">Chuyển giá trị bất kì sang kiểu Boolean</h3> + +<pre class="brush: js">var 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="Polyfill">Polyfill</h2> + +<p><code>some()</code> was added to the ECMA-262 standard in the 5th edition, and it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>some()</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>fun.call</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// 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="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Chú thích</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Được đưa vào lần đầu trong JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/splice/index.html b/files/vi/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..a942e28e67 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,161 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>splice()</strong></code> thay đổi phần tử của mảng bằng cách xóa phần tử đang tồn tại và/hoặc thêm phần tử mới.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +myFish.splice(2, 0, 'drum'); // chèn 'drum' vào vị trí 2 +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] + +myFish.splice(2, 1); // xóa 1 phần tử từ vị trí 2 +// myFish is ["angel", "clown","mandarin", "sturgeon"]</pre> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)</pre> + +<h3 id="Các_tham_số">Các tham số </h3> + +<dl> + <dt><code>start</code></dt> + <dd>Vị trí để bắt đầu thay đổi mảng (mặc định là 0). Nếu lớn hơn độ dài của mảng, thì chỉ số <code>start</code> được thiết lập bằng độ dài của mảng. Nếu giá trị là âm , thì bắt đầu từ các phần từ cuối mảng (gốc là -1, -n ứng với vị thứ thứ n cuối cùng và viết là array.length - n) và sẽ set giá trị 0 nếu trị tuyệt đối lớn hơn độ dài mảng.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Con số chỉ định số lượng các phần tử sẽ bị xóa.</dd> + <dd>Nếu <code>deleteCount</code> bị bỏ qua hoặc có giá trị lớn hơn hoặc bằng <code>array.length - start</code> (nếu giá trị lớn hơn số phần tử còn lại của mảng, bắt đầu từ <code>start</code>), thì tất cả các phần tử từ vị trí start đến cuối mảng sẽ bị xóa bỏ.</dd> + <dd>Nếu <code>deleteCount</code> bằng 0 hoặc là số âm, không phần tử nào được xóa. Trong trường hợp này bạn sẽ phải xác định ít nhất 1 phần tử mới (xem bên dưới).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Các phần tử thêm vào mảng, bắt đầu từ chỉ số <code>start</code> . Nếu không có, <code>splice()</code> thì sẽ chỉ xóa các phần tử trong mảng.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Trả về một mảng chứa các phần từ bị xóa. Nếu chỉ có 1 phần từ bị xóa, trả về mảng chứa 1 phần tử. Nếu không có phần tử nào bị xóa, trả về mảng rỗng.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Nếu số các phần tử chèn vào khác với số các phần tử bị xóa đi. Mảng mới sẽ có độ dài khác.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Xóa_0_phần_tử_từ_vị_trí_số_2_và_thêm_drum">Xóa 0 phần tử từ vị trí số 2, và thêm "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], không có phần tử nào bị xóa +</pre> + +<h3 id="Không_xóa_phần_tử_nào_và_thêm_drum_và_guitar_tại_vị_trí_số_2">Không xóa phần tử nào và thêm "drum" và "guitar" tại vị trí số 2</h3> + + + +<pre><code> myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed is [], no elements removed</code></pre> + + + +<h3 id="Xóa_1_phần_tử_từ_vị_trí_số_3">Xóa 1 phần tử từ vị trí số 3</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Xóa_1_phần_tử_mảng_từ_vị_trí_số_2_và_thêm_phần_tử_trumpet">Xóa 1 phần tử mảng từ vị trí số 2 , và thêm phần tử "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"]</pre> + +<h3 id="Xóa_2_phần_tử_mảng_từ_vị_trí_số_0_và_thêm_parrot_anemone_và_blue">Xóa 2 phần tử mảng từ vị trí số 0, và thêm "parrot", "anemone" và "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="Xóa_2_phần_tử_mảng_từ_vị_trí_số_2">Xóa 2 phần tử mảng từ vị trí số 2 </h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="Xóa_1_phần_tử_mảng_từ_vị_trí_số_-2">Xóa 1 phần tử mảng từ vị trí số -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="Xóa_mọi_phần_tử_mảng_phía_sau_vị_trí_số_2_(incl.)">Xóa mọi phần tử mảng phía sau vị trí số 2 (incl.)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</pre> + +<h2 id="Đặc_điểm_kỹ_thuật">Đặc điểm kỹ thuật</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả kỹ thuật</th> + <th scope="col">Tình trạng</th> + <th scope="col">Chú ý</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Định nghĩa sơ khai được ghi trong JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_tương_thích">Trình duyệt tương thích</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Liên_quan">Liên quan</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — thêm/xóa phần tử từ vị trí cuối mảng</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — thêm/xóa phần tử từ vị trí đầu mảng</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — trả về mảng mới là mảng sau khi được nối với (các) mảng hoặc các giá trị khác.</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/sắp_xếp/index.html b/files/vi/web/javascript/reference/global_objects/array/sắp_xếp/index.html new file mode 100644 index 0000000000..1d01c587e0 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/sắp_xếp/index.html @@ -0,0 +1,247 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/Sắp_xếp +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>sort()</strong></code> sẽ sắp xếp các phần tử của mảng ngay tại chỗ (<em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>) và trả về mảng đó. Kết quả sắp xếp có thể không <a href="https://vi.wikipedia.org/wiki/Thu%E1%BA%ADt_to%C3%A1n_s%E1%BA%AFp_x%E1%BA%BFp#S%E1%BA%AFp_x%E1%BA%BFp_%E1%BB%95n_%C4%91%E1%BB%8Bnh">ổn định</a> (<a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable</a>). Cách sắp xếp mặc định là theo Unicode code point của chuỗi.</p> + +<p>Độ phức tạp về thời gian và không gian của thuật toán sắp xếp sẽ tùy vào cách hiện thực.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + + + +<h2 id="Cú_Pháp">Cú Pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<p> </p> + +<h3 id="Tham_số">Tham số</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Hàm dùng để xác định thứ tự sắp xếp. Nếu bỏ qua, mảng sẽ được sắp xếp dựa vào giá trị <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> code point của từng ký tự của chuỗi được chuyển đổi từ giá trị của phần tử.</dd> +</dl> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Mảng đã sắp xếp. Chú ý mảng này được sắp xếp <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>, và không có bản sao được tạo.</p> + +<h2 id="Mô_Tả">Mô Tả</h2> + +<p>Nếu không truyền <code>compareFunction</code> vào, các phần tử sẽ được sẽ được quy đổi về chuỗi kí tự và được so sánh dựa trên thứ tự của chuỗi kí tự đó trong bảng mã Unicode. Chẳng hạn, "Banana" đứng trước "Cherry". Còn nếu so sánh số học, 9 đứng trước 80, nhưng bởi vì các chữ số đã được quy đổi về chuỗi kí tự, nên "80" sẽ đứng trước "9" theo bảng mã Unicode.</p> + +<p>Nếu truyền <code>compareFunction</code> vào, phần tử của mảng sẽ được sắp xếp dựa theo giá trị trả về của hàm so sánh. Nếu <code>a</code> và <code>b</code> là hai phần tử được so sánh, thì:</p> + +<ul> + <li>Nếu <code>compareFunction(a, b)</code> trả về nhỏ hơn 0, đặt chỉ số cho <code>a</code> nhỏ hơn so với chỉ số của <code>b</code>, tức là để <code>a</code> lên trước.</li> + <li>Nếu <code>compareFunction(a, b)</code> trả về 0, giữ nguyên <code>a</code> và <code>b</code>, nhưng tiếp tục so sánh lần lượt các phần tử khác của mảng. Chú ý: quy định của ECMAscript không đảm bảo hành vi này, tương tự đối với tất cả các trình duyệt (ví dụ các phiên bản của Mozilla từ 2003).</li> + <li>Nếu <code>compareFunction(a, b)</code> trả về lớn hơn 0, đặt chỉ số của <code>b</code> nhỏ hơn chỉ số của <code>a</code>, tức là để <code>b</code> lên trước.</li> + <li><code>compareFunction(a, b)</code> luôn phải trả về cùng một giá trị với mỗi cặp phần tử a và b. Nếu kết quả trả về không nhất quán thì thứ tự sắp xếp sẽ không xác định.</li> +</ul> + +<p>Ví dụ đơn giản cho hàm so sánh:</p> + +<pre class="brush: js">function compare(a, b) { + if (a nhỏ hơn b) { + return -1; + } + if (a lớn hơn b) { + return 1; + } + // a bằng b + return 0; +} +</pre> + +<p>Để so sánh giữa các số, chỉ cần lấy <code>a</code> trừ cho <code>b</code>. Hàm dưới đây sẽ sắp xếp mảng theo chiều tăng dần (nếu mảng không chứa <code>Infinity</code> và <code>NaN</code>):</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>Phương thức <code>sort</code> có thể dùng dễ dàng với {{jsxref("Operators/function", "function expressions", "", 1)}} (và <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closure</a>):</p> + +<pre class="brush: js">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>Các Object cũng có thể được sắp xếp với một trong những thuộc tính của chúng.</p> + +<pre class="brush: js">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 } +]; + +// ?sắp xếp theo value (giá trị) +items.sort(function (a, b) { + return a.value - b.value; +}); + +// sắp xếp theo name (tên) +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // bỏ qua hoa thường + var nameB = b.name.toUpperCase(); // bỏ qua hoa thường + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // name trùng nhau + return 0; +});</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<p> </p> + +<h3 id="Tạo_hiển_thị_và_sắp_xếp_một_mảng">Tạo, hiển thị và sắp xếp một mảng</h3> + +<p>Ví dụ sau sẽ tạo bốn mảng và hiển thị chúng ở dạng nguyên bản và dạng đã được sắp xếp. Những mảng số sẽ được sắp xếp bằng cách sử dụng và không sử dụng hàm so sánh.</p> + +<pre class="brush: js">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('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>Kết quả trả về như phía dưới. Như ta thấy, khi sử dụng hàm so sánh thì dù là ở dạng số hay dạng chuỗi kí tự, mảng luôn được sắp xếp đúng.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Sắp_xếp_kí_tự_ngoài_mã_ASCII">Sắp xếp kí tự ngoài mã ASCII</h3> + +<p>Để sắp xếp kí tự ngoài ASCII, ví dụ chuỗi kí tự có dấu (e, é, è, a, ä, vân vân), chuỗi kí tự thuộc ngôn ngữ không phải tiếng Anh: hãy dùng {{jsxref("String.localeCompare")}}. Hàm này có thể so sánh các kí tự đó để chúng luôn trả về thứ tự đúng.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Sắp_xếp_cùng_với_map">Sắp xếp cùng với map</h3> + +<p>Hàm <code>compareFunction</code> có thể được gọi nhiều lần trên cùng một phần tử của mảng. Tuỳ thuộc vào bản chất của <code>compareFunction</code>, việc này có thể tốn nhiều chi phí ban đầu. Hàm <code>compareFunction</code> càng phức tạp và càng có nhiều phần tử phải sắp xếp, thì việc sắp xếp càng phải thông minh hơn, như là dùng thêm phương thức <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> chẳng hạn. Ý tưởng là truyền mảng vào một lần để sàng ra những phần tử cần sắp xếp và lưu chúng vào một mảng tạm, sắp xếp mảng tạm ấy rồi sàng lại mảng tạm sẽ ra được thứ tự mong muốn.</p> + +<pre class="brush: js" dir="rtl">// mảng cần sắp xếp +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> + +<h2 id="Đặc_điểm_kỹ_thuật">Đặc điểm kỹ thuật</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Tình trạng</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Định nghĩa lần đầu.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Trình duyệt tương thích</strong></span></font></p> + +<div> + + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Xem thêm</strong></span></font></p> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/vi/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..1c9072af63 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,167 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>Hàm <strong>toLocaleString()</strong> trả về 1 chuỗi các phần tử trong mảng. Các phần tử này được chuyển đổi sang kiểu chuỗi nhờ hàm toLocalString và được ngăn cách với nhau bằng một xâu đặc biệt (ví dụ : dấu phẩy (,))</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the <code>locales</code> argument, see the {{jsxref("Intl")}} page.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>An object with configuration properties, for numbers see {{jsxref("Number.prototype.toLocaleString()")}}, and for dates see {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A string representing the elements of the array.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_locales_and_options">Using <code>locales</code> and <code>options</code></h3> + +<p>The elements of the array are converted to strings using their <code>toLocaleString</code> methods.</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>Always display the currency for the strings and numbers in the <code>prices</code> array:</p> + +<pre class="brush: js">var prices = ['¥7', 500, 8123, 12]; +prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "¥7,¥500,¥8,123,¥12" +</pre> + +<p>For more examples, see also the {{jsxref("Intl")}}, {{jsxref("NumberFormat")}}, and {{jsxref("DateTimeFormat")}} pages.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// 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>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <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">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="See_also">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/vi/web/javascript/reference/global_objects/array/tostring/index.html b/files/vi/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..c62919e81e --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,75 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Phương thức <code><strong>toString()</strong></code>trả về một chuỗi string đại diện cho mảng được chỉ định và các phần tử trong mảng đó.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một chuỗi string đại diện cho mảng được chỉ định và các phần tử trong mảng đó.</p> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Đối tượng {{jsxref("Array")}} ghi đè phương thức <code>toString</code> của {{jsxref("Object")}}. Đối với các array objects, phương thức <code>toString</code> nối mảng lại và trả về một chuỗi string chứa các phần tử trong mảng và được ngăn cách bởi dấu phẩy.</p> + +<p>Javascript tự động gọi phương thức <code>toString</code> khi một mảng được biểu diễn dưới dạng text hoặc khi một mảng được tham chiếu trong một string concate</p> + +<h3 id="ECMAScript_5_semantics">ECMAScript 5 semantics</h3> + +<p>Bắt đầu từ JavaScript 1.8.5 (Firefox 4), và phù hợp với ngữ nghĩa của ECMAScript 5th, phương thức <code>toString() </code>là phương thức chung và có thể sử dụng với bất cứ object nào. {{jsxref("Object.prototype.toString()")}} sẽ được gọi và giá trị kết quả sẽ được trả về.</p> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Định nghĩa ban đầu. Được triển khai trong JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tương_thích_với_trình_duyệt_web">Tương thích với trình duyệt web</h2> + +<div> +<div class="hidden">Bảng tương thích trong trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp dữ liệu, vui lòng kiểm tra <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi pull request cho chúng tôi.</div> + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/vi/web/javascript/reference/global_objects/array/unshift/index.html b/files/vi/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..580bd9bca3 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,119 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Phương thức unshift() thêm một hoặc nhiều phần tử vào vị trí đầu mảng sau đó trả về chiều dài của mảng mới.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Các phần tử được thêm vào đầu mảng.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Trả về độ dài mới của mảng {{jsxref("Array.length", "length")}} sau khi thực hiện thêm phần tử.</p> + +<h2 id="Description">Description</h2> + +<p>Phương thức <code>unshift</code> sẽ thêm vào đầu mảng các giá trị được truyền vào.</p> + +<p><code>unshift</code> là "intentionally generic"; Phương thức này có thể được {{jsxref("Function.call", "gọi", "", 1)}} or {{jsxref("Function.apply", "áp dụng", "", 1)}} đối với các đối tượng giống như mảng. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<p>Chú ý rằng, Nếu truyền nhiều phần tử vào cùng lức như một biến, chúng sẽ được thêm vào vị trí đầu tiên của mảng, theo đúng vị trí ban đầu mà chúng được truyền vào. Việc gọi phương thức unshift với n phần tử trong một lần sẽ không trả về cùng kết quả (vị trí các phần tử) so với việc gọi n lần với mỗi lần 1 phần tử.</p> + +<p>Xem ví dụ bên dưới</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]; // resetting the array + +arr.unshift(1); +arr.unshift(2); +arr.unshift(3); + +console.log(arr); +// [<strong>3, 2, 1</strong>, 4, 5, 6] +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_unshift">Using unshift</h3> + +<pre class="brush: js notranslate">let arr = [1, 2]; + +arr.unshift(0); // result of the call is 3, which is the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // the new array length is 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-4, -3]); // the new array length is 6 +// arr is [[-4, -3], -2, -1, 0, 1, 2] + +arr.unshift([-7, -6], [-5]); // the new array length is 8 +// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="See_also">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/vi/web/javascript/reference/global_objects/array/values/index.html b/files/vi/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..9460fdfbc3 --- /dev/null +++ b/files/vi/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,113 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>values()</code></strong>trả về một <strong><code>Array Iterator</code></strong> object chứa các giá trị của mỗi index trong mảng.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-values.html")}}</div> + +<h2 id="Cú_Pháp">Cú Pháp</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.values()</pre> + +<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> + +<p>Một object {{jsxref("Array")}} lặp lại mới.</p> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Sử_dụng_vòng_lặp_for...of_loop">Sử dụng vòng lặp for...of loop</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> là triển khai mặc định của <strong>Array.prototype[Symbol.iterator]</strong>.</p> + +<pre class="notranslate">Array.prototype.values === Array.prototype[Symbol.iterator] //true</pre> + +<h3 id="Sử_dụng_vòng_lặp_.next">Sử dụng vòng lặp .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>Sử dụng một lần: đối tượng trình lặp mảng là một đối tượng sử dụng một lần hoặc tạm thời</p> +</div> + +<p>Ví dụ:</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>Lý do:</strong> khi <code>next().done=true</code> hoặc <code>currentIndex>length</code> thì vòng lặp <code>for..of</code> kết thúc. Xem tại <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols.</a></p> + +<p><strong>Giá trị</strong>: không có giá trị nào được lưu trữ trong object lặp mảng; thay vào đó, nó lưu trữ địa chỉ của mảng được sử dụng trong quá trình tạo của nó và do đó phụ thuộc vào các giá trị được lưu trữ trong mảng đó.</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>nếu các giá trị trong mảng thay đổi thì các giá trị trong mảng lặp cũng thay đổi.</p> +</div> + +<p class="hidden"><strong>TODO</strong>: please write about why we need it, use cases.</p> + +<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Thông số kỹ thuật</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Tính_tương_thích_của_trình_duyệt_web">Tính tương thích của trình duyệt web</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Xem_thêm">Xem thêm</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> |