찾다

집 >웹 프론트엔드 >JS 튜토리얼 >js에서 전달 및 복사에 대한 자세한 설명

js에서 전달 및 복사에 대한 자세한 설명

小云云
小云云원래의
2018-03-13 18:15:581148검색

js에는 여러 가지 기본 데이터 유형과 (객체, 배열, 함수)을 포함한 기타 복잡한 데이터 유형이 있다는 것을 알고 있습니다. 기본 데이터 유형의 할당은 실제로 값의 복사본이라고 합니다. 할당된 변수는 동일합니다. 원본과 마찬가지로 변수에는 동일한 값을 갖는 것 외에는 다른 관계가 없습니다. 

let x = 666
let y = x
let m = 'abc'
let n = m
y = 888
n = 'def'
console.log(x, y)//666,888
console.log(m, n)//'abc','def'

복합 데이터 유형의 전송은 이와 다릅니다. 변수가 복합 데이터 유형에 바인딩될 때 기록되는 것은 복합 데이터의 값이 아니라 데이터의 주소 정보일 때입니다. 이 변수는 다른 변수에 할당되며, 이 두 변수는 실제로 데이터 정보를 가리킵니다. 변수가 변경되면 다른 변수도 영향을 받습니다.

복잡한 데이터 유형의 할당은 할당 전후의 변수가 서로 영향을 미친다는 것을 알고 있습니다. 실제 프로젝트에서는 이런 일이 발생하지 않기를 바랍니다. 뷰 데이터(Array)는 어디에서나 사용됩니다. 첫째, 목록은 데이터를 순서대로 표시하면 됩니다. 둘째, 차트는 데이터를 처리하기 전에 데이터를 반전해야 합니다. reverse() 이후의 첫 번째 목록도 우리가 예상한 것과는 다릅니다. 배열의 값만 복사하는 방법이 필요하며 이 새 배열의 데이터 주소는 다릅니다. 이 복사 방법은 배열의 복사본입니다. 

let obj1 = {
    a : '1',
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

위의 예에서 볼 수 있듯이 obj1의 첫 번째 레이어 속성은 속성 값을 복사하고 주소의 복사본을 상속하지 않지만 두 번째 레이어는 b 속성이 메모리 주소를 공유한다는 것입니다. 얕은 복사본이지만 @4에서 obj1은 속성 b가 객체이기 때문에 obj2의 영향을 받지 않습니다. 이러한 종류의 참조 전송에 의한 재할당으로 인해 컴퓨터는 데이터를 저장하고 주소 정보를 기록하기 위해 새 메모리를 재할당하게 되므로 이때 obj1은 .b.c 및 obj2. b.c는 더 이상 레코드의 속성 값이 아닙니다

복사는 전송을 위한 것으로 이해될 수도 있습니다. 복잡한 데이터 유형의 직접 할당은 참조 전송이며 복사라고 할 수 없습니다. 원본 데이터의 경우 복사본도 얕은 복사본과 깊은 복사본으로 나누어져 있기 때문에 데이터의 메모리 주소 정보가 정확히 일치하지 않습니다.

복잡한 데이터 유형의 중첩되지 않은 복사본은 데이터 정보의 첫 번째 레이어만 복사됨을 의미하며, 이는 데이터의 첫 번째 레이어에 복잡한 데이터 유형이 있는 경우에도 참조 전송 방법이 사용되며, copy는 still 주소 정보이고, 다른 방법으로 구현한 배열 객체 등의 다층 중첩 복사본이 deep copy입니다.

배열과 객체가 깊은 복사본과 얕은 복사본을 구현하는 방법을 살펴보겠습니다.

Copy of arrays

slice method

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

  • concat method

    let arr1 = [1,2,[3,4]]
let arr2 = arr1.slice(0)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • for loop

    let arr1 = [1,2,[3,4]]
let arr2 = arr1.concat()
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • …연산자 

    let arr1 = [1,2,[3,4]]
let arr2 = []
for(let i = 0; i<arr1.length; i++){
    arr2.push(arr1[i])
}
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • 위 네 가지 배열 유형의 복사본은 모두 얕은 복사본입니다. 배열의 깊은 복사본을 구현하려면 재귀적으로 구현해야 합니다.

    let arr1 = [1,2,[3,4]]
let [...arr2] = arr1
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

    arr1[2] 및 arr2[2] 메서드를 통해 알 수 있습니다. ] 는 다르며 위의 동일한 딥 카피 복사 방법은 객체에도 적용 가능
