『總結』JS經常使用方法與片斷

時間  2019-12-05
標籤 總結 經常 使用方法 片斷 欄目 JavaScript 简体版
原文   原文鏈接

1.javascript刪除元素節點

IE中有這樣一個方法:removeNode()，這個方法在IE下是好使的，可是在Firefox等標準瀏覽器中就會報錯了 removeNode is not defined，可是在覈心JS中有一個操做DOM節點的方法叫：removeChild()。javascript

咱們能夠先去找到要刪除節點的父節點，而後在父節點中運用removeChild來移除咱們想移除的節點。咱們能夠定義一個方法叫removeElement：php

function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element); 
         }
}
<div><input onclick="removeElement(this)" type="text" value="點擊移除該輸入框" /></div>

2.js sort方法根據數組中對象的某一個屬性值進行升序或者降序排列

/**數組根據數組對象中的某個屬性值進行排序的方法 
     * 使用例子：newArray.sort(sortBy('number'),false) //表示根據number屬性降序排列;若第二個參數不傳遞，默認表示升序排序
     * @param attr 排序的屬性 如number屬性
     * @param rev true表示升序排列，false降序排序
     * */
    sortBy: function(attr,rev){
        //第二個參數沒有傳遞 默認升序排列
        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 編碼。這個返回值是 0 - 65535 之間的整數
語法：stringObject.charCodeAt(index)
index參數必填，表示字符串中某個位置的數字，即字符在字符串中的下標。
注：字符串中第一個字符的下標是 0。若是 index 是負數，或大於等於字符串的長度，則 charCodeAt() 返回 NaN。
例如：html

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

參考地址：http://www.w3school.com.cn/js...java

4.js 頁面刷新location.reload和location.replace的區別小結

reload 方法，該方法強迫瀏覽器刷新當前頁面。
語法： location.reload([bForceGet])
參數： bForceGet， 可選參數， 默認爲 false，從客戶端緩存裏取當前頁。true, 則以 GET 方式，從服務端取最新的頁面, 至關於客戶端點擊 F5("刷新") node

replace 方法，該方法經過指定URL替換當前緩存在歷史裏（客戶端）的項目，所以當使用replace方法以後，你不能經過「前進」和「後退」來訪問已經被替換的URL。
語法： location.replace(URL) mysql

在實際應用的時候，從新刷新頁面的時候，咱們一般使用： location.reload() 或者是 history.go(0) 來作。由於這種作法就像是客戶端點F5刷新頁面，因此頁面的method="post"的時候，會出現「網頁過時」的提示。那是由於Session的安全保護機制。能夠想到： 當調用 location.reload() 方法的時候， aspx頁面此時在服務端內存裏已經存在， 所以一定是 IsPostback 的。若是有這種應用： 咱們須要從新加載該頁面，也就是說咱們指望頁面可以在服務端從新被建立， 咱們指望是 Not IsPostback 的。這裏，location.replace() 就能夠完成此任務。被replace的頁面每次都在服務端從新生成。你能夠這麼寫： location.replace(location.href)
參考地址：http://zccst.iteye.com/blog/2...git

5.isFinite函數

isFinite函數返回一個布爾值，檢查某個值是否是正常數值，而不是Infinity。程序員

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

6.parseInt()

parseInt方法用於將字符串轉爲整數。正則表達式

parseInt('123') // 123

若是parseInt的參數不是字符串，則會先轉爲字符串再轉換。sql

若是字符串頭部有空格，空格會被自動去除。

字符串轉爲整數的時候，是一個個字符依次轉換，若是遇到不能轉爲數字的字符，就再也不進行下去，返回已經轉好的部分。

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

面代碼中，parseInt的參數都是字符串，結果只返回字符串頭部能夠轉爲數字的部分。

若是字符串的第一個字符不能轉化爲數字（後面跟着數字的正負號除外），返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

parseInt的返回值只有兩種可能，不是一個十進制整數，就是NaN。

parseInt方法還能夠接受第二個參數（2到36之間），表示被解析的值的進制，返回該值對應的十進制數。默認狀況下，parseInt的第二個參數爲10，即默認是十進制轉十進制。

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

面代碼中，二進制、六進制、八進制的1000，分別等於十進制的八、216和512。這意味着，能夠用parseInt方法進行進制的轉換。

若是第二個參數不是數值，會被自動轉爲一個整數。這個整數只有在2到36之間，才能獲得有意義的結果，超出這個範圍，則返回NaN。若是第二個參數是0、undefined和null，則直接忽略。

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

若是字符串包含對於指定進制無心義的字符，則從最高位開始，只返回能夠轉換的數值。若是最高位沒法轉換，則直接返回NaN。

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

上面代碼中，對於二進制來講，1是有意義的字符，五、四、6都是無心義的字符，因此第一行返回1，第二行返回NaN。

7.parseFloat()

parseFloat方法用於將一個字符串轉爲浮點數。

parseFloat('3.14') // 3.14

若是字符串符合科學計數法，則會進行相應的轉換。

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

若是字符串包含不能轉爲浮點數的字符，則再也不進行日後轉換，返回已經轉好的部分。

parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法會自動過濾字符串前導的空格。

parseFloat('\t\v\r12.34\n ') // 12.34

若是參數不是字符串，或者字符串的第一個字符不能轉化爲浮點數，則返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

面代碼中，尤爲值得注意，parseFloat會將空字符串轉爲NaN。

這些特色使得parseFloat的轉換結果不一樣於Number函數。

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 並無一種有別於字符串類型的字符數據類型，因此返回的字符是長度爲 1 的字符串。

語法：stringObject.charAt(index)

註釋：字符串中第一個字符的下標是 0。若是參數 index 不在 0 與 string.length 之間，該方法將返回一個空字符串。

例子，在字符串 "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() 方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。
語法：
arrayObject.join(separator) //separator：可選。指定要使用的分隔符。若是省略該參數，則使用逗號做爲分隔符。

注意：返回的是一個字符串。

例如：

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>

輸出：George.John.Thomas

11.split()

語法：stringObject.split(separator,howmany)

separator：必需。字符串或正則表達式，從該參數指定的地方分割 stringObject。

howmany：可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度。

返回值：一個字符串數組，String.split() 執行的操做與 Array.join() 執行的操做是相反的。

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

若是您但願把單詞分割爲字母，或者把字符串分割爲字符，可以使用下面的代碼：

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]

