ในการทำซ้ำอาร์เรย์ใน JavaScript: ข้อใดต่อไปนี้เร็วกว่าที่จะใช้

วิธีการแบ่ง

var dup_array = original_array.slice();

For ห่วง

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

ฉันรู้ว่าทั้งสองวิธีทำสำเนาตื้นเท่านั้น: ถ้า original_array มีการอ้างอิงถึงวัตถุวัตถุจะไม่ถูกคัดลอก แต่จะมีการคัดลอกข้อมูลอ้างอิงเท่านั้นดังนั้นทั้งสองอาร์เรย์จึงมีการอ้างอิงไปยังวัตถุเดียวกัน แต่นี่ไม่ใช่ประเด็นของคำถามนี้

ฉันถามแค่ความเร็วเท่านั้น

มีอย่างน้อย5 (!) วิธีในการโคลนอาร์เรย์:

• ห่วง
• ชิ้น
• Array.from ()
• concat
• ผู้ประกอบการแพร่กระจาย (เร็วที่สุด)

มีเธรดของ BENCHMARKS huuuge แล้วโดยให้ข้อมูลต่อไปนี้:

• สำหรับเบราว์เซอร์กะพริบตาslice()เป็นวิธีที่เร็วที่สุดconcat()ช้าลงเล็กน้อยและwhile loopช้ากว่า 2.4 เท่า

• เบราว์เซอร์อื่น ๆwhile loopเป็นวิธีที่เร็วที่สุดตั้งแต่เบราว์เซอร์ผู้ที่ไม่ได้มีการเพิ่มประสิทธิภาพภายในและsliceconcat

สิ่งนี้ยังคงเป็นจริงในเดือนกรกฎาคม 2559

ด้านล่างเป็นสคริปต์ง่ายๆที่คุณสามารถคัดลอกวางลงในคอนโซลของเบราว์เซอร์และเรียกใช้หลายครั้งเพื่อดูรูปภาพ พวกมันเอาต์พุตมิลลิวินาทีต่ำกว่าดีกว่า

ในขณะที่วง

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);

ชิ้น

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

โปรดทราบว่าวิธีการเหล่านี้จะคัดลอกวัตถุ Array เองเนื้อหาอาร์เรย์จะถูกคัดลอกโดยอ้างอิงและไม่ได้โคลนแบบลึก

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

เทคนิคslice เป็นวิธีที่เร็วที่สุด อย่างไรก็ตามจะเร็วยิ่งขึ้นหากคุณเพิ่ม0ดัชนีเริ่มต้น

myArray.slice(0);

เร็วกว่า

myArray.slice();

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

แล้ววิธี es6 ล่ะ

arr2 = [...arr1];

วิธีที่ง่ายที่สุดในการโคลน Array หรือ Object:

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

var cloned_array = [].concat(target_array);

ฉันรวบรวมตัวอย่างด่วน: http://jsbin.com/agugo3/edit

ผลลัพธ์ของฉันใน Internet Explorer 8 คือ 156, 782 และ 750 ซึ่งจะบ่งบอกว่าsliceในกรณีนี้เร็วกว่ามาก

a.map(e => e)เป็นอีกทางเลือกหนึ่งสำหรับงานนี้ ณ วันนี้.map()มีความรวดเร็วมาก (เกือบเร็วเท่ากับ.slice(0)) ใน Firefox แต่ไม่ใช่ใน Chrome

ในทางตรงกันข้ามถ้าอาร์เรย์มีหลายมิติเนื่องจากอาร์เรย์เป็นวัตถุและวัตถุที่เป็นประเภทอ้างอิงจึงไม่มีวิธีการฝานหรือ concat ที่จะรักษา ... ดังนั้นวิธีหนึ่งที่เหมาะสมในการโคลนอาร์เรย์คือการประดิษฐ์Array.prototype.clone()เป็น ดังต่อไปนี้

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 วิธีที่เร็วที่สุดในการโคลนอาร์เรย์

ฉันทำฟังก์ชันยูทิลิตี้ธรรมดา ๆ นี้เพื่อทดสอบเวลาที่ใช้ในการโคลนอาร์เรย์ ไม่น่าเชื่อถือ 100% แต่สามารถให้แนวคิดแบบกลุ่มกับคุณได้ว่าต้องใช้เวลานานเท่าใดในการโคลนอาร์เรย์ที่มีอยู่:

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

และทดสอบวิธีการต่าง ๆ :

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));

UPDATE :
หมายเหตุ: JSON.parse(JSON.stringify(arr))ออกจากพวกเขาทุกวิธีเดียวที่จะโคลนลึกอาร์เรย์คือการใช้ ที่กล่าวว่าไม่ได้ใช้ข้างต้นถ้าอาร์เรย์ของคุณอาจจะรวมถึงฟังก์ชั่นในขณะที่มันจะกลับมา

ขอบคุณ @GilEpshtain สำหรับการอัปเดตนี้null

ลองดูที่: การเชื่อมโยง มันไม่ได้เกี่ยวกับความเร็ว แต่ความสะดวกสบาย นอกจากนี้อย่างที่คุณเห็นคุณสามารถใช้slice (0)กับประเภทดั้งเดิมเท่านั้น

