提示：如有错误请指正！！！
目录
总结
前言
ES6新增了许多的特性，这里把常用的特性向同学们分享一下。ES6的具体概念就不罗嗦了，不清楚的同学百度一下就好。
一、for...of语句
1.1 for...of循环的作用：
在ES6中为了增强遍历操作，简化for循环，推出了for...of循环语句，适用于遍历数据(数组中单值)，对遍历所有的类数组对象和字符串都适用。
官方的概念是：for...of 语句创建一个循环来迭代可迭代的对象
for...of 与 for...in 的区别是：
for...of 会 依次取出数组中每个元素的值
for...in 会 依次取出数组中每个下标的位置
1.2 for...of举例
例如：想统计在字符串中每个字符出现的次数(使用for...of语句)
<!-- 统计每个字符出现的次数 -->
<script>
var str="helloWorld";
//定义一个空对象obj
var obj={};
//思路:
// 1-首先遍历str中每个字符
for(var c of str){
//2-每遍历到一个字母,就去找有没有以这个字母为属性名的属性
if(obj[c]!==undefined){
obj[c]++;
}else{
obj[c]=1;
}
}
console.log(obj);
</script>
二、块级作用域
在ES6之前JavaScript只有两种作用域：全局作用域，局部作用域
由于 var 会造成变量污染，所以ES6中引入了块级作用域，同时新增了let和const两个关键字
块级作用域概念：块级作用域指在代码块 {} 里面定义的变量，只会在当前代码块有效，如果外层作用域下想访问该变量，会报引用错误异常。 使用关键字 let 或 const 定义块级作用域的变量。
2.1 let 、const与var
let： let语句声明一个块级作用域的局部变量，并可以初始化为一个值（可选）
const：const语句声明一个块级作用域的局部常量，必须初始化
var：js中的var是定义变量的意思，使用和不使用var都能定义变量，但是两个变量的作用域不同！
2.2 let、const与var的区别
①：var声明的变量会挂载在window上，而let、const声明的变量不会挂载到window上，它形成了一个块作用域
②：let、const不存在变量提升、不可重名，var纯在变量提升，可重名覆盖
③：let、const会生成块级作用域
④：const声明时必须赋值，不可用null占位，声明后不可修改，如果声明的是复合类型则可以修改属性
⑤：let拥有暂存性死区（在代码块内，使用let命令声明变量之前，该变量都是不可用的，只能先声明let再使用）
三、箭头函数
在ES6中新增了一种函数方式箭头函数，简单来说箭头函数相当于ES5中的匿名函数的简写，但实际上箭头函数与匿名函数还是有许多不同的地方。
搜集了网络上的资料，有一句话让我觉得形容的很正确：
箭头函数：为了简化匿名函数回调的编写。
3.1 箭头函数的语法：
基础语法：(param1, param2, …, paramN) => { statements }
param：参数
statements：表达式
1-当只有一个参数时，圆括号（）是可选择不写
例如：param1=>{statements}
2-如果没有参数时，（）必须写
()=>{statements}
2-如果函数体只有一句话，可省略{}
()=>console.log('patam1');
3.2 箭头函数的特性：
1-箭头函数没有 prototype (原型)，所以箭头函数本身没有this
2-箭头函数不能作为构造函数使用
3-箭头函数没有自己的 arguments 对象,取而代之用rest参数...代替arguments对象不能使用yield关键字(这里面涉及到了参数增强请看下面)
四、参数增强
在ES6中，允许为函数的参数列表末尾的几个参数变量，预先定义默认值
4.1 剩余参数（base,...arr）
剩余参数(...arr) :目的收集实参值
为了代替arguments类数组对象来接收不确定个数的参数值，新增了剩余参数rest的特性
代替arguments的原因：
1.将来大量使用箭头函数，不支持arguments
2.arguments 返回的不是数组，而是类数组对象。
4.2散播
在ES6中，为了代替apply，实现更灵活的打散数组类型参数的目的，提供了散播（spread）的新特性
例如：当传入给你的是数组，而你希望拿到的是数组中的值时，这时候你需要先处理数组才能把值拿出来在ES5中有许多的方式，但都不是最迅速最简便的
例如：定义函数add，计算任意个数字相加的和
// ES5方式
function add( ){
// arguments[]:接受传入函数的参值
// 缺点：不适用于箭头函数
var sum=0;
for (var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
return sum;
}
console.log(add(1,2,3)); //6
console.log(add(1,2,3,4,5));//15简单使用ES6方式：并不能明显体现ES6的优势
//ES6方式:体现ES6部分优势
var add=(...arr)=>{
// 请...arr收集所有传入函数的实参值列表
console.log(arr);
// //方法1 ：使用循环 与arguments方式相同
for(var i=0;i<arr.length;i++){
sum+=arr[i]
}
return sum
return arr.reduce((prev,elem) => prev+elem,0)
}//ES6方式：精简代码
//ES6方式：精简代码
var add=(...arr)=> arr.reduce((prev,elem) => prev+elem,0)
console.log(add(1,2,3)); //6
console.log(add(1,2,3,4,5));//15五、模板字符转
` `(模板字符串)：支持换行和动态生成内容的字符串，代替ES5中在“ “/ ‘ ’ 内 用+拼接字符串
优势：支持换行，支持动态生成内容
注意：字符串中：有 \ 语法：\t、\n 都含有不同的意义， 所以想输出路径时：需要加上：String.raw
例如：
console.log(
String.raw` D:\CloudMusic\VipSongsDownload`
);六、解构
什么是解构?：为了将一个复杂结构中的成员值，分散打散到多个变量中，批量赋值，提供了结构的新特性
6.1 解构的三种方式：
①-数组解构：数组当中的值取出来单独使用
左侧装扮数组=右侧真正数组
var list =[,1,2,3]
// 把list中的值拿出来用
var [a,b,c]=list
console.log(a,b,c)//1,2,3举例一个具体的例子来体现解构的方便：交换a、b的值但不能声明第三个变量
var a=5, b=3;
[a,b]=[b,a]
console.log(a,b);//3，5 ②-对象解构：按照对象属性名，匹配每个变量和对应属性
左侧装扮对象=右侧真正对象
当对象中的属和方法特别多时，但是只想拿其中的一种，这时最方便的做法就是解构
// 当对象中属性和方法特别多，但是只想用到其中一种，就需要结构
var user={
uname:'dingding ',
realName:'丁丁',
login(){
console.log("登录...");
},
logout(){
console.log("注销....");
}
}
//结构过程
var {uname:a,login:b}=user
console.log(a,b);//dingding ƒ login()
//简写同等于 配对：变量 同名 一个名字两用
var {uname:uname}=user
console.log(uname);//dingding -函数参数解构：定义函数的参数列表时，可以用结构语法，代替applay打散数组或对象中的成员值为单个值，再分别传入
在ES5时， 函数中如果多个形参，不确定有没有值，有要求实参值与形参变量之间必须对应着传值。
// 解决办法： 参数结构
// 1-首先把形参列表装扮成对象的样子
function order({ zhushi="香辣鸡腿堡" ,xiaochi="鸡块" ,yinliao="可乐",}){ //一个名字两用：即配对，又能当变量名，还可以赋初值
console.log(
`您点的套餐是：
主食：${zhushi},
小吃：${xiaochi},
饮料：${yinliao},
`);
}
//正常使用时：
order({
zhushi:'巨无霸',
xiaochi:'土豆泥',
yinliao:'橙汁'
})
//非正常使用时1
order({
xiaochi:'麻薯球'
})
//非正常使用时2
order({})七、Promise
7.1 什么是回调地狱：
为了保证多个异步函数顺序执行而形成的深层嵌套函数。
例如：
//目的:让f1先执行 f2再执行 f3再执行
function f1(next){
console.log(`f1起跑`);
setTimeout(()=>{//异步
console.log(`f1到达终点`);
next();
},6000)
}
function f2(next){
console.log(`f2起跑`);
setTimeout(()=>{//异步
console.log(`f2到达终点`);
next();
},4000)
}
function f3(next){
console.log(`f3起跑`);
setTimeout(()=>{//异步
console.log(`f3到达终点`);
next();
},4000)
}
//保证异步函数顺序执行!!!!
f1(
function(){
f2(
function(){
f3(
function(){
console.log('比赛结束');
}
)
}
)
}
)7.2 promise方案
为了避免回调地狱，添加了promise，可以让连续的回调函数调用，看起来更像是连续调用，而不是嵌套。
语法：new Promise(function(reslove,rejiet){}).then().....
<script>
//Promise解决同样的问题
//目的:让f1先执行 f2再执行 f3再执行
function f1(next){
//1-首先把每个函数做成promise对象,包裹任务
//resolve:同意继续 ->.then()
// reject:不同意继续 ->.catch()
//2-分出了三个promise空间,但是并没有联系起来
// 需要通过 .then():连接每个promise空间
//
return new Promise(function(resolve,reject){ //resolve:成功 reject:失败
console.log(`f1起跑`);
setTimeout(()=>{//异步
if(Math.random()<0.6){
resolve(); //->下一项任务
console.log(`f1到达终点`);
}else{
reject('f1摔倒了');//->错误代码
}
},6000)
})
}
function f2(next){
return new Promise(function(resolve,reject){
console.log(`f2起跑`);
setTimeout(()=>{//异步
if(Math.random()<0.6){
resolve(); //->下一项任务
console.log(`f2到达终点`);
}else{
reject('f2摔倒了');//->错误代码
}
},4000)
})
}
function f3(next){
return new Promise(function(resolve,reject){
console.log(`f3起跑`);
setTimeout(()=>{//异步
if(Math.random()<0.6){
resolve(); //->下一项任务
console.log(`f3到达终点`);
}else{
reject('f3摔倒了');//->错误代码
}
},4000)
})
}
//调用f1 获得一个 new Promise() 对象 通过.then()连接下一个 new Promise()对象
f1().then(f2).then(f3).then(()=>{console.log('比赛结束');}).catch(err=>{console.log(`${err},比赛中断!`);})
</script>总结
以上就是ES6新增常用特性，一般面试时提问比较多，大家要多花一些心思去琢磨。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