若只須要返回一部分字符，請使用 howmany 參數：

"hello".split("", 3)    //可返回 ["h", "e", "l"]

12.indexOf()

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
語法：stringObject.indexOf(searchvalue,fromindex)

searchvalue：必需。規定需檢索的字符串值。

fromindex：可選的整數參數。規定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索。

indexOf() 方法對大小寫敏感！
若是要檢索的字符串值沒有出現，則該方法返回 -1。

<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>

輸出：0 -1 6

操做DOM也可能用上：

var elems=node.getElementsByTagName("*");
 for(var i=0;i<elems.length;i++){
      if(elems[i].className.indexOf(classname)!=-1){ 

      }
  }

13.lastIndexOf()

lastIndexOf() 方法可返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。
語法：stringObject.lastIndexOf(searchvalue,fromindex)

searchvalue：必需。規定需檢索的字符串值。

fromindex：可選的整數參數。規定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的最後一個字符處開始檢索。

lastIndexOf() 方法對大小寫敏感！
若是要檢索的字符串值沒有出現，則該方法返回 -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..這些作爲參數傳入．
例子：

function add(a,b){
    alert(a+b);
}
function sub(a,b){
    alert(a-b);
}

add.call(sub,3,1); //4

這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

看一個稍微複雜一點的例子：

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上執行，原來c2是沒有showNam() 方法，如今是把c1 的showNam()方法放到 c2 上來執行，因此this.name 應該是 class2，執行的結果就是 ：alert（"class2"）;

怎麼樣，以爲有意思了吧，可讓a對象來執行b對象的方法，這是java程序員所不敢想的。還有更有趣的，能夠用 call 來實現繼承

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 對象就可以直接調用Class1 的方法以及屬性了，執行結果就是：alert（「cc」）;

對的，就是這樣，這就是 javaScript 如何來模擬面向對象中的繼承的，還能夠實現多重繼承。

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);
}

很簡單，使用兩個 call 就實現多重繼承了
固然，js的繼承還有其餘方法，例如使用原型鏈，這個不屬於本文的範疇，只是在此說明call 的用法
說了call ，固然還有 apply，這兩個方法基本上是一個意思
區別在於 call 的第二個參數能夠是任意類型，而apply的第二個參數必須是數組。

參考地址：
http://www.cnblogs.com/swetin...
http://www.108js.com/article/...

15.substring()

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
語法：stringObject.substring(start,stop)

