간단히 말해, 초보자를 위한 JavaScript 배열

컴퓨터 과학 문제를 해결하는 관건적인 부분은 데이터를 일종 또는 여러 형식(데이터 구조)으로 표현함으로써 데이터에 대해 어떤 조작을 더욱 쉽게 수행하는 것이다.예를 들어 두 갈래로 트리에 표시된 숫자 목록을 효율적으로 조회하여 숫자가 존재하는지 확인할 수 있어 데이터 구조의 의미를 나타낸다.

What is Data Structure?
According to Wikipedia, a data structure is the organization and implementation of values and information. In simple words, data structure is the way of organizing data in an efficient manner.

문제는 대부분의 프로그래밍 언어가 문자열, 숫자, 볼 값, 사전, 모듈, 집합 등 기본적인 데이터 유형을 제공했다.그 중에서 더욱 복잡한 데이터 구조를 구축할 수 있다.JavaScript의 경우 기본 데이터 유형 중 하나가 배열 데이터 유형이므로 초보자에게는 배열을 사용하는 방법을 이해하는 것이 중요합니다.
이 글에서는 JavaScript로 배열을 만드는 방법과 배열을 사용할 때 자주 사용하는 12가지 가장 유행하는 배열 방법을 간단히 살펴본다.배열을 이해하려는 JavaScript 초보자를 위한 글입니다.
가자!💃💃💃
무엇이 수조입니까?
수조는 하나의 데이터 구조로 하나의 항목 (요소) 을 수용할 수 있다.배열의 모든 요소는 색인이라는 위치를 가지고 있습니다.첫 번째 요소에 대해 색인은 보통 0에서 시작합니다.인덱스는 그룹의 속성으로 그룹에 접근할 수 있는 요소입니다.
더욱 구체적으로 말하면 수조는 유사한 목록의 대상으로 length 속성과 정정수 속성을 가지고 색인으로 한다.
배열 만들기
JavaScript 배열은 여러 방법으로 만들 수 있지만 이 문서에서는 세 가지 배열을 만드는 방법을 중점적으로 다룹니다.
배열 문자:
그룹 문자 기호는 그룹의 요소 (쉼표로 구분된 항목 목록) 를 상대방 괄호 ([]) 에 포장합니다.새로 만든 그룹 대상에서 Array 원형에 접근할 수 있는 모든 속성이나 방법입니다.

    const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

    console.log(fruits.length); 
    // 5

배열 구조 함수:Array() 구조 함수를 호출하여 그룹 요소를 매개 변수로 삼아 새로운 그룹 대상을 만들 수 있습니다.구조 함수는 new 키워드를 사용하거나 사용하지 않아도 됩니다. 효과는 기본적으로 같습니다.따라서 다음 내용은 이전 배열 문자와 유사합니다.

const fruits = new Array('banana', 'mango', 'orange', 'apple', 'melon');

console.log(fruits.length); 
// 5

전파 사업자:
spread 조작부호를 사용하여 다른 그룹에서 하나의 그룹을 만들 수 있습니다.확장 연산자는 배열에서 셀 수 있는 객체의 셀 수 있는 요소만 나열하고 세 점(...)으로 나타냅니다.

Note: Spread operator can be used to clone an iterable object or merge iterable objects into one.

const = age [30, 20, 13, 34, 56]
const = combineAge [...age, 3, 7, 10, 24]

console.log(combineAge);
// [30, 20, 13, 34, 56, 3, 7, 10, 24]

배열 요소
JavaScript 배열에 포함할 수 있는 요소의 종류는 제한이 없습니다.JavaScript 배열은 본질적으로 이기종 구조입니다. 모든 데이터 유형의 요소를 포함할 수 있습니다.예를 들어 다음 코드 세그먼트의 수조는 boolean,string,function,number,object 등 다음과 같은 유형의 요소를 포함한다.

const myArray = [true, (a, b) => a + b, 'house', 18, 'jane', {fruit: 'banana'}]

