js 배열 상용 방법

목차
목차
배열 만 들 기
 배열 상용 방법
0.Array.isArray() 전 달 된 값 이 하나 인지 확인 하 는 데 사용 합 니 다. Array。
1. Array. of () 매개 변수 로 구 성 된 배열 을 되 돌려 줍 니 다.
2. Array. from () 배열 대상 을 배열 로 변환 하고 원래 대상 을 바 꾸 지 않 고 새 배열 로 되 돌려 줍 니 다.
3. pop () 배열 의 마지막 요 소 를 삭제 하고 삭 제 된 요 소 를 되 돌려 줍 니 다.
4. shift () 배열 의 첫 번 째 요 소 를 삭제 하고 삭 제 된 요 소 를 되 돌려 줍 니 다.
5. push () 끝 에 요 소 를 추가 (원래 배열 변경) 하고 추 가 된 length 를 되 돌려 줍 니 다.
6. unshift () 는 배열 의 시작 에 요 소 를 추가 합 니 다 (원래 배열 변경). 추 가 된 배열 의 length 를 되 돌려 줍 니 다.
7. reverse () 반전 배열 원 배열 변경
8. splice () 현재 배열 변경 추가 / 삭제 / 교체
9. sort () 배열 정렬 (원래 배열 변경) 매개 변 수 는 정렬 을 규정 하 는 비교 함수 (필수 가 아 님) 입 니 다.
10. copy Within () 배열 의 지정 위치 복사 [원본 배열 변경, ES6]
11. fill () 배열 의 채 움 [원래 배열, ES6 변경]
 12. slice () 는 배열 요 소 를 복사 합 니 다. [원래 배열 을 바 꾸 지 않 습 니 다.]
 13. join () 은 배열 을 문자열 로 변환 합 니 다.
 14. concat () 연결 은 여러 배열 을 합 쳐 새 배열 로 돌아 갑 니 다.[원수 조 변경 안 함]
15. toString () 방법 은 배열 을 문자열 로 변환 하고 결 과 를 되 돌려 줍 니 다.[원수 조 변경 안 함]
16. index Of () 는 배열 의 한 요소 의 첫 번 째 색인 값 을 찾 습 니 다.[원수 조 변경 안 함] 없 으 면 돌아 와. - 1.
17. lastIndex Of () 는 지정 한 요소 가 배열 의 첫 번 째 위 치 를 역방향 으로 찾 습 니 다.[원수 조 변경 안 함]
18. includes () 배열 에 어떤 요 소 를 포함 하 는 지 찾 습 니 다.[원수 조 를 바 꾸 지 않 고,]
배열 에서 옮 겨 다 니 는 방법 정리
1. foreach 는 오름차 순 으로 배열 의 값 을 순서대로 옮 겨 다 닙 니 다.
2. some () 배열 에 조건 을 만족 시 키 는 요소 가 있 는 지 확인 합 니 다.
3. every () 배열 의 요소 가 모두 조건 을 만족 하 는 지 검사 합 니 다.
4. filter () 는 원래 의 배열 을 걸 러 내 고 새 배열 로 돌아 갑 니 다. 
5. map () 는 배열 의 모든 요 소 를 처리 하고 새로운 배열 로 돌아 갑 니 다.
6. keys () 키 이름 / values () 키 값 / entries () 키 값 쌍 옮 겨 다 니 기
7. reduce () 배열 의 누적 기 는 하나의 값 으로 합 쳐 집 니 다.
8. find () / findIndex () 조건 에 따라 그룹 구성원 찾기 [ES6]
9. flat () 깊이 를 옮 겨 다 니 며 배열 을 펼 칩 니 다.
예 를 들 어 다 중 배열 을 다시 정렬 합 니 다.
예시  배열 이 흐트러지다. 
배열 만 들 기

var arr = [1, 2, 3] //123

var arr1 = new Array()//[]

var arr2 = Array(1, 2, 3)//1,2,3

