『總結(jié)』JS常用方法與片段

1. javascript刪除元素節(jié)點(diǎn)

IE中有這樣一個(gè)方法:removeNode(),這個(gè)方法在IE下是好使的,但是在Firefox等標(biāo)準(zhǔn)瀏覽器中就會(huì)報(bào)錯(cuò)了 removeNode is not defined,但是在核心JS中有一個(gè)操作DOM節(jié)點(diǎn)的方法叫:removeChild()

我們可以先去找到要?jiǎng)h除節(jié)點(diǎn)的父節(jié)點(diǎn),然后在父節(jié)點(diǎn)中運(yùn)用removeChild來移除我們想移除的節(jié)點(diǎn)。我們可以定義一個(gè)方法叫

removeElement:

function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element); 
         }
}

2. js sort方法根據(jù)數(shù)組中對象的某一個(gè)屬性值進(jìn)行升序或者降序排列

/**數(shù)組根據(jù)數(shù)組對象中的某個(gè)屬性值進(jìn)行排序的方法 
     * 使用例子:newArray.sort(sortBy('number'),false) //表示根據(jù)number屬性降序排列;若第二個(gè)參數(shù)不傳遞,默認(rèn)表示升序排序
     * @param attr 排序的屬性 如number屬性
     * @param rev true表示升序排列,false降序排序
     * */
    sortBy: function(attr,rev){
        //第二個(gè)參數(shù)沒有傳遞 默認(rèn)升序排列
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
        return function(a,b){
            a = a[attr];
            b = b[attr];
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    }

3. charCodeAt()

用法:charCodeAt()方法可返回指定位置的字符的 Unicode 編碼。這個(gè)返回值是 0 - 65535 之間的整數(shù)
語法:stringObject.charCodeAt(index)
index參數(shù)必填,表示字符串中某個(gè)位置的數(shù)字,即字符在字符串中的下標(biāo)。
注:字符串中第一個(gè)字符的下標(biāo)是 0。如果 index 是負(fù)數(shù),或大于等于字符串的長度,則 charCodeAt() 返回 NaN。
例如:

var str="Hello world!"
document.write(str.charCodeAt(1))
//結(jié)果:101

4. js 頁面刷新location.reloadlocation.replace的區(qū)別小結(jié)

reload 方法,該方法強(qiáng)迫瀏覽器刷新當(dāng)前頁面。
語法:location.reload([bForceGet])
參數(shù): bForceGet, 可選參數(shù), 默認(rèn)為 false,從客戶端緩存里取當(dāng)前頁。true, 則以 GET 方式,從服務(wù)端取最新的頁面, 相當(dāng)于客戶端點(diǎn)擊 F5(“刷新”)

replace 方法,該方法通過指定URL替換當(dāng)前緩存在歷史里(客戶端)的項(xiàng)目,因此當(dāng)使用replace方法之后,你不能通過“前進(jìn)”和“后退”來訪問已經(jīng)被替換的URL。
語法:location.replace(URL)

在實(shí)際應(yīng)用的時(shí)候,重新刷新頁面的時(shí)候,我們通常使用: location.reload()或者是history.go(0)來做。因?yàn)檫@種做法就像是客戶端點(diǎn)F5刷新頁面,所以頁面的method=”post”的時(shí)候,會(huì)出現(xiàn)“網(wǎng)頁過期”的提示。那是因?yàn)镾ession的安全保護(hù)機(jī)制??梢韵氲剑?當(dāng)調(diào)用 location.reload() 方法的時(shí)候, aspx頁面此時(shí)在服務(wù)端內(nèi)存里已經(jīng)存在, 因此必定是 IsPostback 的。如果有這種應(yīng)用: 我們需要重新加載該頁面,也就是說我們期望頁面能夠在服務(wù)端重新被創(chuàng)建, 我們期望是 Not IsPostback 的。這里,location.replace() 就可以完成此任務(wù)。被replace的頁面每次都在服務(wù)端重新生成。你可以這么寫: location.replace(location.href)

5. isFinite函數(shù)

isFinite函數(shù)返回一個(gè)布爾值,檢查某個(gè)值是不是正常數(shù)值,而不是Infinity。

