Was ich mit Ihnen in diesem Artikel teilen möchte, ist eine Zusammenfassung der ES5- und ES6-Array-Methoden. Freunde, die es brauchen, können einen Blick auf

Array-Objekteigenschaften

werfen
constructor Return Ein Verweis auf die Array-Funktion, die dieses Objekt erstellt hat.
length Legt die Anzahl der Elemente im Array fest oder gibt sie zurück.
Prototype bietet Ihnen die Möglichkeit, Objekten Eigenschaften und Methoden hinzuzufügen.

Traditionelle Array-Objektmethode

toSource() Gibt den Quellcode des Objekts zurück.
toString() Konvertiert das Array in einen String und gibt das Ergebnis zurück.
toLocaleString() Konvertiert das Array in ein lokales Array und gibt das Ergebnis zurück.
valueOf() Gibt den ursprünglichen Wert des Array-Objekts zurück

Ändert das ursprüngliche Array

push() Fügt hinzu das Ende des Arrays. Ein oder mehrere Elemente und gibt die neue Länge zurück.
unshift() Fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge zurück.

pop() Löscht das letzte Element des Arrays und gibt es zurück
shift() Löscht das erste Element des Arrays und gibt es zurück

sort() Sortiert die Elemente des Arrays
reverse() kehrt die Reihenfolge der Elemente in einem Array um.
splice() entfernt Elemente und fügt dem Array neue Elemente hinzu.

splice

Syntax

arrayObject.splice(index,howmany,item1,...,itemX)

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.splice(2,1);               //"George", "John"
arr.splice(1,0,"William");     //"George", "William", "John"
arr.splice(2,1,"haha");        //"George", "William", "haha"

Nach dem Login kopieren

Ändern Sie das Original nicht Array

concat() verkettet zwei oder mehr Arrays und gibt das Ergebnis zurück.
join() fügt alle Elemente des Arrays in einen String ein. Elemente werden durch das angegebene Trennzeichen getrennt.
slice() Gibt das ausgewählte Element aus einem vorhandenen Array

slice

Syntax

arrayObject.slice(start,end);

Start Erforderlich. Gibt an, wo mit der Auswahl begonnen werden soll. Kann negativ sein und vom Ende des Arrays gezählt werden.
Ende Optional. Gibt an, wo die Auswahl endet. Wenn nicht angegeben, enthält das Sliced-Array alle Elemente vom Anfang bis zum Ende des Arrays. Kann negativ sein und vom Ende des Arrays gezählt werden.

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.slice(2,1);         //[]
arr.slice(1,2);         //"William"
arr.slice(-2,-1);         //"William"

Nach dem Login kopieren

Array-ähnliche Objekte (z. B. Argumente) in echte Arrays konvertieren

Array.prototype.slice.call(arguments);

ES5 Neu Array

Indexmethoden: indexOf(), lastIndexOf()
Iterationsmethoden: forEach(), map(), filter( ), some(), every()
Merge-Methoden: Reduce(), ReduceRight()

Methoden ändern das ursprüngliche Array nicht

Indexmethode

indexOf

array.indexOf(searchElement[, fromIndex])

Nach dem Login kopieren

Gibt den ganzzahligen Indexwert zurück. Wenn keine Übereinstimmung vorliegt (strikte Übereinstimmung), wird -1 zurückgegeben.
fromIndex ist optional und gibt an, dass die Suche an dieser Position beginnt. Wenn der Standardwert oder das Format nicht den Anforderungen entspricht, verwenden Sie den Standardwert 0.

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

Nach dem Login kopieren

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

Nach dem Login kopieren

