Javascript 배열(Array) – 다루기 2/3

by Posted on
Javascript – 배열 Array(Object,Literal) 다루기
(함수 및 속성 알아보기)

ㆍPUSH (Return : PUSH 한 후 배열의 총 갯수)
  배열에 마지막에 데이터를 추가한다 (요소 n개 증가)

var myArray = [1,2,3];  // 1,2,3 으로 초기화된 배열생성
myArray.push(“AAA”); // 1,2,3, “AAA”
myArray.push(“BBB”); // 1,2,3, “AAA”,”BBB”
var idx = myArray.push(“CCC”) // idx 는 6 , “CCC” 추가 후 총 요소 갯수 리턴

동시에 여러개  PUSH 도 가능하다.
myArray.push(100,200,300,400) // 1,2,3, “AAA”,”BBB”,”CCC”,100,200,300,400

ㆍPOP (Return : 배열맨 마지막 값 )
배열에 마지막에 데이터를 꺼낸 후 값을 리턴하고 제거 (요소 1개 감소)
리턴 받지않고, 제거 용으로 사용가능
var myArray = [1,2,3,4,5,6];  // 1,2,3 으로 초기화된 배열생성

var gVal1 = myArray.pop();   // gVal1 = 6 , [1,2,3,4,5]   6 제거됨
var gVal2 = myArray.pop();   // gVal2 = 5 , [1,2,3,4]  5 제거됨

myArray.pop();                      // 4 를 리턴받지않고 버림 , [1,2,3]

ㆍUNSHIFT  (Return : UNSHIFT 로 추가 후 배열의 총 갯수)
배열에 맨 앞에 데이터 추가 (PUSH: 끝에 추가)
var myArray = [1,2,3];                // 1,2,3 으로 초기화된 배열생성
myArray.unshift(0);                    // 1,2,3  맨 앞에  0 추가 = 01,2,3
myArray.unshift(-3,-2,-1);          // 0,1,2,3 맨앞에 -3,-2,-1 추가 -3,-2,-1,0,1,2,3
var gLen = myArray.unshift(-4);// -3,-2,-1,0,1,2,3 맨앞에 -4 추가 -4,-3,-2,-1,0,1,2,3

                                                  // gLen에는 -4 추가후의 배열의 총 길이  8 리턴 

ㆍSHIFT  (Return : SHIFT 로 맨앞 값 꺼낸 후  배열의 총 갯수)
배열의 맨 앞 데이터 꺼내오고 삭제 (POP 끝에서 꺼내옴)
var myArray = [1,2,3];          // 1,2,3 으로 초기화된 배열생성
var gVal = myArray.shift(); //  gVal = 1  , 1 리턴하고 제거 , 배열은 [2,3]
myArray.shift();                    // 리턴 받지 않고, 2 제거됨 배열은 [3]

 

ㆍMAP (Return : callbackfn 함수내 처리 후 배열로 리턴)
배열요수개수 만큼 오름차순으로 반복하여,  함수에서 조작후 다른배열로 리턴함(매핑)
[배열 (O) , 객체 (X)]
map 의 3가지 기본 callback 함수

배열객체.map( value => value)  // .map( (value) => { return value}); 와 같음
배열객체.map( (value , index) => {   } );
배열객체.map( (value , index , 원본배열객체) => {  } );

var myArray = [1,2,3,4,5];
var myArray2 = {};
 // 값 
myArray2 = myArray.map( v => v+100); //  이 형식에서는 ( ) 와 return이 생략됨
// 또는  myArray.map( (v) => {return v+1}; 같음
console.log(myArray )    // myArray2에 각 요소에 v+100 입력후  리턴
console.log(myArray2)   // myArray2 [101,102,103,104,105]

 // 값 , 인덱스 사용하기
myArray2 = myArray.map( ( v , i ) => {

if (k/2 == 0)
v = “짝수”;
    return v;
//  i 번째 가져온 값을 처리후 i 번째 처리된 v 값을 각 index 에 입력
//  myArray2[i] = v; 해당인덱스에 V 값 입력 – myArray2.push(v) 를 연상케함 

});

 // 값 , 인덱스 , 배열객체 모두 사용하기
