JavaScript 배열 방법 설명

시작하자!

1. 연결()

이 배열이 다른 배열 및/또는 값과 결합된 새 배열을 반환합니다.

const fruits = ['🍉', '🍎', '🍒', '🍌'];
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

// 1. concat()
const food = fruits.concat(vegetables); // ["🍉", "🍎", "🍒", "🍌", "🧅", "🌽", "🥕", "🥑"]

2. copyWithin()

배열 내의 배열 요소 시퀀스를 복사합니다.

// 2. copyWithin()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruitsCopy = fruits.copyWithin(0, 2); // ["🍒", "🍌", "🍒", "🍌"]

3. 모든()

이 배열의 모든 요소가 테스트 기능을 충족하면 true를 반환합니다.

// 3. every()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const allBananas = fruits.every(fruit => fruit === '🍌'); // false

4. 채우기()

시작 인덱스에서 끝 인덱스까지 배열의 모든 요소를 ​​정적 값으로 채웁니다.

// 4. fill()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const lemons =  fruits.fill('🍋'); // ["🍋", "🍋", "🍋", "🍋"]

5. 필터()

제공된 필터링 함수가 반환하는 호출 배열의 모든 요소를 ​​포함하는 새 배열을 반환합니다true.

// 5. filter()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const onlyBananas = ['🍉', '🍎', '🍌', '🍌'].filter(fruit => fruit === '🍌'); // ["🍌", "🍌"]

6. 찾기()

배열의 일부 요소가 테스트 기능을 만족하는 경우 배열에서 발견된 값element을 반환하고, 발견되지 않은 경우 undefined를 반환합니다.

// 6. find()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherry = fruits.find(fruit => fruit === '🍒'); // "🍒"

7. 인덱스 찾기()

배열의 요소가 테스트 기능을 만족하는 경우 배열에서 찾은 인덱스를 반환하고, 찾지 못하면 -1를 반환합니다.

// 7. findIndex()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const cherryIndex = fruits.findIndex(fruit => fruit === '🍒'); // 2

8. forEach()

배열의 각 요소에 대한 함수를 호출합니다.

// 8. forEach()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

vegetables.forEach(vegetable => console.log(vegetable));
// "🥦"
// "🌽"
//  "🥕"
//  "🥑"

9. 포함()

배열에 값이 포함되어 있는지 확인하여 true 또는 false를 적절하게 반환합니다.

// 9. includes()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const includesCorn = vegetables.includes('🌽'); // true
const includesTomato = vegetables.includes('🍅'); // false

10. 조인()

배열의 모든 요소를 ​​문자열로 결합합니다.

// 10. join()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const vegetablesGroup = vegetables.join(''); // "🥦🌽🥕🥑"

11. 지도()

이 배열의 모든 요소에 대해 함수를 호출한 결과를 포함하는 새 배열을 반환합니다.

// 11. map()
const vegetables = ['🧅', '🌽', '🥕', '🥑'];

const doubledVegetables = vegetables.map(vegetable => vegetable + vegetable); 
// ["🥦🥦", "🌽🌽", "🥕🥕", "🥑🥑"]

12. 푸시()

배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

// 12. push()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.push('🥝'); // ["🍉", "🍎", "🍒", "🍌", "🥝"]

13. 리버스()

배열 요소의 순서를 반대로 합니다.

// 13. reverse()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const fruits = ['🍉', '🍎', '🍒', '🍌'];

const reversedFruits = fruits.reverse(); // ["🍌", "🍒", "🍎", "🍉"]

14. 슬라이스()

호출 배열의 섹션을 추출하고 새 배열을 반환합니다.

// 14. slice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.slice(2); // ["🍒", "🍌"]

15. 일부()

이 배열의 하나 이상의 요소가 제공된 테스트 기능을 충족하는 경우 true를 반환합니다.

// 15. some()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

const bananaExists = fruits.some(fruit => fruit === '🍌')); // true

16. 정렬()

배열의 요소를 제자리에 정렬하고 배열을 반환합니다.

// 16. sort()
const fruits = ['🍉', '🍎', '🍒', '🍌', '🍉', '🍉', '🍒', '🍎', '🍌'];
fruits.sort(); // ["🍉", "🍉", "🍉", "🍌", "🍌", "🍎", "🍎", "🍒", "🍒"]

17. 스플라이스()

배열에서 요소를 추가 및/또는 제거합니다.

// 17. splice()
const fruits = ['🍉', '🍎', '🍒', '🍌'];

fruits.splice(2, 1, '🥝'); // ["🍉", "🍎", "🥝", "🍌"]

이 글이 마음에 드셨다면 ❤️ 꼭 눌러주세요.

즐거운 코딩! ❤️