JavaScript 코드를 ES6 구문 가이드로 변경하는 방법을 가르쳐주세요.

아래 편집기는 JavaScript 코드를 ES6 구문으로 변경하는 방법에 대한 불완전한 가이드(공유)를 제공합니다. 편집자님도 꽤 괜찮다고 하셔서 이제라도 전해드리고 참고용으로 드리고 싶습니다. 에디터와 함께 구경해보세요

목차

* 核心例子
* 修改成静态变量（const）或块级变量（let）
 * 开始修改
 * 疑问解释（重复定义会发生什么）
 * 疑问解释（let的块级作用域是怎样的）
 * 疑问解释（const定义的变量在基础数据类型和引用类型中的差异）
* 修改成Promise的形式
 * 预备知识（回调函数是什么）
 * 预备知识（如何把回调函数改为Promise）
 * 开始修改
* 修改成箭头函数（Arrow Function）
 * 预备知识（箭头函数是什么）
 * 预备知识（箭头函数函数中的this是个坑）
 * 开始修改
* 修改拼接字符串成模板字符串
 * 预备知识（字符串的拼接方式）
 * 预备知识（改为模板字符串的方式）
 * 开始修改
* 修改成解构的对象
* 修改成Class

핵심 예제

기사에 나온 예제는 최신 크롬에서 테스트해 보시기 바랍니다. ES6를 ES5로 변환하기 위한 환경 구성은 이 기사의 범위를 벗어납니다.

// 定义一个学生构造函数
var People = function(name, age) {
 this.name = name
 this.age = age
}

// 创建小明实例
var xiaoming = new People('xiaoming', 18)

// 定义一个考试函数
// 定义两个回调函数，在适当的时候把参数传进去
var examStart = function(callbackSucc, callbackFail) {
 var result = prompt('1+5=')
 if(result === '6') {
 callbackSucc('Awesome. Your answer is ' + result)
 }
 else {
 callbackFail('You can try again. Your answer is ' + result)
 }
}

// 开始考试
// 传入的两个回调函数分别处理结果
examStart(function(res) {
 console.log(res)
}, function(res) {
 console.log(res)
})

정적 변수(const) 또는 블록 수준 변수(let)로 수정

변수 값을 수정해야 하는 경우 블록 수준 변수(let)를 사용해야 합니다. 다른 경우에는 정적 변수(const)를 사용합니다.

정적 변수(const)이든 블록 수준 변수(let)이든 반복적으로 정의할 수 없으며, 그렇지 않으면 오류가 보고됩니다.

정적 변수(const)가 정의되면 데이터 유형을 변경할 수 없습니다. 그러나 Array 및 Object와 같은 참조 유형은 해당 프로토타입 메서드를 사용하여 내부 데이터에 대해 작업을 수행할 수 있습니다.

수정 시작

여기서 정의한 변수는 수정할 필요가 없으므로 모두 const로 변경하면 됩니다. 프로젝트에는 const로 변경할지, let으로 변경할지 결정하는 트릭이 있습니다. 에디터의 변수 확인 기능을 사용할 수 있습니다(예를 들어 sublime에서는 변수 이름을 더블클릭한 후 Ctrl+D). 그런 다음 코드에서 변수에 값이 할당되었는지 확인하고, 자신의 판단에 따라 변수를 수정해야 하는지 여부를 확인합니다.

// 修改一 var ==> const
const Student1 = function(name, age) {
 this.name = name
 this.age = age
}

// 修改二 var ==> const
const xiaoming1 = new Student1('xiaoming', 18)

// 修改三 var ==> const
const examStart1 = function(callbackSucc, callbackFail) {
 // 修改四 var ==> const
 const result = prompt('1+5=')
 if(result === '6') {
 callbackSucc('Awesome. Your answer is ' + result)
 }
 else {
 callbackFail('You can try again. Your answer is ' + result)
 }
}

