เมื่อคัดลอกอาร์เรย์ใน JavaScript ไปยังอาร์เรย์อื่น:

var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d');  //Now, arr1 = ['a','b','c','d']

ฉันรู้ว่าarr2หมายถึงอาร์เรย์เดียวกันกับarr1แทนที่จะเป็นอาร์เรย์อิสระใหม่ ฉันจะคัดลอกอาร์เรย์เพื่อรับสองอาร์เรย์อิสระได้อย่างไร

ใช้สิ่งนี้:

var newArray = oldArray.slice();

โดยทั่วไปแล้ว slice()ดำเนินการโคลนอาร์เรย์และส่งกลับการอ้างอิงไปยังอาร์เรย์ใหม่

โปรดทราบว่า:

สำหรับการอ้างอิงสตริงและตัวเลข (ไม่ใช่วัตถุจริง) ให้slice()คัดลอกการอ้างอิงวัตถุไปยังอาร์เรย์ใหม่ ทั้งอาร์เรย์ดั้งเดิมและใหม่อ้างอิงถึงวัตถุเดียวกัน หากการอ้างอิงวัตถุเปลี่ยนแปลงการเปลี่ยนแปลงจะสามารถมองเห็นได้ทั้งอาร์เรย์ใหม่และอาร์เรย์ดั้งเดิม

ดั้งเดิมเช่นสตริงและตัวเลขไม่เปลี่ยนรูปดังนั้นการเปลี่ยนแปลงสตริงหรือตัวเลขจึงเป็นไปไม่ได้

ใน Javascript เทคนิคการทำสำเนาลึกนั้นขึ้นอยู่กับองค์ประกอบในอาเรย์ เริ่มกันเลย

องค์ประกอบสามประเภท

องค์ประกอบสามารถเป็นได้: ค่าตามตัวอักษร, โครงสร้างตัวอักษรหรือต้นแบบ

// Literal values (type1)
const booleanLiteral = true;
const numberLiteral = 1;
const stringLiteral = 'true';

// Literal structures (type2)
const arrayLiteral = [];
const objectLiteral = {};

// Prototypes (type3)
const booleanPrototype = new Bool(true);
const numberPrototype = new Number(1);
const stringPrototype = new String('true');
const arrayPrototype = new Array();
const objectPrototype = new Object(); // or `new function () {}`

จากองค์ประกอบเหล่านี้เราสามารถสร้างอาร์เรย์สามประเภท

// 1) Array of literal-values (boolean, number, string) 
const type1 = [true, 1, "true"];

// 2) Array of literal-structures (array, object)
const type2 = [[], {}];

// 3) Array of prototype-objects (function)
const type3 = [function () {}, function () {}];

เทคนิคการทำสำเนาแบบลึกนั้นขึ้นอยู่กับชนิดของอาเรย์ทั้งสามชนิด

ขึ้นอยู่กับประเภทขององค์ประกอบในอาเรย์เราสามารถใช้เทคนิคต่าง ๆ เพื่อทำสำเนาลึก

