JavaScript ES6의 가장 중요한 5가지 기능 살펴보기

JavaScript ES6에는 다양한 새로운 언어 기능이 추가되었으며, 그중 일부는 다른 언어보다 더 획기적이고 더 광범위하게 사용할 수 있습니다. ES6 클래스와 같은 기능은 참신하기는 하지만 실제로는 JavaScript에서 클래스를 생성하는 기존 방법 위에 추가되는 구문 설탕일 뿐입니다. 생성기와 같은 기능은 매우 강력하지만 대상 작업을 위해 예약되어 있습니다.

지난 12개월 동안 다양한 JavaScript 관련 프로젝트를 진행하면서 저는 일반적인 JavaScript 작업이 수행되는 방식을 실제로 단순화하기 때문에 꼭 필요한 5가지 ES6 기능을 발견했습니다. 귀하의 상위 5개 항목은 나와 다를 수 있습니다. 그렇다면 마지막에 있는 댓글 섹션에서 공유해 주시기 바랍니다.

시작해 보세요!

1. 화살표 함수
2. Promises
3. Async 함수
4. Destructuring
5. Default 및 Rest 매개변수

1) JavaScript 화살표 함수

in ES6 JavaScript에서 제가 가장 좋아하는 새로운 기능 중 하나는 완전히 새로운 기능은 아니지만, 사용할 때마다 미소를 짓게 만드는 새로운 구문입니다. 나는 익명 함수를 정의하는 매우 우아하고 간결한 방법을 제공하는 화살표 함수에 대해 이야기하고 있습니다.

간단히 말하면 화살표 함수는 function 키워드를 잃은 다음 화살표 =>를 사용하여 익명 함수의 매개변수 부분과 함수 본문을 분리합니다. function，然后用一个箭头 => 来分离一个匿名函数的参数部分和函数体：

(x, y) => x * y;

这相当于:

function(x, y){
    return x * y;
}

或者:

(x, y) => {
    var factor = 5;
    var growth = (x-y) * factor;
}

完全等价于:

function(x, y){
    var factor = 5;
    var growth = (x-y) * factor;
}

在使用传统的匿名函数时，箭头函数还消除了一个关键的错误源，即函数内的 this 对象的值。使用箭头函数，this 是基于词法绑定，这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式，并且永远不会改变。如果一个箭头函数定义在一个自定义对象 countup 中，this 值毫无疑问地指向 countup。比如：

var countup = {
    counter: 15,

    start:function(){
        window.addEventListener('click', () => {
            alert(this.counter) // correctly alerts 15 due to lexical binding of this
        })
    }
};

countup.start();

对比传统匿名函数，this 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 this.counter，结果将返回 undefined，这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数，this 的值总是可预测并且容易推断的。

对于箭头函数的详细讲解， 请看 “Overview of JavaScript Arrow Functions“.

2) JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性， 这是大多数现代Web应用程序中的一项任务。 而不是依靠回调函数 —— 通过JavaScript框架（如jQuery）普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易，而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

const mypromise = new Promise(function(resolve, reject){
 // 在这编写异步代码
 // 调用 resolve() 来表示任务成功完成
 // 调用 reject() 来表示任务失败
})

在内部使用 resolve() 和 reject() 方法，当一个 Promise 被完成或拒绝时，我们可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用，用以处理完成或拒绝 Promise 后的工作。

我用下面一个被注入 XMLHttpRequest 函数的 Promise 的变种，来一个接一个的检索外部文件内容：

function getasync(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

getasync('test.txt').then((msg) => {
    console.log(msg) // echos contents of text.txt
    return getasync('test2.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text2.txt
    return getasync('test3.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text3.txt
})

要掌握 JavaScript Promises 的关键点，例如 Promise 链和并行执行 Promise，请阅读 “Beginner’s Guide to Promises“.

3) JavaScript 异步函数

除了 JavaScript Promise，异步函数进一步重写了传统的异步代码结构，使其更具可读性。每当我向客户展示带有async 编程功能的代码时，第一个反应总是令人惊讶，随之而来的是了解它是如何工作的好奇心。

一个异步函数由两部分构成:

1) 一个以 async 为前缀的常规函数

async function fetchdata(url){
    // Do something
    // Always returns a promise
}

2) 在异步函数（Async function）内，使用 await 关键字调用异步操作函数

