ES6 - 초보자 가이드 - 객체 및 배열 구성

여보게, 지금까지 이 시리즈에 관심을 가지고 있었다면, ES6와 그에 따른 새로운 기능에 대해 더 잘 이해할 수 있었을 텐데.그러나 본고는 ES6에 나타난 가장 좋은 특성 중 하나인 대상과 수조 분해에 관한 것이다.개인적으로 말하자면, 나는 이 기능을 좋아한다. 그것은 코드를 더욱 쉽게 읽을 수 있을 뿐만 아니라, 쓰기도 더욱 쉽다.

예를 하나 들어 주세요.
예를 들고 싶으세요?좋아, 우리가 ES5에서 대상과 그룹에 대해 무엇을 할지 보자...

var expenseObj = {
    type: 'Business',
    amount: '10GBP'
};
var expenseArr = [
    'Business',
    '10GBP'
];

var objType = expense.type;
var objAmount = expense.amount

var arrType = expense[0];
var arrAmount = expense[1];

이 방법들은 결코 무섭지 않다. 하루가 끝날 때, 그것들은 이미 일하고, 너는 그것들이 사용되는 것을 볼 수 있을 것이다.ES6의 작동 방식을 살펴보겠습니다...

ES6 분해 객체
따라서 ES6에서는 객체의 키를 기반으로 변수를 만들 수 있으므로 입력을 중지할 수 있습니다.propertyName.내가 무슨 뜻이야?어디 보자.

const file = {
    extension: 'jpg',
    name: 'post',
    size: 1024,
    blah :'meh'
}
//If this were an ES5 Function
function fileSummary(file) {
    debugger;
    return `The file ${file.name}.${file.extension} is of size: ${file.size}`
};

//But in ES6
function fileSummary({name, extension, size}) {
    debugger;
    return `The file ${name}.${extension} is of size: ${size}`
};

console.log(fileSummary(file)); // In both cases returns "The file post.jpg is of size 1024" in a console.log

개인적으로, 나는 ES6 방식을 정말 좋아한다. 왜냐하면 함수의 성명에서, 나는 내가 전송된 대상에서 어떤 값을 사용할지 알고 있기 때문이다.ES6에서 예시된 문자 수는 조금 적지만 더 큰 함수를 상상해 보세요. 이 함수에서 당신은 더 자주 이름을 인용하고 곧 file.name 같은 코드를 작성해야 하기 때문에 짜증이 납니다. 개발자에게 의존하여 예쁜 짧은 이름을 사용해야 합니다!ES6 객체 분해의 또 다른 이점은 함수 분해 객체(이하 예제에서 보듯이)의 경우 매개변수 순서를 더 이상 기억할 필요가 없다는 것입니다.

// Without ES6 Object Destructuring we might have a function like this
function signup(username, password, email, dateOfBirth, city){
    //create the user
}
//and we would call it as below
signup('Bob','password', '[email protected]', '1/1/1991', 'Lowestoft')

// Bring in ES6 and Object Destructuring
function signup({username, password, email, dateOfBirth, city}){
    //create the user
}
// You may have created an object to be updated as a form is filled out to capture the data
const user = {
    username:'Bob',
    email: '[email protected]',
    password:'password',
    city: 'Lowestoft',
    dateOfBirth: '1/1/1991'
}
// Note how the user object and the function as in different orders, with destructuring this is fine!
signup(user)

ES6 분해 어레이
수조 분해의 처리 방식은 대상과 완전히 같지만 결과는 확연히 다르다.수조에 대해 우리는 이름/키가 없기 때문에, 비록 우리는 여전히 수조 요소를 인용할 수 있지만, 우리는 우리의 분해 구조에서 그것들을 명명해야 한다. 우리는 모든 수조 항목에 이름/키가 있기를 바란다.예를 들어 보겠습니다.

const companies = [
    'Google',
    'Facebook',
    'Uber'
]

// In ES5 we would reference array entries like this 
var firstCompany = companies[0];
console.log(firstCompany) // Returns Google in a console.log

