一、利用indexOf()方法去重
方法名 功能描述 indexOf() 返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1 lastIndexOf() 返回指定元素在数组中的最后一个的索引,如果不存在则返回-1
| 检索方法 |
接下来我们通过一个案例来演示数组索引的使用。要求在一组数据中,去除重复的元素。其中数组为[‘blue’, ‘reen’, ‘blue’]。示例代码如下。
| <script> |
| arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique(arr) { |
| var newArr = []; |
| for (var i = 0; i < arr.length; i++) { |
| if (newArr.indexOf(arr[i]) === -1) { |
| newArr.push(arr[i]); |
| } |
| } |
| return newArr; |
| } |
| console.log(unique(arr)); |
| </script> |
上述代码中,第2行代码定义了新数组newArr,用来存放数组中不重复的元素。第3~7行代码遍历了旧数组arr,然后拿着旧数组元素去查询新数组,如果该元素在新数组中没有出现过,那么就添加到新数组中,否则不添加。其中第4行代码利用新数组的indexOf()方法,判断如果返回值为-1就说明新数组里面没有该元素。
二、利用splice()方法去重
splice()方法可以删除数组内容,用法为:
| splice(元素下标, 删除元素个数(可以为0), 要添加的元素(可以不写)) |
| <script> |
| arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique(arr) { |
| for (let i = 0; i < arr.length; i++) { |
| for (let j = i + 1; j < arr.length; j++) { |
| if (arr[i] == arr[j]) { |
| arr.splice(j, 1); |
| j--; |
| } |
| } |
| } |
| return arr; |
| } |
| console.log(unique(arr)); |
| </script> |
三、利用ES6 Set去重
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
| <script> |
| arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique (arr) { |
| return Array.from(new Set(arr)); |
| } |
| console.log(unique(arr)); |
| </script> |
四、利用sort()方法排序,然后对比前后元素
| <script> |
| arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique(arr) { |
| if (!Array.isArray(arr)) { |
| console.log('type error!') |
| return; |
| } |
| arr = arr.sort() |
| var arrry= [arr[0]]; |
| for (var i = 1; i < arr.length; i++) { |
| if (arr[i] !== arr[i-1]) { |
| arrry.push(arr[i]); |
| } |
| } |
| return arrry; |
| } |
| console.log(unique(arr)); |
| </script> |
五、利用includes()方法检测数组是否有某个元素
| <script> |
| arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique(arr) { |
| if (!Array.isArray(arr)) { |
| console.log('type error!') |
| return; |
| } |
| var array =[]; |
| for(var i = 0; i < arr.length; i++) { |
| if(!array.includes(arr[i])) { |
| array.push(arr[i]); |
| } |
| } |
| return array; |
| } |
| console.log(unique(arr)); |
| </script> |
六、利用filter去重
| <script> |
| var arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| function unique(arr) { |
| return arr.filter(function(item, index, arr) { |
| |
| return arr.indexOf(item, 0) === index;}); |
| } |
| console.log(unique(arr)); |
| </script> |
七、利用Map数据结构去重
| <script> |
| let arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue']; |
| let unique = (arr)=> { |
| let seen = new Map(); |
| return arr.filter((item) => { |
| return !seen.has(item) && seen.set(item,1); |
| }); |
| }; |
| console.log(unique(arr)); |
| </script> |