JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1、數(shù)據(jù)類型：JavaScript定義的數(shù)據(jù)類型有字符串、數(shù)字、布爾、數(shù)組、對(duì)象、Null、Undefined，但typeof有區(qū)分可判別的數(shù)據(jù)分類是number、string、boolean、object(null / array)、function和undefined。undefined 這個(gè)值表示變量不含有值，null 可以用來(lái)清空變量

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

2、默認(rèn)類型轉(zhuǎn)換：這里列舉一部分

5 == true;//false。true會(huì)先轉(zhuǎn)換為1，false轉(zhuǎn)換為0
'12' + 1;//'123'。數(shù)字先轉(zhuǎn)換成字串
'12' - 1;//11。字串先轉(zhuǎn)換成數(shù)字
[] == false;//true。數(shù)組轉(zhuǎn)換為其他類型時(shí)，取決于另一個(gè)比較者的類型
[] == 0;//true
[2] == '2';//true
[2] == 2;//true
[] - 2;//-2
12 + {a:1};//"12[object Object]"。這里對(duì)象先被轉(zhuǎn)換成了字串
null == false;//false
null == 0;//false
null - 1;//-1

3、JS對(duì)象與JSON互轉(zhuǎn)換：如果要復(fù)制對(duì)象屬性，可通過(guò)JSON.stringify()轉(zhuǎn)換成字符串類型，賦值給復(fù)制變量后再通過(guò)JSON.parse()轉(zhuǎn)換成對(duì)象類型，但這種轉(zhuǎn)換會(huì)導(dǎo)致原對(duì)象方法丟失，只有屬性可以保留下來(lái)；如果要復(fù)制完整對(duì)象，需要遍歷key:value來(lái)復(fù)制對(duì)象的方法和屬性；如果在發(fā)生對(duì)象賦值后再對(duì)其中一個(gè)賦新值，其將指向新的地址內(nèi)容。關(guān)于JSON與JavaScript之間的關(guān)系：JSON基于 JavaScript 語(yǔ)法，但不是JavaScript 的子集

4、大小寫切換：

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

str = 'web-application-development';
str = str.replace(/-([a-z])/g, (replace)=>replace[1].toUpperCase());//"webApplicationDevelopment"(駝峰轉(zhuǎn)換)

5、生成隨機(jī)數(shù)：

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

6、|0、~~取整數(shù)：如3.2 / 1.7 | 0 = 1、~~(3.2 / 1.7) = 1。~運(yùn)算(按位取反)等價(jià)于符號(hào)取反然后減一，if (!~str.indexOf(substr)) {//do some thing}

7、無(wú)第三變量交換值：下邊的做法未必在空間和時(shí)間上都比聲明第三變量來(lái)的更好，寫在這里僅僅為了拓展一下思維

//方法一：通過(guò)中間數(shù)組完成交換
let a = 1,
 b = 2;
a = [b, b = a][0];

//方法二：通過(guò)加減運(yùn)算完成交換
let a = 1,
 b = 2;
a = a + b;
b = a - b;
a = a - b;

//方法三：通過(guò)加減運(yùn)算完成交換
let a = 1,
 b = 2;
a = a - b;
b = a + b;
a = b - a;

//方法四：通過(guò)兩次異或還原完成交換。另外，這里不會(huì)產(chǎn)生溢出
let a = 1,
 b = 2;
a = a ^ b;
b = a ^ b;
a = a ^ b;
//方法五：通過(guò)乘法運(yùn)算完成交換
let a = 1,
 b = 2;
a = b + (b = a) * 0;

8、/和%運(yùn)算符：

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

9、原型鏈(Prototype Chaining)與繼承： 原型鏈?zhǔn)荅CMAScript 中實(shí)現(xiàn)繼承的方式。JavaScript 中的繼承機(jī)制并不是明確規(guī)定的，而是通過(guò)模仿實(shí)現(xiàn)的，所有的繼承細(xì)節(jié)并非完全由解釋程序處理，你有權(quán)決定最適用的繼承方式，比如使用對(duì)象冒充(構(gòu)造函數(shù)定義基類屬性和方法)、混合方式(用構(gòu)造函數(shù)定義基類屬性，用原型定義基類方法)

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和bind：call和apply的用途都是用來(lái)調(diào)用當(dāng)前函數(shù)，且用法相似，它們的第一個(gè)參數(shù)都用作 this 對(duì)象，但其他參數(shù)call要分開(kāi)列舉，而apply要以一個(gè)數(shù)組形式傳遞；bind給當(dāng)前函數(shù)定義預(yù)設(shè)參數(shù)后返回這個(gè)新的函數(shù)(初始化參數(shù)改造后的原函數(shù)拷貝)，其中預(yù)設(shè)參數(shù)的第一個(gè)參數(shù)是this指定(當(dāng)使用new 操作符調(diào)用新函數(shù)時(shí)，該this指定無(wú)效)，新函數(shù)調(diào)用時(shí)傳遞的參數(shù)將位于預(yù)設(shè)參數(shù)之后與預(yù)設(shè)參數(shù)一起構(gòu)成其全部參數(shù)，bind最簡(jiǎn)單的用法是讓一個(gè)函數(shù)不論怎么調(diào)用都有同樣的 this 值。下邊的list()也稱偏函數(shù)(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技術(shù)： 替代函數(shù)中太多的遞歸調(diào)用，是一種可以緩存之前運(yùn)算結(jié)果的技術(shù)，這樣我們就不需要重新計(jì)算那些已經(jīng)計(jì)算過(guò)的結(jié)果。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)：詞法表示包括不被計(jì)算的變量(上下文環(huán)境中變量，非函數(shù)參數(shù))的函數(shù)，函數(shù)可以使用函數(shù)之外定義的變量。下面以單例模式為例來(lái)講述如何創(chuàng)建閉包

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

