[JS] 方法

此文章摘錄自’JavaScript優良部分’一書,純粹個人備忘之用。如欲看全文,請參閱該書。

Array

array.concat(item...)

var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];
var c = a.concat(b, true);
// c 為['a', 'b', 'c', 'x', 'y', 'z', true]

array.join(separator)

join方法利用array製作一個字串,它把array的每個元素都轉成字串,而後於串連這些元素字串時,加入separator(分隔符號)。預設的separator是’,’。在想串連時不加入分隔,則以空字串做為separator。

如果需要把大量片段組合成一個字串,通常,把這些片段放入陣列,再做join,會比利用 + 運算子串聯更快。

var a = ['a', 'b', 'c'];
a.push('d');
var c = a.join('');  // c 為'abcd';

array.pop()

pop與push方法能使array如堆疊(stack)一般運作。pop移除並回傳array的最後一個元素。如果array為empty,則回傳undefined。

var a = ['a', 'b', 'c'];
var c = a.pop();  // a 為['a', 'b']; c 為 'c'

array.push(item...)

push方法把item附加到陣列末端。它與concat方法不同;push會調整array、附加整個item,還會回傳array的新長度:

var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];
var c = a.push(b, true);
// a 為['a', 'b', 'c', ['x', 'y', 'z'], true]
// c 為 5;

array.reverse()

var a = ['a', 'b', 'c'];
var b = a.reverse();
// a與b均為['c', 'b', 'a']

array.shift()

shift方法從array移除第一個元素,並予以回傳。如果array為空陣列,則回傳undefined。shift通常比pop的速度慢很多:

var a = ['a', 'b', 'c'];
var c = a.shift();  // a 為['b', 'c'];c 為'a'

array.slice(start, end)

第一個被複製的元素將是array[start],在抵達array[end]前停止複製。end為選用參數,預設值為array.length:

var a = ['a', 'b', 'c'];
var b = a.slice(0, 1);  // b為['a']
var c = a.slice(1);     // c為['b', 'c']
var d = a.slice(1, 2);  // d為['b']

array.sort(comparefn)

sort方法排列array裡的內容順序。但它對數值陣列的排序有點問題:

var n = [4, 8, 15, 16, 23, 42];
n.sort();
// n 為[15, 16, 23, 4, 42, 8]

JavaScript的預設比較函式,會假設被排序的元素為字串。它沒有聰明到先檢查元素型別,再做排序的工作,所以它在比較的同時,也把數值轉換為字串,造成不正確的結果。

幸好,可用自訂函式取代預設的比較函式。你的比較函式應接受兩個參數,並於參數相等時回傳0、第一個參數的排序應該較先時回傳負數、第二個參數的排序應該較先時回傳正數。

var n = [4, 8, 15, 16, 23, 42];
n.sort(function(a, b){
  return a - b;
});
// n為[4, 8, 15, 16, 23, 42]

array.splice(start, deleteCount, item...)

splice方法從陣列中移除元素,並以新的item取代。start參數是array中的位置編號。deleteCount參數則是從start位置開始要刪除的元素數量。如果有額外參數item,則會插入start位置。並回傳包含已刪除元素的陣列:

var a = ['a', 'b', 'c'];
var r = a.splice(1, 1, 'ache', 'bug');
// a 為 ['a', 'ache', 'bug', 'c']
// b 為 ['b']

array.unshift(item...)

unshift方法與push方法很像,只不過它把item推到array的前端,而非末端。並回傳array的新長度:

var a = ['a', 'b', 'c'];
var r = a.unshift('?', '@');
// a 為['?', '@', 'a', 'b', 'c']
// r 為5

Function

function.apply(thisArg, argArray)

apply方法呼叫function,傳入將與this繫結的物件,以及一個選用的引數陣列。apply方法用於apply呼叫模式:

Function.method('bind', function(that){
  // 回傳將呼叫這個函式的函式,
  // 一如它是個物件裡的方法。

  var method = this,
      slice = Array.prototype.slice,
      args = slice.apply(arguments, [1]);

  return function(){
    return method.apply(that, args.concat(slice.apply(arguments, [0])));
  };
});

