ES6-ES12常用语法汇总（上篇）

let和const

let,const和var的区别
. var有变量提升，有初始化提升，值可变
. let有变量提升，没有初始化提升，值可变
. const有变量提升，没有初始化提升，值不可变。但如果是定义对象，则属性可变，属性值也可修改。
. 暂时性死区问题说明：其实let和const是有变量提升的，但是没有初始化提升

var name = "林心如"
function fn () {
	console.log(name)
	let name = 'sunshin_lin'
}
fn ()  // Cannot access 'name' before initialization

块级作用域解决问题

for (var i=0; i<5; i++) {
	setTimeout(()=>{
		console.log(i)
	})
}  // 5 5 5 5 5

for (let i=0; i<5; i++) {
	setTimeout (()=>{
		console.log(i)
	})
}  // 0 1 2 3 4

默认参数

开发中，如果参数不传进来，我们就会设置默认参数
function fn (name, age) {
	var name = name || 'xiaowong'
	var age = aget || 18
	console.log(name,age)
}
fn ()  // xiaowong 18

这样写不够优雅，可以使用es6的默认值
function fn (name="xiaowong",age=18) {
	console.log(name,age)
}
fn () // xiaowong 18
fn ('sunxiao', 22) // sunxiao 22

扩张运算符

相拼接多个数组，我们会这样操作
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [7,8]
const arr = arr1.concat(arr2).concat(arr3)

现在可以更优雅地进行拼接
const arr = [...arr1, ...arr2, ...arr3]

剩余参数

当遇到一个函数，传入参数的个数是不确定的，我们就可以使用es6的剩余参数
function fn (name, ...params) {
	console.log(name)
	console.log(params)
}
fn ('xiaoxiao',1,2) // xiaoxiao [1,2]
fn ('dawang',4,5,6,7)  // dawang [4,5,6,7]

模版字符串

过去拼接字符串只能这么做
const name = 'xiaowang'
const age = '22'
console.log(name+'今年'+age+'岁啦')。//xiaowang今年22岁啦

现在可以这么做，更优雅
console.log(`${name}今年${age}岁了`) //xiaowang今年22岁了

Object.keys

可以用来获取对象的key的集合，进而可以获得对应key的value
const obj = {
	name:"xiaowang",
	age: 22,
	gender: '男'
}
const keys = Object.keys(obj)
console.log(keys) // ['name','age','gender']

箭头函数

普通函数
function fn () {}
const fn = function () {}

es6新增的箭头函数
const  fn = () => {}
// 如果只有一个参数，可以省略括号
const fn = name => {}
// 如果函数体里只有一句return
const fn = name = > { return 2 * name}
// 可简写
const fn = name => 2 * name
// 如果返回的是对象
const fn = name = > { {name:name}}

普通函数和箭头函数的区别
. 箭头函数不可作为构造函数，不能使用new
. 箭头函数没有自己的this
. 箭头函数没有arguments函数
. 箭头函数没有原型对象

Array.forEach

目前es6新增的数组遍历方法
const eachArr = [1,3,4,5,6]
// 三个参数：遍历项，索引，数组本身
// 配合箭头函数
eachArr.forEach((item,index,arr)=>{
	console.log(item,index,arr)
})
// 1,0,[1,3,4,5,6]
// 3,1,[1,3,4,5,6]
// 4,2,[1,3,4,5,6]
// 5,3,[1,3,4,5,6]
// 6,4,[1,3,4,5,6]

Array.map

常用于返回一个处理过后的新数组
const mapArr = [1,2,3,4,5]
// 三个参数：遍历项，索引，数组本身
// 配合箭头函数，对每一个元素进行翻倍
const mapArr1 = mapArr.map((num,index,arr)=> 2*num)
console.log(mapArr1) // [2,4,6,8,10]

Array.filter

用来过滤的方法，返回新数组
const filterArr = [1,2,3,4,5]
// 三个参数：遍历项，索引，数组本身
// 配合箭头函数，返回大于3的集合
const filterArr1 = filterArr.filter((num,index,arr)=>num>3)
console.log(filterArr1) // [4,5]

