ES6方向:数组实用方法整理以及总结归纳
2021-05-07 本文已影响0人
听书先生
[1]、整理
1、在数组Array原型对象上新增删除指定元素的方法remove()
在实际的开发中,可能数组自带的一些方法无法满足我们的开发需要,因此需要在原型对象上增加一些我们需要的方法,已达到提升开发效率的目标。
forEach()遍历实现删除:
// 在数组的原型对象上新增删除的方法
Array.prototype.remove = function(arr, value) {
let newArr = [];
arr.forEach(item => {
if (item !== value) {
newArr.push(item);
}
})
return newArr;
}
// 定义一个数组
let testArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(testArr.remove(testArr, 2));
使用map()方法实现数据的删除:(元素删除了,但是存在undefined占位,需要自行再继续处理)
// 在数组的原型对象上新增删除的方法
Array.prototype.remove = function(arr,value){
let newArr = arr.map( item => {
if(item !== value){
return {
...item
}
}
})
return newArr;
}
// 定义一个数组
let testArr = [1,2,3,4,5,6,7,8,9];
console.log(testArr.remove(testArr,2));
删除后的数组.png
2、数组的合并(两个或多个数组的合并)
数组的合并有很多方法实现,concat()也能够实现数组的合并,这个方法不会改变原数组,返回的是一个新的合并后的数组。但是ES6的拓展运算符也是能够实现的。
let arr = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [1, 2, 3, 4, 15, 16, 17];
//数组合并
console.log([...arr, ...arr2]);
3、数组的交集(两个数组或多个数组公共的区域部分)
过滤下来符合要求的数组成员。
let arr = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [1, 2, 3, 4, 15, 16, 17];
//数组取交集
console.log([...arr].filter(item => arr2.includes(item)));
4、数组的并集
实际上就是数组的合并去对合并后的数组进行去重
let arr = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [1, 2, 3, 4, 15, 16, 17];
//数组的并集
console.log([...new Set([...arr, ...arr2])]);
5、数组的差集
数组的差集的实现过程就是并集中去掉交集的部分就是剩下的差集
let arr = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [1, 2, 3, 4, 15, 16, 17];
// 数组的差集(差集指的是合并的数组中除去所有交集的部分)
let arr3 = [...new Set([...arr, ...arr2])].filter(item => !arr.includes(item) || !arr2.includes(item))
console.log(arr3)
6、数组转为对象
// 数组转为对象
let obj = { ...arr };
console.log(obj);
7、数组扁平化处理
嵌套数组扁平化的处理,有多种实现方法,可以使用递归法去解决,也可以直接使用flat()处理
递归法:
let list = [];
// 使用递归实现数组扁平化
fn(arr) {
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
fn(arr[i]);
} else {
list.push(arr[i]);
}
}
return list;
},
flat():
let arr = [1,2,[3,4,5,[6,7,8]]];
console.log(arr.flat(Inifity));
8、检查所有数组元素是否都符合条件要求
let arr4 = [1, 4, 2, 8, 6, 9, 7];
let arr = arr4.every(item => item < 10)
console.log(arr)
9、检查是否存在元素符合条件要求
let arr5 = [1, 2, 3, 4, 5];
let arr = arr5.some(item => item > 5)
console.log(arr)
10、find 查找符合条件的元素
let arr6 = [1, 2, 3, 4, 5, 6];
// 存在的话直接返回要找的那个元素数据,否则为undefined
let arr1 = arr6.find(item => item === 3)
console.log('打印:',arr1);
let arr2 = arr6.find(item => item === 7)
console.log('打印:',arr2);
11、findIndex查找数组对应元素的索引下标
// 查找数组对应元素的索引下标
let arr7 = [1, 2, 3, 4, 5, 6, 7];
// 查找对应的元素,如果元素存在,返回索引下标值,不存在,返回-1
let num = arr7.findIndex(item => item == 8)
console.log(num);
[2]、数组自带的相关方法
1、toString()
把数组转换为数组值的字符串
let arr = ['a','b','c'];
let str = arr.toString();
console.log(str)
// a,b,c
2、join()
将所有数组元素按某种形式结合为一个字符串
let arr = ['a','b','c'];
console.log(arr.join(''));
// abc
3、pop()
pop()是数组末尾元素的删除方法,返回是弹出的那个元素
let arr = ['a','b','c'];
arr.pop();
// c
4、shift()
shift()是数组头部删除的方法,所有其他元素“位移”到更低的索引
let arr = ['a','b','c'];
arr.shift();
// a
5、push()
向数组添末尾加一个新的元素,需要留意它的返回值是一个新数组的长度
let arr = ['a','b','c'];
arr.push('d');
// 4
6、unshift()
向数组头部添加新元素,并“反向位移”旧元素
let arr = ['a','b','c'];
arr.unshift('d');
// 4
7、splice()
个人非常喜欢的方法,三个参数
- 新元素被添加的位置索引
- 删除多少个元素
- 新元素值
删除数组某个位置上的元素
let arr = [1,2,3,4];
arr.splice(1,1); //删除1号位置的1个元素
// [2]
数组某个位置上的新增元素
let arr = [1,2,3,4];
arr.splice(1,0,9); //1号位置删除0个新增1个元素9
// [1, 9, 2, 3, 4]
8、concat()
通过合并连接现有数组来创建一个新数组
let arr8 = [1,2,3,4];
let arr9 = [5,6,7,8];
console.log(arr8.concat(arr9));
// [1, 2, 3, 4, 5, 6, 7, 8]
9、sort()
let arr8 = [3,2,1,4];
console.log(arr8.sort());
// [1, 2, 3, 4]