欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6,ES7重点介绍

程序员文章站 2022-05-29 11:57:49
``` 1. 字符串模板
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()等就不多说了