ㅇTL

array 본문

html, javascript

array

정노르레기 2021. 6. 14. 20:14

*여러타입 한번에 한 배열에 담을 수 있슴 ..... ; -> 근데그러지 않는게 조음.. 웅웅..

배열 선언

1. const arr1 = new Array();

2. const arr2 = [ 1,2 ] ; //이게 더 흔하게 쓰임

 

접근 -> [인덱스] 로 !! ( 0부터 ~ arr.length-1 ^^ )

arr2[0]; 이런식으로

 

loop, 각각 출력

1.

for (let i = 0 ; i< arr.length ; i++){

console.log(arr[i]);

}

2.

for( let a of arr){

console.log( a );

}

 

3. forEach 사용 !

foreach 는 배열안에 들어있는 벨류들마다 내가전달한 함수대로 출력한다

forEach(콜백함수(value, index, array) => void ) 이렇게 콜백함수가 들어가는 것이다

 

근까 배열.forEach 하면

그함수에 value, index, array 를 매개변수로 가진 콜백함수가 인자로 들어간다

그리고 그 배열에 value 개수만큼 foreach 함수가 반복된다

그리구 콜백함수의 value, index, array 은 foreach함수 내에서 그 배열의 value, index, array 가 된다

그리구 array는 잘 쓰지 않는다

ex

const fruit = [1,2,3,4];

fruit.forEach(function(a, index, array){

console.log('de'); //4번 반복됨

console.log(a, index, array); //fruit 의 value-해당 index-fruit 전체가 다 출력되게 됨

})

 

=>

fruit.forEach((a, index)=>console.log(a, index));

fruit.forEach((a)=>console.log(a));

 

이렇게 이름없는 function 은 이렇게줄여쓸수잇긔 !!

 

 

요소 넣고 빼고 복사하기

1. 맨뒤에 add

배열이름.push(머시기);

2. 맨 뒤에꺼 remove

배열이름.pop();(-> 나가는 애가 리턴됨)

 

3. 앞에 add배열이름.unshift(넣을것들);4.앞에꺼 remove배열이름.shift();-> shift 와 unshift 는 정말정말 느리다 -> 되도록 사용노노 pop 은 정말정말 빠릅니다왜냐면 앞에넣으려면 뒤에꺼를 다 한개씩 뒤에 넣어야하기때문이다 전체가 다 움직여야하기때문이다 ㄷ ㄷ노답

 

5. 지정된 포지션을 remove

배열이름.splice(시작 index, 개수);

개수말안하면 해당 index부터 끝까지 다 지워버림!

.splice(index, 개수, 넣을친구들 .. 여러개가능);

-> 해당인덱스에 넣을것들이 들어감

 

*넣기만하기 가능!

array.splice(1,0,넣을거)

하면 해당 인덱스에 아무것도 안지워진후들어감 ~ 굳뜨

(리턴값은 지워지는 것들)

 

6. 두 배열 combine

배열이름.concat(뒤에 합칠배열);

-> 두 배열 합친거 만들어짐

const newArray=배열이름.concat(뒤에 합칠배열);

 

searching

//index 알려줌

배열이름.indexOf(요소) -> 인덱스 나옴

(없으면 -> -1 나옴 ! 유용)

//include

배열이름.includes -> true/false 나옴

//last index of

*여러개있을 때 indexOf하면 젤 먼저있는 인덱스나옴 

배열이름.lastIndexOf 하면 마지막에 있는 인덱스 나옴

 

 

배열 관련 유용 함수들 ! array API ~

1. join : 배열 -> string 리턴

const string = 배열.join(구분자?(스트링));

-구분자 안써도됨 ! (기본 = ',' !!)

(?= 받아도되고 안받아도 된다) 

-string 리턴함

 

2. split : string -> 배열 리턴 

const array=string.split(구분자(스트링), 배열사이즈?(number));

- 문자열을 구분자 단위로 나눠서 배열에 저장함 (구분자 필수)

- 배열 사이즈도 지정 가능 (안해도 됨) (받고싶은 개수만 받을 수 있는겨)

 

