JS 대상 과 JSON 상호 전환,New Function(),foreach(),DOM 이벤트 흐름 등 js 개발 기반 소결

1.데이터 형식:JavaScript 가 정의 하 는 데이터 형식 은 문자열,숫자,불,배열,대상,Null,Undefined 가 있 지만 type:of 는 구분 가능 한 데이터 분 류 는 number,string,boolean,object(null/array),function 과 undefined 입 니 다.undefined 이 값 은 변수 에 값 이 없 음 을 표시 합 니 다.null 은 변 수 를 비 울 수 있 습 니 다.

let a = 100;
typeof a;//number
a = undefined;
typeof a;//undefined
a = null;
typeof a;//null

2.기본 형식 변환:일 부 를 열거 합 니 다.

5 == true;//false。true     1，false   0
'12' + 1;//'123'。        
'12' - 1;//11。        
[] == false;//true。          ，            
[] == 0;//true
[2] == '2';//true
[2] == 2;//true
[] - 2;//-2
12 + {a:1};//"12[object Object]"。            
null == false;//false
null == 0;//false
null - 1;//-1

3.JS 대상 과 JSON 이 서로 변환 합 니 다.대상 속성 을 복사 하려 면 JSON.stringify()를 통 해 문자열 형식 으로 변환 할 수 있 습 니 다.복사 변수 에 값 을 부여 한 다음 에 JSON.parse()를 통 해 대상 유형 으로 변환 할 수 있 습 니 다.그러나 이러한 변환 은 원래 의 대상 방법 을 잃 어 버 리 고 속성 만 유지 할 수 있 습 니 다.전체 대상 을 복사 하려 면 key:value 를 옮 겨 다 니 며 대상 의 방법 과 속성 을 복사 해 야 합 니 다.대상 에 게 값 을 부여 한 후 그 중 하 나 를 새 값 으로 부여 하면 새로운 주소 내용 을 가리 킬 것 입 니 다.JSON 과 JavaScript 간 의 관계:JSON 은 JavaScript 문법 을 기반 으로 하지만 JavaScript 부분 집합 은 아 닙 니 다.
4.대소 문자 전환:

let str = '23abGdH4d4Kd';
str = str.replace(/([a-z]*)([A-Z]*)/g, function(match, $1 , $2){return $1.toUpperCase() + $2.toLowerCase()});//"23ABgDh4D4kD"

str = 'web-application-development';
str = str.replace(/-([a-z])/g, (replace)=>replace[1].toUpperCase());//"webApplicationDevelopment"(    )

5.난수 생 성:

str = Math.random().toString(36).substring(2) 

