Einige effektive JS-Tipps

In diesem Artikel geht es hauptsächlich um einige effektive JS-Tipps. Freunde in Not können darauf zurückgreifen.

1. Ternärer Operator

Wenn Sie im Projekt eine if...else-Anweisung schreiben möchten, wenn es sich nicht um eine Mehrfachbeurteilung handelt, Sie kann zur Vereinfachung ternäre Operationen anstelle von

let a = 1, answer = null
if( a > 5 ) {
    answer = '大帅比'
}else{ 
    answer = '前端强无敌'
}
简写：answer = a > 5 ?  '大帅比' : '前端强无敌'

2 berücksichtigen (neue Methode von ES6 )

for(let i = 0; i < arr.length; i++){}
简写：for (let [index, item] of arr.entries()) {
        index为下标，item为每一项内容
}

3 )

function test （）{ console.info（name） }
setTimeout（function() { console.info(''okay) }， 1500）
arr.forEach(function (item) {    
    console.info(item)
})
简写： let test = （args） => {  console.info(name) }
setTimeout(() => { console.info('okay') }, 1500)
arr.forEach(item => console.info(item))

sieht einfacher aus, dies ändert sich auch bei Verwendung der Pfeilfunktion nicht~!

4. Erweiterungsoperator

Array-Zusammenführung:

const a = [1, 3, 5]
const nums = [2, 4, 6].concat(a);

Array-Klonen: //Da Arrays Referenztypen sind, ist das Klonen oft erforderlich. A Separate Operation

const arr = [1, 2, 3, 4]
cons arr2 = arr.slice()
简写： const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

a kann an jeder Position eingefügt werden, anstatt nur am Ende anzuhängen, was praktischer ist als concat!

Wird in Objekten verwendet:

const obj =  { a:1 , b:2, c:3,  ...obj2 } =  { a:1 , b:2, c:3,  d:5, e: 6}
obje = {d:5, e: 6}

5. Objektattributabkürzung

Wenn der Schlüsselwert gleich ist

const obj = {x:x，y:y}
简写：cont obj = {x，y}

6. Wenn die Zeilenabkürzung

const learn = 'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
                     +  'study vue react rn nih\n\t'
简写：const learn = `study vue react rn nih
                                  study vue react rn nih
                                 study vue react rn nih
                                 study vue react rn nih
                                study vue react rn nih`

7 ist direkt platziert Geben Sie einfach die Variable ein, die Verwendung ist sehr einfach ~ Denken Sie daran, Backticks zu verwenden! ! !

const url = 'http://ab.cc.com/' + data + '/beta/info'
简写：const url = `http://ab.cc.com/${data}/beta/info`

8. Array.find

Wenn Sie die erforderlichen Daten in einem Array finden möchten, können Sie dessen Vorgang durch eine Schleifenoperation vereinfachen.

9. Pseudo-Array in echtes Array konvertieren

(Pseudo-Array hat keine Interator-Schnittstelle)

cont data = [
{'type': 'dog',  'color': 'red'},
{'type': 'cat', 'color: 'white'},
{'type': 'bird', 'color': 'blue'}
]
function findeClor(color) {
        for(let i = 0; i < data.length; i ++ ) {
                if(data[i].type== &#39;cat&#39; && data[i].color== color) {
                        return data[i]
                } 
        }
}
简写：let cat = data.find(item => item.type == &#39;cat&#39; && item.color== &#39;red&#39;)

p ist ein Pseudo-Array und kann keine Methoden wie forEach verwenden Zum Durchlaufen können Sie nur die umständlichere for-Schleife verwenden

let p = document.getElementById('p')

Zu diesem Zeitpunkt ist p ein wirklich durchquerbares Array

let p = Array.from(p)  或者 let p = [...p]

10. Array-Deduplizierung, Set

let a = [ 2, 3, 1, 2]new Set() gibt ein Pseudo-Array zurück, und Sie müssen den Spread-Operator verwenden, um es in ein echtes Array, Array, umzuwandeln. from() ist auch eine gute Wahl

let b = [... new Set(a)] // [2, 3, 1]

Standardparameter

Funktionstest(a, b, c = 'Dashuaibi', d = false){}

test('front-end', 'Beima ' )

übergibt die beiden Parameter c und d nicht. Zu diesem Zeitpunkt ist c standardmäßig „Da Shuai Bi“ und d standardmäßig „false“

12 🎜>

Wenn in JS eine Funktion keine Parameter übergibt, werden die Parameter standardmäßig auf undefiniert gesetzt. Dies kann zu einer Programmausnahme führen und eine Ausnahme muss ausgelöst werden

Das obige ist der detaillierte Inhalt vonEinige effektive JS-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!