isFinite(Infinity) // false
isFinite(-1) // true
isFinite(true) // true
isFinite(NaN) // false

6. parseInt()

parseInt方法用于將字符串轉(zhuǎn)為整數(shù)。

parseInt('123') // 123
如果parseInt的參數(shù)不是字符串,則會(huì)先轉(zhuǎn)為字符串再轉(zhuǎn)換。
如果字符串頭部有空格,空格會(huì)被自動(dòng)去除。
字符串轉(zhuǎn)為整數(shù)的時(shí)候,是一個(gè)個(gè)字符依次轉(zhuǎn)換,如果遇到不能轉(zhuǎn)為數(shù)字的字符,就不再進(jìn)行下去,返回已經(jīng)轉(zhuǎn)好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

面代碼中,parseInt的參數(shù)都是字符串,結(jié)果只返回字符串頭部可以轉(zhuǎn)為數(shù)字的部分。
如果字符串的第一個(gè)字符不能轉(zhuǎn)化為數(shù)字(后面跟著數(shù)字的正負(fù)號(hào)除外),返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1
parseInt的返回值只有兩種可能,不是一個(gè)十進(jìn)制整數(shù),就是NaN。

parseInt方法還可以接受第二個(gè)參數(shù)(2到36之間),表示被解析的值的進(jìn)制,返回該值對應(yīng)的十進(jìn)制數(shù)。默認(rèn)情況下,parseInt的第二個(gè)參數(shù)為10,即默認(rèn)是十進(jìn)制轉(zhuǎn)十進(jìn)制。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

面代碼中,二進(jìn)制、六進(jìn)制、八進(jìn)制的1000,分別等于十進(jìn)制的8、216和512。這意味著,可以用parseInt方法進(jìn)行進(jìn)制的轉(zhuǎn)換。

如果第二個(gè)參數(shù)不是數(shù)值,會(huì)被自動(dòng)轉(zhuǎn)為一個(gè)整數(shù)。這個(gè)整數(shù)只有在2到36之間,才能得到有意義的結(jié)果,超出這個(gè)范圍,則返回NaN。如果第二個(gè)參數(shù)是0、undefined和null,則直接忽略。

parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

如果字符串包含對于指定進(jìn)制無意義的字符,則從最高位開始,只返回可以轉(zhuǎn)換的數(shù)值。如果最高位無法轉(zhuǎn)換,則直接返回NaN。

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

上面代碼中,對于二進(jìn)制來說,1是有意義的字符,5、4、6都是無意義的字符,所以第一行返回1,第二行返回NaN。

7. parseFloat()

parseFloat方法用于將一個(gè)字符串轉(zhuǎn)為浮點(diǎn)數(shù)。

parseFloat('3.14') // 3.14
如果字符串符合科學(xué)計(jì)數(shù)法,則會(huì)進(jìn)行相應(yīng)的轉(zhuǎn)換。

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能轉(zhuǎn)為浮點(diǎn)數(shù)的字符,則不再進(jìn)行往后轉(zhuǎn)換,返回已經(jīng)轉(zhuǎn)好的部分。

parseFloat('3.14more non-digit characters') // 3.14
parseFloat方法會(huì)自動(dòng)過濾字符串前導(dǎo)的空格。
parseFloat('\t\v\r12.34\n ') // 12.34

如果參數(shù)不是字符串,或者字符串的第一個(gè)字符不能轉(zhuǎn)化為浮點(diǎn)數(shù),則返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN
面代碼中,尤其值得注意,parseFloat會(huì)將空字符串轉(zhuǎn)為NaN。

這些特點(diǎn)使得parseFloat的轉(zhuǎn)換結(jié)果不同于Number函數(shù)。

parseFloat(true)  // NaN
Number(true) // 1
parseFloat(null) // NaN
Number(null) // 0
parseFloat('') // NaN
Number('') // 0
parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

8. charAt()

charAt()方法可返回指定位置的字符。
請注意,JavaScript 并沒有一種有別于字符串類型的字符數(shù)據(jù)類型,所以返回的字符是長度為 1 的字符串。

