Để sao chép một mảng trong JavaScript: cách nào sau đây là nhanh hơn để sử dụng?

Phương pháp cắt lát

var dup_array = original_array.slice();

For vòng

for(var i = 0, len = original_array.length; i < len; ++i)
   dup_array[i] = original_array[i];

Tôi biết cả hai cách chỉ làm một bản sao nông : nếu original_array chứa tham chiếu đến các đối tượng, các đối tượng sẽ không được sao chép, nhưng chỉ các tham chiếu sẽ được sao chép và do đó cả hai mảng sẽ có tham chiếu đến cùng các đối tượng. Nhưng đây không phải là điểm của câu hỏi này.

Tôi chỉ hỏi về tốc độ.

Có ít nhất 5 cách (!) Để sao chép một mảng:

• vòng
• lát
• Mảng.from ()
• concat
• toán tử trải rộng (FASTEST)

Đã có một chủ đề LỢI ÍCH huuuge , cung cấp thông tin sau:

• đối với các trình duyệt nhấp nháyslice() là phương pháp nhanh nhất, concat()chậm hơn một chút và while loopchậm hơn 2,4 lần.

• đối với các trình duyệt khác while looplà phương pháp nhanh nhất, vì các trình duyệt đó không có tối ưu hóa nội bộ cho slicevà concat.

Điều này vẫn đúng trong tháng 7 năm 2016.

Dưới đây là các tập lệnh đơn giản mà bạn có thể sao chép-dán vào bảng điều khiển của trình duyệt và chạy nhiều lần để xem ảnh. Họ xuất ra mili giây, thấp hơn là tốt hơn.

trong khi lặp lại

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = Array(n); 
i = a.length;
while(i--) b[i] = a[i];
console.log(new Date() - start);

lát

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = a.slice();
console.log(new Date() - start);

Xin lưu ý rằng các phương thức này sẽ sao chép chính đối tượng Array, tuy nhiên nội dung mảng được sao chép bằng tham chiếu và không được nhân bản sâu.

origAr == clonedArr //returns false
origAr[0] == clonedArr[0] //returns true

Kỹ thuật slice là cách nhanh nhất. Tuy nhiên , nó thậm chí còn nhanh hơn nếu bạn thêm 0chỉ mục bắt đầu.

myArray.slice(0);

nhanh hơn

myArray.slice();

http://jsperf.com/claming-arrays/3

Cách es6 thì sao?

arr2 = [...arr1];

Cách dễ nhất để sao chép sâu Array hoặc Object:

var dup_array = JSON.parse(JSON.stringify(original_array))

var cloned_array = [].concat(target_array);

Tôi đưa ra một bản demo nhanh: http://jsbin.com/agugo3/edit

Kết quả của tôi trên Internet Explorer 8 là 156, 782 và 750, điều này cho thấy sẽ slicenhanh hơn nhiều trong trường hợp này.

a.map(e => e)là một lựa chọn khác cho công việc này. Tính đến hôm nay .map()là rất nhanh (gần như nhanh như.slice(0) ) trong Firefox, nhưng không phải trong Chrome.

Mặt khác, nếu một mảng là đa chiều, vì các mảng là các đối tượng và các đối tượng là các kiểu tham chiếu, thì không có phương thức lát hoặc concat nào có thể chữa được ... Vì vậy, một cách nhân bản một mảng là một phát minh Array.prototype.clone()như sau

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};

var arr = [ 1, 2, 3, 4, [ 1, 2, [ 1, 2, 3 ], 4 , 5], 6 ],
    brr = arr.clone();
brr[4][2][1] = "two";
console.log(JSON.stringify(arr));
console.log(JSON.stringify(brr));

Way Cách nhanh nhất để sao chép một mảng

Tôi đã thực hiện chức năng tiện ích rất đơn giản này để kiểm tra thời gian cần thiết để sao chép một mảng. Nó không đáng tin cậy 100% tuy nhiên nó có thể cung cấp cho bạn một ý tưởng lớn về thời gian cần thiết để sao chép một mảng hiện có:

function clone(fn) {
    const arr = [...Array(1000000)];
    console.time('timer');
    fn(arr);
    console.timeEnd('timer');
}

Và thử nghiệm phương pháp khác nhau:

1)   5.79ms -> clone(arr => Object.values(arr));
2)   7.23ms -> clone(arr => [].concat(arr));
3)   9.13ms -> clone(arr => arr.slice());
4)  24.04ms -> clone(arr => { const a = []; for (let val of arr) { a.push(val); } return a; });
5)  30.02ms -> clone(arr => [...arr]);
6)  39.72ms -> clone(arr => JSON.parse(JSON.stringify(arr)));
7)  99.80ms -> clone(arr => arr.map(i => i));
8) 259.29ms -> clone(arr => Object.assign([], arr));
9) Maximum call stack size exceeded -> clone(arr => Array.of(...arr));

CẬP NHẬT :
Lưu ý: trong số tất cả, cách duy nhất để sao chép sâu một mảng là sử dụng JSON.parse(JSON.stringify(arr)).