var x = function(){
  return this.value;
}.bind({value: 666});
alert(x()); // 666

Number

number.toExponential(fractionDigits)

toExponential方法轉換number成為指數形式的字串。選用的fractionDigits參數控制十進位數的位置,參數範圍應介於0到20:

document.writeln(Math.PI.toExponential(0));   // 3e+0
document.writeln(Math.PI.toExponential(2));   // 3.14e+0
document.writeln(Math.PI.toExponential(7));   // 3.1415927e+0
document.writeln(Math.PI.toExponential(16));  // 3.1415926535897930e+0
document.writeln(Math.PI.toExponential());    // 3.141592653589793e+0

number.toFixed(fractionDigits)

toFixed方法轉換number為十進位形式的字串。選用的fractionDigits參數控制十進位數的位置,範圍應該介於0到20中間。預設為0:

document.writeln(Math.PI.toFixed(0));   // 3
document.writeln(Math.PI.toFixed(2));   // 3.14
document.writeln(Math.PI.toFixed(7));   // 3.1415927
document.writeln(Math.PI.toFixed(16));  // 3.1415926535897930
document.writeln(Math.PI.toFixed());    // 3

number.toPrecision(precision)

toPrecision方法轉換number為十進位形式的字串。選用的precision參數控制數字的精確度,範圍應介於1到21間:

document.writeln(Math.PI.toPrecision(2));   // 3.1
document.writeln(Math.PI.toPrecision(7));   // 3.141593
document.writeln(Math.PI.toPrecision(16));  // 3,141592653589793
document.writeln(Math.PI.toPrecision());    // 3,141592653589793

number.toString(radix)

toString方法轉換number為字串。選用的radix參數控制基數(radix或base),範圍應介於2到36間。預設的radix以10為基數。radix參數最常與整數一起使用,但也用於任何數值。

最常見的狀況下,number.toString()能被寫成更簡單的String(number):

document.writeln(Math.PI.toString(2));   //11.001001000011111101101010100010001000010110100011
document.writeln(Math.PI.toString(8));   //3.1103755242102643
document.writeln(Math.PI.toString(16));  //3.243f6a8885a3
document.writeln(Math.PI.toString());    //3.141592653589793

Object

object.hasOwnProperty(name)

hasOwnProperty方法,在object包含名稱為name的特性時,回傳true。特性鏈不會被檢驗。如果name是hasOwnProperty,則本方法將失去效用:

var a = {member:true};
var b = Object.beget(a);

var t = a.hasOwnProperty('member');  // t為true
var u = b.hasOwnProperty('member');  // u為false
var v = b.member;                    // v為true

RegExp

regexp.exec(string)

exec方法是最強大(也是最慢)的正規式使用方法。如果它的regexp和string比對成功,則回傳一個陣列。陣列的第0個元素將包含與regexp相符的子字串。第1個元素則是第一個集結記憶的文段、第2個元素為第二個集結記憶的文段……依此類推。如果比對失敗,則回傳null。

如果regexp附有旗標g,事態則較複雜。

regexp.test(string)

test方法是正規式運用下最簡單(也最快)的方法。如果regexp與string比對相符,則回傳true;否則回傳false。這個方法請勿與旗標g一併使用:

var b = /$amp;.+;/.test('frank & beans');  // b 為true

String

string.charAt(post)

charAt方法回傳string裡,位置pos上的字元。如果pos小於0,或大於等於string.length,則回傳空字串

var name = 'Curly';
var initial = name.charAt(0); // initial 為'C'

string.charCodeAt(pos)

charCodeAt方法與charAt大致相同,但它不會回傳字串,而是回傳string裡、pos上的字元的code point值(整數)。如果pos小於0,或大於等於string.length,則回傳NaN:

var name = 'Curly';
var initial = name.charCodeAt(0);  // initial 為67

string.concat(string...)

concat方法藉由串連其它字串而製作出新字串。這個方法很少使用,因為+運算子更為便利:

var s = 'C'.concat('a', 't');  // s 為'Cat'

