📖배열(Array)
변수에는 오직 한개의 데이터만 저장되는데 여러 개 저장하고 싶다면 배열로 한 번에 묶어 저장할 수 있다.
배열 안에 데이터를 여러 개 저장하게 되면 데이터의 첫 번째 순서부터 인덱스 번호를 부여받는다. 인덱스 번호는 데이터의 순서를 의미하며 0부터 시작하여 마지막 데이터 까지 오름차순으로 인덱스 번호가 부여된다.
배열안에는 문자형, 숫자형, 논리형 데이터뿐만 아니라 객체({}) 등 다양한 데이터 형식을 넣을 수 있다.
[기본형]
1.
var 변수명 = new Array();
변수명[0] = 값;
변수명[1] = 값;
변수명[2] = 값;
: 배열객체를 먼저 생성한 후 한 개씩 데이터를 넣는 방식.
가독성이 좋지 않아 잘 쓰지 않는 방식이다.
2.
var 변수명 = new Array( 값1, 값2, 값3...);
: 배열객체를 생성하여 ()값을 나열하는 방식.
잘쓰이지 않는 방식
3.🌞🌞🌞
var 변수명 = [값1, 값2, 값3...];
: []는 곧 배열을 의미한다. 가장 많이 사용되는 방식❗배열 객체에 저장된 데이터 불러오기
배열객체에 여러 개의 데이터가 저장되어 있고, 이 중애서 필요한 데이터가 있다면 꺼내 쓸 수 있다.
[기본형]
(참조)변수명[인덱스 번호];✔️ 배열객체의 메서드와 속성(property)
1. join(연결문자)🌞
: 배열객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다.
2. reverse()🌞
: 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다.
게시글 같은데 최신글이 맨 앞에 올수있게 순서를 뒤집어준다.
3. sort()🌞
: 배열 객체의 데이터를 오름차순으로 정렬한다.
필터링 만들때 오름차순 정렬 등
4. slice (시작인덱스 번호, 끝 인덱스 번호)🌞🌞
: 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열객체로 반환한다.
이때 시작 인덱스번호부터 끝 인덱스 번호의 앞의 데이터까지만 잘라서 반환한다.
ex) slice(0,3)이라고 하면 0번부터 2번까지의 데이터만 잘라 반환한다.
5. splice(시작인덱스, (잘라낼)데이터 갯수, 새로 넣을 데이터)
: 배열 객체에서 시작 인덱스부터 지정한 데이터 갯수만큼 삭제하고 그 자리에 새로운 데이터를 넣을 때 사용한다.
ex) splice(1, 2, "hi",3)
1번부터 2개의 데이터를 삭제하고 그 자리에 hi와 3을 넣겠다.
6. concat(배열1, 배열2)
: 2개의 배열 객체를 하나로 합쳐 반환한다.
7. pop()
: 배열에 저장된 데이터 중 마지막 인덱스에 있는 데이터를 삭제한다.
8. push(new data)
: 배열에 저장된 데이터 중 마지막 인덱스에 있는 데이터에 새 데이터를 삽입한다.
9. shift()
: 배열에 저장된 데이터 중 첫번째 인덱스(0번)에 있는 데이터를 삭제한다.
10. unshift()
:배열에 첫번째 위치에 새데이터를 삽입한다.
11. length🌞
: 배열에 저장된 데이터의 총 갯수를 말한다.(속성)
소괄호가 안붙음
12. forEach(함수)
: 배열에 저장된 데이터나 요소의 갯수만큼 반복하면서 (함수)를 실행하여 자바스크립트 코드를 실행할때 사용한다. 기존배열을 변화시키지 않고 새롭게 배열을 반환한다.
13.filter(함수)
: 배열에 저장된 데이터의 갯수만큼 반복 실행하며 조건에 부합하는 데이터만 필터링할 떄 사용한다.
14. find(함수)
: 배열에 저장된 데이터의 갯만큼 반복 실행하며 배열안에 해당 데이터가 있으면 특정 자바스크립트를 실행하거나 해당 데이터를 반환한다.
📖문자열 객체(string)
변수에 문자형 데이터를 넣으면 첫번째 글자부터 인덱스 번호를
0번부터 부여받는다. 이때 문자 사이에 공백이 있어도 공백 또한 데이터이기 때문에 인덱스 번호를 부여받는다.
[기본형]
1. var 참조변수 = new String('문자형 데이터');
2. var 참조변수 = '문자형 데이터';
-> 문자형 데이터 글자수대로 인덱스 번호를 받음 공백도 포함✔️문자열 객체의 메서드와 속성
1. charAt(index)
: 문자열에서 인덱스 번호에 해당하는 문자를 반환한다.
2. indexOf('찾을문자')🌞
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1을 반환한다.
3. lastIndexOf('찾을문자')
: 문자열의 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1을 반환한다.
4. match('찾을문자')
: 문자열의 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 '문자'를 반환한다. 만약 찾는 문자가 없다면 null을 반환한다.
5.replace('바꿀문자', '새 문자')
: 문자열 왼쪽부터 바꿀 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환한다.
6.search('찾을문자')
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 일치하는 문자가 없다면 아무것도 반환하지 않는다.
7. slice (a,b)🌞
: a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환한다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 인덱스번호 a의 앞 글자부터 -숫자 개수만큼 잘라서 반환한다.
8. substring(a, b)🌞
: a인덱스부터 b인덱스 이전 구간의 문자를 반환한다.
인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 인덱스번호 a의 앞 글자부터 -숫자 개수만큼 잘라서 반환한다.
9. substr(a, 문자개수)
: 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환한다.
10. split('문자')🌞
: 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환한다.
11. tolowerCase()
: 문자열에서 영문 대문자를 모두 소문자로 변환한다.
12. toUpperCase()
: 문자열에서 영문 소문자를 모두 대문자로 변환한다.
13. length
: 문자열에서 문자의 총 개수를 반환한다.
14. concast('새로운 문자')
: 문자열에 새로운 문자를 결합한다.
15. charCodeAt(index)
: 문자열 index에 해당하는 아스키 코드값을 반환한다.
16. fromCharCode(아스키 코드 값)
: 아스키 코드값에 해당하는 문자를 반환한다.
17. trim()
: 문자열 앞 또는 뒤에 공백 문자열을 제거한다.
var str = "Hello Thank you Good luck to you";
document.write(str.charAt(7));
//-> h 문자열의 인덱스 번호 7번 위치에 있는 문자를 반환.
document.write(str.indexOf("you"));
// -> 12 / 왼쪽부터 먼저 찾은 you 중 y의 인덱스 값을 반환.
document.write(str.lastIndexOf("you"));
// -> 29 / 오른쪽(맨 끝)부터 찾은 'you'의 인덱스 값을 반환.
document.write(str.indexOf("you", 16));
// -> 29 / 인덱스번호 16부터 찾은 you 중 y의 인덱스 값을 반환.
document.write(str.match("luck"));
// -> luck / 매치하는 문자 출력, 없으면 null 반환.
document.write(str.search("luck"));
// -> 21 / 매치하는 문자 인덱스 번호 출력, 없으면 아무것도 반환하지 않음.
document.write(str.substr(12, 3), "<br/>");
// -> you/ 12번 인덱스부터 3개의 문자 잘라서 반환
document.write(str.substring(6, 15));
// -> Thank you/ 6번인덱스부터 15번 인덱스 바로 앞인 14번 인덱스까지 잘라 반환
document.write(str.replace("you", "me"));
// -> Hello Thank me Good luck to you /
검사해서 제일먼저 찾은 you를 me로 바꿈
document.write(str.toLowerCase();
// -> 전부 소문자로 바꿈
document.write(str.toUpperCase();
// -> 전부 대문자로 바꿈
document.write(str.length, "<br/>");
// -> 32 / 공백 포함 몇개의 문자가 들어가있는지
var splitText = str.split(" ");
console.log(splitText);
// -> 공백을 기준으로 데이터를 나눠서 반환
(총 7개 반환 ex. 'hello', 'good', 'luck')
// -> splitText 인덱스 번호 4번째에 있는 데이터 화면에 출력
var text1 = splitText[4];
document.write(text1);
// -> splitText 인덱스 번호 6번째에 있는 데이터 화면에 출력
var text2 = splitText[6];
document.write(text2);
var a = "A";
//변수 a의 0번 인덱스에 있는 문자의 아스키 코드 값을 반환한다.
var result = a.charCodeAt(0); //65
document.write(result);
//아스키코드 65에 해당하는 문자를 출력하기
//객체명. 메서드() /객체명.속성
document.write(String.fromCharCode(65));