20个JavaScript技术善于利用，可提升自己的开发效率

　　1、Array.prototype.includes()
　　includes()方法用来判断一个数组中是否包含某个指定的值，包含则返回 true，否则返回 false。
　　语法
　　arr.includes(findVal[, index])
　　index 可选，表示从 index 索引处开始往后查找。如果为负值，表示从末尾开始往前跳 |index| 个索引，然后往后查找。默认值为0。
　　let arr = [＂leo＂, ＂lion＂, ＂ggj＂]
　　console.log(arr.includes(＂leo＂)) // true
　　console.log(arr.includes(＂gao＂)) // false
　　console.log(arr.includes(＂ggj＂,1)) // true
　　console.log(arr.includes(＂Leo＂)) // false
　　// 注意：使用includes()查找字符串是区分大小写的。
　　2、幂运算符 **
　　求某个数的幂，之前一般使用 Math.pow()
　　console.log(Math.pow(2, 10)); // 1024
　　使用幂运算符 **
　　console.log(2 ** 10); // 1024
　　// 注意：幂运算符的两个*号之间不能出现空格，否则语法会报错。
　　3、Object.values()
　　Object.values()返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历属性对应的值
　　let obj = {
　　name: ＂leo＂,
　　age: 18,
　　like: ＂music＂
　　};
　　console.log(Object.values(obj)); // [ ＂leo＂, 18, ＂music＂ ]
　　4、Object.entries()
　　Object.entries()方法返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历属性的键值对数组
　　let obj = {
　　name: ＂leo＂,
　　age: 18,
　　like: ＂music＂
　　};
　　console.log(Object.entries(obj)); // [ [ ＂name＂, ＂leo＂ ], [ ＂age＂, 18 ], [ ＂like＂, ＂music＂ ]
　　扩展：Object.keys()方法返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历的属性
　　let obj = {
　　name: ＂leo＂,
　　age: 18,
　　like: ＂music＂
　　};
　　console.log(Object.keys(obj)); // [ ＂name＂, ＂age＂, ＂like＂ ]
　　// 注意：如果传入的参数是数组，则返回的是所有可遍历的索引。
　　5、Object.getOwnPropertyDescriptors()
　　Object.getOwnPropertyDescriptors()方法用来获取传入对象的所有自身属性的描述符
　　let obj = {
　　name: ＂leo＂,
　　age: 18,
　　like: ＂music＂
　　};
　　let desc = Object.getOwnPropertyDescriptors(obj);
　　console.log(desc);
　　// 打印结果
　　{
　　name: {
　　value: ＂leo＂, // value表示当前对象的默认值
　　writable: true, // writable表示对象属性是否可以修改
　　enumerable: true, // enumerable表示当前这个属性是否可以出现在对象的枚举属性中
　　configurable: true // 表示当前对象的属性能否用delete删除
　　},
　　age: {
　　value: 18,
　　writable: true,
　　enumerable: true,
　　configurable: true
　　},
　　like: {
　　value: ＂music＂,
　　writable: true,
　　enumerable: true,
　　configurable: true
　　}
　　}
　　我们可以使用Object.defineProperty()修改属性
　　let obj = {};
　　Object.defineProperty(obj, ＂name＂, {
　　value: ＂leo＂,
　　writable: false, // 设置为false，该属性无法修改
　　configurable: false, // 设置为false，该属性不支持delete删除
　　enumerable: false, // 设置为false，该属性不可被枚举
　　});
　　验证
　　console.log(obj); // { name: ＂leo＂ }
　　obj.name = ＂lion＂;
　　console.log(obj); // { name: ＂leo＂ }
　　delete obj.name
　　console.log(obj); // { name: ＂leo＂ }
　　for (let key in obj) {
　　console.log(key); // ＂＂
　　}
　　6、String.prototype.padStart
　　把指定字符串填充到字符串头部，返回新字符串。
　　语法
　　str.padStart(targetLength [, padString])
　　targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
　　padString：可选，如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。默认值为 ＂ ＂。
　　＂abc＂.padStart(10); // ＂ abc＂，填充默认值＂＂
　　＂abc＂.padStart(10, ＂*＂); // ＂*******abc＂
　　＂abc＂.padStart(6,＂123465＂); // ＂123abc＂
　　＂abc＂.padStart(1); // ＂abc＂
　　举例
　　日期格式化：yyyy-mm-dd的格式
　　let date = new Date();
　　let year = date.getFullYear();
　　// 月日如果是一位前面给它填充一个0
　　let month = (date.getMonth() + 1).toString().padStart(2, ＂0＂);
　　let day = (date.getDate()).toString().padStart(2, ＂0＂);
　　console.log( `${year}-${month}-${day}` ); // 2022-01-09
　　数字替换(手机号，银行卡号等）
　　let tel = ＂18937640746＂
　　let newTel = tel.slice(-4).padStart(tel.length, ＂*＂)
　　console.log(newTel) // *******0746
　　7、String.prototype.padEnd
　　把指定字符串填充到字符串尾部，返回新字符串。
　　语法与padStart相同
　　＂abc＂.padEnd(10); // ＂abc ＂，填充默认值＂＂
　　＂abc＂.padEnd(10, ＂*＂); // ＂abc*******＂
　　＂abc＂.padEnd(6, ＂123456＂); // ＂abc123＂
　　＂abc＂.padEnd(1); // ＂abc＂
　　7、async / await
　　前面添加了async的函数在执行后都会自动返回一个Promise对象
　　function fn() {
　　return ＂leo＂;
　　}
　　console.log(fn()); // ＂leo＂
　　添加async后
　　async function fn() {
　　return ＂leo＂; // Promise.resolve(＂leo＂)
　　}
　　console.log(fn()); // Promise对象
　　async函数中使用await，那么await处的代码就会变成同步的，即只有等await后面的Promise执行完成得到结果才会继续往下执行，await意为等待
　　function timeout() {
　　return new Promise(resolve => {
　　setTimeout(() => {
　　console.log(1);
　　resolve();
　　}, 1000);
　　})
　　}
　　async function fn() {
　　await timeout(); // 执行完成才继续往下执行
　　console.log(2);
　　}
　　fn(); // 不加async和await是 2、1，加了是 1、2
　　注意：
　　1、await 只能在 async 标记的函数内部使用，单独使用会触发 Syntax error；
　　2、await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
　　更多详情请参考（具体场景）
　　Js 异步请求按顺序调用解决方案（真实工作场景，axios、Promise、async await）_前端不释卷leo的博客-CSDN博客
　　需求背景：现在需要调用多个异步请求，要求某个请求调用成功之后，接着调另外的请求，有时候需要用上一个请求得到的结果，作为下一个请求的参数或者条件，继续调用另一个请求。演示准备：安装axiosnpm install axios --save全局使用//main.jsimport axios from ＂axios＂Vue.prototype.$axios = axios实现一：PromisePromise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复.
　　https://blog.csdn.net/qq_41809113/article/details/121086178?spm=1001.2014.3001.5502
　　8、Rest & Spread
　　spread 例子
　　let text = {
　　a: 1,
　　b: 2,
　　c: 3,
　　}
　　let newText = {
　　...text,
　　c: 4
　　}
　　console.log(newText); // {a: 1, b: 2, c: 4}
　　这块代码展示了 spread 语法，可以把 text 对象的数据都拓展到 newText 对象，这个功能很实用。需要注意的是，如果存在相同的属性名，后面的会把前面的覆盖。
　　如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象
　　let obj = { x: { y: 10 } };
　　let copy1 = { ...obj };
　　let copy2 = { ...obj };
　　obj.x.y = ＂leo＂;
　　console.log(copy1, copy2); // {x: {y: ＂leo＂}} {x: {y: ＂leo＂}}
　　console.log(copy1.x === copy2.x); // true，x为同一个引用
　　rest 例子
　　let text = {
　　a: 1,
　　b: 2,
　　c: 3
　　}
　　let { a, ...rest } = text
　　console.log(a, rest); // 1 {b: 2, c: 3}
　　当对象 key-value 不确定的时候，把必选的 key 赋值给变量，用一个变量接收其他可选的 key 数据，这在之前是做不到的。注意，rest 属性必须始终出现在对象的末尾，否则将抛出错误。
　　9、for await of
　　异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。
　　for...of 是同步运行
　　function TimeOut(time){
　　return new Promise(function(resolve, reject) {
　　setTimeout(function() {
　　resolve(time);
　　}, time);
　　})
　　}
　　async function test() {
　　let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]; // 异步迭代器
　　for (let item of arr) {
　　console.log(item.then(console.log));
　　}
　　}
　　test();
　　// 1000
　　// 2000
　　// 3000
　　for of 方法不能遍历异步迭代器，得到的结果并不是我们所期待的，此时可以使用for await of
　　function TimeOut(time) {
　　return new Promise(function(resolve, reject) {
　　setTimeout(function() {
　　resolve(time);
　　}, time);
　　})
　　}
　　async function test() {
　　let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)];
　　for await (let item of arr) { // 按arr中顺序执行且返回
　　console.log(item);
　　}
　　}
　　test();
　　// 2000
　　// 1000
　　// 3000
　　使用for await of，则等待每个Promise对象变为resolved状态才进入下一步，因此打印的结果为 2000，1000，3000。
　　10、Promise.prototype.finally()
　　Promise执行时，无论结果是fulfilled或者是rejected，在执行then()或catch()后，都会执行finally()指定的回调函数，可以避免同样的语句需要在then()和catch()中各写一次的情况
　　new Promise((resolve, reject) => {
　　setTimeout(() => {
　　resolve(＂success＂);
　　}, 1000);
　　}).then(res => {
　　console.log(res);
　　}).catch(err => {
　　console.log(err);
　　}).finally(() => { // 无论Promise结果是then()，即resolve；还是catch()，即reject，最后都会执行finally()
　　console.log(＂finally＂);
　　})
　　如每次请求发送完毕，就需要关闭loading提示框，不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了。
　　11、Object.fromEntries()
　　Object.fromEntries() 把键值对列表转换为一个对象，此方法和Object.entries() 相对的（逆操作）
　　let arr = [ [＂a＂, 1], [＂b＂, 2] ];
　　let obj = Object.fromEntries(arr);
　　console.log(obj); // {a: 1, b: 2}
　　Map 转 Object
　　let mapObj = new Map();
　　mapObj.set(＂name＂, ＂leo＂);
　　mapObj.set(＂age＂, 18);
　　console.log(map); // {＂name＂ => ＂leo＂, ＂age＂ => 18}
　　let newObj = Object.fromEntries(mapObj);
　　console.log(newObj); // {name: ＂leo＂, age: 18}
　　12、Array.prototype.flat()
　　语法
　　let newArr = arr.flat([depth]); // depth可选，指提取嵌套数组的结构深度，默认值为 1。
　　flat()会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回（数组扁平化）
　　let arr1 = [0, 1, 2, [3, 4]];
　　console.log(arr1.flat()); // [0, 1, 2, 3, 4]
　　let arr2 = [0, 1, 2, [[[3, 4]]]];
　　console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
　　console.log(arr2.flat(3)); // [0, 1, 2, 3, 4]
　　//使用 Infinity，可展开任意深度的嵌套数组
　　let arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
　　arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
　　// flat()方法会移除数组中的空项
　　let arr5 = [1, 2, , , 4, 5];
　　arr5.flat(); // [1, 2, 4, 5]
　　13、Array.prototype.flatMap()
　　flatMap() 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。顾名思义，它包含两部分功能一个是 map，一个是 flat（深度为1）
　　语法
　　let newArr = arr.flatMap(function callback(currentValue[, index[, array]]) {
　　// 返回新数组的元素
　　}[, thisArg]);
　　// currentValue，当前正在数组中处理的元素
　　// index可选，数组中正在处理的当前元素的索引
　　// array可选，被调用的 map 数组
　　// thisArg，执行callback函数时 使用的this值
　　举例
　　let numbers = [1, 2, 3];
　　numbers.map(x => [x * 2]); // [[2], [4], [6]]
　　numbers.flatMap(x => [x * 2]); // [2, 4, 6]
　　flatMap()与 map()和深度depth为1的 flat()几乎相同
　　let arr = [＂leo＂, ＂＂, ＂早上好＂]
　　arr.map(s => s.split(＂＂)); //[[＂l＂, ＂e＂, ＂o＂],[＂＂],[＂早＂, ＂上＂, ＂好＂]]
　　arr.flatMap(s => s.split(＂＂)); // [＂l＂, ＂e＂, ＂o＂, ＂＂, ＂早＂, ＂上＂, ＂好＂]
　　14、String.prototype.trimStart()
　　trimStart()从字符串的开头删除空格，trimLeft()是它的别名
　　let str = ＂ leo＂;
　　console.log(str.length); // 6
　　str = str.trimStart(); // 或str.trimLeft()
　　console.log(str.length); // 3
　　15、String.prototype.trimEnd()
　　trimEnd()从一个字符串的末尾删除空格，trimRight()是它的别名
　　let str = ＂leo ＂;
　　console.log(str.length); // 6
　　str = str.trimEnd(); // 或str.trimRight()
　　console.log(str.length); // 3
　　16、空值合并运算符 ??
　　空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null或者undefined时，返回其右侧操作数，否则返回左侧操作数
　　let name = undefined ?? ＂leo＂
　　let age = null ?? 18
　　console.log(name); // ＂leo＂
　　console.log(age); // 18
　　与逻辑或操作符（||）不同，|| 会在左侧操作数为假值（例如 ＂＂、0、NaN、false、undefined、null）时返回右侧操作数
　　let name1 = ＂＂ ?? ＂leo＂;
　　let name2 = ＂＂ || ＂lion＂;
　　console.log(name1); // ＂＂
　　console.log(name2); // ＂lion＂
　　let age1 = 0 ?? 18;
　　let age2 = 0 || 18;
　　console.log(age1); // 0
　　console.log(age2); // 18
　　17、可选链 ?.
　　可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
　　当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明
　　举例
　　let obj = {
　　message: {
　　name: ＂leo＂,
　　sayHi() {
　　return ＂hi＂;
　　}
　　}
　　}
　　在之前的语法中，想获取到深层属性或方法，不得不做前置校验，否则很容易命中 Uncaught TypeError: Cannot read property... 这种错误，影响整个程序的运行
　　let name = obj && obj.message && obj.message.name;
　　console.log(name); // ＂leo＂
　　使用可选链操作符 ( ?. )
　　let name = obj?.message?.name;
　　console.log(name); // ＂leo＂
　　可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。
　　注意：可选链不能用于赋值
　　let obj = {};
　　obj?.message?.name = ＂leo＂; // 报错
　　18、String.prototype.matchAll()
　　matchAll()返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
　　let regexp = /t(e)(st(d?))/g;
　　let str = ＂test1test2＂;
　　let arr = [...str.matchAll(regexp)]; // 返回所有匹配上的
　　console.log(array[0]); // [＂test1＂, ＂e＂, ＂st1＂, ＂1＂]
　　console.log(array[1]); // [＂test2＂, ＂e＂, ＂st2＂, ＂2＂]
　　19、Promise.allSettled()
　　已知Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，且直接进入reject 状态。
　　如页面上有三个请求，分别请求不同的数据，如果使用Promise.all()，一个接口服务异常，整个都是失败的，都无法渲染出数据。
　　我们想要在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态，则可以使用Promise.allSettled()。
　　let promise1 = () => {
　　return new Promise((resolve, reject) => {
　　setTimeout(() => {
　　resolve(＂promise1＂);
　　}, 3000);
　　});
　　};
　　let promise2 = () => {
　　return new Promise((resolve, reject) => {
　　setTimeout(() => {
　　resolve(＂promise2＂);
　　}, 1000);
　　});
　　};
　　let promise3 = () => {
　　return new Promise((resolve, reject) => {
　　setTimeout(() => {
　　reject(＂error promise3＂);
　　}, 2000);
　　});
　　};
　　// 使用Promise.all，则会走到catch里面，因为promise3是reject
　　Promise.all([promise1(), promise2(), promise3()])
　　.then((res) => {
　　console.log(res);
　　})
　　.catch((error) => {
　　console.log(＂error＂, error); // error promise3
　　});
　　// 使用Promise.allSettled，不管有没有错误，三个状态都会返回，不会走到catch
　　Promise.allSettled([promise1(), promise2(), promise3()])
　　.then((res) => {
　　console.log(res);
　　// [
　　// {status: ＂fulfilled＂, value: ＂promise1＂},
　　// {status: ＂fulfilled＂, value: ＂promise2＂},
　　// {status: ＂rejected＂, reason: ＂error promise3＂}
　　// ]
　　})
　　.catch((error) => {
　　console.log(＂error＂, error);
　　});
　　20、String.prototype.replaceAll()
　　replaceAll()返回一个新字符串，新字符串中所有满足 pattern 的部分都会被替换。pattern可以是一个字符串或一个正则表达式
　　let str = ＂aabbcc＂.replaceAll(＂b＂, ＂*＂);
　　console.log(str); // ＂aa**cc＂
　　使用正则表达式搜索值时，它必须是全局的
　　＂aabbcc＂.replaceAll(/b/, ＂*＂); // 报错
　　修改如下
　　＂aabbcc＂.replaceAll(/b/g, ＂*＂); // ＂aa**cc＂