5 JavaScript-Funktionen, ohne die ich keinen Code schreiben könnte

Guten Tag, Freunde!

Ich präsentiere Ihnen die Übersetzung von Kent Dodds ' Artikel "5 JavaScript-Funktionen, ohne die ich nicht kodieren könnte".

Dies ist meine erste Übersetzung, daher freue ich mich über Kommentare.

5 JavaScript-Funktionen, ohne die ich keinen Code schreiben könnte

Bevor wir anfangen, lassen Sie mich ein wenig über den Code sprechen, den ich schreibe. Fast mein gesamter Code besteht aus Javascript sowie etwas HTML und CSS. Ich schreibe sowohl Client als auch Server JS. Ich teste meinen Code. Ich erstelle und verteile Open Source-Bibliotheken, die von Tausenden von Entwicklern auf der ganzen Welt verwendet werden. Für das Frontend verwende ich React, für das Backend Express oder Serverless Computing.

Hier sind 5 JS-Funktionen, ohne die ich keinen Code schreiben könnte. In zufälliger Reihenfolge. Natürlich ist "ohne das ich keinen Code schreiben könnte" eine Übertreibung. Dies sind Funktionen, die ich wirklich mag und die ich ständig benutze.

1. Restrukturierung

Ich benutze diese Funktion in fast allen Dateien. Es spielt keine Rolle, ob es sich um eine React-Komponente oder eine argumentierende Funktion handelt, Restrukturierung ist eine coole Sache.

Hier einige Beispiele:

const address = { city: 'Salt Lake City', state: 'UT', zip: 84115, coords: { lat: 40.776608, long: -111.920485, }, } // ,    : const city = address.city const state = address.state const zip = address.zip //  ,    : const {city, state, zip} = address 

So sieht es in React aus:

 //  : function UserName(props) { return ( <div> </div> ) } //   : function UserName() { return ( <div> </div> ) } //    : function UserName({name: {first, last}}) { return ( <div> </div> ) } 

Mit dieser Funktion können Sie einige interessante Dinge tun:

 const info = { title: 'Once Upon a Time', protagonist: { name: 'Emma Swan', enemies: [ {name: 'Regina Mills', title: 'Evil Queen'}, {name: 'Cora Mills', title: 'Queen of Hearts'}, {name: 'Peter Pan', title: `The boy who wouldn't grow up`}, {name: 'Zelena', title: 'The Wicked Witch'}, ], }, } //       , //          const { title, protagonist: { name: name, enemies: [, , , {title: enemyTitle, name: enemyName}], }, } = info console.log(`${enemyTitle} (${enemyName}) is an enemy to ${name} in "$5 JavaScript Features I Couldn't Code Without"`) 

2. Module

Dies ist eine weitere Funktion, die ich in fast jeder Datei verwende. Bevor die Module Teil der Sprache wurden, mussten wir seltsame Bibliotheken und Tools verwenden, um mit großen Projekten zu arbeiten. Mit Modulen (und Buildern wie Rollup oder Webpack) haben wir eine großartige Möglichkeit, Code mit anderen zu teilen.

Hier einige Beispiele:

 // a.js //  function add(a, b) { return a + b } const foo = 'bar' const theAnswer = 42 const theQuestion = 'who knows' //        ,  //     ""    export default add export {foo, theAnswer, theQuestion} // b.js //  // 1.   import './a' // 2.    import add from './a' // 3.  `theAnswer`  `theQuestion`  './a' import {theAnswer, theQuestion} from './a' // 4.  `theAnswer`     `fortyTwo` import {theAnswer as fourtyTwo} from './a' // 5.  `add` ( )  `theQuestion` import {default as add, theQuestion} from './a' // 6.  `add`  `theQuestion`      import add, {theQuestion} from './a' // 7.     " "   `allTheThings` import * as allTheThings from './a' 

Wenn Sie mehr über die Module erfahren möchten, können Sie sich mein YouTube-Video "Mehr als Sie über ES6-Module wissen möchten" ansehen .

3. Standardeinstellungen

Ich liebe und benutze diese Funktion die ganze Zeit. Dies gilt sowohl für Funktionsargumente als auch für die Destrukturierung. So wird ein Objekt umstrukturiert:

 const bench = {type: 'Piano', adjustable: false} const {legs = 4} = bench // `The bench has ${legs} legs` // -> The bench has 4 legs // bench - , leg -  

Beachten Sie, dass das Bankobjekt nicht die Eigenschaft legs hat. Ohne die Standardparametersyntax ist der Beinwert undefiniert.

Sie können mit dieser Funktion auch destruktive Zuweisungen verwenden:

 const bench = {type: 'Piano', adjustable: false} const {legs: legCount = 4} = bench // `The bench has ${legCount} legs` // -> The bench has 4 legs 

So sieht es in der Parameterliste aus:

 function getDisplayName(firstName = 'Unknown', lastName = 'Unknown') { return `${firstName} ${lastName}` } // getDisplayName() // -> Unknown Unknown // getDisplayName('Andrew') // -> Andrew Unknown // getDisplayName(undefined, 'Yang') // -> Unknown Yang // getDisplayName('Andrew', 'Yang') // -> Andrew Yang 

