ES6 - ES10新增特性
ES6
浏览器
- chrome 49 ~ 65
- fixfox 52 ~ 60
- IE 11
类的引入
class Friut {
constructor(type,color){
this.type = type
this.color = color
}
// toString 是原型对象上的属性
toString(){
console.log(this.type + 'is' + this.color)
}
}
class Banana extends Friut {
constructor(){
// 子类必须要在constructor中指定super 函数,否则在新建实例的时候会报错
super('banana','yellow')
}
toString(super.toString())
}
导出
导出变量:
export var domain = 'http://www.baidu.com'
导出函数:
export function myFun(){
return 'hello'
}
箭头函数,解决this作用域的问题
函数设置默认值
// 有默认值
function myFunction(width = 10, height = 30){
let obj = {
width: width,
height: height,
}
}
// 如果没有默认值可能会导致一些问题,如果传入的参数布尔值为false的话
function myFunction(width,height){
let obj = {
width: width || 10,
height: height || 50,
}
}
myFunction(0,0) // obj: { width: 10, height: 50},不能正确的取传入的值
延展操作符...
[...'hello'] -> ['h','e','l','l','o']
const arr = [1,2,3]
const arr1 = [4,5,6]
const arr3 = [...arr, ...arr1] //浅拷贝 [1,2,3,4,5,6]
对象属性简写
const name="zhangsan",age=18,gender="male"
const params = {
name: name,
age: age,
gender: gender
}
es6可以这样写:
const params = { name, age, gender }
结果:
// { name: 'zahngsan', age: 18, gender: 'male' }
Promise 异步编程
setTimeOut(() => {
console.log('hello') // 1s后输出hello
setTimeOut(() => {
console.log('world') // 2s后输出world
},1000)
},1000)
// 使用Promise
const wait = new Promise((resovle, reject) => {
setTimeout(resolve,1000) // 1s后执行then函数
})
wait.then(() => {
console.log('hello') // 每一个任务
}).then(() => {
console.log('world')
})
ES7
数组includes函数,判断数组中是否存在某个值,返回boolean 指数操作符**
console.log(2**10) // 2^10 = 1024
ES8
async/await 以串行的方式运行异步操作
Object.values(obj) 获取对象的所有值
Onject.entries(obj)
obj = {a:1,b:2,c:3}
for(let [key,value] of obj.entries(obj)){
console.log(`{key:${key},value:${value}}`)
}
// { key: a, value: 1}
// { key: b, value: 2}
// { key: c, value: 3}
padStart(targetLength,padString)
- targetLength: 被填充后的字符串目标长度,如果目标长度小于现在字符串的长度,则不作处理,返回原字符串
- padString 备选填充字符串,填充后如果长度超出目标字符串,则只截取字符串左侧部分
string = 0.0342
string.padStart(8,['235'])
// 目标长度为8,原字符串长度为6,添加23后达到8,所以结果为 230.0342
padEnd(targetLength,[padString])
- 参数解析同上
string = '0.43'
string.padEnd(5,'0') // 0.430
string.padEnd(10,'60') // 0.43600000
ES9
异步迭代
await在循环中场景中下面的代码不会正常运行
async function getData(){
for(let i = 0; i< 10; i++){
await dosomething()
}
}
async function getData(){
arr.forEach(async(item) => {
await dosomething(item)
})
}
es9引入异步迭代后await和forEach同时使用
async function getItem(array){
await array.forEach(item => {
setTimeout(() => {
console.log(item)
},1000)
})
}
1s后依次输入1,2,3
正则表达式命名捕获组
匹配YYYY-MM-DD 格式的正则
reg = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
es9:
reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
match = reg.exec('2019-01-10')
match.groups.year // 2019
match.groups.month // 01
match.groups.day // 10
在replace中的使用,时间转换为美国时间格式
'2019-01-10'.replace(reg,'$<month>-$<day>-$<year>')
ES10
flat、flatMap
- flat()
- 参数:不传默认为1,传入表示遍历的深度,Infinity传入表示展开任意深度的嵌套数组
- 例子:
- [1,2,[3,4,[5]]].flat() --> [1,2,3,4,[5]]
- [1,2,[3,4,[5]]].flat(2) --> [1,2,3,4,5]
- [1,2, ,4].flat() --> 去除空项
- flatMap
- 描述: 遍历数组将返回的数组压平一层
- 例子: [1,2,3].flatMap(i => [[i*2]]) --> [[1],[2],[3]]
trimStart: 去除字符串首位空格 " sds d ".trimStart() --> "sds d "
trimEnd: 去除字符串尾部的空格
Object.fromEntries()
- 将array转为对象
const arr = [["name","张三"],["age",18],["class","九年级一班"]]
const obj = Object.fromEntries(arr)
结果:
{
name: "张三",
age: 18,
class: "九年级一班"
}
新的数据类型BigInt
- 所以es10以后js的基本数据类型一共有7中,分别为:Number、Boolean、String、Null、Undefined、Symbol、BigInt