ในการสร้างอาเรย์อิสระแทนที่จะคัดลอกการอ้างอิงไปยังอาเรย์คุณสามารถใช้วิธีการแบ่งส่วนอาเรย์

ตัวอย่าง:

ในการสร้างอาเรย์อิสระแทนที่จะคัดลอกการอ้างอิงไปยังอาเรย์คุณสามารถใช้วิธีการแบ่งส่วนอาเรย์

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

ในการคัดลอกหรือคัดลอกวัตถุ:

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);

แหล่งที่มา: ลิงค์

ดังที่ @Dan กล่าวว่า "คำตอบนี้ล้าสมัยอย่างรวดเร็วใช้มาตรฐานเพื่อตรวจสอบสถานการณ์จริง" มีคำตอบเฉพาะจาก jsperf ที่ไม่มีคำตอบสำหรับตัวเอง: ในขณะที่ :

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

มี 960,589 ops / วินาทีกับ runnerup a.concat()ที่ 578,129 ops / วินาทีซึ่งคือ 60%

นี่เป็น Firefox รุ่นล่าสุด (40) 64 บิต

@aleclarson สร้างมาตรฐานใหม่ที่เชื่อถือได้มากขึ้น

ECMAScript 2015 วิธีใช้Spreadตัวดำเนินการ:

ตัวอย่างพื้นฐาน:

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

ลองในคอนโซลเบราว์เซอร์:

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);

อ้างอิง

• 6 การใช้งานที่ยอดเยี่ยมของผู้ปฏิบัติงานสเปรด
• สเปรดไวยากรณ์

มันขึ้นอยู่กับเบราว์เซอร์ หากคุณดูในโพสต์บล็อกArray.prototype.slice vs การสร้างอาร์เรย์ด้วยตนเองมีคำแนะนำคร่าวๆเกี่ยวกับประสิทธิภาพของแต่ละรายการ:

ผล:

มีวิธีแก้ปัญหาที่สะอาดกว่ามาก:

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

ต้องมีการตรวจสอบความยาวเนื่องจากตัวArrayสร้างทำงานแตกต่างกันเมื่อมีการเรียกด้วยอาร์กิวเมนต์หนึ่งตัว

โปรดจำไว้ว่า. slice () จะไม่ทำงานสำหรับอาร์เรย์สองมิติ คุณจะต้องมีฟังก์ชันดังนี้:

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

ขึ้นอยู่กับความยาวของอาเรย์ หากความยาวของอาร์เรย์คือ <= 1,000,000 วิธีการsliceและconcatวิธีการใช้เวลาประมาณเดียวกัน แต่เมื่อคุณให้ช่วงกว้างขึ้นconcatเมธอดจะชนะ

ตัวอย่างเช่นลองใช้รหัสนี้:

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

หากคุณตั้งค่าความยาวของ original_array เป็น 1,000,000 sliceวิธีและconcatวิธีการใช้เวลาประมาณเดียวกัน (3-4 มิลลิวินาทีขึ้นอยู่กับตัวเลขสุ่ม)

หากคุณตั้งค่าความยาวของ original_array เป็น 10,000,000 sliceวิธีการนั้นจะใช้เวลานานกว่า 60 ms และconcatวิธีนั้นจะใช้เวลามากกว่า 20 ms

ทางออกที่ง่าย:

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

ดังนั้นเพื่อหลีกเลี่ยงสถานการณ์เหล่านี้ให้ใช้

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

        const cloneArr = Array.from(arr);

เวลามาตรฐาน!

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>

มาตรฐานจะทำงานเป็นเวลา 10 วินาทีตั้งแต่คุณคลิกปุ่ม

ผลลัพธ์ของฉัน:

Chrome (เครื่องมือ 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 (SpiderMonkey Engine):

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)

รหัสผู้ชนะ:

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

ผู้ชนะเครื่องยนต์:

SpiderMonkey (Mozilla / Firefox)

วิธีที่รวดเร็วในการทำซ้ำอาร์เรย์ใน JavaScript ตามลำดับ:

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

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

#3: array1copy = array1.slice();

หากวัตถุอาร์เรย์ของคุณมีเนื้อหา JSON ที่ไม่สามารถทำให้เป็นลำดับ (ฟังก์ชั่น, Number.POSITIVE_INFINITY และอื่น ๆ ) ได้ดีกว่าที่จะใช้

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

คุณสามารถติดตามรหัสนี้ วิธีอาร์เรย์โคลนที่ไม่เปลี่ยนรูป นี่เป็นวิธีที่สมบูรณ์แบบในการโคลนอาร์เรย์

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

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

ใน ES6 คุณสามารถใช้ไวยากรณ์ Spread ได้ได้

ตัวอย่าง:

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

โปรดทราบว่าผู้ประกอบการแพร่กระจายสร้างอาร์เรย์ใหม่ที่สมบูรณ์ดังนั้นการแก้ไขหนึ่งจะไม่ส่งผลกระทบต่ออีก

ตัวอย่าง:

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