JavaScript語言精粹筆記06 方法

時間 2019-11-13

原文原文鏈接

JS包含了少許可用在標準類型上的標準方法。javascript

Array
Function
Number
Object
RegExp
Stringhtml

Arrayjava

array.concat(item...)git

concat方法返回一個新數組，它包含array的淺複製並將1個或多個參數item附加在其後。若是參數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的淺複製：數組

var p1={"name":"person1"};
var p2={"name":"person2"}; 
var arr=[p1];
var arr2=arr.concat(p2);
console.log(arr2[1].name);//person2
p2.name="person";
console.log(arr2[1].name);//person

array.join(separator)app

join方法把array構形成一個字符串。函數

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

array.pop()post

pop和push使數組array像堆棧同樣工做。若是array是空，pop會返回undefined。this

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

pop能夠這樣實現：

Array.prototype.pop=function(){
    return this.splice(this.length - 1, 1)[0];
}

array.push(item...)

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()

移除數組中的第一個元素並返回該元素。若是數組array是空，它會返回undefined。shift一般比pop慢得多。

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

shift能夠這樣實現：

Array.prototype.pop=function(){
    return this.splice(0, 1)[0];
}

array.slice(start,end)

slice方法對array中的一段作淺複製,從array[start]複製到array[end-1],end參數可選，默認爲數組長度。不要和splice方法混淆。

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

array.sort(comparefn)

JS默認比較函數假定全部要排序的元素都是字符串。

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

能夠自定義比較函數來代替默認的比較函數。比較函數包含2個參數，相等返回0，若是參數1 應該排在前則返回一個負數，若是參數2 應該排在前則返回一個正數。

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

var m = ['aa', 'bb', 'a', 4, 8, 15, 16, 23, 42];
m.sort(function (a, b) {
    if (a === b) {
        return 0;
    }
    if (typeof a === typeof b) {
        return a < b ? -1 : 1;
    }
    return typeof a < typeof b ? -1 : 1;
});
// m is [4, 8, 15, 16, 23, 42, 'a', 'aa', 'bb']

爲對象數組排序：

var by = function (name) {
    return function (o, p) {
        var a, b;
        if (typeof o === 'object' && typeof p === 'object' && o && p) {
            a = o[name];
            b = p[name];
            if (a === b) {
                return 0;
            }
            if (typeof a === typeof b) {
                return a < b ? -1 : 1;
            }
            return typeof a < typeof b ? -1 : 1;
        } else {
            throw {
                name: 'Error',
                message: 'Expected an object when sorting by ' + name
            };
        }
    };
};

var s = [
    {first: 'Joe',   last: 'Besser'},
    {first: 'Moe',   last: 'Howard'},
    {first: 'Joe',   last: 'DeRita'},
    {first: 'Shemp', last: 'Howard'},
    {first: 'Larry', last: 'Fine'},
    {first: 'Curly', last: 'Howard'}
];
s.sort(by('first'));    // s is [
//    {first: 'Curly', last: 'Howard'},
//    {first: 'Joe',   last: 'DeRita'},
//    {first: 'Joe',   last: 'Besser'},
//    {first: 'Larry', last: 'Fine'},
//    {first: 'Moe',   last: 'Howard'},
//    {first: 'Shemp', last: 'Howard'}
// ]

sort方法不穩定，s.sort(by('first')).sort(by('last'));不能產生咱們但願的順序。要修改by函數：

var by = function (name, minor) {
    return function (o, p) {
        var a, b;
        if (o && p && typeof o === 'object' && typeof p === 'object') {
            a = o[name];
            b = p[name];
            if (a === b) {
                return typeof minor === 'function' ? minor(o, p) : 0;
            }
            if (typeof a === typeof b) {
                return a < b ? -1 : 1;
            }
            return typeof a < typeof b ? -1 : 1;
        } else {
            throw {
                name: 'Error',
                message: 'Expected an object when sorting by ' + name
            };
        }
    };
};

s.sort(by('last', by('first')));    // s is [
//    {first: 'Joe',   last: 'Besser'},
//    {first: 'Joe',   last: 'DeRita'},
//    {first: 'Larry', last: 'Fine'},
//    {first: 'Curly', last: 'Howard'},
//    {first: 'Moe',   last: 'Howard'},
//    {first: 'Shemp', last: 'Howard'}
// ]

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

從array中移除1個或多個元素，並用性的item替換它們。

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

array.unshift(item...)

unshift相似於push，可是它是把item插入到array的開始部分，它返回array的新長度。

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

Function

function.apply(thisArg,argArray)

apply方法調用函數function，傳遞一個被綁定到this上的對象和一個可選的參數數組。

obj：這個對象將代替function類裏this對象
args：這個是數組，它將做爲參數傳給function（args-->arguments）

var Person=function(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){alert("Hi! My name is "+this.name+", I'm "+this.age)};
}

var Student=function(name,age,grade){
    Person.apply(this,arguments);//apply使Student類具有了Person類的所有方法和屬性
    this.grade=grade;
}

