var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 'NaN', 0, 0, 'a', 'a', {}, {}];

/*
* ES3 的方法
*/ // 方法一 思路:新建空数组,利用双层for循环,逐一取出传入数组的项与新数组中的每一项做对比,如果没有相同的则将该项插入新数组中,如果对比项相同则跳出当前循环回到父循环中继续做下一轮对比。新数组为去重后的数组,不会影响老数组
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique1(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.length == 0) {
newArr.push(arr[i]);
} else {
var isPush = true;
for (var k = 0; k < newArr.length; k++) {
if (newArr[k] == arr[i]) {
isPush = false;
break;
};
};
if (isPush == true) {
newArr.push(arr[i]);
}
}
};
return newArr;
};
console.log(unique1(arr)); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] // 方法二 思路:新建空数组,利用双层for循环,将传入数组的项(从第一项开始)与其后面的项做对比,如果有相同的,不做处理,如果没有相同的,就插入到新数组中。新数组为去重后的数组,不会影响老数组
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique2(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
for (var k = i + 1; k < arr.length; k++) {
if(arr[k] == arr[i]){
k = ++i;
};
};
newArr.push(arr[i]);
};
return newArr;
};
console.log(unique2(arr)); // ["true", true, 15, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] // 方法三 思路:双层for循环,让当前项与其后面的项做比较,如果相同,就对后面重复的项做删除操作,会影响老数组。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
// 备注 示例方法是正向遍历,也可以逆向遍历,此处不做演示
function unique3(arr) {
for (var i = 0; i < arr.length; i++) {
for (var k = i + 1; k < arr.length; k++) {
if (arr[k] == arr[i]) {
arr.splice(k, 1);
k--;
}
}
}
};
unique3(arr)
console.log(arr); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] // 方法四 思路:利用对象的属性名字不能重复的特点,建立新对象,将数组中的某项作为属性名放到对象当中,使用for循环判断对象属性是否存在,如果存在,不进行操作,如果不存在则放置到对象中。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
// 缺点:针对 NaN和'NaN', 对象的key会视为一个key,区分不了NaN和'NaN'。
function unique4(arr) {
var newObj = {},
newArr = [];
for (var i = 0; i < arr.length; i++) {
if (!newObj[arr[i]]) {
newObj[arr[i]] = true;
newArr.push(arr[i]);
}
}
return newArr;
};
console.log(unique4(arr)); // [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] // 方法五 思路:利用sort()方法先将数组排序,然后使用for循环遍历排序后的数组,如果当前项与其后面相邻的项不相同,则将该项插入新数组中,此方法不改变元素组,返回排序后的新数组。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique5(arr){
var sortArr = arr.sort(function(a, b){
return a - b;
});
var newArr = [sortArr[0]];
for(var i = 1; i< sortArr.length;i++){
if(sortArr[i] !== sortArr[i-1]){
newArr.push(sortArr[i]);
}
};
return newArr;
};
console.log(unique5(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined] // 方法六 思路:利用sort()方法先将数组排序,然后创建递归函数判断当前项与其后面的项是否相同,相同用splice方法删除,然后运行递归函数继续进行判断操作。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique6(arr) {
var newArr = arr,
arrLen = arr.length;
var sortArr = arr.sort(function(a, b) {
return a - b;
}); function loop(index) {
if (index >= 1) {
if (newArr[index] === newArr[index - 1]) {
newArr.splice(index, 1);
};
loop(index - 1);
}
};
loop(arrLen - 1);
return newArr;
};
console.log(unique6(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined] /*
* ES5的方法
*/ // 方法七 思路:结合indexOf()方法和forEach()方法,如果老数组中循环的项在新数组中不存在,则将该项插入新数组,不改变老数组,返回新数组。注意indexOf()方法也可以用lastIndexOf()方法替代,forEach()方法也可以用for循环替代的。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique7(arr){
var newArr = [];
// for(var i = 0; i< arr.length; i++){
// if(newArr.indexOf(arr[i]) === -1){
// newArr.push(arr[i]);
// }
// }
arr.forEach(function(item, index, array){
if(newArr.indexOf(item) === -1){
newArr.push(item);
}
});
return newArr;
};
console.log(unique7(arr)); // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] // 方法八 思路:结合includes()方法和forEach()方法,includes方法检测数组中是否有某个值。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点:不能过滤掉Object
function unique8(arr){
var newArr = [];
arr.forEach(function(item, index, array){
if(!newArr.includes(item)){
newArr.push(item);
}
});
return newArr;
};
console.log(unique8(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] // 方法九 思路:结合includes()方法和filter()方法,includes方法检测数组中是否有某个值。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点:不能过滤掉Object
function unique9(arr){
var newArr = [];
arr.filter(function(item){
if(!newArr.includes(item)){
newArr.push(item);
}
});
return newArr;
};
console.log(unique9(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] // 方法十 思路:结合indexOf()方法和filter()方法,includes方法检测数组中是否有某个值。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点:不能过滤掉 NaN、Object
function unique10(arr){
var newArr = [];
arr.filter(function(item){
if(newArr.indexOf(item) === -1){
newArr.push(item);
}
});
return newArr;
};
console.log(unique10(arr)); // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] // 方法十一 思路:利用map()方法去重。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点:不能过滤掉 Object
function unique11(arr){
var map = new Map();
var newArr = [];
arr.forEach(function(item){
if(map.has(item)){
map.set(item, true);
} else {
map.set(item, false);
newArr.push(item);
}
});
return newArr;
};
console.log(unique11(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] // // 方法十二 思路:利用hasOwnProperty去重。
// // 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
function unique12(arr){
var obj = {};
return arr.filter(function(item){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true);
});
};
console.log(unique12(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] /*
* ES6的方法
*/ // 方法十三 思路:利用ES6中的拓展运算符...和set()方法。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点:不能过滤掉Object
function unique13(arr){
return [...new Set(arr)];
};
console.log(unique13(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] // 方法十四 思路:利用ES6中Array.from()方法和set()方法,set()方法可以生产set数据结构,这种结构成员的值是唯一的,然后用Array.from()方法将set对象转为数组。
// 优点:该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点:不能过滤掉Object
function unique14(arr){
return Array.from(new Set(arr));
};
console.log(unique14(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

js 数组去重方法总结的更多相关文章

  1. js 数组去重方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 原声js数组去重方法

    数组去重方法 方法一 ---- 利用数组filter + indexOf方法去重 方法二 ---- 利用数组forEach + indexOf方法去重 方法三 ---- 利用数组from方法 + Se ...

  3. js数组去重方法分析与总结

    数组去重经常被人拿来说事,虽然在工作中不常用,但他能够很好的考察js基础知识掌握的深度和广度,下面从js的不同阶段总结一下去重的方法. ES3阶段 该阶段主要通过循环遍历数组从而达到去重的目的 多次循 ...

  4. Js数组去重方法总结

    //方法一 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5]; function removeDuplicatedItem(arr) { for(var i = 0; ...

  5. 三种常用的js数组去重方法

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...

  6. js数组去重方法包括Es6(方法有很多,但是需要考虑兼容性和数据类型场景)

    1.Es6提供的方法 <script type="text/javascript"> //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组 ...

  7. js数组去重方法整理

    1.思路:定义一个新数组,并存放原数组的第一个元素,然后将原数组的项和新数组的元素一一对比,若不同则存放在新数组中. function unique(arr){ var res = [arr[0]]; ...

  8. js数组去重方法集合

    //第一种方法,新建一个空数组,将原来的数组循环逐个与新数组的成员做比较,如果新数组没有该元素就push进来 var arr = ['a', 1, 1, 1, 2, 4, 4, 'b', 'c', ' ...

  9. js 数组去重方法

    var arr = ['a',1,2,3,'a',4,2,3,1,4,2,8,10,null,'a']; // 方法一 var newArr = [...new Set(arr)]; console. ...

随机推荐

  1. java读取word文档,提取标题和内容

    使用的工具为poi,需要导入的依赖如下 <dependency> <groupId>org.apache.poi</groupId> <artifactId& ...

  2. chomd添加权限

    chmod 777 -R * 的意思是把当前目录所有文件(递归的)的属性全部为7

  3. C++使用 new 声明动态数组

    int main() { using namespace std; int* p = new int[3]; // new运算符返回第一个元素的地址. p[0] = 10; p[1] = 9; p[2 ...

  4. 并行计算基础(1)(GPU架构介绍)

    一.常用术语 Task:任务.可以完整得到结果的一个程序,一个程序段或若干个程序段.例如搬砖. Parallel Task:并行任务.可以并行计算的任务.多个人搬砖. Serial Execution ...

  5. ZeroMQ+QT 字符串收发

    结合 Zeromq API函数 与 Qt 字符串QString QByteArray 实现字串收发: 发送端: zmq_msg_t msg; QString strT = “ABC汉字123”: QB ...

  6. Spring Boot教程(二十八)通过JdbcTemplate编写数据访问

    数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. 首先,为了连接数据库需要引入jdbc支持,在pom.xml中引入如下配置: <depende ...

  7. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  8. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  9. TL;DR

    英文文章中,偶尔会出现TL;DR 的字符. TL;DR=>Too Long; Don’t Read=>太长了,读不下去=>长话短说 一般用于在文章开头先给出干货.

  10. centos6 centos7 配置开机启动服务

    centos 6 :使用chkconfig命令即可. 我们以apache服务为例: #chkconfig --add apache 添加nginx服务 #chkconfig apache on 开机自 ...