//In ES6 we can destructure the array and generate our variables from the positional entries in the array
const [ companyName, companyName2, companyName3] = companies;
console.log(companyName); // Returns "Google" in a console.log
console.log(companyName2); // Returns "Facebook" in a console.log
console.log(companyName3); // Returns "Uber" in a console.log

위에서 보듯이, 우리는companys수 그룹의 모든 항목에 변수 이름을 만들었습니다. 만약에 큰 수 그룹이 있다면, 물론 이것은 매우 번거로울 수 있기 때문에, 이것은 당신의 장면에 적합한 정확한 해결 방안이 아닐 수도 있습니다.

// We can also use the ...rest operator to obtain a reference to the rest of the items in the array
const [companyName, ...rest] = companies;
console.log(companyName); // Returns "Google" in a console.log
console.log(rest); // Returns the rest of the array items in a console.log as an array ["Facebook", "Uber"]

위에서 보듯이, 그룹을 분해할 때, 우리는rest 조작부호를 사용할 수 있습니다. 우리는 변수 companyName 를 그룹의 첫 번째 항목에 분배하고, 나머지는rest 조작부호로 만든 변수 rest 에 분배됩니다.본문 뒷부분에서, 나는 예를 보여 드리겠습니다. 당신은 이런 문법으로 귀속 함수를 만들 수 있습니다.

대상과 수조를 분해해서 이 둘을 혼합하는 것은 어떻습니까
프로젝트를 신속하게 얻기 위해 대상 분해와 그룹 분해를 결합할 수 있습니다.다음 예시에서, 우리는 회사의 수조와 위치를 가지고 있으며, 그 위치를Destructing으로 수조의 첫 번째 포지셔닝 대상에서 가져옵니다. companyLocation

const companies = [
    {name: 'Google', companyLocation:'Mountain View'},
    {name: 'Facebook', companyLocation:'Menlo Park'},
    {name: 'Uber', companyLocation:'San Francisco'},
]
const [{companyLocation}] = companies // Gives you the first array members location
console.log(companyLocation); // Returns Moutain View in a console.log

우리도 상반된 방식으로 해구를 사용하여 대상에서 수조 항목을 얻을 수 있다.다음은 구글의 대상 locations 을 포함하는 키입니다.이 키의 값은 위치 그룹입니다.우리의 해체행은 우선 해체 대상을 보고locations 키만 본 다음에 수조를 해체하여 첫 번째 항목을 가져오고 변수 이름을 분배합니다 firstLocation.

const Google = {
    locations: ['Mountain View', 'New York', 'London']
}

const { locations: [firstLocation] } = Google
console.log(firstLocation) // Returns Mountain View in a console.log

좀 더 복잡한 예들

배열을 객체 배열로 변환
몇몇 교육 과정에서 나는 지도 좌표 진열을 포함하는 진열을 제공하는 테스트 예시를 만났다.이 수조는 x와 y로 명명할 수 있도록 대상 수조로 변환해야 합니다. 이를 위해, 나는 최종적으로 .map 수조 도움말을 사용했습니다. 아래와 같습니다.

const points = [
    [4,5],
    [10,1],
    [0,20]
];

//Requirement
/* [
    {x: 4, y:5},
    {x: 10, y:1},
    {x:0, y:20},
] */

//destructure the array
const newPoints = points.map(([x, y]) => {
    return {x, y}
})

console.log(newPoints) // This returns the requirement in a console.log

제 과정에서 저는 그 중의 일부 지식을 배웠고 대상과 수조 분해에 관한 부분의 끝에 매우 복잡한 테스트를 설정했습니다. 이것은 시간이 좀 걸려야 알 수 있습니다.나는 그것을 아래에 포함해서 지금 발생하고 있는 일에 대해 설명할 것이다.아마 네가 한번 해 보고 싶을 거야. 내가 너의 해결 방안을 알게 해줘.)

작업은 다음과 같습니다.
수조 해체, 귀속,rest/spread 조작부호를 사용하여 함수 '더블' 을 만듭니다. 이 함수는 새 수조를 되돌려줍니다. 모든 값을 2로 곱합니다.어떤 그룹 조수도 사용하지 마세요!물론 맵, for Each, Reduce 조수는 이것을 매우 간단하게 만들 수 있지만, 어쨌든 이것은 어려운 시도이다