var arr3 = Array(3)//[,,]

 배열 상용 방법
0.Array.isArray() 전 달 된 값 이 하나 인지 확인 하 는 데 사용 합 니 다.  Array 。

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

1. Array. of () 매개 변수 로 구 성 된 배열 을 되 돌려 줍 니 다.

 let arr4 = Array.of(1, 2, 3)//123

2. Array. from () 배열 대상 을 배열 로 변환 하고 원래 대상 을 바 꾸 지 않 고 새 배열 로 되 돌려 줍 니 다.

let a = { 0: '1', 1: '2', 2: '3', 'length': 3 };//  
    let arr5 = Array.from(a)
    console.log(arr5)

    let b = Array.from('hello')//   
    console.log(b)

    let arrset = Array.from(new Set('func'))
    console.log(arrset)

    let arrMap = Array.from(new Map().set([1, 2], [3, 4], [5, 6]))
    console.log(arrMap)
    //  map  
    let thearr = Array.from([1, 2, 3], x => x * 2)
    console.log(thearr)

3. pop () 배열 의 마지막 요 소 를 삭제 하고 삭 제 된 요 소 를 되 돌려 줍 니 다.

  {
        let arr = [1, 2, 3]
        let deleteitem = arr.pop()//3
        console.log(arr)//[1,2]
    }

4. shift () 배열 의 첫 번 째 요 소 를 삭제 하고 삭 제 된 요 소 를 되 돌려 줍 니 다.

{
        let arr = [1, 2, 3]
        let deleteitem = arr.shift()//1
        console.log(arr)//2,3
    }

5. push () 끝 에 요 소 를 추가 (원래 배열 변경) 하고 추 가 된 length 를 되 돌려 줍 니 다.

 {
        let arr = [1, 2, 3]
        let thelength = arr.push(4)//4
        console.log(arr)//1,2,3,4
    }

6. unshift () 는 배열 의 시작 에 요 소 를 추가 합 니 다 (원래 배열 변경). 추 가 된 배열 의 length 를 되 돌려 줍 니 다.

 {
        let arr = [1, 2, 3]
        let thelength = arr.unshift(4)//4
        console.log(arr)//4,1,2,3
    }

7. reverse () 반전 배열 원 배열 변경

{
        let arr = [1, 2, 3]
        arr.reverse()
        console.log(arr)//321
    }

8. splice () 현재 배열 변경 추가 / 삭제 / 교체
표현 식 arr. splice (index, num, item 1, item 2,...);
 매개 변수 설명

첫 번 째 매개 변 수 는 하나의 정수 로 요 소 를 추가 / 삭제 할 위 치 를 지정 하고 마이너스 로 끝부분 부터 필수 매개 변수

를 셀 수 있 습 니 다.

두 번 째 매개 변 수 는 요 소 를 삭제 하 는 수량 입 니 다. 삭제 하지 않 으 려 면 0 선택 가능 한 매개 변수

로 설정 할 수 있 습 니 다.

다음 매개 변 수 는 배열 에 추 가 된 요소 선택 가능 한 매개 변수

입 니 다.
삭제 작업 이 라면 삭 제 된 요 소 를 새 배열 에 넣 고 되 돌려 줍 니 다.
1. 동작 하 는 요 소 는 시작 하 는 요 소 를 포함 합 니 다.
2. 배열 의 요소 가 부족 하면 배열 의 마지막 자리 까지 삭 제 됩 니 다.

 //    
    let arrsplice = [1, 2, 3, 4, 5, 6]
    let before = arrsplice.splice(0, 3)//    arrsplice       
    console.log(before)
    console.log(arrsplice)//   arraplice        
    let after = arrsplice.splice(-1, 1)//      
    console.log(after)

    //    
    {
        let arr = [1, 2, 3, 4, 5]
        let addFromStart = arr.splice(0, 0, 7)//                
        console.log(arr)//712345
        console.log(addFromStart)//[]

        let addFromEnd = arr.splice(-1, 0, 6)//             ，
        console.log(arr)//7123465
        console.log(addFromEnd)//[]
    }

    //      /  
    {
        let arr = [1, 2, 3, 4, 5, 6, 7]
        let addAndeDelete = arr.splice(0, 1, 100)//[1]
        console.log(arr)//[100,2,3,4,5,6,7]
    }

