JavaScript權(quán)威指南分為四部分，第一部分：JS核心;第二部分：客戶端JS;第三部分：JS核心參考和第一部分相呼應(yīng)，是JS核心的重點(diǎn)歸納和講解，也是第一部分的總結(jié)和升華部分，所以建議看完第一部分之后可以直接去看第三部分;第四部分：客戶端JS參考，和第三方的模式一樣，也是第二部分的總結(jié)、提煉、講解已經(jīng)升華。

1.JS的類型

按照數(shù)據(jù)類型劃分：

原始類型：Number、String、Boolean、Null、Undefined、Symbol(ES6加入，它的實(shí)例唯一，且不可改變，不能使用關(guān)鍵“new”聲明);

對(duì)象類型：Object

擴(kuò)展：普通的js對(duì)象是“命名值”的無(wú)序集合，js同樣定義了一種特殊對(duì)象——數(shù)組(array)，表示帶編號(hào)的有序集合。

ES6新出了鍵控集合：Set和Map,Set集合值唯一，不會(huì)重復(fù);Map存儲(chǔ)的為鍵值對(duì)。

JS還定義了另一種特殊對(duì)象——函數(shù)。如果函數(shù)用new來(lái)初始化一個(gè)新建對(duì)象，我們稱為構(gòu)造函數(shù)(constructor)，每個(gè)構(gòu)造函數(shù)定義一類對(duì)象，除了數(shù)組(array)類和函數(shù)(Function)類之外，還有日期(Date)類、正則(RegExp)類、錯(cuò)誤(Error)類都是js的核心類。

2.JS中的算術(shù)運(yùn)算

算術(shù)運(yùn)算符除了+、-、*、/、%(求余運(yùn)算符，求整數(shù)后的余數(shù))、還有更復(fù)雜的運(yùn)算通過定義Math對(duì)象的函數(shù)和常量來(lái)實(shí)現(xiàn)

Math.abs(-10);      　　// => 10：絕對(duì)值
Math.ceil(0.6);  　　   // => 1.0：向上取整數(shù)
Math.floor(0.6);       // => 向下取整數(shù)
Math.round(0.6);       // =>:1.0：四舍五入
Math.random();         // => 0-1隨機(jī)數(shù)
Math.max(1, 3, 5);     // => 返回最高值
Math.min(1, -3, 50);   // => 返回最低值
Math.pow(2, 3);        // => 8：2的3次方
Math.PI;         　　　　// => π：圓周率
Math.sin(3);           // => 3的正弦值
Math.sqrt(30);      　　// => 平方根
Math.tan(100);      　　// => 正切
Math.acos(10);      　　// => 反余弦值
Math.cos(100);      　　// => 余弦值
Math.exp(100);      　　// => e的100次冪

3.string的slice用法

string的slice()用法，提取字符串的一部分，返回一個(gè)新字符，不改變?cè)瓉?lái)字符串(和array.slice用法一致)。

var str1 = "hello world";
str1.slice(1, 4);   // "ell"：截取下標(biāo)1到下標(biāo)4，不包含最后一位
str1.slice(1);      //"ello world"：截取下標(biāo)1以后的所有字符
str1.slice(-3); 　　 //"rld"：截取后三位

4.JS中的“假值”

undefined、null、0、-0、""、NaN 這6個(gè)可以轉(zhuǎn)換成false的值，稱作“假值”。

var exp1 = undefined;
if (exp1) {
    console.log("真");
} else {
    console.log("假");
}
//output:假

5.數(shù)字轉(zhuǎn)換的方法(科學(xué)技術(shù)或四舍五入)

Number轉(zhuǎn)換成字符串的場(chǎng)景提供了三種方法：

toFixed() => 根據(jù)小數(shù)點(diǎn)后指定位數(shù)將數(shù)字轉(zhuǎn)化成字符串，會(huì)進(jìn)行四舍五入;

toExponential() => 使用指數(shù)計(jì)數(shù)法將數(shù)字轉(zhuǎn)換為字符串;

toPrecision() => 根據(jù)指定的有效字位數(shù)將數(shù)字轉(zhuǎn)換成字符串;

var n = 123456.78;
n.toFixed(0);  　　　　 //output:123457
n.toFixed(1);  　　　　 //ouput:123456.8
n.toFixed(5);  　　　　 //output:123456.78000
n.toExponential(1);    //output:1.2e+5
n.toPrecision(4);      //output:1.2346e+5
n.toPrecision(7);      //output:123456.8
n.toPrecision(10);     //output:123456.7800

6.parseInt()的“高級(jí)”玩法

parseInt()可以接收第二個(gè)可選參數(shù)，這個(gè)參數(shù)指定了數(shù)字轉(zhuǎn)換的基數(shù)，有效的取值范圍是2-36.

parseInt("11", 5);    //6 => 1*5+1
parseInt("ff", 16);   //255 => 15*16+15
parseInt("077", 10);  //77 => 70*10+7

