recherche
Maisoninterface Webjs tutorielApprenez les dernières compétences standard ES6_javascript avec moi

Bien que ES6 ne soit pas encore sorti, il existe déjà des programmes réécrits en ES6, et diverses propositions pour ES789 ont déjà commencé. Les tendances ne sont pas quelque chose que nous et le public pouvons suivre.

Même si la tendance est trop rapide, si nous n’arrêtons pas le rythme d’apprentissage, nous ne serons pas en reste par la tendance. Jetons un coup d’œil aux nouvelles fonctionnalités d’ES6, une nouvelle génération de JS.

Opérateur de flèche

Si vous connaissez C# ou Java, vous devez connaître les expressions lambda. Le nouvel opérateur de flèche => dans ES6 a le même objectif. Cela simplifie les fonctions d’écriture. Le côté gauche de l'opérateur correspond aux paramètres d'entrée et le côté droit correspond à l'opération effectuée et à la valeur renvoyée Inputs=>outputs.

Nous savons que les rappels sont courants en JS, et généralement les rappels apparaissent sous la forme de fonctions anonymes. Il est nécessaire d'écrire une fonction à chaque fois, ce qui est très fastidieux. Lorsque l'opérateur flèche est introduit, les rappels peuvent être facilement écrits. Veuillez consulter l'exemple ci-dessous.

var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
 console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

Vous pouvez ouvrir la page de traduction du code en ligne du traceur mentionnée au début de l'article et saisir le code pour voir l'effet.

soutien de classe

ES6 a ajouté le support des classes et introduit le mot-clé class (en fait, class a toujours été un mot réservé en JavaScript, le but est de considérer qu'il pourra être utilisé dans de nouvelles versions à l'avenir, et maintenant il arrive enfin pratique) . JS lui-même est orienté objet et les classes fournies dans ES6 ne sont en réalité que des wrappers pour le modèle de prototype JS. Maintenant que la prise en charge des classes natives est fournie, la création et l'héritage d'objets sont plus intuitifs et les concepts tels que l'invocation de méthodes de classe parent, l'instanciation, les méthodes statiques et les constructeurs sont plus visuels.

Le code suivant montre l'utilisation des classes dans ES6. Encore une fois, vous pouvez coller le code dans le traceur pour voir vous-même les résultats.

//类的定义
class Animal {
 //ES6中新型构造器
 constructor(name) {
 this.name = name;
 }
 //实例方法
 sayName() {
 console.log('My name is '+this.name);
 }
}
//类的继承
class Programmer extends Animal {
 constructor(name) {
 //直接调用父类构造器进行初始化
 super(name);
 }
 program() {
 console.log("I'm coding...");
 }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy'
wayou.sayName();//输出 ‘My name is wayou'
wayou.program();//输出 ‘I'm coding...'
 

Littéraux d'objet améliorés

Les littéraux d'objet ont été améliorés, la méthode d'écriture est plus concise et flexible, et plus de choses peuvent être faites lors de la définition d'objets. Spécifiquement affiché dans :

