1、ECMAScript是什么? 和 JavaScript 有着怎样的关系?1996 年 11 月,Netscape 创造了javascript并将其提交给了标准化组织 ECMA,次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。ECMAScript更新了6个版本,最新正式版 ES6(ECMAScript 6)是 JavaScript 语言的下一代标准,早已在 2015 年 6 月正式发布。要问两者之间的关系,可以用 ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现这句话来形容。说的通俗易懂点:如果说设计图是标准,盖好的房子是实现,那么 ECMAScript就是设计图,JavaScript是盖好的房子。2、历史进化过程感悟:长路漫漫,吾将上下而求索!3、ES6兼容性分析3.1 横向对比(1)桌面端浏览器对ES2015的支持情况Chrome:51 版起便可以支持 97% 的 ES6 新特性。Firefox:53 版起便可以支持 97% 的 ES6 新特性。Safari:10 版起便可以支持 99% 的 ES6 新特性。IE:Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。(IE7~11 基本不支持 ES6)(2)移动端浏览器对ES2015的支持情况iOS:10.0 版起便可以支持 99% 的 ES6 新特性。Android:基本不支持 ES6 新特性(5.1 仅支持 25%)(3)服务器对ES2015的支持情况Node.js:6.5 版起便可以支持 97% 的 ES6 新特性。(6.0 支持 92%)3.2 纵向对比引用地址 https://caniuse.com/#search=es6引用地址 https://caniuse.com/#search=es5结论:现在的Chrome浏览器对ES6的支持已经做的相当棒了,但是有些低版本的浏览器还是不支持ES6的语法,例如IE8及其以下,说的就是你,不用再怀疑。4、为什么学习ES6?如果把前端开发比作成伐木头,那么ES3是斧头,ES5是钢锯,而ES6则是电锯,随着前端项目日趋复杂和移动端越来越主流,Vue、React、Angular等技术栈的大行其道,ES6 成为前端开发人员必须掌握的基本技能。掌握了ES6 不仅仅能够更加便捷的开发、大幅度的提高工作效率,更能够为学习Vue、React、Angular等技术栈甚至是NodeJS打下坚实的基础。说的这么666,那么……4.1 使用ES6编程,到底好在哪里?例一:在ES5中,我们不得不使用以下方法来表示多行字符串: var str =’<div id=“ul1”>’+ ‘<li>青年问禅师:</li>’+ ‘<li>“大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”</li>’+ ‘<li>禅师微微一笑:“我每天晚上睡觉前都关机!”</li>’+ ‘</div>’;然而在ES6中,仅仅用反引号就可以解决了: var str = <div id="ul1"> <li>青年问禅师:</li> <li>“大师终日答疑解惑、普渡众生,如何不为俗物所扰,静心修行?”</li> <li>禅师微微一笑:“我每天晚上睡觉前都关机!”</li> </div>
;例二:在ES5中实现对象拷贝效果:var createAssigner = function(keysFunc, undefinedOnly) { return function(obj) { var length = arguments.length; if (length < 2 || obj == null) return obj; for (var index = 1; index < length; index++) { var source = arguments[index], keys = keysFunc(source), l = keys.length; for (var i = 0; i < l; i++) { var key = keys[i]; if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key]; } } return obj; }; };var allKeys = function(obj){ var keys = []; for(var key in obj) keys.push(key); return keys;}var extend = createAssigner(allKeys);extend({a:111},{b:222});在ES6中实现对象拷贝效果:Object.assign({a:111},{b:222});同样实现一个对象拷贝效果,用ES5写需要20多行代码,但是用ES6写,只需要 1 行代码!!!当然,ES6还有很多强大的新特性等着我们去学习,ES6引入的新特性是ES5无法比拟的!4.2 ES6的新功能简介ES6过渡版本,ES4激进被废掉,ES5遗留很多问题,而ES6 兼容性还好,代码简洁,易用。(1)块级作用域绑定1 let声明2 const声明Constant Declarations3 循环中的块级绑定4 循环中的函数(2)函数的新增特性1 带默认参数的函数2 默认参数对 arguments 对象的影响3 默认参数表达式 Default Parameter Expressions4 未命名参数问题5 函数中的扩展运算符(3)全新的函数箭头函数1 箭头函数语法2 使用箭头函数实现函数自执行3 箭头函数中无this绑定No this Binding4 无arguments绑定(4)对象功能的扩展1 对象类别2 对象字面量的语法扩展2.1 简写的属性初始化2.2 简写的方法声明2.3 在字面量中动态计算属性名3 新增的方法3.1 Objectis3.2 Object assign(5)字符串功能的增强1 查找子字符串2 repeat方法3 字符串模板字面量3.1 基本语法3.2 多行字符串3.3 字符串置换3.4 模板标签3.4.1 什么是模板标签3.4.2 定义模板标签(6)解构1 解构的实用性2 对象解构2.1 对象解构的基本形式2.2 解构赋值表达式2.3 对象解构时的默认值2.4 赋值给不同的变量名3 数组解构3.1 数组解构基本语法3.2 解构表达式(7)新的基本类型Symbol1 创建Symbol2 识别Symbol3 Symbol作为属性名4 Symbol属性名的遍历5 Symbolfor字符串和SymbolkeyForsymbol类型的值(8)Set数据结构1 创建Set和并添加元素2 Set中不能添加重复元素3 使用数组初始化Set4 判断一个值是否在Set中5 移除Set中的元素6 遍历Set7 将Set转换为数组(9)Map数据结构1 创建Map对象和Map的基本的存取操作2 Map与Set类似的3个方法3 初始化Map4 Map的forEach方法(10)迭代器和forof循环1 循环问题2 什么是迭代器3 生成器函数4 生成器函数表达式5 可迭代类型和for-of迭代循环6 访问可迭代类型的默认迭代器7 自定义可迭代类型(11)类1 ES5之前的模拟的类2 ES6中基本的类声明2 匿名类表达式3 具名类表达式 4 作为一等公民的类型5 动态计算类成员的命名6 静态成员7 ES6中的继承7.1 继承的基本写法7.2 在子类中屏蔽父类的方法7.3 静态方法也可以继承使用ES6之后,可以节约很多开发时间,用来。。。5、 如何使用ES6的新特性,又能保证浏览器的兼容?针对 ES6 的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的 ES6 语法转换成 ES5,相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel,jsx,traceur,es6-shim 等。下一节,我们将具体讲解该部分的知识。6、总结通过本节,我们了解了ECMAScript的发展进化史,以及ES6的一些新特性。随着JavaScript应用领域越来越广, 以及ES6 优雅的编程风格和模式、强大的功能,越来越多的程序正在使用ES6更好地实现。是不是对学习ES6充满了动力?OK,下节课开始,我们就讲讲如何搭建ES6的开发环境搭建,进行ES6开发。