Artikelverzeichnis
1. Warum Code von Hand schreiben?
Im täglichen Entwicklungsprozess nehmen wir es oft heraus und verwenden es direkt, ohne über die zugrunde liegende Implementierungslogik des Codes nachzudenken. Als ich jedoch anfing, einige zugrunde liegende Dinge zu studieren, begann ich, die zugrunde liegenden Implementierungsideen jeder Methode und Funktion zu verstehen Ich denke, dass dies in JavaScript unsere Codeebene und unser logisches Denken sehr gut verbessern kann.
2. Handgeschriebener Code
2.1 für jeden
2.1.1 Grundlegende Verwendung
Die Methode forEach() wird verwendet, um jedes Element des Arrays aufzurufen und das Element an die Rückruffunktion zu übergeben.
let arr = [1, 2, 3];
arr.forEach((item, index, arr) => {
console.log(item, index, arr);
});
2.1.2 Handschriftliche Umsetzung
Die Ausgabe ist konsistent
Array.prototype.myForEach = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
};
arr.myForEach(function (item, index, arr) {
console.log(item, index, arr);
});
2.2 Karte
2.2.1 Grundlegende Verwendung
Die Methode map() gibt ein neues Array zurück , dessen Elemente die verarbeiteten Werte der ursprünglichen Array-Elemente nach dem Aufruf der Funktion sind.
Die Methode „map()“ verarbeitet Elemente nacheinander in der ursprünglichen Reihenfolge der Array-Elemente.
Das ursprüngliche Array ändert sich nicht
und gibt ein neues Array zurück: Addiere 1 zum ursprünglichen Array
let arr = [1, 2, 3, 4];
let newArr = arr.map((item, index, arr) => {
return item + 1;
});
console.log(newArr); // [2, 3, 4, 5]
console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.2.2 Handschriftliche Umsetzung
Array.prototype.myMap = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
// 最终要返回的数组
let result = [];
for (let i = 0; i < this.length; i++) {
result.push(callback(this[i], i, this));
}
return result;
};
let newArr = arr.myMap((item, index, arr) => {
return item + 1;
});
console.log(newArr); // [2, 3, 4, 5]
console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.3 Filter
2.3.1 Grundlegende Verwendung
Die Methode filter() erstellt ein neues Array , dessen Elemente überprüft werden, indem alle Elemente im angegebenen Array überprüft werden, die die Kriterien erfüllen.
filter() verändert das ursprüngliche Array nicht .
Gibt die Elemente im Array zurück, die größer als 3 sind
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((item, index, arr) => {
return item > 2;
});
console.log(newArr); // [3,4,5]
console.log(arr); // [1,2,3,4,5]
2.3.2 Handschriftliche Umsetzung
Array.prototype.myFilter = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
let result = [];
for (let i = 0; i < this.length; i++) {
// 判断是否符合item > 2，符合则push到数组res里面返回
callback(this[i], i, this) && result.push(this[i]);
}
return result;
};
let newArr = arr.myFilter((item, index, arr) => {
return item > 2;
});
console.log(newArr); // [3,4,5]
console.log(arr); // [1,2,3,4,5]
2,4 alle
2.4.1 Grundlegende Verwendung
Mit der Methode every() wird überprüft, ob alle Elemente des Arrays die angegebene Bedingung (bereitgestellt durch die Funktion) erfüllen. Die Methode every() überprüft alle Elemente
im Array mithilfe der angegebenen Funktion : Wenn festgestellt wird, dass ein Element im Array nicht zufriedenstellend ist, gibt der gesamte Ausdruck false zurück und die verbleibenden Elemente werden nicht erneut überprüft. Gibt true zurück , wenn alle Elemente die Bedingung erfüllen .
let arr = [1, 2, 3, 4, 5];
let flag = arr.every((item, index, arr) => {
return item > 4;
});
console.log(flag); // true
2.4.2 Handschriftliche Umsetzung
Array.prototype.myEvery = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
return false;
}
}
return true;
};
let flag = arr.every((item, index, arr) => {
return item > 4;
});
console.log(flag); // false
2,5 einige
2.5.1 Grundlegende Verwendung
Mit der Methode some() wird überprüft, ob die Elemente im Array die angegebene Bedingung (bereitgestellt durch die Funktion) erfüllen.
Wenn ein Element die Bedingung erfüllt, gibt der Ausdruck true zurück und die übrigen Elemente werden nicht erneut überprüft. Gibt false
zurück , wenn kein Element die Bedingung erfüllt .
2.5.2 Handschriftliche Umsetzung
Array.prototype.mySome = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
return false;
}
}
return true;
};
let flag = arr.mySome((item, index, arr) => {
return item > 3;
});
console.log(flag);
2,6 reduzieren
2.6.1 Grundlegende Verwendung
Die Methode „reduce()“ akzeptiert eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird zunächst auf einen Endwert reduziert.
Syntax: `
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Der erste Parameter total : erforderlich. Der Anfangswert oder der Rückgabewert nach Abschluss der Berechnung.
Der zweite Parameter currentValue : Erforderlich. Das aktuelle Element.
Der dritte Parameter currentIndex : optional. Der Index des aktuellen Elements.
Der vierte Parameter arr : optional. Das Array-Objekt, zu dem das aktuelle Element gehört.
Verwenden Sie ein Beispiel, um die Akkumulation von Array-Elementen zu realisieren
let arr = [1, 2, 3, 4];
let sum = arr.reduce((tol, cur) => {
return (tol += cur);
}, 0);
console.log(sum); // 10
2.6.2 Handschriftliche Umsetzung
Array.prototype.myReduce = function (callback, InitialValue) {
if (typeof callback !== 'function') {
throw new Error('传入第一个参数必须是函数');
}
const array = this;
// 如果没有传InitaialValue初始值时，初始值默认为数组的第一项即array[0]
let result = InitialValue || array[0];
for (let i = 0; i < array.length; i++) {
// 如果没有传第二个参数InitialValue初始值，当前数组第一项就不在进入循环
if (!InitialValue && i == 0) {
continue;
}
result = callback(result, array[i], i, this);
}
return result;
};
let result = arr.myReduce((tol, cur, index, arr) => {
return (tol += cur);
}, 0);
console.log(result); // 10
2,7 finden
2.7.1 Grundlegende Verwendung
Die Methode find() gibt den Wert des ersten Elements des Arrays zurück, das die Bedingung erfüllt .
let arr = [1, 2, 3];
let flag = arr.find((item, index, arr) => {
return item > 2;
});
console.log(flag); // 3
2.7.2 Handschriftliche Umsetzung
Array.prototype.myFind = function (callback) {
if (typeof callback !== 'function') {
throw new Error('传入的参数必须是函数');
}
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
return this[i];
}
}
return undefined;
};
let flag = arr.myFind((item, index, arr) => {
return item > 2;
});
console.log(flag);
2.8 findIndex
2.8.1 Grundlegende Verwendung
Die Methode findIndex() gibt die Position des ersten Elements eines Arrays zurück, das in einer Testbedingung (Funktion) übergeben wurde .
let arr = [1, 2, 3, 4];
let index1 = arr.findIndex((item, index, arr) => {
return item == 3;
});
console.log(index1);
2.8.2 Handgeschriebener Code
Array.prototype.myFindIndex = function (callback) {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
return i;
}
}
return -1;
};
let index1 = arr.myFindIndex((item, index, arr) => {
return item == 3;
});
console.log(index1);
2.9 Flatmap
2.9.1 Grundlegende Verwendung
Die flatMap()-Methode ordnet zunächst jedes Element mit der Map-Funktion zu und komprimiert dann das Ergebnis in ein neues Array. Es ist fast dasselbe wie die Ebene mit dem an die Karte angehängten Tiefenwert von 1. Wenn Sie das ursprüngliche Array durchqueren, ohne die Karte zu ändern , wird nach Abschluss des Vorgangs, wenn das bearbeitete Element ein Array ist, eine Flatmap -Ebene erstellt wird abgeflacht.
faltmap(callback,thisArg)
Der erste Parameter callback: (item, i, arr) kann zur Ausführung übergeben werden. Der
zweite Parameter thisArg: Dieser zeigt auf thisArg, wenn der Callback ausgeführt wird
Codebeispiel:
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.flatMap((item) => [item * 2]);
console.log(arr1); // [2, 4, 6, 8, 10]
console.log(arr); // [1, 2, 3, 4, 5] 原数组没有发生改变
let arr2 = arr.flatMap((item) => [[item * 2]]);
console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
console.log(arr); // [1, 2, 3, 4, 5]
2.9.2 Handschriftliche Umsetzung
Array.prototype.myFlatMap = function (callback, thisArg) {
let newArr = [];
for (let i = 0; i < this.length; i++) {
let res = callback.call(thisArg, arr[i], i, arr);
if (Array.isArray(res)) {
newArr.push(...res);
} else {
newArr.push(res);
}
}
return newArr;
};
let arr1 = arr.flatMap((item) => [item * 2]);
console.log(arr1); // [2, 4, 6, 8, 10]
let arr2 = arr.myFlatMap((item) => [[item * 2]]);
console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
| Begrüßen Sie alle zum Diskutieren und Lernen. Vielen Dank für Ihre Unterstützung |