본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

Javascript

join() / pop() / push() 에 대하여 알아보자!

by C0Di 2022. 8. 11.
728x90

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)

length 속성은 배열의 길이를 구할 수 있습니다.

번호 기본값 메서드 리턴값
1 [100, 200, 300, 400, 500]> length 6
2 ['a','b','c','d','f'] length 5
3 [1, 2, ['a', 'b']] length 3

자바스크립트 코드보기

//01번
const arrNum = [100, 200, 300, 400, 500];

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample01_M1").innerHTML = "length";
document.querySelector(".sample01_P1").innerHTML = arrNum.length;

//02번
const arrTxt = ['a','b','c','d','f'];

document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a','b','c','d','f']";
document.querySelector(".sample01_M2").innerHTML = "length";
document.querySelector(".sample01_P2").innerHTML = arrTxt.length;

//03번
const arr = [1, 2, ['a', 'b']];

document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "[1, 2, ['a', 'b']]";
document.querySelector(".sample01_M3").innerHTML = "length";
document.querySelector(".sample01_P3").innerHTML = arr.length;

02. 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열)

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

번호 기본값 메서드 리턴값
1 [100,200,300,400,500] join('') 100200300400500
2 [100,200,300,400,500] join(' ') 100 200 300 400 500
3 [100,200,300,400,500] join('★') 100*200*300*400*500
4 [100,200,300,400,500] join('-') 100-200-300-400-500

자바스크립트 코드보기

//join() 문 사용
const arrNum=[100,200,300,400,500];
const text1 = arrNum.join('')
const text2 = arrNum.join(' ')
const text3 = arrNum.join('★')
const text4 = arrNum.join('-')

03. 배열 메서드 : push() / pop()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하며, pop()메서드는 배열 마지막 요소를 삭제합니다.

번호 기본값 메서드 리턴값 결과값
1 [100,200,300,400,500] push(600) 100,200,300,400,500,600 100,200,300,400,500,600
2 [100,200,300,400,500] pop(500) 100,200,300,400 100,200,300,400

자바스크립트 코드보기

//01번
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600)

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "[100,200,300,400,500]";
document.querySelector(".sample03_M1").innerHTML = "push(600)";
document.querySelector(".sample03_P1").innerHTML = arrPush; //600을 추가하고 숫자레르 셈
document.querySelector(".sample03_A1").innerHTML = arrNum;  //100,200,300,400,500,6


//02번
const arrNum2 = [100, 200, 300, 400, 500];
const arrPush2 = arrNum2.pop();

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = "[100,200,300,400,500]";
document.querySelector(".sample03_M2").innerHTML = "pop(600)";
document.querySelector(".sample03_P2").innerHTML = arrPush2; //500 
document.querySelector(".sample03_A2").innerHTML = arrNum2;  //100,200,300,400
728x90
반응형

'Javascript' 카테고리의 다른 글

slice() / substring() / substr() 에 대하여~~  (6) 2022.08.16
내장함수가 뭘까?  (5) 2022.08.14
요소 선택 해보기~  (6) 2022.08.06
전역변수와 지역변수  (5) 2022.07.28
함수  (6) 2022.07.26

댓글

#HASH_TAGS

-

1

공부 숙제가 다양해서 너무 좋아요 제이쿼리 코딩 scroll-snap-align 코드 울적하니 꽃을 달아봤습니다 오늘은 내가바로 오징어! 이건 또 뭐람 메서드 오늘 조업 마감했습니다. HTML 오늘도 웹표준은.. 선택해주세요 scroll-snap-type ImageSlideEffect Method 오징어 1Kg 당 3000원 오징어 두마리 포획 완료 다크모드 멈추지 않는 ' j ' 시리-즈 오징어 한마리 수확 완료! 화사한가요? 테스트 내일은 즐거운 월요일 테스트테스트 슬라이드 결과 : 월요일 JQuery 필터선택자