제공된 이니시에이터 코드:

const numbers = [1, 2, 3];

function double() {

};

나의 해결 방안(본문 끝을 보면 이 해결 방안에 문제가 있을 수 있다):

const numbers = [1, 2, 3];

function double([firstNum, ...rest]) {
    if(!firstNum) return[];    
    return [firstNum * 2, ...double(rest)];
};

double(numbers);

솔루션에 대한 설명:
우리는 하나의 숫자 그룹에서 시작하여 우리의 함수에서 발생하는 일은 다음과 같다.

함수의 매개 변수는 하나의 해체수 그룹 값firstNum을 포함하고 우리는 ...rest 매개 변수를 사용한다(이곳을 rest라고 부른다)

만약 firstNumfalsy라면, 우리는 빈 그룹

으로 돌아갑니다.

우리의 반환 호출에서 우리는 주어진 숫자를 2로 곱하고 두 번째 항목은 ...spread oprator를 사용하여 더블에 대한 귀속 호출을 한다. 최종적으로 호출은 첫 번째 교체double(2,3)와 두 번째 교체double(3)에서 이렇게 보인다.
네스트/반복 출력2,4,6]입니다.만약 네가 약간 console.log 을 더하면, 그것은 약간 혼란스러워 보일 수 있다. 왜냐하면, 귀속, 예를 들면:

const numbers = [1, 2, 3];

function double([firstNum, ...rest]) {
  console.log(`firstNum: `);
  console.log(firstNum);
  console.log(`rest: `);
  console.log(rest);

  if(!firstNum) {
  console.log(`!firstNum`)
  return []; 
  }

  var retValue = [firstNum * 2, ...double(rest)];

  console.log(`retValue: `);
  console.log(retValue);
  return retValue;
}

var endResult = double(numbers);
console.log(`endResult: `);
console.log(endResult);

다음은 콘솔의 출력입니다.메시지 로깅

firstNum: 
1
rest: 
[2, 3]

firstNum: 
2
rest: 
[3]

firstNum: 
3
rest: 
[]

firstNum: 
undefined
rest: 
[]
!firstNum

retValue: 
[6]
retValue: 
[4, 6]
retValue: 
[2, 4, 6]

endResult: 
[2, 4, 6]

출력이 혼란스러워 보일 수도 있습니다. [6], 그 다음 [4,6], 그 다음 [2,4,6]. 이것은 귀속 때문입니다.너는 지금 첫 번째 교체를 운행하고 있다. 이 안에서 너는 두 번째 교체라고 부른다. 이 안에서 너는 세 번째 교체라고 부른다. 이 안에서 너는 네 번째 교체라고 부른다.네 번째 교체는 빈 그룹을 되돌려주는 것을 완성했고 세 번째 교체를 완성했다. 그룹에 6을 추가했다. 이것은 두 번째 교체를 완성했다. 그래서 그룹의 앞에 4를 추가했고 첫 번째 교체를 완성했다. 되돌아오는 그룹에 2를 추가했다.마지막으로 드릴게요[2, 4, 6].만약 return [] 값이 없을 때 firstNum 존재하지 않는다면, 브라우저 메모리가 다 소모되고 Stack Overflow 오류가 발생할 때까지 무한히 실행할 것입니다.

아이구!!
그래서 어떤 사람이 나에게 해결 방안 코드에 실제로 문제가 존재한다고 강조했다(이것은 교정이 항상 100%가 아니라는 것을 나타낸다!)제공된 그룹이 0을 포함한다고 가정하십시오.가치를 평가할 때, 0은 잘못된 것으로 여겨진다.따라서, 우리는 double 함수에서 빈 그룹을 되돌려 줄 것이다.우리는 이 문제를 해결할 수 있다.

const number = [0, 1, 2, 3, 4]
function double([firstNum, ...rest]) {
    if(typeof firstNum === "undefined") return[];    
    return [firstNum * 2, ...double(rest)];
};

double(numbers);

나는 본래 위의 예를 바꿀 수 있었지만, 나는 모든 사람에게 이런 실수가 발생하기 쉬운 부분을 보여주는 것이 더욱 유익할 것이라고 생각한다.