關於原生 JS

時間  2019-11-20
標籤 關於 原生 欄目 JavaScript 简体版
原文   原文鏈接

在 JavaScript 中有 5 種不一樣的數據類型：string、number、boolean、object、functionjavascript

3 種對象類型：Object、Date、Arrayhtml

2 個不包含任何值的數據類型：null、undefinedjava

正則表達式node

正則表達式是由一個字符序列造成的搜索模式。正則表達式

語法編程

/正則表達式主體/修飾符(可選)

修飾符 能夠在全局搜索中不區分大xiao 寫:數組

修飾符 描述
i 執行對大 xiao 寫不敏感的匹配。
g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
m 執行多行匹配。

參考： http://www.runoob.com/js/js-regexp.html瀏覽器

阻止冒泡和默認事件閉包

冒泡簡單來講就是 HTML 子元素與父容器之間都存在一些相同的事件，當觸發子元素事件後，其父容器的事件也相應的觸發。舉例來講好比 click 事件，當觸發了子元素事件後， 包括這個控件的父控件也有 click 事件，則會繼續執行 。app

阻止冒泡須要在子控件事件加入相關代碼：

btn.onclick = function(e) { 
  var _event = e || event; 
  // 高版本瀏覽器 
  _event.cancelBubble = true;
  // IE
  window.event.cancelBubble = true; 
  // 非 IE
  _event.stopPropagation();  
}

阻止默認事件

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函數器默認動做的方式  
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默認瀏覽器動做(W3C)  
    e.preventDefault(); 
  }  
}

常見 DOM 操做

查找 HTML 元素

var x = document.getElementById("main"); // 經過 id 查找
var y = x.getElementsByTagName("p");  // 查找 id="main" 元素中的全部 <p> 元素
var x = document.getElementsByClassName("intro"); // 經過類名查找

改變 HTML

document.write();  // 可用於直接向 HTML 輸出流寫內容。 
document.getElementById(id).innerHTML=新的 HTML // 改變 HTML 元素的內容
document.getElementById(id).attribute=新屬性值 // 改變 HTML 元素的屬性
document.getElementById(id).style.property=新樣式 // 改變 HTML 元素的樣式

建立新的 HTML 元素

var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);

刪除 HTML  元素

var parent=document.getElementById("div1");
// 找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
// 從父元素中刪除子元素：
parent.removeChild(child);

注意：DOM 須要知道要刪除的元素及其父元素纔可刪除，可以使用如下簡便寫法

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

面向對象

JavaScript 對象是擁有屬性和方法的數據。js 函數就是對象！

對象定義：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

對象鍵值對的寫法相似於：PHP 中的關聯數組

兩種方式訪問對象屬性

person.lastName; 
person["lastName"];

對象方法經過添加 () 調用 (做爲一個函數)。

name = person.fullName();

最簡單的面向對象程序

<script type="text/javascript">
    var obj = new Object();
    obj.qq = '1079161148';
    obj.name = 'mr lan'
    obj.showName = function() {
        alert('my name =' + this.name)
    }
    obj.showQQ = function() {
        alert('my qq =' + this.qq)
    }
    obj.showName()
    obj.showQQ()
</script>

封裝重複使用的方法

<script type="text/javascript">
    function createPerson(name, qq) {//構造函數 構建出一個對象；
        var obj = new Object();
        obj.qq = qq;
        obj.name = name
        obj.showName = function() {
            alert('my name =' + this.name)
        }
        obj.showQQ = function() {
            alert('my qq =' + this.qq)
        }
        //出廠
        return obj
    }
    var obj = createPerson('Mr Lan','1079161148');
    var obj2 = createPerson('Mr Li','1079161168');
    obj.showName();
    obj.showQQ();
</script>

升級 ---> 構造函數加 new

<script type="text/javascript">
    function createPerson(name, qq) { //構造函數 構建出一個對象；
        this.qq = qq;
        this.name = name
        this.showName = function() {
            alert('my name =' + this.name)
        }
        this.showQQ = function() {
            alert('my qq =' + this.qq)
        }
    }
    var obj = new createPerson('Mr Lan', '1079161148');
    var obj2 = new createPerson('Mr Li', '1079161168');
    obj.showName()
    obj.showQQ()

　　alert(obj.showName()==obj2.showName()) //false

</script>

進階面向對象編程

