ES6

ES6

Lembar contekan referensi singkat tentang apa yang baru dalam JavaScript untuk ES2015, ES2016, ES2017, ES2018, dan seterusnya

Block-scoped

Biarkan

fungsi fn () {
  let x = 0
  if (true) {
    let x = 1 // hanya di dalam `if` ini
  }
}

Const

const a = 1

let adalah var yang baru. Konstanta (const) bekerja seperti let, tetapi tidak dapat dipindahkan. Lihat: Let dan const

Template String

Interpolasi

const message = `Halo ${nama}`

String multi-baris

const str = `
halo
dunia
`

Templat dan string multiline. Lihat: string templat

Literal biner dan oktal

let bin = 0b1010010
let oct = 0o755

Lihat: Biner dan Oktal Literal

Operator Eksponensial

const byte = 2 **8

Sama seperti: Math.pow(2, 8)

Penambahan pustaka baru

Metode string baru

"halo".repeat(3)
"halo". includes("akan")
"halo". startsWith("he")
"halo".padStart(8) // "halo"
"halo".padEnd(8) // "halo"
"halo".padEnd(8, '!') // halo!!!
"\u1E9B\u0323".normalize("NFC")

Metode Nomor Baru

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Metode Matematika Baru

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) -1, Math.pow(2, 32) -2) // 2

Metode-metode Larik Baru

//mengembalikan larik nyata
Array.from(document.querySelectorAll("*"))
//mirip dengan new Array(...), tetapi tanpa perilaku argumen tunggal khusus
Array.of(1, 2, 3)

