Sie sagten, Sie können ES6 verwenden und es dann schnell verwenden!

So starten Sie schnell mit VUE3.0: Beginnen Sie mit dem Erlernen

von „Wenn Sie wissen, wie man ES6 verwendet, dann verwenden Sie es!“: Dies ist das „Gebrüll“, das ein Leiter während einer Codeüberprüfung gegenüber den Teammitgliedern ausstieß, weil er viele entdeckt hatte Es ist besser, die ES5-Schreibmethode zu verwenden. Dies bedeutet nicht, dass das Schreiben in ES5 nicht funktioniert und es zu Fehlern kommt. Dies führt lediglich zu einer Erhöhung der Codemenge und einer schlechten Lesbarkeit.

Zufällig hatte dieser Anführer einen Code-Fetisch. Er war äußerst unzufrieden mit Mitgliedern, die 3 bis 5 Jahre Erfahrung im Schreiben von Code auf dieser Ebene hatten, und beschwerte sich ständig über den Code. Ich habe jedoch das Gefühl, dass ich von seinen Beschwerden immer noch viel profitiert habe, also habe ich die Beschwerden des Leiters aufgezeichnet und sie mit meinen Mitgräbern geteilt. Wenn Sie denken, dass sie nützlich sind, geben Sie ihnen einen Daumen nach oben. Wenn es Fehler oder bessere Schreibweisen gibt. Sie können gerne einen Kommentar hinterlassen.

ps: Die JS-Syntax nach ES5 wird gemeinsam als ES6 bezeichnet! ! !

1. Tucao über die Wertesammlung

Werte kommen in Programmen sehr häufig vor, beispielsweise beim Abrufen von Werten aus dem Objekt 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;

oder

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

Tucao: „Können Sie nicht die Destrukturierungszuweisung von ES6 verwenden, um den Wert zu erhalten? Ist es nicht schön, 5 Codezeilen in einer Codezeile zu verwenden? Verwenden Sie einfach den Objektnamen plus.“ der Attributname, um den Wert zu erhalten. Es ist in Ordnung, wenn der Objektname kurz ist, aber wenn er sehr lang ist, steht der Objektname überall im Code. "

Verbesserung :

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

Das Gegenargument

ist nicht, dass ich die Destrukturierungszuweisung von ES6 nicht verwende, sondern dass die Attributnamen im vom Server zurückgegebenen Datenobjekt nicht das sind, was ich möchte Erstellen Sie eine Traversierungsaufgabe neu.

Es

scheint, dass Ihr Verständnis der Destrukturierung und Zuweisung von ES6 nicht gründlich genug ist. Wenn der Name der Variablen, die Sie erstellen möchten, nicht mit dem Eigenschaftsnamen des Objekts übereinstimmt, können Sie Folgendes schreiben:

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

Zusätzliche

ES6-Destrukturierungszuweisung ist einfach zu verwenden. Bitte beachten Sie jedoch, dass das destrukturierte Objekt nicht undefined oder null sein darf. Andernfalls wird ein Fehler gemeldet, sodass dem destrukturierten Objekt ein Standardwert zugewiesen werden muss.

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

2. Beschwerden über das Zusammenführen von Daten

, z. B. das Zusammenführen von zwei Arrays und dem Zusammenführen von zwei Objekten.

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}

beschwerte sich darüber,

ob der Erweiterungsoperator von ES6 vergessen wurde und beim Zusammenführen von Arrays keine Deduplizierung berücksichtigt wurde?

Verbesserte

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}

3. Tucao über das Spleißen von Zeichenfolgen

const name = 'Xiao Ming';
const-Punktzahl = 59;
let result = '';
if(score > 60){
  result = „Die Prüfungsnote von ${name} ist bestanden“; 
}anders{
  result = `${name} hat die Prüfung nicht bestanden`; 
}

Wenn Sie sich über

die Verwendung von ES6-String-Vorlagen wie Sie beschweren, ist es besser, sie nicht zu verwenden. Sie haben keine Ahnung, welche Operationen in ${} ausgeführt werden können. In ${} können Sie einen beliebigen JavaScript-Ausdruck einfügen, Operationen ausführen und auf Objekteigenschaften verweisen.

Verbesserter

const name = 'Xiao Ming';
const-Punktzahl = 59;
const result = `${name}${score > 60?''s Testergebnis bestanden':''s Testergebnis fehlgeschlagen'}`

4. Kommentare zu den Beurteilungsbedingungen in if

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

Beschweren Sie sich darüber,

ob die Array-Instanzmethode includes in ES6 verwendet wird?

Verbesserte

const-Bedingung = [1,2,3,4];

if( bedingung.includes(typ) ){
   //......
}

5. Beschwerden über die Listensuche

Im Projekt wird die Suchfunktion einiger nicht-paginierter Listen durch das Frontend implementiert. Die Suche ist im Allgemeinen in präzise Suche und Fuzzy-Suche unterteilt. Die Suche wird auch Filtern genannt und im Allgemeinen mithilfe filter implementiert.

