摘要：與的區(qū)別如何理解和熟練運(yùn)用中的及，動(dòng)態(tài)改變裝換為數(shù)組返回的是數(shù)組，但是本身保持不變借用別人的方法實(shí)現(xiàn)繼承封裝對(duì)象保證的指向刪除或替換數(shù)組元素方法與方法的作用是不同的，方法會(huì)直接對(duì)數(shù)組進(jìn)行修改。

《JavaScript經(jīng)典實(shí)例》各節(jié)中的完整代碼解決了常見的編程問(wèn)題，并且給出了在任何瀏覽器中構(gòu)建Web應(yīng)用程序的技術(shù)。只需要將這些代碼示例復(fù)制并粘貼到你自己的項(xiàng)目中就行了，可以快速完成工作，并且在此過(guò)程中學(xué)習(xí)JavaScript的很多知識(shí)。

5種基本類型：字符串、數(shù)值、布爾值、null、undefined，有3個(gè)有對(duì)應(yīng)的構(gòu)造方法對(duì)象:string、Number、Boolean

基本類型變量嚴(yán)格等于字面值，而對(duì)象實(shí)例則不會(huì)，因?yàn)榛绢愋褪前粗祦?lái)比較的，而值是字面值

var num1 = 123;
var num2 = new Number(123);
console.log(typeof num1);  //number 
console.log(typeof num2);  //object

提取之前：This is a list of items: cherries, limes, oranges, apples.

提取之后：["cherries","limes","oranges","apples"]

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。

split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。

var sentence = "This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas. That was the list of items.";
var start = sentence.indexOf(":");
var end = sentence.indexOf(".", start+1);
var listStr = sentence.substring(start+1, end);
var fruits = listStr.split(",");
console.log(fruits);  //[" cherries", " oranges", " apples", " bananas"]

//取出空格等
fruits.forEach(function(elmnt,indx,arry) {
    arry[indx] = elmnt.trim();
});
console.log(fruits);  //["cherries", "oranges", "apples", "bananas"]

想要驗(yàn)證一個(gè)變量已經(jīng)定義了，是一個(gè)字符串，并且它不為空

if(typeof unknowVariable === "string" && unknowVariable.length > 0) {...}

想要向字符串中插入一個(gè)特殊字符，例如一個(gè)換行

轉(zhuǎn)義序列都以一個(gè)反斜杠 開始（）

使用String對(duì)象的replace方法和一個(gè) 正則表達(dá)式

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。

var searchString = "Now is the time, this is the tame";
var re = /tw{2}e/g;
var replacement = searchString.replace(re, "place");
console.log(replacement);  //Now is the place, this is the place

RegExp exec() 方法用于檢索字符串中的正則表達(dá)式的匹配

RegExpObject.exec(string)

返回一個(gè)數(shù)組，其中存放匹配的結(jié)果。如果未找到匹配，則返回值為 null

var searchString2 = "Now is the time and this is the time and that is the time";
var parttern = /tw*e/g;  //w 匹配任何單詞字符
var matchArray;

var str = "";

//用regexp exec檢查模式，如果不為空，處理它
while((matchArray = parttern.exec(searchString2)) != null) {
    str += "at " + matchArray.index + " we found " + matchArray[0] + "
";
}
console.log(str);
// at 7 we found the
// at 11 we found time
// at 28 we found the
// at 32 we found time
// at 49 we found the
// at 53 we found time

//實(shí)例1-1
document.getElementById("searchSubmit").onclick = function() {

    //獲取模式
    var pattern = document.getElementById("pattern").value;
    var re = new RegExp(pattern, "g");
    //獲取字符串
    var searchString = document.getElementById("inComing").value;
    
    var matchArray;
    var resultString = "
";
    var first = 0;
    var last = 0;
    
    //找到每一個(gè)匹配
    while((matchArray = re.exec(searchString)) != null) {
        last = matchArray.index;
    
        //獲取所有匹配的字符串，將其連接起來(lái)
        resultString += searchString.substring(first, last);
    
        //使用class，添加匹配的字符串
        resultString += "" + matchArray[0] + "";
        first = re.lastIndex;
    }
    
    //完成字符串
    resultString += searchString.substring(first, searchString.length);
    resultString += "
";
    
    //插入頁(yè)面
    document.getElementById("searchResult").innerHTML = resultString;

}

