ES6常用方法汇总记录

最新推荐文章于 2023-05-15 18:23:11 发布

落笔映浮华H

最新推荐文章于 2023-05-15 18:23:11 发布

阅读量140

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_39238200/article/details/122689728

版权

js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、Array.prototype.includes()

includes()方法用来判断一个数组中是否包含某个指定的值，包含则返回 true，否则返回 false。

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()查找字符串是区分大小写的。

在多条件的 if 判断语句中，常规写法或许是

if(type == 1 || type == 2 || type == 3 || type == 4){
   //...
}

乍一看，未免有些繁琐，使用ES6数组实例方法 includes ，可以避免这样的窘境

let conditionList = [1,2,3,4];
 
if(conditionList.includes(type)){
   //...
}

2、Array.prototype.flat()

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]

3、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", "", "早", "上", "好"]

4、Object.values()

Object.values()返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历属性对应的值

let obj = {
  name: "leo",
  age: 18,
  like: "music"
};
console.log(Object.values(obj));   // [ 'leo', 18, 'music' ]

5、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' ]
 
// 注意：如果传入的参数是数组，则返回的是所有可遍历的索引。

6、Object.fromEntries()

Object.fromEntries() 把键值对列表转换为一个对象，此方法和Object.entries() 相对的（逆操作）

let arr = [ ['a', 1], ['b', 2] ];
let obj = Object.fromEntries(arr);
console.log(obj);   // {a: 1, b: 2}

7、String.prototype.padStart

把指定字符串填充到字符串头部，返回新字符串。

'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

8、String.prototype.padEnd

把指定字符串填充到字符串尾部，返回新字符串。

语法与padStart相同

'abc'.padEnd(10);   // "abc       "，填充默认值""
 
'abc'.padEnd(10, "*");   // "abc*******"
 
'abc'.padEnd(6, "123456");   // "abc123"
 
'abc'.padEnd(1);   // "abc"

9、String.prototype.trimStart()

trimStart()从字符串的开头删除空格，trimLeft()是它的别名

let str = '   leo';
console.log(str.length);   // 6
str = str.trimStart();   // 或str.trimLeft()
console.log(str.length);   // 3

10、String.prototype.trimEnd()

trimEnd()从一个字符串的末尾删除空格，trimRight()是它的别名

let str = 'leo   ';
console.log(str.length);   // 6
str = str.trimEnd();   // 或str.trimRight()
console.log(str.length);   // 3

11、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"]

12、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"

13、Array.find

find 可以在找到满足条件的项之后，退出遍历，有助于性能优化

let a = [1,2,3,4,5];
let result = a.find(item =>{
    return item === 3
})

14、 Array.filter

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用 filter 来实现

let a = [1,2,3,4,5];
let result = a.filter(item =>{
    return item === 3
})

15、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 属性必须始终出现在对象的末尾，否则将抛出错误。

16、解构赋值

我们在一个程序中，经常会进行取值操作，如从某个对象obj中取值

let obj = {
    a:1,
    b:2,
    c:3
}
//ES5取值
let a = obj.a;
let b = obj.b;
let c = obj.c;

//ES6的解构赋值，写法如下
let {a,b,c} = obj;

//不过有一种情况是，服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值？当然不是，解构赋值中有一种写法，可以完美解决这个的问题
let {a:a1,b,c} = obj;
 
// 此时相当于拿到属性a，变成我们想要的属性名a1
console.log(a1)

//注意：ES6的解构赋值虽然好用，但是解构的对象不能为undefined、null，否则会报错，所以要给被解构的对象一个默认值
let {a,b,c} = obj || {};

17、扩展运算符（...）

比如合并两个数组或者两个对象（多个如此）

ES5写法

let a = [1,2,3];
let b = [1,5,6];
let c = a.concat(b);   // [1,2,3,1,5,6]
 
let obj1 = {
  a:1
}
let obj2 = {
  b:1
}
let obj = Object.assign({}, obj1, obj2);    // {a:1,b:1}

ES6写法

let a = [1,2,3];
let b = [1,5,6];
let c = [...new Set([...a, ...b])];   // [1,2,3,5,6]
 
let obj1 = {
  a:1
}
let obj2 = {
  b:1
}
let obj = {...obj1,...obj2};   // {a:1,b:1}

18、模板字符串

//目前已会使用模板字符串，类似于
let name = 'leo';
let score = 66;
let result = '';
if(score > 60){
  result = `${name}的考试成绩合格，分数为${score}`; 
}else{
  result = `${name}的考试成绩不合格，分数为${score}`; 
}
console.log(result);   // leo的成绩合格，分数为66

//在 ${} 中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性
let name = 'leo';
let score = 66;
let result = `${name}${score > 60 ? '的考试成绩合格' : '的考试成绩不合格'}`;  //${}里面为表达式