9. sort () 배열 정렬 (원래 배열 변경) 매개 변 수 는 정렬 을 규정 하 는 비교 함수 (필수 가 아 님) 입 니 다.

{
        //      ，      ，       ，      ,    toString()           Unicode ,        
        let arr = ["A", "C", "B", "E", "D"];
        arr.sort();
        console.log(arr); //["A","B","C","E","D"]
    }
    {   //          
        let arr = [1, 0, 5, 4, 9, 45, 78, 6, 14, 2];
        arr.sort((a, b) => a - b)
        console.log(arr)//[0, 1, 2, 4, 5, 6, 9, 14, 45, 78]
    }
    { //     ，     ，   (sex   0)     (sex   1)  
        let arr = [{ age: 18, sex: 0 }, { age: 19, sex: 0 }, { age: 20, sex: 0 }, { age: 18, sex: 1 }, { age: 19, sex: 1 }];
        arr.sort((a, b) => {
            if (a.age === b.age) { //          ，    
                return a.sex - b.sex;
            } else { //              
                return a.age - b.age;
            }
        })
        console.log(arr)
    }

10. copy Within () 배열 의 지정 위치 복사 [원본 배열 변경, ES6]
문법: arr. copyWithin (index, start, end)
첫 번 째 매개 변수: 지정 한 대상 색인 위치 로 복사 합 니 다.
두 번 째 매개 변수: 요소 복제 의 시작 위치 (선택 가능)
세 번 째 인자: 복 사 를 중단 하 는 색인 위치 (기본 값 은 array. length) 입 니 다.만약 마이너스 라면, 역 수 를 나타 낸다.(선택 가능)

 {
        let arr = [1, 2, 3, 4, 5, 6];
        let a = arr.copyWithin(2, 0, 3);
        console.log(arr)// [1, 2, 1, 2, 3, 6]
    }

11. fill () 배열 의 채 움 [원래 배열, ES6 변경]
문법: arr. fill (value, start, end)
value    필수채 워 진 값.
start    선택 할 수 있다.위 치 를 채 우기 시작 합 니 다.
end  선택 할 수 있다.위치 채 우기 중지 (기본 값 은 array. length)

{
        let arr = new Array(3)
        arr.fill('  ')
        console.log(arr)//["  ", "  ", "  "]
        arr.fill('  ', 0, 1)
        console.log(arr)// ["  ", "  ", "  "]
    }

 12. slice () 는 배열 요 소 를 복사 합 니 다. [원래 배열 을 바 꾸 지 않 습 니 다.]
두 매개 변 수 는 복사 색인 시작 과 복사 색인 종료 입 니 다.

{
        let a = [1, 2, 3, 4]
        let b = a.slice(0, 2)
        console.log(b)//1,2
    }

 13. join () 은 배열 을 문자열 로 변환 합 니 다.
선택 가능 한 매개 변 수 는 지정 한 구분자 입 니 다.

{
        let arr = [1, 2, 3, 4]
        let b = arr.join('-')
        console.log(b)//1-2-3-4
        console.log(typeof b)//string
    }

 14. concat () 연결 은 여러 배열 을 합 쳐 새 배열 로 돌아 갑 니 다.[원수 조 변경 안 함]

{
        let a1 = [1, 2]
        let a2 = [4, 5]
        let a3 = [6, 7]
        let a4 = a1.concat(a2, a3)
        console.log(a4)// [1, 2, 4, 5, 6, 7]
    }

