es6-es12简单总结

ES6

var let const

1、var有变量提升，有初始化提升，可重复声明

2、let有变量提升，没有初始化提升，不可重复声明

3、const有变量提升，没有初始化提升，定义基本数据类型时值不可变。

4、函数提升大于变量提升

默认参数

function fn(name='郭',age=21){}

扩展运算符

const arr1 = [1,2,3]
const arr2 = [3,5,6]
const arr = [...arr1,...arr2]

剩余参数

function(name,...params){}
//传入参数数量不一定

模板字符串

const name = '郭'
const age = 21
console.log(`${name}今年${age}岁了`)

箭头函数

const fn = () => {}
//箭头函数this指向外层this
//箭头函数没有原型

对象同名简写

const name ='郭'
const obj = { name }

解构赋值

const obj = {name:'郭',age:21,doing:{morning:'阅读'}}
const {name,age} = obj//基本解构
const {name:myname} = obj//解构重命名
const {doing:{morning}} = obj//嵌套解构
const {hobby="乒乓"} = obj//默认赋值
//数组解构与对象基本相同

Object.keys

const obj = {name:'郭',age:21}
Object.keys(obj)//['郭',21]

Array.prototype.forEach

arr.forEach((item,index,arr)=>{})
//遍历方法
//三个参数：遍历项 索引 数组本身

Array.prototype.map

arr.map((item,index,arr)=>{})
//返回一个处理后的新数组
//三个参数：遍历项 索引 数组本身

Array.prototype.filter

arr.filter((item,index,arr)=>{})
//过滤出来数组中的一些item
//三个参数：遍历项 索引 数组本身

Array.prototype.some

arr.some((bol, index, arr) => boolean)
//只要有一项返回true，则some返回值为true
//三个参数：遍历项 索引 数组本身

Array.prototype.every

arr.every((bol, index, arr) => boolean)
//只要有一项返回false，则every返回值为false
//三个参数：遍历项 索引 数组本身

Array.prototype.reduce

//第一个参数callback函数： pre为上次return的值，next为数组的本次遍历的项
//第二个参数为初始值
// 统计元素出现个数
const nameArr = ['liming', 'gavin', 'liming', 'liming', 'cherry']
const result = nameArr.reduce((pre, next) => {
  if (pre[next]) {
    pre[next]++
  } else {
    pre[next] = 1
  }
  return pre
}, {} )
//result : { 'liming': 3, gavin: 1, 'cherry': 1 }

Promise

function request(){
	return new Promise((resolve, reject) => {
    	if(flag){
    		resolve('111')//成功状态
		}else{
			reject('222')//失败状态
		}
  })
}

promise.all

//参数为一个promise数组，数组内promise全成功则返回结果数组，有一个失败则返回失败结果。
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}成功`) : reject(`${time}失败`)
    }, time)
})
Promise.all([fn(2000, true), fn(3000), fn(1000, true)]).then(res => {
  console.log(res)//如果成功3秒后输出[ '2000成功', '3000成功', '1000成功' ]
}, err => {
  console.log(err)//如果失败3秒后输出 '3000失败'
})

promise.all

//接收一个Promise数组，数组中如有非Promise项，则此项当做成功
//哪个Promise最快得到结果，就返回那个结果，无论成功失败(成功在then失败在catch)

class

//class是function的语法糖，typeof class === 'function'
//static静态属性和方法只能class内部使用，实例使用不了
//继承extands可以用实例调用父类属性和方法
//super可以让子类内部调用父类的属性和方法
class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
class Cat extends Animal {
  say() {
    console.log(this.name, this.age)
  }
}
const cat = new Cat('ketty', 5) // 继承了Animal的构造器
cat.say() // ketty 5

find和findeIndex

const arr = [
	{name:'郭'},
	{name:'尤雨溪'},
	{name:'贤心'},
]
arr.find(item=>item.name==='郭')//{name:'郭'}
arar.findIndex(item=>item.name==='尤雨溪')//1

for of和for in

//for in:可遍历对象和数组
//for of:只能遍历数组
for(let key in obj)
for(let index in arr)
for(let item of arr)

Set和Map

Set的基本用法

// 可不传数组
const set1 = new Set()
set1.add(1)
set1.add(2)
console.log(set1) // Set(2) { 1, 2 }

// 也可传数组
const set2 = new Set([1, 2, 3])
// 增加元素 使用 add
set2.add(4)
set2.add('gavin')
console.log(set2) // Set(5) { 1, 2, 3, 4, 'gavin' }
// 是否含有某个元素 使用 has
console.log(set2.has(2)) // true
// 查看长度 使用 size
console.log(set2.size) // 5
// 删除元素 使用 delete
set2.delete(2)
console.log(set2) // Set(4) { 1, 3, 4, 'gavin' }

Set的不重复性

// 增加一个已有元素，则增加无效，会被自动去重
const set1 = new Set([1])
set1.add(1)
console.log(set1) // Set(1) { 1 }

// 传入的数组中有重复项，会自动去重
const set2 = new Set([1, 2, 'gavin', 3, 3, 'favin'])
console.log(set2) // Set(4) { 1, 2, 'gavin', 3 }

//利用不重复性实现数组去重
const arr = [1, 2, 3, 4, 4, 5, 5, 66, 9, 1]
const quchongArr = [...new Set(arr)]
console.log(quchongArr) // [1,  2, 3, 4, 5, 66, 9]

Map对比object最大的好处就是，key不受类型限制

// 定义map
const map1 = new Map()
// 新增键值对 使用 set(key, value)
map1.set(true, 1)
map1.set(1, 2)
map1.set('哈哈', '嘻嘻嘻')
console.log(map1) // Map(3) { true => 1, 1 => 2, '哈哈' => '嘻嘻嘻' }
// 判断map是否含有某个key 使用 has(key)
console.log(map1.has('哈哈')) // true
// 获取map中某个key对应的value 使用 get(key)
console.log(map1.get(true)) // 2
// 删除map中某个键值对 使用 delete(key)
map1.delete('哈哈')
console.log(map1) // Map(2) { true => 1, 1 => 2 }

// 定义map，也可传入键值对数组集合
const map2 = new Map([[true, 1], [1, 2], ['哈哈', '嘻嘻嘻']])
console.log(map2) // Map(3) { true => 1, 1 => 2, '哈哈' => '嘻嘻嘻' }

ES7

includes

//传入元素，如果数组中能找到此元素，则返回true，否则返回false

求幂运算符

//老版本 Math.pow(3, 2) //9
const num = 3 ** 2 // 9

ES8

Object.values

//获取对象的value的集合
const obj = {
  name: '郭',
  age: 21,
  gender: '男'
}
Object.values(obj) //['郭',21,'男']

Object.entries

//获取对象的键值对集合
const obj = {
  name: '郭',
  age: 21,
  gender: '男'
}
Object.entries(obj)// [ [ 'name', '郭' ], [ 'age', 21 ],['gender', '男' ] ]

async/await

//以同步方式执行异步操作
//await只能在async函数里使用
//async函数返回的是一个Promise

ES9

for await of

//将一堆await同步promise函数循环执行
function fn (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦！！！`)
    }, time)
  })
}
async function asyncFn () {
  const arr = [fn(3000), fn(1000), fn(1000), fn(2000), fn(500)]
  for await (let res of arr) {
    console.log(res)
  }
}

