728x90
자바스크립트의 배열
배열의 문법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배열의 문법</title> <script> /* 배열(arrry)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터타입 변수 => 하나의 데이터를 저장하기 위한 것 배열 => 여러 개의 데이터를 하나의 변수에 저장하기 위한 것 */ // 일반적인 변수 - 하나의 데이터만을 저장할 수 있음. var name = '더블에스' console.log(name); // * 배열의 생성 // 대괄호('[]')은 배열을 만드는 기호, 대괄호 안의 데이터를 콤마(,)로 구분해서 나열하면된다. // 배열에 저장된 데이터의 위치를 색인, index라고 부른다. // index는 0부터 시작한다. var member = ['DoubleS', 'DoubleJ', 'DoubleK']; console.log(member[0]); console.log(member[1]); console.log(member[2]); </script> </head> <body> </body> </html> | cs |
배열의 효용성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배열의 효용성</title> <script> /* 배열의 효용성, 즉 배열이 없다면? 아래의 코드를 보고 불편함을 느껴보자. */ // 함수 하나당 하나의 결과값(변수에 저장된 결과값)만을 리턴해줄수 있다. function get_member1(){ return 'doubles'+'<br/>'; } function get_member2(){ return 'doublej'+'<br/>'; } function get_member3(){ return 'doublek'+'<br/>'; } // 정의된 함수를 일일히 호출해줘야한다. document.write(get_member1()); document.write(get_member2()); document.write(get_member3()); // 배열을 사용한다면 3명의 이름을 리턴 할수 있다. function get_members(){ return ['DoubleS', 'DoubleK', 'DoubleJ'] } document.write(get_members()); </script> </head> <body> </body> </html> | cs |
배열의 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배열의 사용</title> <script> /* 배열은 반복문과 주로 함께 쓰인다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내 처리할수 있기때문이다. */ // * 배열의 결과 값을 리턴하는 함수정의 function get_members(){ return ['DoubleS','DoubleA','DoubleD','DoubleC'] } // * 함수 호출하고 member라는 변수에 리턴값을 저장한다. members = get_members(); for(var i = 0; i < members.length; i++){ // 배열에 저장된 index의 길이만큼 반복문을 수행한다. document.write(members[i].toUpperCase()); // 배열에 담긴 문자열을 대문자로 출력 document.write('<br/>'); document.write(members[i].toLowerCase()); // 배열에 담긴 문자열을 소문자로 출력 document.write('<br/>'); } </script> </head> <body> </body> </html> | cs |
배열의 제어
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배열의 제어</title> <script> /* 배열은 복수의 데이터를 효윺적으로 관리, 전달하기 위한 목적으로 고안된 데이터타입 데이터의 추가, 수정, 삭제와 같은 일을 편하게 할 수 있도록 돕는 다양한 기능을 가지고있다. */ // ** 배열의 추가 // * length(배열의 크기) var arr = ['a', 'b', 'c', 'd', 'e']; alert(arr.length); // 6 출력 console.log(arr); // * push(배열의 추가, 하나의 값만 추가) var li = ['a', 'b', 'c', 'd', 'e']; li.push('f'); alert(li); console.log(li); // ['a', 'b', 'c', 'd', 'e', 'f'] f가 배열에 추가된다. // * concat(배열의 추가, 다수의 값을 추가) li = li.concat(['g', 'h']); alert(li); console.log(li); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] g와 f가 배열에 추가된다. // * unshift(배열의 시작점에 추가) li.unshift('x'); alert(li); console.log(li); // ['x', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] x가 배열의 맨 앞에 추가된다. // * splice(배열의 특정구간을 추출, 특정구간에 특정배열 추가) // 변수.splice(index, howmany(index에서 제거될 원소의 수), element1, ..., elementN); li.splice(2, 0, 'Y'); alert(li); console.log(li); // ['x', 'a', 'Y','b', 'c', 'd', 'e', 'f', 'g', 'h'] 배열의 index 2의 위치에 대문자 Y가 추가된다. li.splice(1, 4, 'A', 'B', 'C', 'D'); alert(li); console.log(li); // ['x', 'A', 'B', 'C', 'D', 'd', 'e', 'f', 'g', 'h'] // 배열의 index 1의 위치부터 4의 위치까지 배열이 삭제되고 // 'A', 'B', 'C', 'D'가 추가된다. // ** 배열의 제거 // * shift(배열의 맨앞자리 제거) var di = ['가', '나', '다', '라', '마']; di.shift(); alert(di); console.log(di); // ['나', '다', '라', '마'] 배열의 맨앞자리 '가'가 제거된다. // * pop(배열의 맨뒷자리 제거) di.pop(); alert(di); console.log(di); // ['나', '다', '라'] 배열의 맨뒷자리 '마'가 제거된다. // ** 배열의 정렬 // * sort(배열의 오름차순정렬) var si1 = ['f', 'e', 'd', 'c', 'b', 'a']; si1.sort(); alert(si1); console.log(si1); // * reverse(배열의 내림차순정렬) var si2 = ['a', 'b', 'c', 'd', 'e', 'f']; si2.reverse(); alert(si2); console.log(si2); </script> </head> <body> </body> </html> | cs |