語法:stringObject.charAt(index)

注釋:字符串中第一個(gè)字符的下標(biāo)是 0。如果參數(shù) index 不在 0 與 string.length之間,該方法將返回一個(gè)空字符串。
例子,在字符串 “Hello world!” 中,我們將返回位置 1 的字符:

var str="Hello world!"
document.write(str.charAt(1)) //e

9. toFixed()

var a=2.1512131231231321;  
console.log(a.toFixed(2)); //2.15

10. join()

join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的。
語法:
arrayObject.join(separator) //separator:可選。指定要使用的分隔符。如果省略該參數(shù),則使用逗號(hào)作為分隔符。
注意:返回的是一個(gè)字符串。
例如:

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
輸出:George.John.Thomas

11. split()

語法:stringObject.split(separator,howmany)

separator:必需。字符串或正則表達(dá)式,從該參數(shù)指定的地方分割 stringObject

howmany:可選。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù),返回的子串不會(huì)多于這個(gè)參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù),整個(gè)字符串都會(huì)被分割,不考慮它的長度。

返回值:一個(gè)字符串?dāng)?shù)組,String.split() 執(zhí)行的操作與Array.join()執(zhí)行的操作是相反的。

"2:3:4:5".split(":")    //將返回["2", "3", "4", "5"]
"|a|b|c".split("|")    //將返回["", "a", "b", "c"]

如果您希望把單詞分割為字母,或者把字符串分割為字符,可使用下面的代碼:

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]
若只需要返回一部分字符,請使用 howmany 參數(shù):
"hello".split("", 3)    //可返回 ["h", "e", "l"]

12. indexOf()

indexOf()方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
語法:stringObject.indexOf(searchvalue,fromindex)
searchvalue:必需。規(guī)定需檢索的字符串值。
fromindex:可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù),則將從字符串的首字符開始檢索。

indexOf()方法對大小寫敏感!
如果要檢索的字符串值沒有出現(xiàn),則該方法返回 -1。

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
輸出:0 -1 6

操作DOM也可能用上:

var elems=node.getElementsByTagName("*");

13. lastIndexOf()

lastIndexOf() 方法可返回一個(gè)指定的字符串值最后出現(xiàn)的位置,在一個(gè)字符串中的指定位置從后向前搜索。
語法:stringObject.lastIndexOf(searchvalue,fromindex)

searchvalue:必需。規(guī)定需檢索的字符串值。

fromindex:可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù),則將從字符串的最后一個(gè)字符處開始檢索。

lastIndexOf() 方法對大小寫敏感! 
如果要檢索的字符串值沒有出現(xiàn),則該方法返回 -1。
var str="Hello world world!"
console.log(str.lastIndexOf("Hello")); //0
console.log(str.lastIndexOf("World")); //-1
console.log(str.lastIndexOf("world")); //12
console.log(str.lastIndexOf("world",9)); //6

14. call()apply()

語法:obj1.method1.call(obj2,argument1,argument2)
如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1..這些做為參數(shù)傳入.
例子:

function add(a,b){
    alert(a+b);
}
function sub(a,b){
    alert(a-b);
}
add.call(sub,3,1); //4

這個(gè)例子中的意思就是用 add 來替換 sub,add.call(sub,3,1) == add(3,1),所以運(yùn)行結(jié)果為:alert(4);

看一個(gè)稍微復(fù)雜一點(diǎn)的例子:

function Class1(){
    this.name = "class1";
    this.showNam = function(){
       alert(this.name);
    }
}
function Class2(){
   this.name = "class2";
}
var c1 = new Class1();
var c2 = new Class2();
c1.showNam.call(c2); //class2

注意,call 的意思是把 c1 的方法放到c2上執(zhí)行,原來c2是沒有showNam() 方法,現(xiàn)在是把c1 的showNam()方法放到 c2 上來執(zhí)行,所以this.name 應(yīng)該是 class2,執(zhí)行的結(jié)果就是 :alert(”class2”);

怎么樣,覺得有意思了吧,可以讓a對象來執(zhí)行b對象的方法,這是java程序員所不敢想的。還有更有趣的,可以用 call 來實(shí)現(xiàn)繼承

