Dieser Artikel bietet Ihnen eine Zusammenfassung der JavaScript-Array-Operationsmethoden (mit Beispielen). Freunde in Not können darauf verweisen.
ECMAScript bietet viele Methoden zum Bearbeiten von Elementen, die bereits in einem Array enthalten sind. Hier fasse ich mein Verständnis dieser Methoden zusammen. Ich habe zunächst verwendet, um das ursprüngliche Array als Klassifizierungsstandard zu ändern, und jede Methode einzeln erläutert.
Die concat()-Methode wird verwendet, um zwei oder mehr Arrays zu verketten. Diese Methode ändert das vorhandene Array nicht, sondern gibt nur eine Kopie des verketteten Arrays zurück.
var arr1 = [1,2,3]; var arr2 = arr1.concat(4,[5,6]); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]
Die Methode „join()“ wird für alle verwendet Elemente im Array werden in einen String eingefügt. Elemente werden durch das angegebene Trennzeichen getrennt. Standardmäßig wird „,“ zum Trennen der Elemente verwendet, wodurch das ursprüngliche Array nicht geändert wird.
var arr1 = [1,2,3]; var arr2 = arr1.join(); console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // 1,2,3
var arr3 = "";
for(let i = 0; i < 15; i ++) {
arr3 = arr3 + "*";
}
console.log(arr3); // ***************
var arr4 = new Array(16).join("*");
console.log(arr4); // ***************3. Slice()
slice() akzeptiert einen oder zwei Parameter, die die Start- und Endpositionen der zurückzugebenden Elemente sind.
Wenn zwei Parameter vorhanden sind, gibt die Methode die Elemente zwischen Anfang und Ende zurück Positionen – enthält jedoch keine Elemente an der Endposition.
Wenn der Parameter eine negative Zahl ist, gibt er die Position ab dem Ende des Arrays an. Das heißt, -1 bezieht sich auf das letzte Element, -2 bezieht sich auf das vorletzte Element und so weiter.
var arr1 = [1,2,3,4,5,6]; var arr2 = arr1.slice(1); var arr3 = arr1.slice(2,4); var arr4 = arr1.slice(-4,-2); // 等价于 arr1.slice(2,4); console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ] console.log(arr2); // [ 2, 3, 4, 5, 6 ] console.log(arr3); // [ 3, 4 ] console.log(arr4); // [ 3, 4 ]
Array.prototype.slice.call(arguments)
oder ==> some() führt die angegebene Funktion für jedes Element im Array aus. Wenn die Funktion für jedes Element „true“ zurückgibt, wird kein Test durchgeführt Kein Element erfüllt die Bedingung, es wird „false“ zurückgegeben.
function compare(item, index, arr){
return item > 10;
}
[2, 5, 8, 1, 4].some(compare); // false
[20, 5, 8, 1, 4].some(compare); // true5. every()
und ==> every() führt die angegebene Funktion für jedes Element im Array aus. Wenn die Funktion für jedes Element „true“ zurückgibt, werden die verbleibenden Elemente nicht erneut überprüft, wenn es ein Element gibt, das die Bedingung nicht erfüllt. Gibt „false“ zurück .
function compare(item, index, arr){
return item > 10;
}
[20, 50, 80, 11, 40].every(compare); // true
[20, 50, 80, 10, 40].every(compare); // false5. filter()
Die Methode filter() erstellt ein neues Array und die Elemente im neuen Array werden auf alle Elemente im angegebenen Array überprüft, die die Bedingungen erfüllen.
function filterArr(item, index, arr){
return item > 4;
}
[2, 5, 8, 1, 4].filter(filterArr); // [5,8]
Die Methode map() gibt ein neues Array zurück, und die Elemente im Array sind die Werte der ursprünglichen Array-Elemente nach dem Aufruf der Funktion.
function mapArr(item, index, arr){
return item * 4;
}
[2, 5, 8, 1, 4].map(mapArr); // [8,20,32,4,16]Array-Methode. Das Folgende ist eine Methode, die ich selbst geschrieben habe
var arr = [2, 4, 8, 6, 1];
Array.prototype.myMap = function (fn, thisValue) {
var arr = this,
len = arr.length,
tmp = 0,
result = [];
thisValue = thisValue || null;
for (var i = 0; i < len; i++) {
var item = arr[i],
index = i;
tmp = fn.call(thisValue, item, index, arr);
result.push(tmp);
}
return result
}
function mapArr(item, index, arr) {
return item * 4;
}
arr.myMap(mapArr) // [8, 16, 32, 24, 4]map
Die Methode forEach() wird verwendet, um jedes Element des Arrays aufzurufen und das Element an die Rückruffunktion zu übergeben. Diese Methode hat keinen Rückgabewert.
var items = [1, 2, 4, 7, 3];
var copy = [];
items.forEach(function(item,index){
copy.push(item*index);
})
console.log(items); // [ 1, 2, 4, 7, 3 ]
console.log(copy); // [ 0, 2, 8, 21, 12 ]函数参数
| 参数 | 描述 |
|---|---|
total |
必需。初始值, 或者计算结束后的返回值。 |
currentValue |
必需。当前元素 |
currentIndex |
可选。当前元素的索引 |
arr |
可选。当前元素所属的数组对象。 |
这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法中数组的第一项开始，逐个遍历到最后；而reduceRight()则从数组的最后一项开始，向前遍历到第一项。
如果没有设置initialValue，total的值为数组第一项，currentValue为数组第二项。
如果设置了initialValue，则total的值就是initialValue，currentValue为数组第一项。
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum);
console.log(numbers); // [ 65, 44, 12, 4 ]
console.log(res); // 125
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum, 10); // 初始值设置为10，所以最终结果也相应的加10
console.log(res); // 135使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新数组的长度
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr= [65, 44, 12, 4]; var arr1 = arr.push(2,5); console.log(arr); // [ 65, 44, 12, 4, 2, 5 ] console.log(arr1); // 6
使用方法：array.pop()
返回值： 数组原来的最后一个元素的值（移除的元素）
pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。
var arr = [65, 44, 12, 4]; var arr1 = arr.pop(); console.log(arr); // [ 65, 44, 12 ] console.log(arr1); // 4
使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新数组的长度
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。
var arr = [65, 44, 12, 4]; var arr1 = arr.unshift(1); console.log(arr); // [ 1, 65, 44, 12, 4 ] console.log(arr1); // 5
使用方法：array.shift()
返回值： 数组原来的第一个元素的值（移除的元素）
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。
var arr = [65, 44, 12, 4]; var arr1 = arr.shift(); console.log(arr); // [ 44, 12, 4 ] console.log(arr1); // 65
使用方法：array.sort(sortfunction)
返回值： 返回排序后的数组（默认升序）
P.S 由于排序是按照 Unicode code 位置排序，所以在排序数字的时候，会出现"10"在"5"的前面，所以使用数字排序，你必须通过一个函数作为参数来调用。
var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values); // [ 0, 1, 10, 15, 5 ]
values.sort(function(a, b){
return a - b;
})
console.log(values); // [0, 1, 5, 10, 15 ]使用方法：array.reverse()
返回值： 返回颠倒后的数组
reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。
var values = [0, 1, 5, 10, 15]; values.reverse(); console.log(values); // [ 15, 10, 5, 1, 0 ]
使用方法：array.fill(value, start, end)
返回值： 返回新的被替换的数组
fill()方法用于将一个固定值替换数组的元素。
| 参数 | 描述 |
|---|---|
| value | 必需。填充的值。 |
| start | 可选。开始填充位置。 |
| end | 可选。停止填充位置(不包含) (默认为 array.length) |
var values = [0, 1, 5, 10, 15]; values.fill(2); console.log(values); // [ 2, 2, 2, 2, 2 ] values = [0, 1, 5, 10, 15]; values.fill(2,3,4); console.log(values); // [ 0, 1, 5, 2, 15 ]
使用方法：array.splice(index,howmany,item1,.....,itemX)
返回值： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组
splice()有多种用法：
1、删除: 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。splice(0,2) // 会删除数组中前两项
2、插入: 可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。splice(2,0,1,4) // 会从数组位置2的地方插入1和4
3、替换: 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需提供3个参数：起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。splice(2,3,1,4) // 会从数组位置2删除两项，然后再从位置2的地方插入1和4
// 删除 var values = [4,8,0,3,7]; var remove = values.splice(3,1); console.log(values); // [ 4, 8, 0, 7 ] console.log(remove); // [ 3 ] 删除第四项 // 插入 remove = values.splice(2,0,1,2); console.log(values); // [ 4, 8, 1, 2, 0, 7 ] console.log(remove); // [] 从位置2开始插入两项，由于没有删除所有返回空函数 // 替换 remove = values.splice(2,2,6,9,10); console.log(values); // [ 4, 8, 6, 9, 10, 0, 7 ] console.log(remove); // [ 1, 2 ] 从位置2开始删除两项，同时插入三项
Das obige ist der detaillierte Inhalt vonZusammenfassung der JavaScript-Array-Operationsmethoden (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