Array.some

some,意思就是只有一个是真，那就返回真
const someArr = [false,true,false,true,true]
// 三个参数：遍历项，索引，数组本身
// 配合箭头函数，只要有一个为true,就返回true,一个true都没有，就返回false
const someArr1 = someArr.some((bol,index,arr)=> bol)
console.log(someArr1)  //true

Array.every

every跟some是相反的，some是只有一个就行，every是要所有为真才返回真
const everyArr = [false,true,false,true,false]
// 三个参数：遍历项，索引，数组本身
// 配合箭头函数，需要所有为true,才返回true,否则返回false
const everyArr1 = everyArr.every((bol,index,arr)=>bol)
console.log(everyArr1)  // false

Array.reduce

. 第一个参数callback函数，pre为上次return的值，next为数组的本次遍历的项
. 第二个参数为初始值，也是第一个pre

// 计算1+2+3+4+5
const reduceArr = [1,2,3,4,5]
const sum = reduceArr.reduce((pre,next)=>{
	return pre+next
},0)
console.log(sum)  // 15

// 统计元素出现个数
const nameArr = ['张','王','李‘,'陈','张','李']
const totalObj = nameArr.reduce((pre,next)=>{
	pre[next] = pre[next] ? pre[next]+1 : 1 
	return pre
},{})
console.log(totalObj) //  {'张':2,'王':1,'李':2,'陈':1}

对象属性同名简写

以前同名属性需要这么写
const name = 'xiawong'
const age = 22
const obj = {name:name,age:age}

es6新增语法，只需要这么写即可
const obj = {name,age}

Promise

基本使用
1.成功状态
function requestData () {
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve('xiaoming')
		},1000)
	})
}
requestData().then(res=>{
	console.log(res)   // 一秒钟之后输出 ‘xiaoming’
},err=>{
	console.log(err)
})

2.失败状态
function requestData () {
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			reject(错误啦哈')
		},1000)
	})
}
requestData().then(res=>{
	console.log(res)
},err=>{
	console.log(err) // 一秒钟之后输出 ‘错误啦哈’
})

3.all 方法
	. 接收一个Promise数组，数组中如果有非Promise项，则此项当做成功
	. 如果所有Promise都成功，则返回成功结果数组
	. 如果有一个Promise失败，则返回这个失败结果
// 如果全都为成功
function fn (time) {
	return new Promise ((resolve,reject)=>{
		console.log(88)
		setTimeout(()=>{
			resolve(`${time}毫秒后我成功啦！！！`)
		},time)
	})
}
Promise.all([fn(2000),fn(3000),fn(1000)]).then(res=>{
	console.log(res)
	// 3秒后输出 [ '2000毫秒后我成功啦！！！', '3000毫秒后我成功啦！！！', '1000毫秒后我成功啦！！！' ]
},error=>{
	console.log(error)
})

// 如果有一个失败
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)
}, err => {
 console.log(err) // 3秒后输出 '3000毫秒后我失败啦！！！'
})

