es6重要内容用法

###ES6####一、ECMA历史组成部分 ECMA、DOM、BOM1. 什么是ECMA全称 ECMAScript 简写 ECMA 或 ESECMA是一个标准JS是实现例如 HTML5 是标准chromeFFIE10是实现将来也可能有 xxxscript 实现ECMA2. 目前的版本1. 低级浏览器 主要支持es3.13.22. 高级浏览器 正从ES5过度到ES63. 版本进化过程1996 ES1.0 js稳定 Netscape将js提交给ECMA组织1998 ES2.0 正式发布1999 ES3.0 浏览器广泛支持2007 ES4.0 ES4过于激进被废除2008 ES3.1 4.0变为缩水版的3.1 代号Harmony2009 ES5.0 ES5 正式发布同时公布了javascript.next-6.0前身2011 ES5.1 成为ISO国际标准2013.3 ES6.0 ES6.0制定草案2013.12 ES6.0 发布草案2015.6 ES6.0 ES6.0预计发布同时发布 es7.0正在制定草案4. 兼容性目前为止ES5 ES6支持情况还凑合nodejs用的就是chrome内核在node中已经可以使用es6的很多特性了ES5和ES6已经逐渐沦为后台语言------1. 在浏览器中如何使用需要编译工具把ES6语法编译成ES5babeltraceur ---google出的编译器bootstrap 引导程序script srctraceur.js/scriptscript srcbootstrap.js/scriptscript typemodulelet a 12;/scriptscript srchttps://traceur-compiler.googlecode.com/git/bin/traceur.jstypetext/javascript/scriptscript srchttps://traceur-compiler.googlecode.com/git/src/bootstrap.jstypetext/javascript/scriptscripttraceur.options.experimental true;/scriptscript typemodule srcjs/calc.js/script2. 在线编译:主要用于测试a. babeljs.io/replb. google.github.io/traceur-compiler/demo/repl.html3. 在node中可以直接使用use strictlet a 12;console.log(a);a. 直接用需要添加 use strictb. node --harmony_destructuring xx.js---###二、定义变量 let和const1. ES6新增了let命令用来声明变量。它的用法类似于var但是所声明的变量只在let命令所在的代码块内有效。 let定义的变量不能在相同作用域下重复声明同一个变量function () {let a 10;var a 1;}function () {let a 10;let a 1;} 以下现象用来理解块级作用域现象1{let a 10;var b 1;}console.log(a);console.log(b); 结论let声明的变量尽在 {}内有效现象2 let声明的变量仅在当前作用域中有效for(let i0;i10;i){}console.log(i);现象3var a [];for (var i 0; i 10; i) {a[i] function () {console.log(i);};}a[6]();//var a [];for (let i 0; i 10; i) {a[i] function () {console.log(i);};}a[6]();i是let声明的所以当前的 i仅在本轮循环有效直接会被解析成数字。现象4循环语句是父作用域循环体是一个独立的作用域互不影响。for (let i 0; i 3; i) {let i abc;console.log(i);}现象5 不存在变量提升// var 的情况console.log(foo);var foo 2;// let 的情况console.log(bar);let bar 2;现象6 暂时性死区var tmp 123;if (true) {tmp abc; // ReferenceErrorlet tmp;}报错因为当使用let时当前快作用域被封闭let定义的变量仅能够在之后使用#### 为什么需要块级作用域1. 内层变量可能会覆盖外层变量。var tmp new Date();function f() {console.log(tmp);if (false) {var tmp hello world;}}f();2. 用来计数的循环变量泄露为全局变量。var s hello;for (var i 0; i s.length; i) {console.log(s[i]);}console.log(i); // 5#### 块级作用域试题1.function f1() {let n 5;if (true) {let n 10;}console.log(n); // 5}2. 自执行函数封闭作用域可以用块作用域替代// IIFE 写法(function () {var tmp ...;...}());// 块级作用域写法{let tmp ...;...}3.function f() { console.log(I am outside!); }(function () {if (false) {// 重复声明一次函数ffunction f() { console.log(I am inside!); }}f();}());### 二、const 声明一个只读的常量。一旦声明常量的值就不能改变 const声明的变量不得改变值这意味着const一旦声明变量就必须立即初始化不能留到以后赋值。1. const的作用域与let命令相同只在声明所在的块级作用域内有效。if (true) {const MAX 5;}MAX### 三、解构赋值1. 什么是解构赋值 左边一种结构右边一种结构左右一一对应进行赋值2. 分类* 数组解构赋值 *** 对象解构赋值 *** 字符串解构赋值* 布尔值解构赋值* 函数参数解构赋值* 数值解构赋值#### 1 解构赋值基本方式let [x,y] [1,2];console.log(x,y);//1,2#### 2 ...解构赋值{let a,b,rest;[a,b,...rest] [1,2,3,4,5,6];console.log(a,b,rest);//rest [3,4,5,6]}#### 3 对象解构赋值//对象的解构赋值{let a,b;({a,b} {a:1,b:2});console.log(a,b);}#### 4 默认值(没有找到配对有默认值使用默认值没有默认值值为 undefined)// 解构赋值的默认值{let a,b,c,rest;[a,b,c3,d] [1,2];console.log(a,b,c,d);}#### 5 变量交换//利用解构赋值交换变量中的值{let a 1;let b 2;[a,b] [b,a];console.log(a,b);}#### 6 函数返回多个值function f(){return [1,2];}let [a,b] f();console.log(a,b);#### 7 选择性的接收 返回值{function f(){return [5,6,7,8,9];}let [a,,,,b] f();console.log(a,b);}#### 8 我只关心第一个其他的先放数组里{function f(){return [5,6,7,8,9];}let [a,...b] f();console.log(a,b);}#### 9 对象结构赋值{let o {name:yuonly,age:20};let {age,name} o;console.log(name,age);}#### 10 可以替代 arguments// ... 可以替代arguments{function test3(...arg){for(let v of arg){console.log(rest,v);}}test3(1,2,3,4,a);}### 四、对象扩展#### 1. 简洁表示法//简洁表达{let a 1;let b 2;//ES5let es5 {a:a,b:b}console.log(es5);//ES6let es6 {a,b}console.log(es6);}{//如果有方法的处理方式// ES5let es5 {hello:function(){console.log(hellow);}}//ES6let es6 {hello(){console.log(hello);}}}#### 2. 属性表达式let a b;let es5_obj {//es5中对象的 key必须是固定的a:c}//es6let es6_obj {//属性值可以是变量[a] : c}console.log(es6_obj,es6_obj);#### 3. 扩展运算符ES7语法支持不好了解{//babel不支持无法编译let {a,b,...c} {a:test,b:kill,c:ddd,d:ccc}c {c:ddd,d:ccc}}#### 4. object新增API{// is :判断两个值是否相等console.log(字符串,Object.is(abc,abc));console.log(数组,Object.is([],[]));//两个不同的地址//assign : 潜拷贝console.log(拷贝,Object.assign({a:a},{b:b}));// entrieslet test [k:123,o:456];for(let [key,value] of Object.entries(test)){console.log([key,value]);}}### 五、类#### 1 基本语法{//基本定义和生成实例class Person{constructor(namelaozhou){this.name name;}}let p1 new Person(小王);console.log(构造函数和实例,p1);}#### 2 类的继承{//继承class Father{constructor(namelaozhou){this.name name;}}class Child extends Father{}console.log(子类的实例,new Child());console.log(子类自己传,new Child(小刘))}{//子类如何覆盖父类的值class Father{constructor(namelaozhou){this.name name;}}class Child extends Father{constructor(namechild){//this.type boy;//super必须在第一行否则报错super(name);//调用父亲类的构造函数this.type boy;}}console.log(子类覆盖父类属性的实例,new Child());}#### 3 静态属性//静态属性{class Person{constructor(namelaozhou){this.name name;}}//静态属性的定义是直接给类下的属性赋值该属性就是静态属性Person.type text;//type就是静态属性}#### 4 静态方法//静态方法{class Person{constructor(namelaozhou){this.name name;}static tell(){//相当于原型下的方法,是属于类本身的用类来调用console.log(tell);}}Person.tell();}#### 5 getter-setter{//getter setterclass Father{constructor(namelaozhou){this.name name;}//此处longName不是函数而是属性相当于新增了一个属性 longNameget longName(){return yu_this.name;}set longName(value){this.name value;}}let f1 new Father();console.log(getter,f1.longName);f1.longName hello;console.log(setter,f1.longName);}### 六、promise promise是异步变成的解决方案解决回调地狱#### 1 基本写法{//es5 中的异步操作let ajax function(callback){console.log(执行);setTimeout(function(){callback callback.call();},1000);}ajax(function(){console.log(timeout1);})}{//ES6let ajax function(){console.log(执行2);return new Promise(function(resolve,reject){setTimeout(function(){resolve();//resolve后会有then方法执行后续操作},1000);})}ajax().then(function(){console.log(promise,timeout);})}#### 2 promise.all 所有的 异步操作都成功后在去执行一个动作。例子图片都加在完成之后再显示到页面//promise.all :把多个promise实例当做一个promise实例当所有的状态都完成之后才会触发新的promise对象的then方法//应用比如广告中有三张图需要三张图都加载再去更新dom{//所有图片加载完成在加载页面function loadImg(src){return new Promise((resolve,reject){let img document.createElement(img);img.src src;img.onload function(){resolve(img);}img.onerror function(){reject(err);}})}function showImg(imgs){imgs.forEach(function(img){document.body.appendChild(img);})}Promise.all([loadImg(https://img10.360buyimg.com/n4/s260x260_jfs/t3079/363/6070979658/42126/5b5c2f39/589af086N4a3bed39.jpg),loadImg(https://img14.360buyimg.com/n4/s260x260_jfs/t4345/284/2534342556/119746/550dee37/58d34a9dNf0bd717f.jpg),loadImg(https://img13.360buyimg.com/n4/s260x260_jfs/t3259/170/5587914266/144572/64259fc5/5873347aN14e34822.jpg),]).then(showImg);}#### 3 promise.race 谁先到加载谁{//promise.race 谁先回来处理谁先到先得function loadImg(src){return new Promise((resolve,reject){let img document.createElement(img);img.src src;img.onload function(){resolve(img);}img.onerror function(){reject(err);}})}function showImgs(img){let p document.createElement(p);p.appendChild(img);document.body.appendChild(p);}Promise.race([loadImg(https://img10.360buyimg.com/imgzone/jfs/t5149/215/1247256617/226900/c371168/590dcc2bN2234f761.jpg),loadImg(https://img14.360buyimg.com/n4/s260x260_jfs/t4345/284/2534342556/119746/550dee37/58d34a9dNf0bd717f.jpg),loadImg(https://img13.360buyimg.com/n4/s260x260_jfs/t3259/170/5587914266/144572/64259fc5/5873347aN14e34822.jpg),]).then(showImgs);}#### 4 promise可以让代码执行的步骤更清晰过程更可控//使用promise后更清晰{let oBox document.getElementById(box);function toWidth(w){return new Promise(function(resolve,reject){let timer setInterval(function(){var oldWidth oBox.clientWidth;if(oldWidthw){clearInterval(timer);resolve();}oBox.style.width oldWidth 10 px;},100);})}function toHeight(h){return new Promise(function(resolve,reject){let timer setInterval(function(){var oldHeight oBox.clientHeight;if(oldHeighth){clearInterval(timer);resolve();}oBox.style.height oldHeight 10 px;},100);})}function toSmall(size){return new Promise(function(resolve,reject){let timer setInterval(function(){var oldWidth oBox.clientWidth;var oldHeight oBox.clientHeight;if(oldWidthsize || oldHeightsize){clearInterval(timer);resolve();}console.log(123);oBox.style.width oldWidth - 10 px;oBox.style.height oldHeight - 10 px;},100);})}//使用promise后更清晰可以随意更改流程。toHeight(400).then(function(){return toWidth(600);}).then(function(){return toHeight(300);}).then(function(){return toSmall(100);}).then(function(){return toHeight(400);})}//ES5{function toWidth(w,callback){let timer setInterval(function(){var oldWidth oBox.clientWidth;if(oldWidthw){clearInterval(timer);callback callback();}oBox.style.width oldWidth 10 px;},100);}function toHeight(h,callback){let timer setInterval(function(){var oldHeight oBox.clientHeight;if(oldHeighth){clearInterval(timer);callback callback();}oBox.style.height oldHeight 10 px;},100);}function toSmall(size,callback){let timer setInterval(function(){var oldHeight oBox.clientHeight;var oldWidth oBox.clientWidth;if(oldHeightsize){clearInterval(timer);callback callback();}oBox.style.width oldWidth - 10 px;oBox.style.height oldHeight - 10 px;},100);}//代码可读性差而且很难控制执行顺序toWidth(500,function(){toHeight(300,function(){toSmall(100,function(){toWidth(400,function(){toHeight(100,function(){})})});})});}### 七、模块化#### 1. 基本概念每一个文件都是独立的作用域一个模块都是独立存在不会互相影响#### 2. ES6模块化语法##### 方式一 优点可以只导出部分模块。弊端导出模块特别多的时候不能一眼看出都导出了那些模块//模块的导出 module1.jsexport let a 123;export function test(){console.log(test);}export class Hello{test(){console.log(class);}}//模块的导入 entry.jsa as A 起别名 A外部使用A来操作aimport {a as A,test,Hello} from ./lesson/6.module/module1.js;console.log(A,test,Hello);//导入所有模块放入 obj对象下import * as obj from ./lesson/6.module/module1.js;console.log(obj.a);##### 方式二推荐方式//导出 module2.jslet num 123;let test function(){console.log(test);}class Person{test(){console.log(Person);}}//1批量导出一目了然导出了那些东西给外部 2 没有起名字将命名权给倒入方。export default {num,test,Person}//导入 entry.jsimport M from ./lesson/6.module/module2.js;console.log(M,M.num);M.test()### 八、函数扩展箭头函数* 参数默认值* rest参数* 扩展运算符rest参数的逆运用* 箭头函数* 尾调用#### 1 参数默认值{function test(x,y10){console.log(默认值,x,y);}test(1);test(99,88);}// 有默认值的参数后面不能有 没有默认值的参数{function test(x,y10,c){//会报错在默认值后面不能有 没有默认值的参数console.log(默认值,x,y);}}//函数的作用域{let x test;function test2(x,xy){console.log(作用域——,x,y);}test2(new);}//没有的时候用上面的{let x test;function test2(c,yx){console.log(作用域2,x,y);}test2(new);}#### 2 rest参数{//此时的arg相当于是 argumentsfunction test3(...arg){for(let v of arg){console.log(rest:,v);}}test3(1,2,3,4,5);}#### 3 扩展运算符rest参数的逆运用{console.log(...[1,2,3]);}#### 4 箭头函数{let arrow vv*10;console.log(arrow(3));!-- let arrow2 (v){return v*50};console.log(arrow2(2)); --}相当于是{let arrow function(v){return v*10;}console.log(arrow(3));}#### 5 尾调用 函数的最后一句话是函数就是为调用{function tail(x){console.log(tail,x);}function go(x){return tail(x);}go(123);}