ES6常用部分

2023-11-15 21:38:46

ES6常用部分

ES6概述
let 和 const
解构赋值
（常用）对象解构
增加Map
- foreach遍历
set
- 类型转换
- 数组去重
- 并
- 交
- 差
函数
对象优化
async await 进行异步处理（ES7）

ES6概述

ES6，全称 ECMAScript 6.0
目前多数浏览器支持其大部分功能（基本最新浏览器都近100%）（不要跟我谈IE，我受不了它）
是js的标准，自2015年诞生

let 和 const

这两个关键字我们常常使用，之前我们没有了解ES6的时候相信也使用过

let

let关键字是块级作用域，只在声明的块级有效
和var相比，let 不存在变量提升，var 会变量提升
意思是var在运行时就产生，而let是在读取到声明行才产生
let只能声明一次，var可以声明多次

const

声明后必须赋值

const和let都有封闭性死区

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量之前使用它会报错

var a = 1;
if(a!=null){
	console.log(a)
	let/const a = 5;
}

解构赋值

基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构

let [a = 1, b] = []; 
// a = 1, b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

字符串等

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

但以上均不常用

（常用）对象解构

当你有一份json数据：

res{
	'code': 200,
	'user': {
		'userId': 1,
		'username': 'zhangsan'
	}
	'token':sakhdsdjhsafdjas.adshoajdaospdaohd.sdhaljdqpdeq
	'result': 'success'
}

我们想要拿到result就可以使用结构的方式

const {result:res}

增加Map

和Java的map是一样的，但是无需指定泛型

const map = new Map()

在map中存储使用set方法
在map中取值使用get方法

map.set("token",token)

map.get("token")

foreach遍历

map.forEach(function(value, key) {
  console.log(key + " = " + value);
}, map)

set

set和Java也是差不多的，本质是无序去重数组

const set = new Set()

往里面添加元素使用add方法

set.add(5)
set.add("String")

类型转换

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
String
// String 转 Set
var mySet = new Set('hello'); 
 // Set(4) {"h", "e", "l", "o"}

数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

并

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

函数

主要就是箭头函数（lambda）
单行

（var/let/const）函数名=(参数)=> 返回

多行

（var/let/const）函数名=(参数)=> {
	代码块
}

对象优化

新增Object.keys（）取出对象的键

新增Object.values（）取出对象的值

Object.entries（）取出键值对

对象深拷贝

let user1={	
	username:"zhangsan",
	job:{work1:"外卖",work2:"司机"}
	}
let user2={...user1}

对象合并

let a = { name:'a' }
let b = { name:'b' }
let c = { name:'c' }
let d = {...a,...b,...c}

async await 进行异步处理（ES7）

async function name([param[, param[, ... param]]]) { statements }

    name: 函数名称。
    param: 要传递给函数的参数的名称。
    statements: 函数体语句。

async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。

let  doawait = (res)=> 1
 
async doAsync(){
   await doawait();
   console.log("2");
 }
doAsync();

先打印1
再打印2

码农公寓