3. reverse() : 배열 자체 순서 거꾸로 

arr.reverse();-> 배열 자체를 순서 거꾸로 만듬 (그 거꾸로 배열도 리턴해줌)

 

4.  splice : 배열 자체를 수정하는 것arr.splice(index, 개수); ->배열 자체에서 애들 삭제-> 삭제된 애들을 리턴함

 

5. slice : 배열의 특정한 애들 리턴const arr2=arr.slice(시작 인덱스?, end 인덱스?);-(1,4) 이렇게 전달하면 1,2,3 인덱스만 가져옴. 마지막꺼는 빼고 ! (배제됨. exclusive)- 원하는 인덱스애들만 담겨있는 배열을 리턴함!

 

6. find : 함수로 true false 검사하고 true면 탈출하고 그 벨류 리턴- 콜백함수 : 배열에 있는 요소마다 함수가 한번씩 호출됨-> 함수 값이 true가 나오면 이 find 메소드가 멈추게 되고 첫번째로 truer가 된 value를 리턴한다const result = 배열.find((value) => value.score===90 );(콜백함수의 리턴값은 if문 처럼 검사하고싶은 문구 넣으면 됨 ! true/false 나오도록

 

7. filter : 콜백함수가 true인 애들만 모아서 새로운 배열 리턴const arr = 배열.filter((value)=>value.a===3);

 

const arr = 배열.filter((value)=>value.enrolled);

(enrolled 자체가 true/false 면 이렇게만하묜댐

 

8. map

각각의 요소를 콜백함수 거쳐서 다른 값으로 만들어주고 그 배열을 리턴함

(콜백함수에서 가공된, 콜백함수에서 리턴된 값으로 해당 요소를 바꾸는거 !)

const arr2=arr.map((value)=>value.score);

 

* 콜백함수에서 value, item 이런식으로 말고 student / fruit 이런식으로 나타내는 걸 변수 이름으로 해주긩 이해쉽도록

 

9. some

콜백함수 트루가되는 배열 요소가 있는지 없는지 알려줌 -> t/f 리턴

const result = arr.some((value)=>value<50);

배열중 50 보다적은게 하나라도 있다면 true 리턴

 

10. every

배열 모든 요소가 콜백함수 만족시켜야 true

const result = arr.some((value)=>value<50);

모든 값이 50보다 작아야 true 리턴

 

11. reduce : 누적하기 위해 사용, 그리고 마지막 값이 return 됨!

const result = arr.reduce((prev, curr)=>{~ return 머시기; }, initialValue (0같은거) );

( reduce(콜백함수, 초깃값) )

-curr = 하나하나의 요소 순차적으로 전달됨

-prev = 그 전콜백함수에서 리턴된 값!. 맨처음에는 전달한 initial value값임 (이니셜벨류지정안하면 걍 인덱스0인애, 그리고 curr이 1)

ex ) 배열 숫자 다 더하기

const result=arr.reduce((prev,curr)=>prev+curr,0);

=> 배열숫자 다 더해짐 ! ( prev는 누적되는 숫자가 되고 ,curr은 해당 현재 인덱스 배열요소가됨)

 

*reduceRight : 배열꺼꾸로할때

 

12. sort : 정렬함. 자기자신도바꾸는거가틈. 그리고자기자신도리턴함

arr.sort() -> 오름차순 정렬 (기본)

원래

arr.sort(콜백함수);

콜백함수

(a,b)=>a-b => 오름차순

a = 앞에 오는 값

b = 뒤에 오는 값

리턴값이 음수 => 앞에값 a가 작다고 간주되어서 a b 순서로 정렬된다

=> -붙이면 내림차순됨 !

 

*콘솔 지우는법

console.clear();

 

*언노니머스 펑션 한줄임 => {} 이거안쓰고 Return도 안쓰고 ; 도 안씀!!

 

 

'html, javascript' 카테고리의 다른 글

json  (0) 2021.06.19
object  (0) 2021.06.14
자바스크립트 데이터 타입  (0) 2021.06.02
javascript  (0) 2021.05.21
css  (0) 2021.05.18