20+ 个JavaScript技术 -- 善于利用,可提升自己的开发效率(ES7-ES12新特性1w+字汇总,总有你需要的)

目录

前言

1、Array.prototype.includes()

2、幂运算符 **

3、Object.values()

4、Object.entries()

5、Object.getOwnPropertyDescriptors()

6、String.prototype.padStart

7、String.prototype.padEnd

7、async / await

8、Rest & Spread

9、for await of

10、Promise.prototype.finally()

11、Object.fromEntries()

12、Array.prototype.flat()

13、Array.prototype.flatMap()

14、String.prototype.trimStart()

15、String.prototype.trimEnd()

16、空值合并运算符 ??

17、可选链 ?.

18、String.prototype.matchAll()

19、Promise.allSettled()

20、String.prototype.replaceAll()

21、逻辑运算符和赋值表达式(&&=,||=,??=)

22、数字分隔符

23、Promise.any

其他


前言

学习并运用一些合适的技术,可以少走弯路,提高我们的开发效率。以下是 ES7-ES12 部分知识汇总,熟练并掌握,在必要时,总能帮助我们解决一些问题以及提升自己的开发效率。

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

与逻辑或操作符(||)不同,|| 会在左侧操作数为假值(例如 ''0NaNfalse、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"

21、逻辑运算符和赋值表达式(&&=,||=,??=)

22、数字分隔符

23、Promise.any

以上几个特性在本人另一篇博客已经介绍过

分享 5 个你现在就能用上的 Js ES12 新特性(数字分隔符、replaceAll()、Promise.any()、......)_前端不释卷leo的博客-CSDN博客ECMAScript 2021(第 12 版)现已可用,并附带新功能和语法改进。ECMA International 已于 2021 年 6 月 22 日最终确定了这些规范。实施这些改进是为了使 JavaScript 更加健壮并帮助开发人员轻松完成任务。以下详细展示 ECMAScript 2021 提供的前 5 项功能,以便你可以开始在你的项目中使用它们,并改善你的 JavaScript 体验。初学者和有经验的开发人员可以从本文中受益。ECMAScript 2021 更新提供的 5 大 JavaSchttps://blog.csdn.net/qq_41809113/article/details/122014755?spm=1001.2014.3001.5502

其他

更多相关内容请参考

ES6 你是懂了,可你真的会用了吗?(这10点,检验你是否中招了)_前端不释卷leo的博客-CSDN博客前言以下总结为本人开发中常用的部分ES6知识点,并不代表全部,且需注意一点,ES5之后的js语法统称为ES6(以ES7 ES8等来命名未免有失规范)。1、解构赋值我们在一个程序中,经常会进行取值操作,如从某个对象obj中取值let obj = { a:1, b:2, c:3}ES5取值let a = obj.a;let b = obj.b;let c = obj.c;上面的取值方式,属性少还好,万一属性很多时,代码量就会增加很多,看上去显得冗余、https://blog.csdn.net/qq_41809113/article/details/122261349?spm=1001.2014.3001.5502此处就不在一一叙述。

整理不易,请关注我,点赞、收藏、评论,一起来学前端~

  • 47
    点赞
  • 146
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端不释卷leo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值