ES5、ES6概述和新特性介绍
写在前面：什么是ES，我们需要学什么？
ES全称ECMAScript它是一种由ECMA组织(前身欧洲计算机制
造商协会)制定和发布的脚本语言规范。
而我们学的JavaScript是ECMA的实现，但术语JavaScript和ECMAScript平时表达的是一个意思
JS包括三个部分
1）.ECMAScript（核心）
2）扩展==》浏览器端
BOM（浏览器对象模型）
DOM（文档对象模型）
扩展==》服务器端
Node
ES的几个重要版本
ES5:09年发布
ES6（ES2015）：15年发布，也称为ECMA2015（引入严格模式、JSON，扩展对象、数组、原型、字符串、日期方法）
ES7（ES2016）：16年发布，也称为ECMA2016（模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等，相比ES5变化不大）
一、ES5简介：
ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(strict mode)”。
二、浏览器支持
Opera 11.60 Internet Explorer 9* //ie10才支持严格模式 可以用es5shim处理兼容问题 Firefox 4 Safari 5.1** Chrome 13 兼容ie8: es5-shim https://www.npmjs.com/package/es5-shim
三、ES5的严格模式 ‘use strict’
给作者提供了选择一个限制性更强语言变种的方式
1. 消除不安全之处，保证安全运行
2. 提升编译效率
3. 未来发展趋势
规则:
1)变量先定义在使用 2)不允许变量重名 var a=1; function a(){} 3)不允许使用eval 4)不允许delete 4)不允许with语句 var sMessage = "hello"; with(sMessage) {alert(toUpperCase());}
四、JSON
JSON.parse、JSON.stringify
五、Json对象扩展
新增方法
Object.getPrototypeOf //__proto__(不推荐使用)===Object.getPrototypeOf [].__proto__===Object.getPrototypeOf([]); Object.create var o=Object.create({}) var o=Object.create({},{ p: { value: 42, writable: true, enumerable: true, configurable: true } }) Object.keys和 for_in 一模一样，不遍历其父级的属性 Object.defineProperty //vue2响应式原理 var obj={id:1}; Object.defineProperty(obj,'_id',{ get:function(){return this.id}, set:function(newVal){this.id=newVal*100} }) obj._id=11;console.log(obj); Object.defineProperties
六、ES5_数组扩展
新增方法
Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter
七、Function.prototype.bind
bind会返回一个函数，不会立即执行 call 立即执行 (window,1,2,3) apply 立即执行 (window,[1,2,3])
ES6简介
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
一、let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1) 不允许重复声明
2) 块儿级作用域
3) 不存在变量提升
4) 不影响作用域链
应用场景：以后声明变量使用 let 就对了
二、const 关键字
const 关键字用来声明常量，const 声明有以下特点
声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块儿级作用域
注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let
三、.模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
字符串中可以出现换行符
可以使用 ${xxx} 形式输出变量
// 定义字符串 let str = `<ul> <li>沈腾</li> <li>玛丽</li> <li>魏翔</li> <li>艾伦</li> </ul>`; // 变量拼接 let star = '王宁'; let result = `${star}在前几年离开了开心麻花`;
注意：当遇到字符串与变量拼接的情况使用模板字符串
四、箭头函数
ES6 允许使用「箭头」（=>）定义函数。
/** * 1. 通用写法 */ let fn = (arg1, arg2, arg3) => { return arg1 + arg2 + arg3; }
箭头函数的注意点:
如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的
执行结果
箭头函数 this 指向声明时所在作用域下 this 的值
箭头函数不能作为构造函数实例化
不能使用 arguments
/** * 2. 省略小括号的情况 */ let fn2 = num => { return num * 10; }; /** * 3. 省略花括号的情况 */ let fn3 = score => score * 20; /** * 4. this 指向声明时所在作用域中 this 的值 */ let fn4 = () => { console.log(this); } let school = { name: '郝苗苗', getName(){ let fn5 = () => { console.log(this); } fn5(); } };
注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适
五、rest 参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
/** * 作用与 arguments 类似 */ function add(...args){ console.log(args); } add(1,2,3,4,5); /** * rest 参数必须是最后一个形参 */ function minus(a,b,...args){ console.log(a,b,args); } minus(100,1,2,3,4,5,19);
注意：rest 参数非常适合不定个数参数函数的场景
六、Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，
用来封装异步操作并可以获取其成功或失败的结果。
Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法
七、Set
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯
一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
size 返回集合的元素个数 add 增加一个新元素，返回当前集合 delete 删除元素，返回 boolean 值 has 检测集合中是否包含某个元素，返回 boolean 值 clear 清空集合，返回 undefined //创建一个空集合 let s = new Set() //创建一个非空集合 let s1 = new Set([1,2,3,1,2,3]); //集合属性与方法 //返回集合的元素个数 console.log(s1.size); //添加新元素 console.log(s1.add(4)); //删除元素 console.log(s1.delete(1)); //检测是否存在某个值 console.log(s1.has(2)); //清空集合 console.log(s1.clear());
八、class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是
一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
class 声明类 constructor 定义构造函数初始化 extends 继承父类 super 调用父级构造方法 static 定义静态方法和属性 父类方法可以重写 //父类 class Phone { //构造方法 constructor(brand, color, price) { this.brand = brand; this.color = color; this.price = price; } //对象方法 call() { console.log('我可以打电话!!!') } } //子类 class SmartPhone extends Phone { constructor(brand, color, price, screen, pixel) { super(brand, color, price); this.screen = screen; this.pixel = pixel; } //子类方法 photo(){ console.log('我可以拍照!!'); } playGame(){ console.log('我可以玩游戏!!'); } //方法重写 call(){ console.log('我可以进行视频通话!!'); } //静态方法 static run(){ console.log('我可以运行程序') } static connect(){ console.log('我可以建立连接') } } //实例化对象 const Nokia = new Phone('诺基亚', '灰色', 230); const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch','500w'); //调用子类方法 iPhone6s.playGame(); //调用重写方法 iPhone6s.call(); //调用静态方法 SmartPhone.run();
九、模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势有以下几点：
防止命名冲突
代码复用
高维护性
模块化规范产品
ES6 之前的模块化规范有：
CommonJS => NodeJS、Browserify
AMD => requireJS
CMD => seaJS
