Heim > Web-Frontend > js-Tutorial > Zusammenfassung einiger praktischer Tipps in ES6 Super

Zusammenfassung einiger praktischer Tipps in ES6 Super

不言
Freigeben: 2018-12-04 17:17:36
nach vorne
2077 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Zusammenfassung mehrerer praktischer Fähigkeiten in ES6 Super. Ich hoffe, dass er für Freunde hilfreich ist.

Hack #1 Elemente austauschen

Array-Destrukturierung verwenden, um Werteaustausch zu realisieren

let a = 'world', b = 'hello'
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world
Nach dem Login kopieren

Hack #2 Debugging

Wir verwenden console.log() oft zum Debuggen, es kann nicht schaden, console.table() auszuprobieren.

const a = 5, b = 6, c = 7
console.log({ a, b, c });
console.table({a, b, c, m: {name: 'xixi', age: 27}});
Nach dem Login kopieren

Hack #3 Einzelanweisung

In der ES6-Ära werden Anweisungen, die auf Arrays arbeiten, kompakter sein

// 寻找数组中的最大值
const max = (arr) => Math.max(...arr);
max([123, 321, 32]) // outputs: 321
// 计算数组的总和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10
Nach dem Login kopieren

Hack # 4 Array-Spleißen

Der Spread-Operator kann concat ersetzen

const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']
const three = ['g', 'h', 'i']
const result = [...one, ...two, ...three]
Nach dem Login kopieren

Hack #5 Eine Kopie erstellen

Wir können Arrays und Shallow einfach implementieren Kopien von Objekten

const obj = { ...oldObj }
const arr = [ ...oldArr ]
Nach dem Login kopieren

Hack #6 Benannte Parameter

Destrukturierung macht Funktionsdeklarationen und Funktionsaufrufe besser lesbar

// 我们尝尝使用的写法
const getStuffNotBad = (id, force, verbose) => {
 ...do stuff
}
// 当我们调用函数时, 明天再看,尼玛 150是啥,true是啥
getStuffNotBad(150, true, true)
// 看完本文你啥都可以忘记, 希望够记住下面的就可以了
const getStuffAwesome = ({id, name, force, verbose}) => {
 ...do stuff
}
// 完美
getStuffAwesome({ id: 150, force: true, verbose: true })
Nach dem Login kopieren

Hack #7 Async /Await kombiniert mit Array-Destrukturierung

Array-Destrukturierung ist großartig! Die Kombination von Promise.all mit Destrukturierung und Wait macht den Code prägnanter

const [user, account] = await Promise.all([
 fetch('/user'),
 fetch('/account')
])
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonZusammenfassung einiger praktischer Tipps in ES6 Super. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage