개체 및 개체 속성 할당을 위한 ES6 동적 키(이름)

손 들어! 또는 동적으로 귀하의 재산에 액세스합니다.

최근에 저는 ReactJS와 Elixir를 사용하여 소프트웨어를 작성하는 일상 업무에서 Javascript를 다시 선택했습니다. AngularJS 1 이후로 한동안 전문적으로 자바스크립트를 코딩하지 않았습니다. 2014년부터 JS 라이브러리와 커뮤니티에 많은 새로운 변경 사항이 있습니다! 따라잡아야 해요.

오늘 ES6에서 동적 키를 사용하여 개체 속성에 액세스하거나 할당하는 새로운 방법을 배웠습니다.

ES6을 사용하면 개발자가 동적 키 또는 이름으로 객체를 생성하거나 액세스할 수 있습니다.

const key1 = "make";
const key2 = "model;
const newObj = {
  year: 2020,
  [key1]: "toyota"
  [key2]: "prius"
}

이것을 코딩 시나리오에 적용할 수 있는 여러 가지 방법을 생각할 수 있습니다. 키 이름의 숫자가 증가하는 개체를 만들어야 하는 경우는 어떻습니까?

const name = "com";
let i = 1;

const radioDevice = {
  numberOfComs: 3,
  [name + "_" + i++]: "port 4556",
  [name + "_" + i++]: "socket 12",
  [name + "_" + i++]: "socket 15",
};

radioDevice.com_1; 
// => port 4556

또는 배열의 항목을 동적 인덱스로 바꾸고 싶을 때 😉

let array = [
  {name: "Minh", age: 20},
  {name: "Brian", age: 22},
  {name: "Hugo", age: 12},
  {name: "Zelda", age: 56},
  {name: "Simon", age: 7}
];

const nameToFind = "Hugo";
const personToReplace = {name: "Ali", age: 34};

const index = array.findIndex(item => item.name === nameToFind);
Object.assign([], array, { [index]: personToReplace });
//=> [
// {name: "Minh", age: 20}
// {name: "Brian", age: 22}
// {name: "Ali", age: 34} <---------
// {name: "Zelda", age: 56}
// {name: "Simon", age: 7}
//];

ES6의 Object.assign 함수는 하나 이상의 소스 객체에서 대상 객체로 열거 가능한 모든 자체 속성 값을 복사하는 데 사용됩니다.

여기에서 자세한 내용을 읽어보세요: https://www.ecma-international.org/ecma-262/6.0/#sec-object.assign