郑州腾讯网站建设,网站推广网,旧手机 搭建wordpress,国外公司网站模板● 我们从很多年前就知道 ES6, 也就是官方发布的 ES2015
● 从 2015 年开始, 官方觉得大家命名太乱了, 所以决定以年份命名
● 但是大家还是习惯了叫做 ES6, 不过这不重要
● 重要的是, ES6 关注的人非常多, 大家也会主动去关注
● 但是从 2016 年以后, 每年官方都会出现新…● 我们从很多年前就知道 ES6, 也就是官方发布的 ES2015
● 从 2015 年开始, 官方觉得大家命名太乱了, 所以决定以年份命名
● 但是大家还是习惯了叫做 ES6, 不过这不重要
● 重要的是, ES6 关注的人非常多, 大家也会主动去关注
● 但是从 2016 年以后, 每年官方都会出现新的语法, 那么大家又有多少关注呢 ES2016 ( ES7 )
● 更新的内容并不多, 更像是在基于 ES2015( ES6 ) 的补充内容 1. 数组方法扩展 ● Array.prototype.includes() ● 语法 : Array.prototype.includes( search[, fromIndex] ) ● 返回值 : 布尔值 ● 基础应用 : 判断数组是否包含指定内容 const arr [ es6, es7, es8, es9 ]
const r1 arr.includes( es8 )
console.log(r1) // true
const r2 arr.includes( es5 )
console.log(r2) // false ● 通过第二个参数确定查询起始索引位置 const arr [ es6, es7, es8, es9 ]
const r1 arr.includes( es8, 1 )
console.log(r1) // 表示从索引 1 位置开始检索, 结果为 true
const r2 arr.includes( es8, 3 )
console.log(r2) // 表示从索引 3 位置开始检索, 结果为 false ● 第二个参数也可以填写负整数, 表示倒数第几个开始检索 const arr [ es6, es7, es8, es9 ]
const r1 arr.includes( es8, -1 )
console.log(r1) // 表示从索引 3 位置开始检索, 结果为 false
const r2 arr.includes( es8, -3 )
console.log(r2) // 表示从索引 1 位置开始检索, 结果为 true ● 冷知识 : includes 方法可以检测到 NaN 这玩意儿~~ const arr [ es6, es7, es8, NaN, es9 ]
const r1 arr.includes( NaN )
console.log(r1) // true 2. 运算符扩展 : 幂运算符 ● ** 符号 ● 是一个取幂的符号, 等价于 Math.pow() 方法 const r1 2 ** 10
// 等价于 Math.pow(2, 10)
console.log(r1) // 1024 ES2017 ( ES8 )
● 更新的内容也不是很多, 也是为了 ES2015( ES6 ) 做了一些补充扩展
1. 异步解决方案的语法糖 async / await ● 两个关键字 async 和 await ● 用于对 Promise 的优化书写方案 ● async ○ 书写在函数前面 ○ 为了在该函数内可以使用 await 关键字 ● await ○ 需要书写在一个有 async 关键字的函数内 ○ 用于等待 Promise 的结果 ○ 可以捕获到 Promise 成功的状态 ● 例子 :
function ajax() {return Promsie(() { /* ... */ })
}async function fn() {const res await ajax()console.log(res)
}fn() ○ 当 fn 调用的时候, 因为 ajax 方法内封装返回的是一个 Promise 对象 ○ 因为使用了 async / await 关键字 ○ 所以会在这一段异步代码结束后, 把 success 的结果给到 res 以后, 再继续向后执行代码 2. 对象扩展 : Object.values() ● Object.values() ● 用于获取到对象内的每一个 值 ● 返回值 : 是一个数组, 包含对象内每一个值 const obj {name: 码农键盘上的梦,age: 8,desc: 扛把子
}
const res Object.values(obj)
console.log(res) // [ 码农键盘上的梦, 8, 扛把子 ]
3. 对象扩展 : Object.entries() ● Object.entries() ● 用于将给定对象的可枚举属性转化为一个包含键值对的数组 ● 返回值 : 是一个二维数组, 和 for ... in 遍历出来的顺序是一样的 const obj {name: 码农键盘上的梦,age: 8,desc: 扛把子
}
const res Object.entries(obj)
cosnole.log(res)
/*[ [ name, 码农键盘上的梦 ], [ age, 8 ], [ desc, 扛把子 ] ]
*/
4. 对象扩展 : Object.getOwnPropertyDescriptors() ● Object.getOwnPropertyDescriptors( 对象 ) ● 返回对象内每一个自身属性的描述详细信息 ● 信息内可能包含的值为 configurable / enumerable / wrieable / value / get / set const obj {name: 码农键盘上的梦,age: 8,desc: 扛把子
}const res Object.getOwnPropertyDescriptors( obj )
/*{age: {configurable: true,enumerable: true,value: 8,writable: true},desc: {configurable: true,enumerable: true,value: 扛把子,writable: true},name: {configurable: true,enumerable: true,value: 码农键盘上的梦,writable: true}}
*/
5. 字符串方法扩展 ● String.prototype.padStart() / String.prototype.padEnd() ● 用于填充字符串, 分别是在 开始位置填充 和 结束位置填充 ● 语法 : ○ String.prototype.padStart( length, str ) ○ String.prototype.padEnd( length, str ) ● 注意 : 如果你的 length 小于字符串本身的 length, 那么不进行填充, 返回原始字符串 ● 示例 :
const str 123456789
// 将 str 字符串填充至 length 为 15, 用 abc 进行填充
const res str.padStart( 15, abc )
console.log(res) // abcabc123456789
const str 123456789
// 将 str 字符串填充至 length 为 11, 用 abc 进行填充
const res str.padStart( 11, abc )
console.log(res) // ab123456789
const str 123456789
// 将 str 字符串填充至 length 为 8, 用 abc 进行填充
const res str.padStart( 8, abc )
console.log(res) // 123456789 ● String.prototype.padEnd() 方法的语法和参数是一样的, 只不过是填充在结尾位置 6. 尾逗号扩展 ● 在函数定义和调用的时候, 可以在参数结尾位置添加一个逗号而不报错 function fn(a, b, c,) {console.log(a, b, c)
}fn(10, 20, 30,) ES2018 ( ES9 )
1. 异步扩展 : for await of ● 用于遍历异步的 Iterator 接口 // 封装一个异步函数
function ajax() { /* ... */ }async function fn() {const arr [ ajax(), ajax(), ajax() ]for await ( let item of arr ) {console.log(Date.now(), item)}
}fn()
2. Promise 方法扩展 : Promise.prototype.finally() ● 表示 Promise 完成 ● 不管一个 Promise 最终是转换到 fulfilled 或者 rejected 状态, 在执行完 then 或者 catch 回调以后, 都会执行一下 finally 回调 const p new Promise((resolve, reject) { /* ... */ })p.then(res { /* ... */ }).catch(err { /* ... */ }).finally(() { /* ... */ })
3. 对象的扩展运算符 : ... ● 可以用于从一个对象内取值, 相当于将目标对象内的所有可遍历但是尚未被获取的属性, 分配到一个新的对象上, 一般用于解构赋值 const obj {name: 码农键盘上的梦,age: 8,desc: 扛把子,score: 100
}const { name, age, ...info } obj/*name 码农键盘上的梦age 8info { desc: 扛把子, score: 100 }
*/ ○ 注意 : ... 运算符一定要放在最后4. 正则扩展 : dotAll 模式 ● 正则内的 点(.) 我们都知道, 在正则表达式内 点(.) 是一个非常特殊的字符 表示的是任意字符, 但是有两个例外 1. 四个自己的 UTF-16 字符, 不过这个可以用 u 修饰符解决 2. 终止符, 点( . ) 表示不了 U000A 换行符 ( \n ) U000D 回车符 ( \r ) U2028 行分隔符 U2029 段分隔符 ● 现在扩展了一个 s 修饰符 当你在书写正则表达式的时候, 如果用了 s 修饰符 表示进入了 dotAll 模式, 既 点(.) 可以表示一切字符, 没有例外 const r1 /a.b/
console.log(r1.test(a\nb)) // falseconst r2 /a.b/s
console.log(r2.test(a\nb)) // true ● 配合 s 修饰符, 正则还给出了一个 dotAll 属性, 用来指出当前正则是否处在 dotAll 模式 const r1 /a.b/
const r2 /a.b/s
console.log(r1.dotAll) // false
console.log(r2.dotAll) // true
5. 正则扩展 : 具名组匹配 ● 在正则表达式内, 小括号 可以表示一个单独的小分组进行单独捕获 ● 在使用 exec 方法的时候, 会把每一个 小括号 的内容单独捕获出来 const str 我学前端的时间 2015-05-18
const reg /(\d{4})-(\d{2})-(\d{2})/
const res reg.exec(str)
console.log( res )
/*[ 0: 2015-05-18,1: 2015,2: 05,3: 18,index: 0,input: 我学前端的时间 2015-05-18groups: undefined] [0] 捕获出来的完整字符串片段[1] - [n] 分别表示每一个小括号单独捕获的内容index 匹配内容的开始索引位置input 原始字符串groups 一个捕获组, 在没有定义命名捕获组的时候是 undefined
*/ ● 这就是以前正则捕获的结果 会发现, 可以把每一个小分组内容捕获出来, 但是我们用起来的时候不是很方便 如果我想单独使用小分组单独捕获出来的内容 res[0] res[1] res[2] ● 现在, 添加了正则内小分组命名的能力, 我们可以给每一个小分组起名字 ● 语法 : (?名字正则) const str 我学前端的时间 2015-05-18
const reg /(?year\d{4})-(?month\d{2})-(?date\d{2})/
const res reg.exec(str)
console.log( res )
/*[ 0: 2015-05-18,1: 2015,2: 05,3: 18,index: 0,input: 我学前端的时间 2015-05-18groups: {year: 2015,month: 05,date: 18}]
*/ ES2019 ( ES10 )
1. 数组扩展 : Array.prototype.flat() 和 Array.prototype.flatMap() ● Array.prototype.flat( 数字 ) 方法用于数组扁平化 ● 参数表示扁平化时的递归深度, 默认是 1 const arr1 [ 1, 2, [ 3, 4 ] ]
console.log(arr1.flat()) // [ 1, 2, 3, 4 ]const arr2 [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr2.flat()) // [ 1, 2, 3, 4, [ 5, 6, [ 7, 8 ] ] ]const arr3 [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr3.flat(2)) // [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]const arr4 [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr4.flat(Infinity)) // [ 1, 2, 3, 4, 5, 6, 7, 8 ] ● Array.prototype.flatMap() 方法也是用于扁平化 这个方就相当于是一个对组通过 map 映射, 然后通过 flat 扁平化 但是他的扁平深度只能是 1 arr.flatMap() 等价于 arr.map().flat(1) const arr [ 1, 2, [ 3, 4, [ 5, 6 ] ] ]
const res arr.flatMap( x x * 10 )
console.log(res) // [ 10, 20, NaN ]
2. 对象扩展 : Object.fromEntries() ● 利用给定的键值对构建一个对象数据结构 ● 它的功能刚好和 Object.entries() 是相反的 const entries new Map([[ name, 码农键盘上的梦 ],[ age, 8 ],[ desc, 扛把子 ]
])const res Object.fromEntries(entries)
console.log(res)
/*{name: 码农键盘上的梦,age: 8,desc: 扛把子}
*/
3. 字符串扩展 : String.prototype.trimStart() 和 trimEnd() ● 这两个方法其实以前就有过, 叫做 trimLeft() 和 trimRight() ● 只不过在 ES2019 中, 名称被更改为 trimStart 和 trimEnd 只是为了看起来更直观 ● trimStart() 修剪字符串的开头空白 ● trimEnd() 修剪字符串的结尾空白 const str 码农键盘上的梦
console.log(str.trimStart())
// 码农键盘上的梦 console.log(str.trimEnd())
// 码农键盘上的梦
4. Symbol 扩展 : Symbol.prototype.description ● 我们在创建 Symbol 的时候, 其实是可以添加一个描述的 ● 但是将来你如果想要取会这个描述就比较麻烦了 以前 我们只能利用 toString 方法, 拿到 Symbol 的字符串 然后自己从字符串中把我们定义 Symbol 的时候添加的描述拿回来 const sy Symbol( 码农键盘上的梦 )
const origin sy.toString()
console.log(origin) // Symbol(码农键盘上的梦) ○ 我们自己从 origin 内把我们需要的描述信息截取出来 ○ 比较麻烦 ● 在 ES2019 内, 给 Symbol 添加了一个只读属性, 叫做 description ● 可以直接拿到每一个 Symbol 初始化的时候填写描述信息 const sy Symbol( 码农键盘上的梦 )
console.log(sy.description) // 码农键盘上的梦
5. 可选 catch 绑定 ● 先来看一下以前的 catch 语法 try {const data JSON.parse(response)
} catch (err) {console.log(执行出错了, 错误信息是 : , err)
} ● 以前的语法迫使我们必须给 catch 绑定一个异常变量 ● 但是其实大部分的时候, 我们是不需要用到这个变量的 ● 但是在开发过程中, 不写又会报错, 这就使得我们每次都要写上 ● 但是在 ES2019 的提案中, 让我们可以忽略掉这个变量 try {const data JSON.parse(response)
} catch {console.log(执行出错了)
}
6. JSON 扩展 : Superset 超集 ● 并不是一个什么新的东西, 只是对 JSON 解析的能力进行了扩展 ● 以前, JSON 在解析的时候, 如果字符串中包含有 分隔符(\u2028) 或者 段落分隔符(\u2029) 是不能被解析的, 会在解析过程中报错 JSON.parse(\u2028) // SyntabError
● 从 ES2019 以后, 可以解析这些内容了
JSON.parse(\u2028) //
7. JSON 扩展 : stringify 加强格式转化 ● 也是增强了 JSON 在格式转换的时候的能力 ● 主要是针对于 emoji 的表现 ● 以前, emoji 和一些其他特殊字符被表示为两个代理项的组合, 如果我们用 JSON 进行格式转换的时候, 会被转换为无效字符 JSON.stringify() //
● ES2019 加强以后, 会在特有代码之前插入转义符, 结果依旧是一个可读且有效的 UTF-8 / UTF-16 的编码
JSON.stringify() // \\ud83d
(篇幅问题我们下篇见)