Suche vom Ende der Zeichenfolge, nicht vom Anfang.
Der Standardwert von fromIndex ist array.length - 1.

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (从后往前，索引值小于3的开始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

Nach dem Login kopieren

Die beiden Methoden verwenden den Gleichheitsoperator, wenn sie den ersten Parameter mit jedem Element im Array vergleichen. Sie müssen vollständig gleich sein, andernfalls wird -1 zurückgegeben.

Iterative Methode

Jede Methode akzeptiert zwei Parameter, der erste Parameter ist Callback (Callback-Funktion, erforderlich) und der zweite Parameter ist ein optionaler Kontextparameter.

Der erste Parameter-Callback akzeptiert drei Parameter, den Wert des aktuellen Elements, den Index des aktuellen Elements im Array und das Array-Objekt selbst. Das heißt, function(value,index,arr) {}; Es ist zu beachten, dass der Unterschied zu der in unserer häufig verwendeten jQuery gekapselten Methode der erste Parameter und der zweite Parameter ist, dh die Reihenfolge von Index und Wert ist umgekehrt .
Der zweite Parameter ist ein optionaler Kontextparameter, bei dem es sich um das Bereichsobjekt handelt, das den ersten Funktionsparameter ausführt, bei dem es sich um den Wert handelt, auf den dieser im oben erwähnten Rückruf verweist. Wenn der zweite optionale Parameter nicht angegeben ist, wird stattdessen das globale Objekt verwendet (Fenster in Browsern) oder im strikten Modus sogar undefiniert.

Es ist zu beachten, dass der Rückruf in den anderen Iterationsmethoden mit Ausnahme der forEach()-Methode einen Rückgabewert haben muss, andernfalls wird undefiniert zurückgegeben.

forEach

forEach() durchläuft das Array und führt die angegebene Funktion für jedes Element im Array aus. Diese Methode hat keinen Rückgabewert.

[].forEach(function(value, index, array) {
    // ...
}, [ thisObject]);

Nach dem Login kopieren

Zusätzlich zum Akzeptieren eines erforderlichen Callback-Funktionsparameters kann forEach auch einen optionalen Kontextparameter (Änderung des this-Zeigers in der Callback-Funktion) (der zweite Parameter) akzeptieren.
Wenn der zweite optionale Parameter nicht angegeben wird, wird stattdessen das globale Objekt verwendet (Fenster im Browser) oder im strikten Modus sogar undefiniert.

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});

alert(sum); // 10

var database = {
  users: ["张含韵", "江一燕", "李小璐"],
  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      console.log("你好，" + user);
    } else {
      console.log("抱歉，"+ user +"，你不是本家人");    
    }
  },
  isValidUser: function (user) {
    return /^张/.test(user);
  }
};

// 给每个人法邮件
database.users.forEach(  // database.users中人遍历
  database.sendEmail,    // 发送邮件
  database               // 使用database代替上面标红的this
);

// 结果：
// 你好，张含韵
// 抱歉，江一燕，你不是本家人
// 抱歉，李小璐，你不是本家

Nach dem Login kopieren

map

map() bezieht sich auf „Mapping“, das eine bestimmte Funktion für jedes Element im Array ausführt und ein Array zurückgibt, das aus den Ergebnissen jedes Funktionsaufrufs besteht.

[].map(function(value, index, array) {
    // ...
}, [ thisObject]);

Nach dem Login kopieren

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

Nach dem Login kopieren

filter

filter()，“过滤”，对数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

array.filter(callback,[ thisObject]);

Nach dem Login kopieren

filter的callback函数需要返回布尔值true或false。
返回值只要是弱等于== true/false就可以了，而非非得返回 === true/false。

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

Nach dem Login kopieren

every

every()，判断数组中每一项都是否满足所给条件，当所有项都满足条件，才会返回true。

array.every(callback,[ thisObject]);

Nach dem Login kopieren

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

Nach dem Login kopieren

some

some()，判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

array.some(callback,[ thisObject]);

Nach dem Login kopieren

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

Nach dem Login kopieren

归并方法

这两个方法相比前面可能稍微复杂一些，它们都会迭代数组中的所有项，然后生成一个最终返回值。这两个方法接收两个参数。

第一个参数callback，函数接受4个参数分别是（初始值total必选，当前值currentValue必选，索引值currentIndex可选，当前数组arr可选），函数需要返回一个值，这个值会在下一次迭代中作为初始值。
第二个参数是迭代初始值（initialValue），参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 对于空数组是不会执行回调函数的。

array. reduce(function(total, currentValue, currentIndex, array) {
    // ...
});

Nach dem Login kopieren

var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

Nach dem Login kopieren

reduceRight

reduceRight()和reduce()相比，用法类似，差异在于reduceRight是从数组的末尾开始实现的。

array.reduceRight(callback,[ thisObject]);

Nach dem Login kopieren

var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
},200);
console.log(flag);  // 3
console.log(flag_1);  // 43

Nach dem Login kopieren