728x90
반응형
객체
프로퍼티와 메소드를 묶어서 표현하는 기법
객체의 종류
생성자함수 : 객체를 생성할때 자동으로 호출하는 함수
내장 객체 build in object : 생성자가 미리 작성되어있음. (자바로 따지면 생성자는 클래스)
- 생성자(클래스)만 있는거
- 이미 new까지 되어있는것
객체 생성 방법
객체 상수로부터 만든다. (리터럴 객체)
만들면서 생성한다. 일회용으로 쓴다.
같은 구조를 띄고있는데 컬러만 바꾸고싶을때는? 다시 만들어야함. 재활용불가
필수! this를 쓰지 않으면 객체를 못알아듣는다. (전역변수라고 착각함.)
생성자 함수를 이용해서 만든다.
생성자 함수자체가 클래스 설계도면이다.
그냥보면 함수인지 생성자 함수인지 알아보기 힘들다.
메소드가 아니야. class목적으로 쓰는거라는걸 대문자로 표현함
function Car(model, speed, color){
this.model = model,
this.speed = speed,
this.color = color;
→ 이 안을 this로 쓰면 생성자함수이고, var였으면 함수이다.
}
객체에 속성과 메소드 추가가능 : 원래 설계도면에 없던걸 추가할수있다.
<객체를 다루는 2개 방법>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 custom object</title>
<script>
//자바스크립트에서 객체의 종류는 2개
//1. 내장객체 : document, window, navigation..
//new까지는 안되있는애들 : Date(), String(), Number(), Array(), Math()...
//2. 사용자 정의 객체 (여기서 사용자는 개발자)
//내가 만드는 객체! 2가지 방법이있다.
//2.1 리터럴 객체 : 객체를 생성하면서 설계하는 방식
var person = {//{를 만들어서 객체를 만든다. }
//멤버변수 - 속성(property)
name:"sam",
age : 20, //함수 추가하고싶으면 , 찍어야한다
//멤버함수 - method
//객체안에 있으면 method, 객체 밖에서쓰면 function이다.
show : function(){
// document.write(name+", ");
// document.write(age+"<br>"); //이러면 안나옴
document.write(this.name+", ");
document.write(this.age+"<br>");
//this키워드가 없으면 멤버변수를 인식하지 못한다.
//전역변수로 인식해버린다.
}
};
//객체의 멤버, 즉 속성을 출력해보자
document.write("이름 : "+person.name+", ");
document.write("나이 : "+person.age+"<br>");
//객체 멤버함수 메소드 호출
person.show();
//그런데 새로운 리터럴 객체가 필요하다면? 다시 설계를 해야한다.
var person2 = {
name:"robin",
age:24,
show : function(){
document.write("ROBIN show : "+this.name+","+this.age+"<br>");
},//컴마를 무조건찍어야한다.
add : function(a,b){
var c = a+b
document.write("add : "+c)+"<br>";
}
};
person2.show();
person2.show(10); //파라미터 없는데 전달하면? 상관없다. 동작되는데는 문제없다.
person2.add(5,3);
document.write("<br>");
//person.add(); // 없는 함수를 불러낸다? 에러! 이 다음에 코드를 쓰면 실행불가
// 자바스크립트는 인터프리터언어이다. 번역이 안된다면 에러!
//js는 유연한언어이다. 객체를 생성한 후에 객체의 멤버를 추가할수있다.
person.tel = "01012345678"; //이때 새로운 프로퍼티가 추가된다.
document.write("name : "+person.name+",");
document.write("age : "+person.age+",");
document.write("tel : "+person.tel);
document.write("<br>");
person.show(); //이거는 tel이 안나옴
person.out = function(){
document.write("out : "+this.name+"<br>"); //여기서 this는 person을 가르킨다.
document.write("out : "+this.age+"<br>");
document.write("out : "+this.tel+"<br>");
}
person.out();
//혹시 대입한 적이없는 멤버변수를 출력하면? 어케됨?
document.write(person.address); //undefined가 나온다. 속성은 추가한거고 값은 undefined가 된다.
//쓰면 안좋다. 아주 귀찮아짐
document.write("<hr>");
//리터럴 객체는 여러개의 속성, 메소드가 있을때..
//객체를 생성할때마다 관련 설계코드를 모두 다시 작성해야한다.
//객체가 많이 사용될 때는 매우 짜증.. 그래서 생성자 함수를 이용하여 객체 생성
//미리 객체의 설계도를 만들어 놓고 필요할때마다 객체로 생성하여 사용하는 기법 등장
//2.2 생성자 함수를 이용한 객체 생성 [new 키워드로 객체 생성]
//!!! 클래스가 아니다!!!!!! 오해하기 쉬움!!!!!
//어떤 학생 객체 생성 : 이름, 나이, 전공
function Student(){ //생성자 함수를 나타내기위해 대문자로 시작함! 그냥 함수였다면 소문자로시작함
//함수랑 쓰임새가 똑같다.
//이 안에 함수는 지역변수(var), 생성자함수(this)는 속성 즉 프로퍼티가 있어야한다.
this.name = "kim";
this.age = "25";
this.major = "android";
//멤버함수 - method (기능을 만들자!) function쓰면 안된다.
this.show = function(){
document.write("show : "+this.name+", "+this.age+", "+this.major);
}
this.setMember = function(name,age,major){
this.name = name;
this.age = age;
this.major = major;
}
}//이 설계도(생성자함수)를 이용하여 객체를 생성해보자
var stu = new Student(); //대소문자 조심!!
stu.show();
//또 다른 학생 객체가 필요할때 또 설계할 필요가 없다
var stu2 = new Student();
//두번째 학생의 멤버 속성값 대입
stu2.name = "bbb";
stu2.age=25;
stu2.major="ios";
document.write("<br>");
stu2.show(); //이렇게 출력하니 멤버값을 일일이 대입하려니.. 여러줄로 코딩된다.
//이거짜증남
document.write("<br>");
var stu3 = new Student();
stu3.setMember("ccc",26,"web"); //즉 멤버값을 입력하는 기능메소드가 있다면 파라미터를 이용해 편하게 쓸수있다.
stu3.show(); //setMember를 왜 만들었는지를 알아야한다 귀찮으니까 만든거임.
//이런식이면 객체 생성 후에 항상 멤버값을 대입하는 기능메소드를 호출하는 코드가 추가로 요구됨
//그래서 객체를 new(생성)하면서 멤버값들을 전달할 수 있다면 코드가 더 간결할 것
//그래서 생성자 함수에 파라미터를 전달
function Stu(name,age,major){
this.name = name;
this.age = age;
this.major = major;
this.show = function(){
document.write("stu : "+ this.name +", "+this.age+", "+this.major+"<br>");
}
//setter, getter method가 있으면 좋지!
//이름만 따로 설정하고싶으면? setter를 설정해보자
this.setName=function(name){
this.name=name;
}
//getter 함수를 써보자. 하고싶은거 리턴한다.
this.getName=function(){
return this.name;
}
}
document.write("<br>");
var s = new Stu("ahn",32,"안드로이드");
s.show();
//만약! 정신나간애가 값을 안주면? undefined
var s2= new Stu();
s2.show();
s2.setName("hong");
document.write("name : "+s2.getName());
function Car(model,speed,color) //이게 생성자 함수라는걸 어떻게 알수있어? 함수가 아니야. 1. 대문자시작 2.안에 this로 변수정의 (멤버변수이다 지역변수가아님)
{
this.model=model;
this.speed=speed;
this.color=color;
this.brake = function(){
this.speed -= 10;
}
this.accel= function(){
this.speed += 10;
}
}
document.write("<br>");
var myCar = new Car("VVV1000",200,"red");
document.write("모델 : "+myCar.model+" 속도 : "+myCar.speed+"<br>");
myCar.accel();
document.write("모델 : "+myCar.model+" 속도 : "+myCar.speed+"<br>");
myCar.brake();
document.write("모델 : "+myCar.model+" 속도 : "+myCar.speed+"<br>");
//추가적인 내용들///
//1) in 키워드 : 연산자
document.write('name' in stu);//name속성이 없으면 true
document.write("<br>");
document.write('addr' in stu);
document.write("<br>");
//2) 객체안에 객체가 멤버로 존재할수있음.
var flight= {
airline : "Korean air",
number : 777,
arrival : {
nation : 'japan',
city : 'tokyo'
}
}
document.write(flight.arrival.city+"<br>");
document.write(flight['airline']+"<br>");
document.write("<br>");
//3) Object.create() 메소드 : 객체 clone기능
//리터럴 객체의 단점은? 같은 구성의 객체를 또 생성할때 코드를 전부 다시 작성해야한다.
//리터럴 : 사람이 이해할수있는 문자나 기호를 사용해 값을 생성하는 표기법
var p1 = {
name : "aaa",
age : 20,
show : function(){
document.write("show : "+this.name+" , "+this.age+"<br>");
}
}
var p2= Object.create(p1); //p1객체를 복제한다.
p2.name="bbb";
p2.age=30;
p2.show();
</script>
</head>
<body>
</body>
</html>
프로토타입
자바 클래스들은 HDD에 저장되어있다. 근데 RAM은 바로 HDD를 읽지 않는다.
RAM의 method영역에 사용하는애들만 가져온다. class는 method영역에 있다.
자바 스크립트는 이런게 되어있진않다. 객체마다 멤버변수, 함수를 갖고있다. (똑같은 코드를 갖고있으므로 비효율적이다.) → 이걸 개선하는게 prototype이라는 숨겨진 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>프로토타입</title>
<script>
//js는 리터럴 객체들 or 생성자 함수를 이용한 객체든 모둔
//멤버메소드가 객체마다 존재함. 낭비야 이거!
//같은 객체자료형마다 메소드가 하나만 존재하도록 하는 기법
function Person(name,age){
this.name = name;
this.age = age; //Person이라는 설계도면을 만듬.
//여기서 함수를 만들면 낭비가된다. 객체를 만들때마다 함수도 생기니까
}
//Person 자료형(생성자함수)에 하나만 존재하는 메소드 추가
Person.prototype.show = function(){//그 객체와 연결되는 프로토타입영역에 뭔가 쓸수있다
document.write("person : "+this.name+", "+this.age+"<br>");
}
var p1 = new Person("sam",20);
var p2 = new Person("robin",25);
p1.show(); //마치 객체가 가진 메소드인냥
p2.show();
</script>
</head>
<body>
</body>
</html>
자바 스크립트 내장 객체
생성자함수를 이용해서 객체를 만든다. 거기서 이미 만들어진 객체들
Date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Date 내장 객체</title>
<script>
//JS에서 미리 설계해둔 내장객체! (엄밀하게말하면 생성자함수- 자바의 class들)
//Date, Number, String, Math, Array....
//1. Date - Date는 생성자함수이고 클래스같은놈이다. 객체를 만들기위해서는 멤버변수가 필요함
var a = new Date(); //날짜 관리 객체 생성
document.write(a+"<br>"); //참조변수를 출력하면 자동 .toString()이 발동한다.
//a.toString 한것과 같다.
document.write(typeof(a)+"<br>"); //저 5개는 다 object로 나옴 (넘버,불린,언디파인,오브젝트,스트링)
//Date생성자 함수의 주요기능 메소드들...
document.write(a.toDateString()+"<br>"); //연월일, 요일이렇게 나온다.
document.write(a.toLocaleString()+"<br>"); //()를 해야한다. ()안하면 그냥 날것으로 나옴
document.write(a.getYear()+"<br>"); //1900년을 기준으로한다 그래서 123이 나옴. 컴퓨터가 나온시점을기준으로 한다.
document.write(a.getFullYear()+"<br>");
document.write(a.getMonth()+"<br>"); //월 표시가 0부터 시작한다. 그래서 +1해줘야한다.
document.write(a.getDate()+"<br>");
document.write(a.getHours()+"<br>");//0~23시까지
document.write(a.getMinutes()+"<br>");
document.write(a.getSeconds()+"<br>");
document.write(a.getTime()+"<br>"); //currentTimeMillis 1970/1/1 09:00:00 부터ms마다 카운트
//자바는 1970/1/1 00:00:00부터 시작
var b = new Date();//이순간은 현재시간
document.write(b.toLocaleString()+"<br>");
b.setFullYear(2018);
document.write(b.toLocaleString()+"<br>");
//생성자의 파라미터를 통해 특정 날짜 설정.
var c = new Date(2025,4,9); //2025년 5월 9일
document.write(c.toLocaleString()+"<br>");
var c = new Date("wed Sep 13 2017 13:40:13 GMT+0900"); //js는 덮어써진다 var무시
document.write(c.toLocaleString()+"<br>");
var c = new Date("wed Sep 13 2017"); //js는 덮어써진다 var무시
document.write(c.toLocaleString()+"<br>");
var c = new Date("2017.9.13"); //js는 덮어써진다 var무시
document.write(c.toLocaleString()+"<br>");
var c = new Date(1548151548000); //js는 덮어써진다 var무시
document.write(c.toLocaleString()+"<br>");
var c = new Date(0); //js는 덮어써진다 var무시
document.write(c.toLocaleString()+"<br>"); //1970. 1. 1. 오전 9:00:00
//두 날짜 사이의 비교
var a = new Date("2017.9.12");
var b = new Date();
var diff = b.getTime() - a.getTime(); //밀리세컨트를 계산하여여햔다. 월, 일 빼서 계산은의미없다
var diff = b-a //자동getTime()으로 계산
document.write("두 날짜 차이 : "+diff+"<br>");
var c = new Date(diff); //js는 덮어써진다 var무시
//밀리세컨드를 일수로 변환한다.
var sec = diff/1000;
var min = sec/60;
var hour = min/60;
var day = hour/24;
//한줄로계산하고 싶다면
var day = diff/(1000*60*60*24); //이렇게 쓰면 초분시를 나눈게 느껴진다.
document.write("기념일: "+day+"<br>");
//소수점을 제거해야한다.
day = Math.floor(day); //소수점을 바닥으로 내려!
document.write("두 날짜 차이 day : "+day+"일");
</script>
</head>
<body>
</body>
</html>
Number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>넘버 내장 객체</title>
<script>
//2. Number - 마치 안드로이드의 Wrapper 클래스 같은 역할
//수치형과 Number는 다른 자료형이다.
var a= 10;//수치형
var b = new Number(10); //object형
document.write(typeof(a)+"<br>");
document.write(typeof(b)+"<br>");
document.write((a==b)+"<br>"); //true
document.write((a===b)+"<br>"); //false
//Number 객체의 유용한 기능들.. 메소드들
var num = new Number(123.456);
//1) 지수표현식
document.write(num.toExponential()+"<br>"); //1.23456e+2
document.write(num.toExponential(2)+"<br>"); //1.23456e+2 소수점 2자리까지
//2) 소수점 자르기 [부동소수점--> 고정소수점 표현 방식]
document.write(num.toFixed()+"<br>");
document.write(num.toFixed(2)+"<br>"); //소수점 2자리
//3) 진법을 변환해서 표기(string으로...)
var num = new Number(10);
document.write(num.toString()+"<br>"); //10진법으로 출력
document.write(num.toString(16)+"<br>"); //16진법으로 출력
document.write(num.toString(8)+"<br>"); //8진법
document.write(num.toString(2)+"<br>"); //2진법
//4)수치형은 Number객체로 자동 Wrapping 됨
var a = 255;
document.write(a.toString(16)+"<br>"); //수치형인데 .찍으면 Number객체로 쓸수있다.
//변수에 넣지 않고도 수치형 값을 곧바로 Number로 사용할때는 소수점이 필수
document.write(10.54321.toFixed(2)+"<br>"); //바로 wrapping된다. 실수에.찍으면 바로 기능쓸수있다.
document.write(10.0.toString(2)+"<br>");
</script>
</head>
<body>
</body>
</html>
String
//3. String - 문자형의 Wrapper
var a= "Hello";
var b= new String("Hello");
document.write(typeof(a)+"<br>");
document.write(typeof(b)+"<br>");
document.write((a==b)+"<br>"); //true
document.write((a===b)+"<br>"); //false
//String 내장객체의 주요 기능 메소드들..
var s = "Hello world" ; //new String쓰지않아도 자동으로 래핑된다.
document.write(s.length+"<br>"); //멤버변수였다. 띄어쓰기까지 글자수
document.write(s.toUpperCase()+"<br>"); //리턴된 값만 받는거임
document.write(s.toLowerCase()+"<br>");
document.write(s+"<br>"); //원본은 불변이다. 이거 잊지말자
document.write(s.concat("Nice")+"<br>");
document.write(s.indexOf("w")+"<br>");
document.write(s.indexOf("wor")+"<br>"); //찾은글자의 첫번째글자를 찾는다
document.write(s.indexOf("word")+"<br>"); //못찾으면 -1로 나온다.
//문자열 중에서 원하는 문자 탐색..match
var str = "Hello world! Nice to meet you. 안녕하세요. 반갑습니다. Nice work! nice study. ";
var search = str.match("Hello");
document.write("탐색결과 : "+search+"<br>");
var search = str.match("hello"); //대소문자를 구별한다.
document.write("탐색결과 : "+search+"<br>"); //못찾으면 null값 출력 null은 undefined가 아니다.
//정규표현식 표기법 : /hello/ 슬래시 안에 글자를 쓴다.
var search = str.match(/hello/i); //대소문자 구별없이 찾아보기 [i] insensitive
document.write("탐색결과 : "+search+"<br>");
//탐색결과가 여러개일때...
var search = str.match(/Nice/); //같은 단어가 더 있어도 한개만 찾아짐
document.write("탐색결과 : "+search+"<br>");
var search = str.match(/Nice/g); //여러개를 찾고싶다면? [g] global 여러개 이므로 배열로 리턴한다.
document.write("탐색결과 : "+search+"<br>");
var search = str.match(/Nice/ig); //대소문자 구별없이 여러개 찾고싶다면? 옵션 모두 사용
document.write("탐색결과 : "+search+"<br>");
//한글도 된다.
var search = str.match(/안녕/);
document.write("탐색결과 : "+search+"<br>");
//문자바꿔치기... replace
var s = "Hello world";
document.write(s.replace("world","android"));
document.write(s.replace(/worlD/i,"android")); //대소문자 구별없이 바꿔치기
//바꿔야할 문자열이 여러개라면???
var ss = "Hello world, nice world, good world, bad world";
var result = ss.replace("world","android"); //앞에거만 바뀐다. (자바나 코틀린이였으면 전부 다 바뀜)
document.write(result+"<br>");
var result = ss.replace(/world/g,"android"); //앞에거만 바뀐다. (자바나 코틀린이였으면 전부 다 바뀜)
document.write(result+"<br>");
//이를 이용하여 특정 문자열 중에서 비속어들 XX로 변경처리하거나 자동화가능
s = s.replace("퍽","xxx"); //없으면 설정안함.
//문자열을 특정키워드로 분리하여 문자열 배열로
var s = "010-1234-5678" ;
var arr = s.split("-"); //-글자 기준으로 잘라
document.write(arr.length+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<br>");
//권장하진않지만 문자열을 HTML요소로 자동감싸주는 기능
var s = "Hello text";
document.write(s+"<br>");
document.write(s.bold()+"<br>");
document.write(s.italics()+"<br>");
document.write(s.fontcolor('green')+"<br>");
document.write(s.link("<<a href=https://www.naver.com>https://www.naver.com</a>>")+"<br>");
math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>수식</title>
</head>
<body>
<script>
//4. Math
//별도의 new없이 class명으로 사용한다. 마치 static처럼
var n = 3.14;
document.write(Math.floor(n)+"<br>");//플로어 - 소수점제거
document.write(Math.round(n)+"<br>"); //반올림
document.write(Math.ceil(n)+"<br>"); //무조건 올림
//랜덤값
var r = Math.random(); //0.0 ~ 1.0
document.write(r+"<br>");
//0~9 사이를 얻고 싶다면
var r = Math.floor(Math.random()*10);
document.write(r+"<br>");
//5~15 사이를 얻고 싶다면
var r = Math.floor(Math.random()*11)+5;
document.write(r+"<br>");
</script>
</body>
</html>
Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>중요!!! 배열</title>
</head>
<body>
<script>
//5. Array
//배열만드는 방법은 두가지, new쓰거나 []쓰거나
//이미 배열수업에 기본 사용법 소개
var arr = new Array(10,20,30);
//배열의 주요 기능 메소드들
//1) 배열 붙이기 concat
var arr1=[3,4,5]; //이걸 리터럴 배열이라고한다.
var arr2 = arr.concat(arr1); //원본은 안바뀐다. 즉 대입연산자로 리턴값을 툭하니 받는다.
document.write(arr2+"</br>");
document.write(arr+"</br>"); //원본은 안바뀐다.
document.write(arr1+"</br>"); //원본은 안바뀐다.
//2) 특정요소값 위치찾기 - indexOf
document.write(arr.indexOf()+"<br>"); //-1
document.write(arr.indexOf(30)+"<br>");
document.write(arr.indexOf(10,1)+"<br>"); //-1 : 배열의 1번방부터 검색시작하는 명령
//3) push,pop [stack] 구조로 쓴다.
var stack = [1,2,3,4,5];
document.write(stack+"<br>");
stack.push(10);//새로운 값을 삽입. 마지막에 추가됨.
document.write(stack+"<br>");
stack.pop(); //가장 마지막 요소가 꺼내진다. 즉 배열의 길이가 바뀐다.
//4) push,shift [queue] 구조로 쓴다.
var que = [1,2,3,4,5];
que.push(10); //새로운 데이터를 마지막에 삽입
document.write(que+"<br>");
que.shift(); //가장 처음에 저장된 요소값이 꺼내짐
document.write(que+"<br>");
//5) sort 기능 (정렬기능) - 실제 요소들의 위치가 변경된다.
var arr = [3,5,4,8,9,1,6,7];
arr.sort(); //실제 원본 위치가 변경됨
document.write(arr+"<br>");
//두자리 수 일때는..?
arr=[3,1,15,48,754,1234,54,90];
arr.sort();
document.write(arr+"<br>"); //앞글자 한자리씩 비교한다. 크기비교가 아니다.
//순서가 크기 순서가 아님. 데이터를 알파벳 순으로 오름차순 정렬.
//그래서 ! 해결하려면 sort()의 파라미터를 전달해야함. 그 매개변수는 값이 아니라
//'정렬 기준 함수'를 넣어줘야한다.
arr.sort(function(a,b){
return a-b; //뺄샘의 결과가 음수이면 a가 작은거니까 그대로 둔다.
}); //오름차순 정렬기준 함수이다.
document.write(arr+"<br>");
//내림차순
arr.sort(function(a,b){
return b-a;
});
document.write(arr+"<br>");
//알파벳문자는 기본 오름차순
var arr=["abc","bbb","ccc","adrf","ddfe"];
arr.sort();
document.write(arr+"<br>");
//알파벳의 내림차순은? sort안에 정렬 지정함수를 적어야한다.
var desc=function(a,b){
if(a>b) return -1;
if(b>a) return 1;
return 0;
}//이미 정해져있는 함수
arr.sort(desc);
document.write(arr);
//6) slice - 배열의 일부분을 잘라서 새로운 배열 리턴
var arr= [10,20,30,40,50,60,70,80,90];
var arr1 = arr.slice(3); //3번방부터 잘라서 새로운 배열로 만들어줘. 즉 원본은 안바뀜
document.write(arr+"<br>");
document.write(arr1+"<br>");
var arr1 = arr.slice(3,6); //3번방부터 5번방까지
document.write(arr+"<br>");
document.write(arr1+"<br>");
//7) join - 배열의 요소를 특정문자를 구분자로하여 하나의 문자열로 리턴해준다.
//split의 정반대
var arr = ["010","1234","5678"];
var s = arr.join("-");
document.write(s+"<br>");
//8) 필터기능 - sort랑 비슷하다. 지정함수가 필요하다.
var arr = [1,2,3,4,5,2,6,-5,-7];
//배열 요소들 중에서 3보다 큰 값들만 출력해보자
var arr2 = arr.filter(function(e){
return e>3 //이 조건이 true인 e를 새로운 배열에 추가하여 최종필터()의 리턴으로 배열을 내보낸다.
});
document.write(arr+"<br>");
document.write(arr2+"<br>");
//요소의 값이 3보다 크고, index번호가 5이상인 요소들..
var arr3 = arr.filter(function(e,index){
return e>3 && index>=5
})
document.write(arr+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
//9)reverse - 배열의 요소 순서를 뒤집는다. 원본의 실제 요소 위치가 변경된다.
var arr = ["aaa","bbb","ccc"];
arr.reverse();
document.write(arr+"<br>");
////////////////////////////////////////////////////////////////////////////////////////////
//10)새로나옴 ! ECMAscript5에서 새로우 추가된 배열 기능메소드
document.write("<hr>");
var aa = [10,20,30,40,50];
//배열의 요소값에 각각 접근하는 반복문
//for문을 쓰지 않아도 된다.
aa.forEach(function(e,index,array){
//그냥 단순출력
document.write("indec : "+index+" 요소 : "+e+"<br>");
}); //각각에대하여 접근하자
document.write("<hr>");
//for each()와 구조적으로 똑같지만..
//배열의 각 요소에 작업 후 새로운 배열을 만들어
//리턴해주는 메소드
var bb = aa.map(function(value,index,array){
//연산 등 변형하여 출력가능
return value+1;
}); //리턴값을 6번받는데 그럼 그걸 받을수있는 배열을 만들어서 받아야한다.
document.write(bb+"<br>");
</script>
</body>
</html>
stack
FILO
push와 pop (빼내는것)
push 할때마다 차곡차곡 쌓인다. 그리고 마지막에 넣은거를 빼낸다.
queue
FIFO
728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| JavaScript 게임만들기 , AJAX (0) | 2023.05.11 |
|---|---|
| JavaScript DOM과 이벤트처리, 유효성 검증 (0) | 2023.05.10 |
| JavaScript 자바 스크립트란? (0) | 2023.05.08 |
| CSS3 부트스트랩 (0) | 2023.05.04 |
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
