1. 메소드?!?
메소드의 사전적 정의는 '방법'이다.
즉 어떤 방법을 사용해서 활용할거야? 를 묻는 것으로 기능이라고 생각하면 편하다.
(기능은 function > 함수가 된다, 즉 메소드는 함수라고 봐도 무방하다)
#4-1에서 잠깐 알아보았던 .length 와 같이 배열에서 사용되는 객체 관련 메소드를 알아보자!
참조 사이트 : https://www.w3schools.com/js/js_array_methods.asp
JavaScript Array Methods
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. 다양한 메소드
1) .toString()
배열 요소의 값들을 문자형으로 인식하라는 메소드이다.
값이 숫자이더라도 정수형이나 실수형이 아닌 문자형으로 프로그램이 인식한다.
let fruits=["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);
document.write(fruits.toString());
위와 아래의 코드의 출력 값은 똑같다.
하지만 아래의 코드의 출력값은 다르다.
let fruits=["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);
document.write(fruits.toString());
document.write("<hr>");
document.write(fruits.length);
document.write(fruits.toString().length);
document.write("<hr>")
.length의 값을 보면 fruits.length 는 배열 요소의 하나 하나를 그룹처럼 보기에 4를 출력한다.
하지만 fruits.toString().length는 배열의 모든 값을 정수형으로 변환했기 때문에 한 글자씩 세서 25를 출력한다.
2) .join()
요소와 요소를 구분지을 때 무엇으로 구분 지을지를 결정하는 메소드이다.
이 안에 별을 넣으면( .join("*") ), 요소 사이에 *로 구분이 된다.
기본은 , 로 구분이 된다.
3) .pop() 과 .push()
배열 마지막 요소를 제거하거나 추가하는 메소드이다.
pop이 제거하며, push는 추가한다.
4) .shift() 와 .unshift()
배열 첫 번째 요소를 제거하거나 추가하는 메소드이다.
shift가 제거하며, unshift는 추가한다.
5) .splice()
배열의 원하는 구간을 제거하는 메소드이다.
() 안에는 콤마를 사용하여 범위를 지정해주는 데 여기서 잠깐!!!
(0, 2)는 0번째부터 2번째까지가 아니다!
0번째부터 2칸, 즉 0번째와 1번째를 없애주는 것이다(착각하기 쉬우니 잘 기억해두자).
6) .concat
각각의 다른 배열 요소들을 합칠 때 사용한다.
아래의 코드를 확인해보자.
let arr1=["손흥민", "김연아"];
let arr2=["무궁화", "개나리", "진달래"];
let arr3=["국어", "영어"];
let arr4=arr1.concat(arr2, arr3);arr1,2,3에는 각기 다른 요소들이 배열되어있다.
그리고 arr4은 .concat을 활용하여 arr1에 arr2와 arr3의 요소들을 합하여 집어넣으라는 코드를 넣었다.
이렇게 하면 arr4는 손흥민,김연아,무궁화,개나리,진달래,국어,영어 의 값이 출력된다.
3. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_배열매소드.html</title>
</head>
<body>
<h3>배열 객체 관련 메소드(함수)</h3>
<script>
let fruits=["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);
document.write("<hr>");
document.write(fruits.toString());
document.write("<hr>");
document.write("#"+fruits.toString()+"#")
document.write("<hr>");
document.write(fruits.length);
document.write("<hr>");
document.write(fruits.toString().length);
document.write("<hr>");
document.write(fruits.join("*"));
document.write("<hr>");
fruits.pop() // 배열 마지막 요소 제거
document.write(fruits); // Banana, Orange, Apple
document.write("<hr>");
fruits.push("Kiwi"); // 배열 마지막 요소 추가
document.write(fruits); // Banana, Orange, Apple, Kiwi
document.write("<hr>");
fruits.shift(); // 배열 맨 앞 요소 제거
document.write(fruits); // Orange, Apple, Kiwi
document.write("<hr>");
fruits.unshift("Lemon") // 배열 맨 앞 요소 추가
document.write(fruits); // Lemon, Orange, Apple, Kiwi
document.write("<hr>");
fruits.splice(0, 2); // 0번째부터 (2-1)번째 까지 제거
document.write(fruits); // Apple, Kiwi
document.write("<hr>");
// 배열 요소 합치기
let arr1=["손흥민", "김연아"];
let arr2=["무궁화", "개나리", "진달래"];
let arr3=["국어", "영어"];
let arr4=arr1.concat(arr2, arr3);
document.write(arr4);
document.write("<hr>");
document.write(arr4.length);
document.write("<hr>");
</script>
</body>
</html>'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #5 Date 객체 (0) | 2022.08.10 |
|---|---|
| [JS] #4-3 정렬(Sort) (0) | 2022.08.09 |
| [JS] #4-1 배열(array) (0) | 2022.08.09 |
| [JS] #3-2 제어문 : 반복문(for문, while문, do-while문) (0) | 2022.08.05 |
| [JS] #3-1 제어문 : 조건문(if문, switch-case문) (0) | 2022.08.04 |