參考 學(xué)習(xí)網(wǎng)站
- 廖雪峰的JavaScript教程
- w3cshool
- 阮一峰的JavaScript全棧工程師培訓(xùn)教程
- W3C
- WebAIM
- 海棠學(xué)院 全棧Web前端工程師進階班 入門到精通 ——付費
術(shù)語
- ECMAScript
European Computer Manufacturer's Association
歐洲計算機制造商協(xié)會 - DOM
Document Object Model
瀏覽器所開放的底層的文檔對象模型 - CSS
Cascading Style Sheet
級聯(lián)樣式表
前言
本文著重JavaSript語言的兩點特性牺汤，即函數(shù)和對象看疙，其他如變量，運算符，語句
基本語法
- 分號 ;
JavaScript的語法和Java語言類似冲九，每個語句以 ; 結(jié)束 ，
以//開頭直到行末的字符被視為行注釋 另一種塊注釋是用/.../把多行字符包裹起來
var x = 1;
"Hello world";
var x = 1; var y = 2; // 不建議一行寫多個語句!
/*
語句塊用{...}
{...}還可以嵌套护盈，形成層級結(jié)構(gòu)
*/
if (2 >1) {
x = 1;
y = 2;
z = 3;
if (x < y) {
z = 4;
}
if (x > y) {
z = 5;
}
}
變量
運算符
語句
函數(shù)
定義函數(shù)
在JavaScript中跑慕，定義函數(shù)的方式如下:
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
上述 abs()函數(shù)的定義如下：
- function 指出這是一個函數(shù)定義
- abs 是函數(shù)的名稱
- (x) 括號內(nèi)列出函數(shù)的參數(shù)徒坡， 多個參數(shù)以 , 分隔
- { ... }之間的代碼是函數(shù)體撕氧，可以包含若干語句，甚至可以沒有語句
請注意喇完，函數(shù)體內(nèi)部的語句在執(zhí)行時伦泥，一旦執(zhí)行到 return 時，函數(shù)就執(zhí)行完畢，并將結(jié)果返回不脯。因此府怯，函數(shù)內(nèi)部通過條件判斷和循環(huán)可以實現(xiàn)非常復(fù)雜的邏輯。
如果沒有return語句防楷，函數(shù)執(zhí)行完畢后也會返回結(jié)果牺丙，只是結(jié)果為undefined。
由于JavaScript的函數(shù)也是一個對象复局，上述定義的 abs() 函數(shù)實際上是一個函數(shù)對象冲簿，而函數(shù)名 abs 可以視為指向該函數(shù)的變量。
因此亿昏，第二種定義函數(shù)的方式如下：
var abs = function (x) {
if ( x >= 0) {
return x;
}else {
return -x;
}
};
在這種方式下溢谤， function (x) { ... } 是一個匿名函數(shù)放案，它沒有函數(shù)名秕衙。但是爬坑，這個匿名函數(shù)賦值給了變量 abs , 所以, 通過變量 abs 就可以調(diào)用該函數(shù)。
上述兩種定義完全等價递礼，注意第二種方式按照完整語法需要在函數(shù)體末尾加一個; 惨险， 表示賦值語句結(jié)束。
調(diào)用函數(shù)
調(diào)用函數(shù)時宰衙，按順序傳入?yún)?shù)即可:
abs(10); // 返回10
abs(-9); // 返回9
由于JavaScript允許傳入任意個參數(shù)而不影響調(diào)用，因此傳入的參數(shù)比定義的參數(shù)多也沒有問題
abs(10, 'hilohi'); // 返回10
abs(-9, 'hi','lo',null); //返回9
傳入的參數(shù)比定義的少也沒有問題
abs(); // 返回NaN
此時 abs(x) 函數(shù)的參數(shù) x 將收到 undefined ,計算結(jié)果為 NaN睹欲。
要避免收到 undefined , 可以對參數(shù)進行檢查:
function abs ( x ) {
if (typeof x !== 'number') {
throw 'Not a number'
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
arguments
JavsScript還有一個免費贈送的關(guān)鍵字arguments,它只在函數(shù)內(nèi)部起作用供炼，并且永遠指向當前函數(shù)的調(diào)用者傳入的所有參數(shù)。 arguments 類似 Array 但它不是一個Array
function foo (x) {
alert (x); // 10
for (var i =0; i < arguments.length; i++) {
arert(arguments[i]); // 10,20,30
}
}
foo(10,20,30);
利用arguments窘疮，你可以獲得調(diào)用者傳入的所有參數(shù)袋哼。也就是說，即使函數(shù)不定義任何參數(shù)闸衫，也是可以拿到參數(shù)的值
function abs() {
if (arguments.length === 0) {
return 0;
}
var x = arguments[0];
return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9
實際上arguments最常用于判斷傳入?yún)?shù)的個數(shù)涛贯。你可能回看到這樣的寫法:
//foo(a [, b],c)
//接收2-3個參數(shù)，b是可選參數(shù)蔚出，如果只傳2個參數(shù)弟翘，b默認為null:
function foo (a, b, c) {
if (arguments.length === 2) {
//實際拿到的參數(shù)是 a和b , c 為undefined
c = b; // 把 b 賦給 c
b = null; // b 變?yōu)槟J值
}
// ...
}
要把中間的參數(shù)b變?yōu)?可選'參數(shù)，就只能通過arguments判斷骄酗，然后重新調(diào)整參數(shù)并賦值稀余。
rest參數(shù)
由于JavaScript函數(shù)允許接收任意個參數(shù)，于是我們就不得不用arguments來獲取所有參數(shù):
function foo (a , b) {
var i ,rest = [ ];
if (arguments.length > 2) {
for (i = 2; i < arguments.length ; i++) {
rest.push(arguments[i]);
}
}
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
為了獲取除了已定義參數(shù)a b之外的參數(shù)趋翻，我們不得不用arguments,并且循環(huán)要從索引2開始以便排除前兩個參數(shù)睛琳，這種寫法很別扭，只是為了獲得額外的rest參數(shù)，有沒有更好的方法师骗？
ES6標準引入了rest參數(shù)历等，上面的函數(shù)可以改寫為：
function foo (a,b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 結(jié)果"
// a = 1
// b = 2
// Array [ 3, 4, 5]
foo(1);
//結(jié)果:
//a = 1
//b = undefined
//Array [ ]
rest參數(shù)只能寫在最后，前面用 ... 標識辟癌，從運行結(jié)果可知寒屯，傳入的參數(shù)先綁定a 、b愿待，多余的參數(shù)以數(shù)組形式交給變量rest , 所以浩螺，不再需要arguments我們就獲取了全部參數(shù)。
如果傳入的參數(shù)連正常定義的參數(shù)都沒填滿仍侥，也不要緊要出，rest參數(shù)會接收一個空數(shù)組 （注意不是undefined）
小心你的return語句
前面我們講到了JavaScript引擎有一個行末自動添加分號的機制，這可能讓你栽到return語句的一個大坑
function foo() {
return { name : 'foo'};
}
foo(); //{name: 'foo'}
如果把return語句拆成兩行
function foo() {
return
{ name : 'foo'};
}
foo(); // undefined
要小心了农渊，由于JavaScript引擎在行末自動添加分號的機制患蹂，上面的代碼實際變成了
function foo() {
return; //自動添加了分號，相當于return undefined;
{ name: 'foo'}; //這行語句已經(jīng)沒法執(zhí)行到了
}
所以正確的多行寫法是
function foo() {
return {
name : 'foo'
};
}
變量作用域
在JavaScript中砸紊，用 var 申明的變量實際上是有作用域的传于。
如果一個變量在函數(shù)體內(nèi)部申明，則該變量的作用域為整個函數(shù)體醉顽，在函數(shù)體外不可引用該變量
'use strict';
function foo() {
var x = 1;
x = x + 1;
}
x = x + 2; // ReferenceError! 無法在函數(shù)體外引用變量x
如果兩個不同的函數(shù)各自申明了同一個變量沼溜，那么該變量只在各自的函數(shù)體內(nèi)作用。換句話說游添，不同函數(shù)內(nèi)部的同名變量互相獨立系草，互不影響
'use strict'
function foo() {
var x = 1;
x = x + 1;
}
function bar() {
var x = 'A';
x = x + 'B';
}
由于JavaScript的函數(shù)可以嵌套，此時唆涝，內(nèi)部函數(shù)可以訪問外部函數(shù)定義的變量找都，反過來則不行：
'user strict';
function foo() {
var x = 1;
function bar() {
var y = x + 1; //bar 可以訪問foo的變量x!
}
var z = y + 1; //ReferenceError! foo不可以訪問bar的變量y!
}
如果內(nèi)部函數(shù)和外部函數(shù)的變量重名怎么辦？
'use strict';
function foo( ) {
var x = 1;
function bar( ) {
var x = 'A';
alert('x in bar( ) = ' + x ); // 'A'
}
alert('x in foo( ) = ' + x); // 1
bar( );
}
這說明JavaScript的函數(shù)在查找變量時從自身函數(shù)定義開始廊酣，從"內(nèi)"向"外"查找能耻。如果內(nèi)部函數(shù)定義了與外部函數(shù)重名的變量，則內(nèi)部函數(shù)的變量將"屏蔽"外部函數(shù)的變量亡驰。
變量提升
JavaScript的函數(shù)定義有個特點晓猛，它會先掃描整個函數(shù)體的語句，把所有申明的變量"提升"到函數(shù)頂部：
'use strict'
function foo( ) {
var x = 'Hello' + y;
alert(x);
var y = 'Bob';
}
foo( );
雖然是strict模式凡辱，但語句 var x = 'Hello' + y; 并不報錯鞍帝，原因是變量y在稍后申明了。但是alert顯示Hello undefied,說明變量y的值為udefined煞茫。這正是因為JavaScript引擎自動提升了變量y的聲明帕涌，但不會提升變量y的賦值摄凡。
對于上述 foo( )函數(shù),JavaScipt引擎看到的代碼相當于：
function foo ( ) {
var y; //提升變量y的申明
var x ='Hello, ' + y;
alert(x);
y = 'Bob';
}
由于JavaScipt的這一怪異的“特性”，我們在函數(shù)內(nèi)部定義變量時蚓曼，請嚴格遵守“在函數(shù)內(nèi)部首先申明所有變量”這一規(guī)則亲澡。最常見的做法是用一個 var 申明函數(shù)內(nèi)部用到的所有變量：
function foo ( ) {
var
x = 1, // x 初始化為1
y = x + 1,// y 初始化為2
z,i; //z 和 i 為undefined
//其他語句
foo (i =0; i < 100;i ++){
...
}
}
全局作用域
不在任何函數(shù)內(nèi)定義的變量就具有全局作用域。實際上纫版，JavaScript默認有一個全局對象window,全局作用域的變量實際上被綁定到window的一個屬性:
'use strict';
var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'
因此床绪，直接訪問全局變量course和訪問window.course是完全一樣的。
你可能猜到了其弊，由于函數(shù)定義有兩種方式癞己，以變量方式var foo = function ( ) { } 定義的函數(shù)實際上也是一個全局變量，因此梭伐，頂層函數(shù)的定義也被視為一個全局變量痹雅，并綁定到window對象：
'use script'
function foo ( ) {
alert( 'foo' );
}
foo (); // 直接調(diào)用foo()
window.foo(); // 通過window.foo()調(diào)用
進一步大膽地猜測，我們每次直接調(diào)用的alert()函數(shù)其實也是 window的一個變量：
'use strict';
window.alert(' 調(diào)用window.alert( )');
//把alert保存到另一個變量：
var old_alert = window.alert;
//給alert賦一個新函數(shù)糊识；
window.alert = function ( ) { }
alert( '無法用alert( )顯示了绩社！');
//恢復(fù)alert
window.alert = old_alert;
alert('又可以用alert( )了！');
這說明JavaScript實際上只有一個全局作用域赂苗。任何變量(函數(shù)也視為變量)愉耙，如果沒有在當前函數(shù)作用域中找到，就會繼續(xù)往上查找拌滋，最后如果在全局作用域中也沒有找到朴沿，會報ReferenceError錯誤。
名字空間
全局變量會綁定到window上败砂，不同的JavaScript文件如果使用了相同的全局變量赌渣，或者定義了相同名字的頂層函數(shù)，都會造成命名沖突吠卷，并且很難被發(fā)現(xiàn)锡垄。
減少沖突的一個方法就是把自己的所有變量和函數(shù)全部綁定到一個全局變量中沦零。例如：
//唯一的全局變量MYAPP
var MYAPP = { };
//其他變量
MYAPP.name = ''myapp;
MYAPP.version = 1.0;
//其他函數(shù)祭隔；
MYAPP.foo = function ( ) {
return 'foo';
}
把自己的代碼全部放入唯一的名字空間 MYAPP 中，會大大減少全局變量沖突的可能路操。
許多著名的JavaScript庫都是這么干的：jQuery, YUI, underscore等等疾渴。
局部作用域
由于JavaScript的變量作用域?qū)嶋H上是函數(shù)內(nèi)部，我們在 for 循環(huán)等語句塊中是無法定義具有局部作用域的變量的“
'use strict'
function foo ( ) {
for (var i=0; i<100; i++) {
//
}
i += 100; //仍然可以引用變量i
}
為了解決塊級作用域屯仗，ES6引入了新的關(guān)鍵字let,用let替代var可以申明一個塊級作用域的變量：
'use strict';
function foo( ) {
var sum = 0;
for (let i=0; i<100; i++){
sum += i;
}
i += 1; //SyntaxError
}
常量
由于var 和 let申明的是變量 搞坝，如果要申明一個常量，在ES6之前是不行的魁袜，我們通常用全部大寫的變量來表示“這是一個常量桩撮，不要修改它的值”：
var PI = 3.14;
ES6標準引入了新的關(guān)鍵字 const 來定義常量敦第， const 與 let都具有塊級作用域：
'use strict'
const PI = 3.14;
PI = 3; // 某些瀏覽器不報錯，但是無效果店量！
PI; //3.14
方法
在一個對象中綁定函數(shù)芜果，稱為這個對象的方法。
在JavaScript中融师，對象的定義是這樣的：
var xiaoming = {
name: '小明',
birth:1990
}
但是右钾，如果我們給 xiaoming 綁定一個函數(shù)，就可以做更多的事情旱爆。比如舀射，寫個 age( ) 方法，返回 xiaoming 的年齡
var xiaoming = {
'name:'小明,
'birth':1990
age: function ( ) {
var y = new Date( ).getFullYear( )'
return y - this.birth;
}
}
xiaoming.age; //function xiaoming.age()
xiaoming.age(); //今年調(diào)用是25,明年調(diào)用就編程26了
綁定到對象上的函數(shù)成為方法怀伦，和普通函數(shù)也沒啥區(qū)別脆烟，但是它在內(nèi)部使用了一個 this 關(guān)鍵字，這個東東是什么空镜？
在一個方法內(nèi)部浩淘，this 是一個特殊變量，它始終指向當前對象吴攒，也就是 xiaoming 這個變量张抄。所以，this.birth可以拿到 xiaoming 的 birth屬性洼怔。
讓我們拆開寫
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name:'小明',
birth:1990;
age:getAge
}
xiaoming.age(); //25,正常結(jié)果
getAge(); // NaN
單獨調(diào)用函數(shù)getAge()怎么返回了NaN?請注意署惯，我們已經(jīng)進入到了JavsScript的一個大坑里。
JavaSript的函數(shù)內(nèi)部如果調(diào)用了this,那么這個this到底指向誰镣隶？
答案是极谊，視情況而定！
如果以對象的方法形式調(diào)用安岂，比如xiaoming.age(),該函數(shù)的 this 指向被調(diào)用的對象轻猖，也就是xiaoming,這是符合我們預(yù)期的。
如果單獨調(diào)用函數(shù)域那，比如getAge()咙边，此時，該函數(shù)的 this 指向全局對象次员，也就是 window.
坑爹鞍苄怼！
更坑爹的是淑蔚，如果這么寫
var fn = xiaoming.age; //先拿到xiaoming的age函數(shù)
fn();// NaN
也是不行的市殷，要保證this指向正確，必須用obj.xxx()的形式調(diào)用刹衫！
由于這是一個巨大的設(shè)計錯誤醋寝，要想糾正可以沒那么簡單搞挣。ECMA決定，在 strict 模式下讓函數(shù)的 this 指向 undefined,因此音羞，在strict模式下柿究，你會得到一個錯誤：
'use scrict'
var xiaoming = {
name: '小明',
birth:'1990',
age: function(){
var y = new Date().getFullYear();
return y - this.birth;
}
}
var fn = xiaoming.age;
fn(); //Uncaught TypeError:Cannot read property 'birth' of undefined
這個決定只是讓錯誤及時暴露出來，并沒有解決 this 應(yīng)該指向的正確位置黄选。
有些時候蝇摸，喜歡重構(gòu)的你把方法重構(gòu)了一下：
'use strict'
var xioaming = {
name:'小明',
birth:'1990'
age: function (){
function getAgeFromBirth(){
var y = new Date().getFullYear();
return y - this.birth;
}
return getAgeFromBirth();
}
}
xiaoming.age();//Uncaught TypeError:Cannot read the property 'birth' of undefiend
結(jié)果又報錯了！原因是 this 指針只在age方法的函數(shù)內(nèi)指向xiaoming ,在函數(shù)內(nèi)部定義的函數(shù)办陷，this又指向 undefined 了貌夕，（在非strict模式下，它重新指向全局對象window!）
修復(fù)的辦法也不是沒有民镜，我們用一個 that 變量首先捕獲 this：
'use strcit'
var xiaoming = {
name:'小明',
birth:1990,
age:function (){
var that = this // 在方法內(nèi)部一開始就捕獲this
function getAgeFromBirth(){
var y = new Date().getFullYear();
retun y - that .birth ;// 用 that 而不是 this
}
retun getAgeFromBirth();
}
}
xiaoming.age(); //25
用var that = this;你就可以放心地在方法內(nèi)部定義其他函數(shù)啡专，而不是把所有語句都堆到一個方法中。
apply
雖然在一個獨立的函數(shù)調(diào)用中制圈，根據(jù)是否是strict模式们童，this指向undefined或window,不過，我們還是可以控制 this 的指向的鲸鹦。
要指定函數(shù)的 this 指向哪個對象慧库，可以用函數(shù)本身的 apply方法，它接收兩個參數(shù)馋嗜，第一個參數(shù)就是需要綁定的 this 變量齐板，第二個參數(shù)是 Array,表示函數(shù)本身的參數(shù)。
用apply修復(fù)getAge()調(diào)用：
function getAge() {
var y = new Date().getFulYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age:getAge
}
xiaoming.age(); //25
getAge.apply(xiaoming,[ ]); //25,this指向xiao'ming,參數(shù)為空
另一個與apply()類似的方法是call(),唯一的區(qū)別是：
- apply()把參數(shù)打包成Array再傳入葛菇；
- call()把參數(shù)按順序傳入
比如調(diào)用Math.max(3,5,4),分別用apply()和call()實現(xiàn)如下：
Math.max.apply(null,[3,5,4]); //5
Math.max.call(null,3,5,4); //5
對普通函數(shù)調(diào)用甘磨，我們通常把 this 綁定為null.
裝飾器
利用apply(),我們還可以動態(tài)改變函數(shù)的行為。
Javascript的所有對象都是動態(tài)的眯停，即使內(nèi)置的函數(shù)济舆，我們也可以重新指向新的函數(shù)。
現(xiàn)在假定我們想統(tǒng)計一下代碼一共調(diào)用了多少次 parseInt(),可以把所有的調(diào)用都找出來莺债，然后手動加上count += 1,不過這樣做太傻了滋觉。最佳方案是用我們自己的函數(shù)替換掉默認的parseInt():
var count = 0;
var oldParseInt = parseInt; //保存原函數(shù)
window.parseInt = function (){
count += 1;
return oldParseInt.apply(null, arguments); //調(diào)用原函數(shù)
};
//測試：
parseInt('10');
parseInt('20');
parseInt('30');
count; //3
高階函數(shù)
高階函數(shù)英文叫Higher-order-function.那么什么是高階函數(shù)？
JavaScript的函數(shù)其實都指向某個變量九府。既然變量可以指向函數(shù)椎瘟，函數(shù)的參數(shù)能接收變量覆致，那么一個函數(shù)就可以接收另一個函數(shù)作為參數(shù)侄旬，這種函數(shù)就稱之為高階函數(shù)。
一個最簡單的高階函數(shù)
function add(x,y,f) {
return f(x) + f(y);
}
當我們調(diào)用 add(-5, 6, Math.abs)時煌妈，參數(shù)x, y和 f 分別接收-5 ,6和函數(shù) Math.asb, 根據(jù)函數(shù)定義儡羔，我們可以推導(dǎo)計算過程為：
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;
用代碼驗證下
add(-5, 6, Math.abs); //11
編寫高階函數(shù)宣羊，就是讓函數(shù)的參數(shù)能夠接收別的函數(shù)。
map/reduce
如果你多過Google的那篇大名鼎鼎的論文"MapReduce:Simplified Data Processing on Large Clusters"汰蜘，你就能大概明白map/reduce的概念仇冯。
map
舉例說明，比如我們有一個函數(shù)f(x)=x2
要把這個函數(shù)作用在一個數(shù)組[1,2,3,4,5,6,7,8,9]上族操，就可以用map實現(xiàn)如下：
由于map()方法定義在JavaScript的Array中苛坚，我們調(diào)用Array的map()方法，傳入我們自己的函數(shù)色难，就得到了一個新的array作為結(jié)果：
function pow(x){
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1,4,9,16,25,36,49,64,81]
map()傳入的參數(shù)是pow,即函數(shù)對象本身泼舱。
你可能會想,不需要map(),寫一個循壞，也可以計算出結(jié)果：
var f = function(x){
return x*x;
}
var arr = [1,2,3,4,5,6,7,8,9];
var result = [ ];
for (var i = 0; i < arr.length; i ++){
result.push(f(arr[i]));
}
的確可以枷莉，但是娇昙，從上面的循壞代碼，我們無法一眼看明白“把f(x)作用在Array的每一個元素并把結(jié)果生成一個新的Array”笤妙。
所以冒掌，map() 作為高階函數(shù)，事實上它把運算規(guī)則抽象了蹲盘，因此股毫，我們不但可以計算簡單的f(x)=x2,還可以計算任意復(fù)雜的函數(shù)，比如召衔，把Array的所有數(shù)字轉(zhuǎn)為字符串：
var arr = [1,2,3,4,5,6,7,8,9];
arr.map(String); //['1','2','3','4','5','6','7','8','9'];
只需一行代碼
reduce
再看reduce的用法皇拣。Array的reduce()把一個函數(shù)作用在這個Array的[x1,x2,x3... ] 上，這個函數(shù)必須接收兩個參數(shù)薄嫡，reduce()把結(jié)果繼續(xù)和序列的下一個元素做累積計算氧急，其效果是：
[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4)
比方說對一個Array求和，就可以用reduce實現(xiàn)：
var arr = [1,3,5,7,9];
arr.reduce(function (x ,y){
return x +y;
}); //25
要把[1,3,5,7,9]變換成整數(shù)13579,reduce()也能派上用場：
var arr = [1,3,5,7,9];
arr.reduce( function (x, y) {
return x*10 + y ;
} )
filter
filter也是一個常用的操作毫深，它用于把Array的某些元素過濾掉吩坝，然后返回剩下的元素。
和map()類似哑蔫，Array的filter()也接收一個函數(shù)钉寝。和map()不同的是，filter()把傳入的函數(shù)依次作用于每個元素闸迷，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素嵌纲。
例如，在一個Array中腥沽，刪掉偶數(shù)逮走，只保留奇數(shù)，可以這么寫今阳；
var arr = [1,2,4,5,6,9,10,15];
var r = arr.filter(function (x){
return x % 2 != 0;
});
r; //[1,5,9,15]
把一個Array中的空字符串刪掉师溅，可以這么寫：
var arr = ['A','','B',null,undefined,'C',' '];
var r = arr.filter(function (s) {
return s && s.trim( ); //注意：IE9以下的版本沒有trim()方法
});
arr; //['A','B','C']
可見用filter()這個高階函數(shù)茅信，關(guān)鍵在于正確實現(xiàn)一個“篩選”函數(shù)。
回調(diào)函數(shù)
filter()接收的回調(diào)函數(shù)墓臭，其實可以有多個參數(shù)蘸鲸。通常我們僅使用第一個參數(shù)，表示Array的某個元素窿锉∽靡。回調(diào)函數(shù)還可以接收另外兩個參數(shù)，表示元素的位置和數(shù)組本身：
var arr = ['A','B','C'];
var r = arr.filter(function(element,index,self){
console.log(element); //依次打印'A','B','C'
console.log(index); // 依次打印0嗡载，1妙痹，2
console.log(self); //self就是變量arr
return true;
});
利用 filter,可以巧妙地去除 Array 的重量元素
'use strict';
var arr = ['apple','starwberry','banana','pear','apple','orange','orange','strawberry'];
r = arr.filter(function(element,index,self){
return self.indexof(element) === index;
}
);
去除重復(fù)元素依靠的是indexof總是返回第一個元素的位置，后續(xù)的重復(fù)元素位置與indexof返回的位置不相等鼻疮，因此被filter過濾掉了怯伊。
sort
排序算法
排序也是在程序中經(jīng)常用到的算法。無論使用冒泡排序還是快速排序判沟，排序的核心是比較兩個元素的大小耿芹。如果是數(shù)字，我們可以直接比較挪哄，但如果是字符串或者是兩個對象呢?直接比較數(shù)學(xué)上的大小是沒有意義的吧秕，因此，比較的過程必須通過函數(shù)抽象出來迹炼。通常規(guī)定砸彬，對于兩個元素x和y，如果認為x<y,則返回-1,如果認為x == y斯入，則返回0,如果認為x > y砂碉，則返回1，這樣刻两，排序算法就不用關(guān)心具體的比較過程了增蹭，而是根據(jù)比較結(jié)果直接排序。
JavaScript的Array的sort()方法就是用于排序的磅摹，但是排序結(jié)果可能讓你大吃一驚
//看上去正常的結(jié)果：
['Google','Apple','Microsoft'].sort( ); // ['Apple','Google','Microsoft'];
// apple排在了最后：
['Google','apple','Microsoft'].sort( ); //['Google','Micorsoft','apple'];
//無法理解的結(jié)果：
[10,20,1,2].sort( ); // [1, 10, 2, 20]
第二個排序把apple排在了最后滋迈，是因為字符串根據(jù)ASCII碼進行排序，而小寫字母a的ASCII碼在大寫字母之后户誓。
第三個排序結(jié)果是什么鬼饼灿？簡單的數(shù)字排序都能錯？
這是因為Array的sort()方法默認把所有元素先轉(zhuǎn)換為String再排序帝美，結(jié)果'10'排在了'2'的前面碍彭，因為字符'1'比字符'2'的ASCII碼小。
如果不知道sort()方法的默認排序規(guī)則,直接對數(shù)字排序，絕對載進坑里硕旗！
幸運的是，sort()方法也是一個高階函數(shù)女责，它還可以接收一個比較函數(shù)來實現(xiàn)自定義的排序漆枚。
要按數(shù)字大小排序，我們可以這么寫：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y){
return -1;
}
if(x > y){
return 1;
}
return 0;
}); //[1, 2, 10 ,20]
如果要倒序排序抵知，我們可以把大的數(shù)放前面:
var arr = [10,20,1,2];
arr.sort(function(x,y){
if (x < y){
return 1;
}
if (x > y){
return -1;
}
return 0;
}); // [20,10,2,1]
默認情況下墙基，對字符串排序，是按照ASCII的大小比較的刷喜，現(xiàn)在残制，我們提出排序應(yīng)該忽略大小寫，按照字母序排序掖疮，要實現(xiàn)這個算法初茶，不必對現(xiàn)有代碼大加改動，只要我們能定義出忽略大小寫的比較算法就可以
var arr = ['Google','apple','Microsoft'];
arr.sort(function(s1,s2){
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if(x1 < x2){
return -1;
}
if(x1 > x2){
return 1;
}
return 0;
}); //['apple','Google','Microsoft'];
忽略大小寫比較兩個字符串浊闪，實際上就是先把字符串都變成大寫（或者都變成小寫）恼布，再比較。從上述例子可以看出搁宾，高階函數(shù)的抽象能力是非常強大的折汞，而且，核心代碼可以保持得非常簡潔盖腿。最后友情提示爽待，sort()方法會直接對Array進行修改，它返回的結(jié)果仍是當前Array：
var a1 = ['B','A','C'];
var a2 = a1.sort();
a1; //['A','B','C']
a2; //['A','B','C']
a1 === a2; //true a1和a2是同一個對象
閉包
函數(shù)作為返回值
高階函數(shù)除了可以接受函數(shù)作為參數(shù)外翩腐，還可以把函數(shù)作為結(jié)果值返回鸟款。我們來實現(xiàn)一個對Array的求和。通常情況下茂卦，求和的函數(shù)式這樣定義的：
functin sum(arr){
return arr.reduce(
function(x,y){
return x +y;
}
);
}
sum([1,2,3,4,5]);//15
但是欠雌，如果不需要立刻求和， 而是在后面的代碼中疙筹，根據(jù)需要再計算怎么辦富俄？可以不返回求和的結(jié)果，而是返回求和的函數(shù)!
function lazy_sum(arr) {
var sum = function(){
return arr.reduce (function (x,y){
return x + y;
});
}
return sum;
}
當我們調(diào)用lazy_sum時而咆，返回的并不是求和結(jié)果霍比，而是求和函數(shù)
var f = lazy_sum([1,2,3,4,5]); //function sum()
調(diào)用函數(shù)f時，才真正計算求和的結(jié)果
f(); //5
在這個例子中暴备，我們在函數(shù)lazy_sum中又定義了函數(shù)sum,并且悠瞬，內(nèi)部函數(shù)sum可以引用外部函數(shù)lazy_sumd的參數(shù)和局部變量，當lazy_sum返回函數(shù)sum時，相關(guān)參數(shù)和變量都保存在返回的函數(shù)中浅妆，這種稱為“閉包（Closure）”的程序結(jié)構(gòu)擁有極大的威力望迎。
請再注意一點，當我們調(diào)用lazy_sum時凌外，每次調(diào)用都會返回一個新的函數(shù)辩尊，即使傳入相同的參數(shù)：
var f1 = lazy_sum([1,2,3,4,5]);
var f2 = lazy_sum([1,2,3,4,5]);
f1 === f2; // false
f1() 和f2()的調(diào)用結(jié)果互不影響
閉包
注意到返回的函數(shù)在其定義內(nèi)部引用了局部變量arr,所以，當一個函數(shù)返回了一個函數(shù)后康辑，其內(nèi)部的局部變量還被新函數(shù)引用摄欲，所以，閉包用起來簡單疮薇，實現(xiàn)起來可不容易胸墙。
另一個需要注意的問題是，返回的函數(shù)并沒有立刻執(zhí)行按咒，而是直到調(diào)用了f()才執(zhí)行迟隅。我們來看一個例子：
function count() {
var arr = [ ];
for(var i = 1; i <=3; i++){
arr.push(function(){
return i *i;
}
);
return arr;
}
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
在上面的例子中，每次循環(huán)励七，都創(chuàng)建了一個新的函數(shù)玻淑，然后，
把創(chuàng)建的3個函數(shù)都添加到一個Array中返回了呀伙。
你可能認為調(diào)用f1(), f2()和f3() 結(jié)果應(yīng)該是1补履，4，9剿另，但實際結(jié)果是：
f1( ); // 16
f2( ); // 16
f3( ); // 16
全部都是16箫锤！ 原因就在于返回的函數(shù)引用了變量 i,但它并非立刻執(zhí)行。等到三個函數(shù)都返回時雨女，他們所引用的變量 i 已經(jīng)變成了 4谚攒，因此最終結(jié)果為16.
返回閉包時牢記的一點就是：返回函數(shù)不要引用任何循環(huán)變量，或者后續(xù)會發(fā)生變化的變量氛堕。
如果一定要引用循環(huán)變量怎么辦馏臭？方法是再創(chuàng)建一個函數(shù)，用該函數(shù)的參數(shù)綁定循環(huán)變量當前的值讼稚，無論該循環(huán)變量后續(xù)如何更改括儒，已綁定到函數(shù)參數(shù)的值不變：
function count ( ) {
var arr = [ ];
for (var i = 1; i <= 3; i++){
arr.push()
}
}
對象
對象
ECMA-262把對象（object）定義為“屬性的無序集合，每個屬性存放一個原始值锐想、對象帮寻、或函數(shù)”。嚴格來說赠摇，這意味著對象是無特定順序的值的數(shù)組固逗。
盡管ECAMScript如此定義對象浅蚪，但它更通用的定義是基于代碼的名詞（人、地點烫罩、或事物）的表示惜傲。
類
每個對象都由類定義，可以把類看做對象的配方贝攒。類不僅要定義對象的接口（interface）（開發(fā)者訪問的屬性和方法）盗誊，還要定義對象的內(nèi)部工作（使屬性和方法發(fā)揮作用的代碼）。編譯器和解釋程序都根據(jù)類的說明創(chuàng)建對象饿这。
實例
程序使用類創(chuàng)建對象時浊伙，生成的對象叫做類的實例（instance）