examStart1(function(res) {
 console.log(res)
}, function(res) {
 console.log(res)
})

질문 설명(정의를 반복하면 어떻게 될까요?)

const author = 'bw2'
const author = 'bw3' // Uncaught SyntaxError: Identifier 'author' has already been declared
let author = 'bw4' // Uncaught SyntaxError: Identifier 'author' has already been declared

질문 설명(let의 블록 수준 범위는 무엇인가요)

// let定义的变量存在块级作用域
if(true) {
 let test1 = 2333
}
console.log(test1) // Uncaught ReferenceError: t is not defined


// var定义的变量不存在，会直接成为全局变量
if(true) {
 var test2 = 2333
}
console.log(test2) // 2333

질문 설명(const 정의 변수 기본 데이터에 있음 유형과 참조 유형의 차이)

예제를 시작하기 전에 다음 기본 데이터 유형을 검토하세요. 숫자, 문자열, 부울, null, 정의되지 않음, 기호. 그 중 ES6에서는 Symbol이 새롭게 추가되었습니다. 기본 데이터 유형을 제외하면 모두 참조 유형입니다. 일반적인 참조 유형은 Array와 Object입니다.

// const定义的变量值是基础数据类型时，不能修改值，也不能修改类型
const num = 2333
num = 2334 // Uncaught TypeError: Assignment to constant variable.
num = '' // Uncaught TypeError: Assignment to constant variable.

// const定义的变量值是引用类型时，可以修改值
const obj = {}
obj.test = 2333
console.log(obj.test) // 2333

const arr = []
arr.push(1)
console.log(arr) // [1]

Promise 형태로 수정

애플리케이션 관점에서 Promise의 주요 기능은 콜백 기능을 체인 콜 모드로 변경하는 것입니다.

여러 개의 중첩된 콜백 함수가 있는 경우 코드에 들여쓰기 수준이 많아 읽기에 도움이 되지 않습니다. 이때 Promise가 무대에 등장합니다.

콜백 함수가 하나만 있고 오류 처리가 포함되지 않은 경우 Promise 형식으로 수정하지 않는 것이 좋습니다.

사전 지식(콜백 함수란 무엇인가)

콜백 함수는 함수를 정의하는 것을 말하며 전달되는 매개변수가 함수입니다. 그런 다음 함수의 특정 위치에서 전달된 함수를 실행하고 필요한 데이터를 매개변수로 전달합니다. 콜백 함수는 비동기 프로그래밍에서 일반적입니다. NodeJS에서 Ajax 요청 및 비동기 파일 작업 전송 등이 있습니다. 보는 것이 듣는 것보다 낫습니다. 가장 간단한 예를 살펴보겠습니다.

// 定义一个支持传入回调函数的函数
function fun1(callback) {
 // 执行传入的函数，并将值2333作为参数传入
 callback(2333)
}

// 执行定义的函数
fun1(function(res){
 // 输出传入的参数
 console.log(res)
})

사전 지식(콜백 함수를 Promise로 변경하는 방법)

예시일 뿐이며, 오류 처리가 포함되지 않은 경우에는 Promise로 변경하지 않는 것이 좋습니다.

function fun2() {
 // 在函数中返回一个Promise对象
 // resolve和reject都是函数
 return new Promise(function(resolve, reject){
 // resolve函数中的参数将会出现在.then方法中
 // reject函数中的参数将会出现在.ctch方法中
 resolve(2333)
 })
}

fun2().then(function(res){
 console.log(res) // 2333
})

수정 시작

Promise는 해결 및 거부를 사용하여 각각 체인 호출의 .then 및 .catch 메서드에 올바른 결과와 오류 프롬프트를 배치합니다.

const examStart2 = function() {
 // 返回一个Promise对象
 return new Promise(function(resolve, reject) {
 var result = prompt('1+5=')
 if(result === '6') {
  resolve('Awesome. Your answer is ' + result)
 }
 else {
  reject('You can try again. Your answer is ' + result)
 }
 })
}
examStart2()
.then(function(res) {
 console.log(res)
})
.catch(function(err) {
 console.log(err)
})