一个例子胜过千言万语。下面是基于上面示例重写的 Promise，以便使用 Async functions代替：

function getasync(url) { // same as original function
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

async function fetchdata(){ // main Async function
    var text1 = await getasync('test.txt')
    console.log(text1)
    var text2 = await getasync('test2.txt')
    console.log(text2)
    var text3 = await getasync('test3.txt')
    console.log(text3)
    return "Finished"
}

fetchdata().then((msg) =>{
    console.log(msg) // logs "finished"
})

上面的例子运行时会输出“test.txt”，“test2.txt”，“test3.txt”，最后是“Finished”。

如你所见，在异步函数中，我们把异步函数 getasync() 当作是同步函数调用 – 没有 then() 方法或回调函数通知进行下一步。无论何时遇到关键字 await，执行都会暂停，直到 getasync() 解决，然后再转到异步函数中的下一行。结果与纯粹的基于 Promise，使用一串 then

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

이것은 다음과 같습니다:🎜

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

🎜또는:🎜

var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details: {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};

var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

🎜정확히 다음과 같습니다:🎜

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

🎜화살표 함수는 또한 전통적인 익명 함수, 즉 함수 /code 내에서 thisthis는 어휘 바인딩을 기반으로 합니다. 이는 해당 값이 상위 범위에 바인딩되고 절대 변경되지 않는다는 멋진 표현일 뿐입니다. 사용자 정의 개체 countup에 화살표 함수가 정의된 경우 this 값은 의심할 바 없이 countup을 가리킵니다. 예: 🎜

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

🎜기존 익명 함수와 비교하면 this 값이 정의된 컨텍스트에 따라 변경됩니다. 위의 예에서 this.counter를 참조하려고 하면 결과는 정의되지 않음이 됩니다. 이 동작은 동적 바인딩의 복잡성에 익숙하지 않은 많은 사람들을 혼란스럽게 할 수 있습니다. 화살표 함수를 사용하면 this의 값은 항상 예측 가능하고 추론하기 쉽습니다. 🎜🎜화살표 함수에 대한 자세한 설명은 "JavaScript 화살표 함수 개요"를 참조하세요.🎜🎜2) JavaScript Promises🎜🎜JavaScript ES6 Promise는 대부분의 현대 웹 애플리케이션에서 나타나는 비동기 작업을 선형적으로 처리합니다. . 콜백 함수에 의존하는 대신 jQuery와 같은 JavaScript 프레임워크로 대중화되었습니다. JavaScript Promise는 비동기 이벤트를 추적하고 응답하기 위한 직관적인 중앙 메커니즘을 사용합니다. 비동기 코드 디버깅이 더 쉬워질 뿐만 아니라 작성도 즐거워집니다. 🎜🎜모든 JavaScript Promise는 Promise() 생성자를 통해 시작하고 끝납니다. 🎜

function getarea(w,h){
  var w = w || 10
  var h = h || 15
  return w * h
}

🎜내부적으로 resolve() 및 reject() 메서드를 사용합니다. Promise가 완료되거나 거부되면 각각 Promise 객체에 신호를 보낼 수 있습니다. 그런 다음 then() 및 catch() 메서드를 호출하여 Promise가 완료되거나 거부된 후 작업을 처리할 수 있습니다. 🎜🎜외부 파일의 내용을 하나씩 검색하기 위해 XMLHttpRequest 함수에 삽입된 Promise의 다음 변형을 사용했습니다. 🎜

function getarea(w=10, h=15){
  return w * h
}
getarea(5) // returns 75

🎜Promise 체이닝 및 Promise 병렬 실행과 같은 JavaScript Promise의 핵심 사항을 익히려면 " "프라미스"에 대한 초보자 가이드.🎜🎜3) JavaScript 비동기 함수🎜🎜JavaScript Promise 외에도 비동기 함수는 기존 비동기 코드 구조를 더 읽기 쉽게 만들기 위해 다시 작성합니다. 클라이언트에게 비동기 프로그래밍 기능이 있는 코드를 보여줄 때마다 첫 번째 반응은 항상 놀라움이었고, 그 다음에는 그것이 어떻게 작동하는지 이해하려는 호기심이 뒤따랐습니다. 🎜🎜비동기 함수는 두 부분으로 구성됩니다. 🎜🎜1) async🎜

