minzzl
[Javascript] Array 본문
이 글에서는 Javascript에서의 array에 대해서 알아보도록하겠습니다.
배열(array)이란?
- 이름과 인덱스로 참조되는 값들의 집합
배열을 구성하는 값을 배열의 element라고 하며, 배열의 위치를 가리키는 숫자를 index라고 합니다.
자바스크립트에서 배열의 특징은 아래와 같습니다.
- 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
- 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
- 자바스크립트에서 배열은 Array 객체로 다뤄집니다.
배열 생성
배열을 생성하는 방법은 다음과 같습니다.
var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법
var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
배열의 참조
배열 요소를 참조하고 싶을 때는 [] 연산자를 사용합니다.
var arr = ['minji', 'taeyoun', 'minbeom']
console.log(arr[1]) // taeyoun 출력
배열 요소 추가 및 삭제
예제에서 세 번째 실행문은 배열의 현재 길이보다 더 큰 인덱스에 요소를 저장하려고 합니다.
자바스크립트에서는 이렇게 배열의 길이를 넘는 인덱스에 요소를 저장하는 것을 허용합니다.
이때 배열의 길이는 자동으로 해당 인덱스까지 늘어나게 됩니다.
var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
var element = arr[0]; // 배열의 첫 번째 요소를 읽어서 대입함.
arr[1] = 10; // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.
document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>"); // 배열의 길이를 출력함.
delete arr[2]; // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.
document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다."); // 배열의 길이를 출력함.
추가
1. arr.push(추가할 요소); // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법
삭제 시에는 pop() 함수 및 delete 키워드가 사용가능합니다. 둘은 실행 후 배열 길이에서 차이가 발행합니다. pop의 경우 배열의 길이가 줄어들지만 delete는 element의 삭제를 진행하지만 길이는 변하지 않습니다.
배열 요소 모두 출력
1. for 이용
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
2. for of 이용
for(let fruit of fruits) {
console.log(fruit);
}
console.clear();
3.forEach 를 이용
fruits.forEach(function(fruit,index,array) {
console.log(fruit,index,array);
});
📌arrow function으로 위의 식 표현.
fruits.forEach((fruit) => console.log(fruit));
배열 요소 searcing
1. indexOf : find the index / 배열 안에 어떤 값이 몇번째 인덱스에 있는지 알고 싶을 때 사용할 수 있음.
console.log(fruits);
console.log(fruits.indexOf('red')); // -1을 반환 false
console.log(fruits.<indexOf('lemon')); // 2
2. includes : 배열에 아이템이 있는지 없는지 리턴
console.log(fruits.includes('kiwi')); // false
console.log(fruits.includes('strawberry')); //true
3.lastIndexOf : 값은 값이 배열 안에 함께 들어있을 때, 맨 뒤에 있는 같은 값의 index 값을 출력 해줌
console.clear();
fruits.push('strawberry');
console.log(fruits);
console.log(fruits.indexOf('strawberry')); //0
console.log(fruits.lastIndexOf('strawberry')); //6
배열 요소 모두 묶어 string으로 만들기
join()
{
const fruits = ['apple', 'banana', 'orange'];
const str = fruits.join(', ');
console.log(str)
}
string에서 분간자 기준으로 배열 만들기
split()
{
const fruits = 'apple, kiwi, bnanan, cherry';
const arr = fruits.split(',');
console.log(arr)
}
배열 요소 반대로 정렬
reverse()
{
const array = [1, 2, 3, 4, 5];
const reverse_array = array.reverse();
console.log(reverse_array)
}
배열 요소 특정 범위 index 를 새로운 배열에 할당
slice()
{
const array = [1, 2, 3, 4, 5];
const slice_array = array.slice(2, 5)
console.log(slice_array)
}
배열 요소 중 특정 값 찾아서 새로운 배열에 넣기
find()
{
class Student{
constructor(name, age, enrolled, score){
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('F', 18, true, 88),
]
// const arr = [];
// students.forEach((student) => {
// if (student.score === 90){
// arr.push(student)
// }
// })
// console.log(arr)
const result1 = students.find(function(student, index){
return student.score === 90;
})
console.log(result1);
const result2 = students.find(student => student.score === 90)
console.log(result2);
}
배열 요소 중 특정 값에 해당하는 요소들 새로운 배열에 넣기
filter()
{
// const result = [];
// students.forEach(student => {
// if(student.enrolled)
// result.push(student)
// })
// console.log(result)
const result = students.filter(student => student.enrolled);
console.log(result)
}
배열 요소 중 특정 key의 모든 value 새로운 배열에 할당
map()
{
const result = students.map(student => student.score);
console.log(result)
}
배열 요소 중 특정 값이 1개라도 있는지 확인
some()
{
const result = students.some(student => student.score < 50);
console.log(result)
}
배열 요소의 평균 구하기
reduce()
{
const result = students.reduce((prev, curr) => prev + curr.score, 0)
console.log(result / students.length)
// reduceRigth은 거꾸로 간다.
}
* 아래의 글들을 참고하여 작성하였습니다.
https://intrepidgeeks.com/tutorial/dream-code-ellyjs-content-sorting-9-10-kinds-of-array-functions
http://www.tcpschool.com/javascript/js_array_basic
'프로젝트 > 자바스크립트' 카테고리의 다른 글
[Javascript] 비동기처리 callback, promise, aync/await (0) | 2022.10.09 |
---|---|
[Javascript] JSON (0) | 2022.10.09 |
[Javascript] Class vs Object (0) | 2022.10.08 |
[Javascript] operator와 loop,if (0) | 2022.10.08 |