交換名稱，讓姓氏先出現(xiàn)

解決：使用捕獲圓括號(hào)和一個(gè)正則表達(dá)式在字符串中找到并記住他們的名字，然后互換他們

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。

var myName = "Tao Yang";
var nameRe = /^(w+)s(w+)$/;
var myNewName = myName.replace(nameRe, "$2 $1");
console.log(myNewName);  //Yang Tao

使用正則表達(dá)式把尖括號(hào)(<>)轉(zhuǎn)換為命名的實(shí)體：<和>

var pieceOfHtml = "
This is a paragraph
";
pieceOfHtml = pieceOfHtml.replace(//g, ">");
console.log(pieceOfHtml); //
This is a paragraph

var dtstr = "2014-3-04T19:35:32Z";
dtstr = dtstr.replace(/D/g, " ");
console.log(dtstr);  //2014 3 04 19 35 32
var dtcomps = dtstr.split(" ");
//在基于1的ISO 8610月份和基于0的日期格式之間轉(zhuǎn)換
dtcomps[1]--;

var convdt = new Date(Date.UTC.apply(null, dtcomps));
console.log(convdt.toString());  //Wed Mar 05 2014 03:35:32 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

使用一個(gè)匿名函數(shù)作為setInterval()或setTimeout()方法調(diào)用的第一個(gè)參數(shù)

var intervalId = null;
document.getElementById("redbox").addEventListener("click", startBox, false);
function startBox() {
    if(intervalId == null) {
        var x = 100;
        intervalId = setInterval(function() {
            x += 5;
            var left = x + "px";
            document.getElementById("redbox").style.left = left;
        }, 500);
    } else {
        clearInterval(intervalId);
        intervalId = null;
    }
}

在第一個(gè)事件發(fā)生的時(shí)候，創(chuàng)建一個(gè)Date對(duì)象，當(dāng)?shù)诙€(gè)時(shí)間發(fā)生的時(shí)候，創(chuàng)建一個(gè)新的Date對(duì)象，并且從第二個(gè)對(duì)象中減去第一個(gè)對(duì)象。兩者之間的差以毫秒表示的，要轉(zhuǎn)換為秒，就除以1000

兩個(gè)日期可以相減，但是相加就成了拼接字符串

var firstDate = new Date();
setTimeout(function() {
    doEvent(firstDate);
}, 25000);

function doEvent() {
    var secondDate = new Date();
    var diff = secondDate - firstDate;
    console.log(diff);   //25001
}

使用Number對(duì)象的 toString() 方法

var num = 255;
console.log(num.toString(16));  //ff

遍歷表中包含了數(shù)字值的列，將其轉(zhuǎn)換為數(shù)字，并加和

querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素

如果你需要返回所有的元素，請(qǐng)使用 querySelectorAll() 方法替代

全局函數(shù) parseInt() 和 parseFloat() 都把字符串轉(zhuǎn)化為數(shù)字