function addit(...theNumbers){
  // get the sum of the array elements
    return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) 
}

addit(1,2,3,4) // returns 10

🎜라는 접두사가 붙은 일반 함수 2) 비동기 함수(Async 함수) , await 키워드를 사용하여 비동기 작업 함수를 호출하세요🎜🎜예제는 천 마디 말만큼 가치가 있습니다. 다음은 비동기 함수를 대신 사용하기 위해 위의 예를 기반으로 다시 작성된 Promise입니다. 🎜

function addit(theNumbers){
    // force arguments object into array
    var numArray = Array.prototype.slice.call(arguments) 
    return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}

addit(1,2,3,4) // returns 10

🎜위의 예는 다음과 같은 경우 "test.txt", "test2.txt", "test3.txt"를 출력합니다. run 을 실행하고 마지막으로 "완료"됩니다. 🎜🎜보시다시피 비동기 함수에서는 비동기 함수 getasync()를 동기 함수 호출로 처리합니다. then() 메서드나 콜백 함수는 없습니다. 알림. 다음 단계. await 키워드가 발견될 때마다 비동기 함수의 다음 줄로 이동하기 전에 getasync()가 해결될 때까지 실행이 일시 중지됩니다. 결과는 여러 then 메서드를 사용하는 순전히 Promise 기반과 동일합니다. 🎜

要掌握异步函数，包括如何 await 并行执行函数，请阅读 “Introduction to JavaScript Async Functions- Promises simplified”

4) JavaScript 解构

除了箭头函数，这是我每天使用最多的 ES6 功能。ES6 解构并非一个新功能，而是一个新的赋值语法，可以让您快速解压缩对象属性和数组中的值，并将它们分配给各个变量。

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

这里我用解构快速提取 profile 对象的 name 和 hobby 属性 。

使用别名，你可以使用与你正在提取值的对象属性不同的变量名：

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

嵌套对象解构

解构也可以与嵌套对象一起工作，我一直使用它来快速解开来自复杂的JSON请求的值：

var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details: {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};

var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

解构数组

数组的解构与在对象上的工作方式类似，除了左边的花括号使用方括号代替：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳过某些数组元素，通过使用逗号（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

对我而言，解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。要充分掌握ES6解构的复杂性和潜力，请阅读”Getting to Grips with ES6: Destructuring“.

5) 默认和剩余参数（Default and Rest Parameters）

最后，我最想提出的ES6的两个特性是处理函数参数。几乎我们在JavaScript中创建的每个函数都接受用户数据，所以这两个特性在一个月中不止一次地派上用场。

默认参数（Default Parameters）

我们都使用过一下模式来创建具有默认值的参数：

function getarea(w,h){
  var w = w || 10
  var h = h || 15
  return w * h
}

有了ES6对默认参数的支持，显式定义的参数值的日子已经结束：

function getarea(w=10, h=15){
  return w * h
}
getarea(5) // returns 75

关于 ES6 默认参数的更多详情 在这.

剩余参数（Rest Parameters）

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

function addit(...theNumbers){
  // get the sum of the array elements
    return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) 
}

addit(1,2,3,4) // returns 10

通过在命名参数前添加3个点 ...，在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 我们不得不做一些复杂的操作比如 手动将参数转换为数组 ：

function addit(theNumbers){
    // force arguments object into array
    var numArray = Array.prototype.slice.call(arguments) 
    return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}

addit(1,2,3,4) // returns 10

Rest parameters 只能应用于函数的参数的一个子集，就像下面这样，它只会将参数从第二个开始转换为数组：

function f1(date, ...lucknumbers){
    return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
}

alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"

对于 ES6 中 Rest Parameters 完整规范，看这里.

结论

你同意我所说的 ES6 特性的前五名吗？哪个是你最常用的，请在评论区和大家分享。

推荐教程：《javascript基础教程》

위 내용은 JavaScript ES6의 가장 중요한 5가지 기능 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!