Heim > Web-Frontend > js-Tutorial > Einige effektive JS-Tipps

Einige effektive JS-Tipps

零到壹度
Freigeben: 2018-03-20 13:37:42
Original
1815 Leute haben es durchsucht

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 ?  '大帅比' : '前端强无敌'
Nach dem Login kopieren

2 berücksichtigen (neue Methode von ES6 )

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

3 )

function test (){ console.info(name) }
setTimeout(function() { console.info(&#39;&#39;okay) }, 1500)
arr.forEach(function (item) {    
    console.info(item)
})
简写: let test = (args) => {  console.info(name) }
setTimeout(() => { console.info(&#39;okay&#39;) }, 1500)
arr.forEach(item => console.info(item))
Nach dem Login kopieren

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);
Nach dem Login kopieren

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]
Nach dem Login kopieren

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}
Nach dem Login kopieren

5. Objektattributabkürzung

Wenn der Schlüsselwert gleich ist

const obj = {x:x,y:y}
简写:cont obj = {x,y}
Nach dem Login kopieren

6. Wenn die Zeilenabkürzung

const learn = &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
简写: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`
Nach dem Login kopieren

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

const url = &#39;http://ab.cc.com/&#39; + data + &#39;/beta/info&#39;
简写:const url = `http://ab.cc.com/${data}/beta/info`
Nach dem Login kopieren
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 = [
{&#39;type&#39;: &#39;dog&#39;,  &#39;color&#39;: &#39;red&#39;},
{&#39;type&#39;: &#39;cat&#39;, &#39;color: &#39;white&#39;},
{&#39;type&#39;: &#39;bird&#39;, &#39;color&#39;: &#39;blue&#39;}
]
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;)
Nach dem Login kopieren

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(&#39;p&#39;)
Nach dem Login kopieren
Zu diesem Zeitpunkt ist p ein wirklich durchquerbares Array

let p = Array.from(p)  或者 let p = [...p]
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
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