1. 배열(Array)
배열 타입을 선언하지 않는다는 것을 제외하고는 자바와 유사하다.
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 배열 선언 1
var arrNum = [];
// 배열 선언 2
var arrStr = new Array();
// 배열에 데이터 넣기
arrNum = [1, 2, 3, 4]; // 한번에 넣는 방법
arrNum[4] = 5; // 특정 인덱스를 지정해서 넣는 방법
arrNum.push(6); // push() 함수를 통해 넣는 방법 : 마지막 인덱스 바로 다음에 넣는다.
// 배열의 크기 확인
console.log(arrNum.length)
// 배열안의 값 확인
console.log('arrayNum 안의 값 : ' + arrNum);
console.log('arrayNum 안의 값 : ', arrNum);
// 정말로 배열 안에는 아무 데이터 타입이나 다 들어가는가?
arrStr.push(1);
arrStr.push('A');
arrStr.push(false);
arrStr.push([10, 20, 30]);
arrStr.push(function(){
console.log('함수 실행')
});
console.log(arrStr[0]);
console.log(arrStr[1]);
console.log(arrStr[2]);
console.log(arrStr[3]);
arrStr[4]();
</script>
</html>
2. 배열 함수
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
<button onclick="arrPush()">push</button>
<button onclick="arrPop()">pop</button>
<button onclick="arrUnshift()">unshift</button>
<button onclick="arrShift()">shift</button>
<hr/>
<button onclick="arrSlice()">범위 자르기</button>
<button onclick="spliceDel()">splice Del</button>
<button onclick="spliceAdd()">splice Add</button>
<hr/>
<button onclick="arrConcat()">배열 병합</button>
<button onclick="arrDel()">delete</button>
<button onclick="arrJoin()">join</button>
</body>
<script>
function arrJoin(){
console.log(arry);
console.log(arry.join('-'));
}
function arrDel(){
console.log(arry);
delete arry[2]; //공간은 놔두고 값을 null 의 상태로 만들기 때문에 위험하다.
arry[2] = '';
console.log(arry);
}
function arrConcat(){
// console.log('concat');
// 배열1.concat(배열2, 배열3,...);
var arr1 = [1,2,3,4,5];
var arr2 = ['a','b','c','d','e'];
var newArr = arr1.concat(arr2); // 앞에 있는 배열을 기준으로 순서대로 합친다.
console.log(newArr);
}
// splice 는 특정범위의 요소를 삭제하거나 수정, 추가 가능
var arry = ['가','나','다','라','마','바','사'];
function spliceAdd(){
// splice(x번 인덱스부터, n개를 삭제, [추가,...]);
console.log(arry);
// arry.splice(2,2,'C','D'); // 수정
// splice 로 2번 인덱스에 C, D 추가해 보기
arry.splice(2,0,'C','D');
console.log(arry);
}
function spliceDel(){
// console.log('splice del')
// splice(x번 인덱스부터, n개를 삭제);
console.log(arry);
arry.splice(2,2);
console.log(arry);
}
// 원본은 유지되고, 잘라낸 배열을 반환
function arrSlice(){
var numArr = [0,1,2,3,4,5];
// (보여줄 인덱스, 버릴 인덱스)
numArr.slice(1,3);
var newArr = numArr.slice(1,3);
console.log(numArr, '->', newArr);
}
var arr = [];
var i = 1;
function arrPush(){
arr.push(i);
i++;
console.log(arr);
}
function arrPop(){
var num = arr.pop();
console.log(num, arr);
}
function arrShift(){
var num = arr.shift();
console.log(num, arr);
}
function arrUnshift(){
arr.unshift(i);
i++;
console.log(arr);
}
</script>
</html>
*Shallow Copy*
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
</body>
<script>
var x = 10;
var y = x; // 10
x = 20;
console.log(x,y);
var a = [1,2,3,4,5];
var b = a;
console.log('a : ',a);
console.log('b : ',b);
a[0] = 50;
a[4] = 100;
console.log('a : ',a);
console.log('b : ',b);
/*
a배열의 값을 수정했는데, b배열의 값도 함께 수정되는 현상
이것을 shallow copy 라고 부른다. (실수가 많이 일어나는 부분)
b = a 가 a 배열이 b 에 복사된 것이 아니라 링크 된 것으로 보는게 맞다.
*/
var src = ['A','b','C','D','E'];
var dest = [];
for (var i = 0; i < src.length; i++) {
dest[i] = src[i];
}
console.log(src,dest);
src[0] = 1;
dest[4] = 100;
console.log(src,dest);
</script>
</html>
자바스크립트에서는 3차원 배열은 지원하지 않는다.
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 자바스크립트 에서는 정식적으로 3차원까지는 지원하지 않는다. (다른 방법을 사용해야 함)
var apt = [
[0,1,2,3,4],
[10,11,12,13,14],
[20,21,22,23,24],
[30,31,32,33,34],
[40,41,42,43,44]
];
console.log(apt);
console.log(apt[3][2]);
console.log(apt[2][2]);
console.log(apt[4][4]);
var royal = [];
// 아파트 처럼 5개층 5개호 아파트로 만들어 보자(push 사용해서)
royal.push([0,1,2,3,4]);
royal.push([10,11,12,13,14]);
royal.push([20,21,22,23,24]);
royal.push([30,31,32,33,34]);
royal.push([40,41,42,43,44]);
console.log(royal);
</script>
</html>
3. 객체(Object)
자바스크립트에서 여러 데이터를 담을 수 있는 것은 array 와 Object 가 있다.
Object 는 어떤 값이든 담을 수 있다.
그리고 Object 안에 담긴 값을 우리는 속성(attribute) 라고 부른다.
<html>
<head>
<meta charset="UTF-8">
<title>JAVA SCRIPT</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
</body>
<script>
// 오브젝트 만드는 방법 1 - 초기에 값을 넣고 시작
var car = {type:'Fiat', model:500, color:'white'};
console.log(car);
// 오브젝트 만드는 방법 2 - 리터럴
var person = {};
// 오브젝트 만드는 방법 3 - new 키워드 사용
var computer = new Object();
//object 에 값 추가 하기 1 - java 에서 객체 사용 하듯이
person.name = 'lee';
person.gender = 'male';
person.age = 26;
console.log(person);
//object 에 값 추가 하기 2 - 오브젝트는 인덱스가 문자열인 배열이다.
computer['cpu'] = 'octa core';
computer['ram'] = '16GB';
computer['ssd'] = '2TB';
computer['price'] = 1400000;
console.log(computer);
// 오브젝트 안에도 함수가 들어갈 수 있다.
person.work = function(){
console.log('일한다.');
};
console.log(person);
// 위에 선언한 함수 실행해 보기
person.work();
console.log('name : ',person.name);
console.log('age : ',person['age']);
// computer 내용도 모두 출력 해 보자
console.log('CPU : ',computer.cpu);
console.log('RAM : ',computer.ram);
console.log('SSD : ',computer.ssd);
console.log('PRICE : ',computer.price);
</script>
</html>
'JavaScript' 카테고리의 다른 글
| 01. JavaScript의 기초 (0) | 2024.03.07 |
|---|