❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：
ES6
- ES6（ECMAScript 6）是JavaScript的第六个版本，也称为ECMAScript 2015。它是ECMAScript标准的一个重要更新，引入了许多新的语言特性和改进，为JavaScript开发者提供了更强大、更灵活的工具和语法。
let const
- let 和 var差不多，但是不能重复声明变量
- const用于保存一些常量，保存的数据一旦被赋值，就不能被修改
- var声明的变量作用域会提升，但是let在声明之前访问就会报错，从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区
- 在全局通过var来声明一个变量，事实上会在window上添加一个属性，但是let，const是不会给window上添加任何的属性
块级作用域
作用域分为全局作用域，函数作用域，块级作用域
在ES5众，放到一个代码中定义的变量，外面是可以访问到的
但是在ES6众新增了块级作用域，并通过let，const，function，class的标识符是巨鳖块级作用域的限制的
这里我们需要注意，函数function拥有块级作用域，但是外面依然可以访问到，这是因为JS引擎会对函数的声明进行特殊的处理，允许像var那样进行提升
模板字符串，标签模板字符串
- 在ES6之前，拼接字符串很复杂，es6使用反引号和${}拼接字符串
- 标签模板字符串：(用在styled-components库)
函数的默认参数
- es6增加了函数的默认参数
函数的剩余参数
- 如果最后一个参数是…为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组，剩余参数要放在最后一个位置
剩余参数和arguments有什么区别？
- 剩余参数值包含那些没有对应形参的实参，arguments对象包含传给函数所有的实参；
- arguments对象不是一个真正的数组，而…参数是一个真正的数组，可以进行数组的所有操作
- arguments是早期ECMAScript中为了方便去获取所有参数提供的一个数据结构，而。。。是es6中提供代替arguments的
箭头函数
- 箭头函数没有显示原型Prototype的，不能作为构造函数
- 箭头函数也不绑定，this，arguments，super参数
展开语法
- 在函数调用/数组构造时，将数组表达式或者string在语法层面展开
- 还可以构造对象时，将对象表达式按照key-value的方式展开
- 展开语法是一个浅拷贝
浅拷贝/深拷贝
- 这个就叫做引用赋值，和展开语法是一样的，都是浅拷贝
- 这样，如果你修改了其中一个变量所引用的对象，另一个变量也会反映这些修改，因为它们引用的是同一个对象。
- 如果想实现深拷贝，需要自己实现。其中一种方法是利用JSON的机制来实现深拷贝。
const info3 = JSON.parse(JSON.stringify(obj)); - JSON深拷贝的弊端，函数和方法丢失：JSON只能序列化对象的数据，不能序列化对象的方法和函数。当进行深拷贝时，函数和方法将丢失，只有数据被复制。循环引用问题：如果对象存在循环引用，即对象之间相互引用，JSON无法正确处理这种情况。在序列化和反序列化过程中，JSON会陷入循环引用的无限循环中，导致堆栈溢出或内存泄漏。特殊对象丢失：JSON无法序列化特殊对象，例如正则表达式、日期对象、Map、Set等。这些对象在序列化和反序列化后，将丢失它们的原始类型和功能。原型链丢失：JSON无法序列化对象的原型链信息。在深拷贝后，所有对象的原型都将丢失，它们只是简单的数据对象，无法访问原型链上的方法和属性。
深拷贝实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//判断是不是对象
function isObject(value) {
const valueType = typeof value; // null,object,function,array
return (
value !== null && (valueType === "object" || valueType === "function")
);
}
function deepCopy(originValue, map = new WeakMap()) {
//通过map解决循环引用，
//1.如果是原始类型，直接返回
if (!isObject(originValue)) {
return originValue;
}
//2.如果是对象类型，才需要创建对象
if (map.get(originValue)) {
return map.get(originValue);
}
const newObj = Array.isArray(originValue) ? [] : {};
map.set(originValue, newObj);
for (const key in originValue) {
newObj[key] = deepCopy(originValue[key], map);
}
return newObj;
}
const info = {
name: "why",
age: 18,
friend: {
name: "kobe",
address: {
name: "洛杉矶",
detail: "lmp",
},
},
};
info.self = info;
const newObj = deepCopy(info);
console.log(newObj);
</script>
</body>
</html>
数值的表示
在ES6中，规范了二进制和八进制的写法
Symbol
- ES6中新增的一个基本数据类型。
- 在es6之前编写一个属性，对象的属性名都是字符串，如果不是字符串，就会调用toString()方法改成字符串，那么很容易造成属性名冲突；
- Symbol就是为了解决这个问题，用于生成一个独一无二的值。通过一个Symbol函数生成的 const s1 = Symbol(),es6之后，对象的属性名就既可以是字符串又可以是Symbol了
- 使用方法的话可以这么写
- Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组
- 通常我们获取对象的key的时候，通过Object.keys(obj)实现，但是这个方法获取不到Symbol作为key，需要通过Object.getOwnPropertySymbols(obj)单独获取Symbol作为key的字段
- Symbol()里面的（）可以描述Symbol，通过s.description可以获取Symbol的描述
- 我们通过Symbol.for可以生成相同的Symbol；通过Symbol.keyFor方法来获取对应的key
Set
- 在ES6之前，我们存储数据的结构主要有：数组，对象
- 在ES6中新增了另外两种数据结构，Set，Map，以及他们的另外形式WeakSet，WeakMap
- Set是一个新增的数据结构，可以用来保存数据，里面的数据不能重复，通过构造函数创建
set的常见方法
- 作用：数组的去重，Array.from(new Set(数组))/[…new Set(数组)]
WeakSet
- 内部元素不能重复
- 区别一：但是只能存放对象类型，不能存放基本数据类型；区别二：对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收
- 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常销毁，所以存储到WeakSet中的对象是没办法获取的，WeakSet不能遍历
Map
- Map用于存储映射关系，但是使用对象也可以存储映射关系；对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key），某些情况下，我们希望通过其他类型作为key，比如对象，这时候就可以使用map
map常用方法
WeakMap
- 和map的区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；区别二：WeakMap的key对对象的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象
- 注意WeakMap也是不能遍历的
Proxy
- 下面是vue2的响应式原理，但是这样写是有弊端的，首先Object.defineProperty的设计的初衷，不是为了去监听一个对象的所有属性，其次我们如果想监听更加丰富的操作，比如新增属性，删除属性，那么Object.defineProperty是不行的，这是就出现了Proxy对象，这个是专门用作监听对象而生成的。
const keys = Object.keys(obj);
for (const key of keys) {
let value = obj[key];
Object.defineProperty(obj, key, {
set: function (newValue) {
value = newValue;
},
get: function () {
return value;
},
});
}
- 在ES6中，新增了一个Proxy类，帮助我们创建一个代理对象，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象，之后对该对象的所有操作，都通过代理对象完成，代理对象可以监听我们想要对原对象进行哪些操作
- 首先我们需要new Proxy对象，传入需要监听的对象和一个处理对象，称之为handler；const p = new Proxy(target,handler)，之后我们所有的操作都是直接对Proxy对象的操作，而不是原有的对象
var obj = {
name: "lmp",
age: 18,
height: 1.88,
};
//1.创建一个代理对象
const objProxy = new Proxy(obj, {
//编写set和get捕获器
//get函数有三个参数：1.target：目标对象(侦听的对象)
//2.property：被捕获 的属性key
//3.receiver：调用的代理对象
get: function (target, key) {
console.log(`监听${key}的获取`);
return target[key];
},
//set函数有四个参数
//1.target：目标对象
//property：将被设置的属性key
//value：新属性值
//receiver：调用的代理对象
set: function (target, key, newValue) {
console.log(`监听${key}的设置值：`, newValue);
target[key] = newValue;
},
deleteProperty: function (target, key) {
delete obj.name;
},
has: function (target, key) {
return key in target;
},
});
//2.对obj的所有操作，应该去操作objProxy
console.log(objProxy.name);
objProxy.name = "why";
delete objProxy.name;
console.log(objProxy.name, 111);
- 函数也是一个对象，所以函数也是可以监听的，监听器例如apply函数，construct函数
Reflect
- 这个本身是一个对象，字面意思是反射，它提供了操作JavaScript对象的方法，类似于Object中操作对象的方法。例如获取原型对象Reflect.getPrototypeOf(target)，定义对象属性Reflect.defineProperty(target,propertyKey,attributes)
- 如果我们有Object可以做这些操作，为什么还需要Reflect这样的新增对象呢？
- 早期的ECMA规范中没有考虑到对象本身的操作如何设计更加规范，所以将这些API放在Object上面，但是Object作为一个构造函数，放到它的身上是不合适的，ES6增加了Reflect，让这些操作都集中到了Reflect对象上
- 区别1：delete操作，使用Reflecct.deleteProperty可以返回一个布尔值
- Reflect一般配合Proxy配合使用
const objProxy = new Proxy(obj, {
set: function (target, key, newValue, receiver) {
//好处1：不再操作直接对象
//好处2：Reflect.set方法有返回Boolean值，可以判断本次操作是否成功
//好处3：Reflect可以设置Receiver
/*
receiver就是外层的Proxy对象
Reflect.set/get最后一个receiver参数，可以决定对象访问器Setter/Getter的this指向，可以实现监听两次，默认this是指向元对象obj的，增加recceiver参数后，就可以改变this的指向了
*/
const isSuccess = Reflect.set(target, key, newValue);
if (!isSuccess) {
throw new Error("error");
}
},
});
ES7
Array Includes
- 在ES7之前，如果我们想判断一个数组中是否包含某个元素，可以通过indexOf获取结果，并且判断是否为-1
- 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，包含返回true，不包含返回false
指数运算符
ES8
Object.values
- 之前我们通过Object。keys获取一个对象所有的key
- 在ES8中提供Object.values来获取所有的value值
Object.entries
- 通过Object.entries可以获取到一个数组，数组中存放可枚举属性的键值对数组
- 可以针对对象，数组，字符串进行操作
padStart、padEnd
- 某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了padStart和padEnd方法，分别对象字符串的首尾进行填充
Trailing Commas
- 在ES8中，允许我们在函数的定义和调用时多加一个逗号
ES10
flat flatMap
- flat方法会按照一个可指定的深度递归遍历数组
- flatMap方法，首先使用映射函数映射每个元素，然后将结果压缩成一个新数组
Object fromEntries
- 可以通过Object.entries将一个对象转换成entries、那么现在有一个entries，通过fromEntries转换成对象
Object.fromEntries的实际用法
ES11
trimStart和trimEnd
- 去除一个字符串首尾的空格，通过trim方法，单独去除前面或后面的空格，用trimStart和trimEnd
BigInt
- 早期的JS中，不能正确的表示过大的数字，大于MAX_SAFE_INTEGER的数值，表示的是不正确的
在ES11中，引入新的数据类型BigInt，用于表示大的整数
BigInt的表示方法是在数值后面加上n
可选链
- 主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁
for … in
- 在ES11之前，虽然很多浏览器支持for in 来遍历对象类型，但是并没有被ECMA标准化
- ES11中，对其进行了标准化，for in用于遍历对象的key
ES12
数字过长时候使用_连接
Promise
异步处理代码的困境
- 在以前都是自己设计异步代码，这样设计代码的和调用者可能不是同一个人，会有很多的麻烦
function execCode(counter, successCallback, failCallback) {
setTimeout(() => {
if (counter <= 0) failCallback(`${counter}值有问题`);
let total = 0;
for (let i = 0; i < counter; i++) {
total += i;
}
successCallback(total);
}, 3000);
}
execCode(
100,
(total) => {
console.log(total);
},
(err) => {
console.log(err);
}
);
- 因此出现了promise，promise就像一个通知器一样，告诉你成功了还是失败了
- Promise是一个类，当我们需要的时候，promise给予调用者一个承诺，待会给你回调数据，当通过new创建Promise对象时，我们需要传入一个回调函数，称为executor，这个回调函数会立即执行，并传入另外两个回调函数,resolve,reject，分别对应.then,.catch，注意：一旦状态被确定，Promise的状态就会被锁死，不会改变
function execCode(counter) {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (counter <= 0) {
reject("error");
}
let total = 0;
for (let i = 0; i < counter; i++) {
total += i;
}
resolve(total);
}, 3000);
});
return promise;
}
const promise = execCode(100);
promise
.then((value) => {
console.log(value);
})
.catch((error) => {
console.log(error);
});
promise的三种状态
- 当还没有调用回调函数(resolve,reject),处理待定状态；当操作成功，执行resolve，表示promise成功兑现，reject就是失败了。
- Promise的状态一旦确定下来，就不会再更改，也不会再执行某一个回调函数来改变状态。
resolve方法的参数
- resolve的括号里可以传什么值：1.普通值(字符串，对象，数组等)2.promise，如果传入的值是Promsie对象，那么当前的Promise的状态会由传入的Promise状态来确定
then方法
- then方法可以传两个参数，第一个是成功的回调函数，第二个也可以传失败的回调函数.then(res=>{},err=>{})
- promise.then之后的返回值是一个新的Promise对象，如果是链式调用的话，第二个then是等待第一个then的返回值进行决议的，如果抛出异常了，就会中断函数执行
finally
- 这个是ES9新增的方法，用在Promise中
promise中的类方法
resolve
- 上面的下面的代码是一样的
reject
- 和resolve用法一样
all
- 将多个Promise包裹在一起形成一个新的Promise；新的Promise状态由包裹的所有Promise共同决定，当所有的Promise状态编程fulfilled状态时，新的Promise状态为fulfilled，并会将所有Promise的返回值组成一个数组；当由一个Promise状态为reject时候，新的Promise状态为reject，并会将第一个reject的返回值作为参数
allSettled
- all方法有一个缺陷，当其中一个Promise变成reject状态时，新的Promise就会立即变成对应的reject状态；那么对于resolved的，依然处于pending状态的Promise，我们获取不到对应的结果
- 在ES11中，新增了allSettled的api，该方法会在所有Promise都有结果，无论是fulfilled还是rejected时，才会有最终的状态，并且这个Promise的结果一定是fulfilled的，返回的是一个数组对象，对象中一个是status是状态是rejected还是fulfilled，如果是reject，还有个字段就是reason，如果是fulfilled，就拿到value
race
- 如果有多个Promise相互竞争，谁先有结果，就用谁的。
手写Promise
class MyPromise {
#state = 'pending';//promise的初始状态为pending
#value = undefined;//存储解析值
#reason = undefined;//存储拒绝原因
#onResolveCallbacks = [];//存储成功回调函数的数组
#onRejectCallbacks = [];//存储失败回调函数的数组
constructor(executor) {
//构造函数接受两个参数：resolve和reject
const resolve = (value) => {
if (this.#state === 'pending') {
this.#state = 'fulfilled';// 将 Promise 状态设置为 fulfilled（已完成）
this.#value = value;// 存储解析值
setTimeout(() => {
// 异步执行所有已注册的成功回调函数，yinweipromise执行是在事件循环的微任务中
for (const callback of this.#onResolveCallbacks) {
callback(this.#value);
}
});
}
};
const reject = (reason) => {
if (this.#state === 'pending') {
this.#state = 'rejected';// 将 Promise 状态设置为 rejected（已拒绝）
this.#reason = reason;// 存储拒绝原因
setTimeout(() => {
if (this.#onRejectCallbacks.length) {
// 如果存在已注册的失败回调函数，则异步执行它们
for (const callback of this.#onRejectCallbacks) {
callback(this.#reason);
}
} else {
// 如果没有注册的失败回调函数，则抛出拒绝原因
throw this.#reason;
}
});
}
};
try {
executor(resolve, reject);// 执行器函数接收两个参数，并在创建Promise的时候直接调用 resolve 或 reject
} catch (error) {
reject(error);// 如果执行器函数抛出错误，则将 Promise 状态设置为 rejected
}
}
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
const resolveWrapper = (value) => {
try {
const result = onFulfilled(value);
resolve(result);
} catch (error) {
reject(error);
}
};
const rejectWrapper = (reason) => {
try {
const result = onRejected(reason);
resolve(result);
} catch (error) {
reject(error);
}
};
if (this.#state === 'fulfilled') {
setTimeout(() => {
resolveWrapper(this.#value);
});
} else if (this.#state === 'rejected') {
setTimeout(() => {
rejectWrapper(this.#reason);
});
} else {
this.#onResolveCallbacks.push(resolveWrapper);
this.#onRejectCallbacks.push(rejectWrapper);
}
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
function asyncTask() {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
const randomNumber = Math.random();
if (randomNumber < 0.5) {
resolve(randomNumber);
} else {
reject(new Error("Random number is greater than or equal to 0.5"));
}
}, 1000);
});
}
asyncTask()
.then((result) => {
console.log("Resolved:", result);
return result * 2;
})
.then((result) => {
console.log("Resolved:", result);
})
.catch((error) => {
console.log("Rejected:", error.message);
});
手写promise.all
- 当所有的 Promise 都变为已解决状态时，新的 Promise 才会被解决，且解决值是一个包含所有已解决 Promise 值的数组，顺序与原始 Promise 数组的顺序相同。
如果任何一个 Promise 变为拒绝状态，新的 Promise 就会被拒绝，并返回第一个拒绝的 Promise 的原因。
function promiseAll(promises) {
return new Promise((resolve, reject) => {
const results = []; // 用于存储所有 Promise 对象的解析值
let completedCount = 0; // 已完成的 Promise 数量计数
for (let i = 0; i < promises.length; i++) {
promises[i]
.then((result) => {
results[i] = result; // 将 Promise 对象的解析值存入对应的索引位置
completedCount++;
if (completedCount === promises.length) {
// 当所有 Promise 对象都完成时，解析返回的 Promise 对象，并传递结果数组
resolve(results);
}
})
.catch(reject); // 如果有任何一个 Promise 对象被拒绝，直接拒绝返回的 Promise 对象
}
if (promises.length === 0) {
// 处理空的 Promise 数组，直接解析并返回空结果数组
resolve(results);
}
});
}
// 示例
const promise1 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 1');
}, 1000);
});
const promise2 = new Promise((resolve) => {
setTimeout(() => {
resolve('Promise 2');
}, 2000);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('Promise 3 rejected'));
}, 1500);
});
promiseAll([promise1, promise2])
.then((results) => {
console.log(results); // 输出: ['Promise 1', 'Promise 2']
})
.catch((error) => {
console.log(error); // 输出: Error: Promise 3 rejected
});
手写Promise.race
- 只要有一个 Promise 状态变为已解决或已拒绝，新的 Promise 就会被解决或拒绝，且结果是第一个完成的 Promise 的值或原因。
function isPromise(val) {
if ((!val && typeof val === "object") || typeof val === "function") {
if (typeof val.then === "function") {
return true;
}
} else {
return false;
}
}
function promiseRace(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
let value = promises[i];
if (value && isPromise(value)) {
value
.then((result) => {
resolve(result); // 一旦有一个 Promise 对象解析完成，立即解析返回的 Promise 对象，并传递解析值
})
.catch((error) => {
(error) => reject(error);
});
} else {
reject(error); // 如果有任何一个 Promise 对象被拒绝，直接拒绝返回的 Promise 对象，并传递拒绝的原因
}
}
});
}
手写promise.any
- 只要有一个 Promise 状态变为已解决，新的 Promise 就会被解决，且结果是第一个已解决的 Promise 的值。
如果所有的 Promise 都变为拒绝状态，新的 Promise 就会被拒绝，并返回一个包含所有拒绝原因的 AggregateError。
function promiseAny(promises) {
return new Promise((resolve, reject) => {
let errors = []; //存储拒绝的Promise错误
let resolved = false; // 标记是否已解决一个Promise，确保值关注第一个Pormise被rosolve的值
promises.forEach((promise) => {
promise
.then((value) => {
if (!resolved) {
resolved = true;
resolve(value);
}
})
.catch((error) => {
errors.push(error);
if (errors.length === promises.length) {
reject(errors);
}
});
});
});
}
生成器
- 生成器使ES6中新增的一种函数控制，使用的方案，它让我们更加灵活的控制函数什么时候继续执行，暂停执行。
- 平时我们编写函数，这些函数种植的条件通常使返回值或者发生了异常
- 生成器也是一个函数，但是和普通的函数有一些区别；
1.生成器函数在function后面加一个*
2.生成器函数可以通过yield关键字来控制函数的执行流程
3.生成器函数返回值是一个Generator生成器，生成器是一种特殊的迭代器 ,要想生成器执行，调用它的next方法
- next的返回值跟迭代器对象一样，也是返回一个value和一个done，如果想返回value，可以在yield后面写上东西
- 如果想传一个参数，写在yield前面加参数，第一次传参数传到foo
- 如果想让生成器提前结束，通过return
生成器代替迭代器
生成器yield*语法糖
- yield是一个语法糖，如果我们写成yield*，后面跟了一个可迭代对象，那么就可以自动每次迭代其中一个值
异步处理
- 如果有一个需求第二次调用网络请求基于第一次，我们先封装了一个requestData的异步函数，可以使用callback，我们这里使用假promise，这样的话会导致回调地狱
function requestData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(url);
});
});
}
-
使用Promise进行重建，通过return出去给下一个请求调用，改为链式调用，而不是嵌套调用
-
我们可以通过生成器进行实现
-
最终通过async，await就可以实现
async，await
- 这是在ES7新增的语法，前面加上async的函数叫做异步函数
- 异步函数返回一个promise
- 在异步函数中，我们才可以使用await；await后面会跟上一个函数，这个函数返回一个Promise，然后await会等待Promise有结果之后，才会继续执行后续的代码，相当于把异步代码变成了同步代码
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