7.全局變量和"全局屬性"的delete

js聲明變量使用var和不用var的區(qū)別，大部分我們使用的時(shí)候都是一樣的，例如：

var str1 = "hello";
str2 = "world!";
console.log("%s %s", str1, str2);
//output:hello world!

而在使用delete屬性時(shí)，使用var的變量是不允許刪除的，例如：

var str1 = "hello";
str2 = "world!";
this.str3 = "!!!";
delete str1;    //false
delete str2;    //true
delete str3;    //true

總結(jié)：使用var的變量，可以理解為全局變量，全局變量屬性是不可編輯的，而不使用var的可以看做是聲明了一個(gè)全局屬性，等同于this.xxx=yyy，屬性是可以編輯的，所以是可以delete的。

8.JS的局部變量提升和塊級(jí)作用域

先來(lái)看代碼執(zhí)行的結(jié)果(也是一道經(jīng)典的js面試題)：

var scope = "global";
function f() {
    console.log(scope);
    var scope = "local";
    console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global

這是什么原因造成的?為什么不是global/local/global呢?因?yàn)閑s5沒有塊級(jí)作用域，局部變量被提升到最前了聲明了，js解析器的機(jī)制造成的，上面的代碼類似于下面這段代碼：

var scope = "global";
function f() {
    var scope; //只聲明變量，變量前置
    console.log(scope);
    scope = "local";
    console.log(scope);
}
f();
console.log(scope);
//output: undefined、local、global

所以通常來(lái)說(shuō)，在作用域里面變量聲明的代碼要放在代碼的最頂部，這是一個(gè)非常不錯(cuò)的編程習(xí)慣，也可以避免一些不必要的問題。

9.特殊的Date類型轉(zhuǎn)換

如果我告訴你typeof(new Date()+1)和typeof(new Date-1)的值不同你信嗎?

下面來(lái)看具體代碼：

var now = new Date();
typeof (now + 1);   　　//output:string
typeof (now - 1);   　　//output:number
now == now.toString(); //output:true

那上面的問題是怎么造成的，typeof(now+1)不應(yīng)該是number類型嗎?

原因分析：

“+” 有兩種含義，一個(gè)是字符串連接，一個(gè)是加法。

類型轉(zhuǎn)換的時(shí)候，默認(rèn)先調(diào)用valueOf，然后才調(diào)用toString，而Date類型除外，所以對(duì)于new Date()的時(shí)候優(yōu)先，調(diào)用的是toString()，而“+”操作是把他當(dāng)成了字符串連接而不是數(shù)字相加。

“-”的時(shí)候，只有減法的含義，也就是說(shuō)優(yōu)先調(diào)用valuleOf，所以結(jié)果為number類

10.js的繼承機(jī)制

繼承機(jī)制：js是通過原型鏈實(shí)現(xiàn)繼承的。簡(jiǎn)單實(shí)現(xiàn)如下：

function Animal(name) {
    this.name = name || 'Animal';
    this.sleep = function () {
        console.log(this.name + '正在睡覺！');
    }
}
Animal.prototype.eat = function (food) {
    console.log(this.name + '正在吃：' + food);
};
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

11.Array的高級(jí)用法

(1)slice和splice區(qū)別

雖然都是截取數(shù)組然而slice和splice的區(qū)別很大，接下來(lái)具體來(lái)看。

先說(shuō)slice

slice定義：方法返回一個(gè)從開始到結(jié)束(不包括結(jié)束)選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象。原始數(shù)組不會(huì)被修改。

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.slice(1, 4);  　　//["banana", "cherry", "dates"]
array.slice(1);     　　//["banana", "cherry", "dates", "fig"]
array.slice(-2);    　　//["dates", "fig"]
console.log(array);     //["apple", "banana", "cherry", "dates", "fig"]

Array.prototype.slice(x,y); 第一位參數(shù)為截取開始下標(biāo)，截取的時(shí)候包含此下標(biāo)，第二位參數(shù)缺省參數(shù)，如果不填寫，標(biāo)識(shí)截取到數(shù)組的最后一位，如果填寫了，標(biāo)識(shí)截取到下標(biāo)的位置，截取元素不包含最后一位，截取不改變?cè)瓉?lái)數(shù)組。

splice部分

splice定義：方法通過刪除現(xiàn)有元素和/或添加新元素來(lái)更改一個(gè)數(shù)組的內(nèi)容。

代碼1：

//方法通過刪除現(xiàn)有元素和/或添加新元素來(lái)更改一個(gè)數(shù)組的內(nèi)容。
var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2); //從下標(biāo)2開始截取，截取2個(gè)
console.log(array); //["apple", "banana", "fig"]

代碼2：

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2); //從下標(biāo)2開始截取，截取到最后
console.log(array); //["apple", "banana"] 

