软件开发工具与平台,杭州优化seo公司,做家宴网站,qq登录网站怎么做一、ECMAScript6标准简述 ECMAScript 6.0#xff08;以下简称 ES6#xff09;是 JavaScript 语言的下一代标准#xff0c;已经在 2015 年 6 月正式发布了。它的目标#xff0c;是使得 JavaScript 语言可以用来编写复杂的大型应用程序#xff0c;成为企业级开发语言。 1.1E…一、ECMAScript6标准简述 ECMAScript 6.0以下简称 ES6是 JavaScript 语言的下一代标准已经在 2015 年 6 月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序成为企业级开发语言。 1.1ECMAScript 和 JavaScript 的关系 要讲清楚这个问题需要回顾历史。1996 年 11 月JavaScript 的创造者 Netscape 公司决定将 JavaScript 提交给标准化组织 ECMA希望这种语言能够成为国际标准。次年ECMA 发布 262 号标准文件ECMA-262的第一版规定了浏览器脚本语言的标准并将这种语言称为 ECMAScript这个版本就是 1.0 版。 该标准从一开始就是针对 JavaScript 语言制定的但是之所以不叫 JavaScript有两个原因。一是商标Java 是 Sun 公司的商标根据授权协议只有 Netscape 公司可以合法地使用 JavaScript 这个名字且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA不是 Netscape这样有利于保证这门语言的开放性和中立性。 因此ECMAScript 和 JavaScript 的关系是前者是后者的规格后者是前者的一种实现另外的 ECMAScript 方言还有 Jscript 和 ActionScript。日常场合这两个词是可以互换的。 1.2ECMAScript 的历史 ES6 从开始制定到最后发布整整用了 15 年。 前面提到ECMAScript 1.0 是 1997 年发布的接下来的两年连续发布了 ECMAScript 2.01998 年 6 月和 ECMAScript 3.01999 年 12 月。3.0 版是一个巨大的成功在业界得到广泛支持成为通行标准奠定了 JavaScript 语言的基本语法以后的版本完全继承。直到今天初学者一开始学习 JavaScript其实就是在学 3.0 版的语法。 2000 年ECMAScript 4.0 开始酝酿。这个版本最后没有通过但是它的大部分内容被 ES6 继承了。因此ES6 制定的起点其实是 2000 年。 为什么 ES4 没有通过呢因为这个版本太激进了对 ES3 做了彻底升级导致标准委员会的一些成员不愿意接受。ECMA 的第 39 号技术专家委员会Technical Committee 39简称 TC39负责制订 ECMAScript 标准成员包括 Microsoft、Mozilla、Google 等大公司。 2007 年 10 月ECMAScript 4.0 版草案发布本来预计次年 8 月发布正式版本。但是各方对于是否通过这个标准发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司反对 JavaScript 的大幅升级主张小幅改动以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司则坚持当前的草案。 2008 年 7 月由于对于下一个版本应该包括哪些功能各方分歧太大争论过于激烈ECMA 开会决定中止 ECMAScript 4.0 的开发将其中涉及现有功能改善的一小部分发布为 ECMAScript 3.1而将其他激进的设想扩大范围放入以后的版本由于会议的气氛该版本的项目代号起名为 Harmony和谐。会后不久ECMAScript 3.1 就改名为 ECMAScript 5。 2009 年 12 月ECMAScript 5.0 版正式发布。Harmony 项目则一分为二一些较为可行的设想定名为 JavaScript.next 继续开发后来演变成 ECMAScript 6一些不是很成熟的设想则被视为 JavaScript.next.next在更远的将来再考虑推出。TC39 委员会的总体考虑是ES5 与 ES3 基本保持兼容较大的语法修正和新功能加入将由 JavaScript.next 完成。当时JavaScript.next 指的是 ES6第六版发布以后就指 ES7。TC39 的判断是ES5 会在 2013 年的年中成为 JavaScript 开发的主流标准并在此后五年中一直保持这个位置。 2011 年 6 月ECMAscript 5.1 版发布并且成为 ISO 国际标准ISO/IEC 16262:2011。 2013 年 3 月ECMAScript 6 草案冻结不再添加新功能。新的功能设想将被放到 ECMAScript 7。 2013 年 12 月ECMAScript 6 草案发布。然后是 12 个月的讨论期听取各方反馈。 2015 年 6 月ECMAScript 6 正式通过成为国际标准。从 2000 年算起这时已经过去了 15 年。 二、ES6常用语法 2.1变量的定义 ES5里面只有全局作用域函数作用域ES6的let带来了块级作用域全局作用域函数作用域 2.1.1 let定义变量 - 没有变量提升 - 带来了块级作用域 - 不能重复定义2.1.2 const定义常量 - 没有变量提升 - 带来了块级作用域 - 不能重复定义 - 定义的时候需要赋值 - 定义之后不能修改 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodyscript// ES5里面只有全局作用域函数作用域// ES6的let带来了块级作用域全局作用域函数作用域// if (true) {// let username alex;// }const PI 3.14;PI 3.2;console.log(PI)/script/body /html2.2模版字符串 2.2.1 反引号2.2.2 ${}存储变量 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodydiv idapp/divscriptvar oDiv document.getElementById(app);// oDiv.innerHTML h1Hello world // h2Hello world/h2 // h3hello world/h3 // /h1let username alex;let age 73;let hobby girls;oDiv.innerHTML h1Hello ${username}h2hello ${age}/h2h3hello ${hobby}/h3/h1/script /body /html2.3数据的结构赋值 2.3.1 数组的解构赋值2.3.2 对象的解构赋值 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodyscriptlet ary [1, 2, 3];// let a ary[0];// let b ary[1];// let c ary[2];let [a, b, c, d 1] ary;let obj {name: alex,age: 18};let { name: username, age } obj;console.log(username, age);/script/body /html2.4、函数的扩展 2.4.1 函数参数默认值2.4.2 箭头函数 - this的指向问题 - 定义的时候就确定了 - 普通函数的this指向调用者 - arguments不能使用 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodyscript// function foo(x, y10) {// number y;// return number;// }//// // ret foo(1, 2);// // var ret foo(1);// var ret foo(1, 0);// console.log(ret);// 第一个v代表需要传入的参数// 第二个v代表返回值// let func v v;// let func1 (x, y) x;// let func2 (x, y) {let result x y; return result;};// console.log(func(10));// console.log(func1(10, 20));// console.log(func2(10, 20));// function foo() {// console.log(this);// }//// foo();//// let obj {// func: foo,// };//// obj.func();function foo() {setTimeout(() console.log(this.id), 1000);setTimeout(function () {console.log(this.id)}, 2000)}var id 100;foo.call({id: 10})/script/body /html2.5类 2.5.1 必须要用new来实例化, 否则报错2.5.2 必须要有constructor构造函数如果没有默认传入constructor(){}2.5.3 类的继承 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodyscript// function Timer() {// this.t1 10;// }//// Timer.prototype.showInfo function () {// console.lo(this.t1);// }// let timer new Timer();//////// class Person{// constructor (uname, uage) {// this.uname uname;// this.uage uage;// }// showInfo() {// console.log(this.uname, this.uage);// }// }//// let person new Person(pizza, 18);// console.log(person.uname);class XiaoHe{constructor (userName, userAge, userAccount100000) {this.userName userName;this.userAge userAge;this.userAccount userAccount;}}class Peiqi extends XiaoHe{constructor (userName, userAge) {super(userName, userAge);this.userName userName;this.userAge userAge;}showInfor() {console.log(this.userName, this.userAge, this.userAccount);}}let peiqi new Peiqi(peiqi, 18);peiqi.showInfor();/script /body /html2.6对象的单体模式 2.6.1 解决了箭头函数中this的指向问题 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodyscriptvar obj {name: Pizza,func(){console.log(this.name);}};obj.func();/script/body /html转载于:https://www.cnblogs.com/wangshuyang/p/9875748.html