// myObj == myArray 자신
var myArray2 = myArray.map( ( v , i , myObj ) => {

if ( k /2 == 0) {
v = “짝수”;
myObj[i] = “-1”;
}
return v;
});
ㆍfor ~ in  ( 선택된 배열의 length 만큼 index 를 가져온다.)
배열의 length 만큼 반복하며  index  또는 key 를 가져온다.
[배열 (O) , 객체 (O)]
var myArray = [“A”,”B”,”C”,”D”,”E”]; // 배열일 경우
for (var idx in myArray)
{
   console.log(idx)                   // index : 0,1,2,3,4 출력
   console.log(myArray[idx])    // idx 참조하여 값 출력 = A,B,C,D,E 출력
}

var myObject= {  // 객체일경우
    name : “name” ,
    addr : “addr”,
    job : “job”
}
for(var a in myObject)
{
    console.log(a);   //  name , addr ,job =  Key 만 출력
}
var myObject= {
    name : “name” ,
    addr : “addr”,
    job : “job”,
    tel :[
        {“tel1” : “010-0000-1111”},
        {“te2”  : “010-1111-1111”}
    ]

}

for(var a in myObject)
{

    console.log(a);  //   name , addr , job  , tel =  Key 만 출력 (tel로 키만)

}
ㆍfor ~ of  (선택된 배열의  value 를 가져온다.)
배열의 length 만큼 반복하며 , index 로 접근하여  Value 를 가져온다.
(index 로 접근하기때문에 Array 타입만 사용가능)
[배열 (O) , 객체 (X)]
var myArray = [“A”,”B”,”C”,”D”,”E”]; // 배열일 경우
for (var gVal of myArray)
{
   console.log( gVal )    // A,B,C,D,E 출력
}
var myObject= {  // 객체일경우
    name : “test-name” ,
    addr : “test-addr”,
    job : “test-job”

}

//  index 로 접근하여 value 를 가져오기때문에 오류가 발생한다.
//  객체는 index 가 아닌 key 접근
for(var gVal of myObject) // Uncaught TypeError: myObject is not iterable
{
console.log( gVal )
}

ㆍforEach(배열에 length 만큼 오름 차순으로 반복하며 배열내용을 가져옴)
[배열 (O) , 객체 (X)]

 ArrayObject.forEach(  (value) => { });                                   //  1파라미터 만
ArrayObject.forEach(  (value , index ) => { });                       //  2 파라미터만
ArrayObject.forEach(  (value , index , ArrayObject) => { });   // 3 가지 파라미터

var myArray = [“A”,”B”,”C”,”D”,”E”];

myArray.forEach( v => console.log(v)); //  (v) => { console.log(v); } 와 같음
myArray.forEach( (v , i)  => {  console.log(`myArray[${i}] = ${v}`)} );
myArray.forEach( (v,i,o) => {
     console.log(`myArray배열 ${i} 번째 ${v} 값에 문자열 11 을 더함 `);
    o[i] = “v” + “11”;  // 해당 배열 객체를 파라미터 o 로 넘겨받아 제어
});
console.log(myArray);// ★ 배열 o 의 조작된 값이 myArray 에 그대로 영향을 미침
ㆍ객체(또는 배열) 복사하기
const  myObj = {  name : “test1” , tel : “010”}
const myObj2 = myObj;
// 객체(또는 배열)를 다른 변수에 할당해도 복사가 아니라 참조됨
console.log(myObj);
myObj2.name  = “changed name”
// myObj2 의 name 을 변경했지만 myObj2가 참조하는
// myObj 의 name 이 변경됨.결국 myObj 와  myObj2 가 참조하고있는 값이 같음
console.log(myObj);

console.log(myObj2);

실제로 객체를 복사하기 위해서는 Object.Assign() 을 활용한다.
// 객체1 + 객체2 + 객체3  = 합쳐진 새로운 객체를 리턴하거나
// 리턴받는 변수가없을경우 , 객체1 + 객체2 + 객체3 = 객체1