• อาร์เรย์ของตัวอักษรค่า (type1) , , และเทคนิคสามารถใช้ในการคัดลอกอาร์เรย์ลึกที่มีค่าที่แท้จริง (บูลจำนวนและสตริง) เท่านั้น ตำแหน่งที่ตัวดำเนินการ Spread มีประสิทธิภาพที่ดีที่สุด ( https://measurethat.net/Benchmarks/Show/4281/0/spread-array-performance-vs-slice-splice-concat )
  [...myArray]myArray.splice(0)myArray.slice()myArray.concat()[...myArray]

• อาร์เรย์ของตัวอักษรค่า (type1) และตัวอักษรโครงสร้าง (type2)เทคนิคสามารถนำมาใช้เป็นค่าที่แท้จริงสำเนาลึก (บูลจำนวนสตริง) และโครงสร้างตัวอักษร (อาร์เรย์วัตถุ) แต่ไม่ต้นแบบวัตถุ
  JSON.parse(JSON.stringify(myArray))

• อาร์เรย์ทั้งหมด (type1, type2, type3)สามารถใช้เทคนิค
  jQuery ใน$.extend(myArray)การคัดลอกอาเรย์ทุกประเภท ไลบรารี่อย่างUnderscoreและLo-dashนำเสนอฟังก์ชั่นสำเนาที่คล้ายกันกับjQuery $.extend()แต่มีประสิทธิภาพต่ำกว่า เพิ่มเติมน่าแปลกใจที่$.extend()มีประสิทธิภาพที่สูงกว่าJSON.parse(JSON.stringify(myArray))เทคนิคhttp://jsperf.com/js-deep-copy/15
  และสำหรับนักพัฒนาที่ไม่ได้อยู่ในห้องสมุดบุคคลที่สาม (เช่น jQuery) คุณสามารถใช้ฟังก์ชั่นที่กำหนดเองดังต่อไปนี้ ซึ่งมีประสิทธิภาพสูงกว่า $ .extend และคัดลอกอาร์เรย์ทั้งหมดลึก

function copy(aObject) {
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

ดังนั้นเพื่อตอบคำถาม ...

คำถาม

var arr1 = ['a','b','c'];
var arr2 = arr1;

ฉันรู้ว่า arr2 หมายถึงอาร์เรย์เดียวกันกับ arr1 แทนที่จะเป็น array ใหม่ที่เป็นอิสระ ฉันจะคัดลอกอาร์เรย์เพื่อรับสองอาร์เรย์อิสระได้อย่างไร

ตอบ

เนื่องจากarr1เป็นอาร์เรย์ของค่าตัวอักษร (บูลีน, ตัวเลขหรือสตริง) คุณสามารถใช้เทคนิคการทำสำเนาแบบลึกที่กล่าวถึงข้างต้นซึ่งผู้ประกอบการสเปรด...มีประสิทธิภาพสูงสุด

// Highest performance for deep copying literal values
arr2 = [...arr1];

// Any of these techniques will deep copy literal values as well,
//   but with lower performance.
arr2 = arr1.slice();
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = $.extend(true, [], arr1); // jQuery.js needed
arr2 = _.extend(arr1); // Underscore.js needed
arr2 = _.cloneDeep(arr1); // Lo-dash.js needed
arr2 = copy(arr1); // Custom-function needed - as provided above

คุณสามารถใช้การแพร่กระจายอาร์เรย์...เพื่อคัดลอกอาร์เรย์

const itemsCopy = [...items];

นอกจากนี้หากต้องการสร้างอาร์เรย์ใหม่โดยที่มีอยู่เป็นส่วนหนึ่งของมัน:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

ตอนนี้สเปรด Array ได้รับการสนับสนุนในเบราว์เซอร์หลัก ๆ ทั้งหมดแต่ถ้าคุณต้องการการสนับสนุนที่เก่ากว่าให้ใช้ typescript หรือ babel และคอมไพล์กับ ES5

ข้อมูลเพิ่มเติมเกี่ยวกับสเปรด

ไม่จำเป็นต้อง jQuery ... ตัวอย่างการทำงาน

var arr2 = arr1.slice()

สิ่งนี้จะคัดลอกอาร์เรย์จากตำแหน่งเริ่มต้น0จนถึงจุดสิ้นสุดของอาร์เรย์

มันเป็นสิ่งสำคัญที่จะต้องทราบว่ามันจะทำงานได้ตามที่คาดไว้สำหรับประเภทดั้งเดิม (สตริงจำนวน ฯลฯ ) และยังอธิบายพฤติกรรมที่คาดหวังสำหรับประเภทการอ้างอิง ...

Objectถ้าคุณมีอาร์เรย์ของชนิดการอ้างอิงการพูดประเภท อาร์เรย์จะถูกคัดลอก แต่ทั้งสองของอาร์เรย์จะมีการอ้างอิงเดียวกันObject's ดังนั้นในกรณีนี้ดูเหมือนว่าอาร์เรย์จะถูกคัดลอกโดยอ้างอิงถึงแม้ว่าอาร์เรย์จะถูกคัดลอกจริง

อีกทางเลือกหนึ่งsliceคือconcatซึ่งสามารถใช้ได้ 2 วิธี ครั้งแรกของสิ่งเหล่านี้อาจอ่านได้มากขึ้นเนื่องจากพฤติกรรมที่ต้องการชัดเจนมาก:

var array2 = [].concat(array1);

วิธีที่สองคือ:

var array2 = array1.concat();

โคเฮน (ในความคิดเห็น) ชี้ให้เห็นว่าวิธีหลังนี้มีประสิทธิภาพที่ดีขึ้น

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

ลี Penkman ยังอยู่ในความคิดเห็นที่ชี้ให้เห็นว่าถ้ามีโอกาสarray1ก็คือundefinedคุณสามารถกลับอาร์เรย์ที่ว่างดังนี้

var array2 = [].concat(array1 || []);

หรือสำหรับวิธีที่สอง:

var array2 = (array1 || []).concat();

โปรดทราบว่าคุณยังสามารถทำเช่นนี้กับ:slicevar array2 = (array1 || []).slice();

นี่คือวิธีที่ฉันทำหลังจากพยายามหลายวิธี:

var newArray = JSON.parse(JSON.stringify(orgArray));

สิ่งนี้จะสร้างสำเนาลึกใหม่ที่ไม่เกี่ยวข้องกับสำเนาแรก (ไม่ใช่สำเนาตื้น)

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

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

เพิ่มรหัสต่อไปนี้ในไฟล์ JavaScript ของคุณ:

Object.prototype.clone = function() {
    var newObj = (this instanceof Array) ? [] : {};
    for (i in this) {
        if (i == 'clone') 
            continue;
        if (this[i] && typeof this[i] == "object") {
            newObj[i] = this[i].clone();
        } 
        else 
            newObj[i] = this[i]
    } return newObj;
};

และก็ใช้

var arr1 = ['val_1','val_2','val_3'];
var arr2 = arr1.clone()

มันจะทำงาน.

จาก ES2015

var arr2 = [...arr1];

โดยส่วนตัวแล้วฉันคิดว่าArray.fromเป็นวิธีแก้ปัญหาที่อ่านง่ายกว่า ยังไงก็ตามจงระวังการสนับสนุนเบราว์เซอร์

//clone
let x = [1,2,3];
let y = Array.from(x);

//deep clone
let clone = arr => Array.from(arr,item => Array.isArray(item) ? clone(item) : item);
let x = [1,[],[[]]];
let y = clone(x);

สิ่งสำคัญ!

ส่วนใหญ่ของคำตอบที่นี่ทำงานสำหรับกรณีเฉพาะ

หากคุณไม่สนใจเกี่ยวกับการใช้วัตถุ / ที่ซ้อนกันและอุปกรณ์ประกอบฉาก ( ES6 ):

let clonedArray = [...array]

แต่ถ้าคุณต้องการโคลนแบบลึกให้ใช้สิ่งนี้แทน:

let cloneArray = JSON.parse(JSON.stringify(array))

สำหรับผู้ใช้ lodash:

let clonedArray = _.clone(array) เอกสาร

และ

let clonedArray = _.cloneDeep(array) เอกสาร

หากคุณอยู่ในสภาพแวดล้อมของECMAScript 6 การใช้Spread Operatorคุณสามารถทำได้ดังนี้:

var arr1 = ['a','b','c'];
var arr2 = [...arr1]; //copy arr1
arr2.push('d');

console.log(arr1)
console.log(arr2)

<script src="http://www.wzvang.com/snippet/ignore_this_file.js"></script>

การเพิ่มโซลูชันของarray.slice (); โปรดทราบว่าหากคุณมีอาร์เรย์ย่อยหลายมิติจะถูกคัดลอกโดยการอ้างอิง สิ่งที่คุณสามารถทำได้คือการวนและแบ่ง () แต่ละแถวย่อยแต่ละแถว

var arr = [[1,1,1],[2,2,2],[3,3,3]];
var arr2 = arr.slice();

arr2[0][1] = 55;
console.log(arr2[0][1]);
console.log(arr[0][1]);

function arrCpy(arrSrc, arrDis){
 for(elm in arrSrc){
  arrDis.push(arrSrc[elm].slice());
}
}

var arr3=[];
arrCpy(arr,arr3);

arr3[1][1] = 77;

console.log(arr3[1][1]);
console.log(arr[1][1]);

สิ่งเดียวกันไปที่อาร์เรย์ของวัตถุพวกเขาจะถูกคัดลอกโดยอ้างอิงคุณต้องคัดลอกด้วยตนเอง

ค่าดั้งเดิมจะส่งผ่านตามค่าของมันเสมอ (คัดลอก) อย่างไรก็ตามค่า Compound จะถูกส่งผ่านโดยการอ้างอิง

แล้วเราจะคัดลอก arr นี้ได้อย่างไร

let arr = [1,2,3,4,5];

คัดลอก Array ใน ES6

let arrCopy = [...arr]; 

คัดลอก n Array ใน ES5

let arrCopy = arr.slice(); 
let arrCopy = [].concat(arr);

ทำไม `ให้ arrCopy = arr` ไม่ผ่านตามตัวอักษร?

การส่งผ่านหนึ่ง varible ไปยังอีกค่า Compound เช่น Object / Array ทำงานแตกต่างกัน การใช้ตัวดำเนินการ asign กับค่า copand เราผ่านการอ้างอิงไปยังวัตถุ นี่คือเหตุผลที่ค่าของทั้งสองอาร์เรย์มีการเปลี่ยนแปลงเมื่อลบ / เพิ่มองค์ประกอบ arr

ข้อยกเว้น

arrCopy[1] = 'adding new value this way will unreference';

เมื่อคุณกำหนดค่าใหม่ให้กับตัวแปรคุณกำลังเปลี่ยนการอ้างอิงตัวเองและจะไม่มีผลกับ Object / Array ต้นฉบับ

อ่านเพิ่มเติม

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

นี่คือวิธีที่จะทำ:

ลองนึกภาพเรามีอาร์เรย์นี้ในรหัสของคุณ:

var arr = [1, 2, 3, 4, 5];

1) วนรอบผ่านอาร์เรย์ในฟังก์ชันและส่งกลับอาร์เรย์ใหม่เช่นนี้

 function newArr(arr) {
      var i=0, res = [];
      while(i<arr.length){
       res.push(arr[i]);
        i++;
       }
   return res;
 }

2) ใช้วิธีการแบ่งส่วนสำหรับหั่นส่วนของอาร์เรย์มันจะฝานบางส่วนของอาร์เรย์ของคุณโดยไม่ต้องสัมผัสต้นฉบับในชิ้นถ้าไม่ได้ระบุจุดเริ่มต้นและจุดสิ้นสุดของอาร์เรย์มันจะฝานทั้งหมด อาเรย์และโดยทั่วไปจะทำสำเนาของอาเรย์ทั้งหมดดังนั้นเราสามารถพูดได้อย่างง่ายดาย:

