ES6基础入门总结

es6:ECMAScript
1、js的组成部分：ECMA、DOM、BOM
2、什么是ecma：ecma是标准（语法啊、组成啊等），js是实现者，类似于h5是标准，浏览器是来实现这个标准的
3、目前的版本， 低级浏览器：主要是支持es3.1
高级浏览器正在从es5过渡到es6
4、历史： 1996 ES1.0 js稳定由Netscape公司正式提交给ecma组织，es正式出现
1998 ES2.0正式发布
1999 ES3.0被浏览器广泛的支持
2007 ES4.0由于想法太急进了，被废弃；
2008 ES3.1是4.0的严重的退化版  3.1是一个代号（Harmony和谐）
2009 ES5.0正式发布了，同时公布了javascript.next也就是后来的6.0
2011 ES5.1成为ISO的国际标准
2013.3 ES6.0制订了草案
2013.12 ES6.0草案发布
2015.6 ES6.0 ES6.0预计发布正式版本，同时公布javascript.next也就是es7.0


5、兼容性： 目前为止es5、es6的支持情况还凑合（不支持的也可以想办法让他支持，比如react里面的babel）
nodejs用的就是chrome内核，在node中可以使用es5、es6语法
es5、es6已经开始逐渐的沦为了一个后台语言了

6、在浏览器里面如何使用？
因为在浏览器中有一部分支持有一部分不支持，所以需要用的编译工具，例如babel
---------------------------------------------------------------------------------
es6：
1、变量  
var ---重复定义不报错、没有块级的作用域、不能限制修改

新的定义变量的：let const
let a=10; let a=15; //这时候会报错;   --解决了重复定义
if(12>5){let a=10}; alert(a); //这时候会报错

const a=100; //常量，是不能被修改的


2、函数、参数
3、模块化
4、数组
map 映射   
var arr=[1,2,3,4,5,6];
let arr2=arr.map(item){ //item就是上面的1，2，3，。。

}
reduce 汇总   [1,2,3,4]  不管数组里面有多少个，出来的都是一个
filter 过滤（出来几个不一定）
var arr=[1,2,3,4,5,6];
arr.filter(item){
if(item%2){
return false
}else{
return true
}
}
forEach  遍历
var arr=[1,2,3,4,5,6];
let arr2=arr.forEach(item,index){ //item就是上面的1，2，3，。。
alert(item)
}

5、字符串
6、面向对象
7、promise
8、generator


---------------------------
不兼容：只是高级的浏览器支持，但是可以通过编译成es5来解决

www.codewars.com/dashboard


----------------------------------------------------------------------
es6语法的使用：
1、在线测试编译  babeljs.io/repl
2、在nodejs里面使用：在node里面直接使用就可以了
如果直接用在nodejs里不好使时，需要添加'use strict'
在启动服务的时候，   node --harmony_desctructuring xxx.js


es6的语法使用：
1、代码块：被{ }包起来的代码就是代码块，比如if、while、for语句都是代码块了，形成一个块级作用域，let具有块级作用域
特点：只能在代码块里面使用


2、定义变量：let---已经被浏览器实现了
let a=12 var a=12;
例如{ let a=12 ; alert(a)}alert(a);  第一个alert执行了，第二个不能给执行
let具有代码块的功能，而之前的var只有函数的作用域（var只有在函数里面才会有作用域）

let 现在不允许去重复的声明了  var a=15;var a=55;后面的a会覆盖掉前面的a的值
let a=15;let a=35;alert(a)--->这样会报错

总结：let才是接近其他语言的变量（有下面几个例子可以知道，块级作用域其实就是匿名函数立即调用）

用处：
封闭空间以前的做法：   （function(){var a=55;alert(a)}）()
现在的做法： { let a =11;alert(a) }

封闭空间的i值问题
<input type='button' value='aaa'/><input type='button' value='bbb'/><input type='button' value='b'/>
点击每一个按钮，输出当前的i
以前的做法是：
var oBtn=document.getElementByTagName('input');
for(var i=0;i<oBtn.length;i++){
oBtn[i].οnclick=function(){ console.log(i) } //会输出3个3
}
正确的做法是做成封闭空间
var oBtn=document.getElementByTagName('input');
（for(var i=0;i<oBtn.length;i++){
oBtn[i].οnclick=function(){ console.log(i) } //会输出3个3
})()
现在的额做法：把var换成let就行，因为{ }自带块级作用域
var oBtn=document.getElementByTagName('input');
for(let i=0;i<oBtn.length;i++){
oBtn[i].οnclick=function(){ console.log(i) } //会输出3个3
}
但是let a=15;a=22; alert(a)--->22