var sum = 0;
//使用querySelectorAll找到第二列的所有單元格
var cells = document.querySelectorAll("td:nth-of-type(2)");
for(var i=0, l=cells.length; i
1.14 在角度和弧度之間轉(zhuǎn)換
將角度轉(zhuǎn)換為弧度
var radians = degrees * (Math.PI / 180);

將弧度轉(zhuǎn)化為角度
var degrees = radians * (180 / Math.PI);
1.15 找到頁(yè)面元素可容納的一個(gè)圓的半徑和圓心


Math.min(x,y)方法可返回指定的數(shù)字中帶有最低值的數(shù)字。
求出寬度和高度中較小的一個(gè)，用其除以2得到半徑

var circleRadius = Math.min(elemengWidth, elemengHeight) / 2;
給指定頁(yè)面元素的寬度、高度，通過(guò)將二者都除以2來(lái)找到其中心點(diǎn)
var x = elemengWidth / 2;
var y = elemengHeight / 2;


Window.getComputedStyle()方法給出應(yīng)用活動(dòng)樣式表后的元素的所有CSS屬性的值，并解析這些值可能包含的任何基本計(jì)算。
getComputedStyle()




    
    
    



    

        
    


    


1.16 計(jì)算圓弧的長(zhǎng)度

給定了一個(gè)圓的半徑及圓弧角的角度值，求該圓弧的長(zhǎng)度
使用Math.PI把角度轉(zhuǎn)換為弧度，并在公式中使用該結(jié)果來(lái)求得圓弧的長(zhǎng)度

var radians = degrees * (Math.PI / 180);
var arclength = radians * radians;
第2章 JavaScript數(shù)組
2.1 在數(shù)組中搜索
indexOf()、lastIndexOf()
var animals = new Array("dog", "cat", "seal", "elephant", "walrus", "lion");
var index = animals.indexOf("cat");
var index2 = animals.lastIndexOf("lion");
console.log("i",index);  //1
console.log("i2",index2);  //5

findIndex() 方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。
var nums = [2, 4, 199, 80, 400, 30, 90];
var over = nums.findIndex(function(ele) {
    return (ele >= 100);
});
console.log("nums",nums[over]);  //199
2.2 用concat()和apply()將一個(gè)二維數(shù)組扁平化

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。
arrayObject.concat(arrayX,arrayX,......,arrayX)

var fruitarray = [];
fruitarray[0] = ["stranwberry", "orange"];
fruitarray[1] = ["lime", "peach", "banana"];
fruitarray[2] = ["tangerine", "apricot"];
console.log("array",fruitarray.concat());
var newArray = fruitarray.concat.apply([], fruitarray);
console.log(newArray);

apply()與call()的區(qū)別

如何理解和熟練運(yùn)用js中的call及apply？

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);


call() & apply()，動(dòng)態(tài)改變this

function add(a, b) {
    console.log("add", this);
}
function sum(a, b) {
    console.log("sum", this);
}
add(1, 2);  //Window
sum(1, 2);  //Window

add.call(sum, 1, 2);  //sum(a, b)
sum.call(add, 1, 2);  //add(a ,b)
arguments裝換為數(shù)組, 返回的是數(shù)組，但是arguments本身保持不變
var arg = [].slice.call(arguments);
// [].slice.call(document.getElementsByTagName("li"));
借用別人的方法
var foo = {
    name: "jack",
    showName: function() {
        console.log("this name:",this.name);
    }
}
var bar = {
    name: "rose"
}
foo.showName();  //jack
foo.showName.call(bar);  //rose
實(shí)現(xiàn)繼承
var Student = function(name, age, high) {
    Person.call(this, name, age);
    this.high = high;
}
封裝對(duì)象保證this的指向
var _this = this;
_this.$box.on("mousedown", function()) {
    return _this.fndown.apply(_this);
}
2.3 刪除或替換數(shù)組元素

splice() 方法與 slice() 方法的作用是不同的，splice() 方法會(huì)直接對(duì)數(shù)組進(jìn)行修改。
var animals = new Array("dog", "cat", "rabbit", "pig", "apple");
// 從數(shù)組刪除元素
animals.splice(animals.indexOf("apple"), 1);
console.log(animals);  // ["dog", "cat", "rabbit", "pig"]
// 替換
animals.splice(animals.indexOf("pig"), 1, "monkey");
console.log(animals);  //["dog", "cat", "rabbit", "monkey"]

// 使用循環(huán)和分割來(lái)替換和刪除元素
var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"];
while(charSets.indexOf("ab") != -1) {
    charSets.splice(charSets.indexOf("ab"), 1, "**");
}
console.log(charSets);  //["**", "bb", "cd", "**", "cc", "**", "dd", "**"]
while(charSets.indexOf("**") != -1) {
    charSets.splice(charSets.indexOf("**"), 1);
}
console.log(charSets); //["bb", "cd", "cc", "dd"]
2.4 提取一個(gè)數(shù)組中的一部分
不更改原數(shù)組，使用slice()

