事实上呢?数组和数组的迭代函数对于初学者来说都会感到困惑,所以我将试着为每个简化问题,最后提出的问题是:你想要返回什么?
为每个现有的东西返回一个东西:map()
只返回一些现有的东西:filter()
只返回一个东西:reduce()
不要返回任何东西,而是对每个已存在的东西做一些事情:forEach()
接下来一个个介绍这些数组相关的函数,并且使用一个非箭头函数示例,另外同时用一个箭头函数的示例。
map()
如果你有一个数组,燕且希望对该数组中的每一项执行一些操作,返回一个带有新值的数组,那么使用map()
是最合适不过。这里有一个简单的函数,它接受数组并将数组每个项做翻倍运算:
const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) { return item * 2; }); console.log(newArray); // -> [2, 4, 6]
使用ES6的箭头函数:
const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2); console.log(newArray); // -> [2, 4, 6]
注意:使用新的箭头函数语法,我们不需要使用function
、return
关键词或者花括号{}
。这是因为箭头函数提供了像这样的simple()
函数的隐式返回。你可以从Wes Bos阅读更多关于箭头函数的信息。
filter()
filter()
可能是最容易理解的数组函数,因为它的命名非常好。filter()
接受一系列的值,对每个值执行一个函数或比较,然后返回一个新的数组。这些值通过它的测试(我们称之为truthy值)。
这里有一个示例,从一个数组中取出大于5
的数,然后返回一个符合条件的新数组:
const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) { return item > 5; }); console.log(newArray); // -> [9, 42]
使用ES6的箭头函数:
const newArray = originalArray.filter(item => item > 5);
reduce()
有时候你有一个系列的值,但你只想从它们当中返回一个新东西。数组中的reduce()
函数会对数组中的每个项目执行一个函数或比较,然后对所谓的累加器执行一些操作。这是一个更容易用一个例子来描述的函数,因为它描述的术语和函数本身一样让人困惑。
假设你有名字的数组,你想数一下Bob
这个名字出现的次数:
const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) { if (item === "Bob") { return accumulator + 1; } else { return accumulator; } }, 0); console.log(numberOfBobs); // -> 3
使用ES6的箭头函数:
const numberOfBobs = originalArray.reduce((accumulator, item) => { if (item === "Bob") { return accumulator + 1; } else { return accumulator; } }, 0);
正如你看到的一样,这个箭头函数并没有节省我们的时间,因为我们必须为函数提供两个参数,然后在返回之前有逻辑,所以我们仍需要花括号{}
。
在reduce()
函数末尾的0
是我们累加器的开始值,如果我们遇到的值是Bob
,则添加1
,否则我们将返回当前的累加器。如果你不返回任何东西,那么下一次运行该函数的时候将返回undefined
。
forEach()
有时,你会有一系列想要处理的值,但不是需要跟踪每个函数调用的返回值。这就是forEach()
사실 위로? 배열과 배열에 대한 반복 함수는 초보자에게 혼란을 줄 수 있으므로 각각에 대한 문제를 단순화하려고 노력할 것이며 마지막 질문은 다음과 같습니다. 무엇을 반환하고 싶습니까?
Introduction
filter()
forEach()
다음으로 이러한 배열 관련 함수를 하나씩 소개하고 화살표가 아닌 것을 사용하겠습니다. 함수 예제를 사용하고 화살표 함수 예제도 사용합니다. 기존 항목 각각에 대해 새 항목 반환: map()
map()
을 사용하는 것이 가장 적합합니다. 다음은 배열을 가져와 각 항목을 두 배로 만드는 간단한 함수입니다. const originalArray = [1, 2, 3]; originalArray.forEach(function(item) { doSomething(item); });
originalArray.forEach( item => doSomething(item); );
return
키워드 또는 중괄호 {}
. 이는 화살표 함수가 이와 같은 simple()
함수로부터 암시적 반환을 제공하기 때문입니다. Wes Bos에서 화살표 기능에 대해 자세히 알아볼 수 있습니다. 🎜🎜기준을 충족하는 일부 기존 배열 항목만 포함하는 새 배열을 반환합니다. filter()
🎜🎜filter()
는 아마도 이해하기 가장 쉬운 배열 함수일 것입니다. 이름이 잘 지어졌네요. filter()
는 값 목록을 받아 각 값에 대해 함수나 비교를 수행하고 새 배열을 반환합니다. 이러한 값은 테스트를 통과합니다(우리는 이를진실한값이라고 부릅니다). 🎜🎜다음은 배열에서 5
보다 큰 숫자를 가져와 조건을 충족하는 새 배열을 반환하는 예입니다. 🎜arr.map((item, index) => {}) arr.filter((item, index) => {}) arr.reduce((accumulator, item, index) => {}) arr.forEach((item, index) => {})
reduce()
🎜🎜때때로 일련의 값이 있지만 그 값에서 새로운 것을 반환하고 싶을 때가 있습니다. 배열의 reduce()
함수는 배열의 각 항목에 대해 함수나 비교를 수행한 다음 누산기에 대해 일부 작업을 수행합니다. 이는 설명하는 용어가 함수 자체만큼 혼란스럽기 때문에 예제를 통해 설명하기가 더 쉬운 함수입니다. 🎜🎜이름 배열이 있고 Bob
이라는 이름이 나타나는 횟수를 세고 싶다고 가정해 보세요. 🎜rrreee🎜ES6 화살표 함수 사용: 🎜rrreee🎜보시다시피 이 화살표 함수는 함수에 두 개의 매개변수를 제공한 다음 반환하기 전에 논리를 갖춰야 하므로 시간이 절약되지 않습니다. 따라서 여전히 중괄호 {}
가 필요합니다. 🎜🎜reduce()
함수 끝에 있는 0
은 우리가 발견한 값이 Bob
인 경우 누산기의 시작 값입니다. 그런 다음 1
을 추가하세요. 그렇지 않으면 현재 누산기를 반환합니다. 아무것도 반환하지 않으면 다음에 함수를 실행할 때 undefine
이 반환됩니다. 🎜🎜배열의 각 값으로 작업을 수행하지만 아무것도 반환하지 않습니다: forEach()
🎜🎜때때로 처리하고 싶지만 추적할 필요가 없는 일련의 값이 있는 경우가 있습니다. 모든 함수 호출 반환 값. 이것이 forEach()
의 의미입니다. 🎜rrreee🎜ES6 화살표 기능 사용: 🎜rrreee🎜요약🎜🎜간단하고 달콤합니다. 다음은 각 기능을 최대한 단순하게 유지하기 위해 제공하는 가장 간단한 예입니다. 이는 주로 언제 사용해야 하는지 더 쉽게 이해할 수 있도록 하기 위한 것입니다. 이러한 함수로 많은 작업을 수행할 수 있으며 각 함수에는 현재 인덱스도 제공하는 고급 형식이 있습니다. 🎜rrreee🎜관련 권장 사항: 🎜🎜🎜연결 테이블 편집을 구현하는 PHP 배열 함수🎜🎜🎜🎜가장 실용적인 JS 배열 함수 구성🎜🎜🎜🎜일반적으로 사용되는 배열 함수는 무엇인가요🎜🎜🎜🎜🎜🎜위 내용은 배열 함수의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!