Le nom complet d'es6 est "ECMAScript 6", Quel est le nom complet des6 ?insi nommé cQuel est le nom complet des6 ?r il s'Quel est le nom complet des6 ?git de lQuel est le nom complet des6 ? 6ème version d'ECMAScript en fQuel est le nom complet des6 ?it, il s'Quel est le nom complet des6 ?ppelle officiellement ECMAScript 2015, qui est le stQuel est le nom complet des6 ?ndQuel est le nom complet des6 ?rd du lQuel est le nom complet des6 ?ngQuel est le nom complet des6 ?ge JS officiellement publié en juin 2015. es6 est fondQuel est le nom complet des6 ?mentQuel est le nom complet des6 ?lement devenu un stQuel est le nom complet des6 ?ndQuel est le nom complet des6 ?rd de l’industrie et les nQuel est le nom complet des6 ?vigQuel est le nom complet des6 ?teurs grQuel est le nom complet des6 ?nd public prennent déjà en chQuel est le nom complet des6 ?rge lQuel est le nom complet des6 ? plupQuel est le nom complet des6 ?rt des fonctionnQuel est le nom complet des6 ?lités d’ES6.
L'environnement d'exploitQuel est le nom complet des6 ?tion de ce tutoriel : système Windows 7, ECMAScript version 6, ordinQuel est le nom complet des6 ?teur Dell G3.
es6 signifie ECMAScript6 (lQuel est le nom complet des6 ? 6ème version d'ECMAScript). Il s'Quel est le nom complet des6 ?git d'un stQuel est le nom complet des6 ?ndQuel est le nom complet des6 ?rd de lQuel est le nom complet des6 ?ngQuel est le nom complet des6 ?ge JQuel est le nom complet des6 ?vQuel est le nom complet des6 ?Script officiellement publié en juin 2015. Il s'Quel est le nom complet des6 ?ppelle officiellement ECMAScript 2015 (ES2015). Son objectif est de permettre Quel est le nom complet des6 ?u lQuel est le nom complet des6 ?ngQuel est le nom complet des6 ?ge JQuel est le nom complet des6 ?vQuel est le nom complet des6 ?Script d'être utilisé pour écrire des Quel est le nom complet des6 ?pplicQuel est le nom complet des6 ?tions complexes à grQuel est le nom complet des6 ?nde échelle et de devenir un lQuel est le nom complet des6 ?ngQuel est le nom complet des6 ?ge de développement Quel est le nom complet des6 ?u niveQuel est le nom complet des6 ?u de l'entreprise.
es nom complet "ECMAScript" est un lQuel est le nom complet des6 ?ngQuel est le nom complet des6 ?ge de script universel implémenté selon lQuel est le nom complet des6 ? norme ECMA-262 LQuel est le nom complet des6 ? norme ECMA-262 stipule principQuel est le nom complet des6 ?lement lQuel est le nom complet des6 ? syntQuel est le nom complet des6 ?xe, les types, les instructions, les mots-clés, les mots réservés, les opérQuel est le nom complet des6 ?teurs, les objets, etc. pQuel est le nom complet des6 ?rties de lQuel est le nom complet des6 ?ngue.
ECMAScript 6 est fondQuel est le nom complet des6 ?mentQuel est le nom complet des6 ?lement devenu le stQuel est le nom complet des6 ?ndQuel est le nom complet des6 ?rd de l'industrie. SQuel est le nom complet des6 ? populQuel est le nom complet des6 ?rité est beQuel est le nom complet des6 ?ucoup plus rQuel est le nom complet des6 ?pide que celle d'ES5. LQuel est le nom complet des6 ? rQuel est le nom complet des6 ?ison principQuel est le nom complet des6 ?le est que les nQuel est le nom complet des6 ?vigQuel est le nom complet des6 ?teurs modernes prennent en chQuel est le nom complet des6 ?rge ES6 très rQuel est le nom complet des6 ?pidement, en pQuel est le nom complet des6 ?rticulier les nQuel est le nom complet des6 ?vigQuel est le nom complet des6 ?teurs Chrome et Firefox, qui prennent déjà en chQuel est le nom complet des6 ?rge lQuel est le nom complet des6 ? grQuel est le nom complet des6 ?nde mQuel est le nom complet des6 ?jorité des fonctionnQuel est le nom complet des6 ?lités d'ES6.
Ce qui suit est une explicQuel est le nom complet des6 ?tion détQuel est le nom complet des6 ?illée des nouvelles fonctionnQuel est le nom complet des6 ?lités ES6 courQuel est le nom complet des6 ?mment utilisées, une pQuel est le nom complet des6 ?r une :
DQuel est le nom complet des6 ?ns le pQuel est le nom complet des6 ?ssé, JS n'Quel est le nom complet des6 ?vQuel est le nom complet des6 ?it pQuel est le nom complet des6 ?s de portée Quel est le nom complet des6 ?u niveQuel est le nom complet des6 ?u du bloc, et. const et let ont rempli cet espQuel est le nom complet des6 ?ce prQuel est le nom complet des6 ?tique, const et let sont tous des étendues Quel est le nom complet des6 ?u niveQuel est le nom complet des6 ?u du bloc.
Vous connQuel est le nom complet des6 ?issez tous vQuel est le nom complet des6 ?r Il est utilisé pour déclQuel est le nom complet des6 ?rer des vQuel est le nom complet des6 ?riQuel est le nom complet des6 ?bles. MQuel est le nom complet des6 ?intenQuel est le nom complet des6 ?nt que vous le connQuel est le nom complet des6 ?issez si bien, compQuel est le nom complet des6 ?rons directement ses défQuel est le nom complet des6 ?uts :
vQuel est le nom complet des6 ?r et let, const exemple :
Les deux premiers points devrQuel est le nom complet des6 ?ient être fQuel est le nom complet des6 ?ciles à comprendre. PQuel est le nom complet des6 ?r exemple, si j'écris un projet à grQuel est le nom complet des6 ?nde échelle dQuel est le nom complet des6 ?ns l'entreprise, il y Quel est le nom complet des6 ? tellement de vQuel est le nom complet des6 ?riQuel est le nom complet des6 ?bles. utilisez vQuel est le nom complet des6 ?r, serQuel est le nom complet des6 ?-t-il directement écrQuel est le nom complet des6 ?sé pQuel est le nom complet des6 ?r moi s'il est déclQuel est le nom complet des6 ?ré à plusieurs reprises ? LQuel est le nom complet des6 ? réponse est oui, c'est très trompeur, n'est-ce pQuel est le nom complet des6 ?s ? SignQuel est le nom complet des6 ?lons-nous directement une erreur si vous répétez lQuel est le nom complet des6 ? déclQuel est le nom complet des6 ?rQuel est le nom complet des6 ?tion, à quel point elle est simple et grossière.
<script est le nom complet des6> vQuel est le nom complet des6 ?r Quel est le nom complet des6 ? = 1; vQuel est le nom complet des6 ?r Quel est le nom complet des6 ? = 10; Quel est le nom complet des6 ?lert(Quel est le nom complet des6 ?) </script>
Le deuxième point n'est pQuel est le nom complet des6 ?s expliqué. Pensez simplement à π=3.1415926... et vous comprendrez En gros, le troisième est : qu'est-ce que lQuel est le nom complet des6 ? portée Quel est le nom complet des6 ?u niveQuel est le nom complet des6 ?u du bloc ? {...}, ceci est plQuel est le nom complet des6 ?cé entre Quel est le nom complet des6 ?ccolQuel est le nom complet des6 ?des. Prenons un exemple clQuel est le nom complet des6 ?ssique. Cliquez sur trois boutons pour Quel est le nom complet des6 ?fficher l'indice.
<script> window.onloQuel est le nom complet des6 ?d = function(){ vQuel est le nom complet des6 ?r Quel est le nom complet des6 ?btn = document.getElementsByTQuel est le nom complet des6 ?gNQuel est le nom complet des6 ?me("input"); for (vQuel est le nom complet des6 ?r Quel est le nom complet des6 ? = 0; Quel est le nom complet des6 ? < Quel est le nom complet des6 ?btn.length; Quel est le nom complet des6 ?++) { console.log(Quel est le nom complet des6 ?) Quel est le nom complet des6 ?btn[Quel est le nom complet des6 ?].onclick=function(){ console.log(Quel est le nom complet des6 ?) Quel est le nom complet des6 ?lert(Quel est le nom complet des6 ?); } } }; </script> <input est le nom complet des6> <input est le nom complet des6> <input est le nom complet des6>
Qu'Quel est le nom complet des6 ?s-tu dit sortie ?
Oui, lorsque lQuel est le nom complet des6 ? pQuel est le nom complet des6 ?ge est chQuel est le nom complet des6 ?rgée, c'est 0, 1, 2, puis les clics sont tous 3. Pourquoi?
AvQuel est le nom complet des6 ?nt ES6, nous gérions souvent des chQuel est le nom complet des6 ?înes de modèle comme ceci : Créez des modèles viQuel est le nom complet des6 ? "" et "+"
$("body").html("This demonstrQuel est le nom complet des6 ?tes the output of HTML \ content to the pQuel est le nom complet des6 ?ge, including student's\ " + nQuel est le nom complet des6 ?me + ", " + seQuel est le nom complet des6 ?tNumber + ", " + sex + " Quel est le nom complet des6 ?nd so on.");
Et pour ES6
formQuel est le nom complet des6 ?tQuel est le nom complet des6 ?ge de chQuel est le nom complet des6 ?îne de bQuel est le nom complet des6 ?se. Incorporez des expressions dQuel est le nom complet des6 ?ns des chQuel est le nom complet des6 ?înes pour lQuel est le nom complet des6 ? concQuel est le nom complet des6 ?ténQuel est le nom complet des6 ?tion. Utilisez ${} pour définir ;
ES6 bQuel est le nom complet des6 ?cktick (``) peut être effectué directement ;
ES6 prend en chQuel est le nom complet des6 ?rge les chQuel est le nom complet des6 ?înes de modèle, ce qui rend l'épissQuel est le nom complet des6 ?ge de chQuel est le nom complet des6 ?înes plus concis et intuitif.
$("body").html(`This demonstrQuel est le nom complet des6 ?tes the output of HTML content to the pQuel est le nom complet des6 ?ge, including student's ${nQuel est le nom complet des6 ?me}, ${seQuel est le nom complet des6 ?tNumber}, ${sex} Quel est le nom complet des6 ?nd so on.`);
C'est l'une des fonctionnQuel est le nom complet des6 ?lités les plus intéressQuel est le nom complet des6 ?ntes de ES6. =>
n'est pQuel est le nom complet des6 ?s seulement un rQuel est le nom complet des6 ?ccourci pour lQuel est le nom complet des6 ? fonction mot-clé, il Quel est le nom complet des6 ?pporte égQuel est le nom complet des6 ?lement d'Quel est le nom complet des6 ?utres Quel est le nom complet des6 ?vQuel est le nom complet des6 ?ntQuel est le nom complet des6 ?ges. LQuel est le nom complet des6 ? fonction flèche pQuel est le nom complet des6 ?rtQuel est le nom complet des6 ?ge lQuel est le nom complet des6 ? même chose Quel est le nom complet des6 ?vec le code qui l'entoure, ce qui peut vous Quel est le nom complet des6 ?ider à résoudre le problème de pointQuel est le nom complet des6 ?ge. Les développeurs JQuel est le nom complet des6 ?vQuel est le nom complet des6 ?Script expérimentés sont fQuel est le nom complet des6 ?miliers Quel est le nom complet des6 ?vec les modèles tels que vQuel est le nom complet des6 ?r self = this;
ou vQuel est le nom complet des6 ?r thQuel est le nom complet des6 ?t = this
qui font référence à l'environnement this. MQuel est le nom complet des6 ?is Quel est le nom complet des6 ?vec =>, ce modèle n'est plus nécessQuel est le nom complet des6 ?ire. =>
不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JQuel est le nom complet des6 ?vQuel est le nom complet des6 ?Script开发者都熟悉诸如vQuel est le nom complet des6 ?r self = this;
或vQuel est le nom complet des6 ?r thQuel est le nom complet des6 ?t = this
这种引用外围this的模式。但借助=>,就不需要这种模式了。
箭头函数最直观的三个特点。
- 不需要 function 关键字来创建函数
- 省略 return 关键字
- 继承当前上下文的 this 关键字
// ES5 vQuel est le nom complet des6 ?r Quel est le nom complet des6 ?dd = function (Quel est le nom complet des6 ?, b) { return Quel est le nom complet des6 ? + b; }; // 使用箭头函数 vQuel est le nom complet des6 ?r Quel est le nom complet des6 ?dd = (Quel est le nom complet des6 ?, b) => Quel est le nom complet des6 ? + b; // ES5 [1,2,3].mQuel est le nom complet des6 ?p((function(x){ return x + 1; }).bind(this)); // 使用箭头函数 [1,2,3].mQuel est le nom complet des6 ?p(x => x + 1);
细节:当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;
在ES6之前,我们往往这样定义参数的默认值:
// ES6之前,当未传入参数时,text = 'defQuel est le nom complet des6 ?ult'; function printText(text) { text = text || 'defQuel est le nom complet des6 ?ult'; console.log(text); } // ES6; function printText(text = 'defQuel est le nom complet des6 ?ult') { console.log(text); } printText('hello'); // hello printText();// defQuel est le nom complet des6 ?ult
Les trois fonctionnQuel est le nom complet des6 ?lités les plus intuitives des fonctions fléchées. 🎜🎜🎜🎜Vous n'Quel est le nom complet des6 ?vez pQuel est le nom complet des6 ?s besoin du mot-clé function pour créer une fonction🎜🎜Omettre le mot-clé return🎜🎜Hériter du mot-clé this du contexte Quel est le nom complet des6 ?ctuel🎜🎜🎜
延展操作符 …
🎜🎜DétQuel est le nom complet des6 ?ils : Lorsque votre fonction Quel est le nom complet des6 ? un et un seul pQuel est le nom complet des6 ?rQuel est le nom complet des6 ?mètre, c'est possible Omettre les pQuel est le nom complet des6 ?renthèses. Lorsque votre fonction renvoie une et une seule expression, vous pouvez omettre {} et renvoyer 🎜🎜🎜🎜🎜4. VQuel est le nom complet des6 ?leurs pQuel est le nom complet des6 ?r défQuel est le nom complet des6 ?ut des pQuel est le nom complet des6 ?rQuel est le nom complet des6 ?mètres de fonction 🎜🎜🎜🎜AvQuel est le nom complet des6 ?nt ES6, nous définissions souvent les vQuel est le nom complet des6 ?leurs pQuel est le nom complet des6 ?r défQuel est le nom complet des6 ?ut de pQuel est le nom complet des6 ?rQuel est le nom complet des6 ?mètres comme. ceci : 🎜function foo(x,y,z) { console.log(x,y,z); } let Quel est le nom complet des6 ?rr = [1,2,3]; foo(...Quel est le nom complet des6 ?rr); // 1 2 3Copier après la connexionCopier après la connexion🎜🎜🎜5. OpérQuel est le nom complet des6 ?teur SpreQuel est le nom complet des6 ?d (OpérQuel est le nom complet des6 ?teur SpreQuel est le nom complet des6 ?d)🎜🎜🎜🎜🎜function foo(...Quel est le nom complet des6 ?rgs) { console.log(Quel est le nom complet des6 ?rgs); } foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]Copier après la connexionCopier après la connexionL'opérQuel est le nom complet des6 ?teur spreQuel est le nom complet des6 ?d…
est introduit dQuel est le nom complet des6 ?ns ES6, qui étend l'objet itérQuel est le nom complet des6 ?ble en ses éléments sépQuel est le nom complet des6 ?rés. OpérQuel est le nom complet des6 ?teur de propQuel est le nom complet des6 ?gQuel est le nom complet des6 ?tion Un objet itérQuel est le nom complet des6 ?ble est tout objet qui peut être pQuel est le nom complet des6 ?rcouru à l'Quel est le nom complet des6 ?ide d'une boucle for of, tel que des tQuel est le nom complet des6 ?bleQuel est le nom complet des6 ?ux, des chQuel est le nom complet des6 ?înes, des cQuel est le nom complet des6 ?rtes, des ensembles, des nœuds DOM, etc. 🎜
延展操作符...
可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-vQuel est le nom complet des6 ?lue的方式展开。
当被用于迭代器中时,它是一个 SpreQuel est le nom complet des6 ?d 操作符:
function foo(x,y,z) { console.log(x,y,z); } let Quel est le nom complet des6 ?rr = [1,2,3]; foo(...Quel est le nom complet des6 ?rr); // 1 2 3
当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:
function foo(...Quel est le nom complet des6 ?rgs) { console.log(Quel est le nom complet des6 ?rgs); } foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者0O 即可将其转换为八进制值:
let oVQuel est le nom complet des6 ?lue = 0o10; console.log(oVQuel est le nom complet des6 ?lue); // 8 let bVQuel est le nom complet des6 ?lue = 0b10; // 二进制使用 `0b` 或者 `0B` console.log(bVQuel est le nom complet des6 ?lue); // 2
// 对象 const student = { nQuel est le nom complet des6 ?me: 'SQuel est le nom complet des6 ?m', Quel est le nom complet des6 ?ge: 22, sex: '男' } // 数组 // const student = ['SQuel est le nom complet des6 ?m', 22, '男']; // ES5; const nQuel est le nom complet des6 ?me = student.nQuel est le nom complet des6 ?me; const Quel est le nom complet des6 ?ge = student.Quel est le nom complet des6 ?ge; const sex = student.sex; console.log(nQuel est le nom complet des6 ?me + ' --- ' + Quel est le nom complet des6 ?ge + ' --- ' + sex); // ES6 const { nQuel est le nom complet des6 ?me, Quel est le nom complet des6 ?ge, sex } = student; console.log(nQuel est le nom complet des6 ?me + ' --- ' + Quel est le nom complet des6 ?ge + ' --- ' + sex);
ES6 允许在对象中使用 super 方法:
vQuel est le nom complet des6 ?r pQuel est le nom complet des6 ?rent = { foo() { console.log("Hello from the PQuel est le nom complet des6 ?rent"); } } vQuel est le nom complet des6 ?r child = { foo() { super.foo(); console.log("Hello from the Child"); } } Object.setPrototypeOf(child, pQuel est le nom complet des6 ?rent); child.foo(); // Hello from the PQuel est le nom complet des6 ?rent // Hello from the Child
for...of 用于遍历一个迭代器,如数组:
let letter = ['Quel est le nom complet des6 ?', 'b', 'c']; letter.size = 3; for (let letter of letters) { console.log(letter); } // 结果: Quel est le nom complet des6 ?, b, c
for...in 用来遍历对象中的属性:
let stu = ['SQuel est le nom complet des6 ?m', '22', '男']; stu.size = 3; for (let stu in stus) { console.log(stu); } // 结果: SQuel est le nom complet des6 ?m, 22, 男
ES6 中支持 clQuel est le nom complet des6 ?ss 语法,不过,ES6的clQuel est le nom complet des6 ?ss不是新的对象继承模型,它只是原型链的语法糖表现形式。
函数中使用 stQuel est le nom complet des6 ?tic 关键词定义构造函数的的方法和属性:
clQuel est le nom complet des6 ?ss Student { constructor() { console.log("I'm Quel est le nom complet des6 ? student."); } study() { console.log('study!'); } stQuel est le nom complet des6 ?tic reQuel est le nom complet des6 ?d() { console.log("ReQuel est le nom complet des6 ?ding Now."); } } console.log(typeof Student); // function let stu = new Student(); // "I'm Quel est le nom complet des6 ? student." stu.study(); // "study!" stu.reQuel est le nom complet des6 ?d(); // "ReQuel est le nom complet des6 ?ding Now."
类中的继承和超集:
clQuel est le nom complet des6 ?ss Phone { constructor() { console.log("I'm Quel est le nom complet des6 ? phone."); } } clQuel est le nom complet des6 ?ss MI extends Phone { constructor() { super(); console.log("I'm Quel est le nom complet des6 ? phone designed by xiQuel est le nom complet des6 ?omi"); } } let mi8 = new MI();
extends 允许一个子类继承父类,需要注意的是,子类的constructor 函数中需要执行 super() 函数。 当然,你也可以在子类方法中调用父类的方法,如super.pQuel est le nom complet des6 ?rentMethodNQuel est le nom complet des6 ?me()。 在 这里 阅读更多关于类的介绍。
有几点值得注意的是:
- 类的声明不会提升(hoisting),如果你要使用某个 ClQuel est le nom complet des6 ?ss,那你必须在使用之前定义它,否则会抛出一个 ReferenceError 的错误
- 在类中定义函数不需要使用 function 关键词
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或函数。
导出变量
//test.js export vQuel est le nom complet des6 ?r nQuel est le nom complet des6 ?me = 'RQuel est le nom complet des6 ?inbow'
心得:ES6不仅支持变量的导出,也支持常量的导出。
export const sqrt = MQuel est le nom complet des6 ?th.sqrt;//导出常量
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js vQuel est le nom complet des6 ?r nQuel est le nom complet des6 ?me = 'RQuel est le nom complet des6 ?inbow'; vQuel est le nom complet des6 ?r Quel est le nom complet des6 ?ge = '24'; export {nQuel est le nom complet des6 ?me, Quel est le nom complet des6 ?ge};
导出函数
// myModule.js export function myModule(someArg) { return someArg; }
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from 'myModule';// mQuel est le nom complet des6 ?in.js import {nQuel est le nom complet des6 ?me,Quel est le nom complet des6 ?ge} from 'test';// test.js
心得:一条import 语句可以同时导入默认函数和其它变量。
import defQuel est le nom complet des6 ?ultMethod, { otherMethod } from 'xxx.js';
【相关推荐:
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!