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()等就不多说了