var animals = new Array("dog", "cat", "rabbit", "pig", "apple");
var newAnimals = animals.slice(1, 2);
console.log(animals);  //["dog", "cat", "rabbit", "pig", "apple"]
console.log(newAnimals);  //["cat"]
2.5 對(duì)每一個(gè)數(shù)組元素應(yīng)用一個(gè)函數(shù)
Array.prototype.forEach()
var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"];
charSets.forEach(function(element, index, array) {
    if(element == "ab") array[index] = "**";
});
console.log(charSets);  //["**", "bb", "cd", "**", "cc", "**", "dd", "**"]
2.6 使用forEach()和call()遍歷querySelectorAll()的結(jié)果

querySelectorAll()
可以將forEach()強(qiáng)制和一個(gè)NodeList一起使用

var cells = document.querySelectorAll("td + td");
[].forEach.call(cells, function(cell) {
    sum += parseFloat(cell.firstChild.data);
});
2.7 對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù)并返回一個(gè)新數(shù)組

將一個(gè)十進(jìn)制的數(shù)組轉(zhuǎn)化為新的等價(jià)的十六進(jìn)制數(shù)組

map()方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
與forEach()不同，不會(huì)修改原數(shù)組，但是必須返回一個(gè)值

var decArray = [23, 3, 24, 45, 500, 9, 70];
var hexArray = decArray.map(function(ele) {
    return ele.toString(16);
});
console.log(decArray);  //[23, 3, 24, 45, 500, 9, 70]
console.log(hexArray);  //["17", "3", "18", "2d", "1f4", "9", "46"]
2.8 創(chuàng)建一個(gè)過(guò)濾后的數(shù)組

filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。
var charSet = ["**", "bb", "cc", "**", "cd"];
var newArray = charSet.filter(function(element, index, array) {
    return element != "**";
});
console.log(newArray);  //["bb", "cc", "cd"]
2.9 驗(yàn)證數(shù)組內(nèi)容

使用Array every()方法來(lái)檢查每個(gè)元素是否符合給定的條件

some() 方法確保至少某些元素符合該條件
區(qū)別：every()方法只要函數(shù)返回一個(gè)false值，處理就會(huì)結(jié)束，而some()方法會(huì)繼續(xù)測(cè)試每個(gè)元素，直至返回true，此時(shí)，不再驗(yàn)證其他元素，即可返回ture

function testValue(element, index, array) {
    var testExp = /^[a-zA-Z]+$/;
    return testExp.test(element);
}
var elemSet = ["**", 123, "adv", "-", 45, "AAA"];
var result = elemSet.every(testValue);
var result2 = elemSet.some(testValue);
console.log(result);  //false
console.log(result2);  //true

var elemSet2 = ["aaa", "animals", "vvv"];
result = elemSet2.every(testValue);
result2 = elemSet2.some(testValue);
console.log(result);  //true
console.log(result2);  //true
2.10 使用一個(gè)關(guān)聯(lián)數(shù)組來(lái)存儲(chǔ)表單元素名和值

keys() 方法返回一個(gè)新的Array迭代器，它包含數(shù)組中每個(gè)索引的鍵。
var elemArray = {};
var elem = document.forms[0].elements[0];
elemArray[elem.id] = elem.value;
var elemArray = {name: "yt", age:25};
Object.keys(elemArray).forEach(function(key) {
    var value = elemArray[key];
    console.log(value);
});
第3章 JavaScript的構(gòu)建塊
3種基本的創(chuàng)建函數(shù)方式：
* 聲明式函數(shù)
* 匿名函數(shù)或函數(shù)構(gòu)造函數(shù)
* 函數(shù)字面值或函數(shù)表達(dá)式
3.1 放置函數(shù)并提升
聲明式函數(shù)，可以放置在代碼中的任何位置；函數(shù)表達(dá)式，必須將其放置在使用函數(shù)的位置之前
// 在聲明一個(gè)變量之前打印a
console.log("a", a);  //undefined
var a;
// 在聲明一個(gè)變量并賦值
console.log("aa", aa);  //undefined
var aa = 1;

// 聲明變量發(fā)生了提升，但是賦值并沒(méi)有，賦值是在相應(yīng)的位置發(fā)生的

