火车网,5lu.com

js数组移除制定对象 数组拆分成多个数组

生活小贴示更新时间:2021-12-20 12:12:22

一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下

本文中介绍了多种数组去重的方法,使用了较多的高阶方法及API,并给出相应解释及语法,还有其他多种组合调用方式,原理逻辑其实都差不多,其中for循环可以与forEach方法相互转换,因此此处便不再一一列举,大家如果有更好的算法,可以留言给我,虚心请教!!

给定一个数组 [1,2,2,4,null,null,’3′,’abc’,3,5,4,1,2,2,4,null,null,’3′,’abc’,3,5,4] 去除重复项

let arr = [1,2,2,4,null,null,’3′,’abc’,3,5,4,1,2,2,4,null,null,’3′,’abc’,3,5,4]

1. 利用对象的 key 唯一众所周知,对象的key不可重复,否则后者将覆盖前者。利用该特性,实现数组去重,遍历数组,将数组的每一项做为对象的key值

let obj = {};

for (let i = 0; i < arr.length; i++) {

let item = arr[i]

if (obj[item] !== undefined) {

arr.splice(i, 1);

i–; // 解决删除元素后,数组塌陷问题

continue;

}

obj[item] = item

}

// arr: [1, 2, 4, null, “3”, “abc”, 3, 5]

2. 交换元素位置从而替换调 splice方法上述方法存在一定的性能问题,也就是说,基于splice实现删除性能不太好,当前项被删除后,随后每一项的索引都要向前移动一位,数据量较庞大时,一定会影响性能。

基于以上考虑,交换元素的位置,效率会更高一点,若当前元素重复,则与数组最后一位元素交换位置,i–再次进行判断即可,同时length–,操作数组的长度实现删除数组的最后一个元素,这样便不会影响到数组中其他元素

let obj = {};

for (let i = 0; i < arr.length; i++) {

let item = arr[i]

if (obj[item] !== undefined) {

arr[i] = arr[arr.length-1]

arr.length–;

i–;

continue;

}

obj[item] = item

}

// arr: [1, 2, 4, null, “3”, “abc”, 3, 5]

3. Array.filter + Array.indexOffilter() 方法:创建一个新数组,新数组中的元素是指定数组中符合某种条件的所有元素。如果没有符合条件的元素则返回空数组。

语法:array.filter(function(item,index,arr))

filter() 不会对空数组进行检测。

filter() 不会改变原始数组。

原理:返回 item 第一次出现的位置等于当前的index的元素

let newArr = arr.filter((item, index) => arr.indexOf(item) === index);

// [1, 2, 4, null, “3”, “abc”, 3, 5]

4. Array.filter + Object.hasOwnPropertyhasOwnProperty() 方法:返回一个布尔值,表示对象自身属性中是否具有指定的属性

原理:利用对象的键名不可重复的特点

let obj = {}

arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true))

5. Array.reduce + Array.includesreduce() 方法:接收一个函数作为累加器,数组中的每个值从左到右开始计算,最终计算为一个值。

语法:arr.reduce(function(total, currValue, currIndex, arr), initValue)

reduce() 对于空数组是不会执行回调函数的。

total:必需。初始值, 或者计算结束后的返回值

currValue:必需。当前元素

currIndex:可选。当前元素的索引

arr :可选。当前数组对象。

initValue:可选。累加器初始值

let newArr = arr.reduce((accu, cur) => {

return accu.includes(cur) ? accu : accu.concat(cur); // 1. 拼接方法

// return accu.includes(cur) ? accu : […accu, cur]; // 2. 扩展运算

}, []);

// [1, 2, 4, null, “3”, “abc”, 3, 5]

6. Array.indexOfindexOf() 方法:返回数组中某个指定的元素位置。该方法遍历数组,查找有无对应元素并返回元素第一次出现的索引,未找到指定元素则返回 -1。

let newArr = []

for (var i = 0; i < arr.length; i++) {

if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i])

}

//等同于 forEach 写法

arr.forEach( item => newArr.indexOf(item) === -1 ? newArr.push(item) : ”)

console.log(newArr) // [1, 2, 4, null, “3”, “abc”, 3, 5]

7. Array.includesincludes() 方法:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

let newArr = []

for (var i = 0; i < arr.length; i++) {

if (!newArr.includes(arr[i])) newArr.push(arr[i])

}

//等同于 forEach 写法

arr.forEach( item => !newArr.includes(item) ? newArr.push(item) : ”)

console.log(newArr) // [1, 2, 4, null, “3”, “abc”, 3, 5]

8. new Set + 扩展运算符 || Array.fromES6 提供了新的数据结构 Set。类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,可以接受一个具有 iterable 接口数据结构作为参数(如数组,字符串),用来初始化。

let newArr = […new Set(arr)]; // [1, 2, 4, null, “3”, “abc”, 3, 5]

let newArr = Array.from(new Set(arr)); // [1, 2, 4, null, “3”, “abc”, 3, 5]

let newStr = […new Set(‘ababbc’)].join(”) // ‘abc’

9. new MapES6 提供了新的数据结构 Map。类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

get方法读取key对应的键值,如果找不到key,返回undefined。

has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

let map = new Map();

let newStr = [];

for (let i = 0; i < arr.length; i++) {

if (!map.has(arr[i])) {

map.set(arr[i], true);

newStr.push(arr[i]);

}

}

console.log(newArr) // [1, 2, 4, null, “3”, “abc”, 3, 5]

标签: js 制定 对象 拆分 个数

js数组移除制定对象 数组拆分成多个数组 相关文章

上一篇:夏天地摊卖什么最挣钱 适合夏天干的小生意

下一篇:小兴安岭是在哪里 小兴安岭在哪个省

相关推荐
淘宝年货节活动有哪些? 快手上的个人保证金能退吗? 2026年5月工作日多少天 抖音钻石怎么提现到银行卡里钱? 抖店体验分怎么能涮上来? 2026年4月工作日多少天 抖音怎么付费同城推广? 抖音不付费怎么推广赚钱? 抖店体验分怎么涮有效? 京东店铺什么时候能提现?
相关分类
今日头条 铁路资讯 航空资讯 公路资讯 旅游专题 防骗专题 百科/常识 天气资讯 生活小贴示 公交资讯 酒店资讯 天气常识 租车资讯 签证资讯 签证常识 今日热点
最新火车资讯
2026家庭加工创业小项目有哪些 2026小白创业有什么合适的项目 2026年做什么小生意比较好赚钱 2025年12月应出勤天数多少天 2026年3月工作日多少天 明年2026最火的商机是什么 2026农村最缺的6个生意是是什么 2026农村适合做什么项目赚钱快
热门火车资讯
2026新年给女朋友发多少红包合适 千牛ai模式一键怎么开? 2026年元旦高速为什么不免费 京东上买手机和实体店一样吗? 2026年元旦高速免费吗 千牛营销活动如何改价格? 支付宝进账提醒怎么设置? 2026年6月工作日多少天
最新专题
最新火车车次
工具箱
手机版  丨  电脑版丨  网站地图
关于我们
如有意见、反馈、侵权或投诉等情况,请联系
“扫黄打非”举报专区 违法和不良信息举报中心
版权所有 Copyright © 2009-2026 5lu.com 闽ICP备
The template file 'copy.htm' not found or have no access!