JavaScript ES6 の 5 つの最も重要な機能を見てみましょう-jsチュートリアル-php.cn

JavaScript ES6 の 5 つの最も重要な機能を見てみましょう

JavaScript ES6 では、多数の新しい言語機能が追加されており、その中には他の言語機能よりも画期的で広く利用できるものもあります。 ES6 クラスのような機能は、目新しいものではありますが、実際には JavaScript でクラスを作成する既存のメソッドに加えられた単なる構文上の砂糖にすぎません。ジェネレーターのような関数は非常に強力ですが、対象のタスクのために予約されています。

過去 12 か月間、さまざまな JavaScript 関連プロジェクトに取り組んできた結果、一般的な JavaScript タスクの実行方法を本当に簡素化するために不可欠な ES6 機能が 5 つ見つかりました。あなたのトップ 5 は私のものと異なる可能性があります。その場合は、最後のコメントセクションで共有していただければ幸いです。＃＃＃＃＃＃始めましょう！

#アロー関数

非同期関数
構造化
デフォルトおよび残りのパラメータ
1) JavaScript アロー関数

ES6 JavaScript の私のお気に入りの新機能の 1 つは、完全な新しい機能ではありませんが、使用するたびに笑顔になる新しい構文です。私はアロー関数について話しています。これは、匿名関数を定義するための非常にエレガントで簡潔な方法を提供します。

つまり、アロー関数はキーワード

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(&#39;click&#39;, () => {
            alert(this.counter) // correctly alerts 15 due to lexical binding of this
        })
    }
};

countup.start();

ログイン後にコピー

従来の匿名関数と比較すると、this

の値は、それが定義されているコンテキストに応じて変化します。上記の例で

this.counter を参照しようとすると、結果は 未定義 となり、動的バインディングの複雑さに慣れていない多くの人を混乱させる可能性があります。アロー関数を使用すると、this の値は常に予測可能で、簡単に推測できます。 アロー関数の詳細な説明については、「JavaScript アロー関数の概要」を参照してください。

2) JavaScript Promises

JavaScript ES6 Promise により、非同期タスクの処理が次のようになります。線形ですが、これはほとんどの最新の Web アプリケーションのタスクです。コールバック関数に依存するのではなく、jQuery などの JavaScript フレームワークによって普及しました。 JavaScript Promise は、非同期イベントを追跡し、応答するための中央の直感的なメカニズムを使用します。非同期コードのデバッグが容易になるだけでなく、コードを書くのも楽しくなります。

すべての JavaScript Promise は、

Promise()

コンストラクターで始まり、終わります。

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

ログイン後にコピー

内部では、resolve()

と

replace() が使用されます。 メソッドでは、Promise が完了または拒否されたときに、それぞれ Promise オブジェクトにシグナルを送信できます。 then() メソッドと catch() メソッドを呼び出して、Promise が完了または拒否された後の作業を処理できます。 私は、XMLHttpRequest 関数に挿入された次の Promise のバリアントを使用して、外部ファイルのコンテンツを 1 つずつ取得します。

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(&#39;test.txt&#39;).then((msg) => {
    console.log(msg) // echos contents of text.txt
    return getasync(&#39;test2.txt&#39;)
}).then((msg) => {
    console.log(msg) // echos contents of text2.txt
    return getasync(&#39;test3.txt&#39;)
}).then((msg) => {
    console.log(msg) // echos contents of text3.txt
})

ログイン後にコピー

Promise チェーンや並列実行 Promise については、「Promise の初心者ガイド」をお読みください。

3) JavaScript 非同期関数

JavaScript Promise に加えて、非同期関数は従来の非同期コード構造をさらに書き換えて読みやすくしています。セックス。非同期プログラミング機能を備えたコードをクライアントに見せるとき、最初の反応は常に驚きであり、次にそれがどのように機能するかを理解したいという好奇心が続きます。

非同期関数は 2 つの部分で構成されます:

async

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">async function fetchdata(url){ // Do something // Always returns a promise }</pre><div class="contentsignin">ログイン後にコピー</div></div> というプレフィックスが付いた通常の関数2) 非同期関数 (Async 関数) で、

await

キーワードを使用して、非同期操作関数 例は百聞は一見に如かずです。以下は、代わりに Async 関数

を使用するために上記の例に基づいて書き直された Promise です:

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(&#39;test.txt&#39;)
    console.log(text1)
    var text2 = await getasync(&#39;test2.txt&#39;)
    console.log(text2)
    var text3 = await getasync(&#39;test3.txt&#39;)
    console.log(text3)
    return "Finished"
}

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

ログイン後にコピー

上記の例を実行すると、「test.txt」、「test2.txt」が出力されます。 "、"test3 .txt"、そして最後に "Finished" となります。

ご覧のとおり、非同期関数では、非同期関数

getasync()

を同期関数呼び出しとして扱います。

then() メソッドやコールバック関数次のステップに進むための通知。キーワード await が見つかると、getasync() が解決されるまで実行が一時停止されてから、非同期関数の次の行に進みます。結果は、多数の then メソッドを使用した、純粋な Promise ベースの場合と同じになります。

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

4) JavaScript 解构

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

嵌套对象解构

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

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

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

ログイン後にコピー

解构数组

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

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

ログイン後にコピー

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

var soccerteam = [&#39;George&#39;, &#39;Dennis&#39;, &#39;Sandy&#39;]
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 &#39;The Lucky Numbers for &#39; + date + &#39; are: &#39; + lucknumbers.join(&#39;, &#39;)
}

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

ログイン後にコピー

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