[JS]Array宣言とメソッドクリーンアップ


Array(配列)を使用して、大量のデータを格納および処理し、対応するpush、pop、slice、splice、filter、mapメソッドを理解できます.

1.Array宣言方法


(1)空のアレイの宣言>アレイの作成>アレイ出力

var arrBooks = new Array(); //배열 선언
  arrBooks[0] = '노르웨이의 숲';
  arrBooks[1] = '이방인';![](https://media.vlpt.us/images/cecy-coding/post/410dc54c-2cd2-4903-93a3-c6186220db85/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.29.34.png)![](https://media.vlpt.us/images/cecy-coding/post/eb82d1c5-a277-4e36-b42f-11fbe5a8a4e7/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.58.22.png)![](https://media.vlpt.us/images/cecy-coding/post/c916f180-a2fb-40c4-93ff-426c56fa6b76/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%209.58.22.png)
  arrBooks[2] = '마담 보바리';
  arrBooks[3] = '달과 6펜스';  //배열 생성

  for (var i = 0; i < arrBooks.length; i++){
      document.write(arrBooks[i]+'<br>');  //배열 출력
  }

(2)初期値によるアレイの作成>アレイ出力

var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');  //배열 선언 +생성

  for (var i = 0; i < arrBooks.length; i++){
      document.write(arrBooks[i]+'<br>');  //배열 출력
  }

2.Arrayに関する方法


(1) push()

push()は、配列の最後に新しい値を追加します.
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.push('자기만의 방');

document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리,달과6펜스,자기만의 방

(2) pop()

pop()は、配列の最後の値を削除します.
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
arrBooks.pop();

document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리

(3) slice()

slice()元の配列を変更せずに、最初から最後の値「前」までの配列をコピーすることで、新しい配列を返します.slice(start,end)
 var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
 var arrBooks1 = arrBooks.slice(0, -2); 

document.write(arrBooks1);  // 출력 - 노르웨이 숲,이방인

*詳細はこちら

slice(start,end)値段をつける
(1)定義されていない場合は0から
(2)負数は配列の末尾から
(3)配列の長さが配列の長さ以上である場合、空の配列を返す.
の最後の部分
(1)指定されていない場合は、配列の末尾に移動します.
(2)負の値を指定した場合、終了から終了までの値の前
(3)配列長が等しいか大きい場合は,配列の末尾を返す.

(4) splice()

splice()は、既存の配列の要素を削除、置換、および追加することによって配列を返します.splice(start,deleteCount,추가요소1,추가요소2..)
 // 0번째 요소부터 2개가 삭제된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(0, 2);

    document.write(arrBooks); //출력 - 마담보바리,달과6펜스
    document.write(arrBooks1); // 출력 - 노르웨이의 숲,이방인
//0번째 요소부터 2개가 삭제되고, 그자리에 새로운 요소가 추가된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(0, 2, '인생의 베일');

    document.write(arrBooks); //출력 - 인생의베일,마담보바리,달과6펜스
    document.write(arrBooks1); // 출력 - 노르웨이의 숲,이방인
//3번째 요소부터 0개가 삭제되고, 그자리에 새로운 요소가 추가된다.
    var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
    var arrBooks1 = arrBooks.splice(3, 0, '인생의 베일');

    document.write(arrBooks); //출력 - 노르웨이의 숲,이방인,마담보바리,'인생의 베일,달과6펜스
    document.write(arrBooks1); // 출력 - end가 0이기 때문에 아무것도 반환하지 않는다.
//start의 절댓값이 배열의 길이보다 길기때문에 start는 0이다. 즉, 0번째 요소부터 1개가 삭제된다. 
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
var arrBooks1 = arrBooks.splice(-5,1);

document.write(arrBooks); //출력 - 이방인,마담보바리,'인생의 베일,달과6펜스
document.write(arrBooks1); // 출력 - 노르웨이의 숲

*接続の詳細


値段をつける
(1)負数の場合は,配列の末尾から数える.
(2)ディスカウントがタイルの長さより長い場合は0に設定します.
deleteCount
(1)省略または配列.lengthより大きい場合は、starからすべての要素を削除します.
(2)0以下の場合、要素は削除されません.
(3)指定された配列の長さがその配列の長さより大きい場合は、実際の開始インデックス配列の長さに設定します(この部分はまだ理解されていませんが、もう一度見てください!)
他の要素を指定しない場合は、要素を削除するだけです.

(5) filter()

filter()は、与えられた関数条件を満たすすべての要素を新しい配列に戻す.filter(element[,index[,array]])[,thisArg])
var arrBooks = new Array('노르웨이의 숲', '이방인', '마담보바리', '달과6펜스');
var arrBooks1 = arrBooks.filter(arrBooks => arrBooks.length >6);

console.log(arrBooks1); // 출력 - 노르웨이의 숲  
このArgパラメータがフィルタに提供されている場合、呼び出し時にその値がcallbackのこの値に渡され、callbackが観察できるこの値は、この値を決定する関数の一般的なルールに基づいて決定されます.
function isBigEnough(value) {
        return value >= 6;
    }
var filltered = [1,2,3,4,5,6,7,8,9,10].filter(isBigEnough);
    console.log(filltered)

(6) map()

map()は、配列内の各要素に対して所与の関数を呼び出す結果を新しい配列にまとめる.
// 요소에 5곱하기 
var arr = [1,2,3,4,5];
var map = arr.map(x => x * 5);
   console.log(map);  // 출력 - 5,10,15,20,25
// 함수 사용해서 배열 재구성하기
var abArray = [{author:'무라카미 하루키', book:'노르웨이의 숲'},
                  {author:'알베르 카뮈', book:'이방인'},
                  {author:'귀스타브 플로베르', book:'마담보바리'},
                  {author:'서머싯 몸', book:'달과 6펜스'}];
var reformattedArray = abArray.map(function(obj){
var rObj = {};
rObj[obj.author] = obj.book;
return rObj;
   });
   console.log(reformattedArray);  // {무라카미 하루키 : "노르웨이의 숲"}
                                   // {알베르 카뮈: "이방인"}
                                   // {귀스타브 플로베르 : "마담보바리"}
                                   //{서머싯 몸 :"달과 6펜스"}

今日の想い


今日の内容は少し時間をかけて勉強しました.コンセプトを一つ一つ見て、出力値を確認する例を作りました.sliceの負の値が理解できずにグーグル化し、spliceから値を削除できない場合は何ですか?グーグル、filterのthisArg、mapのfunction(obj)どうしたの...?そしてgooglingのgooglingを通って簡単な例を真似しましたが、もっと応用して、思う存分使うようにしなければなりません.一週間かけてJSの基本を勉強しましたが、ここの知識を学ぶことでミニミニミニのものを作りたいと思います.今日のコードも面白かったです👻

補習する

  • は、今日学習したarray関連関数を再び直接作成します.
  • this
  • ミニミニミニのものを作ってみました.(20.11月toDoList完了!)
  • コメントページへのリンク


    (array)
    https://coding-factory.tistory.com/194?category=758270
    (詳細はslice)
    これは負の値が何なのかについての記事で、説明も詳しく、サンプルコードも多いので分かりやすいです.https://im-developer.tistory.com/103
    (接合の詳細について)
    http://www.gisdeveloper.co.kr/?p=2113
    (filter)
    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    (map)
    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map