[JavaScript] Array.prototype 종류 [1] concat ,fill, filter, find, findIndex, includes, indexOf

안녕하세요 js에서 사용하는 Array 에 대한 메서드에 대해 간단 설명 및 예시로 작성 하려고 합니다.

오늘은 [1] 입니다.  빨간 색 부분은 IE 미지원의 경우 입니다.

** 빨간메서드 부분은 Polyfill이 도입되어야 합니다.

각 함수마다 서포팅 되는 호환성 에 특이 한점은 적도록 하겠습니다.

[1] 에서 작성할 배열 메서드 입니다.

concat(IE 5.5) ,fill, filter(IE 9), find, findIndex, includes, indexOf(IE 9)

[2] 에서 작성할 배열 메서드 입니다.

join, keys, lastIndexOf, pop, push, shift, unshift,

[3] 에서 작성할 배열 메서드 입니다.

some, every, slice, splice, sort, toLocaleString, toSource, values

[4] 에서 작성할 배열 메서드 입니다.

reduce, reduceRight, reverse,  copyWithin, Array.of , Array.from

** 모든 설명은 mdn 을 참조하였습니다.

1. concat 

호환성 :  IE 5.5 이상 동작합니다. (전 브라우저 지원이라고 봐도 될거같습니다.)

description : 인자로 주어지는 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 

깍돌이 설명:  배열1.concat(배열2) 와 같이 쓰면   [ 배열1 + 배열 2 ] 가 된 새 배열3 이 나옵니다.

** 메서드를 호출하게 된 배열 뒤에 인수로 넘어온 배열들을 붙여서 새로운! 배열을 생성합니다.

this나 인수로 넘겨진 배열의 내용을 바꾸지 않고 주어진 배열들을 합친뒤 얕은 복사(shallow copy)

를 리턴 합니다.

Example 1  fruits 배열과 animal 배열의 합치기  (2개)

Example 2  fruits 배열과 animal 배열과 language 배열의 합치기 (3개)

Example 3 fruits 배열에 단일 값 "NinJa" 와  ["QA","devOps"] 를 이어 붙이기

(배열에 값 붙이기)

Example Code

// concat

var fruits =["apple","oragne","grapes","strawberry","watermelon"];

var animal = ["dog","rabbit","horse","chicken","lion"];

var language = ["C","C++","Python","JS","GO"];

// Example 1

var newArray = fruits.concat(animal);

console.warn(newArray);

// Example 2

var newArray = fruits.concat(animal,language);

console.warn(newArray);

// Example 3

var newArray = fruits.concat("NinJA",["QA","devOps"]);

console.warn(newArray);

번외편 !

배열을 단순하게 + 로 더하면 어떻게 될까 ?

문자열이 됩니다.! ( 하지만 자세히 보면 watermelondog 로 붙어있는 부분이 있습니다. )

[... 끝]+[처음...]이 붙는 부분에서 "끝처음" 로 붙네요 쓸순 없습니다. ㅎ_ㅎ

2. fill

호환성 : IE,Opera는 아예 지원되지 않습니다.  (Chrome 36이상 FireFox 31이상 Safari 7.1이상)

폴리필을 사용 하여야 합니다.  // 폴리필 주소

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

description : 배열의 시작인덱스부터 끝 인덱스까지 정적 값으로 배열 요소들을 채웁니다.

깍돌이 설명:   배열을 정해진 특정 값으로 채워넣기 위해 사용하는 함수입니다. (react에서 자주 사용합니다.)

** 해당 메서드를 사용한 배열의 원본 값이 변합니다. 주의 !!

Example 1  fruits 배열을 4로 채우기 

Example 2  fruits 배열을 2부터 4로 채우기 2부터에서 2는 index입니다(0부터시작)

Example 3  fruits 배열을 2부터 3까지만 4로 채우기  2에서 3은 index입니다.

** 특이사항 : 시작하는 start는 현재 인덱스를 포함하지만 end는 그 전 인덱스까지 입니다.

Example 4  fruits 배열의 start를 -1로 시작 

** 음수일 경우     start + length (배열 전체 길이 )

이기 때문에 현재 배열의 길이는 5이기 때문에 5 + - 1 이 되어서 fruits[4] 부터 4값이 들어가게 됩니다. 

Example 5  fruits 배열의 start를 -2로 시작 

** -2 + 5  = > 3 이기 때문에 index[3] 부터 4가 들어가게 됩니다. strawberry 부터 4값이

Example 6  fruits 배열의 end 를 -1로 시작

** 음수일 경우    end +  length (배열 전체 길이 ) > start와 형태가 같지만

start는 해당 위치부터

end는 해당위치까지입니다.

react 에서 순수 위젯 리스트를 표현할때 사용하기도 합니다.

const btnList = Array(this.props.count).fill(null).map((i,index) =>{

return <button type="button" style={btnStyle} key={"Btn_"+index} >

{this.props.name +"_"+index}</button>;

});

3. filter

앗.. filter부터 안써놓은지 몰랐습니다. ㅜㅜ 새롭게 다시 작성해서 채우도록;; 하겠습니다.'

호환성 :  IE 브라우저 9 이상 지원합니다. 

description : 조건에 맞는 함수를 통과하는 요소를 모아 새로운 배열로 반환 합니다.

깍돌이 설명:  특정 조건에 맞는 배열을 새롭게 반환시켜주는 함수라고 보시면 될 것 같습니다.

var fruits =["apple","oragne","grapes","strawberry","watermelon"];

fruits.filter(function(ele,index,arr){

    return ele.length >= 7; // ['strawberry','watermelon']

});

4. find

호환성 :  IE미지원

description : 

깍돌이 설명:  IE를 미지원하기 때문에 폴리필 코드가 필요합니다.

 

** 

Example 1  

5. findIndex

호환성 : 

description :

깍돌이 설명:  

** 

Example 1  

6. includes

호환성 : 

description :

깍돌이 설명:  

** 

Example 1  

7. indexOf

호환성 : 

description :

깍돌이 설명:  

** 

Example 1