객체의 복사본

Universal for loop

let deepClone = (src)=> {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === 'object') ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • ...operator

    let obj1 = {a:1,b:{c:2}}
let obj2 = {}
for(let key in obj1){
    obj2[key] = obj1[key]
}
obj1.b.c = 6
console.log(obj1,obj2)

  • Object.asset()

    let obj1 = {a:1,b:{c:2}}
let {...obj2} = obj1
obj1.b.c = 6
console.log(obj1,obj2)
  • 위 세 가지 방법은 객체입니다. 얕은 복사, 객체의 깊은 복사 두 가지 방법을 소개하겠습니다:

문자열로 변환한 다음 다시 객체로

let obj1 = {a:1,b:{c:2}}
let obj2 = Object.assign({},obj1)
obj1.b.c = 6
console.log(obj1,obj2)

  • deepClone 방법은 위의 deepClone 방법입니다. array

  • 관련 개념

    순수 함수
함수에 입력을 주고 외부 환경에 영향을 주지 않고 고유한 출력을 반환하는 함수를 순수 함수라고 합니다. 여기에 정의된 변수는 가비지에서 재활용됩니다. 함수가 반환된 후의 수집 메커니즘입니다.

하지만 함수의 매개변수가 배열, 객체 또는 함수인 경우 참조가 전달되고 이에 대한 연산이 원본 데이터에 영향을 미치게 됩니다. 이런 방식으로 작성된 함수는 가독성을 떨어뜨리게 됩니다.

영향을 줄이는 방법은 들어오는 매개변수의 전체 복사본을 만들어 새 변수에 할당하여 원래 매개변수가 변조되는 것을 방지하는 것입니다.

순수 함수의 예를 살펴보겠습니다. 

