ES6,ES7重点介绍
1. 字符串模板
<!--旧版拼接字符串-->
var str = '我是时间:'+new Date();
<!--新版拼接字符串-->
let str = `我是时间${new Date()}`;
2. 对象简写
<!--旧版对象写法-->
var name = "liming";
var age = 20;
var person = {name:name, age:age};
<!--新版对象写法-->
let name = "liming";
let age = 20;
let person = {name, age};
3. 箭头函数
<!--旧版定时器写法-->
setTimeout(function(res){
alert(res)
},50)
采用箭头函数后的写法
setTimeout((res) => {
alert(res)
})
4. 模块化
export 导出模块
import 导入模块
5. 解构
<!--解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值-->
let arr = ['string', 2, 3];
//传统方式
let a = arr[0],
b = arr[1],
c = arr[2];
//解构赋值，是不是简洁很多？
let [a, b, c] = arr;
console.log(a);<!--string-->
console.log(b);<!--2-->
console.log(c);<!--3-->
<!--嵌套数组解构：-->
let arr = [[1, 2, [3, 4]], 5, 6];
let [[d, e, [f, g]], h, i] = arr;
console.log(d);<!--1-->
console.log(f);<!--3-->
console.log(i);<!--6-->
<!--函数传参解构：-->
var arr = ['string', 2, 3]
function fn1([a, b, c]) {
console.log(a);
console.log(b);
console.log(c);
}
fn1(arr);
<!--string-->
<!--2-->
<!--3-->
<!--还有好多结构方法... 这里就不详细说了-->
6. Promise
<!--为了优化异步的回调地域,也便于复用和阅读,支持链式调用-->
new Promise((resolve,reject) => {
<!--这里写逻辑来判断走resolve(走的then分支)或者reject(走的catch分支,抛出异常)-->
})
.then((res) =>{})
.catch((err) =>{})
<!--es7还添加了一个async await语法糖,来解决回调地域-->
async await 讲解
<!--这里是新加的一些最常用字符串方法-->
1. includes
<!--查看是否包含字符串,直接返回布尔值,类似于indexOf().-->
<!--includes()比indexOf()的优势在于，indexOf()的返回结果不是布尔值，须与-1对比，不够直观。-->
let s = 'Hello world!';
s.includes('o') // true
2. repeat()
<!--可能在mvc框架中经常看到这个方法-->
<!--表示重复多少次。-->
<!--如果参数是正小数，会取整。-->
<!--如果参数是负数，会报错。-->
<!--如果参数是0，会得到空串。-->
<!--如果参数是字符串、布尔型或其他类型，会先换算成整数-->
<!--这里是最新添加的一些数组方法-->
1.最常见的循环
<!--forEach()
有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.-->
let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
console.log(item);
});
<!--map()-->
<!--map()的参数和forEach()是一样的-->
<!--map()不会改变原数组,-->
let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
return item + 1;
});
<!--如果map循环里不return一个值的话,效果跟forEach()完全一样;-->
<!--如果map循环里return值的话会返回经过处理的新数组-->
<!--下面可以看到批量处理数据是非常方便快捷的-->
let array = [{name:'liming'},{name:'zhangsan'},{name:'wangwu'}]
let newArray = array.map((item, index, arr) => {
return {'姓名':`${item.name}***`}
})
console.log(newArray);<!-- [{'姓名':'liming***'},{'姓名':'zhangsan***'},{'姓名':'wangwu***'}]-->
<!--some()-->
<!--遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.-->
<!--应用场景比如判断学生成绩有没有不及格的,有的话循环停止,节省时间-->
let array = [100, 25, 35, 98, 67];
array.some((item, index, arr) => {
return item < 60 ;
});
<!--到第二次即能判断出来结果,循环两次即结束-->
2.filter
<!--类似于map-->
let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);
3.reduce
<!--reduce(),这个东西用的好的话可以省很多事,这个为一个累加器,类似于之前封装的回调函数,不明白的话看看下面写法就懂了-->
<!--它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组-->
let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
return a + b;
});
console.log(total); <!-- 15 -->
4. 还有类似于array.keys(),array.values()等就不多说了
