프로그래밍 「 자바스크립트 편」가장 일반적인 Javascript 배열 방법

소개

이 기사에서는 자바 스크립트에서 배열이 무엇인지, 널리 사용되는 배열 방법은 무엇이며 어떻게 사용하는지 설명하겠습니다.

JavaScript 배열은 숫자, 문자열, 객체 또는 기타 배열과 같은 모든 데이터 유형이 될 수 있는 정렬된 요소 모음입니다. 배열은 동적이므로 런타임 중에 요소를 추가하거나 제거하여 크기를 변경할 수 있습니다. 배열 요소를 효율적으로 추가, 제거 및 조작하는 것과 같은 작업을 용이하게 하는 다양한 방법을 제공합니다. 가장 일반적인 배열 방법 5가지를 살펴보고 이를 활용하는 방법을 이해해 보겠습니다

1. Array.prototype.map()을 호출합니다.

이 메서드는 일반적으로 JavaScript에서 배열을 반복하고 지정된 함수를 적용하여 각 요소를 변환하는 데 사용됩니다. 원래 배열의 모든 요소에 대해 제공된 함수를 호출한 결과를 포함하는 새 배열을 만듭니다..map()

이 방법의 예는 다음과 같습니다..map()

// Example 1: Doubling the values in an array
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]


// Example 2: Extracting names from an array of objects
const students = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const studentNames = students.map((student) => {
  return student.name;
});

console.log(studentNames);
// Output: ['Alice', 'Bob', 'Charlie']

2. Array.prototype.filter()

이 메서드는 JavaScript에서 일반적으로 사용되는 또 다른 배열 메서드입니다. 지정된 조건에 따라 기존 배열에서 요소를 필터링하여 새 배열을 만들 수 있습니다. 결과 배열에는 콜백 함수에 정의된 조건을 전달하는 요소만 포함됩니다.filter()

이 방법의 예는 다음과 같습니다..filter()

// Example 1: Filtering even numbers from an array
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((num) => {
  return num % 2 === 0;
});

const numbersGreaterThanFive= numbers.filter((num) => {
  return num > 5;
});

console.log(evenNumbers,numbersGreaterThanFive);
// Output: [ 2, 4, 6, 8, 10 ] [ 6, 7, 8, 9, 10 ]

// Example 2: Filtering students based on their grades
const students = [
  { id: 1, name: 'Alice', grade: 'A' },
  { id: 2, name: 'Bob', grade: 'B' },
  { id: 3, name: 'Charlie', grade: 'C' },
  { id: 4, name: 'David', grade: 'A' },
];

const highAchievers = students.filter((student) => {
  return student.grade === 'A';
});

console.log(highAchievers);
// Output: [{ id: 1, name: 'Alice', grade: 'A' }, { id: 4, name: 'David', grade: 'A' }]

3. Array.prototype.sort()

이 메서드는 배열의 요소를 제자리에 정렬할 수 있는 JavaScript의 강력한 배열 메서드로, 원래 배열을 수정합니다. 기본적으로 이 메서드는 변환된 문자열 값에 따라 배열 요소를 오름차순으로 정렬합니다. 그러나 사용자 지정 정렬 함수를 제공하여 고유한 정렬 논리를 정의할 수 있습니다..sort().sort()

다음은 메서드의 사용법을 보여 주는 예제입니다..sort()

// Example: Sorting an array of objects based on a property
const students = [
  { id: 1, name: 'Alice', grade: 'B' },
  { id: 2, name: 'Bob', grade: 'A' },
  { id: 3, name: 'Charlie', grade: 'C' },
];

students.sort((a, b) => {
  return a.grade.localeCompare(b.grade);
});

console.log(students);
/*
Output:
[
  { id: 2, name: 'Bob', grade: 'A' },
  { id: 1, name: 'Alice', grade: 'B' },
  { id: 3, name: 'Charlie', grade: 'C' }
]
*/

이 예에는 , , 및 . 이 방법을 사용하고 비교 함수를 인수로 전달합니다. compare 함수는 메서드를 사용하여 두 객체의 속성을 비교합니다. 학생 배열이 성적에 따라 오름차순으로 정렬되도록 합니다.studentsidnamegrade.sort()(a, b) => { return a.grade.localeCompare(b.grade) }gradelocaleCompare()

이 방법은 매우 다재다능하며 다양한 데이터 유형 또는 복잡한 객체의 배열을 정렬하는 데 사용할 수 있습니다. 사용자 지정 정렬 기능을 제공하여 특정 요구 사항에 맞게 고유한 정렬 논리를 정의할 수 있습니다..sort()

4. Array.prototype.shift():

이 메서드는 배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다. 원래 배열을 수정하여 모든 후속 요소를 더 낮은 인덱스로 이동합니다.shift()

이 방법의 예는 다음과 같습니다..shift()

let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.shift();
console.log(removedFruit); // Output: 'apple'
console.log(fruits); // Output: ['banana', 'orange']

5. Array.prototype.unshift():

이 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가합니다. 원래 배열을 수정하고 배열의 새 길이를 반환합니다.unshift()

이 방법의 예는 다음과 같습니다..unshift()

let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('grape');
console.log(fruits); // Output: ['grape', 'apple', 'banana', 'orange']