1、 es6 symbol
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
let sy = Symbol("key1"); let syObject = {}; syObject[sy] = "kk"; console.log(syObject); // {Symbol(key1): "kk"}
2、 es6 Map对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值:字符串、对象、函数、NaN。包括set(),get()方法。
let myMap=new Map([ ['(',')'], ['[',']'], ['{','}'] ]); if (myMap.has(ch)) { console.log(myMap.get(ch)); }
3、 es6 Set对象
Set 对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。作用数组去重、数组合并等。
var mySet = new Set([1, 2, 3, 4, 4]); [...mySet]; // [1, 2, 3, 4] 直接输出mySet,是set对象。
4、 es6 proxy代理
Proxy代理可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式。
Proxy 对象由两个部分组成: target(目标对象), handler(代理的指定行为)。
作用:拦截读取、拦截函数调用、拦截删除、拦截new、拦截原型等。
应用场景:1、数据校验。2、设置不可读不可写属性。3、创建通用dom。
5、 es6 Reflect反射 (观察者模式应用)
Reflect可以用于获取目标对象的行为,它与Object类似,它的方法与Proxy 是对应的。
A、 Reflect.get(target, name, receiver) 查找并返回target对象的name属性。
B、 Reflect.set(target, name, value, receiver) 赋值
C、 Reflect.has(obj, name) 是 name in obj 指令的函数化,用于查找 name 属性在 obj 对象中是否存在。
组合使用(Reflect与Proxy)
let exam = {name: "Tom",age: 24} let handler = { get: function(target, key){ return Reflect.get(target,key); //等同于retrun target[key]; }, set: function(target, key, value){ Reflect.set(target, key, value); } } let proxy = new Proxy(exam, handler) proxy.name = "Jerry" proxy.name // "Jerry"
6、 es6 Iterator迭代器
迭代器是一个接口,只要数据结构暴露了一个iterator的接口,那就可以完成迭代。ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。通过一个键为Symbol.iterator 的方法来实现。
迭代器是带有特殊接口的对象。含有next()方法,调用返回包括value(当前位置的值)和done(是否迭代完)的对象,当done为true的时候,调用next就无效了。
可迭代的对象:Array、Map、Set、String、TypedArray、函数中的 arguments 对象、NodeList 对象。普通对象不能迭代。
const items = ["zero", "one", "two"]; const it = items[Symbol.iterator](); it.next();// >{value: "zero", done: false}
调用迭代器的场合
1) 解构赋值
2) 扩展运算符
3) Generator 函数中的 yield* 表达式
4) or..of
5) Array.from
6) Map()、Set()、WeakMap()、WeakSet()
7) Promise.all()//任务并行
8) Promise.race()//任务竞赛
for of的特点
1) 有着同 for...in 一样的简洁语法,但是没有 for...in 那些缺点
2) 不同于 forEach 方法,它可以与 break、continue 和 return 配合使用
3) 提供了遍历所有数据结构的统一操作接口
7、 es6 Promise对象
这种“承诺将来会执行”的对象在JS中称为Promise对象。
function test(resolve, reject) { var timeOut = Math.random() * 2; setTimeout(function () { if (timeOut < 1) {resolve(‘timeOut’);} else {reject(‘error’);} }, timeOut * 1000); } new Promise(test).then(function (result) { console.log('成功:' + result); }).catch(function (reason) { console.log('失败:' ); });
在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱。代码阅读性差。
Promise.all() 这两个任务是可以并行执行的
Promise.race() 多个异步任务是为了容错,只需要获得先返回的结果即可。
8、 es6 Generator(生成器)
Generator函数,可以通过yield关键字,把函数的执行流挂起。Generator有两个区分于普通函数的部分:
一是在 function 后面,函数名之前有个 * ;
二是函数内部有yield表达式。
调用 Generator 函数和调用普通函数一样,在函数名后面加上()即可,但是 Generator 函数不会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,所以要调用遍历器对象Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。
function* func(){ yield '1'; yield '2'; return '3'; } var f=new func(); f.next();// {value: "1", done: false} f.next();// {value: "2", done: false} f.next();// {value: "3", done: true} f.next();// {value: undefined, done: true}
应用:1、逐行读取文本文件;2、控制流管理;3、利用 Generator 函数,可以在任意对象上部署 Iterator 接口。
9、 es6 async/await函数
async/await使得异步代码看起来像同步代码。
async 函数返回一个Promise对象,可以使用then方法添加回调函数。
async function helloAsync(){ return "helloAsync"; } console.log(helloAsync()) // Promise {<resolved>: "helloAsync"} helloAsync().then(v=>{ console.log(v); // helloAsync })
async 函数执行时,如果遇到 await 就会先暂停执行,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。await关键字只能用在async定义的函数内。
await针对所跟不同表达式的处理方式:
- Promise 对象:await会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
- 非 Promise 对象:直接返回对应的值。
与Promise的区别
1) Promise的出现解决了传统callback函数导致的“地域回调”问题,但它的语法导致了它向纵向发展行成了一个回调链,遇到复杂的业务场景,这样的语法显然也是不美观的。而async await代码看起来会简洁些,使得异步代码看起来像同步代码。
2) async await与Promise一样,是非阻塞的。
3) async函数就相当于自执行的Generator函数。遵循的是Generator 函数的语法糖。它不能用于普通的回调函数。
async必须以一个Promise对象开始 ,所以async通常是和Promise结合使用的。直接将参数从then里取出来,相比promise的链式调用,传参更加方便,异步顺序更加清晰。
function testAwait(){ return new Promise((resolve) => { setTimeout(function(){ console.log("testAwait"); resolve(); }, 1000); }); } async function helloAsync(){ await testAwait(); await testAwait(); console.log("helloAsync"); } helloAsync();
10、 es6 字符串扩展
includes(), startsWith(), endsWith() 返回布尔值,都支持第二个参数,表示开始搜索的位置。
repeat方法返回一个新字符串,表示将原字符串重复n次。
padStart()用于头部补全,padEnd()用于尾部补全。
trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格,返回的都是新字符串