string.indexOf(searchString, position)

indexOf方法在string中搜尋searchString。倘若有所發現,則回傳第一個找到的位置;否則回傳-1。選用的position參數,能在string中指定搜尋開始的位置:

var text = 'Mississippi';
var p = text.indexOf('ss');  // p 為2
p = text.indexOf('ss', 3);   // p 為5
p = text.indexOf('ss', 6);   // p 為-1

string.lastIndexOf(searchString, position)

lastIndexOf方法與indexOf很像,但它搜尋字串的末端而非前端:

var text = 'Mississippi';
var p = text.lastIndexOf('ss');  // p 為5
p = text.lastIndexOf('ss', 3);   // p 為2
p = text.lastIndexOf('ss', 6);   // p 為5

string.match(regexp)

match方法比對字串與正規式。它的行為取決於旗標g。如果沒有g,呼叫string.match(regexp)即與呼叫regexp.exec(string)無異。不過regexp如果加上g,則會產生儲存所有合樣文段的陣列,但不包含記憶集結。

var text = '<html><body bgcolor=linen><p>This is <b>bold<\/b>!<\/p><\/body><\/html>';
var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
var a, i;

a = text.match(tags);
for(i = 0; i< a.length; i += 1){
  document.writeln( ('// [' + i + '] ' + a[i]).entityify() );
}

//產生結果:
// [0] <html>
// [1] <body bgcolor=linen>
// [2] <p>
// [3] This is
// [4] <b>
// [5] bold
// [6] </b>
// [7] !
// [8] </p>
// [9] </body>
// [10] </html>

string.replace(searchValue, replaceValue)

replace方法對它的string執行搜尋與取代運算,而產生新字串。searchValue引數可為字串或正規式物件。該引數若為字串,則只有第一個出現的searchValue會被取代,因此:

var result = "mother_in_law".replace('_', '-');
// 很失望地,result結果會是 "mother-in_law"

如果searchValue引數是正規式,而且還有旗標g,則引數值只要有出現,都會被取代。如果沒有旗標g,則只會取代第一個出現的引數值。

replaceValue可為字串或函式。如果是字串,此時的$字元具有特殊意義:

// 找出以括號圍起的三個數字
var oldareacode = /\((\d{3})\)/g;
var p = '(555)666-1212'.replace(oldareacode, '$1-');
// p 為'555-555-1212'

// $$ 代表$
// $& 代表合樣文段
// $number 代表記憶集結文段
// $` 代表合樣文段前的部分字串
// $' 代表合樣文段後的部分字串

如果replaceValue是個函式,則每次比對都會呼叫該函式,由函式回傳的字串將成為替代用文段。

string.search(regexp)

search方法與indexOf方法類似,但它接收的參數是正規式物件,而非字串。這個方法回傳第一個合樣文段的第一個字元的位置(如果有找到),或於搜尋失敗時回傳-1。旗標g將被忽略。它也沒有position參數:

var text = 'and in it he says "Any damn fool could';
var pos = text.search(/["']/);  // pos為18

string.slice(start, end)

var text = 'and in it he says "Any damn fool could';
var a = text.slice(18);  // a 為'"Any damn fool could'

var b = text.slice(0, 3);  // b 為'and'

var c = text.slice(-5);    // c 為'could'

var d = text.slice(19, 32);  // d 為'Any damn fool'

string.split(separator, limit)

var ip = '192.168.1.0';
var b = ip.split('.');
// b 為['192', '168', '1', '0']

var c = '|a|b|c'.split('|');
// c 為['', 'a', 'b', 'c', '']

var text = 'last,  first  ,middle';
var d = text.split(/\s*,\s*/);
// d 為['last', ',', 'first', ',', 'middle']

string.toLowerCase()

toLowerCase方法把string轉換為小寫,產生新字串。

string.toUpperCase()

toUpperCase方法把string轉換為大寫,產生新字串。

String.fromCharCode(char...)

String.fromCharCode函式從一組數值中產生字串。

var a = String.fromCharCode(67, 97, 116);
// a 為 'Cat'