  • Les prototypes peuvent être définis dans des littéraux d'objet
  • Vous pouvez définir des méthodes sans le mot-clé function
  • Appelez directement la méthode de la classe parent

De cette façon, les littéraux d'objet sont plus cohérents avec le concept de classe mentionné ci-dessus, ce qui rend plus facile et plus pratique l'écriture de JavaScript orienté objet.

//通过对象字面量创建对象
var human = {
 breathe() {
 console.log('breathing...');
 }
};
var worker = {
 __proto__: human, //设置此对象的原型为human,相当于继承human
 company: 'freelancer',
 work() {
 console.log('working...');
 }
};
human.breathe();//输出 ‘breathing...'
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...'

Modèle de chaîne

Les modèles de chaînes sont relativement simples et faciles à comprendre. ES6 permet l'utilisation de backticks ` pour créer des chaînes. La chaîne créée de cette manière peut contenir des variables ${vraible} entourées de signes dollar et d'accolades. Si vous avez utilisé un langage back-end fortement typé tel que C#, vous devez être familier avec cette fonctionnalité.

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

Déconstruction

Analyser automatiquement les valeurs dans des tableaux ou des objets. Par exemple, si une fonction souhaite renvoyer plusieurs valeurs, l'approche conventionnelle consiste à renvoyer un objet et à renvoyer chaque valeur en tant que propriété de l'objet. Mais dans ES6, en utilisant la fonctionnalité de déstructuration, vous pouvez renvoyer directement un tableau, puis les valeurs du tableau seront automatiquement analysées dans la variable correspondante qui reçoit la valeur.

var [x,y]=getVal(),//函数返回值的解构
 [name,,age]=['wayou','male','secrect'];//数组解构

function getVal() {
 return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//输出:x:1, y:2 
console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect 

Valeur par défaut du paramètre, paramètre variable, paramètre étendu

1. Valeur du paramètre par défaut

Vous pouvez désormais spécifier les valeurs par défaut des paramètres lors de la définition d'une fonction, au lieu d'utiliser l'opérateur logique OU comme auparavant.

function sayHello(name){
 //传统的指定默认参数的方式
 var name=name||'dude';
 console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
 console.log(`Hello ${name}`);
}
sayHello();//输出:Hello dude
sayHello('Wayou');//输出:Hello Wayou
sayHello2();//输出:Hello dude
sayHello2('Wayou');//输出:Hello Wayou

2. Paramètres indéfinis

Les paramètres indéfinis sont l'utilisation de paramètres nommés dans une fonction tout en recevant un nombre indéfini de paramètres sans nom. Il ne s'agit que de sucre syntaxique, et dans le code JavaScript précédent, nous pouvions y parvenir grâce à la variable arguments. Le format des paramètres variables est composé de trois points suivis des noms de variables représentant tous les paramètres variables. Par exemple, dans l'exemple suivant,...x représente tous les paramètres transmis à la fonction add.

//将所有参数相加的函数
function add(...x){
 return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出:6
console.log(add(1,2,3,4,5));//输出:15 

3. Paramètres d'expansion

Les paramètres étendus sont une autre forme de sucre de syntaxe, qui permet de transmettre des tableaux ou des paramètres de type tableau directement en tant que paramètres de fonction sans passer par l'application.

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
 console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock 

mots clés let et const

Vous pouvez considérer let comme var, sauf que les variables qu'il définit ne peuvent être utilisées que dans une portée spécifique et ne sont pas valides en dehors de cette portée. const est très intuitif et sert à définir des constantes, c'est-à-dire des variables dont les valeurs ne peuvent pas être modifiées.

for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出:undefined,严格模式下会报错

pour le parcours de valeur

Nous savons tous que la boucle for in est utilisée pour parcourir des tableaux, des tableaux ou des objets. La boucle for of nouvellement introduite dans ES6 a des fonctions similaires. La différence est qu'à chaque fois qu'elle boucle, elle ne fournit pas de numéro de série. mais une valeur.

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
 console.log(v);//输出 a,b,c
}

注意,此功能google traceur并未实现,所以无法模拟调试,下面有些功能也是如此

iterator, generator

这一部分的内容有点生涩,详情可以参见这里。以下是些基本概念。

  • iterator:它是这么一个对象,拥有一个next方法,这个方法返回一个对象{done,value},这个对象包含两个属性,一个布尔类型的done和包含任意值的value
  • iterable: 这是这么一个对象,拥有一个obj[@@iterator]方法,这个方法返回一个iterator
  • generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数(generator function)。generator同时拥有一个throw方法
  • generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
  • yield 关键字:它可以暂停函数的执行,随后可以再进进入函数继续执行

模块

在ES6标准中,JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS和AMD模式。

将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用。下面的例子来自tutsplus:

// point.js
module "point" {
 export class Point {
 constructor (x, y) {
  public x = x;
  public y = y;
 }
 }
}
 
// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

Map,Set 和 WeakMap,WeakSet

这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时,在进行属性值添加与获取时有专门的get,set 方法。

下方代码来自es6feature

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有时候我们会把对象作为一个对象的键用来存放属性值,普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收,有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些,这些作为属性键的对象如果没有别的变量在引用它们,则会被回收释放掉,具体还看下面的例子。

正文代码来自es6feature

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它,所以ws不会保存它的值,也就是说这次添加其实没有意思

Proxies

Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。

以下例子借用自这里。

//定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
var interceptor = {
 set: function (receiver, property, value) {
 console.log(property, 'is changed to', value);
 receiver[property] = value;
 }
};
//创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60;//控制台输出:salary is changed to 60

上面代码我已加了注释,这里进一步解释。对于处理程序,是在被侦听的对象身上发生了相应事件之后,处理程序里面的方法就会被调用,上面例子中我们设置了set的处理函数,表明,如果我们侦听的对象的属性被更改,也就是被set了,那这个处理程序就会被调用,同时通过参数能够得知是哪个属性被更改,更改为了什么值。

Symbols

我们知道对象其实是键值对的集合,而键通常来说是字符串。而现在除了字符串外,我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型,像数字,字符串还有布尔一样,它不是一个对象。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性,外部无法直接访问由symbol做为键的属性值。

以下例子来自es6features

(function() {

 // 创建symbol
 var key = Symbol("key");

 function MyClass(privateData) {
 this[key] = privateData;
 }

 MyClass.prototype = {
 doStuff: function() {
 ... this[key] ...
 }
 };

})();

var c = new MyClass("hello")
c["key"] === undefined//无法访问该属性,因为是私有的

Math,Number,String,Object 的新API

对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features,对这些新API进行了简单展示。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。

//创建promise
var promise = new Promise(function(resolve, reject) {
 // 进行一些异步或耗时操作
 if ( /*如果成功 */ ) {
 resolve("Stuff worked!");
 } else {
 reject(Error("It broke"));
 }
});
//绑定处理程序
promise.then(function(result) {
 //promise成功的话会执行这里
 console.log(result); // "Stuff worked!"
}, function(err) {
 //promise失败会执行这里
 console.log(err); // Error: "It broke"
});

Le résumé n'est qu'une phrase. La différence entre le front-end et le back-end est de plus en plus petite. Cet article est basé sur lukehoban/es6features et fait également référence à de nombreuses informations du blog. Le but de l'éditeur est d'aider. tout le monde comprend mieux le dernier standard de JavaScript, ECMAScript 6. J'espère que cela sera utile à l'étude de chacun.

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
L'évolution de JavaScript: tendances actuelles et perspectives d'avenirL'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Démystifier javascript: ce qu'il fait et pourquoi c'est importantDémystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Python ou JavaScript est-il meilleur?Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AM

Python est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.

Comment installer JavaScript?Comment installer JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript ne nécessite pas d'installation car il est déjà intégré à des navigateurs modernes. Vous n'avez besoin que d'un éditeur de texte et d'un navigateur pour commencer. 1) Dans l'environnement du navigateur, exécutez-le en intégrant le fichier HTML via des balises. 2) Dans l'environnement Node.js, après avoir téléchargé et installé Node.js, exécutez le fichier JavaScript via la ligne de commande.

Comment envoyer des notifications avant le début d'une tâche en quartz?Comment envoyer des notifications avant le début d'une tâche en quartz?Apr 04, 2025 pm 09:24 PM

Comment envoyer à l'avance des notifications de tâches en quartz lors de l'utilisation du minuteur de quartz pour planifier une tâche, le temps d'exécution de la tâche est défini par l'expression CRON. Maintenant...

Dans JavaScript, comment obtenir des paramètres d'une fonction sur une chaîne prototype dans un constructeur?Dans JavaScript, comment obtenir des paramètres d'une fonction sur une chaîne prototype dans un constructeur?Apr 04, 2025 pm 09:21 PM

Comment obtenir les paramètres des fonctions sur les chaînes prototypes en JavaScript dans la programmation JavaScript, la compréhension et la manipulation des paramètres de fonction sur les chaînes prototypes est une tâche commune et importante ...

Quelle est la raison de la défaillance du déplacement de style dynamique Vue.js dans le WECHAT Mini Program WebView?Quelle est la raison de la défaillance du déplacement de style dynamique Vue.js dans le WECHAT Mini Program WebView?Apr 04, 2025 pm 09:18 PM

Analyse de la raison pour laquelle la défaillance du déplacement de style dynamique de l'utilisation de Vue.js dans la vue Web de l'applet WeChat utilise Vue.js ...

Comment implémenter des demandes de GET simultanées pour plusieurs liens dans Tampermonkey et déterminer les résultats de retour en séquence?Comment implémenter des demandes de GET simultanées pour plusieurs liens dans Tampermonkey et déterminer les résultats de retour en séquence?Apr 04, 2025 pm 09:15 PM

Comment faire des demandes d'obtention simultanées pour plusieurs liens et juger en séquence pour retourner les résultats? Dans les scripts de Tampermonkey, nous devons souvent utiliser plusieurs chaînes ...

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.