본문 바로가기
728x90
반응형

자바스크립트/Javascript14

javascript 객체복사 Object.assign 을 대신하는 jquery $.extends 및 깊은복사(deep copy) 및 얕은복사(Shllow Copy) 1.Javascript Object 복사 javascript Object를 복사하는 방법은 2가지가 있다 첫번째는 얕은복사(Shllow Copy) 가 있고 두번째는 깊은 복사(Deepcopy)가 있다. 이둘의 차이가 무엇이냐고 물었을때 답할수있는것은 바로 새로운객체 생성되느냐 참조하느냐이다. 위 사진과 같이 객체를 생성하고 item,bitem속성을 넣어주고 복사를해보자 이것을 보고 깊은 복사(Deep Copy)라고 한다 얕은 복사에 특징은 메모리를 참조한다는것이고 만약에 a를 수정할시에 b는 a를 참조하고 있으므로 아래와같이 b의 속성들도 변한다는것이 특징이다. 얕은복사(Shllow Copy)는 참조하는것이 아니라 새로운 객체를 생성하는것으로 볼수있다. 위 콘솔 처럼 c라는 Object를 생성하고 속성을.. 2021. 1. 3.
[javascript]자바스크립트 reduce 활용 *광고 클릭은 제게 큰 힘이됩니다! var a = [1,2,3,4,5,6,7,8] a.forEach(data =>{ console.log(data); }) 대부분 배열에 있는 인자들을 꺼내어 사용할때 forEach문을 사용한다 ! 하지만 javascript 전문적인 개발자들은 내장 매서드중에 가장 강력한 reduce를 알아두면 다양한 곳에서 한층더 발전된 개발을 할수있을것이다! reduce,reduceRight reduce를 덧셈 함수로 알고있는 사람들이 많다. 왜냐면 대부분 사이트에서 reduce 예제를 덧셈으로 두기때문이다. reduce메서드는 배열.reduce((누적값,현재값,인덱스,요소)=>{return 결과},초깃값); 형태로 사용한다. 아래는 흔한 덧셈 예시이다 var a = [1,2,3,4,.. 2020. 11. 26.
[자바스크립트]javascript 생성자 함수 최근에 es6에는 javascript도 class를 생성할수있도록 해놓았다. 하지만 아직도 많은 사람들은 생성자 함수를 이용하고있다. 생성자 일반 언어 즉, java,python,c++ 등등 class라는 것이 존재한다. 하지만 javasciprt에서는 es6이전에까지는 존재하지 않았고, 그 방편으로 생성자 함수라는것이 존재했다. function Person(name, gender) { this.name = name; this.gender = gender; this.Hello = function() { alert(this.name + ' "hello"'); } } 위 와 같이 함수를 만들고 new 를 통해 생성해주면 생성자 함수가 되는것이다. kim이라는 변수에 new Person을 통하여 이름이 김동완.. 2020. 11. 23.
[자바스크립트]javascript RegExp란? RegExp 정규표현식은 formal language라고하며 , regular expression 이나 rational expression이라부른다. 약어로 regexp라고 부른다. RegExp를 사용하는 이유는 대부분 어떤 패턴을 찾아 if문으로 걸러주는역할을 하는경우가 많다. 예를들면 var array = ['칙촉', '포테이토', '구름', '배경', '비경']; var result = []; array.forEach(function(item) { if (item.match(/경$/)) { result.push(item); } }); console.log(result); // ['배경', '비경'] 위와 같이 array함수에 각각의 item에 match라는 함수를이용하여 원하는 문자를 찾을경우 /경.. 2020. 11. 23.
javascript Node 와 Element란? *도움이 되셨다면 광고 한번 클릭해주세요! 제게 큰 힘이됩니다! Node ,Element This is a paragraph. This is another paragraph. javasciprt node는 위와같이 태그 노드와 텍스트 노드 전체를 말한다. javascript Element는 텍스트 노드를 제외하고 태그()만 말합니다. 따라서 태그만 검색할때는 Element가 붙은 메소드를 선택해야한다. 여기서 DOM에 개념을 말하자면 dom은 document Object Model이라 불립니다. 즉 object 객체이며 document를 객체 형태로 구현했다고 생각하면된다. 흔히들 html 구조를보면 아래처럼 계층적 구조를 가지고있다. 이 상황을 dom 객체로 구현해보면 { document: { html.. 2020. 11. 22.
[자바스크립트(javascript)] 모든 문자열 치환(repalce,replaceAll) 문자열 치환 웹서비스를 구축하다보면 받아오는 데이터가 안내문등일 경우 그 안내문안에 이름과 전화번호등({nm},{phone}) 등으로 데이터가 들어와 이 데이터를 유동적으로 교체하는 경우가 많이 발생한다. 그럴경우에 안내문string을 replace로 변환하여 정상작동 하도록 만들기도한다. let str = '동완, 바보, 바보, 바보'; let replaced_str = str.replace('바보', '천재'); 위코드처럼 str.replace 를 사용하면 문자열을 바꿀수있다. 결과를 보자 잉? 분명히 문자열을 바꾸었는데 두번째 바보만 천재로 바뀌고 나머지는 변경되지 않았따? 왜그럴까? 자바스크립트 replace는 문자열에서 변경하려는 문자열이 여러 번 반복될경우, 첫번째로 발견한 문자열만 치환해준다.. 2020. 11. 21.
728x90
반응형