ECMAScript 6（以下简称ES6）是javascript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法
1.let
ES6新增了let命令，用来生命变量。它的用法类似于var,但是所声明的变量，只在let命令所在的代码块内有效。
|
1
2
3
4
|
for (let i = 0; i < 10; i++) console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++)<br><br><br>console.log(i) //10<br> |
上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。let具有块级作用域的。var不存在块级作用域问题，具有全局变量提示的问题存在，
2.const
const声明一个只读的常量，一旦声明，常量的值就不能改变。
const a = 10；
a = 20；
console.log(a) //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const a;
console.log(a)
上面代码表示，对于const来说，只声明不赋值，就会报错。
let与const
1.都不能重复声明
2.都存在块级作用域问题
3.只在声明所在的块级作用域内有效。
3.模板字符串
模板字符串就是一种字符串的新的表现形式
（1）基本用法
let s1 = ` hello ` let s2 = ‘ hello ‘
（2）字符串和变量拼接
let s3 =" a " + s1 + " b " + s2; let s4 = ` a $s1 b $s2`;
(3)字符串换行
var box =`<div>
<p>
<span>123</span>
</p>
<p>$a1</p>
</div>`;
模板字符串的出现，极大的改变传统字符串的拼接方法，减少代码出现错误的几率。提高开发效率
4.解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
4.1:对象结构赋值
var obj = name:"abc",age:18 ;
//用解构赋值的方式获取name、age
let name = obj; //创建了一个变量name，值=obj.name
console.log(name); //"abc"
let age =obj;
console.log(age); //18
4.1:函数参数结构赋值
function f1(obj)
console.log(obj.age);
console.log(obj.height)
//等价于
function f1( age,height )
console.log(age);
console.log(height)
f1(age:5,height:180)
5.rest参数
ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function fn()
//arguments是函数内部的一个局部变量，
//arguments.length表示函数的实参的个数
console.log(arguments.length);
for(var i =0 ; i<arguments.length; i++)
console.log(arguments[i]);
fn(1,3,5) //3
// fn("a","b","c","d","e") //5
es6箭头函数内部不能使用arguments，为了弥补这个问题，rest参数应孕而生
//...args就是rest参数
//-->产生了一个变量，这个变量是一个数组，数组里面包含了这个函数调用时传递的所有实参
function q(...args)
//验证args是不是数组？
console.log(args instanceof Array);//true
console.log(Object.prototype.toString.call(args));//"[object Array]"
console.log(Array.isArray(args)); //true es5中的新方法
console.log(args);
q(1,3,5);
q(2,3,4,5,6,7,8);
6.箭头函数
ES6 允许使用“箭头”（=>）定义函数。
场景：用于替换匿名函数
基本用法
//匿名函数 div.onclick=function() console.log("你好") //箭头函数 div.onclick=()=> console.log("你好")
有一个参数的箭头函数
var fn=(a)=>
console.log("abc");
//等价于：
var fn=a=>
console.log("abc");
有2个及更多参数的箭头函数
var f=(a,b,c)=>
console.log("abc")
var p=
age:18,
//es6中对象方法的箭头函数表示形式
run:()=>
setTimeout(()=>
//this:window
console.log(this);//this是window
,100)
,
travel:function()
//this:p
setTimeout(()=>
console.log(this);//this是p
,100)
,
//推荐使用的方式☆☆☆：es6中对象方法的简写形式
say()
console.log("say方法中的this：",this);
setTimeout(()=>
console.log("say内部的延迟函数：",this);//this是p
,100)
,
p.run();
p.travel();
p.say();
箭头函数和普通匿名函数有哪些不同？
1.函数体内的this对象，就是定义所在的对象，而不是使用所在的对象
2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4.不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
5.generator函数现在经常用async替代
7.对象的扩展
扩展运算符（spread）是三个点（...）。用于取出参数对象的所有可遍历属性，拷贝到当前对象中
7.1Object.assign：实现拷贝继承
//Object.assign 就是进行对象的浅拷贝
var source= age:18,height:170,className:"3年2班"
//克隆一个新对象出来
var newObj=Object.assign(,source);
console.log(newObj);
var newObj2=;
Object.assign(newObj2,source);
console.log(newObj2);
上面可以实现浅拷贝，但是代码有点多，es6这个对象扩展，牛掰的一个方法，解决浅拷贝的问题，
var car= brand:"BMW",price:"368000",length:"3米"
//克隆一个跟car完全一样的对象出来：
var car2= ...car
console.log(car2);
//新车子，跟car的长度不同，其他相同
var car3= ...car,length:"4米"
console.log(car3);
var car4= ...car,type:"SUV"
console.log(car4);
var car5=...car4,price:"69800",brand:"BYD";
console.log(car5);
对象扩展，简单方便，代码更加简介，更少的代码实现更强大的功能。
8.Promise
Promise是异步编程一种解决方案(回调地狱)
在没有promise都是这样写的回调，一层一层的写，
$.get("/getUser",function(res) $.get("/getUserDetail",function() $.get("/getCart",function() $.get("/getBooks",function() //... ) ) ) )
promise的基本用法
var promise=new Promise((resolve,reject)=>
//b 把需要执行的异步操作放在这里
$.get("/getUser",res=>
//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
//c、
resolve(res)
//而执行的下一步操作，其实就是写在then的回调函数中的
)
)
//a、
promise.then(res=>
//d、执行后续的操作
console.log(res);
)
promise实现多层回调
new Promise((resolve,reject)=>
$.get("/getUser",res=>
resolve(res)
)
).then(res=>
//用户基本信息
return new Promise(resolve=>
$.get("/getUserDetail",res=>
resolve(res)
)
)
).then(res=>
//用户详情
return new Promise(resolve=>
$.get("/getCart",res=>
resolve(res)
)
)
).then(res=>
//购物车信息
)
promise实现错误处理
new Promise((resolve,reject)=>
$.ajax(
url:"/getUser",
type:"GET",
success:res=>
resolve(res);
,
error:res=>
reject(res)
)
).then(resSuccess=>
//成功的返回值
,resError=>
//失败的返回值
)