Introduction aux nouvelles fonctionnalités très pratiques des compétences ES6_javascript

ECMAScript 6 se rapproche de plus en plus de nous. En tant que dialecte le plus important, Javascript est sur le point de subir des changements grammaticaux majeurs. InfoQ a spécialement ouvert une rubrique "ES6 en termes simples" pour jeter un œil à ce que ES6 apportera. nous. Nouveau contenu.

est écrit devant

ES6 a été soumis à la conférence Ecma pour examen, ce qui signifie que nous inaugurerons une grande vague des dernières normes pour javascript, ainsi qu'un peu de sucre syntaxique. Il y a beaucoup de choses qui méritent notre attention dans ES6. Voici quelques-unes des nouvelles fonctionnalités que j'ai trouvées et que nous utilisons le plus fréquemment pour les enregistrer.

1. boucle for-of

Cette chose est idéale pour boucler des tableaux. La raison est qu'elle compense actuellement toutes les lacunes des tableaux en boucle dans es5.

Par exemple, for-in traversera les propriétés supplémentaires de l'objet tableau, pas seulement la valeur du tableau. Un autre point est que l'index dans for-in est de type string, ce qui est particulièrement important.

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

Bien sûr, nous avons aussi la fonction forEach(), qui pose également des problèmes, comme par exemple que vous ne pouvez pas interrompre le retour :

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

Cela semble beaucoup plus simple que le for-in. Mais comme mentionné ci-dessus, il présente des inconvénients. Alors essayons for-of :

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

Vous pouvez voir :

Lors de l'utilisation de for-of, les éléments à l'intérieur du tableau sont bouclés et les attributs supplémentaires ne seront pas parcourus dans for-in. Deuxièmement, le type de la variable de boucle est cohérent avec son type dans le tableau plutôt que d'être tous des chaînes. .

Seuls ces deux points valent la peine de choisir for-of au lieu de forEach() ou for-in. Bien sûr, certains navigateurs ne le prennent pas en charge. Cependant, le code ci-dessus peut être exécuté avec succès et obtenir les résultats attendus dans la dernière version de FireFox. Bien sûr, for-of n'est pas seulement utilisé sur les tableaux, vous pouvez l'utiliser sur n'importe quel objet de type tableau, tel que DOM NodeList, string, etc.

2. Chaîne de modèle

Cette chose est également très amusante et peut être utilisée pour l'épissage de cordes. D'après le nom, nous savons ce qu'il fait. Dans le processus de développement front-end, il est inévitable de rencontrer des situations où les chaînes doivent être épissées dynamiquement (génération DOM dynamique, formatage des données), etc. :

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

Notez que la chaîne utilisée comme modèle est entourée d'un signe `. Parmi eux, $(paramenter) est un espace réservé et prend en charge des objets, tels que :$(obj.name). Par rapport aux chaînes ordinaires, les chaînes modèles peuvent être écrites sur plusieurs lignes sans utiliser + concaténation :

hello:$(name),
welcome es6,
your words is $(words)

Il convient de noter que les chaînes de modèles n'échappent pas aux caractères spéciaux, vous devez donc gérer vous-même les risques de sécurité. Les chaînes de modèles ne peuvent pas remplacer la structure de modèles car les chaînes de modèles n'ont pas de syntaxe de boucle intégrée ni d'instructions conditionnelles. Ainsi, pour une concaténation de chaînes ordinaire, nous pouvons l'utiliser pour le faire, ce qui rendra votre code un peu plus cool. PS(A part ça, je ne pense pas que ce soit utile. ψ(╰_╯))

Voici une introduction plus détaillée pour résoudre le problème de l'absence de boucles intégrées et de branches de jugement mentionné ci-dessus :

es6-template string-mozilla

3. Paramètres par défaut

C'est un peu intéressant. C'est comme ça. Nous savons tous que les fonctions js n'ont pas besoin de définir des valeurs par défaut pour les paramètres de fonction. Par exemple, le code suivant signalera une erreur :

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

Cela signifie également que nos paramètres ne peuvent pas recevoir de valeurs par défaut. Si nous devons donner des valeurs par défaut aux paramètres, nous devons déterminer s'ils ne sont pas définis dans la fonction. Cependant, dans ES6, nous pouvons définir des valeurs par défaut pour les paramètres au lieu d'attribuer des valeurs par défaut après jugement à l'intérieur de la fonction. Non seulement nous pouvons attribuer des valeurs par défaut, mais nous pouvons également utiliser des expressions opérationnelles, comme suit :

.

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

Cette méthode est très simple lors de l'écriture de code, tout comme dans les langages dynamiques, comme c#. C’est à la fois intuitif et pratique. C'est donc toujours très bon à utiliser. Il y a aussi un paramètre de repos (Paramètres de repos). Je n'ai trouvé aucune utilité particulière, donc je ne l'écrirai pas. Si vous êtes intéressé, vous pouvez le consulter

.

Paramètres par défaut et paramètres restants -mozilla

Il existe de nombreuses nouvelles fonctionnalités et syntaxes dans ES6. Si vous êtes intéressé, vous pouvez consulter le blog de l'équipe Mozilla, qui présente une introduction très détaillée et une série d'articles.

introduction de la série Mozilla-ES6

D'accord, ce sont trois nouveautés pratiques que j'ai trouvées dans ES6. Ces trois devraient être les plus utilisées dans le développement quotidien. Je vais en faire un enregistrement ici.

Il s’agit des nouvelles fonctionnalités très pratiques d’ES6, j’espère que cela vous sera utile !