Anda bilang Anda bisa menggunakan ES6, lalu gunakan dengan cepat!

Cara cepat memulai VUE3.0: Mulailah mempelajari

"Jika Anda tahu cara menggunakan ES6, gunakanlah!": Ini adalah "auman" yang dibuat pemimpin kepada anggota tim selama peninjauan kode karena dia menemukan banyak hal tempat selama peninjauan kode. Lebih baik menggunakan metode penulisan ES5. Bukan berarti menulis di ES5 tidak akan berfungsi dan akan ada bug. Itu hanya menyebabkan peningkatan jumlah kode dan keterbacaan yang buruk.

Kebetulan pemimpin ini memiliki fetish kode. Dia sangat tidak puas dengan anggota yang memiliki pengalaman 3 hingga 5 tahun menulis kode pada level ini dan terus mengeluh tentang kode tersebut. Namun saya merasa masih mendapat banyak manfaat dari keluh kesahnya, maka saya catat keluh kesah pimpinan dan bagikan kepada rekan-rekan penggali, jika dirasa bermanfaat, beri acungan jempol. Anda dipersilakan untuk berkomentar. Tinggalkan pesan.

ps: Sintaks JS setelah ES5 secara kolektif disebut ES6! ! !

1. Tucao tentang pengumpulan nilai

Nilai sangat umum dalam program, seperti memperoleh nilai dari objek obj .