代碼3：

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.splice(2, 2, "plum", "orange"); //截取下標(biāo)2到后面2個(gè)元素替換成"plum", "orange"
console.log(array); //["apple", "banana", "plum", "orange", "fig"]

小技巧：可以使用var newArray = array.splice();實(shí)現(xiàn)數(shù)組復(fù)制。

(2)length的另一種用法

var array = ["apple", "banana", "cherry", "dates", "fig"];
array.length = 3; //["apple", "banana", "cherry"]
array.length = 0; //[] => 刪除所有元素

(3)reduce()

定義：方法對(duì)累加器和數(shù)組中的每個(gè)元素(從左到右)應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。

var array = [10, 5, 20, 15];
var sum = array.reduce(function (x, y) { return x + y }, 0);    　　 //求和
var product = array.reduce(function (x, y) { return x * y }, 0);    //求積
var max = array.reduce(function (x, y) { return (x > y) ? x : y }); //求最大值

(4)every()和some()

定義：數(shù)組的邏輯判斷，對(duì)每一個(gè)元素進(jìn)行判斷，返回true或者false.

every()每一個(gè)元素都要滿足條件才會(huì)返回true，some()其中一項(xiàng)滿足條件即會(huì)為true.

function fun(element, index, array) {
    return element > 10;
}
[2, 5, 8, 1, 4].some(fun);  　　　　// false
[12, 5, 8, 1, 4].some(fun); 　　　　// true
[12, 5, 8, 1, 4].every(fun); 　　　// false
[12, 15, 18, 11, 14].every(fun);  // true

(5)map()

定義：將調(diào)用數(shù)組的每一個(gè)元素傳遞給指定的函數(shù)，并返回一個(gè)新的數(shù)組，不會(huì)改變老數(shù)組。

var array = [1, 4, 9, 16];
var map = array.map(x => x * 2);    //[2, 8, 18, 32]

(6)Arguments.callee

定義：當(dāng)前正在執(zhí)行的函數(shù).

在匿名函數(shù)中使用Arguments.callee引用自身，以便實(shí)現(xiàn)遞歸。代碼如下：

var fun = function (x) {
    console.log(x);
    if (x < 1) {
        return 1;
    }
    return x + arguments.callee(x - 1);
}
fun(3);   //7 => 3+2+1+1

(7)sort()排序規(guī)則的理解

sort()是可以介紹一個(gè)匿名函數(shù)作為排序規(guī)則的，例如：

var array = [3, 9, 3, 12, 5, 8, 1, 4];
array.sort(function (a, b) { return a - b; }); //[1, 3, 3, 4, 5, 8, 9, 12]

理解：a-b得到一個(gè)值，而這個(gè)正常的值將按照數(shù)字的正常規(guī)則進(jìn)行排序，也就是 負(fù)數(shù)=>0=>正數(shù)，所以理解a-b不能單純的理解他為一個(gè)boolean值，而是根據(jù)a-b給數(shù)組一個(gè)排序規(guī)則，如果需要倒敘的話就用b-a.

12.高階函數(shù)

定義： 高階函數(shù)就是操作函數(shù)的函數(shù)，它接受一個(gè)或多個(gè)作為參數(shù)，并返回一個(gè)新函數(shù)。

function sum(x, y, f) {
    return f(x) + f(y);
}
console.log(sum(-5, 6, Math.abs));

13.正則表達(dá)式字符

[...] 　　 方塊內(nèi)任意字符

[^...] 　 非方塊內(nèi)任意字符

w 　　　　[a-zA-Z0-9]

W 　　　　[^a-zA-Z0-9]

d 　　　　[0-9]

D 　　　　[^0-9]

14.解構(gòu)賦值

let [x, y] = [1, 2];
[x, y] = [x + 1, y + 1];
[x, y] = [y, x];
console.log(x, y);  // 3 2

15.閉包

“閉包”這個(gè)詞剛開始開的時(shí)候就頭皮發(fā)麻，感覺很“高大上”難以理解，其實(shí)掌握之后，發(fā)現(xiàn)也挺好用的，下面介紹一下我對(duì)于閉包的理解。

定義：閉包就是可以訪問一個(gè)函數(shù)局部(私有)變量的方法。

var Cat = function () {
    var name = "cat";
    var age = 2;
    this.getName = function () {
        return name;
    }
    this.getAge = function () {
        return age;
    }
}
var cat = new Cat();
console.log(cat.name);      　　//undefined
console.log(cat.age);       　　//undefined
console.log(cat.getName());    //cat
console.log(cat.getAge());     //2

如上代碼：利用閉包可以給用特權(quán)的方法訪問私有屬性，保證了私有變量不被修改和污染，當(dāng)然根據(jù)實(shí)際需求可以設(shè)置通過方法修改私有屬性也是可行的。如果大家想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的JavaScript教程，里面有更豐富的知識(shí)等著大家去學(xué)習(xí)，希望對(duì)大家能夠有所幫助哦。