Điều đó nói rằng, không sử dụng ở trên nếu mảng của bạn có thể bao gồm các hàm vì nó sẽ trả về null.
Cảm ơn bạn @GilEpshtain cho bản cập nhật này .

Hãy xem: liên kết . Đó không phải là về tốc độ, mà là sự thoải mái. Ngoài ra, như bạn có thể thấy, bạn chỉ có thể sử dụng lát (0) trên các kiểu nguyên thủy .

Để tạo một bản sao độc lập của một mảng chứ không phải là một bản sao của sự tinh chỉnh cho nó, bạn có thể sử dụng phương pháp lát mảng.

Thí dụ:

Để tạo một bản sao độc lập của một mảng chứ không phải là một bản sao của sự tinh chỉnh cho nó, bạn có thể sử dụng phương pháp lát mảng.

var oldArray = ["mip", "map", "mop"];
var newArray = oldArray.slice();

Để sao chép hoặc sao chép một đối tượng:

function cloneObject(source) {
    for (i in source) {
        if (typeof source[i] == 'source') {
            this[i] = new cloneObject(source[i]);
        }
        else{
            this[i] = source[i];
  }
    }
}

var obj1= {bla:'blabla',foo:'foofoo',etc:'etc'};
var obj2= new cloneObject(obj1);

Nguồn: liên kết

Như @ Dan nói: "Câu trả lời này trở nên lỗi thời nhanh chóng sử dụng. Benchmarks để kiểm tra tình hình thực tế", có một câu trả lời từ cụ thể jsperf rằng đã không có một câu trả lời cho chính nó: trong khi :

var i = a.length;
while(i--) { b[i] = a[i]; }

có 960,589 ops / giây với vị trí á quân a.concat() ở mức 578.129 ops / giây, chiếm 60%.

Đây là Firefox (40) 64 bit mới nhất.

@aleclarson tạo ra một điểm chuẩn mới, đáng tin cậy hơn.

Cách ECMAScript 2015 với Spreadnhà điều hành:

Ví dụ cơ bản:

var copyOfOldArray = [...oldArray]
var twoArraysBecomeOne = [...firstArray, ..seccondArray]

Thử trong bảng điều khiển trình duyệt:

var oldArray = [1, 2, 3]
var copyOfOldArray = [...oldArray]
console.log(oldArray)
console.log(copyOfOldArray)

var firstArray = [5, 6, 7]
var seccondArray = ["a", "b", "c"]
var twoArraysBecomOne = [...firstArray, ...seccondArray]
console.log(twoArraysBecomOne);

Người giới thiệu

• 6 công dụng tuyệt vời của toán tử lây lan
• Cú pháp lây lan

Nó phụ thuộc vào trình duyệt. Nếu bạn xem trong bài đăng trên blog Array.prototype.slice so với việc tạo mảng thủ công , có một hướng dẫn sơ bộ về hiệu suất của từng bài:

Các kết quả:

Có một giải pháp sạch hơn nhiều:

var srcArray = [1, 2, 3];
var clonedArray = srcArray.length === 1 ? [srcArray[0]] : Array.apply(this, srcArray);

Kiểm tra độ dài là bắt buộc, bởi vì hàm Arraytạo hoạt động khác nhau khi nó được gọi với chính xác một đối số.

Hãy nhớ .slice () sẽ không hoạt động cho mảng hai chiều. Bạn sẽ cần một chức năng như thế này:

function copy(array) {
  return array.map(function(arr) {
    return arr.slice();
  });
}

Nó phụ thuộc vào độ dài của mảng. Nếu độ dài mảng là <= 1.000.000, thì các phương thức slicevà concatsẽ mất khoảng thời gian tương tự. Nhưng khi bạn đưa ra một phạm vi rộng hơn,concat phương pháp thắng.

Ví dụ: thử mã này:

var original_array = [];
for(var i = 0; i < 10000000; i ++) {
    original_array.push( Math.floor(Math.random() * 1000000 + 1));
}

function a1() {
    var dup = [];
    var start = Date.now();
    dup = original_array.slice();
    var end = Date.now();
    console.log('slice method takes ' + (end - start) + ' ms');
}

function a2() {
    var dup = [];
    var start = Date.now();
    dup = original_array.concat([]);
    var end = Date.now();
    console.log('concat method takes ' + (end - start) + ' ms');
}

function a3() {
    var dup = [];
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup.push(original_array[i]);
    }
    var end = Date.now();
    console.log('for loop with push method takes ' + (end - start) + ' ms');
}

function a4() {
    var dup = [];
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup[i] = original_array[i];
    }
    var end = Date.now();
    console.log('for loop with = method takes ' + (end - start) + ' ms');
}

function a5() {
    var dup = new Array(original_array.length)
    var start = Date.now();
    for(var i = 0; i < original_array.length; i ++) {
        dup.push(original_array[i]);
    }
    var end = Date.now();
    console.log('for loop with = method and array constructor takes ' + (end - start) + ' ms');
}

a1();
a2();
a3();
a4();
a5();

Nếu bạn đặt độ dài của original_array thành 1.000.000, slicephương thức vàconcat phương thức sẽ mất khoảng cùng thời gian (3-4 ms, tùy thuộc vào các số ngẫu nhiên).