15. toString () 방법 은 배열 을 문자열 로 변환 하고 결 과 를 되 돌려 줍 니 다.[원수 조 변경 안 함]

  {
        let arr = ['xiao', 'hao', 'wen', 24]
        let b = arr.toString()
        console.log(b)//xiao,hao,wen,24
    }

16. index Of () 는 배열 의 한 요소 의 첫 번 째 색인 값 을 찾 습 니 다.[원수 조 변경 안 함] 없 으 면 돌아 와. - 1.
첫 번 째 매개 변 수 는 찾기 의 값 이 고 두 번 째 매개 변 수 는 찾기 의 시작 입 니 다.

 {
        let arr = [1, 2, 3, 4, 5, 6]
        console.log(arr.indexOf(3))//2 
        console.log(arr.indexOf(3, 3))//-1
        console.log(arr.indexOf(8))//-1
    }

17. lastIndex Of () 는 지정 한 요소 가 배열 의 첫 번 째 위 치 를 역방향 으로 찾 습 니 다.[원수 조 변경 안 함]
첫 번 째 매개 변 수 는 찾 는 값 이 고 두 번 째 매개 변 수 는 역방향 검색 의 시작 입 니 다.

 {
        let arr = [1, 1, 3, 4, 5, 1];
        console.log(arr.lastIndexOf(1))//5
        console.log(arr.lastIndexOf(1, -2))//1
    }

18. includes () 배열 에 어떤 요 소 를 포함 하 는 지 찾 습 니 다.[원수 조 를 바 꾸 지 않 고,]
첫 번 째 매개 변 수 는 찾 을 값 을 입력 해 야 합 니 다.
 두 번 째 찾기 시작 위치
 반환 값 true 또는 false

{
        let arr = [1, NaN, 100, '42'];
        console.log(arr.includes(1)); //true
        console.log(arr.includes(NaN)); //true
        console.log(arr.includes(1, 3)); //false

    }

 
 
배열 에서 옮 겨 다 니 는 방법 정리
1. foreach 는 오름차 순 으로 배열 의 값 을 순서대로 옮 겨 다 닙 니 다.
문법 arr. forEach (function (value, index, arr), this);
 
value (필수): 현재 옮 겨 다 닐 때의 배열 값 입 니 다.
index (선택 가능): 현재 옮 겨 다 닐 때의 색인 값 입 니 다.
arr (선택 가능): 배열 대상 자체.
this (선택 가능): 리 셋 함 수 를 실행 할 때.

    {
        let arr = [ 1,2,3,4,5,6]
        arr.forEach((value,index)=>{
            console.log(value)// 
            console.log(index)//  
        })
    }

2. some () 배열 에 조건 을 만족 시 키 는 요소 가 있 는 지 확인 합 니 다.
문법 arr. some (function (value, index, arr), this);
매개 변수 값 은 froeach 와 같 습 니 다.
반환 값: 불 형식 ture / false
 

  {
        let arr = [1,2,3,4,5]
        let result = arr.some(value=>value>6)//false
        let result1 = arr.some(value=>value>2)//true
        console.log(result,result1)
    }

3. every () 배열 의 요소 가 모두 조건 을 만족 하 는 지 검사 합 니 다.

  {
        let arr = [1,2,3,4,5]
        let result = arr.map(item=> item*2)
        console.log(result)//[2, 4, 6, 8, 10]
    }

    // find()

4. filter () 는 원래 의 배열 을 걸 러 내 고 새 배열 로 돌아 갑 니 다. 

 {
        let arr = [1,2,3,4,5]
        let result = arr.filter(item=> item>2)
        console.log(result)//[3, 4, 5]
    }

5. map () 는 배열 의 모든 요 소 를 처리 하고 새로운 배열 로 돌아 갑 니 다.

    {
        let arr = [1,2,3,4,5]
        let result = arr.map(item=> item*2)
        console.log(result)//[2, 4, 6, 8, 10]
    }

