一、ECMASript 相关介绍
1.1什么是 ECMA
ECMA （ European Computer Manufacturers Association ）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 1994 年后该组织改名为 Ecma 国际。
1.2.什么是 ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言
1.3.什么是 ECMA-262
Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看http://www.ecma-international.org/publications/standards/Standard.htm
1.4.ECMA-262 历史
ECMA-262 （ ECMAScript ）历史版本查看网址http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm第 1 版1997 年制定了语言的基本语法第 2 版1998 年较小改动第 3 版1999 年引入正则、异常处理、格式化输出等。 IE 开始支持第 4 版2007 年过于激进，未发布第 5 版2009 年引入严格模式、 JSON ，扩展对象、数组、原型、字符串、日期方法第 6 版2015 年模块化、面向对象语法、Promise 、箭头函数、 let 、const 、数组解构赋值等等第 7 版2016 年幂运算符、数组扩展、Async/await 关键字第 8 版2017 年Async/await 、字符串扩展第 9 版2018 年对象解构赋值、正则扩展第 10 版2019 年扩展对象、数组方法ES.next动态指向下一个版本
1.5.谁在维护 ECMA-262
TC39 （ Technical Committee 39 ）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。 TC39 定期召开会议，会议由会员公司的代表与特邀专家出席
1.6.为什么要学习 ES6
ES6 的版本变动内容最多，具有里程碑意义⚫ ES6 加入许多新的语法特性，编程实现更简单、高效⚫ ES6 是前端发展趋势，就业必备技能
1.7.ES6 兼容性
http://kangax.github.io/compat-table/es6/ 可查看兼容性Babel 转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
第 2 章 ECMASript 6 新特性
2.1.let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：1) 不允许重复声明 声明两个一样名称的变量会报错。2) 块儿级作用域 下面console.log（girl），会找不见girl报错
3) 不存在变量提升 在song定义之前输出，会报错，但如果用var声名song，不会报错，会提示undefined
4) 不影响作用域链
应用场景：以后声明变量使用 let 就对了
2.2 const常量
1.一定要赋初始值（不然报错）
2.一般常量使用大写（潜规则）
3.常量值不能修改
4.也块级作用域，在块外面引用，引用不到
5.对于数组和对象的元素修改，不算做对常量的修改，不会报错。
2.3 解构赋值
// 1.数组的解构const F4 = ['小沈阳','刘能','谢广坤','赵四'];let [xiao,liu,xie,zhao] = F4;// console.log(xiao);// console.log(liu);// console.log(xie);// console.log(zhao);//2.对象的解构const benshan = {name:"赵本山",age:"不详",xiaopin:function(){console.log("我可以演小品");}}// let {name,age,xiaopin} = benshan;// console.log(name);// console.log(age);// console.log(xiaopin);// xiaopin();let {xiaopin}=benshan;xiaopin();
2.4模板字符串
ES6引入新的声明字符串的方式 `` -->反引号，ES5是单引号和双引号
1.声明 typeof 可以输出字符串类型，下面为string类型。
let str = `我也是一个字符串哦`;console.log(str,typeof str);
2.内容可以直接出现换行符
以前这么写就报错了，换行必须拼接
let str = `<ul><li>秀秀</li><li>秀秀一号</li><li>秀秀二号</li></ul>`;
//3.变量拼接
默认可以用${}形式拼接变量。
let love = '秀秀'; let out = `${love}是大美女`;console.log(out);
2.5 简化对象的写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法这样书写更加简洁
<script>let name = `秀秀`;
let change = function(){console.log('秀秀一号');
}
//以前的写法
const school = {name:'张三',change:'李四',improve:function(){console.log('秀秀二号');}
}
//现在的写法
const school1= {name,change,improve1(){console.log("秀秀二号");}
}
console.log(school);</script>2.6箭头函数
//ES6允许使用箭头 （=>） 定义函数//以前声明一个函数let fn = function(){}//现在声明一个函数let fn1 = (a,b) =>{return a+b;}//调用函数// console.log (fn1(1,2));this是静态的，this始终指向函数声明时所在的作用域下的this值
function getName(){console.log(this.name);}let getName1 = () =>{console.log(this.name);}//设置windows对象的name属性window.name = '秀秀三号';const school = {name:"秀秀四号"}//call 方法调用，call方法会改变this指向getName.call(school);getName1.call(school);上述代码输出秀秀四号，秀秀三号，说明this函数是静态的，没有收到call方法的改变。
不能作为构造实例化对象 下面写报错。
//2.不能作为构造实例化对象 下面写报错。let Person = (name,age) => {this.name = name;this.age = age;}let me = new Person('张三','20');console.log(me);
不能使用arguments变量
let fn2 = () =>{console.log(arguments);}fn2(1,2,3);
箭头函数的简写
//1) 省略小括号，当形参有且只有一个的时候let add = n =>{return n+n;}//2) 省略花括号，当代码只有一条语句的时候，此时return必须省略//而且语句的执行结果就是函数的返回值let pow = (n) =>n*n;console.log(pow(4));2.7 箭头函数的应用场景
需求 点击div 2s后颜色变成粉色
之前的写法
let ad = document.getElementById("ad");//绑定事件ad.addEventListener("click",function(){//保存this的值 let _this = this;//定时器setTimeout(function(){//修改背景颜色this,这里的this指向window，所以提前保存this。_this.style.background = 'pink';},2000)});箭头函数写法
let ad = document.getElementById("ad");//绑定事件ad.addEventListener("click",function(){//保存this的值 //定时器setTimeout(()=>{//修改背景颜色this,这里的this指向window，所以提前保存this。this.style.background = 'pink';},2000)});
需求2 从数组中返回偶数的元素
之前的写法
const arr = [1,4,6,9,11,22,28];const result = arr.filter(function(item){if(item % 2 ===0){return true;}else{return false;}})console.log(result);箭头函数的写法
const result = arr.filter(item => item % 2 ===0);console.log(result);箭头函数适合与tihs无关的回调，定时器，数组的方法回调
箭头函数不适合与this有关的回调，事件回调，对象的方法。
2.8 ES6允许给函数参数赋初始值
function add(a,b,c=10){return a+b+c;
}let result = add(1,2);console.log(result);2.9 rest参数
ES6引入了rest参数，用于获取函数的实参，用来代替arguments
//ES5 获取是参数的方式function date(){console.log(arguments);}date('迪丽热巴','古力娜扎','马儿咋哈');
rest形式
rest形式以数组形式呈现，而argument以对象的形式呈现
function date(...args){console.log(args);}date("岳云鹏","孙悦","刘谦");
rest的形式参数必须放到最后。
function fn (a,b,...args){console.log(a);console.log(b);console.log(args);
}fn(1,2,3,4,5,6,7);2.10 拓展运算符