var arr2 = arr.slice(); // make a copy of the original array

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

var arr2 = arr.concat();

4) วิธี stringify และ parse ไม่แนะนำ แต่อาจเป็นวิธีที่ง่ายในการคัดลอก Array และ Objects:

var arr2 = JSON.parse(JSON.stringify(arr));

5) วิธี Array.from ไม่รองรับอย่างกว้างขวางก่อนใช้งานตรวจสอบการสนับสนุนในเบราว์เซอร์ต่างๆ:

const arr2 = Array.from(arr);

6) วิธี ECMA6, ยังไม่รองรับอย่างเต็มที่, แต่ babelJs สามารถช่วยคุณได้หากคุณต้องการ transpile:

const arr2 = [...arr];

let a = [1,2,3];

ตอนนี้คุณสามารถเลือกทำอย่างใดอย่างหนึ่งต่อไปนี้เพื่อสร้างสำเนาของอาร์เรย์

let b = Array.from(a); 

หรือ

let b = [...a];

หรือ

let b = new Array(...a); 

หรือ

let b = a.slice(); 

หรือ

let b = a.map(e => e);

ตอนนี้ถ้าฉันเปลี่ยน

a.push(5); 

จากนั้น a คือ [1,2,3,5] แต่ b ยังคง [1,2,3] เนื่องจากมีการอ้างอิงที่แตกต่างกัน

