Anda berkata anda boleh menggunakan ES6, kemudian gunakannya dengan cepat!

Artikel ini akan berkongsi dengan anda sepuluh komen daripada seorang pemimpin tentang ES6, dan menambah pengetahuan yang berkaitan dengan sewajarnya.

“Jika anda tahu cara menggunakan ES6, gunakannya!”: Ini adalah “raung” ketua kepada ahli pasukan semasa mesyuarat semakan kod bahawa Semasa semakan kod, kami mendapati bahawa banyak tempat masih menggunakan kaedah penulisan ES5 Ini tidak bermakna kaedah penulisan ES5 tidak boleh digunakan dan akan berlaku pepijat sahaja.

Kebetulan pemimpin ini mempunyai fetish kod Dia sangat tidak berpuas hati dengan ahli yang berpengalaman menulis kod selama 3 hingga 5 tahun pada tahap ini dan terus merungut tentang kod tersebut. Walau bagaimanapun, saya merasakan bahawa saya masih mendapat banyak daripada aduan beliau, jadi saya merekodkan aduan pemimpin dan berkongsi dengan rakan-rakan penggali Jika anda rasa ia berguna, berikan mereka ibu jari jika ada kesilapan atau cara penulisan yang lebih baik. anda sangat dialu-alukan untuk memberi komen. [Cadangan berkaitan: tutorial pembelajaran javascript]

ps: Sintaks JS selepas ES5 secara kolektif dipanggil ES6! ! !

1 Aduan tentang mendapatkan nilai

Nilai sangat biasa dalam program, seperti mengambil daripada objek <.> nilai. obj

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

Tucao:

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

atau

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

Tucao: "Bolehkah anda menggunakan tugasan pemusnah ES6 untuk mendapatkan nilai? ? Bukankah lebih baik menggunakan satu baris kod untuk mendapatkan nilainya, tidak mengapa, tetapi jika ia panjang, nama objek akan berada di mana-mana dalam kod >Peningkatan

:

Bantahan

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

Bukannya tugasan pemusnah ES6 tidak digunakan, tetapi dalam objek data yang dikembalikan oleh pelayan nama atribut bukan yang saya mahukan untuk mendapatkan nilai seperti ini, saya perlu membuat tugasan traversal yang baharu.

Aduan

Nampaknya anda masih belum memahami secara menyeluruh tugasan pemusnah ES6. Jika nama pembolehubah yang anda ingin buat tidak konsisten dengan nama sifat objek, anda boleh menulis seperti ini:

Tambahan

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

Memusnahkan tugasan dalam ES6 mudah digunakan. Tetapi sila ambil perhatian bahawa objek yang dinyahbina tidak boleh menjadi atau . Jika tidak, ralat akan dilaporkan, jadi objek yang dimusnahkan mesti diberi nilai lalai.

undefinednull

2. Ulasan tentang penggabungan data

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

Contohnya, menggabungkan dua tatasusunan dan menggabungkan dua objek.

Tucao

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

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

Adakah anda terlupa tentang operator spread dalam ES6, dan adakah anda tidak mempertimbangkan penyahduplikasian semasa menggabungkan tatasusunan?

Penambahbaikan

3 Ulasan tentang penyambungan rentetan

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

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

<.>Tucao

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

Lebih baik jangan gunakan templat rentetan ES6 seperti yang anda lakukan Anda tidak tahu operasi yang boleh dilakukan dalam

. Anda boleh meletakkan sebarang ungkapan JavaScript dalam , melakukan operasi dan sifat objek rujukan.

Penambahbaikan${}${}

4. 🎜>

Tucao

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

Adakah kaedah contoh tatasusunan dalam ES6 akan digunakan?

Penambahbaikan

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

5 Ulasan tentang carian senaraiincludes

Dalam projek , beberapa fungsi carian untuk senarai tidak dinomborkan dilaksanakan oleh bahagian hadapan Carian biasanya dibahagikan kepada carian tepat dan carian kabur. Carian juga dipanggil penapisan, dan umumnya dilaksanakan menggunakan .

const condition = [1,2,3,4];

if( condition.includes(type) ){
   //...
}

TucaoAdakah anda tidak akan menggunakan

dalam ES6 jika ia adalah carian yang tepat? Adakah anda memahami pengoptimuman prestasi? Jika item yang memenuhi syarat ditemui dalam kaedah

, ia tidak akan terus melintasi tatasusunan. filter

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

Peningkatan

find 6. Aduan tentang tatasusunan yang diratakanfind

Sebuah jabatan Dalam Data JSON, nama atribut ialah id jabatan, dan nilai atribut ialah koleksi tatasusunan id ahli jabatan Sekarang kita perlu mengekstrak semua id ahli jabatan ke dalam koleksi tatasusunan.

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

TucaoAdakah saya perlu melintasi untuk mendapatkan semua nilai atribut objek? Terlupa? Terdapat juga proses merata yang melibatkan tatasusunan Mengapa tidak menggunakan kaedah

yang disediakan oleh ES6 Mujurlah, kedalaman tatasusunan kali ini hanya sehingga 2 dimensi, dan terdapat juga tatasusunan dengan kedalaman 4 atau 5 dimensi 'T kita perlu gelung gelung bersarang untuk meratakannya?

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

menambah baik

yang menggunakan

sebagai parameter Object.values, supaya tidak perlu mengetahui dimensi tatasusunan yang diratakan. Kaedah flat

Tambahan

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

kaedah tidak menyokong pelayar IE.

Infinityflat

7 Tucao tentang mendapatkan nilai atribut objek

flatTucao

ES6. Adakah operator rantaian pilihan akan digunakan? Penambahbaikan

const name = obj && obj.name;

8. Ulasan tentang menambah atribut objek

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){
    //...
}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

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

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

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

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

本文转载自：https://juejin.cn/post/7016520448204603423

作者：红尘炼心

【相关视频教程推荐：web前端】

Atas ialah kandungan terperinci Anda berkata anda boleh menggunakan ES6, kemudian gunakannya dengan cepat!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!