概念：去除数组中重复重新的值

方法一：循环遍历截取

原理:通过每次循环遍历比较当前值在不在数组中，在就删除当前值并且索引减一，弊端，会改变原数组

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2.     function removeDuplicatedItem(arr) {
  3.        for (var i = 0; i < arr.length - 1; i++) {
  4.             for (var j = i + 1; j < arr.length; j++) {
  5.               if (arr[i] === arr[j]) {
  6.                   arr.splice(j, 1);//console.log(arr[j]);
  7.                   j--;
  8.                 }
  9.              }
  10.          }
  11.         return arr;
  12.     }
  13. let arr2 = removeDuplicatedItem(arr);
  14. console.log(arr);  // [1, 23, 3, 5, 6, 7, 9, 8]
  15. console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法二：借助indexOf()方法

原理：判断此元素在该数组中首次出现的位置下标与循环的下标是否相等 与方法一类似

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2.         function rep2(arr) {
  3.             for (var i = 0; i < arr.length; i++) {
  4.                 // console.log(arr.indexOf(arr[i])); 可以输出当前元素首次出现的索引
  5.                 if (arr.indexOf(arr[i]) !== i) {
  6.                     arr.splice(i, 1);//删除数组元素后数组长度减1后面的元素前移
  7.                     i--;//数组下标回退
  8.                 }
  9.             }
  10.             return arr;
  11.         }
  12.  let arr2 = rep2(arr);
  13.  console.log(arr);  // [1, 23, 3, 5, 6, 7, 9, 8]
  14.  console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法三：借助新数组和indexOf()方法

原理：通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中 原数组不变

  1. let  arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2.        function rep(arr) {
  3.            let ret = [];
  4.            for (var i = 0; i < arr.length; i++) {
  5.                if (arr.indexOf(arr[i]) == i) {
  6.                    ret.push(arr[i]);
  7.                }
  8.            }
  9.           return ret;
  10.       }
  11. let arr2 = rep(arr);
  12. console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
  13. console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法四：借助空对象

原理：通过对象来记录新数组中已存储过的元素 不改变原数组 与方法三类似

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2.  let o = {};
  3.  let arr2 = [];
  4.  for (var i = 0; i < arr.length; i++) {
  5.      var k = arr[i];
  6.      if (!o[k]) {
  7.         o[k] = true;
  8.         arr2.push(k);
  9.        }
  10.  }
  11. console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
  12. console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法五：filter方法

原理：查找当前元素索引出现的位置是否与当前元素索引值相等，是表示true返回 ，如果当前元素索引不等与当前索引，说明已经出现过，出现过就不返回。 原数组不变

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2. let arr2 = arr.filter(function (element, index, array) {
  3.             return array.indexOf(element) === index;
  4.         });
  5. console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
  6. console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法六：使用include方法

原理：与indexOf类似，判断当前元素是否存在，不存在就添加 不改变原数组

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2. function rep() {
  3.       let res = [];
  4.       for (let i = 0; i < arr.length; i++) {
  5.          if (!res.includes(arr[i])) res.push(arr[i]);
  6.          }
  7.         return res;
  8.     }
  9. console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
  10. console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png

方法七：es6 新增数据结构 new Set()方法

原理：new Set() 的成员具有唯一性，不能重复

  1. let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
  2. let arr2 = new Set(arr)
  3. console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
  4. console.log(arr2)  // {1, 23, 3, 5, 6, …}
  5. console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

image.png