각도 @NGRX에서 이 세 개의 점의 의미는 무엇입니까?

각도 @NGRX에서 이 세 개의 점의 의미는 무엇입니까?

이 세 개의 점은 정확히 무엇을 의미하며, 왜 그것들이 필요합니까?

export function leadReducer(state: Lead[]= [], action: Action {
    switch(action.type){
        case ADD_LEAD:
            return [...state, action.payload];
        case REMOVE_LEAD:
            return state.filter(lead => lead.id !== action.payload.id )
}
}

세 개의 점은 유형 스크립트(ES7에서도)의 산포 연산자로 알려져 있습니다.

확산 연산자는 배열의 모든 요소를 반환합니다.각 요소를 개별적으로 작성하는 것처럼:

let myArr = [1, 2, 3];
return [1, 2, 3];
//is the same as:
return [...myArr];

이것은 이것을 컴파일하기 때문에 대부분 단지 통사적 설탕입니다.

func(...args);

대상:

func.apply(null, args);

이 경우 다음과 같이 컴파일됩니다.

return [...state, action.payload];
//gets compiled to this:
return state.concat([action.payload]);

배열/개체의 요소를 확산하거나 다른 배열 또는 개체의 배열 또는 개체를 초기화하는 데 사용되는 확산 연산자(...)입니다.

이를 이해하기 위해 기존 어레이에서 새 어레이를 생성해 보겠습니다.

배열 1 = [1, 2, 3]; //1, 2, 3으로 합니다.

배열 2 = [4, 5, 6]; //4, 5, 6

//기존 배열에서 새 배열 만들기

copyArray = [...배열1]; //1,2,3

//두 배열을 병합하여 배열 만들기

mergedArray = [...배열 1, ...배열 2]; //1,2,3,4,5,6

//기존 배열에서 새 배열 만들기 + 추가 요소

let newArray = [...배열 1, 7, 8]; //1, 2, 3, 7, 8

그...(스프레드 연산자)는 인덱스에서 각 값을 반환함으로써 작동합니다.0색인으로length-1:

컨텍스트:하위 배열(또는 다른 두 번째 수준 속성)을 사용할 때 세 개의 점 확산 구문에 대한 특정 동작(값/참조 기준)을 주의하십시오.

찾기:중첩 배열(또는 하위 속성)은 값이 아닌 참조로 전달되도록 주의합니다.즉, 첫 번째 수준 항목만 "값별" 복사본으로 전달됩니다.예를 참조하십시오.

sourceArray = [ 1, [2, 3] ] // Second element is a sub-array
targetArray = [ ...sourceArray]
console.log("Target array result:", JSON.stringify(targetArray), "\n\n") //it seems a copy, but...

console.log("Let's update the first source value:\n")
sourceArray[0] = 10
console.log("Updated source array:", JSON.stringify(sourceArray), "\n")
console.log("Target array is NOT updated, It keeps a copy by value:")
console.log(JSON.stringify(targetArray), "\n\n")

//But if you update a value of the sub-array, it has NOT been copied
console.log("Finally, let's update a nested source value:\n")
sourceArray[1][0] = 20
console.log("Updated source nested array:", JSON.stringify(sourceArray), "\n")
console.log("Target array is updated BY REFERENCE! ", )
console.log(JSON.stringify(targetArray), "\n\n") // it is not a copy, it is a reference!

console.log("CONCLUSION: ... spread syntax make a copy 'by value' for first level elements, but 'by reference' for second level elements (This applies also for objects) so take care!\n")

언급URL : https://stackoverflow.com/questions/46235436/angular-whats-the-meaning-of-these-three-dots-in-ngrx