국비 교육/프론트엔드

[자바스크립트] 함수 -3 (배열처리, 문자열처리)

육츠 2024. 3. 2. 17:01

배열 처리 함수

slice, splice, push, pop, sift, unshift 등의 배열을 처리하는 여러가지 함수

함수 내용
 join("문자열") 전달인자의 문자열을 구분자로 하여, 배열을 문자열로 반환
reverse() 배열을 뒤집는다.
slice(start , end) 배열의 일부분을 반환, -1 은 마지막 데이터를 의미한다. 원본을 건드리지 않는다.
splice(n[, m, ...x]) 부분 배열로 추출하거나 다른 값으로 대체한다. 원본에 영향을 미친다.
sort() 오름차순 정렬
concat(...item)  여러 배열을 하나로 합친다. 
push(item), pop() 배열의 끝에 데이터를 삽입하거나 추출, 원본이 수정된다. (Stack 자료구조처럼 동작)
unshift(item), shift 배열의 앞에 데이터를 삽입하거나 추출, 원본이 수정된다. (Stack 자료구조처럼 동작)
toString()  배열을 문자열로 반환

 

- join, reverse, slice

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.join("/"));
// console.log(arr.reverse()); // 원본을 뒤집는다.

let temp = arr.slice(1,5); // 새로운 복사본 

arr[2] = 30;
console.log(arr); // 원본 : 30으로 바뀜

//temp[0]= 22;
console.log(temp); 

temp = arr.slice(0, -2); // 마지막 데이터 전까지 복사본을 가져옴
console.log('부분배열의 결과: ' + temp);

 

결과

 

- splice()

let color = ['빨','주','노','초','파','남','보'];
temp = color.splice(4); // 인덱스 4부터 끝까지
console.log(temp);
console.log(color); // 원본에 영향을 미친다.

 

* 특정 위치의 데이터를 잘라낸다.

color = ['빨','주','노','초','파','남','보'];
temp = color.splice(2,1);
console.log(temp);
console.log(color); // 원본에 영향을 미친다.

 

* 다른 값으로 대체

color = ['빨','주','노','초','파','남','보'];
temp = color.splice(2,1,'Yello','노랑');
console.log(color); // 노랑을 대체

 

결과

 

- concat()

let food = ['라볶이', '뼈해장국', '파스타'];
let drink = ['물', '주스', '커피'];
let fruit = ['사과', '포도', '딸기'];

let lunch = food.concat(drink);
console.log(lunch)

lunch = food.concat(drink, fruit);
console.log(lunch)

 

- toString()

console.log(lunch.toString());

 

- push(item), pop()

let data = '짜장면';
food.push(data);
console.log(food)

data = food.pop(); // 마지막 값을 꺼낸다.
console.log(data);

 

food = ['라볶이'];
data = food.pop(); 
console.log(data);

data = food.pop(); // 어떤 값?
console.log(data);

 

- unshift(item), shift()

drink = ['물', '주스', '커피'];
data = drink.shift();
console.log(data);

drink.unshift('맥주');
console.log(drink);

 

문자열 관련 메소드

문자열은 sequence 이면서 immutable한 타입이다.

함수 내용
 charAt(index), at(index) 인덱스 위치의 문자 1개 반환 
startsWidth(str),
endsWith(str), 
includes(str)		  
 replace(m, n) 문자열 m을 찾아서 n으로 변경
slice(index1, index2) 부분 문자열 반환 (index1 ~ index2 -1)
substr(), substring() 부분 문자열 반환 (ES5 이후에는 substr() 사용을 권장하지 않음)

 

- charAt(), at(), startsWidth(str), endsWith(str),  includes(str)

console.log(data.charAt(3));
console.log(data.at(3));

data = 'Hello, world! Welcome to the Javascript~';
console.log(data.startsWith('Hello'));
console.log(data.endsWith('~'));

console.log(data.includes('d!')); 
console.log(data.includes('~'));
console.log(data.includes('world')); //  반환값 boolean
console.log(data.search('world')); // 반환값 : 7
console.log(data.search('earth')); // 반환값 : -1  = 해당되는 데이터가 없다는 것을 의미

 

- replace()

let text = data.replace('Hello', 'Hi');
console.log('원본 : ' + data);
console.log('변경본 : ' + text);

 

- slice()

(앞,뒤) => 뒤는 무조건 앞에 값보다 커야한다. (추출실패(에러는 아님))

console.log(data.slice(5,10)); // , wor
console.log(data.slice(10,5)); // (앞,뒤) => 뒤는 무조건 앞에 값보다 커야한다. (추출실패(에러는 아님))
console.log(data.slice(-5,-1)); // ript
console.log(data.slice(-1,-5)); // 앞 < 뒤 규칙을 위배

 

- substr(n,m)

n 은 index, m 은 개수를 의미한다. ES5 이후에는 substr() 사용을 권장하지 않기 때문에 확인용으로 사용됨

console.log('substr(): ' + data.substr(5,10)); // , world! W

 

- substring(n,m)

부분 문자열 추출 (n,m : 인덱스), 음수 사용 하지 못함.
(앞,뒤) => 규칙 따로 존재하지 않는다.

console.log('substring(): ' + data.substring(5,10)); // , wor
console.log('앞 < 뒤 규칙 없음: ' + data.substring(10,5)); // 앞 < 뒤가 아니어도 된다.
console.log('인덱스 음수 사용 불가: ' + data.substring(-1,2)); // He => 0 위치에서 2위치 전까지 가져온다.

 

- split(str)

구분문자열을 전달하여 문자열을 배열로 분리

let arr = data.split(' ');
console.log('split 된 데이터 arr의 타입: ' + typeof arr);
console.log('반환된 배열의 길이 : ' + arr.length);

arr.forEach((item) => console.log(item));

 

- trim()

좌우 공백 제거

data = 'Hello~        ';
console.log('문자열의 길이 : ' + data.length);
console.log('좌우공백을 제거한 문자열의 길이: ' + data.trim().length);

 

문자열 처리 예제

html 본문

<body>
	<div>
        아이디 : <input type="text" id="userid" placeholder="아이디를 5~10자 사이로 입력">
        생년월일 : <input type="text" id="birthday" placeholder="생년월일 8자 입력">
        <input type="button" value="check" id="check">
    </div>
</body>
</html>

 

자바스크립트

let check = document.getElementById('check');
let userid = document.getElementById('userid');
let birthday = document.getElementById('birthday');

// 사용자가 입력한 데이터는 innerHTML 사용할 수 없다.

check.addEventListener('click', validation); // 함수와 연결 

function validation(){
    // alert('연결 확인'); : 연결 확인
    let id = userid.value;
    if(!(id.trim().length >= 5 && id.trim().length <= 10)){
        alert('정확하게 입력하세요.');
        userid.select(); // 정확하게 입력할 수 있도록 포커스를 잡아준다
        return; // 프로그램을 더 진행시키지 않는다
    }

    // isNaN 문자가 포함되어 있으면 경고창
    let birth = birthday.value;
    if(birth.trim().length != 8 || isNaN(birth) ){
        alert('생년월일 정확하게 입력!');
        birthday.select(); // HTML 객체여야 한다.
        return;
    }
    alert('제출완료');
}
사용자가 입력한 데이터는 innerHTML 사용할 수 없다.
userid.select(); ->  정확하게 입력할 수 있도록 포커스를 잡아준다
isNaN 문자가 포함되어 있는지 체크

 

저작자표시 비영리 변경금지 (새창열림)