function Class1(){
    this.showTxt = function(txt){
       alert(txt);
    }
}
function Class2(){
   Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");

這樣 Class2 就繼承Class1了,Class1.call(this) 的 意思就是使用 Class1 對象代替this對象,那么 Class2 中不就有Class1 的所有屬性和方法了嗎,c2 對象就能夠直接調(diào)用Class1 的方法以及屬性了,執(zhí)行結(jié)果就是:alert(“cc”);

對的,就是這樣,這就是 javaScript 如何來模擬面向?qū)ο笾械睦^承的,還可以實(shí)現(xiàn)多重繼承。

function Class10(){
    this.showSub = function(a,b){
       alert(a-b);
    }
}
function Class11(){
    this.showAdd = function(a,b){
        alert(a+b);
    }
}
function Class2(){
   Class10.call(this);
   Class11.call(this);
} 

很簡單,使用兩個(gè) call 就實(shí)現(xiàn)多重繼承了
當(dāng)然,js的繼承還有其他方法,例如使用原型鏈,這個(gè)不屬于本文的范疇,只是在此說明call 的用法
說了call ,當(dāng)然還有apply,這兩個(gè)方法基本上是一個(gè)意思
區(qū)別在于 call 的第二個(gè)參數(shù)可以是任意類型,而apply的第二個(gè)參數(shù)必須是數(shù)組。

15. substring()

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
語法:stringObject.substring(start,stop)

start:必需。一個(gè)非負(fù)的整數(shù),規(guī)定要提取的子串的第一個(gè)字符在 stringObject 中的位置。

stop:可選。一個(gè)非負(fù)的整數(shù),比要提取的子串的最后一個(gè)字符在 stringObject 中的位置多 1。如果省略該參數(shù),那么返回的子串會(huì)一直到字符串的結(jié)尾。

返回值:一個(gè)新的字符串,該字符串值包含 stringObject的一個(gè)子字符串,其內(nèi)容是從 start 處到 stop-1 處的所有字符,其長度為 stop 減 start。

1.substring()方法返回的子串包括 start 處的字符,但不包括 stop 處的字符。 
2.如果參數(shù) start 與 stop 相等,那么該方法返回的就是一個(gè)空串(即長度為 0 的字符串)。如果 start 比 stop 大,那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。 
3.與 slice()和 substr()方法不同的是,substring() 不接受負(fù)的參數(shù)。
var str="Hello world!"
console.log(str.substring(3)); //lo world!
console.log(str.substring(3,7));//lo w

16. toString()

toString()方法可把一個(gè)邏輯值轉(zhuǎn)換為字符串,并返回結(jié)果。

javascript中的toString()方法,主要用于Array、Boolean、Date、Error、Function、Number等對象。

(1)Array.toString():將數(shù)組轉(zhuǎn)換成一個(gè)字符串,并且返回這個(gè)字符串。

描述:當(dāng)數(shù)組用于字符串環(huán)境中時(shí),javascript會(huì)調(diào)用這一方法將數(shù)組自動(dòng)轉(zhuǎn)換成一個(gè)字符串。toString()在把數(shù)組轉(zhuǎn)換成字符串時(shí),首先要將數(shù)組的每個(gè)元素都轉(zhuǎn)換成字符串(通過調(diào)用這些元素的toString方法)。當(dāng)每個(gè)元素都被轉(zhuǎn)換成字符串時(shí),它就以列表的形式輸出這些字符串,字符串之間用逗號(hào)分隔。返回值與沒有參數(shù)的jion()方法返回的字符串相同。

例如:

var arr = ['php','mysql','apache'];
console.log(arr.join()); //php,mysql,apache
console.log(arr.toString());//php,mysql,apache

(2)Boolean.toString():將布爾值轉(zhuǎn)換為字符串。

描述:根據(jù)原始布爾值或者Boolean對象的值返回字符串“true”或“false”。

例如:

var b = new Boolean();//boolean對象默認(rèn)值為false
console.log(b.toString()); //false
console.log(("chia" == "chia").toString());//true

