itsource

var, let 또는 construct 없이 객체 파괴

mycopycode 2023. 10. 19. 22:17
반응형

var, let 또는 construct 없이 객체 파괴

개체 파괴가 없는 경우 오류를 던지는 이유는 무엇입니까?var그 앞에 키워드?

{a, b} = {a: 1, b: 2};

던지다SyntaxError: expected expression, got '='

다음 세 가지 예제는 문제없이 작동합니다.

var {a, b} = {a: 1, b: 2};
var [c, d] = [1, 2];
    [e, f] = [1, 2];

보너스 질문:왜 우리는 필요하지 않습니까?var배열 파괴를 위해?

저는 이런 일을 하면서 문제에 부딪혔습니다.

function () {
  var {a, b} = objectReturningFunction();

  // Now a and b are local variables in the function, right?
  // So why can't I assign values to them?

  {a, b} = objectReturningFunction();
}

이 문제는 다음에서 비롯됩니다.{...}자바스크립트에서 여러 의미를 가지는 연산자들.

언제{문장의 처음에 나타납니다. 항상 블록을 나타내므로 할당할 수 없습니다. 뒤에 으로 나타나면 개체를 나타냅니다.

var는 문장 뒤에 그룹화 괄호 뒤에 올 수 없기 때문에 이러한 구분에 도움이 됩니다.

( {a, b} = objectReturningFunction() );

문서: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#assignment_separate_from_declaration_2

참고: 선언 없이 객체 리터럴 파괴 할당을 사용할 경우 할당 문 주변의 괄호(...)가 필요합니다.

왼쪽의 {a, b}이(가) 개체 리터럴이 아닌 블록으로 간주되므로 {a, b} = {a:1, b:2}은(는) 올바른 독립 실행형 구문이 아닙니다.

그러나 {a, b} = {a:1, b:2}이(가) 유효하고 var {a, b} = {a:1, b:2}이(가) 유효합니다.

( ...) 식을 세미콜론 앞에 놓거나 이전 줄에서 함수를 실행하는 데 사용할 수 있습니다.

세미콜론 없이 자바스크립트를 경우, 예측 가능하게 작동하려면 '선언 없이 할당' 구문 앞에 세미콜론이 있어야 합니다.

let a, b

;({a, b} = objectReturningFunction()) // <-- note the preceding ;

저를 발견했기 때문에 이 점을 강조하고 싶었을 뿐입니다. 그리고 다른 사람들이 왜 작동하지 않는지 이해하는 데 시간을 절약할 수 있기를 바랍니다. 그리고/또는 다음과 같은 코드 형식으로 이상한 결과를 만들어냅니다.prettier.

실제로, 인용된 문서의 마지막 줄에 있는 답변이지만 놓치기 쉽습니다. 특히 예시를 보지 못하면 놓치기 쉽습니다!

다른 방법은 다음과 같습니다.

let {} = {a, b} = objectReturningFunction()

장점:

  • 괄호 필요 없음
  • 세미콜론 필요 없음
  • 추가 과제는 확실한 금지입니다(이상한 일이 발생하지 않는 것을 고려할 때 - 또한 트랜스필러가 이 사실을 모를 수도 있습니다).

단점:

  • 좀 이상하게 생겼지만, 내 생각에는 그것보다 더 이상하지 않습니다.!(){...}() IIFE.
  • 왜 거기에 있는지 헷갈릴 수도 있습니다.첫 만남에 퇴장이 보장되므로 일회성으로 사용하지 말 것을 권합니다.

고려 사항:

colors = { r: 204, g: 51, b: 102, hex: "#cc3366" };

다음은 몇 가지 파괴 방법의 요점입니다.

변수에 대한 파괴

let { r, g, b } = colors;
// initializes variables r, g, b

다른 이름가진 새 변수에 대한 파괴

let { r: red, g: green, b: blue } = colors;
// initializes variables red, green, blue

기존 변수에 대한 파괴

let r, g, b;
...
({ r, g, b } = colors);

이름이 다른 기존 변수에 대한 파괴

let red, green, blue;
...
({ r: red, g: green, b: blue } = colors);

동일한 속성 이름을 가진 다른 개체로 파괴하는 중

let myColor = { r: 0, g: 0, b: 0 };
...
({ r: myColor.r, g: myColor.g, b: myColor.b } = colors);

서로 다른 속성 이름을 가진 다른 개체로 파괴하는 중

let myColor = { red: 0, green: 0, blue: 0 };
...
({ r: myColor.red, g: myColor.green, b: myColor.blue } = colors);

언급URL : https://stackoverflow.com/questions/27386234/object-destructuring-without-var-let-or-const

반응형