13、New Function()：用一個(gè)字串來(lái)新建一個(gè)函數(shù)，函數(shù)參數(shù)可以this.key形式來(lái)調(diào)用：

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. 在維護(hù)頁(yè)面DOM樹時(shí)，使用文檔片段document fragments 通常會(huì)起到優(yōu)化性能的作用

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()遍歷：另外，適當(dāng)時(shí)候也可以考慮使用for 或 for ... in 或 for ... of 語(yǔ)句結(jié)構(gòu)

1. 數(shù)組實(shí)例遍歷： arr.forEach(function(item, key){
        //do some things
    })
2. 非數(shù)組實(shí)例遍歷： Array.prototype.forEach.call(obj, function(item, key){
        //do some things
    })
3. 非數(shù)組實(shí)例遍歷： Array.from(document.body.childNodes[0].attributes).forEach(function(item, key){
        //do some things. Array.from()是ES6新增加的
    })

16、DOM事件流：Graphical representation of an event dispatched in a DOM tree using the DOM event flow.If the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation() has been called prior to the dispatch, all phases will be skipped.

(1) 事件捕捉(Capturing Phase)：event通過(guò)target的祖先從window傳播到目標(biāo)的父節(jié)點(diǎn)。IE不支持Capturing
(2) 目標(biāo)階段(Target Phase)：event到達(dá)event的target。如果事件類型指示事件不冒泡，則event在該階段完成后將停止
(3) 事件冒泡(Bubbling Phase)：event以相反的順序在目標(biāo)祖先中傳播，從target的父節(jié)點(diǎn)開(kāi)始，到window結(jié)束

事件綁定：

1. Tag事件屬性綁定：<button onclick="do some things"></button>
2. 元素Node方法屬性綁定：btnNode.onclick = function(){//do some things}
3. 注冊(cè)EventListener：btnNode.addEventListener('click', eventHandler, bubble)；另外，IE下實(shí)現(xiàn)與W3C有點(diǎn)不同，btnNode.attachEvent(‘onclick', eventHandler)

17、遞歸與棧溢出(Stack Overflow) ：遞歸非常耗費(fèi)內(nèi)存，因?yàn)樾枰瑫r(shí)保存成千上百個(gè)調(diào)用幀，很容易發(fā)生“棧溢出”錯(cuò)誤；而尾遞歸優(yōu)化后，函數(shù)的調(diào)用棧會(huì)改寫，只保留一個(gè)調(diào)用記錄，但這兩個(gè)變量(func.arguments、func.caller，嚴(yán)格模式“use strict”會(huì)禁用這兩個(gè)變量，所以尾調(diào)用模式僅在嚴(yán)格模式下生效)就會(huì)失真。在正常模式下或者那些不支持該功能的環(huán)境中，采用“循環(huán)”替換“遞歸”，減少調(diào)用棧，就不會(huì)溢出

function Fibonacci (n) {
 if ( n <= 1 ) {return 1};
 return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10); // 89
Fibonacci(50);// 20365011074，耗時(shí)10分鐘左右才能出結(jié)果
Fibonacci(100);// 這里就一直出不了結(jié)果，也沒(méi)有錯(cuò)誤提示

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"

可見(jiàn)，經(jīng)尾遞歸優(yōu)化之后，性能明顯提升。如果不能使用尾遞歸優(yōu)化，可使用蹦床函數(shù)(trampoline)將遞歸轉(zhuǎn)換為循環(huán)：蹦床函數(shù)中循環(huán)的作用是申請(qǐng)第三者函數(shù)來(lái)繼續(xù)執(zhí)行未完成的任務(wù)，而保證自己函數(shù)可以順利退出。另外，這里的第三者和自己可能是同一函數(shù)定義

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

關(guān)于“JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。