6,|0,~정수:예 를 들 어 3.2/1.7|0=1,~(3.2/1.7)=1.~연산(위치 에 따라 반 을 취하 고)은 기호 에서 반 을 취한 다음 에 1 을 뺀 다.if(!~str.indexOf(substr)) {//do some thing}
7.세 번 째 변수 가 없 는 교환 값:아래 의 방법 은 반드시 공간 과 시간 적 으로 세 번 째 변 수 를 설명 하 는 것 보다 더 좋 은 것 이 아니 라 여기 서 사 고 를 넓 히 기 위해 서 입 니 다.

//   ：          
let a = 1,
 b = 2;
a = [b, b = a][0];

//   ：          
let a = 1,
 b = 2;
a = a + b;
b = a - b;
a = a - b;

//   ：          
let a = 1,
 b = 2;
a = a - b;
b = a + b;
a = b - a;

//   ：            。  ，        
let a = 1,
 b = 2;
a = a ^ b;
b = a ^ b;
a = a ^ b;
//   ：          
let a = 1,
 b = 2;
a = b + (b = a) * 0; 

8./와%연산 자:

. 4.53 / 2 = 2.265
. 4.53 % 2 = 0.5300000000000002
. 5 % 3 = 2

9.프로 토 타 입 체인(Prototype Chaining)과 계승:프로 토 타 입 체인 은 ECMAScript 에서 계승 을 실현 하 는 방식 이다.JavaScript 의 계승 체 제 는 명확 하 게 규정된 것 이 아니 라 모방 을 통 해 이 루어 진 것 입 니 다.모든 계승 디 테 일 은 해석 프로그램 에 의 해 처리 되 는 것 이 아니 라 가장 적용 되 는 계승 방식 을 결정 할 권리 가 있 습 니 다.예 를 들 어 대상 사칭(구조 함수 정의 기본 속성 과 방법),혼합 방식(구조 함수 로 기본 속성 을 정의 하고 원형 으로 기본 방법 을 정의 합 니 다)

function ClassA(sColor) {
 this.color = sColor;
}

ClassA.prototype.sayColor = function () {
 alert(this.color);
};

function ClassB(sColor, sName) {
 ClassA.call(this, sColor);
 this.name = sName;
}

ClassB.prototype = new ClassA();

ClassB.prototype.sayName = function () {
 alert(this.name);
};

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //   "blue"
objB.sayColor(); //   "red"
objB.sayName(); //   "John"

10.call,apply 와 bid:call 과 apply 의 용 도 는 모두 현재 함 수 를 호출 하 는 데 사용 되 고 용법 이 비슷 합 니 다.그들의 첫 번 째 매개 변 수 는 모두 this 대상 으로 사용 되 지만 다른 매개 변 수 는 call 을 나 누 어 열거 하고 apply 는 하나의 배열 로 전달 해 야 합 니 다.bid 는 현재 함수 에 미리 설 정 된 매개 변 수 를 정의 한 후 이 새로운 함수(매개 변 수 를 초기 화 한 원 함수 복사)를 되 돌려 줍 니 다.그 중에서 미리 설 정 된 매개 변 수 는 this 지정(new 연산 자 를 사용 하여 새 함 수 를 호출 할 때 이 지정 이 잘못 되 었 습 니 다)입 니 다.새 함수 가 호출 될 때 전달 하 는 매개 변 수 는 미리 설 정 된 매개 변수 뒤에 미리 설 정 된 매개 변수 와 함께 모든 매개 변 수 를 구성 합 니 다.bind 의 가장 간단 한 용법 은 함수 가 아무리 호출 되 더 라 도 같은 this 값 을 가지 게 하 는 것 이다.아래 list()는 편 함수(Partial Functions)라 고도 합 니 다.

function list() {
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

11.Memoization 기술:대체 함수 에 너무 많은 재 귀적 호출 은 캐 시 하기 전에 결 과 를 연산 할 수 있 는 기술 입 니 다.그러면 우 리 는 이미 계 산 된 결 과 를 다시 계산 할 필요 가 없습니다.In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Although related to caching, memoization refers to a specific case of this optimization, distinguishing it from forms of caching such as buffering or page replacement. In the context of some logic programming languages, memoization is also known as tabling.

function memoizer(fundamental, cache) { 
 let cache = cache || {}, 
 shell = function(arg) { 
 if (! (arg in cache)) { 
 cache[arg] = fundamental(shell, arg); 
 } 
 return cache[arg]; 
 }; 
 return shell; 
} 
 

12.클 로 저(Closure):어법 은 계산 되 지 않 은 변수(문맥 환경 에서 변수,비 함수 매개 변수)를 포함 하 는 함 수 를 나타 내 고 함 수 는 함수 이외 의 변 수 를 사용 할 수 있 습 니 다.다음은 단일 모드 를 예 로 들 어 패 키 지 를 만 드 는 방법 을 설명 합 니 다.

let singleton = function(){
 let obj;
 return function(){
 return obj || (obj = new Object());
 }
}();

13.New Function():하나의 문자열 로 함 수 를 새로 만 듭 니 다.함수 인 자 는 this.key 형식 으로 호출 할 수 있 습 니 다.

let variables = {
 key1: 'value1',
 key2: 'value2'
},
 fnBody = 'return this.key1 + ":" + this.key2',
 fn = new Function(fnBody);
console.log(fn.apply(variables));

14.DocumentFragment:Roughly speaking,a DocumentFragment is a lightweight container that can hold DOM nodes.페이지 DOM 트 리 를 유지 할 때 문서 세 션 document fragments 를 사용 하면 성능 을 최적화 하 는 역할 을 합 니 다.

let ul = document.getElementsByTagName("ul")[0],
 docfrag = document.createDocumentFragment();

const browserList = [
 "Internet Explorer", 
 "Mozilla Firefox", 
 "Safari", 
 "Chrome", 
 "Opera"
];

browserList.forEach((e) => {
 let li = document.createElement("li");
 li.textContent = e;
 docfrag.appendChild(li);
});

ul.appendChild(docfrag);

 15.foreach()옮 겨 다 니 기:또한 적당 한 시기 에 for 또는 for...in 또는 for...of 구문 구 조 를 사용 하 는 것 도 고려 할 수 있 습 니 다.
1.배열 인 스 턴 스 옮 겨 다 니 기:arr.forEach(function(item,key){
        //do some things
    })
2.비 배열 인 스 턴 스 옮 겨 다 니 기:Array.prototype.forEach.call(obj,function(item,key){
        //do some things
    })
3.비 배열 인 스 턴 스 옮 겨 다 니 기:Array.from(document.body.childNodes[0].attributes).forEach(function(item,key){
        //do some things.Array.from()은 ES6 가 새로 추 가 했 습 니 다.
    })
16.DOM 이벤트 흐름:DOM 이벤트 흐름 을 사용 하여 DOM 트 리 에 파 송 된 이벤트 의 그래 픽 표현 입 니 다.거품 속성 이 false 로 설 정 된 경우 거품 단 계 는 건 너 뛰 고,stopPropagation()이 발송 전에 호출 된 경우 모든 단 계 는 건 너 뜁 니 다.

(1)이벤트 캡 처(Capturing Phase):이벤트 가 target 의 조상 을 통 해 window 에서 목표 의 부모 노드 로 전 파 됩 니 다.IE 는 Capturing 을 지원 하지 않 습 니 다.
(2)목표 단계(Target Phase):이벤트 가 이벤트 의 target 에 도달 합 니 다.이벤트 형식 지시 이벤트 가 거품 이 일어나 지 않 으 면 이벤트 가 이 단계 가 완료 되면 중 단 됩 니 다.
(3)이벤트 거품(Bubbling Phase):이벤트 가 상 반 된 순서 로 대상 조상 에 게 전 파 됩 니 다.target 의 부모 노드 부터 window 가 끝 날 때 까지 입 니 다.
이벤트 귀속:
1.태그 이벤트 속성 귀속:
2.원소 노드 방법 속성 귀속:btnNode.onclick=function(){//do some things}
3.EventListener:btnNode.addEventListener('click',eventHandler,bubble)를 등록 합 니 다.또한 IE 에서 이 루어 지 는 것 은 W3C 와 조금 다 릅 니 다.btnNode.attachEvent('onclick',eventHandler)
17.재 귀 와 스 택 넘 침(Stack Overflow):재 귀 는 메모 리 를 매우 소모 합 니 다.수천 개의 호출 프레임 을 동시에 저장 해 야 하기 때문에'스 택 넘 침'오류 가 발생 하기 쉽 습 니 다.한편,마지막 재 귀 최적화 후 함수 의 호출 스 택 은 다시 쓰 고 하나의 호출 기록 만 유지 합 니 다.그러나 이 두 변 수 는(func.arguments,func.caller,엄격 한 모델 인'use strict'는 이 두 변 수 를 사용 하지 않 기 때문에 마지막 호출 모델 은 엄격 한 모델 에서 만 유효 합 니 다)일 그 러 집 니 다.정상 적 인 모드 에서 또는 이 기능 을 지원 하지 않 는 환경 에서'순환'으로'재 귀'를 교체 하고 호출 스 택 을 줄 이면 넘 치지 않 습 니 다.

function Fibonacci (n) {
 if ( n <= 1 ) {return 1};
 return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10); // 89
Fibonacci(50);// 20365011074，  10         
Fibonacci(100);//           ，       

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
 if( n <= 1 ) {return ac2};
 return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}
Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity. "Uncaught RangeError:Maximum call stack size exceeded"

이 를 통 해 알 수 있 듯 이 꼬리 순환 이 최 적 화 된 후에 성능 이 뚜렷하게 향상 되 었 다.만약 에 꼬리 순환 최 적 화 를 사용 하지 못 하면 트 램 펄 린 함수(trampoline)를 사용 하여 순환 으로 전환 할 수 있 습 니 다.트 램 펄 린 함수 에서 순환 하 는 역할 은 제3자 함 수 를 신청 하여 미 완성 임 무 를 계속 수행 하고 자신의 함수 가 순조롭게 종 료 될 수 있 도록 하 는 것 입 니 다.또한,이곳 의 제3자 와 자신 은 같은 함수 정의 일 수 있 습 니 다.

function trampoline(f) {
 while (f && f instanceof Function) {
 f = f();
 }
 return f;
}

//  Fibonacci2()   
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
 if( n <= 1 ) {return ac2};
 return Fibonacci2.bind(undefined, n - 1, ac2, ac1 + ac2);
}
trampoline(Fibonacci2(100));//573147844013817200000

자,이상 은 본 고 에서 js 개발 응용 중의 JS 대상 과 JSON 의 상호 전환,New Function(),foreach()를 옮 겨 다 니 며 DOM 이벤트 흐름 입 니 다.재 귀 등 기초 지식 점 의 총 결 입 니 다.여러분 들 이 js 를 공부 하 는 과정 에서 도움 이 되 었 으 면 좋 겠 습 니 다~