objek konstan = {
    sebuah:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

Tucao :

const a = obj.a;
const b = objek.b;
const c = objek.c;
const d = obj.d;
const e = objek.e;

atau

const f = objek.a + objek.d;
const g = obj.c + obj.e;

"Tidak bisakah Anda menggunakan tugas destrukturisasi ES6 untuk mendapatkan nilainya? Bukankah menyenangkan menggunakan 5 baris kode dalam 1 baris kode? Cukup gunakan nama objek plus nama atribut untuk mendapatkan nilai. Jika Tidak apa-apa jika nama objek pendek, tetapi jika sangat panjang, nama objek akan ada di mana-mana dalam kode. "

Perbaikan :

const {a,b,c,d,e} = keberatan;
konstanta f = a + d;
const g = c + e;

Argumen tandingannya

bukan karena saya tidak menggunakan tugas destrukturisasi ES6, tetapi nama atribut dalam objek data yang dikembalikan oleh server tidak sesuai dengan keinginan saya membuat ulang tugas traversal.

Tampaknya

pemahaman Anda tentang penghancuran dan penugasan ES6 belum cukup menyeluruh. Jika nama variabel yang ingin Anda buat tidak sesuai dengan nama properti objek, Anda dapat menulis:

const {a:a1} = obj;
console.log(a1); // 1

tambahan

mudah digunakan. Namun harap dicatat bahwa objek yang dirusak tidak boleh undefined atau null . Jika tidak, kesalahan akan dilaporkan, sehingga objek yang dirusak harus diberi nilai default.

const {a,b,c,d,e} = obj ||.{};

2. Keluhan tentang penggabungan data

, seperti menggabungkan dua array dan menggabungkan dua objek.

konstanta a = [1,2,3];
konstanta b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

konstanta obj1 = {
  sebuah:1,
}
konstanta objek2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

mengeluhkan

apakah operator ekstensi ES6 dilupakan, dan apakah penggabungan array tidak mempertimbangkan deduplikasi?

Peningkatan

konstanta a = [1,2,3];
konstanta b = [1,5,6];
const c = [...Set baru([...a,...b])];//[1,2,3,5,6]

konstanta obj1 = {
  sebuah:1,
}
konstanta objek2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

3. Tucao tentang penyambungan string

const name = 'Xiao Ming';
skor konstan = 59;
misalkan hasil = '';
jika(skor > 60){
  result = `${name} nilai ujian lulus`; 
}kalau tidak{
  hasil = `${name} gagal dalam ujian`; 
}

Mengeluh tentang

penggunaan templat string ES6 seperti yang Anda lakukan, lebih baik tidak menggunakannya. Anda tidak tahu operasi apa yang bisa dilakukan di ${} . Di ${} Anda bisa meletakkan ekspresi JavaScript apa pun, melakukan operasi, dan mereferensikan properti objek.

Peningkatan

nama const = 'Xiao Ming';
skor konstan = 59;
const result = `${name}${score > 60?'s score ujian lulus':'skor ujian gagal'}`

4. Mengomentari kondisi penilaian di if

(
    ketik == 1 ||
    ketik == 2 ||
    ketik == 3 ||
    ketik == 4 ||
){
   //...
}

Mengeluh tentang

apakah metode instance array includes akan digunakan di ES6?

yang ditingkatkan

= [1,2,3,4];

if( kondisi.termasuk(tipe) ){
   //...
}

5. Keluhan tentang pencarian daftar

Dalam proyek ini, fungsi pencarian dari beberapa daftar yang tidak diberi halaman diimplementasikan oleh front end. Pencarian umumnya dibagi menjadi pencarian tepat dan pencarian fuzzy. Pencarian juga disebut pemfilteran, dan umumnya diimplementasikan menggunakan filter .

konstanta a = [1,2,3,4,5];
hasil const = a.filter( 
  barang =>{
    pengembalian barang === 3
  }
)

mengeluh

tentang pencarian yang tepat, bukankah Anda akan menggunakan find di ES6? Apakah Anda memahami pengoptimalan kinerja? Jika item yang memenuhi ketentuan ditemukan dalam metode find , item tersebut tidak akan terus melintasi array.

Peningkatan

const a = [1,2,3,4,5];
hasil const = a.find( 
  barang =>{
    pengembalian barang === 3
  }
)

6. Keluhan tentang array yang diratakan

Dalam data JSON suatu departemen, nama atribut adalah id departemen, dan nilai atribut adalah kumpulan array dari id anggota departemen. Sekarang kita perlu mengekstrak semua id anggota departemen ke dalam kumpulan array.

const deps = {
'Departemen Pembelian':[1,2,3],
'Departemen Personalia':[5,8,12],
'Departemen Administrasi':[5,14,79],
'Kementerian Perhubungan':[3,64,105],
}
biarkan anggota = [];
untuk (biarkan item masuk deps){
    nilai const = deps[item];
    if(Array.isArray(nilai)){
        anggota = [...anggota,...nilai]
    }
}
member = [...new Set(member)]

Apakah perlu melakukan traverse untuk mendapatkan semua nilai atribut suatu objek

?

Object.values dilupakan? Ada juga proses perataan yang melibatkan array. Mengapa tidak menggunakan metode flat yang disediakan oleh ES6? Untungnya, kedalaman array kali ini hanya sampai 2 dimensi. Jika Anda menemukan array dengan kedalaman 4 atau 5 dimensi, apakah perlu? Loop loop bersarang untuk meratakan?

Tingkatkan

deps const = {
    'Departemen Pembelian':[1,2,3],
    'Departemen Personalia':[5,8,12],
    'Departemen Administrasi':[5,14,79],
    'Kementerian Perhubungan':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

Infinity sebagai parameter flat , sehingga tidak perlu mengetahui dimensi array yang diratakan.

Ditambah lagi

metode flat tidak mendukung browser IE.

7. Tucao tentang mendapatkan nilai atribut objek

const

name = obj && obj.name;

Apakah operator rantai opsional di ES6 akan digunakan?

Peningkatan

const name = obj?.name

8. Komentar tentang penambahan atribut objek

Saat menambahkan atribut ke suatu objek, apa yang harus dilakukan jika nama atribut berubah secara dinamis.

misalkan obj = {};
misalkan indeks = 1;
biarkan kunci = `topik${index}`;
obj[key] = 'konten topik';

Tucao

mengapa kita perlu membuat variabel tambahan. Saya ingin tahu apakah ekspresi dapat digunakan untuk nama properti objek di ES6?

Tingkatkan

let obj = {};
misalkan indeks = 1;
obj[`topic${index}`] = 'isi topik';

9. Penilaian apakah kotak masukan tidak kosong

Saat memproses bisnis yang berhubungan dengan kotak masukan, sering kali dinilai bahwa kotak masukan tidak memiliki nilai masukan.

if(nilai !== null && nilai !== tidak ditentukan && nilai !== ''){
    //...
}

Pernahkah Anda mendengar tentang operator penggabungan nilai null yang baru di ES6? Apakah Anda perlu menulis begitu banyak ketentuan

?

if((nilai??'') !== ''){
  //...
}

10. Keluhan tentang fungsi asynchronous

Fungsi asynchronous sangat umum dan sering diimplementasikan menggunakan Promise.

konstanta fn1 = () =>{
  kembalikan Janji baru((putuskan, tolak) => {
    setWaktu habis(() => {
      tekad(1);
    }, 300);
  });
}
konstanta fn2 = () =>{
  kembalikan Janji baru((putuskan, tolak) => {
    setWaktu habis(() => {
      tekad(2);
    }, 600);
  });
}
konstanta fn = () =>{
   fn1().lalu(res1 =>{
      konsol.log(res1); // 1
      fn2().lalu(res2 =>{
        konsol.log(res2)
      })
   })
}

Anda memanggil

fungsi asinkron seperti ini, Anda tidak akan takut dengan panggilan balik yang buruk!

Tingkatkan

const fn = async() =>{
  const res1 = menunggu fn1();
  const res2 = menunggu fn2();
  konsol.log(res1); // 1
  konsol.log(res2);// 2
}

Tambahan

: Saat membuat permintaan bersamaan, Anda masih perlu menggunakan Promise.all() .

konstanta fn = () =>{
   Janji.semua([fn1(),fn2()]).then(res =>{
       konsol.log(res);//[1,2]
   }) 
}

Jika ada permintaan bersamaan, selama salah satu fungsi asinkron diselesaikan, hasilnya akan dikembalikan, dan Promise.race() harus digunakan.

11.

Anda dipersilakan untuk menyangkal sepuluh poin keluhan pemimpin di atas. Jika sanggahan Anda masuk akal, saya akan membantahnya untuk Anda pada pertemuan peninjauan kode berikutnya.

Selain itu, jika ada kesalahan pada konten terorganisir di atas, silakan memperbaikinya di komentar. Terima kasih banyak.

Artikel ini direproduksi dari: https://juejin.cn/post/7016520448204603423

Penulis: Hongchen Lianxin

[Rekomendasi tutorial video terkait: web front-end]

Di atas adalah apa yang Anda katakan Anda dapat menggunakan ES6, lalu gunakan dengan cepat! Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di website php Cina!