배열은 모든 유형의 요소만 포함할 수 있으므로 이는 배열에 배열을 포함할 수 있음을 의미합니다. 이 경우 일반적으로 다차원 배열(배열 배열 배열)이라고 하며 다음과 같습니다.

// Multidimensional Array
// An array that contains arrays (array of arrays)
const names = [
  ['John', 'Lola', 'Doe','Judith'],
  ['Hillary', 'Chidi', 'Humphrey', 'Mariam'],
  ['Alex', 'Usman', 'Cynthia', 'James']
];

때때로, 당신은 수조가 같은 데이터 형식의 요소를 포함하는 동질적이기를 원합니다.예를 들어 수조의 모든 원소에 대해 산술 연산을 실행해야 한다고 가정한다.스토리지의 요소는 number 유형 이상이어야 성공합니다.

// Array with only strings
const countries = ['kenya', 'nigeria', 'london', 'ghana', 'senegal'];

// Array with only positive integers (numbers)
const scores = [23, 67, 78, 20, 10, 26, 36];

불행하게도 JavaScript 자체에서는 배열이 런타임 시 동일한지 확인할 수 없습니다.그러나 개발자는 어레이를 예상대로 사용하기 전에 필요한 유형 검사를 해야 할 책임이 있다.
JavaScript는 엄격한 형식이 아닙니다. 자바, C++ 또는 다른 엄격한 형식의 언어에서처럼 컴파일할 때 그룹이 포함할 내용 형식을 지정할 수 없습니다.TypeScript와 같은 유형화된 JavaScript 하이퍼집합을 사용하는 경우 컴파일할 때 이 작업을 수행할 수 있습니다.그러나 프로그램이 실행될 때, 특히 외부 원본에서 온 데이터를 사용할 때 실패하기 쉽다.

// TYPESCRIPT EXAMPLE: HOMOGENEOUS ARRAYS (AT COMPILE TIME)
// Array with only strings
const countries: string[] = ['kenya', 'nigeria', 'london', 'ghana', 'senegal'];

// Array with only positive integers (numbers)
const scores: Array<number> = [23, 67, 78, 20, 10, 26, 36];

유행하는 그룹 방법Array 프로토타입에는 많은 스토리지 처리 방법이 포함되어 있습니다.이러한 접근 방식은 대개 스토리지에서 보다 복잡한 작업을 수행하기 위한 토대입니다.
지도 ()
이 방법은 그룹의 모든 요소에 대한 호출이 제공하는 맵 함수의 결과를 포함하는 새로운 그룹을 되돌려줍니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const sweetFruits = fruits.map(fruit => 'sweet ' +  fruit);

console.log(sweetFruits);
// ["sweet banana", "sweet mango", "sweet orange", "sweet apple", "sweet melon"]

const ages = [23, 30, 13, 18, 40];
const doubleAges = ages.map(age => age * 2);

console.log(doubleAges);
// [46, 60, 26, 36, 80]    

forEach()
이 방법은 여러 그룹의 원소를 교체해서 모든 원소를 호출하는 데 사용할 수 있는 리셋 함수입니다.map() 방법과 달리, 리셋 함수가 되돌아오는 값은 보통 무시되고, 이 방법은 새로운 그룹을 만들지 않습니다.그것은 보통 수조의 모든 원소에 따라 부작용이 발생하는 경우에 사용된다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const sweetFruit = [];

fruits.forEach(fruit => {
  sweetFruit.push('sweet' + fruit);
});

// ["sweet banana", "sweet mango", "sweet orange", "sweet apple", "sweet melon"]

필터()
이 방법은 새 그룹을 되돌려줍니다. 이 그룹은 필터 함수로truthy 값을 되돌려주는 요소만 포함합니다.필터 기능은 테스트 조건에 논리를 제공합니다.필터링 함수에서 조건을 지정하지 않은 요소는 버려지고 되돌아오는 새 그룹에 포함되지 않습니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const fruitsWithLongNames = fruits.filter(fruit => {
return fruit.length > 5;
});

// ["banana", "orange"]

가입
이 방법은 그룹의 요소를 단일 문자열에 추가하는 데 사용됩니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.join());
// "banana,mango,orange,apple,melon"