6. keys () 키 이름 / values () 키 값 / entries () 키 값 쌍 옮 겨 다 니 기

   {
        for(let i of ['a','b','c'].keys()){
            console.log(i)//keys()     0 1 2
        }
        for(let item of ['a','b','c'].values()){
            console.log(item)//values()    a b c
        }
        for (let [i,item] of ['a','b','c'].entries()){
            console.log(i,item)//entries()         
        }
    }

7. reduce () 배열 의 누적 기 는 하나의 값 으로 합 쳐 집 니 다.
문법 arr. reduce (총, 값, 인덱스, arr), init)
매개 변수 totalk (필수): 초기 값, 다음 리 셋 값 입 니 다.
 value (필수): 배열 요소 의 값 입 니 다.
 index (선택 가능): 색인 값.
arr (선택 가능): 배열 대상.
 init (선택 가능): 초기 값 입 니 다.
반환 값: 누적 후의 값

{
        let arr = [1,2,3,4,5]
        let sum = arr.reduce((total,value)=>total +value)
        console.log(sum)//15
    }

reduce 사례 에서 배열 의 요소 가 몇 개 있 는 지 찾 아 보 세 요.

{ 
  let arr = [' ',' ',' ',' ',' ',' ',' ',' ']
  let arr2 = arr.reduce((prev,cur,idx,arr)=>{
    if(cur in prev){
      prev[cur]++
    }else{
      prev[cur] = 1
     
    }
    return prev
    
  },{})
  Object.keys(arr2).forEach(item=>{
    console.log(item,arr2[item])
  })
}

8. find () / findIndex () 조건 에 따라 그룹 구성원 찾기 [ES6]
문법 arr. find (function (value, index, arr), this);
매개 변수 값 은 froeach 와 같 습 니 다.
반환 값: find () 는 조건 에 맞 는 첫 번 째 그룹 구성원 을 되 돌려 줍 니 다. undefined 로 돌아 가지 않 으 면 되 돌려 줍 니 다.findIndex () 는 조건 에 맞 는 배열 구성원 의 색인 을 되 돌려 줍 니 다.

{
        let arr= [1,2,3,4,5]
        let result = arr.find(item=>item>3)
        console.log(result)//4     
        let result1 = arr.findIndex(item=>item>3)
        console.log(result1)//3        
    }

9. flat () 깊이 를 옮 겨 다 니 며 배열 을 펼 칩 니 다.
매개 변수: depth (선택 가능): 내장 배열 의 구조 깊이 를 추출 하고 기본 값 은 1 입 니 다.
반환 값: 펼 쳐 진 새 배열 입 니 다.
flat 방법 은 배열 의 공백 항목 을 제거 합 니 다.
몇 겹 으로 끼 워 넣 었 는 지 잘 모 르 면 인 피 니 티 로 직접 설정 하면 모두 펼 칠 수 있 습 니 다.
인 피 니 티 의 무한대 수치.

{
        let arr = [1,2,[3,[4,[5]]],6]
        let one = arr.flat()
        console.log(one)//[1, 2, 3, Array(2), 6]

        let inf = arr.flat(Infinity)
        console.log(inf)//[1, 2, 3, 4, 5, 6]
    }

예 를 들 어 다 중 배열 을 다시 정렬 합 니 다.

{
        let arr = [1,3,2,4,8,6,[5,1,3,5,9,10,5,[1,5,3,6,7,8,11,7,66]]]
        let newarr = Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>a-b)
        console.log(newarr)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 66]
    }

예시  배열 이 흐트러지다. 
실현 원 리 는?  순환 배열  매번 옮 겨 다 닐 때마다 0 ~ length - 1 의 수 를 만 듭 니 다. 이 수 는 이번 순환 에서 무 작위 로 교환 할 위 치 를 대표 합 니 다.이번 순환 현재 위치의 수 와 무 작위 위치의 수 를 교환 합 니 다.

var  arr  = [1,2,3,4,5,6,7,8,9]

for(let i =0;i