Verschiedene JavaScript-Methoden zur Implementierung einer reinen Array-Deduplizierung, Array-Objekt-Deduplizierung, Splice, Continue, Filter, IndexOf, Reduce, Includes, Concat, ForEach, Join

---

Vorwort

1. Der erste Teil der reinen Gruppendeduplizierung wird häufiger in Interviews anzutreffen sein; der zweite Teil von Array-Objekten wird eher in der tatsächlichen Entwicklung anzutreffen sein.
2, Trendige Front-End-Kaffeeprodukte 1–9

---

Reine Gruppendatenquelle

// 全局数据。
let arr =  [1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4, 1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4];

---

Schlüsseleinzigartigkeit

// 字典(对象)不允许出现重复的下标
// 遍历 array 中每个元素，
// 每遍历一个元素，
// 就以当前元素作为属性名加入字典中，
// 属性值随便写
function statistics(array) {
    
    
	// 定义空字典
	let dictionaries = {
    
    };
	for (var i = 0; i < array.length; i++) {
    
    
		dictionaries[array[i]] = 1;
	}
	
	return dictionaries;
}

// 此时返回的是对象
// 需要转为数组
console.log(statistics(arr)); 
// {1: 1, 2: 2, 4: 4, null: null, 3: "3", abc: "abc", 3: 3, 5: 5}

// 把对象还原为数组
// 遍历字典，仅获取属性名，不要属性值
var result = [], 
	i = 0;
	
for(result[i++] in statistics(arr));
console.log(result); 
// [1, 2, 4, null, "3", "abc", 3, 5]

---

Verwenden Sie den eindeutigen Schlüssel des Objekts

Objektkey kann nicht wiederholt werden, da das letztere sonst das erstere überschreibt. Verwenden Sie diese Funktion, um die Array-Deduplizierung zu implementieren, das Array zu durchlaufen und jedes Element des Arrays als key-Wert des Objekts zu verwenden.

function noRepeat(arr) {
     
     
	let obj = {
     
     };
	
	for (let i = 0; i < arr.length;) {
     
     
		let item = arr[i];
		
		if (obj[item] !== undefined) {
     
     
			arr.splice(i, 1);
			continue;
		} else {
     
     
			// 数组塌陷的解决方案
			i++;
			obj[item] = item;
		}
	}
	
	return arr;
}

console.log(noRepeat(noRepeat(arr)));
// arr: [1, 2, 4, null, "3", "abc", 3, 5]

---

Tauschen Sie die Elementpositionen aus, um die Spleißmethode zu ersetzen

Die obige Methode weist bestimmte Leistungsprobleme auf, das heißt, die Löschleistung basierend aufsplice ist nicht sehr gut. Nachdem das aktuelle Element gelöscht wurde, wird der Index jedes nachfolgenden Elements gelöscht muss nach vorne verschoben werden. Das Verschieben eines Bits wirkt sich definitiv auf die Leistung aus, wenn die Datenmenge groß ist.
Basierend auf den obigen Überlegungen wird der Austausch der Positionen von Elementen effizienter sein. Wenn das aktuelle Element wiederholt wird, wird die Position mit dem letzten Element des Arrays ausgetauscht, und i– kann sein erneut beurteilt. Gleichzeitig a>length bearbeitet die Länge des Arrays, um das letzte Element des Arrays zu löschen, sodass es keine Auswirkungen auf andere Elemente im Array hat .

let obj = {
    
    };
for (let i = 0; i < arr.length; i++) {
    
    
	let item = arr[i];
	if (obj[item] !== undefined) {
    
    
		arr[i] = arr[arr.length-1]
		arr.length--;
		i--; 
		continue;
	}
	obj[item] = item
}
// arr: [1, 2, 4, null, "3", "abc", 3, 5]

---

Array.filter + Array.indexOf

filter()-Methode: Erstellen Sie ein neues Array. Die Elemente im neuen Array sind alle Elemente im angegebenen Array, die bestimmte Bedingungen erfüllen. Wenn keine passenden Elemente vorhanden sind, wird ein leeres Array zurückgegeben.
Syntax: array.filter(function(item,index,arr))
filter() erkennt keine leeren Arrays.
filter() ändert das ursprüngliche Array nicht.
Prinzip: Gibt das Element zurück, dessen erstes Vorkommen von item dem aktuellen Index entspricht.

let newArr = arr.filter((item, index) => arr.indexOf(item) === index);  
// [1, 2, 4, null, "3", "abc", 3, 5]

---

Array.filter + Object.hasOwnProperty

hasOwnProperty()-Methode: Gibt einen booleschen Wert zurück, der angibt, ob das Objekt die angegebene Eigenschaft in seinen eigenen Eigenschaften hat.
Prinzip: Nutzen Sie die nicht wiederholbare Funktion von Objektschlüsselnamen.

let obj = {
    
    };
arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true));
// [1, 2, 4, null, "3", "abc", 3, 5]

---

Array.reduce + Array.includes