// 聲明式函數(shù)，在訪問(wèn)該函數(shù)之前，提升將確保把函數(shù)聲明移動(dòng)到當(dāng)前作用域的頂部
console.log(mytest());  //success
function mytest() {
    return "success";
}
// 使用函數(shù)表達(dá)式就會(huì)報(bào)錯(cuò)，變量可能聲明了，但沒(méi)有實(shí)例化，但是你的代碼試圖將這個(gè)變量當(dāng)做一個(gè)函數(shù)對(duì)待
console.log(mytest2());  //TypeError: mytest2 is not a function
var mytest2 = function() {
    return "success2";
}

3.2 把一個(gè)函數(shù)當(dāng)做參數(shù)傳遞給另一個(gè)函數(shù)
function otherFunction(x, y, z) {
    x(y, z);
}
// 可以像傳遞一個(gè)命名的變量一樣，將一個(gè)函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)
var param = function func(a1, a2) { alert(a1 + " " + a2); };
otherFunction(param, "Hello", "World");

函數(shù)式編程和JavaScript


高階函數(shù)： 一個(gè)函數(shù)接受另一個(gè)函數(shù)作為參數(shù)，或者返回一個(gè)函數(shù)，或者兩者都具備

函數(shù)式編程： 對(duì)應(yīng)用程序復(fù)雜性進(jìn)行抽象的一種方式，使用整齊、干凈的函數(shù)調(diào)用替代了復(fù)雜的循環(huán)和條件語(yǔ)句（代碼可讀性高）
比如：將數(shù)組中的所有數(shù)字相加


// for循環(huán)相加
var nums = [1, 34, 3, 15, 4, 18];
var sum = 0;
for(var i = 0; i < nums.length; i++) {
    sum += nums[i];
}
console.log("sum", sum);  //75

var nums2 = [1, 34, 3, 15, 4, 18];
var sum2 = nums2.reduce(function(n1, n2) {
    return n1 + n2;
});
console.log("sum2", sum2);  //75
[arr.reduce([callback, initialValue])](https://developer.mozilla.org... 方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開始縮減，最終為一個(gè)值。
3.3 實(shí)現(xiàn)遞歸算法
* 想要實(shí)現(xiàn)一個(gè)函數(shù)，它遞歸地遍歷一個(gè)數(shù)組并返回一個(gè)反向的數(shù)組字符串
* 缺點(diǎn)：遞歸很消耗內(nèi)存

// 階乘
function factorial(n) {
    return n == 1 ? n : n * factorial(n - 1);
}
console.log("階乘", factorial(4));  // 24

// 斐波那契
var fibonacci = function(n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}
console.log("斐波那契", fibonacci(10));  //55

// 使用一個(gè)遞歸函數(shù)字面值來(lái)反轉(zhuǎn)數(shù)組元素，從最大長(zhǎng)度開始，每次迭代都將這個(gè)值自減
// 當(dāng)為 0 時(shí)，返回字符串
var reverseArrary = function(x, index, str) {
    return index == 0 ? str : reverseArrary(x, --index, (str += " " + x[index]));
}
var arr = ["apple", "orange", "peach", "lime"];
var str = reverseArrary(arr, arr.length, "");
console.log("str", str);  //lime peach orange apple

// 如果要反過(guò)來(lái)，按照順序把數(shù)組連接為一個(gè)字符串
var orderArray = function(x, i, str) {
    return i == x.length - 1 ? str : orderArray(x, ++i, (str += x[i] + " "));
}

var numArr = [1, 2, 3, 4];
var numStr = orderArray(numArr, -1, "");
console.log("numStr", numStr);  //1 2 3 4 
3.4 使用一個(gè)定時(shí)器和回調(diào)防止代碼阻塞
* 在程序的輸出中，3個(gè)外圍的 `console.log()` 立即被處理了
* 隊(duì)列中下一個(gè)事件是第一個(gè) `noBlock()` 函數(shù)調(diào)用，其中又調(diào)用了 `factorial()` ，記錄了其運(yùn)行時(shí)候的活動(dòng)，最后跟著回調(diào)函數(shù)的調(diào)用
* 第二次同樣地調(diào)用了 `callBack()`
* 第三次調(diào)用 `callBack()` 的時(shí)候，回調(diào)函數(shù)中的調(diào)用針對(duì)第一次 `callBack()` ，并使用了第一次函數(shù)調(diào)用的最終結(jié)果：6




... ?

px ?