オリジナルJavaScript ES 6～ES 10の魅力を味わう

フロントエンドの開発エンジニアとしては、フレームワークを盲目的に追うのは、基本的な技術を知っている必要があります.JavaScriptの文法はここ数年更新されています.私たちは枠組みの核心開発者であろうと、業務再生者であろうと、最新のJavaScriptの文法と能力を勉強するのはとてもいいです.いくつかの例を通して、新しい文法の強みを見てみましょう.
「1つの配列を初期化します.配列の長さは5で、各要素のデフォルト値は0です.」
この問題はとても簡単に見えるので、コードを書きにくるかもしれません.

const arr = []
for(let i = 0; i < 5; i++){
  arr.push(0)
}

しかし、ES 6の文法を勉強したことがあると、Arayの新たなプロトタイプのオブジェクト方法にはfillのAPIがあり、このテーマは簡単に実現できます.コードは以下の通りです.

const arr = Array(5).fill(0)

これは新しい文法であり、JavaScriptに新しい能力を与えています.新しい文法を続けて勉強しないと、書いたコードが一番簡単で優雅で、性能が一番いいです.もちろん、他の学生やソースコードを読むときにも読めます.ES 6はいったいどのような能力が追加されましたか?図を見に来ました.
このスペクトルからはES 6は多くの新しい文法が追加されています.例えば、クラス、Generator、Proxy、Iteratorなどです.これらはクラス、非同期、エージェント、カスタマイズ遍歴などの機能を解決できます.もう少し例を見てみましょう.
実現クラスと継承.
ES 6の前に達成されるクラスと継承は、関数によって達成され、継承においてもプロトタイプチェーンが利用される.コードは以下の通りです

function Component () {
  this.id = Math.random().toString(36).slice(-5)
  Object.defineProperty(this, 'id', {
    writable: false
  })
}
const com = new Component()
com.id = 3
console.log(com.id) // jklls

このコードの意味はコンポーネントクラスを定義し、クラスは属性IDを定義しています.このidはランダムで読み取り専用です.ES 6は専門的な文法を持ってクラスを定義します.

class Component {
  constructor () {
    this.id = Math.random().toString(36).slice(-5)
    Object.defineProperty(this, 'id', {
      writable: false
    })
  }
}
const com = new Component()
com.id = 3
console.log(com.id)

意味ではES 6の書き方を見ると読みやすいです.信じません.継承の書き方を見ています.

function Component () {
  this.id = Math.random().toString(36).slice(-5)
  Object.defineProperty(this, 'id', {
    writable: false
  })
}
function SubComponent () {
  Component.call(this)
}
SubComponent.prototype = Component.prototype
const com = new SubComponent()
com.id = 3
console.log(com.id)

class Component {
  constructor () {
    this.id = Math.random().toString(36).slice(-5)
    Object.defineProperty(this, 'id', {
      writable: false
    })
  }
}

class SubComponent extends Component {

}
const com = new SubComponent()
com.id = 3
console.log(com.id)

上と下のコードの対比はES 6の方式がよくて、読みやすいです.この問題を通して、ES 6という書き方はまだ最適化されていますか?たとえばObject.definePropertyの方法はコンストラクションの中でそんなにしっくりしないことに見えます.もっと上品な書き方がありますか?ES 6の新しい文法Proxyを試してみませんか?

class Component {
  constructor () {
    this.proxy = new Proxy({
      id: Math.random().toString(36).slice(-5)
    }, {})
  }
  get id () {
    return this.proxy.id
  }
}
const com = new Component()
com.id = 3
console.log(com.id)

ProxyとClass getter方式を利用すれば、idは読み取り専用であり、proxyの実装時にもid「ランダム」「唯一」が保証されます.このコードには穴があるとクラスメートが言っています.proxyはidを修正してもいいです.そうです.でも、proxyの能力を過小評価しました.また見てください.

class Component {
  constructor () {
    this.proxy = new Proxy({
      id: Math.random().toString(36).slice(-5)
    }, {
      set (target, key, value) {
        return false
      }
    })
  }
  get id () {
    return this.proxy.id
  }
}
const com = new Component()
com.proxy.id = 4
com.id = 3
console.log(com.id)

proxyの下にはidと同じ内容がたくさん置いてありますので、Object.definePropertyで表示される定義「読み取り専用」は一つもありません.class getter+proxyで「痕跡を見せない」と書いていますが、みなさんはこのような書き方を楽しんでいますか?もちろん、proxyはデータの保護、データチェックなど、活躍の場がたくさんあります.
もし皆さんが満足していないなら、もっと強力な機能を見ましょう.カスタム遍歴.
私たちのデータベースにはたくさんの本が保管されています.これらの作者は図書の種類によって分類します.今はすべての作者を遍歴したいですが、どうすればいいですか?

let authors = {
  allAuthors: {
    fiction: [
      'Agatha Christie',
      'J. K. Rowling',
      'Dr. Seuss'
    ],
    scienceFiction: [
      'Neal Stephenson',
      'Arthur Clarke',
      'Isaac Asimov',
      'Robert Heinlein'
    ],
    fantasy: [
      'J. R. R. Tolkien',
      'J. K. Rowling',
      'Terry Pratchett'
    ]
  }
}

私たちはauthorsを遍歴して、すべての作者のリストを得ることができることを望んでいます.

for (let author of authors) {
  console.log(author)
}

これができればいいですが、ブラウザが間違っています.authorsは遍歴してはいけないと教えてくれます.私たちはすべてのkeyを遍歴することでしか実現できません.

for (let key in authors) {
  let r = []
  for (let k in authors[key]) {
    r = r.concat(authors[key][k])
  }
  console.log(r)
  // ["Agatha Christie", "J. K. Rowling", "Dr. Seuss", "Neal Stephenson", "Arthur Clarke", "Isaac Asimov", "Robert Heinlein", "J. R. R. Tolkien", "J. K. Rowling", "Terry Pratchett"]
}

ES 5の方式で実現しましたが、for...ofの方式で実現したいです.簡単で便利です.ES 6は、任意のデータ構造をカスタマイズエルゴードとして実現できるようにIteratorを追加しました.直接コード:

authors[Symbol.iterator] = function () {
  let allAuthors = this.allAuthors
  let keys = Reflect.ownKeys(allAuthors)
  let values = []
  return {
    next () {
      if (!values.length) {
        if (keys.length) {
          values = allAuthors[keys[0]]
          keys.shift()
        }
      }
      return {
        done: !values.length,
        value: values.shift()
      }
    }
  }
}

私たちはauthorsというデータ構造に対して、Iteratorエルゴードインターフェースを追加するだけで、for...ofの方式で巡回できます.ブラウザはもうエラーを報告しません.ちょっと派手なところがありますか?実はES 6の後にES 7、ES 8、ES 9、ES 10が相次いで誕生し、元のJavaScriptの能力を再び向上させます.
元のJavaScriptの新しい技能を勉強しないと、もっと魅力的な都市を逃してしまいます.一緒にES 6~ES 10を勉強します.