Phương thức Array.from() tạo ra một thực thể Array 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.

Cú pháp

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

Tham số

arrayLike
Đối tượng có tính chất giống mảng hoặc khả duyệt
mapFnOptional
Hàm Map được gọi khi thực thi trên từng phần tử.
thisArgOptional
Giá trị được sử dụng như this, thường là tham chiếu đến phạm vi của đối tượng gọi hàm mapFn.

Giá trị trả về

Một thực thể Array mới.

Mô tả

Array.from() cho phép tạo Array từ:

  • 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 length  và các phần tử được đánh chỉ mục) 
  • iterable objects  - đố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ư Map và  Set).

Array.from() còn cung cấp thêm một tham số tuỳ chọn là mapFn, vốn là một hàm được tự động thực thi khi duyệt qua từng phần tử của map. Điểm khác biệt quan trọng của Array.from(obj, mapFn, thisArg) so với Array.from(obj).map(mapFn, thisArg) 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ư typed arrays 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.

Thuộc tính length của phương thức from() là 1.

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ư Array.from cũng được kế thừa trong subclass, và kết quả trả về của from trong subclass là thực thể của subclass, không phải Array.

Ví dụ

Tạo mảng từ chuỗi

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

Tạo mảng từ tập hợp Set

var s = new Set(['foo', window]); 
Array.from(s); 
// ["foo", window]

Tạo mảng từ một Map

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'];

Tạo mảng từ một đối tượng có tính chất giống mảng (arguments)

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [1, 2, 3]

Hàm arrow trong Array.from

// 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]

Polyfill

Array.from đã đượ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 Array.from trong các bản thực thi không hỗ trợ Array.from.

// 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;
    };
  }());
}

Đặc tả

Đặc tả Trạng thái Ghi chú
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.from' in that specification.
Standard Khởi tạo.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.from' in that specification.
Draft  

Trình duyệt hỗ trợ

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 45Edge Full support YesFirefox Full support 32IE No support NoOpera Full support YesSafari Full support 9WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support 4.0.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Xem thêm

Document Tags and Contributors

Những người đóng góp cho trang này: quytran, trongthanh, dothanhlam
Cập nhật lần cuối bởi: quytran,