Autor: Dmitri Pavlutin
Übersetzer: Front-end Xiaozhi
Quelle: dmitripavlutin.com
Gefällt mir und schauen Sie es sich noch einmal an, um eine Gewohnheit zu entwickelnDieser Artikel
GitHubhttps://github.com/qq44924588... wurde eingefügt und viele meiner früheren hochgelobten Artikel wurden ebenfalls zusammengestellt. Willkommen bei Star and Perfect. Sie können sich während des Interviews auf die Testpunkte beziehen. Ich hoffe, wir können gemeinsam etwas lernen.
Array ist eine weit verbreitete Datenstruktur in JS. Array-Objekte bieten eine große Anzahl nützlicher Methoden wie array. forEach(), array.map() usw. zum Betreiben von Arrays.
Im tatsächlichen Kampf weiß ich oft nicht, welche Operationen auf Arrays möglich sind und welche Methode dementsprechend besser zu verwenden ist. Deshalb listet dieser Artikel 15 gängige Datenmethoden auf, mit denen wir unser Gedächtnis überprüfen und stärken können.
for..of Schleifefor(const item of items) durchläuft die Array-Elemente und durchläuft die colors-Liste wie folgt:
const colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'Tipp:
Wir können die break-Anweisung verwenden, um die Durchquerung jederzeit zu stoppen.
for Schleifen for(let i; i < array.length; i++) Schleife durch Array-Elemente unter Verwendung einer inkrementierenden Indexvariablen.
for erfordert normalerweise das Erhöhen der Variable index in jeder Schleife
const colors = ['blue', 'green', 'white'];
for (let index = 0; index < colors.length; index++) {
const color = colors[index];
console.log(color);
}
// 'blue'
// 'green'
// 'white'indexDie Variable wird von 0 auf colors.length-1 erhöht. Diese Variable wird verwendet, um über den folgenden Index auf Elemente zuzugreifen: colors [index].
Tipps
Wir können die break-Anweisung verwenden, um die Durchquerung jederzeit zu stoppen.
array.forEach()-Methode Die array.forEach(callback)-Methode iteriert über Array-Elemente, indem sie die Funktion callback für jedes Array-Element aufruft.
Bei jedem Durchlauf wird callback(item [, index [, array]]) mit den folgenden Parametern aufgerufen: dem aktuellen Durchlaufelement, dem aktuellen Durchlaufindex und dem Array selbst.
const colors = ['blue', 'green', 'white'];
colors.forEach(function callback(value, index) {
console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2Tipp:
Wir können die array.forEach() Iteration nicht unterbrechen.
Array.map()Methodearray.map(callback) Methode erstellt ein neues Array, indem sie das Ergebnis mit callback für jedes Array-Element aufruft.
callback(item[, index[, array]]) wird bei jedem Durchlauf mit Argumenten aufgerufen: dem aktuellen Element, dem Index und dem Array selbst und sollte das neue Element zurückgeben.
Wie unten gezeigt, erhöhen wir jedes Array-Element 1:
const numbers = [0, 2, 4];
const newNumbers = numbers.map(function increment(number) {
return number + 1;
});
newNumbers; // => [1, 3, 5]<p><strong>Tipp: </strong></p>
<p><code>array.map()</code>Erstellen Sie ein neues Mapping-Array, ohne das zu ändern ursprüngliches Array. </p>
<h4>2.2 <code>Array.from()</code>Methoden Die Methode </h4>
<p><code>Array.from(arrayLike[, callback])</code> erstellt ein neues Array, indem sie das Ergebnis mit <code>callback</code> für jedes Array-Element aufruft. </p>
<p>In jeder Iteration wird <code>callback(item[, index[, array]])</code> mit Argumenten aufgerufen: dem aktuellen Element, dem Index und dem Array selbst und sollte das neue Element zurückgeben. </p>
<p>Wie unten gezeigt, erhöhen wir <code>1</code> für jedes Array-Element: </p>
<pre class="brush:php;toolbar:false">const numbers = [0, 2, 4];
const newNumbers = Array.from(numbers,
function increment(number) {
return number + 1;
}
);
newNumbers; // => [1, 3, 5]Tipp:
Array.from()Erstellen Sie eine neue Zuordnung Array, ohne das ursprüngliche Array zu ändern. Array.from() eignet sich besser für die Zuordnung von Array-ähnlichen Objekten. Array.reduce()-Methode array.reduce(callback[, initialValue]) vereinfacht das Array in einen Wert, indem sie die Funktion callback aufruft.
Das in jeder Iteration verwendete callback(accumulator, item[, index[, array]]) wird mit folgenden Argumenten aufgerufen: Akkumulator, aktuelles Element, Index und das Array selbst und sollte den Akkumulator zurückgeben.
Das klassische Beispiel ist das Summieren einer Reihe von Zahlen:
const numbers = [2, 0, 4];
function summarize(accumulator, number) {
return accumulator + number;
}
const sum = numbers.reduce(summarize, 0);
sum; // => 6Im ersten Schritt initialisieren Sie accumulator auf 0. Rufen Sie dann die Funktion summary für jedes Array-Element auf, das die Summe der Zahlen akkumuliert.
Tipp:
Wenn initialValue nicht zum Festlegen des Anfangswerts verwendet wird, wird standardmäßig das erste Element des Arrays als Anfangswert verwendet.
array.concat()Methode array.concat(array1[, array2, ...])Verbinden Sie ein oder mehrere Arrays mit dem ursprünglichen Array. Verketten Sie zwei Arrays wie unten gezeigt:
const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const everyone = heroes.concat(villains); everyone // ["小智", "前端小智", "老王", "小三"]
Tipp:
concat()Erstellen Sie ein neues Array, ohne das ursprüngliche Array zu ändernarray.concat(array1 [，array2，...]) Akzeptiert die Verkettung mehrerer Arrays. Wir verwenden den Erweiterungsoperator zusammen mit Array-Literalen, um Arrays zu verbinden: [...array1, ...array2].
const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const names = [...heroes, ...villains]; names; // ["小智", "前端小智", "老王", "小三"]
Tipp:
[...arr1, ...arr2, ...arrN]: Wir können den Spread-Operator verwenden, um die erforderliche Anzahl von Arrays zu verbinden.
array.slice() 方法array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。
const names = ["小智", "前端小智", "老王", "小三"] const heroes = names.slice(0, 2) const villains = names.splice(2) heroes // ["小智", "前端小智"] villains // ["老王", "小三"]
提示：
array.slice() 创建一个新数组，而不改变原始数组。
拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：
const colors = ['white', 'black', 'gray']; const clone = [...colors]; clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示：
[...array] 创建一个浅拷贝。
array.concat()方法[].concat(array)是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray']; const clone = [].concat(colors); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示：
[].concat(array) 创建一个浅拷贝。
array.slice() 方法array.slice())是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray']; const clone = colors.slice(); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示：
colors.slice() 创建一个浅拷贝。
array.includes() 方法array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。 可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：
const numbers = [1, 2, 3, 4, 5]; numbers.includes(2); // => true numbers.includes(99); // => false
array.find() 方法array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
如下所示，找到数组中的第一个偶数：
const numbers = [1, 2, 3, 4, 5];
function isEven(number) {
return number % 2 === 0;
}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2array.indexOf() 方法array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。
如下所示，找到前端小智的索引：
const names = ["小智", "前端小智", "老王", "小三"]
const index = names.indexOf('前端小智')
index // 1提示：
array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。array.every() 方法如果每个项都通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示，确定数组是否只包含偶数：
const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];
function isEven(number) {
return number % 2 === 0;
}
evens.every(isEven); // => true
numbers.every(isEven); // => falsearray.some() 方法如果每个项只要一下通过predicate 检查，则array.every(predicate)返回true。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：确定数组是否至少包含一个偶数：
const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];
function isEven(number) {
return number % 2 === 0;
}
numbers.some(isEven); // => true
odds.some(isEven); // => falsearray.filter() 方法array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。
如下所示：将一个数组过滤为仅包含偶数：
const numbers = [1, 5, 7, 10];
function isEven(number) {
return number % 2 === 0;
}
const evens = numbers.filter(isEven);
evens; // => [10]提示：
array.filter() 创建一个新数组，而不改变原始数组。
array.push() 方法array.push(item1 [...，itemN]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。
如下所示，在names 数组的末尾添加 '小智'
const names = ['小智']
names.push('前端小智')
names // ["小智", "前端小智"]提示：
array.push() 会改变原数组array.push(item1, item2, ..., itemN) 可以添加多个元素。array.unshift() 方法array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度
const names = ['小智']
names.unshift('前端小智')
names // ["前端小智", "小智"]提示：
array.unshift() 会改变原数组array.unshift(item1, item2, ..., itemN) 可以添加多个元素。可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。
在数组末尾追加一个项:
const names = ['小智', '大治'] const names2 = [...names, '王大冶'] names2 // ["小智", "大治", "王大冶"]
在数组的开头追加一个项:
const names = ['小智', '大治'] const names2 = [ '王大冶', ...names ] names2 // ["王大冶", "小智", "大治"]
在任何索引处插入元素：
const names = ['小智', '大治'] const indexToInsert = 1 const names2 = [ ...names.slice(0, indexToInsert), '前端小智', ...names.slice(indexToInsert) ] names2 // ["小智", "前端小智", "大治"]
array.pop() 方法array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：
const colors = ['blue', 'green', 'black']; const lastColor = colors.pop(); lastColor; // => 'black' colors; // => ['blue', 'green']
提示：
array.pop() 会改变原数组。
array.shift() 方法array.shift()方法从数组中删除第一个元素，然后返回该元素。
const colors = ['blue', 'green', 'black']; const firstColor = colors.shift(); firstColor; // => 'blue' colors; // => ['green', 'black']
提示：
array.shift() 会改变原数组。array.shift() 具有O(n)复杂度。array.splice() 方法array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
例如，咱们从索引1处删除2个元素：
const names = ['张三', '李四', '王五', '赵六'] names.splice(1, 2) names // => ["张三", "赵六"]
names.splice(1，2)删除元素'张三'和'赵六'。
names.splice() 可以插入新元素，而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 '小智'：
const names = ['张三', '李四', '王五', '赵六'] names.splice(1, 2, '小智') names // ["张三", "小智", "赵六"]
提示：
array.splice() 会改变原数组。可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。
const names = ['张三', '李四', '王五', '赵六'] const fromIndex = 1 const removeCount = 2 const newNames = [ ...names.slice(0, fromIndex), ...names.slice(fromIndex + removeCount) ] newNames // ["张三", "赵六"]
array.length属性array.length是保存数组长度的属性。 除此之外，array.length是可写的。
如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。
如下所示：使用array.length = 0删除数组中的所有项目：
const colors = ['blue', 'green', 'black']; colors.length = 0; colors; // []
array.splice() 方法array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。
如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：
const colors = ['blue', 'green', 'black']; colors.splice(0); colors; // []
array.fill() 方法array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。
例如，使用用零值填充数组：
const numbers = [1, 2, 3, 4]; numbers.fill(0); numbers; // => [0, 0, 0, 0]
不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。
const length = 3; const zeros = Array(length).fill(0); zeros; // [0, 0, 0]
提示：
array.splice() 会改变原数组。Array.from() 函数Array.from() 有助于初始化带有对象的特定长度的数组：
const length = 4;
const emptyObjects = Array.from(Array(length), function() {
return {};
});
emptyObjects; // [{}, {}, {}, {}]array.flat()方法array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：
const arrays = [0, [1, 3, 5], [2, 4, 6]]; const flatArray = arrays.flat(); flatArray; // [0, 1, 3, 5, 2, 4, 6]
arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。
提示：
array.flat() 创建一个新数组，而不会改变原始数组。
array.sort() 方法array.sort([compare])方法对数组的元素进行排序。
可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：
a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。a等于b，就返回0。a大于b，就返回一个大于0的值。如下所示，对数组 numbers 时行排序
const numbers = [4, 3, 1, 2]; numbers.sort(); numbers; // => [1, 2, 3, 4]
numbers.sort() 以升序对数字进行排序。
使用比较函数，让偶数排在奇数前面：
const numbers = [4, 3, 1, 2];
function compare(n1, n2) {
if (n1 % 2 === 0 && n2 % 2 !== 0) {
return -1;
}
if (n1 % 2 !== 0 && n2 % 2 === 0) {
return 1;
}
return 0;
}
numbers.sort(compare);
numbers; // => [4, 2, 3, 1]提示：
array.sort() 会改变原数组。
推荐教程：《JS教程》
Das obige ist der detaillierte Inhalt von15 gängige Array-Operationen in der JavaScript-Entwicklung. 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)
