1. 배열 생성하기
배열을 생성하는데는 예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있습니다.
// 길이가 0인 예전 방식의 배열 생성
var myArray1 = new Array();
// 길이가 10인 예전 방식의 배열 생성
// 10개의 자리에는 아무것도 들어 있지 않습니다.
var myArray2 = new Array(10);
// 길이가 0인 literal notation 방식의 배열 생성
var myArray3 = [];
// 예전 방식의 생성과 동시에 초기화
var myArray4 = new Array(1, 2, 3,"홍길동", "아무개");
// literal notation 방식의 생성과 동시에 초기화
var myArray5 = [1, 2, 3, "홍길동", "아무개"];
자바스크립트 배열에는 숫자, 문자열, 객체와 같은 서로 다른 타입의 데이터가 혼합되어 들어갈 수 있습니다.
※ 참고
배열 요소를 프로그램으로 동적으로 만들 경우 마지막 배열 요소 끝에 콤마(,)를 붙이지 않으려면 매 반복마다 마지막인지를 체크 해야 합니다. 최신 브라우저에서는 마지막에 붙는 콤마를 무시하여 이러한 작업을 쉽게 할 수 있도록 해 줍니다.
var myArray4 = new Array(1, 2, 3,"홍길동", "아무개",);
var myArray5 = [1, 2, 3, "홍길동", "아무개",];
IE 에서는 new Array() 구문에서 마지막 콤마를 사용하면 에러 입니다. 리터럴 표기법을 사용할 경우 IE 9 이상에서는 정상적으로 동작하고, IE 8 이하에서는 요소의 갯수가 하나 더 포함됩니다. 위의 예에서 배열 길이가 6으로 나옵니다.
2. 배열내의 요소에 접근하기
배열의 길이를 구하기 위해서는 length 프로티를 사용합니다.
console.log(myArray5.length); // 5를 출력합니다.
배열 요소에 접근하기 위해서 인덱스를 사용합니다. 배열 인덱스는 0부터 시작합니다.
var lastItem = myArray5[4]; // 아무개
데이터가 존재하지 않는 인덱스를 사용하게 되면 값을 undefined 입니다.
var notExist = myArray5[5]; // undefined
배열 요소의 내용을 바꾸려면 지정위치에 다른 값을 대입합니다.
// 첫번째 요소의 값을 "홍길동" 으로 변경합니다.
myArray5[0] = "홍길동";
3. 배열 끝에 값을 추가하기
배열의 끝에 값을 추가하는 방법을 두 가지가 있습니다.
// push 메소드를 사용하여 값을 추가합니다.
myArray5.push(6);
// 배열 인덱스를 이용하여 값을 추가 합니다.
myArray5[myArray5.length] = 6;
배열의 길이는 항상 배열의 마지막 요소 다음을 가리키는 인덱스가 됨을 이용합니다.
만약 현재 배열의 길이에서 건너뛰어 인덱스를 사용하여 값을 입력하면 가운데에는 undefined 가 삽입됩니다.
// myArray5의 길이가 6 일경우 다음을 실행하면
myArray5[8] = 8;
// myArray5[6] 과 myArray5[7] 의 값은 undefined 가 됩니다.
4. 배열 요소 삭제하기
특정 위치의 배열 요소를 삭제하기 위해서 사용할 수 있는 방법들 입니다.
세번째 요소를 지우지만 자리는 남겨 둡니다. 즉, 배열의 길이는 변하지 않습니다. myArray[2]의 값은 undefined 가 됩니다.
delete myArray[2];
세 번째 자리부터 한개를 지우고, 지워진 값을 반환합니다.
var value = myArray.splice(2, 1);
배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다.
var value = myArray.pop();
배열의 첫번째 요소를 제거하고, 제거된 요소를 반환합니다.
var value = myArray.shift();
5. 배열에 요소를 삽입하기
배열의 세번째 위치에 요소를 삽입합니다.
myArray.splice(2, 0, "A");
배열의 첫 번째 위치에 요소를 추가 합니다.
myArray.unshift("A");
6. 배열을 연결 합니다.
var array1 = [1,2,3];
var array2 = [4,5,6];
var array3 = [7,8,9];
// 두 배열을 연결 합니다.
var array3 = array1.conat(array2);
console.log(array3); // 1,2,3,4,5,6
// 여러개의 배열을 연결 합니다.
var array4 = array1.concat(array2, array3);
console.log(array4); // 1,2,3,4,5,6,7,8,9
※ 참고
자바스크립트 배열에서 사용할 수 있는 메소드 목록 입니다.
메소드기능
concat() | 두개 또는 그 이상의 배열을 연결한 배열을 반환합니다. |
copyWithin() | 배열 내에서 첫 번째 인자 위치의 요소를 두 번째 인자 위치에 복사합니다. |
every() | 인자로 주어진 함수로 배열내의 모든 요소를 테스트해서 참일 경우 true를 반환합니다. |
fill() | 배열내의 모든 요소의 값을 주어진 값으로 채웁니다. |
filter() | 인자로 주어진 함수로 배열내의 모든 요소를 테스트해서 참인 요소만으로 만들어진 배열을 반환합니다. |
find() | 인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소를 반환 합니다. 찾지 못하면 undefined를 반환합니다. |
findIndex() | 인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. |
forEach() | 배열내의 모든 요소에 대해 인자로 주어진 함수를 실행합니다. |
indexOf() | 인자로 주어진 값과 같은 값을 가지는 첫 번째 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. |
isArray() | 인자로 주어진 객체가 배열이면 true를 반환합니다. Array.isArray(object); |
join() | 배열의 모든 요소를 인자로 주어진 분리자로 연결한 문자열을 반환합니다. 분리자를 주지 않으면 콤마(,)가 분리자 입니다. |
lastIndexOf() | 인자로 주어진 값을 배열의 뒤에서 부터 찾아서 첫 번째로 발견된 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. |
map() | 인자로 주어진 함수에 모든 각각의 요소를 적용한 값으로 이루어진 배열을 반환합니다. |
pop() | 배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다. 배열의 길이가 1 줄어 듭니다. |
push() | 배열의 끝에 인자로 주어진 같을 추가 합니다. 새 배열의 길이를 반환합니다. |
reduce() | 인자로 주어진 함수를 모든 요소에 적용하여 만들어진 단일 값을 반환합니다. 배열 요소에 대해 왼쪽에서 오른쪽으로 적용해 나갑니다. array.reduce(function(total, currentValue, currentIndex, arr), initialValue) |
reduceRight() | reduce() 와 같은 기능을 배열 요소에 대해 오른쪽에서 왼쪽으로 적용해 나갑니다. |
reverse() | 배열 요소의 순서가 뒤집힌 배열을 반환합니다. |
shift() | 배열에서 첫번째 요소를 제거하고, 제거된 요소를 반환합니다. |
slice() | 배열의 일부분을 잘라서 배열로 반환합니다. array.slice(start, end) |
some() | 인자로 주어진 함수를 배열의 요소에 대해서 적용해서 하나라도 참이면 true 를 반환합니다. |
sort() | 배열의 요소를 정렬합니다. 인자로 정렬에 사용될 비교 함수를 줄수 있습니다. 인자가 없으면 알파벳순으로 오른차순으로 정렬합니다. |
splice() | 배열에 요소를 추가 또는 삭제 합니다. |
toString() | 배열을 문자열로 변환하여 그 결과를 반환합니다.분리자로 콤마가 사용됩니다. |
unshift() | 배열의 첫 번째 자리에 새 요소를 추가합니다. 새로운 배열의 길이를 반환합니다. |
valueOf() | 배열 그 자체를 반환합니다.var b = a.valueOf(); 라면 a === b 입니다. |
출처: https://offbyone.tistory.com/133 [쉬고 싶은 개발자]
'TIL > TIL' 카테고리의 다른 글
JSON, JSON.parse(), JSON.STRINGIFY ( POST )예제 (0) | 2020.01.22 |
---|---|
JSON, JSON.stringify, ajax (0) | 2020.01.22 |
Array(5).join(" " + object.key); (0) | 2020.01.21 |
Array Method (0) | 2020.01.21 |
reduce & map & filter & every & some (0) | 2020.01.21 |
comment