start：必需。一個非負的整數，規定要提取的子串的第一個字符在 stringObject 中的位置。

stop：可選。一個非負的整數，比要提取的子串的最後一個字符在 stringObject 中的位置多 1。若是省略該參數，那麼返回的子串會一直到字符串的結尾。

返回值：一個新的字符串，該字符串值包含 stringObject 的一個子字符串，其內容是從 start 處到 stop-1 處的全部字符，其長度爲 stop 減 start。

1.substring() 方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。
2.若是參數 start 與 stop 相等，那麼該方法返回的就是一個空串（即長度爲 0 的字符串）。若是 start 比 stop 大，那麼該方法在提取子串以前會先交換這兩個參數。
3.與 slice() 和 substr() 方法不一樣的是，substring() 不接受負的參數。

var str="Hello world!"
console.log(str.substring(3)); //lo world!
console.log(str.substring(3,7));//lo w

16.toString()

toString() 方法可把一個邏輯值轉換爲字符串，並返回結果。

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

（1）Array.toString()：將數組轉換成一個字符串，而且返回這個字符串。

描述：當數組用於字符串環境中時，javascript會調用這一方法將數組自動轉換成一個字符串。toString()在把數組轉換成字符串時，首先要將數組的每一個元素都轉換成字符串（經過調用這些元素的toString方法）。當每一個元素都被轉換成字符串時，它就以列表的形式輸出這些字符串，字符串之間用逗號分隔。返回值與沒有參數的jion()方法返回的字符串相同。

例如：

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

（2）Boolean.toString()：將布爾值轉換爲字符串。

描述：根據原始布爾值或者Boolean對象的值返回字符串「true」或「false」。

例如：

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

（3）Date.toString()：將Date對象轉換成一個字符串，採用本地時間。

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

注意：toLocaleString()是返回採用地方日期使用地方日期格式的規範的字符串。

（4）Error.toString()：將Error對象轉換成字符串

描述：實現定義的字符串。ECMAScript標準除了規定該方法的返回值是字符串外，沒有再作其餘規定。尤爲是，它不要求返回的字符傳包含錯誤名和錯誤信息。

（5）Function.toString()：把函數轉換成字符串

描述：能夠以一種與實現相關的方法將函數轉換成字符串。在大多數的實現中，例如ie和firefox，它返回Function關鍵字、參數列表、函數體部分。

function add(a,b){
    var a,b,c;
    c = a + b;
    return c;
}
console.log(add.toString());

結果：

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

（6）Number.toString()：將數字轉換爲字符串。用它的參數指定的基數或底數（底數範圍爲2-36）。若是省略參數，則使用基數10。當參數值爲2時，返回二進制數。

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

參考地址：
http://www.cnblogs.com/muguaw...

17.fromCharCode()

fromCharCode() 可接受一個指定的 Unicode 值，而後返回一個字符串。
語法：String.fromCharCode(numX,numX,...,numX)

numX：必需。一個或多個 Unicode 值，即要建立的字符串中的字符的 Unicode 編碼。

註釋：該方法是 String 的靜態方法，字符串中的每一個字符都由單獨的數字 Unicode 編碼指定。
它不能做爲您已建立的 String 對象的方法來使用。所以它的語法應該是 String.fromCharCode()，而不是 myStringObject.fromCharCode()。

例如，咱們將根據 Unicode 來輸出 "HELLO" 和 "ABC"：

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

18.substr() 方法

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

參數 描述
start 必需。要抽取的子串的起始下標。必須是數值。若是是負數，那麼該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最後一個字符，-2 指倒數第二個字符，以此類推。
length 可選。子串中的字符數。必須是數值。若是省略了該參數，那麼返回從 stringObject 的開始位置到結尾的字串。

返回值

一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 length 個字符。若是沒有指定 length，那麼返回的字符串包含從 start 到 stringObject 的結尾的字符。

提示和註釋

註釋：substr() 的參數指定的是子串的開始位置和長度，所以它能夠替代 substring() 和 slice() 來使用。

重要事項：ECMAscript 沒有對該方法進行標準化，所以反對使用它。

重要事項：在 IE 4 中，參數 start 的值無效。在這個 BUG 中，start 規定的是第 0 個字符的位置。在以後的版本中，此 BUG 已被修正。

var str="Hello world!"
document.write(str.substr(3,7))

結果：lo worl
逐步更新中...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程