자바스크립트에서 배열을 생성하는데는 new 명령을 사용하는 방법과 리터럴 표기법 을 사용하는 방법이 있다.
1// 길이가 0인 new 명령 배열 생성2var arr1 = new Array();3
4// 길이가 10인 new 명령 배열 생성5var arr2 = new Array(10);6
7// 길이가 0인 리터럴 표기법 배열 생성8var arr3 = [];9
10// new 명령으로 배열 생성과 동시에 초기화11var arr4 = new Array(1,2,3,"홍길동","아무개");12
13// 리터럴 표기법으로 배열 생성과 동시에 초기화14var arr5 = [1,2,3,"홍길동","아무개"];자바스크립트에서 2차원 배열을 생성하는 방법으로는 다음과 같은 방법들이 있다.
1// 초기값 할당해서 생성2var arr1 = [['a','b'],['c','d'],['e','f'],['g','h'],['i','j']];3
4// 반복문 사용해서 생성5var arr2 = new Array(5);6
7for(var i=0; i< arr.length; i++){8 arr[i] = new Array(2);9}10
11// 2차원 배열 생성 함수를 만들어서 사용12function createArray(rows,columns){13 var arr = new Array(rows);14 for (var i=0; i<rows ; i++){15 arr[i] = new Array(columns); 16 }17 return arr;18}19
20var arr3 = createArray(5,2);21
22// ES6 방식 (arr[5][2])23const arr4 = Array.from(Array(5),() => new Array(2));24
25// ES6 방식 (arr[5][2] null로 초기화해서 생성)26const arr5 = Array.from(Array(5),() => Array(2).fill(null));배열의 길이는 length 프로퍼티를 이용하면 얻을 수 있다.
1const arr = [1,2,3,4,5];2const length = arr.length;3
4// length의 값은 5배열에 요소를 추가 할 때는 push 메소드와 unshift 메소드를 활용한다.
push
배열의 뒤에 요소를 추가 할 때 사용한다.
1const arr = ['h','e','l','l','o'];2arr.push('!');3
4// arr = ['h','e','l','l','o','!']unshift
배열의 앞에 요소를 추가할 때 사용한다.
1const arr = ['h','e','l','l','o'];2arr.unshift('!');3
4// arr = ['!','h','e','l','l','o']배열 요소를 삭제할 때는 pop 메소드와 shift 메소드를 활용한다.
pop
맨 뒤의 요소를 삭제할 때 사용한다.
1const arr = ['h','e','l','l','o'];2arr.pop();3
4// arr = ['h','e','l','l']shift
맨 앞의 요소를 삭제할 때 사용한다.
1const arr = ['h','e','l','l','o'];2arr.shift();3
4// arr = ['e','l','l','o']배열의 특정 인덱스 요소를 삭제하고 싶을 때는 splice 메소드를 사용한다.
splice ( start , deleteCount ) 의 구성으로 start에는 배열 삭제를 시작할 인덱스, deleteCount에는 제거할 요소의 개수를 입력한다.
1const arr = ['h','e','l','l','o'];2arr.splice(1,2);3
4// arr = ['h','l','o']5
6const arr2 = ['h','e','l','l','o'];7arr2.splice(1,1);8
9// arr2 = ['h','l','l','o']indexOf배열의 값으로 인덱스를 찾는 방법으로 배열에서 주어진 값과 일치하는 제일 앞의 인덱스 를 반환한다. 없으면 -1 을 반환한다.
1const arr = ['h','e','l','l','o'];2arr.indexOf('e'); // 13arr.indexOf('k'); // -1concat배열을 매개변수로 주어진 배열/ 값과 이어 붙인 새로운 배열로 반환한다.
1const arr1 = ['h','e'];2const arr2 = ['l','l','o'];3const newArr = arr1.concat(arr2); // ['h','e','l','l','o']4
5const num1 = [1,2,3];6const num2 = [4,5,6];7const num3 = [7,8,9];8
9num1.concat(num2,num3);10// [1,2,3,4,5,6,7,8,9]reverse배열의 순서를 거꾸로 돌린다.
1const arr = ['h','e','l','l','o'];2
3arr.reverse();4// ['o','l','l','e','h']sort배열을 정렬시킨다.
1const Name = ['Jongmin','Kate','Frank','Julia'];2
3Name.sort();4// ['Frank','Kate','Jongmin','Julia']숫자의 경우는 compareFunction 값을 생략하게 된다면 숫자를 유니코드로 인식하기 때문에 compareFunction이 필요하다.
1const arr = [4,3,5,1,2];2
3arr.sort(function(a,b){4 return a-b;5})6// [1,2,3,4,5] 오름차순7
8arr.sort(function(a,b){9 return b-a;10})11// [5,4,3,2,1] 내림차순join배열의 모든 요소를 하나의 문자열로 합치는 방법으로 매개변수가 없을 경우 기본값으로 콤마 (,) 로 문자를 합친다.
1const arr = ['감자','당근','깨'];2
3const join1 = arr.join(); // '감자,당근,깨'4const join2 = arr.join(', '); // '감자, 당근, 깨'5const join3 = arr.join('+'); // '감자+당근+깨'6const join4 = arr.join(''); // '감자당근깨'map 메소드는 배열의 모든 요소에 대해서 주어진 콜백 함수를 호출하고, 배열의 각 요소에 대해 실행한 callback 결과를 모은 새로운 배열을 반환한다.
1arr.map(callback(currentValue[, index[, array]])[, thisArg]);1const arr = [1,2,3];2
3let result = arr.map((value)=>{4 return value*2;5});6// result = [2,4,6]7
8let result2 = arr.map((v)=>{9 if(v%2){10 return '홀수';11 }12 return '짝수';13});14// result2 = ['홀수','짝수','홀수']배열의 특정 값을 기준으로 필터링 할 때 사용한다.
1arr.filter(callback(element[, index[, array]])[, thisArg]);1const arr = [1,15,100,1005];2
3const result1 = arr.filter(arr=>{4 return arr>10;5});6// result1 = [15,100,1005]7
8const result2 = arr.filter(it=>{9 return it%2;10})11// result2 = [1,15,1005]reduce 메소드는 순회하면서 값을 축적시킬 때 사용한다.
축적값 (accumulator,acc) , 현재 값(curr), 현재 인덱스(index), 요소(arr) 의 값을 가진다.
1배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);1const people= [2 {3 id:1,4 name:'Jongmin',5 age:256 },7 {8 id:2,9 name:'James',10 age:3511 },12 {13 id:3,14 name:'Khalid'15 age:2316 },17];18
19const sumAge = people.reduce((acc,curr)=>{20 return acc+curr.age;21},0);22// sumAge = 83