แต่ฉันคิดว่าในทุกวิธีข้างต้น Array.from ดีกว่าและทำเพื่อคัดลอกอาร์เรย์เป็นหลัก

ฉันชอบวิธีนี้เป็นการส่วนตัว:

JSON.parse(JSON.stringify( originalObject ));

ในกรณีของฉันโดยเฉพาะฉันจำเป็นต้องตรวจสอบให้แน่ใจว่าอาร์เรย์ยังคงอยู่เหมือนเดิมดังนั้นจึงใช้ได้กับฉัน:

// Empty array
arr1.length = 0;
// Add items from source array to target array
for (var i = 0; i < arr2.length; i++) {
    arr1.push(arr2[i]);
}

ทำสำเนาอาร์เรย์ / วัตถุหลายมิติ:

function deepCopy(obj) {
   if (Object.prototype.toString.call(obj) === '[object Array]') {
      var out = [], i = 0, len = obj.length;
      for ( ; i < len; i++ ) {
         out[i] = arguments.callee(obj[i]);
      }
      return out;
   }
   if (typeof obj === 'object') {
      var out = {}, i;
      for ( i in obj ) {
         out[i] = arguments.callee(obj[i]);
      }
      return out;
   }
   return obj;
}

ขอบคุณ James Padolsey สำหรับฟังก์ชั่นนี้

