ES6 JavaScript ES6 객체 - React Vernacular Movement 02

머리말

이전 기사에서는 JavaScript ES6를 소개했습니다.

let, const, var 차이점
템플릿 리터럴
화살표 기능

오늘 우리는 계속해서 JavaScript ES6의 다른 새로운 구문을 소개할 것입니다.

객체 구조화
객체 리터럴 향상
배열 파괴
스프레드 연산자

ES6 객체 파괴

구조 분해 할당을 사용하면 객체의 특정 값을 분리하여 사용할 수 있습니다.

이전 기사에서 언급한 화살표 함수와 함께 사용하여 분해할 수도 있습니다.

파괴하지 않고

				
					const person = { person_name: "Hogan", 전화: "0123456789", 이메일: "hoganlin.tech@gmail.com" } const showInfo = () => { console.log(`name: ${person.person_name}\ nphone: ${person.phone}`) } showInfo() //이름: 호건 //전화: 0123456789

구조 분해 사용

				
					const person = { 사람_이름: "Hogan", 전화: "0123456789", 이메일: "hoganlin.tech@gmail.com" } const showInfo = ({ 사람_이름, 전화 }) => { console.log(`이름: ${ person_name}\nphone: ${phone}`) } showInfo(person) //이름: Hogan //phone: 0123456789

ES6 객체 리터럴 향상

객체 리터럴 향상은 이 구문을 통해 변수를 객체로 결합할 수 있는 역구조화로 생각할 수 있습니다.

				
					const person_name = "호건"; constphone = "0123456789"; const email = "hoganlin.tech@gmail.com"; const printEmail = () => { console.log(`email: ${person.email}`) } const person = { person_name, 전화, 이메일, printEmail } console.log(`name: ${person.person_name}\nphone: ${person.phone}`) //name: Hogan / /전화: 0123456789

배열 파괴

객체 외에도 배열을 분해할 수도 있고 쉼표를 통해 값을 얻을 수도 있습니다.

				
					const [firstName] = ["Hogan", "Pipi", "Fifi", "Bobo"] console.log(firstName) //Hogan const [, , , fourthName] = ["Hogan", "Pipi", "Fifi " ", "Bobo"] console.log(fourthName) //보보

ES6 스프레드 연산자(Spread Operator)

스프레드 연산자(Spread Operator)의 구문은 세 개의 마침표로 구성됩니다… 그리고 일부 기능은 현대 문법에서 흔히 사용되는 문법 중 하나인 확장 연산자를 통해 구현할 수 있습니다.

배열 결합

확장 연산자를 통해 Animal1과 Animal2를 결합하여 Animal로 지정할 수 있습니다.

				
					const 동물1 = ["고양이", "개"] const 동물2 = ["코끼리", "지브라"] const 동물 = [...동물1, ...동물2] console.log(동물) //[ '고양이 ', '개', '코끼리', '지브라' ]

복사 배열

어떤 경우에는 배열 값을 얻을 때 원래 배열을 수정하므로 이 경우 배열을 빠르게 복사할 수 있기를 원합니다. 예를 들어 배열의 마지막 값을 얻으려면 스프레드 연산자를 사용할 수 있습니다.

다음은 확장 연산자를 사용하지 않는 예입니다. 프로그램이 reverse()를 실행한 후 원래 배열을 수정한다는 것을 알 수 있습니다.

				
					const 동물 = ["고양이", "개"] const [last] = 동물.reverse(); // 개 console.log(동물); ]

반대로 스프레드 연산자를 사용하면 원본 배열을 수정하지 않고도 새 배열을 복사할 수 있습니다.

				
					const 동물 = ["고양이", "개"] const [last] = [...동물].reverse(); // 개 console.log(동물); ', '개' ]

결론

이전 기사에 이어서 ES6의 구문을 소개했습니다. 이 기사에서는 ES6의 구조 분해, 객체 향상 및 확장 연산자를 소개합니다. 구조 분해 및 확장 연산자는 React 구현에서 매우 일반적으로 사용됩니다.

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~

인용하다

https://www.w3schools.com/js/js_es6.asp

https://www.javascripttutorial.net/es6/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

기타 기사

React Vernacular Movement 01-JavaScript ES6

대기업이 Nx를 사용하는 이유는 무엇입니까? Monorepo 도구는 5분 안에 빠르게 설정할 수 있습니다.

모노레포를 정말 이해하시나요? 5분 동안 대규모 프런트엔드 아키텍처를 소개합니다.

주스탠드란 무엇인가요? React 프론트엔드 상태 관리

머리말