[Java Script]配列


📍 整列
  • 順番のリストが並んでいる
  • ハーモニー
    let student1 = '철수';
    let student2 = '영희';
    .
    .
    .
    let student30 = '영수';
    
    // 배열을 이용하면 아래와 같이 간단하게 표현 가능
    let students = ['철수', '영희', ..., '영수'];
    for(let name in students){
      console.log(students[name]); // "철수", "영희", ..., "영수"
    }
    
    students[0] = '민정' // index별 값 변경 가능
    📍 パターンフィーチャー
  • 配列には、アルファベット、数字、オブジェクト、関数を含めることができます.
  • ハーモニー
    let arr = [
      '민수', // 문자열
      3, // 숫자
      false, // Boolean
      { // Object
        name : 'Mike',
        age : 30,
      }
      function(){ // 함수
        console.log('TEST');
      }
    ];
    📍 配列の方法
    📍 length
  • アレイサイズを示す方法
  • ハーモニー
    let days = ['월','화','수'];
    days.length; // 3
    📍 push
  • アレイ末尾に値を追加するpush
  • ハーモニー
    let days = ['월','화','수'];
    days.push('목');
    console.log(days) // ['월','화','수','목']
    📍 pop
  • アレイ末尾で値を削除するpop
  • ハーモニー
    let days = ['월','화','수'];
    days.pop();
    console.log(days) // ['월','화']
    📍 shift
  • 配列の前に値を追加するshift
  • ハーモニー
    let days = ['월','화','수'];
    days.shift('일');
    console.log(days) // ['일','월','화','수']
    📍 unshift
  • アレイ前面値を消去するunshift
  • ハーモニー
    let days = ['월','화','수'];
    days.unshift();
    console.log(days) // ['화','수']
    📍 splice(start,count,elements)
  • start count個の要素の削除を開始し、要素をアレイに追加
  • ハーモニー
    let arr = ['a','b','c','d','e','f'];
    
    // 삭제된 원소 반환
    console.log(arr.splice(2,3)); // [ 'c', 'd', 'e' ]
    
    // 제거 후 남은 원소 목록
    console.log(arr); // [ 'a', 'b', 'f' ]
    
    // 원소 제거 후 새로운 원소 추가
    let arr2 = ['a','b','c','d','e','f'];
    
    // index 2부터 3개의 원소를 제거한 후 77, 100을 배열에 추가
    arr2.splice(2,3,77,100);
    // 배열의 끝에 추가되는 것이 아닌 제거가 끝난 index 위치에 추가!
    console.log(arr2); // [ 'a', 'b', 77, 100, 'f' ]
    📍 slice(start,end)
  • 開始から終了までの要素を返す
  • ハーモニー
    const arr = ['a','b','c','d','e','f'];
    console.log(arr.slice()); // [ 'a', 'b', 'c', 'd', 'e', 'f' ], 배열이 복사됨
    console.log(arr.slice(3)); // [ 'd', 'e', 'f' ]
    console.log(arr.slice(1,4)); // [ 'b', 'c', 'd' ]
    📍 concat(arr1,arr2,...)
  • アレイを統合して新しいアレイに戻る
  • ハーモニー
    let arr1 = ['a','b'];
    const arr2 = ['c','d'];
    console.log(arr1.concat(arr2)); // [ 'a', 'b', 'c', 'd' ]
    // 배열이 아닌 원소도 추가할 수 있다!
    console.log(arr1.concat(arr2,'e','f')); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
    📍 forEach(function)
  • 配列ごとに機能を実行する
  • ハーモニー
    function print(item){
      console.log(item);
    }
    
    let arr = ['ABC','DEF','GHI'];
    
    // item : 원소, index : 배열 인덱스, array : 배열
    arr.forEach((item, index, array)=>{
      console.log(`${index+1}. ${item}`); // 1. ABC 2. DEF 3. GHI
    });
    
    arr.forEach(print); // "ABC" "DEF" "GHI"
    📍 indexOf() , lastIndexOf()ハーモニー
    const arr = [10,20,30,40,50,10];
    console.log(arr.indexOf(40)); // 3
    console.log(arr.indexOf(70)); // -1, 배열에 존재하지 않을 경우
    console.log(arr.indexOf(10)); // 0
    // 1번 index 이후부터 존재하는 원소를 찾아 index값 반환
    console.log(arr.indexOf(10,1)); // 5
    // 배열 끝에서부터 원소를 찾아 index값 반환
    console.log(arr.lastIndexOf(10)); // 5
    📍 includes()
  • アレイに要素が含まれているか確認する
  • ハーモニー
    const arr = [1,2,3,4,5];
    console.log(arr.includes(3)); // true
    console.log(arr.includes(8)); // false
    📍 find(function)ハーモニー
    const arr = [1,2,3,4,5];
    const result = arr.find((item)=>{
      return item%2 ===0; // 식이 true일 경우 반복을 멈추고 item 값을 반환합니다.
    });
    console.log(result); // 2
    // 주의점 : 첫번째 값만 반환하고 반복이 종료됨
    📍 findIndex(function)ハーモニー
    const arr = [
      { number : 1, name : "ksh" },
      { number : 2, name : "eyj" },
      { number : 3, name : "wsb" }
    ];
    const result = arr.findIndex((item)=>{
      if(item.number === 2){
        return true;
      }
      return false;
    });
    console.log(result); // 1, arr 배열의 index 1 위치의 값
    // 주의점 : 첫번째 값만 반환하고 반복이 종료됨
    📍 filter(function)
  • 条件を満たす全ての要素をアレイに戻す
  • ハーモニー
    const arr = [1,2,3,4,5,6,7,8];
    const result = arr.filter((item)=>{
      return item % 2 === 0;
    });
    console.log(result); // [ 2, 4, 6, 8 ]
    📍 reverse()
  • 逆順
  • ハーモニー
    const arr = [1,2,3,4,5];
    console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]
    📍 map(function)
  • 関数を受け取って特定の機能を実行し、新しいアレイに戻る
  • ハーモニー
    const arr = [
      { number : 1, name : "ksh" },
      { number : 2, name : "eyj" },
      { number : 3, name : "wsb" }
    ];
    
    // ※ 현업에서 많이 사용되는 방식!!!
    const newArr = arr.map((item,index)=>{
      return Object.assign({}, item, {
        odd : item.number % 2 === 1
      })
    });
    
    console.log(newArr)
    // [ { number: 1, name: 'ksh', odd: true },
    // { number: 2, name: 'eyj', odd: false },
    // { number: 3, name: 'wsb', odd: true } ]
    📍 join()
  • 文字列連結
  • ハーモニー
    const arr = ['Hello','My','name','is','KSH'];
    console.log(arr.join()); // Hello ,My ,name ,is ,KSH
    console.log(arr.join("")); // HelloMynameisKSH
    console.log(arr.join(" ")); //Hello My name is KSH
    📍 split()
  • 文字列分離
  • ハーモニー
    const arr = 'Hello My name is KSH';
    console.log(arr.split(' ')); // [ 'Hello', 'My', 'name', 'is', 'KSH' ]
    📍 Array.isArray()
  • 文字列分離
  • ハーモニー
    // 객체
    const arr1 = {
      name : 'KSH',
      age : 26
    }
    
    // 배열
    const arr2 = [ 'SHK', 26 ];
    
    console.log(typeof(arr1)); // object
    console.log(typeof(arr2)); // object
    
    console.log(Array.isArray(arr1)); // false
    console.log(Array.isArray(arr2)); // true
    📍 sort(function)
  • 並び順、並び自体変更
  • Lodash:実務でよく使う、勉強!
  • ハーモニー
    let arr = [5, 3, 1, 4, 2];
    console.log(arr); // [ 5, 3, 1, 4, 2 ]
    arr.sort();
    console.log(arr); // [ 1, 2, 3, 4, 5 ]
    
    // ※ 주의 : 숫자 자체가 아닌 숫자의 앞자리 수를 기준으로 정렬함
    
    let arr1 = [13, 5, 41, 20, 3];
    console.log(arr1); // [ 13, 5, 41, 20, 3 ]
    arr1.sort();
    console.log(arr1); // [ 13, 20, 3, 41, 5 ]
    
    arr1.sort((a, b) => {
      return a - b;
    });
    console.log(arr1); // [ 3, 5, 13, 20, 41 ]
    📍 reduce()ハーモニー
    const arr = [1, 2, 3, 4, 5];
    
    // prev : 누적 계산값, cur : 현재값
    const result = arr.reduce((prev, cur) => {
      return prev + cur; // 누적값 += 현재값
    },0); // 0은 초기값
    console.log(result) // 15
    
    const userList = [
      { name : "KSH", age : 26 },
      { name : "EYJ", age : 17 },
      { name : "WSB", age : 33 },
      { name : "LSH", age : 42 },
      { name : "KMJ", age : 8 },
      { name : "LHG", age : 23 },
    ];
    
    const result = userList.reduce((prev, cur)=>{
      if(cur.age > 19){
        prev.push(cur.name);
      }
      return prev;
    }, []); // 초기값 [] > 빈 배열
    
    console.log(result); // [ 'KSH', 'WSB', 'LSH', 'LHG' ]
    
    // recuedRight() 는 reduce()와 같지만 오른쪽부터 연산한다는 점이 다릅니다.
    📍 配列で重複する文を使用する例
  • 配列のlengthmethodにより、配列長さに等しい繰り返し文を使用できます!
  • ハーモニー
    let days = ['월','화','수','목','금','토','일'];
    for(let i = 0; i < days.length; i++){ // days 배열의 길이만큼 반복
      console.log(days[i]);
    }
  • 配列の値を呼び出す場合はfor ... inを使用できますが、メリットよりもデメリットが多いため、使用は推奨されません.
  • とは逆に、タイルを使う場合に使うfor ... of
  • for(let i = 0; i < arr.length; i++)ゲートと比較すると、使いやすいがインデックス値が得られないというデメリットがあります.
  • ハーモニー
    let days = ['월','화','수','목','금','토','일'];
    for(let day of days){
      console.log(day); // '월','화','수','목','금','토','일'
    }