重学ES6系列文章,边学习边总结分享
一.静态方法
Array.of(): 用于将一组值转换成数组,是弥补Array构造数组的不足
// Array.of() 返回参数值组成的数组,如果没有参数值,则返回空数组
Array.of(); // []
Array.of(2); // [2]
Array.of(2, 3, 6); // [2, 3, 6]
// Array() 和 new Array 只有参数个数不少于两个时,返回由参数值组成的数组
Array() // []
Array(3) // [ , , ]
Array(2,3) // [2, 3]
Array.isArray():用来判断某个变量是否是一个数组对象
二.改变原数组方法(9个)
1.push: 向数组最后插入项, 返回修改后数组的长度
const arr = [1,2,3];
const arr2 = [10, 11, 12];
const arr3 = arr.push(...arr2);
console.log(arr, arr2, arr3);
// [1, 2, 3, 10, 11, 12] [10, 11, 12] 11
2.pop: 删除数组最后一项, 返回删除的那一项数值
const arr = [1,2,3];
const arr2 = arr.pop();
console.log(arr, arr2);// [1, 2] 3
3.unshift: 数组前插入多项,返回修改后数组的长度
4.shift: 删除数组最前的项,返回删除的那一项数据
5.splice: [增加 | 删除 | 替换]数组的项; 返回被删除项组成的数组
// arr.splice(idx, d, i);
// idx 起始下标; d 删除项count; i 新增或者替换项(可多个)
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = arr.splice(1, 2, 20); // arr:[1, 20, 4, 5, 6, 7, 8]; arr2:[2, 3]
const arr2 = arr.splice(1, 10, 30, 32, 231); // arr:[1,30,32,231]; arr2:[2, 3, 4, 5, 6, 7, 8]
6.sort: 排序
arr.sort((a, b) => { return a - b});// 升序
arr.sort((a, b) => { return b - a});// 降序
7.reverse: 数组项反转
8.fill: 数组填充或替换
// Array.fill(itm, startIdx, endIdx); startIdx,endIdx 可选
new Array(3).fill(2); // [2, 2, 2]
[3, 4, 5].fill(2, 1, 2); // [3, 2, 5]
let arr = new Array(3).fill({ name: 'xiaohong' });
arr[0].name = 'liming';
arr // [{ name: 'liming'},{ name: 'liming'},{ name: 'liming'}]
9.copyWithin:
Array.copyWithin(target, start, end)
target（必需):从该位置开始替换数据。如果为负值，表示倒数。
start（可选):从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
end（可选):到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
[1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, -2, -1); // [4, 2, 3, 4, 5]
三.不改变原数组方法
slice: 截取数组内容
// 数组项为引用数据类型时,为浅拷贝,改变项的内容时,原数组会改变
const arr = [1, 2, 3, 4, 5, 6];
consr arr2 = arr.slice(3,4);
console.log(arr, arr2); // [1, 2, 3, 4, 5, 6] [4]
join:指定字符串(默认是逗号)链接数组项转成字符串
const arr = [1, 2, 3, 4, 5, 6];
consr arr2 = arr.join('-');
console.log(arr, arr2); // [1, 2, 3, 4, 5, 6] 1-2-3-4-5-6
concat: 多个数组合并为一个新数组
const arr = [1];
consr arr2 = arr.concat([11,12]);
console.log(arr, arr2); // [1] [1, 11, 12]
-
indexOf和lastIndexOf: 查找指定元素的下标,找不到时返回-1;不能识别NaN -
includes: 判定数组中是否存在某项,返回boolean值; 可以识别NaN; 该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始 -
toString和toLocaleString:使用逗号连接成字符串,不可自定义连接符,建议使用join -
at:获取数组的负索引值,超出数组的长度时返回undefined
const arr = [1, 2, 3, 4, 5, 6];
consr arr2 = arr.at(-2);
console.log(arr, arr2); // [1, 2, 3, 4, 5, 6] 5
const str = 'this is string';
str.at(-1); // g
遍历方法
forEachmapfiltersomeevery
forEach:对数组的每个元素执行一次给定函数,
map:数组中的每个元素执行一次给定函数,返回计算后的值,组成新的数组
filter:数组中的每个元素计算是否满足给定条件,满足的项,组成新的数组
some:计算数组中是否存在符合条件的项,有返回true, 否则false
every:计算数组中的每一项是否符合条件, 全部符合返回true, 否则false
reducereduceRight
array.reduce(function(total(上次回调计算的结果), currentValue(当前项的值), currentIndex(当前项下标), arr(原数组)), initialValue(初始值))
reduceRight: 计算方向相反,其他和reduce一致
findfindIndexfindLastfindLastIndex
find:找到第一个符合条件的数组成员并返回
findIndex:找到第一个符合条件的数组成员并返回对应下标
entrieskeysvalues
可以用for...of循环进行遍历，
唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
5.flat flatMap
// flat将子数组的成员取出来,添加在原来的位置,不影响原数组,并且会跳过空格
[1, [2, 3], [4]].flat() ; // [1, 2, 3, 4] 默认展开一层
[1, [[2]]].flat(2); // [1, 2] 支持传入展开层级的参数
[].flat(Infinity); // 无论多少层嵌套,转化成一层数组
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]
// flatMap 对原数组的每个成员执行一个函数, 然后对返回值组成的数组执行一次flat函数,所以只能展开一层数组,多层的情况下,需要再次调用flat方法
[1, 2, 3].flatMap(x => [x, x*2]);
// 等同于 [[1, 2], [2, 4], [3, 6]].flat(); [1,2,2,4,3,6]