(3)Date.toString():將Date對象轉(zhuǎn)換成一個(gè)字符串,采用本地時(shí)間。

var today = new Date();
console.log(today);//Tue Mar 28 2017 09:16:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
console.log(today.toString());//Tue Mar 28 2017 09:16:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
console.log(today.toLocaleString());//2017/3/28 上午9:16:27

注意toLocaleString()是返回采用地方日期使用地方日期格式的規(guī)范的字符串。
(4)Error.toString():將Error對象轉(zhuǎn)換成字符串

描述:實(shí)現(xiàn)定義的字符串。ECMAScript標(biāo)準(zhǔn)除了規(guī)定該方法的返回值是字符串外,沒有再做其他規(guī)定。尤其是,它不要求返回的字符傳包含錯(cuò)誤名和錯(cuò)誤信息。

(5)Function.toString():把函數(shù)轉(zhuǎn)換成字符串

描述:可以以一種與實(shí)現(xiàn)相關(guān)的方法將函數(shù)轉(zhuǎn)換成字符串。在大多數(shù)的實(shí)現(xiàn)中,例如ie和firefox,它返回Function關(guān)鍵字、參數(shù)列表、函數(shù)體部分。

function add(a,b){
    var a,b,c;
    c = a + b;
    return c;
}
console.log(add.toString()); 
結(jié)果:

function add(a,b){
    var a,b,c;
    c = a + b;
    return c;
}

(6)Number.toString():將數(shù)字轉(zhuǎn)換為字符串。用它的參數(shù)指定的基數(shù)或底數(shù)(底數(shù)范圍為2-36)。如果省略參數(shù),則使用基數(shù)10。當(dāng)參數(shù)值為2時(shí),返回二進(jìn)制數(shù)。

var a = 34;
console.log(a.toString());//34
console.log(a.toString(2));//100010
console.log(a.toString(8));//42
console.log(a.toString(16));//22

17. fromCharCode()

fromCharCode() 可接受一個(gè)指定的 Unicode 值,然后返回一個(gè)字符串。
語法:String.fromCharCode(numX,numX,...,numX)
numX:必需。一個(gè)或多個(gè) Unicode 值,即要?jiǎng)?chuàng)建的字符串中的字符的 Unicode 編碼。
注釋:該方法是 String 的靜態(tài)方法,字符串中的每個(gè)字符都由單獨(dú)的數(shù)字 Unicode 編碼指定。
它不能作為您已創(chuàng)建的 String 對象的方法來使用。因此它的語法應(yīng)該是 String.fromCharCode(),而不是 myStringObject.fromCharCode()
例如,我們將根據(jù) Unicode 來輸出 “HELLO” 和 “ABC”:

document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))

18. substr() 方法

substr() 方法可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符。
語法:stringObject.substr(start,length)

參數(shù) 描述
start 必需。要抽取的子串的起始下標(biāo)。必須是數(shù)值。如果是負(fù)數(shù),那么該參數(shù)聲明從字符串的尾部開始算起的位置。也就是說,-1 指字符串中最后一個(gè)字符,-2 指倒數(shù)第二個(gè)字符,以此類推。
length可選。子串中的字符數(shù)。必須是數(shù)值。如果省略了該參數(shù),那么返回從stringObject 的開始位置到結(jié)尾的字串。
返回值

一個(gè)新的字符串,包含從stringObject的 start(包括 start 所指的字符) 處開始的length個(gè)字符。如果沒有指定length,那么返回的字符串包含從 start 到stringObject 的結(jié)尾的字符。
提示和注釋
注釋:substr()的參數(shù)指定的是子串的開始位置和長度,因此它可以替代substring()slice()來使用。

重要事項(xiàng):ECMAscript 沒有對該方法進(jìn)行標(biāo)準(zhǔn)化,因此反對使用它。

重要事項(xiàng):在 IE 4 中,參數(shù) start 的值無效。在這個(gè) BUG 中,start 規(guī)定的是第 0 個(gè)字符的位置。在之后的版本中,此 BUG 已被修正。

var str="Hello world!"
document.write(str.substr(3,7))   // lo world
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容