Lihat: [Penambahan pustaka baru] (https://babeljs.io/learn-es2015/#math--number--string--object-apis)

jenis

class Lingkaran extends Bentuk {

Konstruktor

konstruktor (radius) {
  this.radius = radius
}

metode

getArea () {
  return Math.PI * 2 * this.radius
}

Panggil metode superclass

expand(n) {
  return super.expand(n) *Math.PI
}

Metode statis

static createFromDiameter(diameter) {
  return new Circle(diameter /2)
}

Gula sintaksis untuk prototipe. Lihat: classes

Kelas pribadi

Kolom default javascript adalah publik (public), jika Anda perlu menunjukkan privat, Anda dapat menggunakan (#)

class Anjing {
  #nama
  konstruktor (nama) {
    this.#nama = nama;
  }
  printNama() {
    // Hanya field pribadi yang bisa dipanggil di dalam kelas
    console.log(`Nama Anda adalah ${this.#nama}`)
  }
}

const dog = new Dog("dempul")
//console.log(this.#nama)
//Pengenal pribadi tidak diperbolehkan di luar badan kelas.
dog.printName()

Kelas privat statis

class ClassWithPrivate {
  static #privateStaticField;
static #privateStaticFieldWithInitializer = 42;

  static #privateStaticMethod() {
    // ...
  }
}

Janji

membuat komitmen

new Promise((resolve, reject) => {
  if (ok) { resolve(hasil) }
  else { tolak (error) }
})

untuk pemrograman asinkron. Lihat: Janji-janji

Menggunakan Janji

promise
  .then((hasil) => { --- })
  .catch((error) => { --- })

Menggunakan Janji dalam akhirnya

promise
  .then((hasil) => { --- })
  .catch((error) => { --- })
  .finally(() => {
    /*logika tidak bergantung pada keberhasilan/kesalahan */
  })

Handler dipanggil ketika janji dipenuhi atau ditolak

Fungsi janji

Promise.all(---)
Promise.race(---)
Promise.reject(---)
Promise.resolve(---)

Async-tunggu

fungsi asinkronisasi run () {
  const user = await getUser()
  const tweets = await getTweets(user)
  return [user, tweets]
}

Fungsi async adalah cara lain untuk menggunakan fungsi. Lihat: Fungsi Asinkronisasi

Penghancuran

Penugasan destrukturisasi

Array

const [first, last] = ['Nikola', 'Tesla']

Objek

let {judul, penulis} = {
  title: 'Ulat Sutra',
  penulis: 'R. Galbraith'
}

Mendukung pencocokan larik dan objek. Lihat: Destructuring

Default

const nilai = [22, 33]
const [math = 50, sci = 50, arts = 50] = nilai

//Result:
//math === 22, sci === 33, arts === 50

Nilai default dapat ditetapkan saat mendestrukturisasi larik atau objek

Parameter fungsi

function menyapa({ nama, salam }) {
  console.log(`${salam}, ${nama}!`)
}

menyapa ({ nama: 'Larry', sapaan: 'Ahoy' })

Destrukturisasi objek dan larik juga dapat dilakukan dalam parameter fungsi

Default

function menyapa({ nama = 'Rauno' } = {}) {
  console.log(`Hai ${nama}!`);
}

greet() // Hai Rauno!
greet({ name: 'Larry' }) // Hai Larry!

Menetapkan ulang kunci

function printCoordinates({ left: x, top: y }) {
  console.log(`x: ${x}, y: ${y}`)
}

printCoordinates({ left: 25, top: 90 })

Contoh ini menetapkan x ke nilai kunci kiri

Perulangan

for (let {judul, artis} dari lagu) {
  ---
}

Ekspresi penugasan juga berfungsi dalam perulangan

Dekonstruksi Objek

const { id, ... detail } = lagu;

Gunakan operator rest(...) untuk mengekstrak beberapa kunci satu per satu dan kunci lainnya di dalam objek

Operator Penyebaran Penyebaran

Ekstensi Objek

dengan ekstensi objek

const options = {
  ... default,
  visible: true
}

Tidak ada ekstensi objek

const options = Object.assign(
  {}, defaults,
  { visible: true })

Operator penyebaran objek memungkinkan Anda membuat objek baru dari objek lain. Lihat: Penyebaran Objek

Perluasan Larik

dengan ekstensi larik

const users = [
  ... admin,
  ... editor,
  'rstacruz'
]

Tidak ada ekspansi larik

const users = admins
  .concat(editor)
  .concat([ 'rstacruz' ])

Operator spread memungkinkan Anda untuk membuat larik baru dengan cara yang sama. Lihat: Operator penyebaran

Fungsi

Parameter fungsi

Parameter default

function menyapa (nama = 'Jerry') {
  return `Halo ${nama}`
}

Parameter istirahat

function fn(x, ... y) {
  // y adalah sebuah array
  return x * y.length
}

Ekstensi

fn(...[1, 2, 3])
//sama seperti fn(1, 2, 3)

Default (bawaan), istirahat, penyebaran (ekstensi). Lihat: parameter fungsi

Fungsi panah

Fungsi panah

setTimeout(() => {
  ---
})

dengan parameter

readFile('text.txt', (err, data) => {
  ...
})

pengembalian implisit

arr.map(n => n*2)
//tidak ada kurung kurawal = pengembalian implisit
//Sama seperti: arr.map(function (n) { return n*2 })
arr.map(n => ({
  hasil: n*2
}))
//Pengembalian objek secara implisit membutuhkan tanda kurung di sekitar objek

Seperti sebuah fungsi, tetapi mempertahankan ini. Lihat: Fungsi Panah

Nilai default pengaturan parameter

function log(x, y = 'World') {
  console.log(x, y);
}

log('Halo') // Halo Dunia
log('Halo', 'China') // Halo China
log('Halo', '') // Halo

Digunakan bersama dengan destrukturisasi penugasan default

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // tidak terdefinisi 5

atribut nama

function foo() {}
foo.name // "foo"

Properti panjang ### panjang

fungsi foo(a, b){}
foo.length // 2

Objek

Sintaksis Singkatan

module.exports = { halo, selamat tinggal }

sama di bawah ini:

module.exports = {
  halo: halo, selamat tinggal: selamat tinggal
}

Lihat: Objek Literal yang Disempurnakan

Metode ###

const App = {
  start () {
    console.log('running')
  }
}
//Sama seperti: App = { start: function () {---} }

Lihat: Literal Objek yang Disempurnakan

Pengambil dan pengatur

const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (nilai) {
    this.status = nilai ? 'tertutup' : 'terbuka'
  }
}

Lihat: Objek Literal yang Disempurnakan

Nama properti yang dihitung

let event = 'klik'
let handlers = {
  [`on${event}`]: true
}
//Sama seperti: handlers = { 'onclick': true }

Lihat: Object Literals yang Disempurnakan

Ekstrak nilai

const fatherJS = { umur: 57, nama: "Zhang San" }
Object.values(fatherJS)
//[57, "Zhang San"]
Object.entries(fatherJS)
//[["umur", 57], ["nama", "Zhang San"]]

Modul modul

Impor impor

import 'helpers'
//aka: require('---')

import Express dari 'express'
//aka: const Express = require('---').default || require('---')

import { indent } from 'helpers'
//aka: const indent = require('---').indent

import * as Helpers from 'helpers'
//aka: const Helpers = require('---')

import { indentSpaces as indent } from 'helpers'
//aka: const indent = require('---').indentSpaces

import adalah require() yang baru. Lihat: [Impor modul] (https://babeljs.io/learn-es2015/#modules)

Ekspor ekspor

ekspor fungsi default () { --- }
//aka: module.exports.default = ---

fungsi ekspor mymethod () { --- }
//aka: module.exports.mymethod = ---

export const pi = 3.14159
//aka: module.exports.pi = ---

const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;
export { nama depan, nama belakang, tahun };

ekspor * dari "lib/math";

export adalah module.exports yang baru. Lihat: Module exports

Penggantian nama kata kunci as

import {
  nama_akhir sebagai nama keluarga // import ganti nama
} from './profile.js';

function v1() { ... }
function v2() { ... }

mengekspor { v1 sebagai default };
//Setara dengan mengekspor default v1;

ekspor {
  v1 sebagai streamV1, // ekspor ganti nama
  v2 sebagai streamV2, // ekspor ganti nama
  v2 as streamLatestVersion // ekspor ganti nama
};

Memuat modul secara dinamis

button.addEventListener('click', event => {
  import('./dialogBox.js')
    .then(dialogBox => {
      dialogBox. open();
    })
    .catch(error => {
      /*Penanganan kesalahan */
    })
});

[Proposal ES2020] (https://github.com/tc39/proposal-dynamic-import) memperkenalkan fungsi import()

import() memungkinkan jalur modul dibuat secara dinamis

const main = document.querySelector('main')

import(`./modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import.meta

ES2020 Menambahkan properti meta import.meta ke perintah import, yang mengembalikan informasi meta dari modul saat ini

URL baru ('data.txt', import.meta.url)

Di lingkungan Node.js, import.meta.url selalu mengembalikan jalur lokal, yaitu string protokol file:URL, seperti file:/// home/user/foo.js

Mengimpor Pernyataan

impor statis

import json from "./package.json" assert {type: "json"}
//Impor semua objek dalam berkas json

Impor Dinamis

const json =
     menunggu impor ("./package.json", { assert: { type: "json" } })

Generator

Fungsi generator

function * idMaker () {
  let id = 0
  while (true) { hasilkan id++ }
}

let gen = idMaker()
gen.next().value // → 0
gen.next().value // → 1
gen.next().value // → 2

itu rumit. Lihat: Generator

For..of + iterator

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // memotong urutan pada 1000
  if (n > 1000) break;
  console.log(n);
}

Untuk mengulang generator dan larik. Lihat: Untuk..iterasi

Hubungan dengan antarmuka Iterator

var gen = {};
gen [Symbol.iterator] = function*() {
  menghasilkan 1
  hasil 2
  hasil 3
};

[... gen] // => [1, 2, 3]

Fungsi Generator ditetapkan ke properti Symbol.iterator, sehingga objek gen memiliki antarmuka Iterator, yang dapat dilalui oleh operator ...

Properti Symbol.iterator

function*gen() { /*beberapa kode */}
var g = gen();

g[Symbol.iterator]() === g // true

gen adalah fungsi Generator, memanggilnya akan menghasilkan objek penjelajah g. Properti Symbol.iterator, yang juga merupakan fungsi penghasil objek iterator, akan dikembalikan setelah eksekusi

lihat juga