ที่มา: ที่นี่

แดนไม่จำเป็นต้องใช้ลูกเล่นแฟนซี สิ่งที่คุณต้องทำคือทำสำเนา arr1 โดยทำสิ่งนี้

var arr2 = new Array(arr1);

ตอนนี้arr1และarr2เป็นตัวแปรอาเรย์สองตัวแปรที่จัดเก็บในสแต็กแยก ตรวจสอบเกี่ยวกับเรื่องนี้ jsfiddle

เมื่อเราต้องการคัดลอกอาเรย์โดยใช้โอเปอเรเตอร์การมอบหมาย ( =) มันไม่สร้างสำเนามันเพียงแค่คัดลอกพอยน์เตอร์ / อ้างอิงไปยังอาเรย์ ตัวอย่างเช่น:

const oldArr = [1,2,3];

const newArr = oldArr;  // now oldArr points to the same place in memory 

console.log(oldArr === newArr);  // Points to the same place in memory thus is true

const copy = [1,2,3];

console.log(copy === newArr);  // Doesn't point to the same place in memory and thus is false

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

วิธีการคัดลอกอาเรย์:

const oldArr = [1,2,3];

// Uses the spread operator to spread out old values into the new array literal
const newArr1 = [...oldArr];

// Slice with no arguments returns the newly copied Array
const newArr2 = oldArr.slice();

// Map applies the callback to every element in the array and returns a new array
const newArr3 = oldArr.map((el) => el);

// Concat is used to merge arrays and returns a new array. Concat with no args copies an array
const newArr4 = oldArr.concat();

// Object.assign can be used to transfer all the properties into a new array literal
const newArr5 = Object.assign([], oldArr);

// Creating via the Array constructor using the new keyword
const newArr6 = new Array(...oldArr);

// For loop
function clone(base) {
	const newArray = [];
    for(let i= 0; i < base.length; i++) {
	    newArray[i] = base[i];
	}
	return newArray;
}

const newArr7 = clone(oldArr);

console.log(newArr1, newArr2, newArr3, newArr4, newArr5, newArr6, newArr7);

ระวังเมื่ออาร์เรย์หรือวัตถุซ้อนกัน!:

เมื่ออาร์เรย์ซ้อนกันค่าจะถูกคัดลอกโดยการอ้างอิง นี่คือตัวอย่างของสิ่งที่จะนำไปสู่ปัญหา:

let arr1 = [1,2,[1,2,3]]

let arr2 = [...arr1];

arr2[2][0] = 5;  // we change arr2

console.log(arr1);  // arr1 is also changed because the array inside arr1 was copied by reference

ดังนั้นอย่าใช้วิธีการเหล่านี้เมื่อมีวัตถุหรืออาร์เรย์ภายในอาร์เรย์ที่คุณต้องการคัดลอก เช่นใช้วิธีการเหล่านี้ในอาร์เรย์ของดั้งเดิมเท่านั้น