4.race方法
	.接收一个Promise数组，数组中如有非Promise项，则此项当做成功
	.哪个Promise最快得到结果，就返回那个结果，无论成功失败
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦！！！`) : reject(`${time}毫秒后我失败啦！！！`)
    }, time)
  })
}

Promise.race([fn(2000, true), fn(3000), fn(1000)]).then(res => {
  console.log(res)
}, err => {
  console.log(err) // 1秒后输出
})

class

过去使用构造函数生成对象，这么做
function Person (name) {
	this.name = name
}
Person.prototype.sayName = function () {
	console.log(this.name)
}
const kobe = new Person ('科比')
kobe.sayName()  //科比

es6的class可以这么做
class Person {
	constructor(name) {
		// 构造器
		this.name = name
	}
	sayName () {
		console.log(this.name)
	}
}
const kobe = new Person('科比')
kobe.sayName() // 科比

值得一提的是，class本质也是function，class是function的语法糖

class Person {}
console.log(typeof Person) // function

除了以上，还需要知道class的以下知识点
静态属性和静态方法，使用static定义的属性和方法只能class自己用，实例用不了

class Person {
	constructor (name) {
		this.name = name
	}
	static  age = 22
	static fn () {
		console.log('哈哈')
	}
}
console.log(Person.age) //22
Person.fn()
const sun = new Person('xiaoming')
console.log(sun.age) // undefined
sun.fn() // fn is not a function

extend 继承
class Animal  {
	constructor (name,age) {
		this.age = age
		this.name = name
	}
}
class Cat extends Animal {
	say () {
		console.log(this.name,this.age)
	}
}
const cat = new Cat('xiaoming',5) //继承了Animal的构造器
cat.say()

解构赋值

过去想要提取对象里的属性需要这么做
const obj = {
	name: 'xiaoming',
	age:22,
	gender:'男'
}
const name = obj.name
const age = obj.age
const gender = obj.gender
console.log(name,age,gender) // xiaoming 22 男

ES6新增了解构赋值的语法
const obj = {
	name:'xiaoming',
	age:22,
	gender: '男‘
	doing: {
		morning:'摸鱼'
		afternoon: '摸鱼'
		evening: 'sleep'
	}
}
const {name,age,gender} = obj
console.log(name,age,gender) // xiaoming 22 男

// 解构重名
const {name:myname} = obj
console.log(myname)  // xiaoming
// 嵌套重名
const {doing:{evening}} = obj
console.log(evening). // sleep

也可以进行数组的解构
const arr = [1,2,3]
const [a,b,c] = arr
console.log(a,b,c) // 1 2 3
// 默认赋值
const [a,b,c,d=5] = arr
console.log(a,b,c,d) // 1 2 3 5
// 乱序解构
const {1:a,0:b,2:c} = arr
console.log(a,b,c) // 2 1 3

find和findIndex

. find:找到返回被找元素，找不到返回undefined
. findIndex:找到返回被找元素索引，找不到返回-1

const findArr = [
	{name:'科比', num:'24'},
	{name:'詹姆斯', num:'23'},
	{name:'罗斯', num:'1'}
]

const kobe = findArr.find(({name})=> name==='科比')
const kobeIndex = findArr.findIndex(({name})=>name==='科比')
console.log(kobe) // {name:'科比',num:'24'}
console.log(kobeIndex) // 0

for of 和 for in

. for in : 遍历方法，可遍历对象和数组
. for of : 遍历方法，只能遍历数组，不能遍历对象
// for in 
const obj = {name:'xiaoming',age:22,gender:'男‘}
const arr = [1,2,3,4]
for (let key in obj ) {
	console.log(key)
}
// name age gender

for (let index in arr) {
	console.log(index)
}
// 0 1 2 3 4 5


// for of 
for (let item of arr) {
	console.log(item)
}
// 1 2 3 4 5

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('xiaoming')
console.log(set2) // Set(5) {1,2,3,4,'xiaoming'}
// 是否包含有某个元素，使用 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,'xiaoming'}

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

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


//Set的不重复性中，要注意引用数据类型和NaN
// 两个对象都是不用的指针，所以没法去重
const set1 = new Set([1, {name: '林三心'}, 2, {name: '林三心'}])
console.log(set1) // Set(4) { 1, { name: '林三心' }, 2, { name: '林三心' } }

// 如果是两个对象是同一指针，则能去重
const obj = {name: '林三心'}
const set2 = new Set([1, obj, 2, obj])
console.log(set2) // Set(3) { 1, { name: '林三心' }, 2 }

咱们都知道 NaN !== NaN，NaN是自身不等于自身的，但是在Set中他还是会被去重
const set = new Set([1, NaN, 1, NaN])
console.log(set) // Set(2) { 1, NaN }

// 利用Set的不重复性，可以实现数组去重
const arr = [1, 2, 3, 4, 4, 5, 5, 66, 9, 1]
// Set可利用扩展运算符转为数组哦
const quchongArr = [...new Set(arr)]
console.log(quchongArr) // [1,  2, 3, 4, 5, 66, 9]



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

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, '哈哈' => '嘻嘻嘻' }

原文链接：https://blog.csdn.net/cxz792116/article/details/119671128