es6 – Wie man die es6-Syntax in Projekten und täglichen Übungen anwendet

1. Über den Wert

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

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

es6-Destrukturierungsaufgabe:

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

Sie können auch Folgendes verwenden: zum Umbenennen

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

Zweitens die Kombination aus Array und Objekt

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}

Der Erweiterungsoperator von es6, die Kombination und Deduplizierung von Arrays

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. Saitenspleißen

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

es6-Vorlagenzeichenfolge

${}Darin können beliebige JavaScript-Ausdrücke platziert, Operationen ausgeführt und Objekteigenschaften referenziert werden .

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

Viertens gibt es viele if-Bedingungen

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

Es6-Array-Methode enthält

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

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

5. Präzise Suche

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

Die es6-Array-Suchmethode ist auf Leistung optimiert. Wenn findin der Methode ein Element gefunden wird, das die Bedingungen erfüllt, wird das Array nicht weiter durchsucht.

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

Sechstens erhalten Sie den Objektattributwert

const name = obj && obj.name;

es6 optionale Verkettung?

const name = obj?.name;

Optionale Verkettung? Auffüllen:

Es stellt fest, dass obj weder null noch undefiniert ist, bevor versucht wird, auf obj.name zuzugreifen. Wenn obj null oder undefiniert ist, führt der Ausdruck eine Kurzschlussberechnung durch und gibt undefiniert direkt zurück

Sieben, das Eingabefeld ist kein leeres Urteil

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

es6 leerer Koaleszenzoperator??

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

ES6 Stellenangebot Coalescing Operator?? Ergänzung:

Wenn der erstere Wert null oder undefiniert ist, gibt der Ausdruck den letzteren Wert zurück

const a = 0 ?? '默认值a';
cosnt b = null ?? '默认值b';


console.log(a); // "0"  0是假值，但不是 null 或者 undefined
console.log(b); // "默认值b"

expandieren:

Um einer Variablen einen Standardwert zuzuweisen, wird im Allgemeinen der logische ODER-Operator || verwendet. Da es sich jedoch  || um einen booleschen logischen Operator handelt, wird der Operand auf der linken Seite zur Auswertung in einen booleschen Wert umgewandelt. Falsche Werte ( 0,  '',  NaN,  null,  undefined) werden nicht zurückgegeben. Dies führt zu unvorhersehbaren Ergebnissen, wenn Sie 0, ''oder als gültigen Wert verwenden. NaNDies ist auch der ??-Operator, der dieses Problem lösen kann

const a = 0；
const b = a || 5


//当0作为有效值，与我们期望的 b 的值不一致
console.log(b); // 5

8. Asynchroner Funktionsrückruf

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)
      })
   })
}

Async und Warten auf es6

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

Neun, Funktionsstandardparameter

function fn (name, age) {
  let name = name || 'hsq'
  let age = age || 22
  console.log(name, age)
}
fn() // hsq 22

Standardparameter der ES6-Funktion

function fn (name = 'hsq', age = 22) {
  console.log(name, age)
}
fn() // hsq 22
fn('test', 23) // test 23

10. Verbleibende Parameter

Für eine Funktion ist die Anzahl der eingehenden Parameter ungewiss, sodass die verbleibenden Parameter von ES6 verwendet werden können

function fn (name, ...params) {
  console.log(name)
  console.log(params)
}
fn ('hsq', 1, 2) // hsq [ 1, 2 ]
fn ('hsq', 1, 2, 3, 4, 5) // hsq [ 1, 2, 3, 4, 5 ]

11. Pfeilfunktionen

Gewöhnliche Funktion

function fn () {}

const fn = function () {}

es6 Pfeilfunktion

const fn = () => {}

// 如果只有一个参数，可以省略括号
const fn = name => {}

// 如果函数体里只有一句return
const fn = name => {
    return 2 * name
}
// 可简写为
const fn = name => 2 * name

// 如果返回的是对象
const fn = name => ({ name: name })

Der Unterschied zwischen gewöhnlichen Funktionen und Pfeilfunktionen: 

• 1. Pfeilfunktionen können nicht als Konstruktoren verwendet werden, und new kann nicht verwendet werden
• 2. Die Pfeilfunktion hat kein Prototypobjekt
• 3. Pfeilfunktionen haben kein eigenes This
• 4. Die Pfeilfunktion hat kein Argumentobjekt

 

12. Holen Sie sich den Schlüsselwert des Objekts

Objektschlüssel

Eine Sammlung von Schlüsseln, die zum Abrufen von Objekten verwendet werden können

const obj = {
  name: 'hsq',
  age: 22,
  gender: '男'
}

const values = Object.keys(obj)
console.log(values) // [ 'hsq', 22, '男' ]

 

Objektwerte

Eine Sammlung von Werten, die zum Abrufen von Objekten verwendet werden können

const obj = {
  name: 'hsq',
  age: 22,
  gender: '男'
}

const values = Object.values(obj)
console.log(values) // [ 'hsq', 22, '男' ]

 

Objekteinträge

Eine Sammlung von Schlüssel-Wert-Paaren, die zum Abrufen eines Objekts verwendet werden können

const obj = {
  name: 'hsq',
  age: 22,
  gender: '男'
}

const entries = Object.entries(obj)
console.log(entries) 
// [ [ 'name', 'hsq' ], [ 'age', 22 ], [ 'gender', '男' ] ]

13. Array-Abflachung

Array.flat

Ich habe ein zweidimensionales Array und möchte es in ein eindimensionales Array umwandeln:

const arr = [1, 2, 3, [4, 5, 6]]

console.log(arr.flat()) // [ 1, 2, 3, 4, 5, 6 ]

Sie können auch Parameter übergeben. Der Parameter ist die Anzahl der Dimensionsreduzierungen

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]

console.log(arr.flat(2))
[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

Wenn eine unendliche Zahl übergeben wird, wird das mehrdimensionale Array (egal wie viele Dimensionen) auf ein eindimensionales Array reduziert

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]

console.log(arr.flat(Infinity))
[
   1,  2, 3, 4,  5,
   6,  7, 8, 9, 10,
   11, 12
]