반응형
JS에서는 boolean, number, string, null, undefined을 제외하면 모두 객체라는 특징이 있다.
배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다.
1. declaration
const arr1 = new Array();
const arr2 = [1,2];
2. index position
const fruits =['a','b'];
console.log(fruits); // a, b
console.log(fruits[0]);// a | 대괄호 안에 숫자를 기입하면 이를 index로 인식한다.
console.log(fruits[1]);// b
console.log(fruits[fruits.length - 1]);//배열의 마지막 값을 불러올 때
3. looping over an array
//print all fruits
//a. for
for (let i=0;i<fruits.length;i++){
console.log(fruits[i]);
}
//b. for of
for(let value of fruits){ //몰랐던 점 -> for of에서도 let으로 지정해주어야한다.
console.log(value);
}
//c. forEach : 배열의 각 요소마다 action을 부여할 때
fruits.forEach(function (fruit, index, fruits){//(element,index,array[])
console.log(fruit, index, fruits);
})
//위와 같은 anonymous 함수는 arrow function으로 만들 수 있다.
fruits.forEach((fruit) => console.log(fruit));
4.addition, deletion, copy
//push: add an item to the end -> push(new elements) 메소드
fruits.push('c','d');
console.log(fruits); // a, b, c, d
//pop: remove an item from the end -> pop() 메소드 (삭제한 값 반환)
fruits.pop(); // d
fruits.pop(); // c
console.log(fruits); // a, b
//unshift: add an item to the beginning
fruits.unshift('c','d');
console.log(fruits); // c, d, a, b
//shift: remove an item from the beginning (삭제한 값 반환)
fruits.shift(); // c
fruits.shift(); // d
console.log(fruits); // a, b
//note! shift와 unshift는 배열 전체의 순서를 수정하는 작업을 거치므로
//push와 pop보다 느리다는 특징이 있다. 따라서 push와 pop이 더 효율적이라고
//말할 수 있다.
//splice: remove an item by index position
fruits.push('c','d','e');
console.log(fruits); // a, b, c, d, e
fruits.splice(1,1,'f','g');//두 번째 자리에 0을 넣으면 지우지 않고,
//첫 번째 자리에 있는 숫자에 해당하는 배열의 위치의 앞에 요소들이 추가된다.
console.log(fruits); // a, f, g, c, d, e
//combine two arrays
const fruits2 = ['x','y','z'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // a, f, g, c, d, e, x, y, z
5. searching
//indexOf: find the index
console.log(fruits);
console.log(fruits.indexOf('f')); // 1
console.log(fruits.indexOf('p'));// -1 -> 이 배열안에 존재하지 않는다는 것을 의미
//includes: 포함하냐 안하냐에 따라 boolean 값을 반환 (true or false)
console.log(fruits.includes('p')); // false
//lastIndexOf
fruits.push('a');
console.log(fruits); // a, f, g, c, d, e, a
console.log(fruits.indexOf('a')); // 0
console.log(fruits.lastIndexOf('a')); // 6 해당 요소들의 마지막 요소 인덱스를 반환
JS의 Array 객체에 대해 쭉 읽고 정리해보았다.
function print(word){ // 편리한 출력을 위한 함수 작성
console.log(word);
console.log('-----')
}
const ar1 = [1,2,3,4,5];
const ar2 = [-30,-10,-20,-50,-40];
print(ar1.toString());//배열을 문자열의 형식으로 반환
print(ar1.toLocaleString());//배열의 문자열을 지역의 표기 형식에 맞게 변환하여 값을 반환
print(ar1.pop());//배열의 마지막에 위치한 값을 지우고 그 값을 반환
print(ar1.push(5));//배열의 끝에 값을 추가하고, 그 후에 배열의 길이를 반환
print(ar1.concat(ar2));//2개 이상의 배열을 합치고, 그 배열을 반환
print(ar1.join());//제시된 분할자(문자열 형식)로 대상 배열의 요소
//사이사이에 추가. 제시하는 분할자가 없을 시 comma(,)가 추가됨
print(ar1.reverse());//대상 배열의 순서를 뒤집고 그것을 정의하여 반환.
print(ar1.reverse());
print(ar1.shift());//배열의 첫 번째 요소를 지우고 그 값을 반환
print(ar1.unshift(1));//배열의 첫 번째 공간에 값을 넣고, 배열의 길이를 반환.
print(ar1.slice(0,2));//배열의 특정 구역을 복사하여 반환, slice(start,end)
//에서 end에 해당하는 index는 포함하지 않음.
//start 값이 없으면 0부터, end가 없으면 끝까지 적용범위가 확장됨.
print(ar2.sort());//배열의 순서를 정의하여 변화시켜 반환
//sort()안에 순서를 정의하는 함수가 들어갈 수 있으며, 명시되지 않으면
//아스키 코드를 기준으로 순서가 정해짐.
//a와 b에 대한 함수를 구현하여, 그 값이 양수이면 b,a / 음수이면 a,b / 0이면
//위치를 유지함.
print(ar2.splice());//대상 배열의 특정 구간 요소들을 제거하고, 그 값을 반환
//그 사이에 새로운 값을 넣을 수도 있음.
print(ar2.indexOf(-10));//배열에 있는 요소의 위치 index를 반환
print(ar2.lastIndexOf(-20));//가장 마지막 순서에 위치한 해당 요소의 위치
//index를 반환
print(ar2.every(item => {return item % 2 === 0;}));//해당 배열을 이루는
//요소들이 주어진 조건 함수에 모두 만족하는지 boolean 값으로 반환
print(ar2.some(item => {return item % 11 === 0;}));//해당 배열을 이루는
//요소들 중 하나라도 조건 함수에 부합하면 true를 반환
print((ar2.forEach((value)=>console.log(value))));//배열 각각의 요소들에
//특정 함수를 적용
print(ar2.map(item => {return item % 3 === 0;}));//제시된 함수의 조건에
//부합 여부를 배열의 위치마다 boolean 값으로 반환
print(ar2.filter(item => {return item % 3 === 0;}));//제시된 함수의 조건에
//부합하는 요소들을 반환
print(ar2.reduce((a,b) => {return a+b;}));
//특정 함수에 따라 배열의 인덱스를 줄이며 누산을 실행. 자세히 모르겠음.
반응형
'IT > JS' 카테고리의 다른 글
코딩할때 개선할 점 모음 (0) | 2021.07.24 |
---|---|
null의 타입, trim() (0) | 2021.07.22 |
Function (0) | 2021.05.20 |
Class (0) | 2021.05.20 |
Operator, Control flow statement (0) | 2021.05.20 |