console.log(fruits.join(' - '));
// "banana - mango - orange - apple - melon"

포함()
이 방법은 그룹의 항목에 요소가 포함되어 있는지 확인하고 필요에 따라 true 또는 false을 되돌려줍니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.includes('mango')); // true
console.log(fruits.includes('pineapple')); // false

줄다
수조에서 Reduce 방법을 사용하여 수조의 원소를 하나의 값이나 항목으로 추가합니다.원소의 구화는 수조의 왼쪽에서 오른쪽으로 시작합니다.reduce () 방법은 이해하기 어려운 복잡한 수조 방법 중의 하나일 수 있습니다.
주의: Reduce () 는 가장 강력한 그룹 방법 중의 하나입니다.사실 .reduce()은 .map()과 .filter() 모두 할 수 있는 일을 할 수 있다.

const numbers = [4, 5, 1, 4, 2, 3, 1];
const sumOfNumbers = numbers.reduce((sum, number) => sum + number, 0);

console.log(sumOfNumbers); // 20

indexOf()
이 방법은 그룹에서 지정한 요소의 위치 (인덱스) 를 찾을 수 있도록 되돌려줍니다.그룹에서 원소를 찾을 수 없으면 -1으로 되돌아옵니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.indexOf('melon')); // 4
console.log(fruits.indexOf('pineapple')); // -1

concat()
이 방법은 두 개 이상의 그룹을 연결하는 데 사용됩니다.이 방법은 기존 그룹을 변경하지 않고 새 그룹을 되돌려줍니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const foods = ['yam', 'rice', 'beans', 'potato'];

console.log(fruits.concat(foods));
// ["banana", "mango", "orange", "apple", "melon", "yam", "rice", "beans", "potato"]

밀다
이 방법은 그룹의 끝에 원소를 하나 이상 추가하고 그룹의 새 길이를 되돌려줍니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const fruitsCount = fruits.push('pineapple');

console.log(fruits);
// ["banana", "mango", "orange", "apple", "melon", "pineapple"]

console.log(fruitsCount);
// 6

pop()
이 방법은 그룹에서 마지막 요소를 삭제하고 그 요소를 되돌려줍니다..pop()을 호출하면 원시 그룹의 길이를 줄일 수 있습니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];

console.log(fruits.pop()); // "melon"
console.log(fruits.length); // 4

슬라이스()
이 방법은 그룹의 블록/부분만 가져와서 새 그룹으로 되돌려줍니다.slice() 방법을 사용할 때 startIndex(복제를 시작하는 색인을 뜻함)과 endIndex(절편이 끝나기 전의 색인을 뜻함) 두 개의 매개 변수를 전달한다.
참고 패턴 클론을 생성할 때 매개 변수 없이 이 방법을 호출하는 것은 매우 유용한 기술입니다.Array.prototype에서 직접 호출하면, 그룹 클래스를 그룹으로 변환할 수 있습니다.

// Example 1
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice();

console.log(newNames);
// ["James", "Bola", "Henry", "Abiola", "Musa"]


// Example 2
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice(2);

console.log(newNames);
// ["Henry", "Abiola", "Musa"]


// Example 3
const names = ['James', 'Bola', 'Henry', 'Abiola', 'Musa'];
const newNames = names.slice(1, 3);

console.log(newNames);
// ["Bola", "Henry"]

찾기()
이 방법은 수조에서 제공된 테스트 함수에 정의된 조건을 충족시키는 첫 번째 요소의 값을 되돌려줍니다.

const fruits = ['banana', 'mango', 'orange', 'apple', 'melon'];
const foundFruit = fruits.find(fruit => fruit.length >= 5);

console.log(foundFruit); // "banana"

결론
이 기사에서는 JavaScript 배열을 사용하는 방법과 이들이 가지고 있는 유용한 방법들을 배웠습니다.배열은 JavaScript에서 가장 중요한 데이터 유형 중 하나이며 개발자마다 이를 사용하는 방법을 숙지해야 합니다.
예!나는 네가 이 댓글을 좋아하길 바란다.🍷🍷