<script type="text/javascript">
    //混合構造函數混合方式(構造函數配合原型)
    function createPerson(name, qq) { //構造函數加屬性
        this.qq = qq;
        this.name = name
    }
    createPerson.prototype.showName = function(){//原型加方法
        alert('my name =' + this.name)
    }
    createPerson.prototype.showQQ = function(){
        alert('my qq =' + this.qq)
    }
    var obj = new createPerson('Mr Lan', '1079161148');
    var obj2 = new createPerson('Mr Li', '1079161168');
    //obj.showName() //還能夠繼續用不影響使用
    //obj.showQQ()
    alert(obj.showName()==obj2.showName())//true
</script>

函數定義做爲對象的屬性，稱之爲對象方法。
函數若是用於建立新的對象，稱之爲對象的構造函數。

call 方法

調用一個對象的一個方法，以另外一個對象替換當前對象。

call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

參數

thisObj：可選項。將被用做當前對象的對象。

arg1, arg2,  , argN：可選項。將被傳遞方法參數序列。

說明

call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由thisObj 指定的新對象。若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。

實例1

var Add=function(a,b){  
      console.info(a+b);  
    }  
      
    var Sub=function(a,b){  
      console.info(a-b);  
    }  
      
    Add.call(Sub,3,3); //它輸出6:用Add對象替換Sub對象來執行方法.

實例2

function Sister(){   
        this.age=18;  
        this.sayAge= function(){  
            document.write("Age:"+this.age);  
        }  
        this.yaya=function(){  
            document.write("yaya.....");  
        }  
    }  
    function Brother(){   
        this.age=25;  
        this.sayAge=function(){  
            document.write("Age:"+this.age);  
        }  
        this.hoho=function(){  
            document.write("hoho.....")  
        }  
    }  
    var sis=new Sister();  
    var bro=new Brother();  
    sis.sayAge.call(bro);  // 輸出的是 Age:25

自調用函數

函數表達式能夠 "自調用"。自調用表達式會自動調用。若是表達式後面緊跟 () ，則會自動調用。不能自調用聲明的函數。經過添加括號，來講明它是一個函數表達式：

(function () {
    var x = "Hello!!";      // 我將調用本身
})();

JS 閉包

變量聲明時若是不使用 var 關鍵字，那麼它就是一個全局變量，即使它在函數內定義。

閉包是可訪問上一層函數做用域裏變量的函數，即使上一層函數已經關閉。 就是一個函數引用另外一個函數的變量，由於變量被引用着因此不會被回收，所以能夠用來封裝一個私有變量。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 計數器爲 3

this

在JavaScript中，this一般指向的是咱們正在執行的函數自己，或者是指向該函數所屬的對象（運行時）

數組迭代

  • reduce() 接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
參數 描述
function(total,currentValue, index,arr) 必需。用於執行每一個數組元素的函數。
函數參數:
參數 描述
total 必需。初始值, 或者計算結束後的返回值。
currentValue 必需。當前元素
currentIndex 可選。當前元素的索引
arr 可選。當前元素所屬的數組對象。
initialValue

可選。傳遞給函數的初始值

 
// 計算數組元素相加後的總和
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
  • map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
array.map(function(currentValue,index,arr), thisValue)
參數 描述
function(currentValue, index,arr) 必須。函數，數組中的每一個元素都會執行這個函數
函數參數:
參數 描述
currentValue 必須。當前元素的值
index 可選。當期元素的索引值
arr 可選。當期元素屬於的數組對象
thisValue 可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
若是省略了 thisValue ，"this" 的值爲 "undefined"		 
// 數組中的每一個元素+3，並返回新數組:
var oldArray = [1,2,3,4,5];
var timesFour = oldArray.map(function(val){
  return val + 3;
});
var newArray = timesFour;
  • filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。
array.filter(function(currentValue,index,arr), thisValue)
參數 描述
function(currentValue, index,arr) 必須。函數，數組中的每一個元素都會執行這個函數
函數參數:
參數 描述
currentValue 必須。當前元素的值
index 可選。當前元素的索引值
arr 可選。當前元素屬於的數組對象
thisValue 可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
若是省略了 thisValue ，"this" 的值爲 "undefined"		 
// 返回<6的值
var oldArray = [1,2,3,4,5,6,7,8,9,10];

array  = oldArray.filter(function(val) {
  return val < 6;
});
var newArray = array ;
  • sort() 方法用於對數組的元素進行排序。

注意：當數字是按字母順序排列時"40"將排在"5"前面。

// 數字排序（數字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程