본문 바로가기

프론트엔드 공부/javscript

 (34)
정규식표현 패턴(표현) #패턴(표현) 정리 | 패턴 | 설명 | | ^ab | 줄(line) 시작에 있는 ab와 일치 | | ab$ | 줄(line)끝에 있는 ab와 일치 | | . | 임의의 한 문자와 일치 | | a|b | a또는b와 일치 | | ab? | b가 없거나 b와 일치 | {3} | 3개연속일치 {3,} | 3개 이상 연속 일치 {3,5} | 3개이상 5개 이하(3-5개)연속일치 [abc] | a또는 b또는 c [a-z] | a부터 z사이의 문자 구간에 일치(영어소문자) [A-Z] A부터 Z사이의 문자구간에 일치(영어대문자) [0-9] | 0부터 9 사이 문자구간에 일치(숫자) [가-힣] 가부터 힣 사이의 문자구간에 일치(한글) \w | 63개 문자(word,대소영문,숫자,_)에 일치 \b | 63개 문자에 일치..
정규표현식01(RegExp) *정규표현식의 역할 문자검색(search) 문자대체(replace) 문자추출(extract) *정규표현식 관련 세가지 사이트 regex101.com https://regexr.com/ regexper.com -다른 언어나 특정환경에서도 정규표현식을 쓸수 있는데, 자바스크립트에서는 동작 but 다른 환경에서는 동작x(혹은 그 반대의 경우) 도 있을 수 있으며 위 사이트에서 확인후 맹신치말고 다시 테스트해봐야한다. *정규표현식을 만드는 두가지방법 1.생성자함수2.리터럴방식 (보통리터럴은 {} 사용하여 객체 방식으로 데이터생성,정규표현식은 /) //1 const regexp1 = new RegExp("^abc"); //2 const regexpw = /^abc/; 예제 const str = ` 010-1234..
참조형데이터의 복사 : Object.assign(), spread 연산자, lodash //참조형 데이터의 복사 //: 얕은복사(shallow):Object.assign(), spread연산자 //: 깊은복사(deep) : 자바스크립트로 구현하기 복잡하여 lodash npm 사용 const user = { name :'minji', age:31, emails : ['minji@gmail.com'] } // const copyUser = user // console.log(copyUser === user) //true // user.age = 22 // console.log(copyUser === user) //true //Object.assign({},) // const copyUser = Object.assign({},user) // console.log(copyUser === user)..
참조형데이터의 데이터불변성 *데이터불변성 데이터값이 메모리에 한번 들어가면 불변한다. 할당연산자 사용시 데이터는 복사의 의미가 아닌 메모리 주소의 위치를 변경하게 된다. 참조형데이터의 경우 할당연산자를 사용할 경우 메모리 위치가 바뀌어 전체적인 틀이 깨질 수 있으므로 데이터를 얕은복사, 혹은 깊은 복사의 개념으로 접근하는 것이 좋다. //데이터불변성(Immutabililty) //원시데이터: //string,number,boolean,undefined,null //참조데이터: //object,array,function(콜백형태로 사용시) //원시데이터는 한번 메모리에 들어가면불변한다 //하단 예시의 경우 a라는 변수가 1이라는 메모리를, b라는 변수가 1이라는 메모리를 가르키는 것과 같다 // ex ) let a=1 ; let b..
전개연산자(spread), rest parameter, 축약형 //전개연산자(spread) //전개연산자를 쓰는이유: 배열의 아이템을 매개변수로 넣을때 편하게 사용하기 위해 펼쳐주는것 const fruits = ['apple','banana','cherry']; console.log(fruits);//["apple","banana","cherry"] console.log(...fruits) //"apple","banana","cherry" function toObject(a,b,c){ return{ a:a, b:b, c:c } } console.log(toObject(fruits)) //"a":[ // "apple", // "banana", // "cherry" // ] console.log(toObject(...fruits)) // { // "a":"apple",..
구조분해할당(Destructing assignment) - 객체,배열 //구조분해할당(Destructing assignment) //객체내 key 값을 변수화하여 사용 // 변수내 key 값이 undefined인 경우의 값은 default 값을 구조 분해할당 변수 //내에서 지정할 수도 있음 //구조분해할당(Destructing assignment) //객체내 key 값을 변수화하여 사용 const user = { name: 'minji', age: 31, email : 'minji@gmail.com' } const {name,age : weight, address = 'korea'} = user console.log(`사용자의 이름은 ${name}입니다`); console.log(weight); //20 console.log(address); //korea //사용자의 ..
정적메서드 Object.keys(); 사용시 인덱싱사용하는 이유 //정적메서드 Object.keys //전역객체 Object안에 keys라는 정적메서드 실행하여 user 인수 받아옴 const user = { name: 'minji', age: 31, email: 'minji@gamil.com' } const keys = Object.keys(user); console.log(keys); //["name","age","email"] //보통 객체 데이터의 value값 가져올때 user.name으로 많이 가져오는데 //Object.keys는 배열값을 받아옴으로 user['name']으로 많이 사용 const values = keys.map(key => user[key]) console.log(values); //["minji",31,"minji@gmail.com"]
정적메서드 Object.assign(); 복사와 참조의 차이 //Object : 전체 영역에서 사용 가능한 전역객체(asign은 prototype메서드x) //정적메소드는 일반 객체 데이터에는 직접사용할수 x, 전역객체에 직접적으로 사용하는 메서드 const result = Object.assign(target,source); console.log(result === target) //true //assgin 정적메서드의 타겟과 출처가 복사된 결과값은 일치한다. //정적메서드 assign 사용하기 //assign()은 prototype안에 내장되어있는 함수가x 객체에 직접 부여 //Object.assgin() //열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성응ㄹ 복사하여 대상 객체를 반환 const target = {a:1, b:2}; const s..

티스토리툴바