diff options
Diffstat (limited to 'files/vi/web/javascript/reference/global_objects/array/from/index.html')
| -rw-r--r-- | files/vi/web/javascript/reference/global_objects/array/from/index.html | 228 |
1 files changed, 0 insertions, 228 deletions
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 deleted file mode 100644 index cee1cc84f7..0000000000 --- a/files/vi/web/javascript/reference/global_objects/array/from/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -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> |