let obj1 = {a:1,b:{c:2}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.b.c = 6
console.log(obj1,obj2)

위의 예를 통해 순수 함수에 의해 wang의 값이 변하지 않는 것을 알 수 있습니다.

다음 예를 다시 생각해 봅시다. 정답이라면 이 글이 말하는 내용을 깊이 이해했다는 뜻입니다. (모두에게 상기시키기 -> 참조 재할당)

let pureFunc = (animal)=> {
    let newAnimal = JSON.parse(JSON.stringify(animal))
    newAnimal.type = &#39;cat&#39;
    newAnimal.name = &#39;Miao&#39;
    return newAnimal
}

let wang = {
    type: &#39;dog&#39;,
    name: &#39;Wang&#39;
}

let miao = pureFunc(wang)
console.log(wang,miao)

위 내용은 js에 대한 저의 이해입니다. 인용 및 전송에 부적절한 부분이 있으면 양해해 주시기 바랍니다.

더 깊은 이해를 위해 다른 기사를 읽어볼 수도 있습니다. Javascript에서 값과 참조 설명을 추천합니다.

프로젝트에서 하나의 변수를 다른 변수에 할당하는 상황을 자주 접하게 됩니다. 실제로는 js를 전송하는 것이지만 할당 후에는 데이터 유형에 따라 다르게 동작합니다

传递

我们知道js有几种基本的数据类型和其他的复杂数据类型包括（对象，数组，函数），基本数据类型的赋值其实就是值的拷贝，我们称之为值传递，赋值后的变量和原来的变量除了值相等之外并无其他关联

let x = 666
let y = x
let m = &#39;abc&#39;
let n = m
y = 888
n = &#39;def&#39;
console.log(x, y)//666,888
console.log(m, n)//&#39;abc&#39;,&#39;def&#39;

复杂数据类型的传递并不是这样子的，因为将一个变量绑定到一个复杂数据类型的时候记录的并不是这个复杂数据的值，而是存放了这个数据的一个地址信息，当将这个变量赋值给另一个变量的时候只是将地址传递了过去，这两个变量指向的其实是一个数据信息，当改变任意一个变量的时候，另外的变量都会受到影响,这种传递方式我们称之为引用传递

let obj1 = {
    a : &#39;1&#39;,
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

拷贝

我们知道复杂数据类型的赋值是引用传递，赋值前后的变量会相互影响，在实际项目中我们经常不希望这样子，譬如：

我们在一个view里面有两处用到了data（是一个Array），其一是一个list只要把data按顺序展示即可，其二是一个chart需要把data逆序之后再做数据处理，这时候我们就犯难了，如果直接data.reverse()之后第一处的列表也是逆序的了，这不是我们想见的，我们需要一个方法只复制数组的值，并且这个新数组和原数组的数据地址并不一样，这种复制方式我们称为数组的拷贝。

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

上面的例子可以看出来obj1的第一层属性是复制属性值，没有继承地址的拷贝，但是第二层就是b属性确实共享一块内存地址的，这就是浅拷贝，但是在@4处obj1却没有收到obj2的影响，是因为属性b是一个对象，这种引用传递的重新赋值，计算机会重新分配一块新的内存来存放数据和记录地址信息，所以这时obj1.b.c和obj2.b.c已经不是记录的一个属性值了

也可以理解为：拷贝是之于传递的，直接对复杂数据类型进行赋值是引用传递，不能称之为拷贝，拷贝是对原数据的单纯的数据备份，数据的内存地址信息并不完全一样，这是因为拷贝还分为浅拷贝和深拷贝。

对复杂数据类型的非嵌套的拷贝，就是只拷贝第一层的数据信息的拷贝是浅拷贝，如果第一层的数据有复杂数据类型，则依然采用引用传递的方式，复制的仍然是地址信息，通过其他方式实现的数组对象等的多层嵌套拷贝就是深拷贝。

下面我们再来看下数组和对象如何来实现深浅拷贝：

数组的拷贝

  • slice方法

    let arr1 = [1,2,[3,4]]
let arr2 = arr1.slice(0)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • concat方法

    let arr1 = [1,2,[3,4]]
let arr2 = arr1.concat()
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

  • for循环

    let arr1 = [1,2,[3,4]]
let arr2 = []
for(let i = 0; i32bfcfa2ad8973d97a5666fc1acc4e11 {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === 'object') ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

    可以发现用方面的方法arr1[2]和arr2[2]不一样，同样上面的深拷贝的方法也适用于对象

    对象的拷贝

    • 万能的for循环

      let obj1 = {a:1,b:{c:2}}
let obj2 = {}
for(let key in obj1){
    obj2[key] = obj1[key]
}
obj1.b.c = 6
console.log(obj1,obj2)

    • …运算符

      let obj1 = {a:1,b:{c:2}}
let {...obj2} = obj1
obj1.b.c = 6
console.log(obj1,obj2)

    • Object.assign()

      let obj1 = {a:1,b:{c:2}}
let obj2 = Object.assign({},obj1)
obj1.b.c = 6
console.log(obj1,obj2)

    上面3种方法是对象的浅拷贝,再介绍2种对象的深拷贝的方法：

    • 转为字符串再转回对象

      let obj1 = {a:1,b:{c:2}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.b.c = 6
console.log(obj1,obj2)

    • deepClone方法，就是上面的数组的deepClone方法

    相关的概念

    纯函数

    给定函数一个输入返回一个唯一的输出，并且不对外部环境附带任何影响的函数我们称为纯函数，其内定义的变量在函数返回后都会被垃圾回收机制回收掉。

    但是如果函数的参数是数组、对象或函数时，传入的是一个引用，对其操作会影响到原来的数据，这样子写的函数会产生附带的影响，使得可读性变低。

    降低影响的方式就是对传入参数进行深度拷贝，并赋给一个新的变量，方式原来的参数被篡改。

    我们来看一个纯函数的例子：

    let pureFunc = (animal)=> {
    let newAnimal = JSON.parse(JSON.stringify(animal))
    newAnimal.type = &#39;cat&#39;
    newAnimal.name = &#39;Miao&#39;
    return newAnimal
}

let wang = {
    type: &#39;dog&#39;,
    name: &#39;Wang&#39;
}

let miao = pureFunc(wang)
console.log(wang,miao)

    通过上面的例子可以看到wang并没有被纯函数所改变值。

    大家再来思考一下下面的例子，如果答对了说明你已经对本文所讲的东西有了很深刻的理解了(提醒大家一下—>引用的重新赋值)

    let afterChange = (obj)=>{
    obj.a = 6
    obj = {
        a: 8,
        b: 9
    }
    return obj
}
let objIns = {
    a: 1,
    b: 2
}

let objIns2 = afterChange(objIns)
console.log(objIns, objIns2)

    以上就是我对js的引用和传递的理解，如有不当之处敬请谅解，Thanks！

    相关推荐：

    js函数的按值传递参数

    JavaScript参数传递图解教程

    js函数参数的按值传递解释

위 내용은 js에서 전달 및 복사에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JS를 사용하여 정렬 알고리즘 구현다음 기사：JS를 사용하여 정렬 알고리즘 구현

관련 기사

더보기