var p1=new Person("Jesse",18);
p1.sayHi();//Hi! My name is Jesse, I'm 18.
var s1=new Student("Lily",10,5);
s1.sayHi();//Hi! My name is Lily, I'm 10.

能夠利用apply的參數數組來簡化程序：

例如

求數組中的最大值

var arr=[1,3,2];
//通常方法
var m=arr[0];
for(var i=1;i<arr.length;i++){
    m=Math.max(max,arr[i]);
}
alert(m);
//利用apply
m=Math.max.apply(null,arr);
alert(m);

Number

number.toExponential(fractionDigits)

toExponential方法把number轉換成一個指數形式的字符串。可選參數fractionDigits控制小數點後的位數。

console.log(Math.PI.toExponential(0));//3e+0
console.log(Math.PI.toExponential(2));//3.14e+0
console.log(Math.PI.toExponential(7));//3.1415927e+0
console.log(Math.PI.toExponential(16));//3.1415926535897931e+0
console.log(Math.PI.toExponential());//3.141592653589793e+0

member.toFixed(fractionDigits)

toFixed方法把number轉換成一個十進制形式的字符串。可選參數fractionDigits控制小數點位數。

console.log(Math.PI.toFixed(0));//3
console.log(Math.PI.toFixed(2));//3.14
console.log(Math.PI.toFixed(7));//3.1415927
console.log(Math.PI.toFixed(16));//3.1415926535897931
console.log(Math.PI.toFixed());//3

member.toPrecision(precision)

toPrecision方法把number轉換成一個十進制形式的字符串。可選參數precision控制數字的位數。

console.log(Math.PI.toPrecision(2));//3.1
console.log(Math.PI.toPrecision(7));//3.141593
console.log(Math.PI.toPrecision(16));//3.141592653589793
console.log(Math.PI.toPrecision());//3.141592653589793

numbe.toString(radix)

toSting方法把number轉換成一個字符串。可選參數radix控制基數，默認爲10。radix參數最經常使用的是整數，可是他能夠用任意數字。

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

Object

object.hasOwnProperty(name)

若是object包含一個name屬性，那麼hasOwnProperty方法返回true。原型鏈中的同名屬性是不會被檢查的。

var a={memeber:true};
console.log(a.hasOwnProperty("memeber"));//true

RegExp

regexp.exec(string)

若是它成功匹配regexp和字符串string，它會返回一個數組。數組中下標爲0的元素包含正則表達式regexp匹配的子字符串。下標爲1的元素是分組1捕獲的文本，下標爲2的元素是分組2捕獲的文本，依此類推。若是匹配失敗則返回null。

若是regexp帶有一個g標誌（全局標誌），事情變得更加複雜了。查找不是從字符串的起始位置開始，而是從regexp.lastIndex( 初始值爲0 )位置開始。若是匹配成功，那麼regexp.lastIndex將被設置爲該匹配後第一個字符的位置。不成功的匹配會重置regexp.lastIndex爲0。

你能夠經過循環調用exec去查詢一個匹配模式在一個字符串中發生幾回。要注意：若是你提早退出了循環，在次進入這個循環前必須把regexp的lastIndex重置爲0。^因子也僅匹配regex.lastIndex爲0的狀況。

// 把一個簡單的HTML文本分解爲標籤和文本
var text = '<html><body bgcolor=linen><p>' +'This is <b>bold<\/b>!<\/p><\/body><\/html>';
var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
var a, i;

while ((a = tags.exec(text))) {
    for (i = 0; i < a.length; i += 1) {
        console.log('// [' + i + '] ' + a[i]);
    }
    console.log(  );
}

// 結果:

// [0] <html>
// [1]
// [2] html
// [3]

// [0] <body bgcolor=linen>
// [1]
// [2] body
// [3]  bgcolor=linen

// [0] <p>
// [1]
// [2] p
// [3]

// [0] This is
// [1] undefined
// [2] undefined
// [3] undefined

// [0] <b>
// [1]
// [2] b
// [3]

// [0] bold
// [1] undefined
// [2] undefined
// [3] undefined

// [0] </b>
// [1] /
// [2] b
// [3]

// [0] !
// [1] undefined
// [2] undefined
// [3] undefined

// [0] </p>
// [1] /
// [2] p
// [3]

// [0] </body>
// [1] /
// [2] body
// [3]

// [0] </html>
// [1] /
// [2] html
// [3]

regex.test(string)

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

String

string.charAt(pos)

返回string中pos位置的字符。

var name='Curly';
var c0=name.charAt(0);
console.log(c0);//C

var c1=name.charAt(-1);
console.log(c1);//空字符串
console.log(c1.length);//0

var c2=name.charAt(10);
console.log(c2);//空字符串

string charCodeAt(pos)

返回一個以整數形式表示的在string中的pos位置上的字符碼位。

var name='Curly';
var c0=name.charCodeAt(0);
console.log(c0);//67

var c1=name.charCodeAt(-1);
console.log(c1);//NaN

var c2=name.charCodeAt(10);
console.log(c2);//NaN

