这一篇文章, 我们讲解一下数组去重.
1. 最简单粗暴地方式, 两重 for 循环
- let arr = [9, 5, 6, 5, '1', '1', true, 5, true];
- for (var i = 0; i < arr.length; i++) {
- for (var j = i + 1; j < arr.length; j++) {
- if(arr[i] === arr[j]){
- arr.splice(j,1);
- }
- }
- }
- console.log(arr); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]
- // 两个 NaN, 因为 NaN!=NaN
- 2.indexOf
- let a = [];
- for (var i = 0; i < arr.length; i++) {
- if(a.indexOf(arr[i]) === -1){
- a.push(arr[i]);
- }
- }
- console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]
- // 两个 NaN, 因为 NaN!=NaN
- 3.includes
- for (var i = 0; i < arr.length; i++) {
- if(!a.includes(arr[i])){
- a.push(arr[i]);
- }
- }
- console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {...}, {...}]
- 4.Set
- let a = [...(new Set(arr))];
- console.log(a); // [9, 5, 6, "1", true, undefined, null, NaN, {...}, {...}]
- 5.filter
- let a = arr.filter(function(value, index){
- return arr.indexOf(value, 0) === index;
- })
- console.log(a);// [9, 5, 6, "1", true, undefined, null, {...}, {...}]
- arr.filter(function(value){
- return a.indexOf(value) === -1 ? a.push(value) : a;
- })
- console.log(a);// [9, 5, 6, "1", true, undefined, null, NaN, NaN, {...}, {...}]
- 6.sort
- arr = arr.sort(); // 排序, 如果相同就会挨着
- a.push(arr[0]); // 先放数组第一个元素
- for (var i = 1; i < arr.length; i++) {
- if(arr[i] !== arr[i - 1]){
- a.push(arr[i]);
- }
- }
- 7.reduce
- arr = arr.sort();
- arr.reduce(function(preVal, nowVal){
- if(preVal !== nowVal){
- a.push(preVal);
- }
- return nowVal;
- }, a)
- arr.reduce(function(preVal, nowVal){
- return a.indexOf(nowVal) === -1 ? a.push(nowVal) : a;
- }, a)
- console.log(a); //["1", 5, 6, 9, NaN, NaN, {...}, {...}, null, true, undefined]
- 8.hasOwnProperty
- let obj = {};
- for (var i = 0; i < arr.length; i++) {
- if(!obj.hasOwnProperty(obj[typeof arr[i] + arr[i]])){
- obj[typeof arr[i] + arr[i]] = arr[i];
- }
- }
- console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {...}] 无法判断对象
9. 对象数组去重方法
- let obj = {};
- for (var i = 0; i < arr.length; i++) {
- if(!obj[typeof arr[i] + arr[i]]){
- obj[typeof arr[i] + arr[i]] = arr[i];
- }
- }
- console.log(Object.values(obj)); //[9, 5, 6, "1", true, undefined, null, NaN, {...}]
- 10.Map
- let map = new Map();
- for (var i = 0; i < arr.length; i++) {
- if(!map.get(arr[i])){
- map.set(arr[i], arr[i]);
- }
- }
- console.log(map);
补充
我想说一下 forEach 与 map
- arr.forEach( function(element, index) {
- console.log(element);
- });
- arr.map(function(element, index){
- console.log(element);
- });
相同点
他们都是用来遍历数组的.
不同点
map 能有返回值, forEach 没有返回值.
``` let arr = [9,3,6,3,6,3]; arr = arr.forEach( function(element, index) { return element + 1; }); console.log(arr); // undefined arr = arr.map(function(element, index){ return element + 1; }); console.log(arr); //[10, 4, 7, 4, 7, 4] ```
forEach 不能中途打断
``` let arr = [9,3,6,3,6,3]; arr.forEach( function(element, index) { console.log(element); if(index === 2){ return; // 没用, break,continue 会报错是无效的 } }); ```
forEach 模拟实现
``` Array.prototype.bforEach = function (fn) { let array = this; for (var i = 0; i < array.length; i++) { fn(array[i], i, array); } } arr.bforEach(function(element, index){ console.log(element); // 9, 3, 6, 3, 6, 3 }); ```
map 模拟实现
``` Array.prototype.Map = function (fn) { let array = this, a = [], r; for (var i = 0; i < array.length; i++) { r = fn(array[i], i, array); a.push(r); } return a; } ```
喜欢的可以点一个赞, 或者关注一下. 鼓励一下一名自学前端的大学生.
来源: http://www.bubuko.com/infodetail-2909543.html