1、目前用的版本是ECMAScript3.0，后来改了名字叫ECMAScript5。
2、ECMAScript6的特点：ES6增添许多必要的特性，例如模块和类，块级作用域，常量与变量。
3、浏览器的支持程度：http://kangax.github.io/compat-table/es6/
4、可以通过Babel转码器把ES6写的代码转成ES5，就不用担心运行环境是否支持
5、chrome下使用ES6为保证可以正常使用大部分语法，需要使用严格模式，即在js开始部分加上'use strict'
6、在firefox下使用ES6为保证可以正常使用大部分语法，需要知道测试版本，即在script标签的type属性中加上：“application/javascript;version=1.7”属性值。
1.let
<pre><script>
/let 声明变量的关键字
1、在相同的作用域内，let不能重复声明一个变量（不同的作用域内除外）
2、let声明的变量不会被预解析
3、暂时性死区:变量在let声明前都不能访问，为了防止先调用后声明这个现象/
'use strict'
console.log(a); //undefined
var a=12;
var a='kaivon';
console.log(a);
//console.log(b); //报错 不能提前使用
let b=20;
//let b=30; //报错 不能重复声明一个变量
console.log(b);
{
let str='wendaoliu';
console.log(str);
}
</script></pre>
2. 块级作用域
let声明的变量拥有块级作用域，块级作用域指的是一对大括号就是一个作用域，块级作用域可以直接写一对大括号，以后就不用写自执行函数了。
<pre><script>
'use strict'
if(true){
var str1='wendaoliu';
}
console.log(str1);
//块级作用域
if(true){
let str2='wen';
}
//console.log(str2); //报错
{
let a=12;
function fn(){
let a=20;
console.log(a);
}
fn();
}
//自执行函数
(function(){
var b='abc';
})();
console.log(b); //b is not defined(…)
</script></pre>
3. let与for循环
以下两种效果一致：
<pre> <body>
<ul> <li>red</li> <li>blue</li> <li>green</li> <li>yellow</li> </ul>
<script>
'use strict'
var lis=document.querySelectorAll("li");
for(var i=0;i<lis.length;i++){
// lis[i].onclick=function(){
// alert(i); // 4
// }
(function(i){
lis[i].onclick=function(){
alert(i);
}
})(i);
}
</script>
</body></pre>
<pre><body>
<ul> <li>red</li> <li>blue</li> <li>green</li> <li>yellow</li> </ul>
<script>
'use strict'
var lis=document.querySelectorAll("li");
for(let i=0;i<lis.length;i++){
lis[i].onclick=function(){
alert(i);
}
}
</script>
</body></pre>
4.let选项卡
<pre><style>
input{
background: white;
}
input:nth-of-type(1){
background: yellow;
}
div{
display: none;
}
div:nth-of-type(1){
display: block;
}
</style>
</head>
<body>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
<script>
'use strict'
var inputs=document.querySelectorAll("input");
var divs=document.querySelectorAll("div");
//ES5选项卡写法
/for(var i=0;i<inputs.length;i++){
inputs[i].index=i;
inputs[i].onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].style.background='white';
divs[i].style.display='none';
}
this.style.background='yellow';
divs[this.index].style.display='block';
}
}/
//let选项卡写法
for(let i=0;i<inputs.length;i++){
inputs[i].onclick=function(){
for(let j=0;j<inputs.length;j++){
inputs[j].style.background='white';
divs[j].style.display='none';
}
inputs[i].style.background='yellow';
divs[i].style.display='block';
}
}
</script>
</body></pre>
5. 常量
<pre><script>
/*const声明一个常量，一旦声明后就不能修改了
1、如果声明后再去修改的话就会报错
2、只声明不赋值也会报错
3、只能先声明后使用，不会被提前解析
4、不能重复声明一个常量
注意：const声明的对象中的属性是可以修改的
*/
'use strict'
var a=12;
a='wendaoliu';
console.log(a); //wendaoliu
const str='wen';
/*str=12;
console.log(str); //报错*/
//const b; //报错 没有给值
//声明一个对象后，可以对它里面的属性进行修改
const obj={
name:'文刀刘'
};
obj.name='wendaoliu';
console.log(obj);
</script></pre>
6. 解构赋值:
按照一定的模式，从数组或者对象中把数据拿出来，对变量进行赋值。
数组解构赋值:等号左边与右边必需都是数组，数组的解构赋值要一一对应。如果对应不上的话就是undefined；
对象解构赋值:等号左边与右边必需都是对象，名字要一一对应，顺序不需要对应，对应不上的值结果是undefined。
<pre><script>
'use strict'
var [a,b,c]=[1,2,3];
console.log(a,b,c);
let [x,,y,z]=[1,2,3];
console.log(x,y,z); //1 3 undefined
var [a,[b,c]]=[1,[2,3]];
console.log(a,b,c); //1 2 3
//可以用来调换两个值
var n1=10;
var n2=15;
var [n1,n2]=[n2,n1];
console.log(n1,n2); //15 10
//也可以用来取函数的返回值
function fn(){
return ['red','green','blue'];
}
var [d,e,f]=fn();
console.log(e); //green
</script></pre>
<pre><script>
'use strict'
var obj={
name:'wen',
QQ:356985332,
language:['css','html','js'],
work:function(){
console.log('js');
}
};
var {name,work,QQ,age}=obj;
console.log(name,work,QQ,age);
//可以用它来取一个对象的值
function fn(){
return {
c1:'red',
c2:'green',
c3:'blue'
}
}
var {c1,c2,c3}=fn();
console.log(c2); //green
</script></pre>
7. 字符串的扩展方法
includes(s)：字符串里面是否包含某个字符，参数是一个字符；
startsWidth(s)：字符串开始位置的字符是否是参数的，参数是一个字符
endsWidth(s)：字符串结束位置的字符是否是参数的，参数是一个字符
以上的几个方法都返回一个布尔值。
repeat(num)：复制字符串，参数为数字，表示复制的次数。参数必需是一个正数，其它的就会报错。
<pre><script>
'use strict'
var str='wendaoliu';
console.log(str.includes('w')); //true
console.log(str.includes('b')); //false
console.log(str.startsWith('w')); //true
console.log(str.endsWith('u')); //true
console.log(str.repeat(2)); //wendaoliuwendaoliu
//console.log(str.repeat(-1)); //报错
//console.log(str.repeat(Infinity)); //报错
</script></pre>
模板字符串：字符串的拼接方式。
1、字符串需要用一对反引号包起来，它可以定义多行字符串，只用一对反引号；
2、要拼进去的数据需要放在${}里面；
3、大括号里还可以进行运算；
4、大括号里还可以调用函数；
<pre><body>
<div id="text">
<h1></h1> <p></p>
</div>
<script>
'use strict'
var obj={
title:'心情',
content:'今天很爽，吃了饭，睡了觉，还打了豆豆。'
}
var text=document.getElementById("text");
function fn(){
return '那么问题来了，豆豆爽么？';
}
var str3=<h1>${obj.title+'+1'}</h1> <p>${obj.content+fn()}</p>;
text.innerHTML=str3;
</script>
</body></pre>
8. Math对象的扩展方法
<pre><script>
/*Math对象的扩展方法
Math.trunc(num) 去除小数部分，是直接把小数部分去掉
1、对于非数值，先调用Number方法把它转成数字
2、对于空值和无法转成数字的值，结果是NaN
Math.sign(num) 判断一个数是正数还是负数还是0
1、参数为正数，返回1
2、参数为负数，返回-1
3、参数为0，返回0
4、参数为-0，返回-0
5、参数为其它值，返回NaN
Math.hypot() 开平方，参数可以为多个，把所有的参数的平方加起来，然后再开平方
*/
'use strict'
console.log(Math.trunc(12.74)); //12
console.log(Math.trunc('36.01')); //36
console.log(Math.trunc('wen')); //NaN
console.log(Math.sign(0)); //0
console.log(Math.sign(-0)); //-0
console.log(Math.sign('wen')); //NaN
console.log(Math.hypot(3,4)); //5
console.log(Math.hypot(3,4,5)); //7.0710678118654755
</script></pre>
数组的扩展方法:
Array.from() 把（有遍历接口）类数组转成真正的数组。
任何有length属性的对象都可以用这个方法转真正数组。[...类数组] 它是一个扩展方法，在这里可以把一个类数组转成一下真正的数组。
-
Array.of() 把一组数值转成真正的数组。
includes(数据,起始位置) 查找数组中有没有某个数据。
<pre><script>
'use strict'
var lis=document.querySelectorAll("li");//var newLis=[].slice.call(lis); 转换成数组 var newLis=Array.from(lis); console.log(newLis); //把类数组转换成数组[li, li, li, li, li] var str='wendao'; var newStr=Array.from(str); console.log(newStr); //["w", "e", "n", "d", "a", "o"] var newLis2=[...lis]; console.log(newLis2); //[li, li, li, li, li] //对象身上只要有length属性就可以调用Array.from()把对象转成数组,对象中的key必需是从0开始的数字才能转 var obj={ 0:'red', 1:'green', 2:'blue', 3:'yellow', length:4 }; var obj2={ 1:'red', 2:'green', 3:'blue', 4:'yellow', length:4 }; console.log(Array.from(obj)); console.log(Array.from(obj2)); </script></pre>
<pre><script>
'use strict'
console.log(new Array()); //[]
console.log(new Array(3)); //[, , ,]
console.log(new Array(1,2,3)); //[1, 2, 3]
console.log(Array.of(1)); //[1]
console.log(Array.of(1,2,3)); //[1, 2, 3]
var arr=['red','green','blue','yellow'];
console.log(arr.includes('red')); //true
console.log(arr.includes('pink')); //false
console.log(arr.includes('green',2)); //false
</script></pre>
<pre><script>
/for in 循环，能够直接读取键名
for of 循环，能够直接读取键值
它不光可以遍历数组或者对象，只要有遍历接口的对象都可以用它
keys() 存储了数组的所有键名
values() 存储了数组的所有键值
entries() 存储了数组的所有键值对
/
'use strict'
var color=['red','green','blue','yellow'];
//for in
for(var attr in color){
console.log(attr); //0 1 2 3
}
//for of
for(var value of color){
console.log(value); //red green blue yellow
}
//字符串也可以使用for of
var str='wen';
for(var value of str){
console.log(value); //w e n
}
//遍历keys
for(var key of color.keys()){
console.log(key); //0 1 2 3
}
//遍历values
/for(var value of color.values()){
console.log(value); //red green blue yellow 提示一下，chrom还不支持
}/
//遍历entries
for(let [key,value] of color.entries()){
console.log(key,value); //0 "red" 1 "green" 2 "blue" 3 "yellow"
}
</script></pre>
9. 函数参数的默认值
<pre><script>
'use strict'
function fn(a,b){
b=b||'wendaoliu';
console.log(a,b);
}
fn('hello'); //hello wendaoliu
fn('hello','moto'); //hello moto
//参数变量是默认声明的，不能用let或者const再次声明
function fn2(a=20,b=10){
//console.log(a,b); //20 10
//let a=12; //报错
console.log(a+b);
}
fn2(); //30
fn2(23,45); //68
</script></pre>
rest参数：
<pre><script>
/*rest参数 ...变量名
rest参数是一个数组，它的后面不能再有参数，不然会报错
扩展方法 ...
1、三个点后面是一个类数组，它的作用是把这个类数组转成真正的数组，但是它需要放到一对中括号里面
2、三个点后面是一个真正的数组，它的作用是把数组转成一个普通的集合数据，不需要加中括号的
*/
'use strict'
function fn(a,b,c,...values){
console.log(values);
}
fn(1,2,3,4,5,6,78); //[4, 5, 6, 78]
function fn2(...values/*,a*/){
let sum=0;
for(var val of values){
sum+=val;
}
//console.log(a); //报错,rest参数是一个数组，它的后面不能再有参数
console.log(sum);
}
fn2(1,2,3,4,5); //15
//三个点的用法
var arr1=[12,34,5,28,97];
var divs=document.querySelectorAll("div");
console.log([...divs]); //注意：类数组以及三个点需要放在一对中括号里面
console.log(...arr1); //12 34 5 28 97，注意把数组转成集合数据，不用加中括号
//作用1：替代数组的apply方法
console.log(Math.max(12,34,5,28,97)); //97
var arr2=[12,34,5,28,97];
console.log(Math.max.apply(null,arr2)); //ES5写法求最大值 97
console.log(Math.max(...arr2)); //ES6写法求最大值 97
//作用2：替代concat
var arr3=[1,2,3];
var arr4=['a','b','c'];
//console.log(arr3.concat(arr4)); //[1, 2, 3, "a", "b", "c"]
arr3.push(...arr4);
console.log(arr3); //[1, 2, 3, "a", "b", "c"]
//作用3：把字符串转成数组
var str='kaivon';
console.log([...str]); //["k", "a", "i", "v", "o", "n"]
</script></pre>
箭头函数：
<pre><script>
/箭头函数
语法：1、function用var、let、const来表示
2、参数要写在第一个等号后面
1、如果没有参数，需要写一对空的小括号
2、只有一个参数，那就直接写，不用加括号
3、参数有多个，需要加一个小括号，参数用逗号隔开
3、函数的主体内容是放在箭头后面，如果语句只有一条，那就直接写。如果语句有多条，需要把它们放在一对大括号里
注意：1、函数体内的this对象就是定义函数时所在的对象，不是调用函数时候的对象
2、不能当作构造函数来用，不能使用new
3、函数内不能使用arguments对象，如果要用的话就用rest参数来代替
/
'use strict'
/function fn1(){
console.log('kaivon');
}
fn1();/
var fn1=()=>console.log('kaivon');
fn1();
let fn2=a=>console.log(a);
fn2('wen'); //wen
const fn3=(a,b)=>{
let result=a+b;
console.log(result);
}
fn3(1,2); //3
</script></pre>