asyncFn()
3000毫秒后我成功啦！！！
1000毫秒后我成功啦！！！
1000毫秒后我成功啦！！！
2000毫秒后我成功啦！！！
500毫秒后我成功啦！！！

Promise.finally

//promise无论失败或者成功状态，都会执行这个函数
new Promise((resolve, reject) => {
  reject('失败喽')
}).then(
  res => { console.log(res) },
  err => { console.log(err) }
).finally(() => { console.log('我是finally') })

ES10

Array.flat

//将多维数组降级
//参数为降级的次数，不传参为降级一次
//参数为无穷大Infinity，无论多少级都降级为1级
const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]
arr.flat(2) //[ 1, 2, 3, 4, 5,6, 7, 8, 9 ]

Array.flatMap

//flat+map的结合体
const arr = ["郭 李 王", "赵 杜 张"];
//转化为['郭','李','王','赵','杜','张']
arr.map(x => x.split(" ")).flat()
//如果使用flatMap
arr.flatMap(x => x.split(" ")

BigInt

//用来表示表示大于 2^53 - 1 的整数，2^53 - 1是ES10之前，JavaScript所能表示最大的数字
const num = BigInt(4384364836483)
//typeof num === bigint

Object.fromEntries

//同Object.entries相反，把键值对数组转为对象
//可以把Map转为对象
const arr = [
  ['name', '郭'],
  ['age', 21],
  ['gender', '男']
]
Object.fromEntries(arr) //{ name: '郭', age: 21, gender: '男' }

trimStart和trimEnd

//trimStart去除首部空格
//trimEnd去除尾部空格

ES11

Promise.allSettled

//接收一个Promise数组，把每一个Promise的结果，集合成数组返回
//数组中如有非Promise项，则此项当做成功
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦！！！`) : reject(`${time}毫秒后我失败啦！！！`)
    }, time)
  })
}
Promise.allSettled([fn(2000, true), fn(3000), fn(1000)]).then(res => {
  console.log(res) 
})
// 3秒后输出
[
  { status: 'fulfilled', value: '2000毫秒后我成功啦！！！' },
  { status: 'rejected', reason: '3000毫秒后我失败啦！！！' },
  { status: 'rejected', reason: '1000毫秒后我失败啦！！！' }
]

?. 和 ??

?. 可选链

//list为数组且有长度才能进行一些操作
if(list && list.length){}
if(list?.length){}

//如果obj存在且dog存在，再拿取dog的name
const dog = obj && obj.dog && obj.dog.name
const dog = obg?.dog?.name

//不确定数组是否存在，如果存在取第二个元素
arr && arr[1]
arr?.[1]

//不确定函数是否存在，存在则执行它
fn && fn()
fn?.()

?? 空位合并运算符

//与 || 不同，在??这，只有undefined和null才算假值 0 '' false都不算
const a = 0 ?? 'gavin' // 0
const b = '' ?? 'gavin' // ''
const c = false ?? 'gavin' // false
const d = undefined ?? 'gavin' // gavin
const e = null ?? 'gavin' // gavin

ES12

Promise.any

//接收一个Promise数组,如果有一个Promise成功，终止返回这一个成功结果,全部失败走catch报错all Error