Zusammenfassung häufig verwendeter Array-Operationsmethoden in JavaScript (Code)

Dieser Artikel bietet Ihnen eine Zusammenfassung (Code) gängiger Array-Operationsmethoden. Ich hoffe, dass er für Freunde hilfreich ist.

1. concat()

Die concat()-Methode wird verwendet, um zwei oder mehr Arrays zu verbinden. Diese Methode ändert das vorhandene Array nicht, sondern gibt nur eine Kopie des verketteten Arrays zurück.

var arr1 = [1,2,3];    
var arr2 = [4,5];    
var arr3 = arr1.concat(arr2);
console.log(arr1);//[1, 2, 3]
console.log(arr3);//[1, 2, 3, 4, 5]

2. join()

Die Methode „join()“ wird verwendet, um alle Elemente im Array in einen String einzufügen. 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 arr = [2,3,4];
console.log(arr.join());//2,3,4
console.log(arr);//[2, 3, 4]

3. push()

push()-Methode kann ein oder mehrere Elemente am Ende des Arrays hinzufügen und die neue Länge zurückgeben. Durch Hinzufügen am Ende wird die Länge zurückgegeben, wodurch das ursprüngliche Array geändert wird.

var a = [2,3,4];    
var b = a.push(5);
console.log(a); //[2,3,4,5]
console.log(b);//4
push方法可以一次添加多个元素push(data1,data2....)

4. pop()

Die Methode pop() wird verwendet, um das letzte Element des Arrays zu löschen und zurückzugeben. Durch die Rückgabe des letzten Elements wird das ursprüngliche Array geändert.

var arr = [2,3,4];
console.log(arr.pop());//4
console.log(arr); //[2,3]

5. Shift()

Die Methode Shift() wird verwendet, um das erste Element des Arrays daraus zu löschen und den Wert des ersten Elements zurückzugeben. Gibt das erste Element zurück und ändert das ursprüngliche Array.

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr);  //[3,4]

6. unshift()

Die Methode unshift() fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge zurück. Gibt die neue Länge zurück und ändert das ursprüngliche Array.

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3, 6, 2, 3, 4, 5]

7. Slice()

Gibt ein neues Array zurück, das die Elemente in arrayObject vom Anfang bis zum Ende enthält (mit Ausnahme dieses Elements). Gibt die ausgewählten Elemente zurück. Diese Methode ändert das ursprüngliche Array nicht.

var arr = [2,3,4,5];
console.log(arr.slice(1,3));  //[3,4]
console.log(arr);  //[2,3,4,5]

8. splice()

Die Methode splice() kann null oder mehr Elemente beginnend mit dem Index löschen und sie durch einen oder mehrere Werte ersetzen, die in den entfernten Parameterlistenelementen deklariert wurden . Wenn ein Element aus arrayObject gelöscht wird, wird ein Array zurückgegeben, das das gelöschte Element enthält. Die Methode splice() ändert das Array direkt.

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a);  // [5, 9, 6, 7, 8]    
var b = [5,6,7,8];
console.log(b.splice(1,2,3));  //[6, 7]
console.log(b); //[5, 3, 8]

9. Substring() und substr()

Gleicher Punkt: Wenn Sie nur einen Parameter schreiben:

substr(startIndex);

substring(startIndex);

Beide haben die gleiche Funktion: Sie fangen das String-Fragment vom aktuellen Index bis zum Ende des Strings ab.

var str = '123456789';
console.log(str.substr(2));    //  "3456789"
console.log(str.substring(2));//  "3456789"

Unterschied: Der zweite Parameter

substr(startIndex,lenth): Der zweite Parameter dient zum Abfangen der Länge der Zeichenfolge (Abfangen einer Zeichenfolge einer bestimmten Länge vom Startpunkt aus)

substring (startIndex, endIndex): Der zweite Parameter dient zum Abfangen des letzten Indexes der Zeichenfolge (Abfangen der Zeichenfolge zwischen den beiden Positionen, „einschließlich des Kopfes, aber nicht des Endes“)

console.log("123456789".substr(2,5));    //  "34567"
console.log("123456789".substring(2,5));//  "345"

Sortierung
Sortieren nach Unicode-Codeposition, standardmäßig aufsteigende Reihenfolge:

• var Fruit = ['cherries', 'apples', 'bananas'];
• fruit.sort(); / / ['Äpfel', 'Bananen', 'Kirschen']

var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

11. Die Methode reverse()
reverse() wird verwendet, um die Reihenfolge der Elemente im Array umzukehren. Zurückgegeben wird das umgekehrte Array, wodurch das ursprüngliche Array geändert wird.

var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr);  //[4, 3, 2]

Twelve, indexOf und lastIndexOf
akzeptieren beide zwei Parameter: den zu suchenden Wert und die Startposition für die Suche.
Wenn es nicht existiert, geben Sie -1 zurück; wenn es existiert, geben Sie die Position zurück. indexOf durchsucht von vorne nach hinten und lastIndexOf durchsucht von hinten nach vorne.

