多个异步同时执行 Promise.all
function promiseFn1(){
return new Promise(resolve =>{
setTimeout(() => {
resolve("result");
}, 1000);
});
}
function promiseFn2(){
return new Promise(resolve =>{
setTimeout(() => {
resolve("result");
}, 2000);
})
}
async function func1(){
console.time("func1");
const res1 = await promiseFn1();
const res2 = await promiseFn2();
console.timeEnd("func1");
}
async function func2(){
console.time("func2");
const [res1,res2] = await Promise.all([promiseFn1(), promiseFn2()]);
console.timeEnd("func2");
}
func1(); // func1: 3002.159912109375ms
func2(); // func2: 2001.130126953125ms
Object.values 遍历对象的值 | Object.entries 遍历对象的键值
const obj = {name:'marisol', age:'23'}
// Object.values 遍历对象中的值
console.log(Object.values(obj)); // [ 'marisol', '23' ]
// Object.entries 遍历对象的键值对
console.log(Object.entries(obj)); // [ [ 'name', 'marisol' ], [ 'age', '23' ] ]
// 需求 遍历出对象的键值
for ([key,value] of Object.entries(obj)){
console.log(`${key}-${value}`);
}
// name-marisol
// age-23
对象的扩展 getOwnPropertyDescriptors(obj)
获取对象的所有自身属性的描述符
用它可以实现对象的浅拷贝
Object.assign()只能拷贝对象的自身可枚举属性，不能拷贝对象的属性特性，而且访问器属性会被转化成数据属性，无法拷贝源对象原型，使用Object.getOwnPropertyDescriptors()搭配Object.create()就能实现上述功能。
const newObj = Object.create(
Object.getPrototypeOf(myObj),
Object.getOwnPropertyDescriptors(myObj),
);
全局对象SharedArrayBuffer 与 Atomics
给JS带来了多线程的功能，高级特性，JS引擎核心改进
共享内存的主要思想就是把多线程引入JS
postMessage()
多线程的竞争问题：使用Atomics解决
首先用Worker和message实现通信
// main.js
// 创建一个worker进程
const worker = new Worker('./worker.js');
// postMessage
// 向worker发消息
worker.postMessage('hello i am main');
// 接收到worker的消息
worker.onmessage = function(e){
console.log(e.data);
}
// worker.js
// message事件
onmessage = function(e){
console.log(e.data);;
postMessage('hello i am worker');
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
就这样用node main.js 命令运行还不行 老师起了一个http-server 服务
http-server // 命令行执行
npm install http-server -g// 如果没有安装http-server 需要先安装
启动之后去访问服务的地址就好了
SharedArrayBuffer 共享内存
Atomics 原子操作，是操作的最小单位，不会被打断，一个一个的执行
// main.js
const worker = new Worker('./worker.js');
// 新建1kb共享内存
const sharedBuffer = new SharedArrayBuffer(1024);
// 创建视图
const intArrBuffer = new Int32Array(sharedBuffer);
for(let i=0; i<intArrBuffer.length; i++) {
intArrBuffer[i] = i;
}
worker.postMessage(intArrBuffer);
worker.onmessage = function(e){ // 在worker进程中可以对共享内存进行修改
console.log('更改后的数据：', intArrBuffer[20]); // 111
}
// worker.js
onmessage = function(e){
let arrBuffer = e.data;
// console.log(arrBuffer[20]); // undefined 这样取值是不对的
console.log(Atomics.load(arrBuffer, 20));
// arrBuffer[20] = 80; // 操作无效 这样存值是不对的
// 直接修改共享内存中的数据 main.js 中查询的数据也会被改变
console.log(Atomics.store(arrBuffer, 20, 99)); // 99 返回存入的新数据
console.log(Atomics.exchange(arrBuffer, 20, 111)); // 99 返回被替代下来的旧数据
postMessage('hello i am worker!');
}
Atomics.wait 休眠
onmessage = function(e){
let arrBuffer = e.data;
Atomics.wait(arrBuffer, 11, 11); // 满足当arrBuffer 中index为11的值为11时，会休眠
console.log("我已经休眠了，不会被执行");
}
onmessage = function(e) {
let arrBuffer = e.data;
Atomics.wait(arrBuffer, 11, 11, 2000); // 休眠两秒然后执行
console.log('i am sleeping and will not run!')
}
// index.js 主线程中唤醒worker线程
worker.postMessage(intArrBuffer);
setTimeout(() => {
// 三个参数
// 共享内存的视图数组
// Index: 视图数据位置
// count：唤醒的worker进程数，默认infinity
Atomics.notify(intArrBuffer, 11 , 1);
}, 3000);