Nếu bạn đặt độ dài của original_array thành 10.000.000, thì slicephương thức sẽ mất hơn 60 ms và concatphương thức này mất hơn 20 ms.

Một giải pháp đơn giản:

original = [1,2,3]
cloned = original.map(x=>x)

        const arr = ['1', '2', '3'];

         // Old way
        const cloneArr = arr.slice();

        // ES6 way
        const cloneArrES6 = [...arr];

// But problem with 3rd approach is that if you are using muti-dimensional 
 // array, then only first level is copied

        const nums = [
              [1, 2], 
              [10],
         ];

        const cloneNums = [...nums];

// Let's change the first item in the first nested item in our cloned array.

        cloneNums[0][0] = '8';

        console.log(cloneNums);
           // [ [ '8', 2 ], [ 10 ], [ 300 ] ]

        // NOOooo, the original is also affected
        console.log(nums);
          // [ [ '8', 2 ], [ 10 ], [ 300 ] ]

Vì vậy, để tránh những tình huống này xảy ra, hãy sử dụng

        const arr = ['1', '2', '3'];

        const cloneArr = Array.from(arr);

Điểm chuẩn thời gian!

function log(data) {
  document.getElementById("log").textContent += data + "\n";
}

benchmark = (() => {
  time_function = function(ms, f, num) {
    var z = 0;
    var t = new Date().getTime();
    for (z = 0;
      ((new Date().getTime() - t) < ms); z++)
      f(num);
    return (z)
  }

  function clone1(arr) {
    return arr.slice(0);
  }

  function clone2(arr) {
    return [...arr]
  }

  function clone3(arr) {
    return [].concat(arr);
  }

  Array.prototype.clone = function() {
    return this.map(e => Array.isArray(e) ? e.clone() : e);
  };

  function clone4(arr) {
    return arr.clone();
  }


  function benchmark() {
    function compare(a, b) {
      if (a[1] > b[1]) {
        return -1;
      }
      if (a[1] < b[1]) {
        return 1;
      }
      return 0;
    }

    funcs = [clone1, clone2, clone3, clone4];
    results = [];
    funcs.forEach((ff) => {
      console.log("Benchmarking: " + ff.name);
      var s = time_function(2500, ff, Array(1024));
      results.push([ff, s]);
      console.log("Score: " + s);

    })
    return results.sort(compare);
  }
  return benchmark;
})()
log("Starting benchmark...\n");
res = benchmark();

console.log("Winner: " + res[0][0].name + " !!!");
count = 1;
res.forEach((r) => {
  log((count++) + ". " + r[0].name + " score: " + Math.floor(10000 * r[1] / res[0][1]) / 100 + ((count == 2) ? "% *winner*" : "% speed of winner.") + " (" + Math.round(r[1] * 100) / 100 + ")");
});
log("\nWinner code:\n");
log(res[0][0].toString());

<textarea rows="50" cols="80" style="font-size: 16; resize:none; border: none;" id="log"></textarea>

Điểm chuẩn sẽ chạy trong 10 giây kể từ khi bạn nhấp vào nút.

Kết quả của tôi:

Chrome (động cơ V8):

1. clone1 score: 100% *winner* (4110764)
2. clone3 score: 74.32% speed of winner. (3055225)
3. clone2 score: 30.75% speed of winner. (1264182)
4. clone4 score: 21.96% speed of winner. (902929)

Firefox (Công cụ SpiderMonkey):

1. clone1 score: 100% *winner* (8448353)
2. clone3 score: 16.44% speed of winner. (1389241)
3. clone4 score: 5.69% speed of winner. (481162)
4. clone2 score: 2.27% speed of winner. (192433)

Mã người chiến thắng:

function clone1(arr) {
    return arr.slice(0);
}

Động cơ chiến thắng:

SpiderMonkey (Mozilla / Firefox)

Các cách nhanh chóng để sao chép một mảng trong JavaScript theo thứ tự:

#1: array1copy = [...array1];

#2: array1copy = array1.slice(0);

#3: array1copy = array1.slice();

Nếu các đối tượng mảng của bạn chứa một số nội dung không tuần tự hóa JSON (các hàm, Number.POSITIVE_INFINITY, v.v.) tốt hơn để sử dụng

array1copy = JSON.parse(JSON.stringify(array1))

Bạn có thể làm theo mã này. Cách bất di bất dịch mảng. Đây là cách hoàn hảo để nhân bản mảng

const array = [1, 2, 3, 4]

const newArray = [...array]
newArray.push(6)
console.log(array)
console.log(newArray)

Trong ES6, bạn chỉ cần sử dụng cú pháp lây lan .

Thí dụ:

let arr = ['a', 'b', 'c'];
let arr2 = [...arr];

Xin lưu ý rằng toán tử trải rộng tạo ra một mảng hoàn toàn mới, vì vậy sửa đổi một mảng sẽ không ảnh hưởng đến mảng khác.

Thí dụ:

arr2.push('d') // becomes ['a', 'b', 'c', 'd']
console.log(arr) // while arr retains its values ['a', 'b', 'c']