JavaScript - Array Iteration

forEach()

각 배열 요소에 대해 한 번씩 함수(콜백 함수)를 호출합니다.

• 항목 값
• 아이템 인덱스
• 어레이 자체

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

 

 

 

 

map()

이 함수는 3개의 인수를 사용합니다.

• 항목 값
• 아이템 인덱스
• 어레이 자체

콜백 함수가 값 매개변수만 사용하는 경우 인덱스 및 배열 매개변수를 생략할 수 있습니다.

<p id="demo"></p>

<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
  return value * 2;
}
</script>

90,8,18,32,50

 

 

 

filter()

테스트를 통과하는 배열 요소로 새 배열을 만듭니다.

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

45,25

 

 

 

 

 

indexOf()

배열에서 요소 값을 검색하고 해당 위치를 반환합니다.

Array.indexOf()항목을 찾을 수 없으면 -1을 반환합니다.

항목이 두 번 이상 있으면 첫 번째 항목의 위치를 ​​반환합니다.

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

Apple is found in position 1

3

 

 

 

 

lastIndexOf()

지정된 요소가 마지막으로 나타나는 위치를 반환합니다.

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

 

 

 

find()

테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환합니다.

• 항목 값
• 아이템 인덱스
• 어레이 자체

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

First number over 18 is 25

 

 

findIndex()

테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환합니다.

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

First number over 18 has index 3

 

 

 

 

Array.from()

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

A,B,C,D,E,F,G

 

 

Keys()

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

0
1
2
3

 

 

 

entries()

다음 키/값 쌍을 반복합니다.

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

0,Banana
1,Orange
2,Apple
3,Mango

 

 

 

includes()

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true