저자: Dmitri Pavlutin
번역자: 프론트엔드 Xiaozhi
출처: dmitripavlutin.com
좋아요를 누르고 다시 읽어 습관을 형성하세요이 글
GitHubhttps://github.com/ qq44924588 ... 과거에 높은 평가를 받은 기사의 카테고리가 더 많아졌고, 내 문서와 튜토리얼 자료도 많이 정리되어 있습니다. Star and Perfect에 오신 것을 환영합니다. 인터뷰 중에 검토할 수 있는 시험 포인트를 참고하시면서 함께 배울 수 있기를 바랍니다.GitHubhttps://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法，如array. forEach()、array.map()等来操作数组。
在实战中，我经常对数组可能的操作和相应采用哪个更好的方法不知所措，所以本文就列出 15 种常用数据方法，让咱们重温加强记忆一下。
for..of 循环for(const item of items)循环遍历数组项，如下所示遍历colors列表：
const colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'提示：
咱们可以随时使用break语句停止遍历。
for 循环for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量
const colors = ['blue', 'green', 'white'];
for (let index = 0; index < colors.length; index++) {
const color = colors[index];
console.log(color);
}
// 'blue'
// 'green'
// 'white'index变量从0递增到colors.length-1。此变量用于按以下索引访问项：colors [index]。
提示
咱们可以随时使用break语句停止遍历。
array.forEach() 方法array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
在每次遍历中，都使用以下参数调用callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本身。
const colors = ['blue', 'green', 'white'];
colors.forEach(function callback(value, index) {
console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2提示：
咱们不能中断array.forEach()迭代。
Array.map()方法array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。
如下所示咱们对每个数组元素都递增 1：
const numbers = [0, 2, 4];
const newNumbers = numbers.map(function increment(number) {
return number + 1;
});
newNumbers; // => [1, 3, 5]<p><strong>提示：</strong></p>
<p><code>array.map()</code>创建一个新的映射数组，而不改变原始数组。</p>
<h4>2.2 <code>Array.from()</code>方法</h4>
<p><code>Array.from(arrayLike[, callback])</code>方法通过在每个数组项上使用<code>callback</code> 调用结果来创建一个新数组。</p>
<p>在每个遍历中<code>callback(item[, index[, array]])</code>使用参数调用:当前项、索引和数组本身并且应该返回新项。</p>
<p>如下所示咱们对每个数组元素都递增 <code>1</code>：</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]提示：
Array.from()创建一个新的映射数组，而不改变原始数组。Array.from()更适合从类似数组的对象进行映射。Array.reduce() 方法array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。
在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。
经典示例是对数字数组求和：
const numbers = [2, 0, 4];
function summarize(accumulator, number) {
return accumulator + number;
}
const sum = numbers.reduce(summarize, 0);
sum; // => 6第一步，将accumulator 初始化为0。然后，对每个累加数字和的数组项调用summary函数。
提示：
如果没有使用 initialValue 来设置初始值，则默认使用数组的第一个元素作为初始值。
array.concat() 方法array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示，连接两个数组：
const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const everyone = heroes.concat(villains); everyone // ["小智", "前端小智", "老王", "小三"]
提示：
concat()创建一个新的数组，而不改变原来的数组array.concat(array1 [，array2，...]) 接受多个要连接的数组。咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]。
const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const names = [...heroes, ...villains]; names; // ["小智", "前端小智", "老王", "小三"]
提示：
[...arr1, ...arr2, ...arrN]
array.forEach(), array.map() 등과 같은 유용한 메서드를 많이 제공하여 배열을 작동합니다. 🎜🎜실제 전투에서는 배열에서 가능한 작업과 그에 따라 어떤 방법을 사용하는 것이 더 좋은지 혼란스러울 때가 많습니다. 따라서 이 문서에는 15 일반적인 데이터 방법이 나열되어 있습니다. 메모리. . 🎜for..of 루프for(const item of items) 루프 순회 배열 항목의 경우 다음과 같이 colors 목록을 탐색합니다. 🎜const names = ["小智", "前端小智", "老王", "小三"] const heroes = names.slice(0, 2) const villains = names.splice(2) heroes // ["小智", "前端小智"] villains // ["老王", "小三"]
break 문을 사용하여 언제든지 탐색을 중지할 수 있습니다. 🎜for 루프for(let i; i < array.length; i++) 루프는 증분 인덱스 변수를 사용하여 배열 항목을 반복합니다. . 🎜🎜for는 일반적으로 각 루프에서 index 변수를 증가시켜야 합니다. 🎜const colors = ['white', 'black', 'gray']; const clone = [...colors]; clone; // => ['white', 'black', 'gray'] colors === clone; // => false🎜<code>index</code> 변수는 <code>0</code>에서 증가합니다. >를 <code>colors.length-1</code>로 변경하세요. 이 변수는 색인(<code>colors[색인]</code>)으로 항목에 액세스하는 데 사용됩니다. 🎜🎜🎜Tips🎜🎜🎜<code>break</code> 문을 사용하여 언제든지 순회를 중지할 수 있습니다. 🎜<h4>1.3 <code>array.forEach()</code> 메서드</h4>🎜<code>array.forEach(callback)</code> 메서드는 각 배열 항목에서 <code>callback 함수를 사용하여 배열 항목을 반복합니다. 🎜🎜각 반복에서 현재 반복 항목, 현재 반복 인덱스 및 배열 자체 매개변수를 사용하여 <code>callback(item [, index [, array]])</code>를 호출합니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const colors = ['white', 'black', 'gray']; const clone = [].concat(colors); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
array.forEach() 반복을 중단할 수 없습니다. 🎜Array.map() 메서드array.map(callback) 메서드 전달 Create 각 배열 항목에 대한 콜백 호출 결과를 사용하여 새 배열을 만듭니다. 각 순회에서 🎜🎜callback(item[, index[, array]])는 인수(현재 항목, 인덱스 및 배열 자체)와 함께 호출되며 새 항목을 반환해야 합니다. 🎜🎜아래 표시된 대로 각 배열 요소를 1씩 증가시킵니다. 🎜const colors = ['white', 'black', 'gray']; const clone = colors.slice(); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
array.map()은 변경하지 않고 새 매핑 배열을 생성합니다. 원래 배열. 🎜Array.from()메서드Array.from(arrayLike[, callback])콜백을 사용하는 메소드 > 결과를 호출하여 새 배열을 만듭니다. 🎜🎜각 반복에서 callback(item[, index[, array]])는 인수(현재 항목, 인덱스 및 배열 자체)와 함께 호출되며 새 항목을 반환해야 합니다. 🎜🎜아래에 표시된 것처럼 각 배열 요소를 1씩 증가시킵니다. 🎜const numbers = [1, 2, 3, 4, 5]; numbers.includes(2); // => true numbers.includes(99); // => false
Array.from()새 매핑 만들기 원래 배열을 변경하지 않고 배열합니다. Array.from()은 배열과 같은 객체에서 매핑하는 데 더 적합합니다. Array.reduce() 메서드array.reduce(callback [ ,initialValue])콜백 함수를 호출하여 배열을 단일 값으로 줄입니다. 🎜🎜각 반복의 콜백(accumulator, item[, index[, array]])는 누산기, 현재 항목, 색인 및 배열 자체와 같은 매개변수를 사용하여 호출되며 누산기를 반환해야 합니다. 🎜🎜전형적인 예는 숫자 배열의 합을 계산하는 것입니다. 🎜const numbers = [1, 2, 3, 4, 5];
function isEven(number) {
return number % 2 === 0;
}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2accumulator를 0으로 초기화합니다. 그런 다음 숫자의 합을 누적하는 각 배열 항목에 대해 summary 함수를 호출합니다. 🎜🎜🎜팁: 🎜🎜🎜initialValue를 사용하여 초기값을 설정하지 않는 경우 기본적으로 배열의 첫 번째 요소가 초기값으로 사용됩니다. 🎜array.concat() 메서드array.concat(array1[, array2, ... ] )하나 이상의 배열을 원래 배열에 연결합니다. 아래와 같이 두 배열을 연결합니다. 🎜const names = ["小智", "前端小智", "老王", "小三"]
const index = names.indexOf('前端小智')
index // 1concat()원래 배열을 변경하지 않고 새 배열을 만듭니다. array.concat(array1 [, array2,...]) 여러 배열을 연결할 수 있습니다. [...array1, ...array2]. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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); // => false</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜팁: 🎜🎜🎜<code>[...arr1, ...arr2, ...arrN]: 스프레드 연산자를 사용하여 필요한 수의 배열을 연결할 수 있습니다. 🎜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教程》
위 내용은 JavaScript 개발의 15가지 일반적인 배열 연산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
