Quelques conseils JS efficaces

Cet article parle principalement de quelques astuces JS efficaces avec vous. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Opérateur ternaire

Lorsque vous souhaitez écrire une instruction if...else dans le projet, s'il ne s'agit pas d'un jugement multiple, vous peut envisager des opérations ternaires au lieu de

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

2 pour simplification (nouvelle méthode fournie par 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))

a l'air plus simple, cela ne changera pas lors de l'utilisation de la fonction flèche~ !

4. Opérateur de propagation

Fusion de tableaux :

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

Clonage de tableaux : //Étant donné que les tableaux sont des types de référence, un clonage est souvent nécessaire A. opération séparée

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

a peut être inséré à n'importe quelle position au lieu de l'ajouter uniquement à la fin, ce qui est plus pratique que concat !

Utilisé dans les objets :

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. Abréviation de l'attribut d'objet

Lorsque la valeur clé est la même

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

6. Lorsque l'abréviation de la chaîne de ligne

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. La chaîne du modèle

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

${} est placé directement Entrez simplement la variable, c'est très simple à utiliser ~ n'oubliez pas d'utiliser des backticks ! ! !

8. Array.find

Si vous souhaitez trouver les données requises dans un tableau, vous avez besoin d'une opération en boucle Find dans ES6 pour simplifier son fonctionnement<🎜. >

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

9. Convertir un pseudo-tableau en tableau réel (Le pseudo-tableau n'a pas d'interface interateur)

let p = document.getElementById('p')

p est un pseudo-tableau et ne peut pas utiliser de méthodes telles que forEach Pour parcourir, vous ne pouvez utiliser que la boucle for la plus gênante

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

À l'heure actuelle, p est un tableau véritablement traversable

10. Déduplication de tableau, Set

let a = [ 2, 3, 1, 2]

new Set() renvoie un pseudo-tableau, et vous devez utiliser l'opérateur spread pour le convertir en un véritable tableau, Array . from() est également un bon choix

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

Paramètres par défaut

11. 🎜>

test de fonctionnement(a, b, c = 'Dashuaibi', d = faux){

}

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

ne transmet pas les deux paramètres c et d. À l'heure actuelle, c est par défaut 'Da Shuai Bi' et d est par défaut false

Paramètres obligatoires

. 🎜>

function(data) {
        if(data === undefined) {
                throw new Error('Missing')   
        } 
        return bar
}
简写:
mandatory = () => {
        throw new Erroe ('Missing')
}
foo = (bar = mandatory()) => {
        return bar
}

En JS, si une fonction ne transmet pas de paramètres, les paramètres par défaut seront indéfinis. Cela peut provoquer une exception de programme, et une exception doit être levée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!