js array deduplication assembly
Methods 1:
Idea: First define a "new array" and store the first element of the "source array" (the array to be deduplicated, hereinafter referred to as the source array), and then compare the elements of the source array and the new array one by one, if they are different, then stored in a new array.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique(arr) {
// 结果数据
var res = [arr[0]];
for (var i = 1; i < arr.length; i++) {
var repeat = false;
for (var j = 0; j < res.length; j++) {
if (arr[i] === res[j]) {
repeat = true;
break;
}
}
if (!repeat) {
res.push(arr[i]);
}
}
return res;
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 2:
Idea: Sort the source array first, compare it with the adjacent ones, and store them in a new array if they are different.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique2(arr) {
var arr2 = arr.sort();
var res = [arr2[0]];
for (var i = 1; i < arr2.length; i++) {
if (arr2[i] !== res[res.length - 1]) {
res.push(arr2[i]);
}
}
return res;
}
console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 4, 5, 6, 7]Methods 3:
Idea: Make use of the properties of object properties, and store them in a new array if there is no such property.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique3(arr) {
var res = [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
return res;
}
console.log(unique3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 4:
Idea: Use the indexOf subscript property of the array to query.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique4(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) == -1) {
res.push(arr[i]);
}
}
return res;
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 5:
Idea: Use the includes method on the array prototype object.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique5(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
// 如果res新数组包含当前循环item
if (!res.includes(arr[i])) {
res.push(arr[i]);
}
}
return res;
}
console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 6:
Idea: Use the filter and includes methods on the array prototype object.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique6(arr) {
var res = [];
res = arr.filter(function (item) {
return res.includes(item) ? '' : res.push(item);
});
return res;
}
console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 7:
Idea: Use the forEach and includes methods on the array prototype object.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique7(arr) {
var res = [];
arr.forEach(function (item) {
res.includes(item) ? '' : res.push(item);
});
return res;
}
console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 8:
Idea: Use the splice method on the array prototype object.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique8(arr) {
var i, j, len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
len--;
j--;
}
}
}
return arr;
}
console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 9:
Idea: Use the lastIndexOf method on the array prototype object.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique9(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
}
return res;
}
console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 10:
Idea: Use ES6's set method.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique10(arr) {
// Set数据结构，它类似于数组，其成员的值都是唯一的
// 利用Array.from将Set结构转换成数组
return Array.from(new Set(arr));
}
console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]
Advanced chapter: finishing touch, one line of code
Methods 10_1:
Idea: Use the ES6 expansion operator (...) to use the for...of loop inside, and the Set member value is a unique feature
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique10_1(arr) {
// A.Set数据结构，它类似于数组，其成员的值都是唯一的
// B.拓展运算符(...)内部使用for...of循环
return [...(new Set(arr))];
}
console.log(unique10_1([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]Methods 10_2:
Idea: Use the filter function on the array prototype object and the ES6 Map object to save key-value pairs. Any value (object or primitive) can be used as a key or a value.
/**
*
* @param arr 源数组
* @returns {*[]}
*/
function unique10_2(arr) {
const res = new Map();
// 过滤条件是，如果res中没有某个键，就设置这个键的值为1
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
console.log(unique10_2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]