Kandungan
- Fungsi array
- const / let
- Penggabungan nullish ?? dan rangkaian Opsional? .. operator
- Async / Await
- Fungsi panah () => {}
- untuk ... dari
- untuk menunggu ... dari
- Kelas
- dapatkan / set
- fungsi parameter default
- function named parameters
- function rest… parameter
- Destructuring
- Shorthand functions aka Methods
- Promise.all
- Template literals
- Proxy
- Module import/export
( , , )
Array functions
Lihat semua fungsi array asli baru ini. Tidak perlu garis bawah atau lodash lagi.
Array.every ()
Array.filter ()
Array.find ()
Array.findIndex ()
Array.forEach ()
Array.from ()
Array.includes ()
Array.isArray ()
Array.lastIndexOf ()
Array.map ()
Array.reduce ()
Array.reduceRight ()
Array.some ()
Array docs
const / let
Kata kunci baru ini mendeklarasikan variabel dalam lingkup blok (sebagai lawan dari lingkup global atau fungsional). Penggunaan
const
menyiratkan bahwa nilai yang nilainya tidak boleh berubah, tetapi
let
memberikan peluang ini.
Biarkan dokumentasi
?? dan?.
??
memeriksa apakah suatu nilai null atau tidak ditentukan. Tidak perlu digunakan lagi
!!
.
?.
memeriksa apakah suatu nilai benar sebelum memanggil properti atau fungsi berikutnya. Sangat berguna saat menangani alat peraga tambahan.
Dokumentasi rangkaian opsional
let a, b=1
let result = a ?? b
print(result)
result = (a !== null && a !== undefined) ? a : b;
print(result)
print({x:1}?.a?.b ?? "not found")
Async / Await
Kata kunci async / await ada untuk menyelamatkan Anda dari neraka panggilan balik. Gunakan
await
untuk membuat panggilan asinkron terlihat seperti panggilan sinkron, mis. eksekusi
await fetchUserName()
tidak akan maju ke baris berikutnya sampai fetchUserName () selesai. Harap dicatat bahwa untuk menggunakan
await
, Anda harus menjalankan fungsi yang dideklarasikan sebagai async, yaitu.
async function fn () {await fetchUserName ()}.
Dokumen Async / Await.
function fetchUserName() {
return new Promise(resolve => setTimeout(resolve, 500))
}
async function withAsync() {
print("withAsync: fetching...")
await fetchUserName()
print("withAsync: done")
}
await withAsync()
function withoutAsync() {
print("withoutAsync: fetching...")
fetchUserName().then(()=>print("withoutAsync done"))
}
withoutAsync()
Fungsi panah () => {}
Ini adalah fungsi yang terkait dengan konteks saat ini. Ada tiga tipe utama yang akan Anda lihat di alam liar:
satu argumen, satu baris, banyak baris.
Formulir argumen tunggal tidak memerlukan tanda kurung, dan formulir baris tunggal tidak memerlukan operator
return
; kembali tanpa syarat.
1 const fn = a => a*2
Satu argumen. Satu baris.
Formulir multi-baris memerlukan pernyataan
return
jika fungsinya ingin mengembalikan sesuatu. Beberapa argumen membutuhkan tanda kurung.
const fn = (a,b) => {
console.log(a,b)
return a*b
}
Banyak argumen, banyak baris.
Dokumen fungsi panah
untuk ... dari
Digunakan untuk melakukan iterasi melalui iterator. Begitu pula
for...in
, kecuali Anda tidak perlu memeriksanya
hasOwnProperty
. Anda tidak dapat menggunakan sintaks perulangan ini pada sebuah objek secara langsung karena objek tersebut tidak memiliki iterator. Gunakan
Object.entries ({})
untuk mendapatkan iterasi sebagai gantinya .
untuk ... dari dokumen
const x = {a: 1, b: 2}
for (const [key, value] of Object.entries(x)) {
print(`${key}=${value}`)
}
untuk menunggu ... dari
Iterasi asinkron diperkenalkan pada 2018. Selain
Promise.all
itu, dapat digunakan untuk menyinkronkan banyak tugas asinkron. Contoh di bawah ini menunjukkan 3 tugas yang berjalan secara asinkron. Perulangan memproses satu hasil pada satu waktu, secara berurutan; dalam hal ini, tugas tercepat untuk diselesaikan hanya terlihat di akhir iterasi.
untuk menunggu ... dari dokumen
const delay = (n) => {
return new Promise((resolve) => {
setTimeout(()=>{
print("resolve "+n)
resolve(n)
}, n)
})
}
const delays = [
delay(150),
delay(50),
delay(25)
]
for await (const ret of delays) {
print("for loop await "+ret)
}
Kelas
Pada 2015 ES6 porting class ke Javascript. Kelas Javascript seperti kelas dari bahasa lain yang Anda kenal dan sukai. Pewarisan, metode kelas, pengambil dan penyetel, properti, dll.
Dokumentasi kelas
class A {
constructor(name) {
this.name = name
}
myProp = "myProp"
static foo() {
print("Static method says foo")
}
}
class B extends A {
constructor(name, age) {
super(name)
this.age = age
}
toString() {
return `${this.name} ${this.age}`
}
}
A.foo()
const b = new B("Catch", 22)
print(b)
print(b.myProp)
dapatkan / set
Ambil dan setel adalah fungsi yang disebut properti, misalnya
person.age = 16; person.age> 18
. Ini sangat berguna saat Anda membutuhkan properti dinamis atau dihitung. Dan mereka dapat digunakan dengan kelas dan objek biasa.
Dapatkan / set dokumentasi
Kelas dengan getter dan setter
class A {
constructor() {
this._firstName = "Jane"
this._lastName = "Smith"
}
get fullName() {
return `${this._firstName} ${this._lastName}`
}
set firstName(v) {
this._firstName = v
}
}
const a = new A()
print(a.fullName)
a.firstName = "John"
print(a.fullName)
Objek dengan getter dan setter
const x = {
get now() { return new Date() }
}
print(x.now)
fungsi parameter default
Hore! Sekarang Anda dapat menentukan parameter default dalam definisi fungsi Anda. Bekerja seperti yang Anda harapkan.
Dokumen parameter default
function greet(msg="Hello world") {
print(msg)
}
greet()
greet("hi")
fungsi bernama parameter
Melalui keajaiban penghancuran objek, fungsi sekarang dapat memiliki parameter bernama.
Dokumen parameter bernama
function greet({name = "Jane", age = 42} = {}){
print(name + " " +age)
}
greet()
greet({name: "John", age: 21})
fungsi istirahat ... parameter
Parameter reset memungkinkan fungsi untuk menerima sejumlah argumen sebagai array. Disarankan untuk menggunakan ini sebagai gantinya
arguments
.
Dokumentasi parameter istirahat
function greet(msg1, ...msgs) {
print(msg1)
msgs.forEach(s => print(s))
}
greet("hi", "hello", "world")
Object.assign dan operator sebar
Object.assign(target, source)
menggabungkan dua atau lebih objek menjadi satu. Ini memodifikasi target di tempatnya, jadi jika Anda lebih suka membuat objek baru, teruskan literal objek kosong sebagai argumen pertama.
Alternatifnya, Anda dapat menggunakan operator penyebaran
...
untuk menggabungkan beberapa objek:
{... obj1, ... obj2}
meskipun perlu diingat bahwa
spread
tidak akan memanggil setter pada suatu objek, jadi untuk menjadi yang paling portabel, pertimbangkan
Object.assign
. Operator Spread juga dapat digunakan dengan array, seperti yang ditunjukkan pada contoh kode terakhir.
Sebarkan dokumen sintaks
const source = {x: 1, y: 4}
const target = Object.assign({}, source)
print(JSON.stringify(target))
const spread = {a: 1, b: 2, ...source}
print(JSON.stringify(spread))
const ary1 = [1]
const ary = [...ary1, [2,3]]
print(ary)
Merusak
Destrukturisasi memungkinkan Anda mengambil nilai dari objek dan array menggunakan templat. Ini adalah topik yang kompleks dengan banyak aplikasi ... terlalu banyak untuk saya cantumkan, tetapi saya telah menunjukkan beberapa penggunaan yang lebih umum yang dapat saya pikirkan.
Merusak dokumen dan dokumen MDN
function f() {
return [1, 2];
}
let [a, b] = f()
print("a="+a + " b=" + b)
const obj = {state: {id: 1, is_verified: false}}
const {id, is_verified: verified} = obj.state
print("id = " + id)
print("verified = " + verified)
for (const [key, value] of Object.entries({a: 1, b: 2, c: 3})) {
print(key + " is " + value);
}
Fungsi singkatan alias Metode
Fungsi yang dideklarasikan untuk objek dapat menggunakan gaya singkatan baru, yang tidak memiliki kata kunci fungsi.
Kedua fungsi (fn1, fn2) setara pada contoh di bawah ini.
Panduan metode
const x = {
type: "x",
shorthand() {
print("shorthand "+this.type)
},
long: function() {
print("long "+this.type)
}
}
x.shorthand()
x.long()
Promise.all
Saya kebanyakan melewatkan janji karena async / await lebih disukai, tetapi terkadang Anda perlu menyinkronkan beberapa panggilan asinkron dan Promise.all adalah cara termudah untuk melakukannya.
Promise.all dokumentasi
const delay = (n) => {
return new Promise((resolve) => {
setTimeout(()=> resolve(n), n)
})
}
async function main() {
const delays = [100, 200, 300].map(n => delay(n))
print("waiting…")
const res = await Promise.all(delays)
print("done. result is " + res)
}
main()
Literal template
Sintaks baru ini, juga dikenal sebagai string template, menyediakan interpolasi string sederhana dan string multi-baris.
Template dokumen literal
let x = `multi
line
string`
print(x)
x = `1+1=${1+1}`
print(x)
Proksi
Sebuah proxy memungkinkan Anda untuk mencegat panggilan get / set pada objek lain. Ini dapat berguna untuk melacak perubahan properti, memperbarui DOM nanti, atau membuat API inovatif seperti proxy www di bawah ini. Dokumen proxy
let _nums = [1,2,3]
let nums = new Proxy(_nums, {
set(target, key, value) {
target[key] = value
print("set called with " + key + "=" + value)
print("update DOM")
return true
}
})
nums.push(4)
print("nums: " + nums)
print("_nums: " + _nums)
Impor / ekspor modul
Modul memungkinkan Anda membuat namespace untuk kode Anda dan memecah fungsionalitas menjadi file yang lebih kecil. Pada contoh di bawah ini, kami memiliki modul bernama greet.js yang disertakan dalam index.html. Harap dicatat bahwa pemuatan modul selalu ditunda, sehingga tidak memblokir rendering HTML. Ada banyak cara untuk mengimpor / mengekspor fungsionalitas dari file js, baca dokumentasi ekspor untuk detailnya .
Impor dokumen
function greet(msg) {
console.log("greet:", msg)
}
export default greet
File bernama "greet.js" di direktori "/ js".
<script type="module">
import greet from "/js/greet.js"
greet("hi")
</script>
index.html
Baca lebih banyak
Jadi, saya tidak berbicara tentang segala sesuatu yang telah berubah selama dekade terakhir, tetapi hanya tentang apa yang menurut saya paling berguna. Lihat topik lainnya ini.
Referensi
Panduan