Mit dieser Funktion können Sie auch einige interessante Dinge tun, da der Wert rechts vom "=" - Zeichen nur bei Bedarf berechnet wird. Dies bedeutet, dass Sie damit nach den erforderlichen Parametern suchen können:

 function getCandy( kind = requiredParam('kind'), size = requiredParam('size'), upperKind = kind.toUpperCase(), callback = function noop() {}, ) { const result = {kind, size, upperKind} callback(result) return result } function requiredParam(argName) { throw new Error(`${requiredParam} is required`) } // getCandy('twix', 'king') // -> {kind: 'twix', size: 'king', upperKind: 'TWIX'} // getCandy('twix') // -> : 'size is required' 

Einige Leute finden diesen Code zu kompliziert. Vielleicht haben sie recht. Aber zu verstehen, wie es funktioniert, ist sehr cool!

Oh, und Sie haben bemerkt, dass wir die vorherigen Argumente als Teil der Standardparameter für die folgenden Argumente verwenden können (wie es bei upperKind der Fall ist)? Großartig, richtig?

4. Pfeilfunktionen

Ich benutze oft Pfeilfunktionen. Ich mag funktionale Ausdrücke, aber wenn ich zum Beispiel eine anonyme Rückruffunktion benötige (für die ich keinen Namen haben möchte) oder implizite Rückgabewerte erhalten möchte, dann sind Pfeilfunktionen genau das, was ich brauche.

Hier einige Beispiele für die Verwendung von Pfeilfunktionen:

 const divide = (a, b) => a / b const getFive = () => 5 const identity = i => i const asArray = (...args) => args // ,         // (       ), //     ,  : const tryInvoke = (obj, fn, ...args) => { try { return obj[fn](...args) } catch (e) { return undefined } } //  ,   ,       const getObject = favoriteCandy => () //  JSX ( JS  React)        const MyComponent = () => ( <div> Hello world! I am a function and I return <strong>JSX!</strong> </div> ) 

5. Versprechen und asynchrone / erwarten

JS ist Single-Threaded und basiert auf einem Ereignissystem (Call-Stack). Ich bin ein großer Fan von Gesprächen wie Was ist eine Eventschleife? (mit russischen Untertiteln). Versprechen und Async / Warten sind großartige Tools, um dies zu verwalten. Der größte Teil meines Codes ist asynchron, und diese Tools vereinfachen meine Arbeit erheblich. Ehrlich gesagt, Versprechen sind ein ernstes Thema, an das man sich erst gewöhnen muss, aber sie sind großartig.

Ich benutze oft async / await in Tests und Backends. Hier ist ein Beispiel für einen asynchronen Test:

 test('Can fill out a form across multiple pages', async () => { mockSubmitForm.mockResolvedValueOnce({success: true}) const testData = {food: 'test food', drink: 'test drink'} const {findByLabelText, findByText} = render(<App />) user.click(await findByText(/fill.*form/i)) user.type(await findByLabelText(/food/i), testData.food) user.click(await findByText(/next/i)) user.type(await findByLabelText(/drink/i), testData.drink) user.click(await findByText(/review/i)) expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food) expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink) user.click(await findByText(/confirm/i, {selector: 'button'})) expect(mockSubmitForm).toHaveBeenCalledWith(testData) expect(mockSubmitForm).toHaveBeenCalledTimes(1) user.click(await findByText(/home/i)) expect(await findByText(/welcome home/i)).toBeInTheDocument() }) 

Hier ist ein Beispiel für die Verwendung von async \ await in Express:

 async function getListItems(req, res) { const listItems = await listItemsDB.query({ownerId: req.user.id}) res.json({listItems: await expandBookDataMultiple(listItems)}) } 

Seltsamerweise verwende ich in meinem React-Code nicht oft async / await (zumindest nicht direkt). Dies liegt daran, dass ich versuche, den größten Teil der „asynchronen Logik“ außerhalb meiner Komponenten auszuführen. Wenn ich also zum Beispiel beim Aufruf von useEffect in React etwas asynchrones mache, beschränke ich mich auf einen Aufruf der asynchronen Funktion, da es mir leichter fällt, mit Versprechungen zu arbeiten:

 React.useEffect(() => { getUser().then( user => setState({status: 'success', error: null, user}), error => setState({status: 'error', error, user: null}), ) }, []) 

Ich rate Ihnen, den Artikel von Anthony Chu "Async / Await in Node" zu lesen .

Fazit

Es gibt viele andere Funktionen, die ich regelmäßig benutze und die in dieser Liste enthalten sein könnten. Diese Funktionen sind meine Favoriten, ich wende mich immer an sie. Es gibt auch einige neue Ergänzungen zu der Sprache, die noch nicht in mein Muskelgedächtnis eingedrungen sind. Jetzt ist es an der Zeit, JS-Entwickler zu werden! Ich hoffe, dieser Artikel hat Ihnen weitergeholfen! Viel glück