머리말
React 프론트엔드 프레임워크에 들어가기 전에 먼저 독자들이 JavaScript ES6에 대한 지식을 검토할 수 있도록 도와드리겠습니다.
- 자바스크립트 역사
- let, const, var 차이점
- 템플릿 리터럴
- 화살표 기능
위 내용은 중국어 번역에 관한 내용입니다. 현재는 MDN 공식 중국어 번역을 사용하고 있습니다. 사무적인 오류가 있으면 메시지를 남겨주세요.
자바스크립트 ES6 역사
1995년에 출판된 브렌든 아이크(Brendan Eich) JavaScript는 초기에 JavaScript의 주요 기능은 웹 페이지에 몇 가지 간단한 기능을 구현하는 것이었습니다. 나중에 Ajax, Jquery, React.js, Vue.js, Node.js, TypeScript가 등장했고, 점차 JavaScript는 주류가 되기 전에 가장 널리 사용되는 프로그래밍 언어 중 하나가 되었으며 프런트엔드와 프론트엔드 모두에 사용할 수 있습니다. 그리고 백엔드 개발.
ES5와 ES6을 아는 독자도 있겠지만, 그 ES는 무엇일까요?
ES의 풀네임은 ECMAScript인데, 여기서 ECMA는 유럽컴퓨터제조협회(European Computer Manufacturer Association)의 약자이고, 뒤따르는 숫자는 세대이므로 ES5는 ECMAScript의 5세대, ES6는 ECMAScript의 6세대이다. .
그렇다면 ES1에서 ES4까지의 버전이 자주 들리지 않는 이유는 무엇입니까?
주된 이유는 1997년 ES1이 등장한 후에도 여전히 간단한 기능이 구현되었기 때문입니다. ES2, ES3, ES4는 각각 일부 문제를 수정하거나 정규식 및 문자열 처리를 추가한 2009년 ES5가 등장했을 때 정말 많은 기능이 추가되었습니다. 확장 배열 메서드, 객체 속성, JSON을 포함한 함수.
자바스크립트ES6
ES6는 2015년에 등장하여 편리하고 유용한 기능을 많이 추가했으며, 이는 다양한 유형의 JavaScript 애플리케이션에서도 구현됩니다.
역사적 맥락을 깊이 있게 이해하고 싶은 독자가 있다면 다음을 참고해도 좋다.
var, let, const의 차이점
1. 바르
Var는 ES5의 초기 선언 방법으로 var를 사용하여 선언할 수 있으며 함수 범위 또는 전역 범위입니다.
2. 하자
let은 ES6에서 비교적 최근에 사용된 선언 방법입니다. let을 사용하여 선언할 수 있습니다. 정적 변수 범위(어휘 변수 범위)를 구현하는 것 외에도 중괄호를 사용하면 프로그램 블록(코드 블록)도 생성됩니다. let 선언에서 이 변수는 블록 범위(블록 범위)가 됩니다.
3. 불변
const는 ES6에서 비교적 최근에 선언된 방법입니다. const를 사용하여 선언할 수 있으며 블록 영역(블록 범위)입니다.
const와 let의 가장 큰 차이점은 const는 재할당되지 않는 값이라는 것입니다.
var와 let의 차이점
신속하게 두 코드를 사용하여 차이점을 표시합니다. 먼저 ES5에서 var를 사용하여 판별자에서 다시 선언한 후에도 판별자(Code Block)에 코드 블록을 그대로 두고 변수가 여전히 코드 블록에 선언되어 있는 것을 확인할 수 있습니다. 값.
var input = "Global"; if(input){ var input = "Block"; console.log("input"); // 변수 Block이 출력됩니다. } console.log("input"); 블록이 출력됩니다
ES6에서 다시 선언을 위해 let을 사용하면 판별식에서 다시 선언된 후 영향 범위는 프로그램 블록(Code Block)에만 있고 변수는 외부 전역 변수(global)에 영향을 미치지 않음을 알 수 있습니다. 변하기 쉬운)
let input = "Global"; if(input){ let input = "Block"; console.log("input"); // 블록이 출력됩니다. } console.log("input");
위의 예를 통해 ES5의 var 선언이 블록에 선언되어 동일한 이름의 다른 변수를 오염시키는 것을 확인할 수 있습니다. 따라서 이제 주류 선언에서는 선언에 let 또는 const를 사용합니다.
템플릿 리터럴
여기서 사용되는 것은 MDN 웹 는 고유명사이며, 중국어 번역을 사용하지만, 어떤 곳에서는 템플릿 문자열(Template String)이라고도 합니다.
전통적인 JavaScript 구문에서는 더하기 기호를 사용하여 문자열을 연결합니다. 그러나 이 전통적인 구문은 매우 직관적이지 않습니다.
console.log("안녕하세요. 이것은 "+ 이름 + "이고 내 전화번호는" + PhoneNumber입니다)
템플릿 리터럴 구문이 나타난 후 백틱을 사용하여 문자열을 묶고 글꼴 크기와 중괄호 ${}를 통해 문자열에 변수를 배치할 수 있습니다. 위 코드를 다시 작성하면 다음과 같습니다.전체 문자열이 더욱 간결해지고 이해하기 쉬워지는 것을 확인할 수 있습니다.
console.log(`안녕하세요. 저는 ${이름}이고 제 전화번호는 ${PhoneNumber}입니다`)
화살표 기능
선언(정의)
전통적인 ES5 구문에서는 선언하는 데 다음 구문이 사용됩니다. 선언할 시작 부분에 함수 이름이 이어지며, 함수 내에서 구현을 중괄호로 묶습니다.
function printHelloWorld() { console.log("Hello World") } var printHelloWorld = function() { console.log("Hello World") }
선언하는 또 다른 방법은 먼저 변수를 선언한 다음 변수에 함수를 할당하는 함수 표현식(Function Expression)입니다.
감아 올리기
여기서는 함수에 대한 개념에 대해서도 이야기합니다. 함수 선언과 함수 지정이라는 두 가지 선언 방법이 있습니다. 함수 선언에서는 호이스트(Hoist)되지만 함수 사양에서는 그렇지 않습니다.
printHelloWorld() function printHelloWorld() { console.log("Hello World") } // 이 방법으로 실행하면 문제가 없습니다. printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } // 이렇게 실행하면 문제가 발생합니다
매개변수 전달
전통적인 ES5에서는 매개변수가 함수에 전달될 수 있습니다. 여기서 공식 명사는 인수(Argument)입니다.
function printHello(name) { console.log(`안녕하세요, 내 이름은 ${name}`) } printHello("호건")
그런데 함수를 사용할 때 인수값이 주어지지 않는다면 어떻게 될까요?
표시됩니다 안녕하세요. 제 이름은 미정입니다.
ES6에서는 함수 기본값도 제공되는데, 함수 선언문의 값에 직접 인용문을 대입하면 문제를 피할 수 있습니다.
function printHello(name = "Hogan") { console.log(`안녕하세요, 내 이름은 ${name}`) } printHello() // 안녕하세요, 제 이름은 호건입니다 printHello("Bo Bo") // 안녕하세요, 내 이름은 보보
화살표 기능
Arrow Function은 ES6의 새로운 기능 중 하나입니다. function 키워드를 사용하지 않거나 함수 이름과 반환 값을 제공하지 않고도 함수를 선언할 수 있습니다.
향후 React 구현에서는 화살표 기능이 매우 중요하고 사용하기 쉬운 기능이므로 매우 자주 사용될 것입니다.
다음은 키워드 function 및 return을 포함하는 전통적인 ES5 함수 선언 방법입니다.
var printHello = function(name) { return ("Hello " + 이름) } console.log(printHello("Hogan"))
Arrow Function을 통해 다음과 같이 다시 작성할 수 있습니다.
const printHello = (이름) => `Hello ${이름}` console.log(printHello("Hogan"))
결론
이 기사에서는 JavaScript ES6의 몇 가지 새로운 기능과 개념을 소개하고 프로그램 코드를 사용하여 설명합니다.
독자가 React 프런트엔드 프레임워크 구문을 입력하기 전에 원래 JavaScript 구문을 검토할 수 있도록 하십시오.
제안사항이나 질문이 있으시면 메시지를 남겨주세요!
React Vernacular Movement 시리즈의 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~
다른 기사 참조
대기업이 Nx를 사용하는 이유는 무엇입니까? Monorepo 도구는 5분 안에 빠르게 설정할 수 있습니다.
한국어 
繁體中文 
English 
简体中文 
日本語 
Español