IT/JS

Array

프티 2021. 5. 20. 22:17
반응형

JS에서는 boolean, number, string, null, undefined을 제외하면 모두 객체라는 특징이 있다.

배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다.

Object 리터럴과 Array 리터럴의 프로토타입

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