reduce()-Methode: Empfängt eine Funktion als Akkumulator, wird jeder Wert im Array von links nach rechts berechnet und schließlich als Wert berechnet.
Syntax: arr.reduce(function(total, currValue, currIndex, arr), initValue)
Reduce() führt die Callback-Funktion nicht für ein leeres Array aus .
total: erforderlich, Anfangswert oder Rückgabewert nach der Berechnung.
currValue: erforderlich, aktuelles Element.
currIndex: optional, der Index des aktuellen Elements.
arr: optionales, aktuelles Array-Objekt.
initValue: optional, Anfangswert des Akkumulators.
Wenn die Methode „reduce()“ für ein leeres Array aufgerufen wird und kein Anfangswert angegeben wird, wird ein Fehler gemeldet.
Wenn die Methode „reduce()“ mit einem leeren Array aufgerufen wird und ein Anfangswert bereitgestellt wird, wird der Anfangswert direkt zurückgegeben und die Rückruffunktion wird nicht aufgerufen.
Wenn ein nicht leeres Array Reduce() aufruft, um einen Anfangswert bereitzustellen, ist „total“ gleich dem Anfangswert und „currValue“ beginnt mit dem ersten Element; wenn kein Anfangswert bereitgestellt wird, „total“. wird gleich dem ersten Element sein. Elementwerte, und currValue beginnt mit dem zweiten Element.

let newArr = arr.reduce((accu, cur) => {
    
    
	return accu.includes(cur) ? accu : accu.concat(cur);  // 1. 拼接方法
	// return accu.includes(cur) ? accu : [...accu, cur]; // 2. 扩展运算
}, []);
// [1, 2, 4, null, "3", "abc", 3, 5]

---

Array.indexOf

indexOf()-Methode: Gibt die Position eines angegebenen Elements im Array zurück. Diese Methode durchläuft das Array, sucht nach dem entsprechenden Element und gibt den Index des ersten Vorkommens des Elements zurück. Wenn das angegebene Element nicht gefunden wird, wird -1 zurückgegeben.

let newArr = [];
for (var i = 0; i < arr.length; i++) {
    
    
	if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);  
}
//等同于 forEach 写法
arr.forEach(item => newArr.indexOf(item) === -1 ? newArr.push(item) : '');
console.log(newArr);  // [1, 2, 4, null, "3", "abc", 3, 5]

---

Array.includes

include()-Methode: Wird verwendet, um zu bestimmen, ob ein Array einen angegebenen Wert enthält. Wenn ja, gibt sie true zurück, andernfalls false.

let newArr = [];
for (var i = 0; i < arr.length; i++) {
    
    
	if (!newArr.includes(arr[i]))  newArr.push(arr[i]);
}
//等同于 forEach 写法
arr.forEach( item => !newArr.includes(item) ? newArr.push(item) : '');
console.log(newArr);  // [1, 2, 4, null, "3", "abc", 3, 5]

---

neuer Set + Spread-Operator || Array.from

ES6 stellt einen neuen Datenstruktursatz bereit. Ähnlich einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte.
Set selbst ist ein Konstruktor, der eine Datenstruktur mit iterierbarer Schnittstelle als Parameter (z. B. Array, String) zur Initialisierung akzeptieren kann.

let newArr = [...new Set(arr)];      
// [1, 2, 4, null, "3", "abc", 3, 5]
let newArr = Array.from(new Set(arr));      
// [1, 2, 4, null, "3", "abc", 3, 5]
let newStr = [...new Set('ababbc')].join(''); 
// 'abc'

---

neue Karte

ES6 bietet eine neue Datenstrukturkarte. Ähnlich wie ein Objekt handelt es sich auch um eine Sammlung von Schlüssel-Wert-Paaren, der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden.
Die Set-Methode setzt den Schlüsselwert, der dem Schlüsselnamen entspricht, auf value und gibt dann die gesamte Map-Struktur zurück. Wenn der Schlüssel bereits einen Wert hat, wird der Schlüsselwert aktualisiert, andernfalls wird der Schlüssel neu generiert.
Die get-Methode liest den dem Schlüssel entsprechenden Schlüsselwert. Wenn der Schlüssel nicht gefunden werden kann, wird undefiniert zurückgegeben.
Die has-Methode gibt einen booleschen Wert zurück, der angibt, ob sich ein Schlüssel im aktuellen Map-Objekt befindet.

let map = new Map();
let newStr = [];
for (let i = 0; i < arr.length; i++) {
    
    
	if (!map.has(arr[i])) {
    
    
		map.set(arr[i], true);
		newStr.push(arr[i]);
	}
}
console.log(newArr); 
// [1, 2, 4, null, "3", "abc", 3, 5]

------------------------

---

Datenquelle für Array-Objekte

let originData = [
	{
    
     id: 1, age: 23, name: '张三' },
	{
    
     id: 2, age: 27, name: '王五' },
	{
    
     id: 3, age: 13, name: '李四' },
	{
    
     id: 4, age: 19, name: '王五' },
	{
    
     id: 5, age: 32, name: '赵六' },
	{
    
     id: 6, age: 18, name: '张三' },
];

---

Deduplizierung von Array-Objekten (1)

// 利用reduce方法遍历数组, reduce第一个参数是遍历需要执行的函数，
// 第二个参数是item的初始值
function reduces(datas) {
    
    
	var obj = {
    
    };
	
	datas = datas.reduce(function (item, next) {
    
    
		obj[next.name] ? "" : (obj[next.name] = true && item.push(next));
		
		return item;
	}, []);
	
	return datas;
}

console.log(reduces(originData));

---

Array-Objektdeduplizierung (2)

// 参数arr：源数据
// 参数field：根据name字段去重
function unique(arr, field) {
    
    
	let map = new Map();
	
	arr.forEach((item) => {
    
    
		if (!map.has(item[field])) map.set(item[field], item);
	});
	
	return [...map.values()];
}

console.log(unique(originData, 'name'));