indexOf：
var a = [2, 9, 9];
    a.indexOf(2); // 0
    a.indexOf(7); // -1
if (a.indexOf(7) === -1) {      
// element doesn't exist in array   
}

lastIndexOf：
var numbers = [2, 5, 9, 2];
    numbers.lastIndexOf(2);     // 3
    numbers.lastIndexOf(7);     // -1
    numbers.lastIndexOf(2, 3);  // 3
    numbers.lastIndexOf(2, 2);  // 0
    numbers.lastIndexOf(2, -2); // 0
    numbers.lastIndexOf(2, -1); // 3

13. every
führt die angegebene Funktion für jedes Element des Arrays aus und gibt true zurück, wenn jedes Element ture zurückgibt.

function isBigEnough(element, index, array) {
      return element < 10;
}
[2, 5, 8, 3, 4].every(isBigEnough);   // true

14. some
führt die angegebene Funktion für jedes Element des Arrays aus. Wenn ein Element ture zurückgibt, gibt es true zurück.

function compare(element, index, array) {
      return element > 10;
}
[2, 5, 8, 1, 4].some(compare);  // false
[12, 5, 8, 1, 4].some(compare); // true

15. Filter
führt die angegebene Funktion für jedes Element des Arrays aus und gibt ein Array zurück, das aus Elementen besteht, deren Ergebnis wahr ist.

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];    
var longWords = words.filter(function(word){
      return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]

16. map
führt die angegebene Funktion für jedes Element des Arrays aus und gibt das Ergebnis jedes Funktionsaufrufs zurück, um ein neues Array zu bilden.

var numbers = [1, 5, 10, 15];    
var doubles = numbers.map(function(x) {
       return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

Siebzehn, forEach-Array-Traversal

const items = ['item1', 'item2', 'item3'];    
const copy = [];    
items.forEach(function(item){
    copy.push(item)
});

Achtzehn, reduzieren
reduce führt die Rückruffunktion nacheinander für jedes Element im Array aus, mit Ausnahme derjenigen, die gelöscht oder nie aus dem Array gelöscht werden Das zugewiesene Element akzeptiert vier Parameter: den Anfangswert (oder den Rückgabewert der letzten Rückruffunktion), den aktuellen Elementwert, den aktuellen Index und das Array, in dem Reduce aufgerufen wird.

无初始值：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

Ergebnisse drucken:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Sie können sehen es hier Im obigen Beispiel beginnt der Index bei 1 und der Wert des ersten prev ist der erste Wert des Arrays. Die Array-Länge beträgt 4, aber die Reduzierungsfunktion führt eine dreimalige Schleife durch.
hat den Anfangswert:

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

Druckergebnis:
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3 , 4] 10

In diesem Beispiel beginnt der Index bei 0, der erste vorherige Wert ist der von uns festgelegte Anfangswert 0, die Array-Länge beträgt 4 und die Reduzierungsfunktion wird viermal wiederholt.
Schlussfolgerung: Wenn kein initialValue angegeben wird, führt Reduce die Callback-Methode ab Index 1 aus und überspringt den ersten Index. Wenn initialValue angegeben wird, beginnt es bei Index 0.
ES6 fügt eine neue Methode zum Betreiben von Arrays hinzu
1. find()
Übergeben Sie eine Rückruffunktion, suchen Sie das erste Element im Array, das den aktuellen Suchregeln entspricht, geben Sie es zurück und beenden Sie die Suche.

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2. findIndex()
übergibt eine Rückruffunktion, findet das erste Element im Array, das den aktuellen Suchregeln entspricht, gibt seinen Index zurück und beendet die Suche.

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3. fill()
Ersetzen Sie die Elemente im Array durch neue Elemente, und Sie können den Ersatz-Indexbereich angeben.

arr.fill(value, start, end)

4、copyWithin()
选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))
// [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))
// [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))
// [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

5、from
将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]

6、of
用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8)// [3, 11, 8]
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);// [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

7、entries() 返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
      console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
      console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
      console.log(v)
}
// ['a', 'a'] ['b', 'b']

8、values() 返回迭代器：返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
      console.log(v)
}
//'a' 'b' 'c'

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
      console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
      console.log(v)    
}
// 'a' 'b'

9、keys() 返回迭代器：返回键值对的key

//数组
const arr = ['a', 'b', 'c'];    
for(let v of arr.keys()) {
      console.log(v)
}
// 0 1 2

//Set
const arr = new Set(['a', 'b', 'c']);    
for(let v of arr.keys()) {
      console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
      console.log(v)
}
// 'a' 'b'

10、includes
判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

var a = [1, 2, 3];
    a.includes(2); // true
    a.includes(4); // false

【相关推荐：JavaScript视频教程】

Das obige ist der detaillierte Inhalt vonZusammenfassung häufig verwendeter Array-Operationsmethoden in JavaScript (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!