일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- PROJECT
- MySQL
- JavaScript
- map
- branch
- 더 흔한 색칠 타일 문제
- ccw 알고리즘
- router
- 그리디
- pm2
- ucpc 2023 예선 d번
- html5
- HTTP
- Github
- MongoDB
- ERD
- 백준 28298번
- 자바스크립트
- 게임 서버 아키텍처
- insomnia
- koi 2002 중등부 1번
- Express.js
- ucpc 2024 예선 e번
- string
- 백준 28303번
- 백준 2623번
- Next
- localstorage
- Prisma
- ucpc 2023 예선 i번
- Today
- Total
dh_0e
[JavaScript] How to use String(문자열), Array(배열), Object(객체) in JavaScript 본문
[JavaScript] How to use String(문자열), Array(배열), Object(객체) in JavaScript
dh_0e 2024. 4. 22. 21:041. String
string.length = 문자열 길이
string.substr(a, b) = a부터 b개의 문자를 불러옴
string.slice(a, b) = a부터 b-1까지의 문자를 불러옴
string.search("word") = string에 word가 시작되는 위치를 불러옴
string.replace("word", "word2") = string에 word를 word2로 바꿔줌
let string = "hello";
console.log(string.length); // 5
console.log(string.substr(1, 3)); // ell
console.log(string.slice(2, 4)); // ll
console.log(string.search("e")); // 1
console.log(string.replace("e", "i")); // hillo
string.split("word") = string을 word 기준으로 분할시켜 배열로 만들어줌
string1.concat(string2) = string1 + string2
let string = "apple, banna, carret, durian";
console.log(string.split(",")); // [ 'apple', ' banna', ' carret', ' durian' ]
let string1 = "Hello my ", string2 = "name is John";
console.log(string1.concat(string2)); // Hello my name is John
2. Array
new Array(n) = n 크기의 배열 생성
Array.push(a) = 배열의 마지막에 a를 추가
Array .pop() = 배열의 마지막 요소 삭제
Array .shift() = 배열의 첫 번째 요소 삭제
Array .unshift(a) = 배열의 첫 번째에 a를 추가
Array .splice(a, b, data) = 배열의 a번째에 b개의 데이터 삭제 후 data를 추가
Array .slice(a, b) = 배열의 a부터 b - 1까지를 새로운 배열을 생성하여 반환
let Arr = new Array(5); // 크기 5인 배열 Array 생성
Arr = [1, 2, 3, 4, 5];
Arr.push(6);
console.log(Arr); // [ 1, 2, 3, 4, 5, 6 ]
Arr.pop();
console.log(Arr); // [ 1, 2, 3, 4, 5 ]
Arr.shift();
console.log(Arr); // [ 2, 3, 4, 5 ]
Arr.unshift(1);
console.log(Arr); // [ 1, 2, 3, 4, 5 ]
Arr.splice(2, 2, 3.5);
console.log(Arr); // [ 1, 2, 3.5, 5 ]
Arr = Arr.slice(0, 2);
console.log(Arr); // [ 1, 2 ]
Array .foreach(function (element) { }) = 콜백 함수를 넣어 함수 안에서 배열의 각 요소가 한 번씩 수행되게 하는 메소드
Array .map(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 가공한 값이 항상 원본 배열의 길이를 가진 배열 반환
Array .filter(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 조건에 맞는 값들만을 배열 반환
Array .find(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 조건에 맞는 첫 값만 반환
콜백 함수란? <매개변수로써 쓰이는 함수>
let Arr = [1, 2, 3, 4, 5];
let Output = [];
Arr.forEach(function (val) {
Output.push(val);
});
console.log(Output); // [ 1, 2, 3, 4, 5 ]
Arr = Arr.map(function (val) {
return val * 2;
});
console.log(Arr); // [ 2, 4, 6, 8, 10 ]
Arr = Arr.filter(function (val) {
return val % 4 !== 0;
});
console.log(Arr); // [ 2, 6, 10 ]
Arr = Arr.find(function(val){
return val > 5;
});
console.log(Arr); // 6
3. Object
Object.keys(객체) = key들만으로 된 배열을 만들어줌
Object.values(객체) = value들만으로 된 배열을 만들어줌
Object.entries(객체) = [Key, value] 로 이루어진 2차원 배열을 만들어줌
Object.assign(객체1, 객체2, { key: value }) = 객체1에 객체2의 내용을 복사(key를 value로 바꾸면서)
let Obj = {
name: "kdh",
age: 23,
height: 182,
weight: 75
};
let KeyArr = Object.keys(Obj);
console.log(KeyArr); // [ 'name', 'age', 'height', 'weight' ]
let ValArr = Object.values(Obj);
console.log(ValArr); // [ 'kdh', 23, 182, 75 ]
let EntArr = Object.entries(Obj);
console.log(EntArr); /*
[
[ 'name', 'kdh' ],
[ 'age', 23 ],
[ 'height', 182 ],
[ 'weight', 75 ]
] */
let Obj2 = {};
Object.assign(Obj2, Obj, { name: "kdg", age: 18, height: 176, weight: 67 });
console.log(Obj2); // { name: 'kdg', age: 18, height: 176, weight: 67 }
JSON.stringify(객체) = 객체를 문자열화 시켜 객체끼리 값이 같은 지 비교할 수 있게 해줌
let Obj = {
name: "kdh",
age: 23,
height: 182,
weight: 75
};
let Obj2 = {
name: "kdh",
age: 23,
height: 182,
weight: 75
};
console.log(Obj===Obj2); // false
console.log(JSON.stringify(Obj)===JSON.stringify(Obj2)); // true
console.log(JSON.stringify(Obj)); // {"name":"kdh","age":23,"height":182,"weight":75}
'내일배움캠프 > HTML,CSS,JavaScript' 카테고리의 다른 글
[JavaScript] 주요 문법 정리(1) (실행 컨텍스트, this binding, 유사 배열 객체) (0) | 2024.04.25 |
---|---|
[JavaScript] Map/Set (0) | 2024.04.24 |
[JavaScript] ES6 문법 정리 (구조분해할당, 단축 속성명, 전개 구문 ...) (0) | 2024.04.23 |
[JavaScript] Hoisting? Arrow function? JavaScript 기초 문법 (0) | 2024.04.18 |
[JavaScript/HTML5] 비밀번호 기능 구현 및 현재 날짜와 시간 가져오기, input Type(HTML5) (0) | 2024.04.17 |