JavaScript函數
1. 函數的定義
函數名稱只能包含字母、數字、下划線或$，且不能以數字開頭。定義時可用函數定義表達式或者函數聲明語句。
var f = function fact(x){}
函數定義表達式包含名稱，名稱將作為函數的局部變量，在函數內部使用，代指函數。
函數聲明語句不是真正的語句，不能出現在循環、條件、try/catch/finally以及with語句中；聲明語句置於在不會執行到的位置，仍可被整個作用域可訪問，可在被定義代碼之前使用。定義表達式的變量聲明被提前了，但是對變量賦值不會提前，函數在被定義之前無法使用，否則調用時會出現錯誤："TypeError: undefined is not a function"
return語句沒有一個與之相關的表達式，則它返回undefined值；如果一個函數不包含return語句，那它只執行函數體內語句，並返回undefined給調用者；沒有返回值的函數，有時稱為過程。
2. 函數執行
函數執行的幾種方式，當作函數、方法、構造函數、間接調用。如果構造函數沒有形參，可以省略實參列表和圓括號，調用函數傳實參有間隔時，可用null或undefined占位符替代空白的參數。
構造函數返回值情況
function MyClass(name) {
this.name = name;
return name; // 構造函數的返回值?
}
var obj1 = new MyClass('foo');// MyClass對象
var obj2 = MyClass('foo');// ‘foo’
var obj3 = new MyClass({});// {}
var obj4 = MyClass({});// {}
|
3. 實參對象
實參對象是類數組對象，可用arguments.callee遞歸調用，如果你把參數命名為arguments，那么這個參數就會覆蓋它原有的特殊變量。
4. 函數的形參和實參
定義的函數括號內靠后面的形參沒傳入相應的實參，則默認值為undefined，有人利用這個，隱式定義函數內部的局部變量。函數傳入參數的校驗及拋出錯誤，函數中實參傳入的是引用，函數內部對其操作，對外部是可見的。
// 函數傳參引用
var oo = {x:1,y:2,get z(){
return 3;
}}
function fns(obj){
obj.h = 4;
}
fns(oo);
|
5. 函數屬性、方法
函數也是對象，所以也有屬性和方法，函數的length屬性，函數形參的個數。
apply方法的第二個參數可以是數組或類數組對象。
bind方法是ES5中新增，將函數“綁定至”對象並傳入一部分參數，傳入的實參放在完整實參列表的左側。
中文注釋是本人添上去的，這個例子考慮到bind返回的函數被當成構造函數使用情況。
/**
* https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
*/
Function.prototype.bind || (Function.prototype.bind = function (that) {
var target = this;
// If IsCallable(func) is false, throw a TypeError exception.
// 通過call、apply調用時，校驗傳入的上下文
if (typeof target !== 'function') {
throw new TypeError('Bind must be called on a function');
}
var boundArgs = slice.call(arguments, 1);
function bound() {
// 返回的bind函數被當構造函數
if (this instanceof bound) {
var self = createObject(target.prototype);
var result = target.apply(
self,
boundArgs.concat(slice.call(arguments)));
// Object(result) === result 判斷調用返回是不是對象
return Object(result) === result ? result : self;
}
// 返回的bind函數以一般函數形式調用
else {
return target.apply(
that,
boundArgs.concat(slice.call(arguments)));
}
}
// NOTICE: The function.length is not writable.
bound.length = Math.max(target.length - boundArgs.length, 0);
return bound;
});
|
6. 高階函數
如果函數作為參數或返回值使用時，就稱為高階函數。
7. 作為命名空間的函數
函數命名空間暴露接口有以下幾種方法
var mylib = (function (global) {
function log(msg) {
console.log(msg);
}
log1 = log; // 法一：利用沒有var的變量聲明的默認行為，在log1成為全局變量（不推薦）
global.log2 = log; // 法二：直接在全局對象上添加log2屬性，賦值為log函數（推薦）
return { // 法三：通過匿名函數返回值得到一系列接口函數集合對象，賦值給全局變量mylib（推薦）
log: log
};
}(window));
|
8. 自更新函數
function selfUpdate() {
window.selfUpdate = function() {
alert('second run!');
};
alert('first run!');
}
selfUpdate(); // first run!
selfUpdate(); // second run!
|
這種函數可以用於只運行一次的邏輯，在第一次運行之后就整個替換成一段新的邏輯。
9. 函數書寫規范
1) 函數參數定義的幾種注釋
/*,...*/
AP.reduce || (AP.reduce = function(fn /*, initial*/) {
getPropertyNames(o,/*optional*/a) // /*optional*/表示參數可選
function arraycopy(/*array */ from,/*index*/from_start){};
|
2) 其它
// bad
function a() {
test();
console.log('doing stuff..');
//..other stuff..
var name = getName();
if (name === 'test') {
return false;
}
return name;
}
// good
function a() {
var name = getName();// 定義變量放在前面
test();
console.log('doing stuff..');
//..other stuff..
if (name === 'test') {
return false;
}
return name;
}
// bad
function a() {
var name = getName();
if (!arguments.length) {
return false;
}
return true;
}
// good
function a() {
if (!arguments.length) {// 參數校驗放在前面
return false;
}
var name = getName();
return true;
}
|
10. 具有記憶功能的函數
/**
* 記憶函數
*/
function memorize(f) {
var cache = {};
return function () {
var key = arguments.length + '' + Array.prototype.join.call(arguments, ',');
if (!(key in cache))
cache[key] = f.apply(null, arguments);
return cache[key];
}
}
|
JavaScript數組
1. 稀疏數組
var a1 = [,,,]; var a2 = new Array(3); var a3 = [1,2,3]; console.log( 0 in a1);//false console.log( 0 in a2);//false console.log( 0 in a3);//true delete a3[0]; console.log( 0 in a3);//false |
2. 數組元素的增減
length設置小於原值，刪除溢出的；新增一數組元素，length始終元素序號+1。
push/pop在數組尾部操作，與a[a.length]賦值一樣；可支持多參數。
unshift/shift在數組頭部操作。
3. 數組遍歷
if(!a(i))//null/undefined/不存在的元素 if(a(i)===undefined) if(!(i in a))//不存在的元素 |
可用for in處理稀疏數組，不過數組不推薦用這個，比如能夠枚舉繼承的屬性名。
4. 數組的校驗和類數組
Array.isArray = Array.isArray || function(o){
return typeof o ==="object" &&
Object.prototype.toString.call(o) === "[object Array]";
}
|
類數組對象：可用針對真正數組遍歷的代碼來遍歷；可用數組的通用方法。
function isArrayLike(o){
if(o &&
typeof o ==='object' &&
o.nodeType != 3 &&
isFinite(o.length) &&
o.length >= 0 &&
o.length === Math.floor(o.length) &&
o.length < 4294967296)
return true;
else
return false;
}
|
5. 作為數組的字符串
在ES5(包括IE8)中，字符串行為類似只讀數組。除了用charAt訪問單個的字符外，還可以使用方括號。數組的通用方法可以用到字符串上。例如：
s = "JavaScript"
Array.prototype.join.call(s," ") // => "J a v a S c r i p t"
Array.prototype.filter.call(s, // 過濾字符串中的字符
function(x){
return x.match(/[^aeiou]/); // 只匹配非元音字母
}).join(""); // => "JvScrpt"
|
注意，字符串是只讀的，如果使用修改調用數組的方法，會報錯。譬如：push()、sort()、reverse()、splice()等數組方法。
6. ES3中數組支持的方法
concat()—結果返回、sort() 、reverse() 、join()—結果返回、slice()—結果返回、splice()、push()、pop()、unshift()、shift()、toString()、toLocaleString()
concat：返回一個新創建的數組，元素包含調用concat的原始數組的元素和concat的每個參數，如果這些參數中的任何一個自身是數組，則連接的數組的元素，而非數組本身。但要注意，concat不會遞歸扁平化數組的數組，也不會修改調用的數組。
7. 數組slice和splice方法
slice不改變原數組，截取原數組片段返回。索引從0開始，參數為正數時，第一個參數和不到第二個參數（從零算起，相對於索引）數組；參數為負數時，倒數第一個參數和倒數第二個參數的數組。
splice改變原數組。第一個參數（從零算起），插入或刪除的起始位置，第二個參數：刪除元素的個數，第三或其它任意參數，要插入的元素。
刪除數組元素，保持數組連續，就用splice，返回的由刪除元素組成的數組。復制數組的時候，請使用Array#slice。
var len = items.length,
itemsCopy = [],
i;
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
itemsCopy = items.slice();
|
8. ES5中數組支持的方法
var data = [1,2,3,4,5]; data.forEach(function(v,i,a){ a[i] = v + 1; }) |
不能像for中使用break跳出循環，在forEach()傳入參數的函數中拋出foreach.break異常。
function foreach(a,f,t){// a為數組，f為函數，t為函數f的執行環境
function foreach(a,f,t){// a為數組，f為函數，t為函數f的執行環境
try{
a.forEach(f,t);
} catch(e) {
if( e === foreach.break)
return;
else
throw e;
}
}
foreach.break = new Error("StopIteration");
|
在ES3不支持forEach()可引入以下方法
Array.prototype.forEach || (Array.prototype.forEach = function(fn, context) {
for (var i = 0, len = this.length >>> 0; i < len; i++) {
if (i in this) {
fn.call(context, this[i], i, this);
}
}
});
|
map()
a = [1,2,3];
b = a.map(function(x){
return x *x;
});
|
傳遞的參數跟forEach()一樣，不同的是map()調用的函數要有返回值。該函數返回新創建的數組，不修改調用的數組。
Array.prototype.map = Array.prototype.map || function (callback, thisArg) {
var T, A, k;
if (this == null) {
throw new TypeError(" this is null or not defined");
}
// 1. 將O賦值為調用map方法的數組.
var O = Object(this);
// 2.將len賦值為數組O的長度.
var len = O.length >>> 0;
// 4.如果callback不是函數,則拋出TypeError異常.
if ({}.toString.call(callback) != "[object Function]") {
throw new TypeError(callback + " is not a function");
}
// 5. 如果參數thisArg有值,則將T賦值為thisArg;否則T為undefined.
if (thisArg) {
T = thisArg;
}
// 6. 創建新數組A,長度為原數組O長度len
A = new Array(len);
// 7. 將k賦值為0
k = 0;
// 8. 當 k < len 時,執行循環.
while (k < len) {
var kValue, mappedValue;
//遍歷O,k為原數組索引
if (k in O) {
//kValue為索引k對應的值.
kValue = O[ k ];
// 執行callback,this指向T,參數有三個.分別是kValue:值,k:索引,O:原數組.
mappedValue = callback.call(T, kValue, k, O);
// 返回值添加到新書組A中.
A[ k ] = mappedValue;
}
// k自增1
k++;
}
// 9. 返回新數組A
return A;
};
|
調用和forEach一樣，返回的數組元素是調用的數組的一個子集。
a = [5,4,3,2,1];
smallvalues = a.filter(function(x){
return x<3;
});// [2,1]
everyother = a.filter(function(x,i){
return i%2 ==0;
});// [5,3,1]
// 跳過稀疏數組中缺少的元素，返回的數組總是稠密的
var dense = sparse.filter(function(){
return true;
});
// 壓縮空缺並刪除undefined和null元素
a = a.filter(function(x){
return x !==undefined x != null;
})
|
對數組進行邏輯判定，返回true或false；注意every()和some()確定該返回什么值它們就會停止遍歷數組元素。
reduce()和reduceRight()
使用指定的函數將數組元素進行組合，生成單個值。這在函數式編程中是常見的操作，稱為“注入”和“折疊”。reduce需要兩個參數，第一個參數是執行化簡的函數，函數的參數分別為：化簡操作累計的結果或初始化值、數組元素、元素的索引、數組的本身；第二個參數（可選）是傳遞給函數的初始值。
var a = [1,2,3,4,5];
var sum = a.reduce(function(x,y){
return x + y;
},0);
var product = a.reduce(function(x,y){
return x * y;
},1);
var max = a.reduce(function(x,y){
return x>y?x:y;
});
|
reduceRight()的工作原理和reduce()一樣，不同的是它按照數組索引從高到低（從右到左）處理數組。
indexOf()和lastIndexOf()
第一個參數代表要搜索的元素，第二個元素代表搜索的起始位置。可為負數，它代表相對數組末尾的偏移量，-1時，指定數組的最后一個元素。
var a= [0,1,2,1,0]; a.indexOf(1); // => 1:a[1]是1 a.lastIndexOf(1) // => 3:a[3]是1 a.indexOf(3) // =>-1: 沒有值為3的元素 function findAll(a,x){ var result = [], len = a.length, pos = 0; while(pos<len){ pos = a.indexOf(x,pos); if(pos === -1){ break; } result.push(pos); pos++; } } |
字符串也有indexOf()和lastIndexOf()方法。