는 내가 코드 블록을 ES6/ES7

Question

를 사용하여 짧은 코드의 블록을 쓸 수 있습니까? 나는 이것을 시도했지만 틀렸어.

가능합니까?

Answer 1

이것은 es2015 사전 설정을 사용하여 작동하지 않지만 es2016을 사용하여 작동합니다.

이것을 시도하면 https://babeljs.io/repl입니다. 이 하나가 작동하지 않는 이유를 업데이트

answer from CodingIntrigue

을 보여줍니다.

은 또한 당신이 원하는 것은 이 한 줄을 destructuring와 현재 달성하지 생각합니다. 실제로에 변수 할당을 원하지 않는 한 첫 번째 의도에 더 충실해야합니다. 그런 경우 IIFE 키를 필터링하는 것이 좋습니다.

const obj = {location: Object.assign({}, data)} 

또는도 : zeroflagl 말했다

으로 데이터를 복사 할 경우 당신이 그것을 사용할 수 있습니다 ES의 제안 단계 3.

const data = { 
    address: 'address', 
    cityDistrict: 'district', 
    city: 'city', 
    country: 'country' 
} 
const { address, cityDistrict, city, country } = data; 

const obj = { 
    location: {...data} 
}; 

console.log(obj) 

/* logs Object { 
    "location": Object { 
    "address": "address", 
    "city": "city", 
    "cityDistrict": "district", 
    "country": "country" 
    } 
} 
*/ 

Answer 2

를 사용하는 경우, 당신은 spread properties를 사용하여 작업을 수행 할 수 있습니다 다음 코드를 사용할 수 있지만 obj.location을 변경하면 데이터가 변경 될 수 있습니다.

const obj = {location: data} 

Answer 3

(Chrome에서 적어도 괄호 안에 과제를 래핑하는 경우 Babel에서도) 두 코드는 동일하지 않습니다..

코드의 두 번째 부분은 단순히 location 속성 data을 할당하고, addresscityDistrict라는 범위에서 4 개 개의 새로운 변수 등 예컨대

작성 올바른 기록 같이

const data = { 
    address: "Address", 
    cityDistrict: "District", 
    city: "City", 
    country: "Country" 
} 

const obj = { 
    location: ({address, cityDistrict, city, country} = data) 
}; 
console.log(obj); 

보이는 데이터이지만 실제로 인쇄되는 것은 data, 새 개체가 아닙니다입니다. 따라서 다음과 같이하면 :

const obj = { 
    location: ({address, cityDistrict, city, country} = data) 
}; 

data.address = "Test" 

console.log(obj); // location.Address = Test 

예기치 않은 데이터가 발생합니다.그 부작용으로, 당신은 또한 범위에 4 개 개의 새로운 변수를 얻을 것 :

const obj = { 
    location: Object.assign({}, data); 
}