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

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

1、數據類型：JavaScript定義的數據類型有字符串、數字、布爾、數組、對象、Null、Undefined，但typeof有區分可判別的數據分類是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()});//"23ABgDh5D4kD"

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。~運算(按位取反)等價于符號取反然后減一，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和bind：call和apply的用途都是用來調用當前函數，且用法相似，它們的第一個參數都用作 this 對象，但其他參數call要分開列舉，而apply要以一個數組形式傳遞；bind給當前函數定義預設參數后返回這個新的函數(初始化參數改造后的原函數拷貝)，其中預設參數的第一個參數是this指定(當使用new 操作符調用新函數時，該this指定無效)，新函數調用時傳遞的參數將位于預設參數之后與預設參數一起構成其全部參數，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事件流：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通過target的祖先從window傳播到目標的父節點。IE不支持Capturing
(2) 目標階段(Target Phase)：event到達event的target。如果事件類型指示事件不冒泡，則event在該階段完成后將停止
(3) 事件冒泡(Bubbling Phase)：event以相反的順序在目標祖先中傳播，從target的父節點開始，到window結束

事件綁定：

1. Tag事件屬性綁定：<button onclick="do some things"></button>
2. 元素Node方法屬性綁定：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)將遞歸轉換為循環：蹦床函數中循環的作用是申請第三者函數來繼續執行未完成的任務，而保證自己函數可以順利退出。另外，這里的第三者和自己可能是同一函數定義

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對象與JSON互轉換、New Function()、 forEach()、DOM事件流的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。