let rtnObj = Object.Assign( 객체1 , 객체2  , 객체3)
Object.Assign( 객체1 , 객체2  , 객체3)  // 리턴이 없으면 객체1에 들어감

단 객체1 객체2 객체3 이 서로 다를경우 ,
서로 다른 키는 서로 합치면서 남겨두고 , 같은키는 뒤에 객체껄로 덮어씌움

const  myObj = {  name : “test1” , tel : “010”}

// 아래와같이 Object.assign( ) 복사할 객체 1개만 넣을경우 AllofArray 는
// let allOfArray = myObj 와 똑같이  참조형식으로 리턴되므로 1개 이상 넣어야함 

let allofArray = Object.assign(myObj);  //객체가 1 개일경우  참조가 되버림

[방법1]
let allOfArray = Object.assign( {} , myObj);  //  Object + myObj 를 더하는데  파라미터가 1개면 참조가 되버리므로 , 빈배열  {} 을 맨앞에 추가함

console.log(myObj);
console.log(allOfArray)

[방법2]
let tmpArray = {};Object.assign(tmpArray, myObj);  // 빈 객체를 선언한 후 맨 앞에 매개변수로..
console.log(myObj);
console.log(tmpArray);

const  myObj = {  name : “test1” , tel : “010”}
const  myObj1 = {  nm : “test2” , tt : “010”}
const  myObj2 = {  nickname : “test2” ,tel: “111”}
let tmpArry = {};
Object.assign( tmpArry , myObj , myObj1 , myObj2 );

console.log(tmpArry);

// 아래가 출력 됨, 같은 key 가 나올경우 뒤에 배열키의 값으로 교체 하고
// 없는 키일경우는 계속 남아서 유지됨
{name: ‘test1’, tel: ‘111’, nm: ‘test2’, tt: ‘010’, nickname: ‘test2’}


ㆍsplice (배열 원하는 index 삭제 및 “삭제 후 삽입”하기 )
     ( splice 를 통해 요소를 가져오면, 원본에서 제거됨 )


//  splice( start index ,  count)          // count : 는 가져올 갯수 ( start  index 도 갯수에 포함)
//   slice(start  index  ,  end  index )  //  시작 index 를 포함해서 ~ 마지막 index 제외하고 앞까지 리턴 

방법1 : 배열.splice(count)   
// 파라미터 1개 일때 : 맨앞 (시작은 index 0 )부터  count 만큼 남기고 다 삭제

방법2 : 배열.splice(index, count)
// 파라미터 2개 일때 : 삭제할 시작 index ,  삭제할 count (삭제할 시작 index 포함하여) ,방법3 : 배열.splice(index, count , element1 , element2 ,,,)
// 파라미터 2개 일때 : 삭제시작 index ,  삭제 count (시작 index 포함) ,  element1 , element2  삽입(추가)
var myNo = [0,1,2,3,4,5]
myNo.splice(1)              // 배열에서 요소 1개만 남기고 다 삭제함
console.log(myNo)       // [0]
myNo.push(1,2,3,4,5)  
myNo.splice(3)              //  배열에서 요소 3개 남기고 다 삭제함
console.log(myNo)        // [0,1,2]
myNo.push(3,4,5);
console.log(myNo)        // [0,1,2,3,4,5]
myNo.splice(0,2)           // index  0 부터(포함) ~ 2개  삭제 : 0,1 삭제  ★ 원본에서는 삭제됨

console.log(myNo);       // [ 2,  3, 4, 5]

myNo.unshift(0,1);
console.log(myNo);       // [ 0, 1, 2, 3, 4, 5]

let myCut = myNo.splice(3,2);    //  리턴을 받으면 지정한 요소가 리턴됨 ★ 원본에서는 삭제됨
console.log(myNo)       // [ 0, 1, 2, 5]
console.log(myCut)     //  [3, 4]