3、定义常量const一旦赋值，不能被修改 用途：防止意外的修改变量
const a=18;  a=55;--->会报错

4、字符串拼接的方法——``反单引号
var a='hhdajda'
var str=`asdga${a}jd` 这样就字符串拼接好了


5、解构赋值
以前，var a=12,var b=55;var c=66;  如果输出的话就一个一个的输出
现在，var [a,b,c]=[12,55,66];  console.log(a,b,c) //把结构相同的放到数组里面


      var {a,b,c}={a:10,b:20,c:100}  console.log(a)--->10 //


模式匹配：左边的模式要和右边的一样
var [a,[b,c,d],e,f]=[10,[1,2,3],55,66]


这个的用处，在于从后台返回的数据，






6、复制数组
es5里面的用法：（循环）
var arr1=[1,2,3];var arr2=arr1; arr2.pop();  这样也会改变arr1
var arr1=[1,2,3];var arr2=[];   for(var i=0;i<arr1.length;i++){ arr2[i]=arr1[i] }arr2.pop();//arr1不会改变


es6里面的用法：
var arr1=[1,2,3];var arr2=Array.from(arr1); arr2.pop();//arr1不会改变

var arr1=[1,2,3];var arr2=[...arr1];  arr2.pop();//arr1不会改变（在引用的数组前加...）


...的用法这个自己查询一下


7、循环
之前：普通的for循环，或者for key in value
现在：多了一个for of 循环：主要是遍历（迭代、循环）整个对象(可以循环数组，但不能循环json)


遍历数组：
var arr=['apple',' banner','orange','pear'];
for in的用法： for(var i in arr){ console.log(i)} //这个i值就是0,1,2,3索引值
for of的用法：  for(var i of arr){console.log(i)} //这个i值就是我么得apple、banner...这些值


遍历json：
var json={'a':'apple', 'b':'banner','c':'orange', 'd':'pear'}; //删除json的方法：delete json.a
for(var name in json){ console.log(name,json[name])} //

for of主要是用来循环Map对象的(也可以循环数组的)
Map对象和json对象相似，但又不是json，Map本身的格式也是key-value这样的格式
Map对象是为了和for of配合而生的

创建一个Map对象
var map=new Map();
设置：
map.set(name,value); //map.set('a','apple');map.set('b','banner');
//console.log(map)-->{'a'=>'apple','b'=>'banner'}
获取：  console.log(map.get['a']); //apple
删除：  map.delete('a');


遍历map不能用for in 只能用for of
for(var name of map){console.log(name)} //这个时候name里面key和value都包含就是a,apple   b,banner

for(var [key,value] of map){console.log(key,value)}//这个时候key,value是分开的


单独的想要key或者value
for(var [key] of map.keys()){console.log(key)}
for(var [value] of map.values()){console.log(value)}


for of 循环数组
只循环值
for(var value of arr){console.log(value)}
支循环索引
for(var key of arr.keys()){console.log(key)}
循环索引和值
for(var keyvalue of arr.entries()){console.log(keyvalue)}




8、箭头函数   ()=>    =====    function()
oBox.οnclick=function(){  }
oBox.οnclick=()=>{ ...}
需要注意的是：
箭头函数里面的this指向了window对象
在箭头函数里面arguments不能使用了

es6把对象的语法也简洁化了


9、模块化
之前的模块化用的是sea.js,require.js
现在es6是自带模块化的，


导出模块
1.js里面写的东西
const a= 12
export default a ;   这样就把a这个模块导出去了
2.js引入模块
import modA from './1.js  //从当前目录下的1.js里面到处modA这个模块（modA这个模块名字可以随便取）
console.log(modA)






10、Promise  承诺
就是一个对象，用来传递异步操作的数据（消息）
pending(等待、处理中) --->Resolve(完成、fullFilled)
--->R额接触特定（拒绝、失败）