화살표 함수로 수정하기(화살표 함수)

사전 지식(화살표 함수란 무엇인가)

화살표 함수는 함수 구조를 단순화하는데 도움을 주는 작은 도구입니다.

// 普通函数形式
const add1 = function(a, b) {
 return a + b
}
add1(1, 2) // 3

// 箭头函数形式
const add2 = (a, b) => a + b
add2(1, 2) // 3

사전 지식(화살표 함수에 있는 이 부분이 함정)

// 箭头函数没有独立的this作用域
const obj1 = {
 name: 'bw2',
 showName: () => {
 return this.name
 }
}
obj1.showName() // ""

// 解决方案：改为function模式
const obj2 = {
 name: 'bw2',
 showName: function() {
 return this.name
 }
}
obj2.showName() // "bw2"

수정 시작

var examStart3 = function() {
 // 修改一
 return new Promise((resolve, reject) => {
 var result = prompt('1+5=')
 if(result === '6') {
  resolve('Awesome. Your answer is ' + result)
 }
 else {
  reject('You can try again. Your answer is ' + result)
 }
 })
}
// 修改二
examStart3().then((res) => console.log(res)).catch((err) => console.log(err))

접합 수정 ​​문자열을 템플릿 문자열로

예비 지식(문자열 이어붙이는 방법)

const xh1 = 'xiaohong'
console.log('I\'m ' + xh1 + '.') // I'm xiaohong.

기초 지식(템플릿 문자열로 변경하는 방법)

문자열 템플릿은 더 이상 작은 따옴표를 사용하지 않고 영어 입력 상태` 키입니다. (ESC 아래에 있는 것).

const xh2 = 'xiaohong'
console.log(`I'm ${xh2}.`) // I'm xiaohong.

수정 시작

var examStart4 = function() {
 return new Promise((resolve, reject) => {
 var result = prompt('1+5=')
 if(result === '6') {
  // 修改一
  resolve(`Awesome. Your answer is ${result}`)
 }
 else {
  // 修改二
  reject(`You can try again. Your answer is ${result}`)
 }
 })
}
examStart4().then((res) => console.log(res)).catch((err) => console.log(err))

구조 해제된 객체로 수정

객체 구조 해제는 NodeJS가 패키지에서 모듈을 가져올 때 자주 사용됩니다. 직접 작성한 개체의 경우 해체해야 하는 경우 개체의 이름이 충돌을 일으키지 않고 해체되도록 해야 합니다. 이는 예시의 편의를 위한 것이며 매우 고유한 이름은 사용되지 않습니다.

const People2 = function(name, age) {
 this.name = name
 this.age = age
}
const xiaoming2 = new People2('xiaoming2', 18)

// 开始结构
const {name, age} = xiaoming2
// 现在可以独立访问了
console.log(name) // xiaoming2
console.log(age) // 18

이 Class

로 수정되었습니다. 클래스는 구문론적 설탕이지만 이것이 우리가 그것을 먹는 것을 방해하지는 않습니다.

React에서 템플릿의 정의는 대개 클래스이고, 생명주기 메서드도 클래스에 작성됩니다.

class People3 {
 constructor(name, age){
 this.name = name
 this.age = age
 }
 showName() {
 return this.name
 }
}

const xiaoming3 = new People3('xiaoming3', 18)
console.log(xiaoming3) // People {name: "xiaoming3", age: 18}
console.log(xiaoming3.showName()) // xiaoming3

충분하지 않나요? 기사가 끝났습니다. 하지만 ES6 탐색과 관련하여 계속해서 업데이트를 저장할 예정입니다.

위 내용은 JavaScript 코드를 ES6 구문 가이드로 변경하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!