[javascript] 값으로 배열 복사

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

딥 카피 기술은 3 가지 어레이 유형에 따라 다릅니다.

배열의 요소 유형에 따라 다양한 기술을 사용하여 딥 카피 할 수 있습니다.

• 리터럴 값 (타입 1)의 배열 , , 및 기술은 단지 리터럴 값 (부울, 숫자 및 문자열) 깊은 복사 어레이에 사용될 수있다; 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()성능은 떨어집니다. 놀랍게도 http://jsperf.com/js-deep-copy/15 기술 $.extend()보다 성능이 우수합니다 .
  jQuery와 같은 타사 라이브러리를 사용하지 않는 개발자의 경우 다음과 같은 사용자 정의 기능을 사용할 수 있습니다. $ .extend보다 성능이 높고 모든 어레이를 딥 카피합니다.JSON.parse(JSON.stringify(myArray))

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과 동일한 배열을 나타냅니다. 배열을 복사하여 두 개의 독립적 인 배열을 얻으려면 어떻게해야합니까?

대답

때문에 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

답변

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

var arr2 = arr1.slice()

var array2 = [].concat(array1);

var array2 = array1.concat();

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

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

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

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