myNo.unshift(0,1);        // 배열 맨앞에서 순서대로 0,1 삽입
console.log(myNo);       // [ 0, 1 ,2 ,3 ,4, 5]
myNo.splice(2,3)           // index 2 부터(포함) ~ 3개 삭제 : 2,3,4 삭제 ★ 원본에서는 삭제됨
console.log(myNo);       // [0,1,5]
myNo.splice(2,0,2,3,4) // index 2 번째부터 0 개를 삭제(index 2포함)하고 2,3,4 (5는 밀림 )
console.log(myNo);       // [ 0, 1 ,2 ,3 ,4, 5]
myNo.splice(0,3,6,7,8) // index 0 번째부터 3 개를 삭제하고 (index 0포함) 6,7,8 삽입
console.log(myNo);       // [ 6, 7, 8, 3, 4, 5]
ㆍslice (배열에서 원하는 위치는 요소 배열로 가져오기 )
     ( slice 를 통해 요소를 가져오면, 원본은 유지됨)
//   slice(start  index  ,  end  index )  //  시작 index 를 포함해서 ~ 마지막 index 제외하고 앞까지 리턴
//  splice( start index ,  count)          // count : 는 가져올 갯수 (start index 도 갯수에 포함)
// splice 는  원본에 변화가 있고, slice 는 원본에 변화가 없음
let myArray = [0,1,2,3,4,5];

 var spArray = myArray.splice(0,2);  // index 0 (0포함) ~  index 2 까지 : 단 , index 2 제외 니까 – 0,1

 console.log(spArray);                         // [0,1]
 console.log(myArray);                       // [2,3,4,5] 원본에 영향이 있음
 myArray.unshift(0,1);
 console.log(myArray);
   
// slice : 원하는 배열 요소 잘라서 취하기(원본유지됨 )
// splice(start index  ,  end index + 1) //  가져오고자하는 end index + 1 하는 이유는 마지막 index 는 제외되기 때문이다.    

let scArray = myArray.slice(0,2)
// index 0 ~ index 2 까지 인데,, 마지막 제외 되므로 , index 0,1 항목만 가져옴

console.log(scArray)     // [0,1]
console.log(myArray)     // [0,1,2,3,4,5] 원본에 영향이 없음
ㆍconcat (배열합치기 – 1개 ~ 여러개)
let 새배열 = 배열1.concat(배열2,,,,,,,,)

let myArray1 = [0,1,2,3];
let myArray2 = [4,5,6];
let myArray3 = [7,8];
let myArray4 = [9]

let myArrayTmp = [];

myArrayTmp = myArray1.concat(myArray2);        // 배열 myArray1 과 합칠 배열을 나열  : myArray2
console.log(myArrayTmp)  // [0,1,2,3,4,5,6]

myArraytmp = myArray1.concat(myArray2 , myArray3, myArray4);     // 배열 myArray1 과 합칠 배열을 나열  : myArray2  ,myArray3 , myArray4
console.log(myArraytmp);  // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

ㆍincludes , indexOf , lastIndexOf  (배열에서 요소 검색하기)

배열.includes(‘요소’);
// 요소가 존재하면 true or false배열.indexOf(‘요소’)
// 요소가 존재하면 그 요소의 index 리턴 – 앞에서부터 검색해서  최초 발견한 요소의 index 리턴
배열.lastIndexOf(‘요소’)
// 요소가 존재하면 그 요소의 index 리턴 – 맨 뒤에서 부터 검색해서  최초 발견한 요소의 index 리턴
let myArray = [0,1,2,8,4,1,6,7,8,1,6,7,9];

let isExists = myArray.includes(9);
console.log(isExists);      // true
let isExists = myArray.includes(3);
console.log(isExists);      // false
let getIdx_f = myArray.indexOf(1);
console.log(getIdx_f);    // 1  리턴 : indexOf 앞에서 부터 검색
let getIdx_l = myArray.lastIndexOf(8);
console.log(getIdx_l);      // 8 리턴 : lastIndexOf 뒤에서 부터 검색
   
let getIdx_err = myArray.lastIndexOf(5);
console.log(getIdx_err);  // -1 : 없음

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다