Zusammenfassung der ES5- und ES6-Array-Methoden

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"

Ä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"

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])

• 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号位开始搜索)

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

• 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 (未找到)

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]);

• 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
);

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

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]);

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

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

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

filter

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

array.filter(callback,[ thisObject]);

• 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]

every

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

array.every(callback,[ thisObject]);

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

some

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

array.some(callback,[ thisObject]);

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

归并方法

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

• 第一个参数callback，函数接受4个参数分别是（初始值total必选，当前值currentValue必选，索引值currentIndex可选，当前数组arr可选），函数需要返回一个值，这个值会在下一次迭代中作为初始值。

• 第二个参数是迭代初始值（initialValue），参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce

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

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

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

reduceRight

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

array.reduceRight(callback,[ thisObject]);

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

相关推荐：

ES6系列之声明变量let与const

Es6数组的扩展

ES5实例详解javascript多种继承方式

Das obige ist der detaillierte Inhalt vonZusammenfassung der ES5- und ES6-Array-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!