หากคุณต้องการใช้อาร์เรย์ javascript JSON.parseร่วมกับJSON.stringifyเช่นนี้:

let arr1 = [1,2,[1,2,3]]

let arr2 = JSON.parse(JSON.stringify(arr1)) ;

arr2[2][0] = 5;

console.log(arr1);  // now I'm not modified because I'm a deep clone

ประสิทธิภาพการคัดลอก:

เราเลือกอันไหนเพื่อประสิทธิภาพที่ดีที่สุด ปรากฎว่าวิธีการ verbose ที่สุดforวนรอบมีประสิทธิภาพสูงสุด ใช้forวนซ้ำสำหรับการทำสำเนา CPU อย่างจริงจัง (อาร์เรย์ขนาดใหญ่ / มาก)

หลังจากนั้น.slice()วิธีการนี้ยังมีประสิทธิภาพที่ดีและยังมีความละเอียดที่น้อยลงและง่ายขึ้นสำหรับโปรแกรมเมอร์ที่จะใช้งาน ฉันแนะนำให้ใช้.slice()สำหรับการคัดลอกอาร์เรย์ประจำวันของคุณซึ่งใช้งาน CPU ไม่มาก นอกจากนี้หลีกเลี่ยงการใช้JSON.parse(JSON.stringify(arr))(จำนวนมากของค่าใช้จ่าย) หากไม่จำเป็นต้องทำการโคลนแบบลึกและประสิทธิภาพเป็นปัญหา

การทดสอบประสิทธิภาพที่มา

หากอาร์เรย์ของคุณมีองค์ประกอบของชนิดข้อมูลดั้งเดิมเช่นint, char หรือสตริง ฯลฯคุณสามารถใช้หนึ่งในวิธีการเหล่านั้นซึ่งส่งคืนสำเนาของอาร์เรย์เดิมเช่น. slice () หรือ. map () หรือผู้ประกอบการแพร่กระจาย ( ขอบคุณ ES6)

new_array = old_array.slice()

หรือ

new_array = old_array.map((elem) => elem)

หรือ

const new_array = new Array(...old_array);

แต่ถ้าอาร์เรย์ของคุณมีองค์ประกอบที่ซับซ้อนเช่นวัตถุ (หรืออาร์เรย์) หรือวัตถุซ้อนกันมากขึ้นคุณจะต้องตรวจสอบให้แน่ใจว่าคุณกำลังทำสำเนาองค์ประกอบทั้งหมดจากระดับบนสุดไปจนถึงระดับสุดท้าย วัตถุจะถูกใช้และนั่นหมายถึงการเปลี่ยนค่าใน object_elements ใน new_array จะยังคงส่งผลกระทบต่อ old_array คุณสามารถเรียกวิธีการคัดลอกนี้ในแต่ละระดับเพื่อทำDEEP COPY ของ old_array

สำหรับการทำสำเนาลึกคุณสามารถใช้วิธีการดังกล่าวข้างต้นสำหรับชนิดข้อมูลดั้งเดิมในแต่ละระดับขึ้นอยู่กับชนิดของข้อมูลหรือคุณสามารถใช้วิธีการที่มีราคาแพง (กล่าวถึงด้านล่าง)สำหรับการทำสำเนาลึก

var new_array = JSON.parse(JSON.stringify(old_array));

มีวิธีการอื่นอีกมากมายที่คุณสามารถใช้ได้โดยขึ้นอยู่กับความต้องการของคุณ ผมได้กล่าวถึงเพียงบางส่วนของผู้ที่ให้ความคิดทั่วไปของสิ่งที่เกิดขึ้นเมื่อเราพยายามที่จะคัดลอกอาร์เรย์ในอื่น ๆด้วยค่า

หากคุณต้องการทำสำเนาใหม่ของวัตถุหรืออาร์เรย์คุณต้องคัดลอกคุณสมบัติของวัตถุหรือองค์ประกอบของอาร์เรย์อย่างชัดเจน:

var arr1 = ['a','b','c'];
var arr2 = [];

for (var i=0; i < arr1.length; i++) {
   arr2[i] = arr1[i];
}

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ Google เกี่ยวกับค่าดั้งเดิมที่ไม่เปลี่ยนรูปแบบและการอ้างอิงวัตถุที่ไม่แน่นอน

การใช้สำเนาลึก jQuery สามารถทำได้ดังต่อไปนี้:

var arr2 = $.extend(true, [], arr1);

คุณสามารถใช้โอเปอเรเตอร์การแพร่กระจาย ES6 เพื่อคัดลอก Array

var arr=[2,3,4,5];
var copyArr=[...arr];

นี่คือวิธีคัดลอกอีกสองสามข้อ:

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

const arrayCopy1 = Object.values(array);
const arrayCopy2 = Object.assign([], array);
const arrayCopy3 = array.map(i => i);
const arrayCopy4 = Array.of(...array );

คุณสามารถใช้ ES6 กับสเปรด Opeartor ได้ง่ายกว่า

arr2 = [...arr1];

มีข้อ จำกัด .. ตรวจสอบ docs Spread syntax @ mozilla

ตัวอย่างด่วน:

1. ถ้าองค์ประกอบในอาร์เรย์เป็นชนิดดั้งเดิม (สตริง, จำนวน, ฯลฯ )

var arr1 = ['a','b','c'];
// arr1 and arr2 are independent and primitive elements are stored in 
// different places in the memory
var arr2 = arr1.slice(); 
arr2.push('d');
console.log(arr1); // [ 'a', 'b', 'c' ]
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]

2. หากองค์ประกอบในอาร์เรย์เป็นวัตถุตามตัวอักษรอาร์เรย์อื่น ({}, [])

var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]];
// arr1 and arr2 are independent and reference's/addresses are stored in different
// places in the memory. But those reference's/addresses points to some common place
// in the memory.
var arr2 = arr1.slice(); 
arr2.pop();      // OK - don't affect arr1 bcos only the address in the arr2 is
                 // deleted not the data pointed by that address
arr2[0].x = 'z'; // not OK - affect arr1 bcos changes made in the common area 
                 // pointed by the addresses in both arr1 and arr2
arr2[1][0] = 9;	 // not OK - same above reason

console.log(arr1); // [ { x: 'z', y: 'b' }, [ 9, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

3. โซลูชันสำหรับ 2 : การคัดลอกลึกโดยองค์ประกอบโดยองค์ประกอบ

var arr1 = [{ x: 'a', y: 'b'}, [1, 2], [3, 4]];
arr2 = JSON.parse(JSON.stringify(arr1));
arr2.pop();	  // OK - don't affect arr1
arr2[0].x = 'z';  // OK - don't affect arr1
arr2[1][0] = 9;	  // OK - don't affect arr1

console.log(arr1); // [ { x: 'a', y: 'b' }, [ 1, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ { x: 'z', y: 'b' }, [ 9, 2 ] ]

นี่คือตัวแปร:

var arr1=['a', 'b', 'c'];
var arr2=eval(arr1.toSource());
arr2.push('d');
console.log('arr1: '+arr1+'\narr2: '+arr2);
/*
 *  arr1: a,b,c
 *  arr2: a,b,c,d
 */

มีการแนะนำใหม่Array.fromแต่น่าเสียดายที่ในช่วงเวลาของการเขียนนี้ได้รับการสนับสนุนเฉพาะใน Firefox รุ่นล่าสุด (32 และสูงกว่า) สามารถใช้งานได้ง่ายดังต่อไปนี้:

var arr1 = [1, 2, 3];
console.log(Array.from(arr1)); // Logs: [1, 2, 3]

อ้างอิง: ที่นี่

หรือArray.prototype.mapอาจใช้กับฟังก์ชันข้อมูลประจำตัว:

function identity(param)
{
    return param;
}

var arr1 = [1, 2, 3],
    clone = arr1.map(identity);

อ้างอิง: ที่นี่

สำหรับอาร์เรย์ ES6 ที่มีวัตถุ

cloneArray(arr) {
    return arr.map(x => ({ ...x }));
}