string.concat(string...)

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

string.indexOf(searchString,position)

從string的postion（可選，默認爲0）位置開始查找字符串searchString，若是找到返回第一個匹配字符的位置，不然返回-1。

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

string.lastIndexOf(searchString,position)

var text = 'Mississippi';
var p = text.lastIndexOf('ss');    //從字符串末尾向前找 p is 5
p = text.lastIndexOf('ss', 3);     //從字符串位置3處向前找 p is 2
p = text.lastIndexOf('ss', 6);     //從字符串位置6處向前找 p is 5
p = text.lastIndexOf('ss', -2);     // p is -1
p = text.lastIndexOf('ss', 20);     //20大於字符串長度，從字符串末尾向前找 p is 5

string.localCompare(this)

該函數採用底層操做系統提供的排序規則進行比較。

var m = ['AAA', 'A', 'aa', 'a', 'Aa', 'aaa'];
m.sort(function (a, b) {
    return a.localeCompare(b);//a<b結果爲負，相等爲0，a>b爲正
});

// 在某些本地環境下 m 爲['a', 'A', 'aa', 'Aa', 'aaa', 'AAA']

string.match(regexp)

若是沒有g標識，調用string.match(regexp)的結果與string.exec(regexp)的結果相同，若是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) {
    console.log('// [' + i + '] ' + a[i]);
}

// 結果

// [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(regexp/substr,replacement)

參數regexp/substr規定子字符串或要替換的模式的 RegExp 對象。若是該值是一個字符串，則將它做爲要檢索的直接量文本模式，而不是首先被轉換爲 RegExp 對象。 replacement規定了替換文本或生成替換文本的函數。replace方法返回一個新的字符串。

它將在 string 中查找與 regexp 相匹配的子字符串，而後用 replacement 來替換這些子串。若是 regexp 具備全局標誌 g，那麼 replace() 方法將替換全部匹配的子串。不然，它只替換第一個匹配子串。

replacement 能夠是字符串，也能夠是函數。若是它是字符串，那麼每一個匹配都將由字符串替換。可是 replacement 中的 $ 字符具備特定的含義。以下表所示，它說明從模式匹配獲得的字符串將用於替換。

字符	替換文本
$一、$二、...、$99	與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 regexp 相匹配的子串。
$`	位於匹配子串左側的文本。
$'	位於匹配子串右側的文本。
$$	直接量符號。

示例代碼：

var str="Visit Microsoft!".replace("Microsoft", "Windows");//Visit Windows!

執行一次全局替換，每當 "Microsoft" 被找到，它就被替換爲 "W3School"：

var str="Welcome to Microsoft! "
+ "We are proud to announce that Microsoft has "
+ "one of the largest Web Developers sites in the world."

var str=str.replace(/Microsoft/g, "W3School");
//"Welcome to W3School! We are proud to announce that W3School has one of the largest Web Developers sites in the world."

確保匹配字符串大寫字符的正確：

text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");

把 "Doe, John" 轉換爲 "John Doe" 的形式：

name = "Doe, John";
name =name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");//John Doe

把字符串中全部單詞的首字母都轉換爲大寫：

name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
  //"Aaa Bbb Ccc"
  );

以上關於replace的內容來自於W3School

string.search(regexp)

相似於indexOf，若是找到返回第一個匹配的首字符位置。找不到則返回-1，此方法會忽略掉g標識。

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

string.slice(start,end)

複製string中的一部分來構造一個新的字符串，從string的start位置到end-1位置。

var str='0123456789';
var s1=str.slice(1);//123456789
var s2=str.slice(9);//9
var s3=str.slice(2,5);//234
var s4=str.slice(5,2);//空字符串
var s5=str.slice(10);//空字符串

string.split(separator,limit)

把string依據separator分割成limit段，limit可選。separator能夠是一個值字符串或者正則表達式。

var digits = '012345';
var a = digits.split('', 5);
// a is ['0', '1', '2', '3', '4']
var b = digits.split('');
// b is ['0', '1', '2', '3', '4','5']

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

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

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

注意，來自分組捕獲的文本將會被包含在分割後的數組中：

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

當separator是一個正則表達式時，有一些JS的實如今輸出數組中會禁止空字符串：

var f = '|a|b|c|'.split(/\|/);
//一些系統中 f is ['a', 'b', 'c'] 
//另一些系統中 f is ['', 'a', 'b', 'c', '']

string.substring(start,end)

用法同slice。與 slice不一樣的是，substring 不接受負的參數。建議用slice代替它。

string.toLowerCase()

返回一個新的字符串，把string中的字母都轉成小寫。

string.toUpperCase()

返回一個新的字符串，把string中的字母都轉成小寫。

String.fromCharCode(char...)

從一串數字中返回一個字符串。

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

參考：《JavaScript語言精粹》Douglas Crockford著趙澤欣鄢學鵾譯

轉載請註明出處：

做者：JesseLZJ
出處：http://jesselzj.cnblogs.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript語言精粹 筆記06 方法

JavaScript語言精粹筆記06 方法