String의 특징
// 부분 문자열 추출
let slice = msg.slice(1, -1); //문자를 잘라내는데, 마이너스값이 된다.
console.log(slice);
let subString = msg.substring(1, 5); //문자를 잘라내는데, 마이너스값이 안된다.
console.log(subString);
let subStr;
//레거시한 아이다.
// 문자열 포함 여부 확인
let indexOf = msg.indexOf('is'); //현재 메세지에 해당 메세지가없으면 '-1'반환, 있으면 인덱스 반환
let lastIndexOf;
let includes = msg.includes('Less'); //문자열이 있는지 확인 후 True of False가 나온다.
console.log(includes);
let startsWith = msg.startsWith('Less');//해당 문자열로 시작하는지 확인 후 T of F
console.log(startsWith);
let endsWith = msg.endsWith('more.'); //해당 문자열로 끝나는지 확인 후 T or F
console.log(endsWith);
let str = ' a b c d '
// 공백 잘라내기
let trimLeft = str.trimLeft();//왼쪽 코드만 제거 (레거시)
console.log(trimLeft);
let trimRight;
let trim = str.trim();
console.log(trim); // 문자의 왼쪽 오른쪽만 제거, 안쪽은 제거 못하므로 정규식을 사용한다.
let reg = str.replace( /\s*\g, ''); //모든 공백을 찾아서 오른쪽 인자로 대체해라! (모든공백 삭제)
//replaceAll(" ", "") 도 된다.
// 텍스트 반복
let repeat = msg.repeat(3);
indexOf : 브라우저를 체크하는 함수
문자열 유틸 함수
<CamelCase>
'\s '공백을 '/g' 모두 찾아서
배열
배열.toString = 배열이 문자열로 변경됨
배열 (큐) -
들어올 때는 맨 뒤로, 맨 앞에있는 요소가 먼저 나감
First in First out
배열(스택)
마지막에 있는 요소가 먼저 나감
Last in First Out
배열의 push 와 pop
push : 배열 맨 끝에 추가
pop : 배열 맨 끝에 삭제
push 했을 때 -> 배열의 길이가 리턴됨
pop 했을 때 -> 배열의 삭제된 값이 리턴됨
배열은 객체처럼 동작을 한다.
ㄴ 참조에 의한 복사
복사해서 사용하려면 '얕은복사' '깊은복사' 를 사용해야 한다.
arr.length로 배열 자르기
배열 순환
for...of
forEach
for(let i = 0 ; i < friends.length; i++) {
console.log(friends[i]);
}
friends.forEach((item)=> {
console.log(item);
})
split으로 문자열 -> 배열 만들기
let friends = '경민, 보미, 가희, 재훈, 도희, 남동, 원명, 태희, 진욱'.split(',');
배열이 만들어진다.
배열 요소 변경
7번째 인덱스가 변경된다.
배열 복사
// 배열 복사 ***배열은 참조 복사되므로 주의할 것!!!
let copiedArray = [...friends] // 전개구문을 사용해서 복사해야 온전히 복사된다.
2차원 배열
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 행렬의 정중앙에 위치한 요소를 찾으려면?
matrix[1][1]
배열인지 확인하는 방법
Array.isArray([확인할 배열])
const isArray = data => Array.isArray(data);
function isArray2(data) {
return Array.isArray(data)
}
객체 배열
const people = [
{
id: 0,
name: '박가희',
age: 25,
job: '명탐정코난 범인',
imageSrc: 'FAkq31'
},
{
id: 1,
name: '김보미',
age: 64,
job: '짜요짜요 마케터',
imageSrc: 'Gakz34',
},
{
id: 2,
name: '한태희',
age: 13,
job: '삐돌이',
imageSrc: 'Fkzoq81'
},
{
id: 3,
name: '이원명',
age: 81,
job: '이도령',
imageSrc: 'Tq9z1i'
}
]
/* 요소 순환 ---------------------------- */
// forEach는 값을 반환하지 않는다. 연산 처리만 한다.
let nameArray = [];
people.forEach((item, index)=> { //forEach 는 매개변수로 콜백함수를 사용하는 것이다!
nameArray.push(item.name) //이름만 따로 넣어 배열을 만들겠다~
})
객체가 배열인 경우, 요소 순환을 통해 각각의 프로퍼티를 새로운 배열로 정의할 수도 있다.
이벤트들을 배열로 처리하기
*but, 너무 많은 이벤트들은 이렇게 넣으면 과부화가 걸림 (event delegation)
// forEach는 값을 반환하지 않는다. 연산 처리만 한다.
let nameArray = [];
people.forEach((item, index)=> { //forEach 는 매개변수로 콜백함수를 사용하는 것이다!
nameArray.push(item.name) //이름만 따로 넣어 배열을 만들겠다~
})
const list = document.querySelectorAll('span'); //유사배열이지만 forEach를 사용할 수 있다.
//모든 span들을 꺼내!
list.forEach(item=> {
item.addEventListener('click', function(item){// 화살표함수는 this와 바인딩되지 않으니까 일반함수
console.log(this); //클릭하면 this를 출력한다! (item을 출력)
})
})
원형 파괴
1. reverse()
// reverse
const reverse = arr.reverse();
//파괴하지 않으려면?
const reverse = [...arr].reverse();
2. splice()
splice(1, 2, '추가할 값') ;
첫번째 인자: 시작 인덱스 , 두번째 인자: 삭제할 개수, 3, 4번째 인자: 시작 인덱스에서부터 추가할 값
ex) splice(1, 0, '추가할 값') 이렇게 둔다면, 1번째 인덱스부터 삭제하는인덱스는 0개로(삭제없이) 추가만 한다!
const splice = arr.splice(1, 2, 'ㅈㅈㅈ'); // 1부터 2까지 뽑고 arr에서는 삭제됨
3. sort()
배열을 소팅하는 메서드
1) 오름차순
arr.sort((a,b)=> {
return a - b
})
두 값의 차를 통해 오름차순으로 정렬한다.
내림차순은 b-a 로 하면 됨
map() : 모든 배열 값을 순회한다.
새로운 배열을 반환한다는 점이 forEach와 다름
map은 원본을 훼손시키지 않는다. 원본을 받아서 가공하고 새로운 배열로 저장하는 것이기 때문이다.
const job = people.map((item, index)=> {
return item.job
})
console.log(job);
forEach와 비교해보면???
let nameArray = [];
people.forEach((item, index)=> { //forEach 는 매개변수로 콜백함수를 사용하는 것이다!
nameArray.push(item.name) //이름만 따로 넣어 배열을 만들겠다~
})
forEach는 반환값이 없기 때문에 새로운 배열인 nameArray를 생성해서
거기다가 직접 push를 해줬었다
실습1. html에 랜더링 시키기
//html에 랜더링 시키기~
const card = people.map((item,index)=> {
return /* html */ `
<div class="userCard">
<img src="${item.imageSrc}" alt= "" />
<span>이름 : ${item.name}</span>
<span>나이 : ${item.age}</span>
<span>직업 : ${item.job}</span>
</div>
`
})
card.forEach((item)=> document.body.insertAdjacentHTML('beforeend',item))
.
filter()
어떠한 조건을 걸어 해당 조건에 해당하는 값을 배열로 리턴, 즉 필터링해준다.
find 와의 차이점 : filter는 여러개를 배.열.로 리턴한다!!
const 젊은이들 = people.filter((item) => {
return item.age < 30;
})
find()
어떠한 조건에 해당하는 요소를 찾아서 객체를 리턴해준다.
filter와의 차이점: find는 가장 먼저 찾은 첫 번째 요소만 객.체.만 리턴한다.
reduce()
reduceRight() -> 리듀스를 반대로 실행하는 것
const total = people.reduce((acc, item) => {
acc += item.age;
return acc;
}, 0)
나이 모두 더하기
split() => 문자를 배열로
join() => 배열을 문자
try catch
try 절을 실행한다.
만약 try절 실행 중 에러가 발생하는 경우 , catch절을 시행한다.
*오류가 없는 경우
*오류가 있는 경우
catch 절이 실행된다.
<실습1>
try {
console.log(value);
}catch(err) {
console.log(err);
}
value 값이 없으면 err를 출력한다.
<실습2>
let data = JSON.stringify({ //stringify : 모든 데이터를 문자화
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
})
try {
const user = JSON.parse(data);
if(!user.value) {
throw new Error('해당 키 값이 존재하지 않습니다. ');
}
}catch(err) {
console.log('JSON Error' + err.message);
document.body.innerHTML = '404 not found'; //사용자에게 알려주기 위해
}
JSON 객체에 value라는 이름을 가진 프로퍼티가 없으므로 catch가 실행된다.
catch에는 사용자지향으로 document.body.innerHTML도 추가해줄 수 있다. (html화면에 띄워주기)
로컬컴퓨터 <> 서버 데이터
문자로 주고받는다. (Json)
로컬 컴퓨터에서 서버로 요청을 보낼 때 작성된 다양한 언어들때문에 규격이 다르면 문제가 있으므로,
문자형으로 규격을 통일한 것이다.!!!
JSON.parse()
서버에서 전달해준 JSON을 parse를 통해 해석한다.
JSON이 잘못 넘어온 경우
try절에 JSON .parse의 값이 제대로 작동되지 않으면
catch 절이 작동된다.
사실은, 데이터가 넘어올 때부터 try 절에 넣고 확인하여 catch절에 넘기는 것이 좋다.
try...catch...finally