const a = [1,2,3,4,5];
const result = a.filter( 
  Artikel =>{
    Artikel zurücksenden === 3
  }
)

beschweren

, verwenden Sie dann nicht find in ES6? Verstehen Sie die Leistungsoptimierung? Wenn in der find ein Element gefunden wird, das die Bedingungen erfüllt, wird es das Array nicht weiter durchlaufen.

Verbesserte

const a = [1,2,3,4,5];
const result = a.find( 
  Artikel =>{
    Artikel zurücksenden === 3
  }
)

6. Beschwerden über abgeflachte Arrays

In den JSON-Daten einer Abteilung ist der Attributname die Abteilungs-ID und der Attributwert eine Array-Sammlung von Abteilungsmitglieds-IDs. Jetzt müssen wir alle Abteilungsmitglieds-IDs in eine Array-Sammlung extrahieren.

const deps = {
'Einkaufsabteilung':[1,2,3],
'Personalabteilung':[5,8,12],
'Verwaltungsabteilung':[5,14,79],
'Verkehrsministerium':[3,64,105],
}
let member = [];
for (Element in Deps lassen){
    const value = deps[item];
    if(Array.isArray(value)){
        Mitglied = [...Mitglied,...Wert]
    }
}
member = [...new Set(member)]

Ist eine Durchquerung erforderlich, um alle Attributwerte eines Objekts zu erhalten

?

Object.values ​​vergessen? Es gibt auch den Flattening flat Prozess mit Arrays. Glücklicherweise beträgt die Array-Tiefe dieses Mal nur bis zu 2 Dimensionen. Ist dies notwendig? Schleife verschachtelte Schleife zum Abflachen?

const deps = {

verbessern

    'Einkaufsabteilung':[1,2,3],
    'Personalabteilung':[5,8,12],
    'Verwaltungsabteilung':[5,14,79],
    'Verkehrsministerium':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

Infinity wird als Parameter von flat verwendet, sodass die Abmessungen des abgeflachten Arrays nicht bekannt sein müssen.

Ergänzt, dass

die flat -Methode den IE-Browser nicht unterstützt.

7. Tucao zum Abrufen des Objektattributwerts

const

name = obj && obj.name;

Wird der optionale Kettenoperator in ES6 verwendet?

Verbesserter

const name = obj?.name;

8. Kommentare zum Hinzufügen von Objektattributen

Was ist beim Hinzufügen von Attributen zu einem Objekt zu tun, wenn sich der Attributname dynamisch ändert?

sei obj = {};
sei Index = 1;
let key = `topic${index}`;
obj[key] = 'topic content';

Tucao

, warum wir eine zusätzliche Variable erstellen müssen. Ich frage mich, ob Ausdrücke für Objekteigenschaftsnamen in ES6 verwendet werden können.

Verbessere

let obj = {};
sei Index = 1;
obj[`topic${index}`] = 'topic content';

9. Beurteilung, ob das Eingabefeld nicht leer ist.

Bei der Verarbeitung von Eingabefeld-bezogenen Geschäften wird häufig festgestellt, dass das Eingabefeld keinen Eingabewert hat.

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

Haben Sie schon von dem neuen Nullwert-Zusammenführungsoperator in ES6 gehört? Müssen Sie so viele Bedingungen schreiben

?

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

10. Beschwerden über asynchrone Funktionen

Asynchrone Funktionen sind sehr verbreitet und werden oft mit Promise implementiert.

const fn1 = () =>{
  neues Versprechen zurückgeben((auflösen, ablehnen) => {
    setTimeout(() => {
      auflösen(1);
    }, 300);
  });
}
const fn2 = () =>{
  neues Versprechen zurückgeben((auflösen, ablehnen) => {
    setTimeout(() => {
      auflösen(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1); // 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

Sie eine asynchrone Funktion wie diese aufrufen

, müssen Sie keine Angst vor einem höllischen Rückruf haben!

Verbessere

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

Ergänzung

: Wenn Sie gleichzeitige Anfragen stellen, müssen Sie weiterhin Promise.all() verwenden.

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

Wenn gleichzeitige Anforderungen vorliegen, wird das Ergebnis zurückgegeben, solange eine der asynchronen Funktionen abgeschlossen ist, und Promise.race() muss verwendet werden.

11.

Sie können die oben genannten zehn Punkte der Beschwerden des Leiters gerne widerlegen. Wenn Ihre Widerlegung begründet ist, werde ich sie beim nächsten Code-Review-Meeting für Sie widerlegen.

Sollten sich darüber hinaus Fehler in den oben geordneten Inhalten befinden, können Sie diese gerne in den Kommentaren korrigieren. Vielen Dank.

Dieser Artikel wurde reproduziert von: https://juejin.cn/post/7016520448204603423

Autor: Hongchen Lianxin

[Empfehlung für entsprechende Video-Tutorials: Web-Frontend]

Das Obige ist, was Sie gesagt haben, Sie können ES6 verwenden und es dann schnell verwenden! Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!