建構式

小編上篇博客中介紹到的通過關鍵字class方式定義類，然后根據類再創建物件的方式，是ES6中語法，現在很多瀏覽器對ES6的支持還不是很好，所以也要學習通過建構式（構建函式）的方式創建物件

問？既然瀏覽器對ES6的支持不是很好，是不是撰寫代碼時不要使用ES6語法呢？（看完這篇文章你就有答案了）

1.建構式和原型

1.1物件的三種創建方式–復習

字面量方式
```
var obj = {};
```
new關鍵字
```
var obj = new Object();
```

建構式方式

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

說明：

建構式是一種特殊的函式，主要用來初始化物件，即為物件成員的值進行初始化，其與new一起使用用于創建物件

這里所說的建構式與前面講的類中的建構式不太一樣，類中的建構式主要是給類中的屬性賦值，這里的建構式中，既可以包屬性，也可以包含方法，與上面所說的類的概念更接近，可以看成是J S 徹底向面向物件轉變程序中的一種過度，四不像

所以在撰寫建構式時，可以參考類的定義方式，將物件的一些公共的屬性和方法抽象出來，然后封裝到這個函式中

如下面分別使用ES6中的class和ES5中的建構式的方式生成實體物件

		/*
        *ES6 中創建物件的方法：先使用class關鍵字創建類，然后使用 new 類名() 的方式創建類的物件
        */
        class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            speak(){
                console.log('哇哇哇哇哇哇哇')
            }
        }
        // 創建類的物件
        var p1 = new Person('李白', 20)
        // 訪問類中的屬性
        console.log(p1.name)
        p1.speak()
        console.log('---------------------')

        /*
        *ES5 中創建物件的方法：先創建建構式，然后使用 new 函式名稱() 的方式創建這個函式的物件
        */
        function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing=function(){
                console.log('小呀嘛小二郎')
            }
        }
        // 通過建構式創建物件
        var s1 = new Star('杜甫', '男')
        console.log(s1.gender)
        s1.sing()

圖解

在這里插入圖片描述

注意兩點

1）建構式首字母大寫，就給使用class創建類一樣

2）與new關鍵字一起使用，這更與class一樣

3）最為重要的一點是：類的撰寫方法更像是語法糖，目的是讓我們能夠快速、舒服、優雅的撰寫類，但是從本質上來說，類其實就是函式，初學者可能感覺不到 class 方式定義類相較于建構式的優勢：1）沒有體會到通過建構式的方式實作繼承的痛苦，所以無法理解通過 ES6 中 extends 實作繼承的優勢； 2）沒有見識過傳統的面向變成語言

console.log(typeof Person);
console.log(typeof FPerson);

結果

在這里插入圖片描述

new的解釋

在記憶體中創建一個新的空物件

讓this指向這個物件，所以在代碼中使用this，就是使用這個物件，this 跟類沒有關系

執行建構式中的代碼，給這個物件添加屬性和方法，但是方法中的代碼不會執行

1.2靜態成員和實體成員

1.2.1實體成員

實體成員就是建構式內部通過this添加的成員如下列代碼中 name age sing 就是實體成員,實體成員只能通過實體化的物件來訪問

  /*通過this添加的成員就是實體成員
        1）實體成員只能通過物件.成員的方式訪問
        2）實體成員與每個物件相關，也就是每個物件的成員的值是不一樣的
        */
        function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing = function () {
                console.log('小呀嘛小二郎')
            }
        }
        // 通過建構式創建物件
        var s1 = new Star('杜甫', '男')
        var s2 = new Star('蔡徐坤', '女')
        console.log(s1.gender)
        console.log(s2.gender)
        // 實體成員不能通過 【建構式名稱.成員】 的方式訪問
        // console.log(Star.gender) // undefined

這點與ES6中 class 創建的類是一樣的

class Star {
    constructor(uname, age) {
        this.uname = uname
        this.age = age
	}
    sing() {
    	console.log('我會唱歌')
    }
}

var ldh=new Star('劉德華',17)
console.log(ldh.uname)

1.2.2靜態成員

靜態成員在建構式本身上添加的成員如下列代碼中就是靜態成員,靜態成員只能通過建構式來訪問

在這里插入圖片描述

這與通過 class 關鍵字定義類時一樣的

總結：

實體成員屬于物件，所以兩個物件的實體成員的值不一樣

靜態成員，屬于建構式本身，每個物件都屬于這個建構式，所以多個物件共享一個靜態成員

1.3建構式的問題

建構式方法很好用，但是存在浪費記憶體的問題，

在這里插入圖片描述

1.4建構式原型prototype

建構式通過原型分配的函式是所有物件所共享的，

JavaScript 規定，每一個建構式都有一個prototype 屬性，指向另一個物件，注意這個prototype就是一個物件，叫做原型物件

ES6 中的類也是一樣，因為我們說過，類從本質上來講，也是一個函式

        function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing = function () {
                console.log('小呀嘛小二郎')
            }
        }
        console.log(Star.prototype)

在這里插入圖片描述

這個物件的所有屬性和方法，都會被建構式所擁有

function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing = function () {
                console.log('小呀嘛小二郎')
            }
        }
        // 為Star的原型物件添加方法(相當于將方法添加到Star的父類上去)
        Star.prototype.cry=function(){
            console.log('我要cry，cry，cry，cry，cry')
        }
        Star.prototype.dance=function(){
            console.log('一步一步，似魔鬼的步伐')
        }
        // 通過輸出發現，原型物件上確實有了 cry 方法
        console.log(Star.prototype)
        // 那么作為原型物件的子類的 Star 建構式自然就擁有了cry 方法
        var s1 = new Star('杜甫', '男')
        s1.cry()
        s1.dance()
        var s2 = new Star('蔡徐坤', '女')
        s2.cry()
        s2.dance()

還可以使用物件的方式為原型添加多個方法

我們可以把那些不變的方法，直接定義在 prototype 物件上，這樣所有物件的實體就可以共享這些方法，

解惑：

1）這個原型，就類似于其他語言中的基類，，，，

2）不僅使我們自己使用建構式或類定義的物件，JS中的內置物件的方法，其實都定義在這個物件的原型物件上

var arr=[]
// 查看物件的原型物件使用 __proto__ 屬性
console.log(arr.__proto__)
// 查看建構式或類的原型物件使用 prototype 屬性
console.log(Array.prototype)
// 總結：物件的__proto__ 屬性和 類或者建構式的 protptype 屬性指向的是同一個物件

1.5物件原型

建構式的prototype 屬性獲取的是當前建構式的原型物件
建構式的實體的__proto__屬性獲取的是當前物件的物件原型
這兩者是一個物件，也就是說建構式的原型物件與此建構式的實體的物件原型是一個物件

在這里插入圖片描述

 function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing = function () {
                console.log('小呀嘛小二郎')
            }
        }
        // 為Star的原型物件添加方法(相當于將方法添加到Star的父類上去)
        Star.prototype.cry = function () {
            console.log('我要cry，cry，cry，cry，cry')
        }
        Star.prototype.dance = function () {
            console.log('一步一步，似魔鬼的步伐')
        }
        // 通過輸出發現，原型物件上確實有了 cry 方法
        console.log(Star.prototype)
        // 那么作為原型物件的子類的 Star 建構式自然就擁有了cry 方法
        var s1 = new Star('杜甫', '男')
        // s1.cry()
        // s1物件的 __proto__屬性獲取是的是s1物件的物件原型
        console.log(s1.__proto__)
        // 驗證建構式的原型物件與實力的物件原型是一個物件
        console.log(Star.prototype===s1.__proto__)

1.6constructor建構式

物件原型（ proto）和建構式（prototype）原型物件里面都有一個屬性 constructor 屬性（因為兩個其實是一個東西），constructor 我們稱為建構式，因為它指回建構式本身，

下面通過代碼理解

        function Star(name, gender) {
            this.name = name
            this.gender = gender
            this.sing = function () {
                console.log('小呀嘛小二郎')
            }
        }      
        var s1 = new Star('杜甫', '男')
        // 輸出建構式的原型物件
        console.log(Star.prototype)
        // 輸出物件的物件原型
        console.log(s1.__proto__)

在這里插入圖片描述

通過上面的代碼，我們看到，constructor 屬性的值確實是這個物件對應的建構式

不僅可以通過這個屬性，獲取原型物件所屬的建構式，constructor屬性還可以讓原型物件重新指向原來的建構式

一般情況下，物件的方法都在建構式的原型物件中設定，

如下面這樣

// 為構造方法的原型物件中添加speak 方法
Person.prototype.speak=function(){
	console.log('人類說話')
}

但是如果加入多個方法，使用上面的方式就比較麻煩

function Star(name, gender) {
    this.name = name
    this.gender = gender
}
// 像原型添加sing方法
Star.prototype.sing = function () {
	console.log('紅星閃閃放光彩');
}
// 向原型添加 dance 方法
Star.prototype.dance = function () {
	console.lo('魔鬼的步伐')
}
// 向原型添加fly
Star.prototype.fly = function () {
	console.log('上了飛機就拖鞋')
}

像上面這樣，如果要添加多個方法，我們可以給原型物件采取物件形式賦值，如下面的代碼

Star.prototype = {
    sing: function () {
    	console.log('紅星閃閃放光彩');
    },
    dance: function () {
    	console.lo('魔鬼的步伐')
    },
    fly: function () {
    	console.log('上了飛機就拖鞋')
    }
}

但是這樣就會覆寫建構式原型物件原來的內容，這樣修改后的原型物件 constructor 就不再指向當前建構式了

此時，我們可以在修改后的原型物件中，添加一個 constructor 指向原來的建構式，

在這里插入圖片描述

結果

在這里插入圖片描述

總結：如果我們修改了原來的原型物件,給原型物件賦值的是一個物件,則必須手動的利用constructor指回原來的建構式如:

完整代碼

function Star(name, gender) {
    this.name = name
    this.gender = gender
}        
Star.prototype = {
    construcotr:Star,
    sing: function () {
        console.log('紅星閃閃放光彩');
    },
    dance: function () {
        console.lo('魔鬼的步伐')
    },
    fly: function () {
        console.log('上了飛機就拖鞋')
    }
}
console.log(Star.prototype)

1.7原型鏈

? 每一個實體物件又有一個__proto__屬性，指向的建構式的原型物件，建構式的原型物件也是一個物件，也有__proto__屬性，這樣一層一層往上找就形成了原型鏈，

可以類比基類，基類就是Object

其實所有的自定義的或者系統內置的建構式或者類的最頂級的物件原型都是 Object

在這里插入圖片描述

1.8建構式實體和原型物件三角關系

1.建構式的prototype屬性指向了建構式原型物件,建構式的原型物件的constructor屬性指向了建構式

function Star(name, age) {
    this.name = name
    this.age = age
}
// 獲取輸出構造方法的原型物件
console.log(Star.prototype)
// 獲取并輸出原型物件的建構式
console.log(Star.prototype.constructor)
// 證明原型物件的constructor屬性確實獲取的是對應的建構式
console.log(Star.prototype.constructor===Star)

2.實體物件是由建構式創建的,實體物件的__proto__屬性指向了建構式的原型物件

// 實體物件由建構式創建
var s1=new Star('肖戰',18)
// 實體物件的__proto__屬性指向了對應建構式的原型物件
console.log(s1.__proto__)

3.建構式的原型物件的constructor屬性指向了建構式,實體物件的原型就是建構式的原型物件，此物件中有constructor屬性也指向了建構式

在這里插入圖片描述

重要說明：上面所說的理論同樣適用于ES6中

class Star {
    constructor(name){
    this.name=name
    }
}
var s=new Star('yhb')
console.log(Star.prototype)
console.log(s.__proto__)

1.9原型鏈和成員的查找機制

任何物件都有原型物件,也就是prototype屬性,任何原型物件也是一個物件,該物件就有__proto__屬性,這樣一層一層往上找,就形成了一條鏈,我們稱此為原型鏈;

當訪問一個物件的屬性（包括方法）時，首先查找這個物件自身有沒有該屬性，
如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型物件），
如果還沒有就查找原型物件的原型（Object的原型物件），
依此類推一直找到 Object 為止（null），
__proto__物件原型的意義就在于為物件成員查找機制提供一個方向，或者說一條路線，

1.10原型物件中this指向

建構式中的this和原型物件的this,都指向我們new出來的實體物件

1、建構式中的this指向的就是new出來的物件

function Star(name, age) {
    this.name = name
    this.age = age
    console.log(this)
}
var s1=new Star('李白',20)
var s2=new Star('杜甫',17)

在這里插入圖片描述

2、建構式的原型物件上的this指向的也是new出來的物件

function Star(name, age) {
    this.name = name
    this.age = age
    console.log(this)
}
Star.prototype.sing=function(){
    console.log(this)
}
var s1=new Star('李白',20)
var s1=new Star('杜甫',17)

在這里插入圖片描述

通過下面的代碼也可以比較兩個到底是不是都只想了 new 出來物件

 function Star(name, age) {
     this.name = name
     this.age = age            
 }
 var that = null
 // 建構式的原型物件中的this
 Star.prototype.sing = function () {
 	that = this
 }
 var s1 = new Star('李白', 20)
 // 韓炳旭說：sing方法一定要呼叫，否則無法執行賦值操作
 s1.sing()
 console.log(that === s1)

1.11通過原型為陣列擴展內置方法

查看陣列的原型

 console.log(Array.prototype);

為陣列擴展和一個方法，可以計算陣列中元素的和

 var numbers = new Array(1, 2, 3, 4, 5)

        // 傳統方法求和
        // var sum = 0
        // for (var i = 0; i < numbers.length; i++) {
        //     sum += numbers[i]
        // }

        // 通過改變原型
        Array.prototype.sum = function () {
            var sum = 0
            for (var i = 0; i < this.length; i++) {
                sum += this[i]
            }
            return sum
        }
        console.log(numbers.sum())

        // 再創建一個陣列，使用[]方式創建的也是Array類的實體
        var arr=[2,3,4,7]
        console.log(arr.sum())
        console.log(Array.prototype)

2.繼承

在ES6之前，沒有extends 關鍵字實作類的繼承，需要通過建構式+原型物件的方式模擬實作繼承，這種方式叫做組合繼承

2.1call()

call()可以呼叫函式
call()可以修改this的指向,使用call()的時候引數一是修改后的this指向,引數2,引數3（普通引數）…使用逗號隔開連接

下面代碼單純的呼叫函式

function f1() {
	console.log(this) //window
}
f1.call()

下面代碼修改this的指向

  function f1() {
            /*
            *1）默認情況下,this=window
            *2）使用call修改后,this=p
            */
            console.log(this) 
        }
        f1.call() // 輸出window
        // 創建物件p
        var p={}
        // 將函式f1的this指向修改為物件p
        f1.call(p) // 輸出p

上面call 方法的第一個引數就是this參考的新物件，后面的引數作為函式 f1 的普通引數

代碼演示

2.2子建構式繼承父建構式中的屬性

下面利用上面講到的知識實作建構式的繼承（所謂繼承，就是讓一個類擁有另一個類中的屬性和方法，換言之，就是將A類中的屬性和方法的宿主換成B的物件）

步驟如下

先定義一個父建構式
再定義一個子建構式
子建構式繼承父建構式的屬性(使用call方法)

在這里插入圖片描述

通過除錯證明上面的結論

上面的案例只演示了屬性的繼承，方法的繼承是一樣的

在這里插入圖片描述

2.3借用原型物件繼承方法

上面的方式，可以繼承建構式（為了簡單，以后我們稱其為類）中的方法，但前面講過，實際開發中，我們更喜歡將方法注冊到類的原型上

function Father(name, age) {
            this.name = name
            this.age = age
        }
        Father.prototype.speak = function () {
            console.log('hello')
        }
        function Son(gender) {
            // 注釋 ①
            Father.call(this, '張三', 20)
            this.gender = gender
        }
        var f=new Father('yhb',30)
        console.log(f)        
        var s = new Son('女')
        console.log(s)

輸出結果

在這里插入圖片描述

所以，Son 的物件中就沒有 speak 方法

其實原因很簡單，在Father的原型物件上添加了speak方法，那么Father會繼承這個方法，但當前 Son與Father以及Father的原型并沒有任何關系，我們只不過通過 call 方法巧妙的使用了其 name和age 屬性而已，所以Son中自然沒有speak 方法

如何解決呢？

我們可以修改Son的原型為Father的原型，這樣的話Son就擁有了speak 方法

在這里插入圖片描述

輸出結果

在這里插入圖片描述

我們發現，Son中確實擁有了speak 方法

但是問題也隨之出現，因為 Father 與 Son 此時的原型物件是一個，所以此時我們如果想 Son的原型物件上添加一個方法

 Son.prototype.run=function(){
	 console.log('run')
 }

再分別輸出兩個物件

在這里插入圖片描述

這就違反了繼承的原則：只能兒子繼承父親的，但現在是父親也能繼承兒子的

解決方案：將下面的代碼

Son.prototype=Father.prototype

替換成下面這個

 Son.prototype=new Father()

也就是讓Son的原型物件指向 Father 的物件實體，這個實體的 proto 屬性指向Father的物件原型，所以其中具有speak方法，但這僅僅是一個實體物件，就想從Father類拷貝了一份，修改此物件的原型，不會影響ather類的物件，所以修改此實體，不會影響到Father 的原型物件

稍微有點小問題就是，此時 Son的建構式指向的是Father的建構式了

console.log(s.constructor)

在這里插入圖片描述

使用下面的代碼再將其建構式指回Son的建構式

 Son.prototype.constructor=Son

在這里插入圖片描述

完整代碼

 /* 利用call 實作建構式的繼承*/
        function Father(name, age) {
            this.name = name
            this.age = age
        }
        Father.prototype.speak = function () {
            console.log('hello')
        }
        function Son(gender) {
            // 注釋 ①
            Father.call(this, '張三', 20)
            this.gender = gender
        }
        Son.prototype=new Father()
        // 修改Son的建構式為Son
        Son.prototype.constructor=Son
        // 像Son的原型物件中添加一個方法
        Son.prototype.run=function(){
            console.log('run')
        }
        //var f=new Father('yhb',30)
       // console.log(f)        
        var s = new Son('女')
        console.log(s)
        console.log(s.constructor)

圖解：

3.ES5新增方法

關于 ECMAScript 與 JS 的關系，以及 ES 各個版本，大家可以自行百度，小編在這里不做展開說明

ES6 是在ES5的基礎上升級，所以先學習ES5新增的特性，后面再學習ES6新增的特性

3.1陣列方法forEach遍歷陣列

此方法用來便利陣列，引數為一個函式

以后再想便利陣列就不用自己撰寫回圈了

var numbers = [1, 3, 5, 7, 9]
numbers.forEach(function (item, index, ary) {
    console.log('元素:' + item);
    console.log('索引:' + index);
    console.log('陣列本身:' + ary);
})

案例：陣列求和

var sum=0
numbers.forEach(function(item){
    sum+=item
})
console.log(sum)

3.2陣列方法filter過濾陣列

此方法有一個回傳值，用于接收所有符合過濾條件的元素，回傳值的型別為陣列

var numbers = [1, 2, 3, 4, 5, 6]
/*下面代碼從陣列numbers中篩選出所有>4的元素，然后放到新陣列result中
        注意：一定要有return 關鍵字
        */
var result = numbers.filter(function (item, index) {
    return item > 4
})
console.log(result);

輸出結果

在這里插入圖片描述

3.3陣列方法some


some 查找陣列中是否有滿足條件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(item,index,array) {
    //引數一是:陣列元素
     //引數二是:陣列元素的索引
     //引數三是:當前的陣列
     return item < 3;
  });
console.log(flag);//false回傳值是布林值,只要查找到滿足條件的一個元素就立馬終止回圈

**some()** 方法測驗陣列中是不是至少有1個元素通過了被提供的函式測驗，它回傳的是一個Boolean型別的值，

如果用一個空陣列進行測驗，在任何情況下它回傳的都是false，

語法：

arr.some(callback(element[, index[, array]])[, thisArg])

1）回傳值為布林值

2）找到滿足條件的元素，就終止回圈，不會繼續向后查找

可以利用這個函式查詢陣列中是否存在某個值

 var numbers = [1, 2, 3, 4, 5, 6]
 function checkAvailability(arr, val) {
     var res = arr.some(function (element, index) {
     	return element == val
     })
     return res
 }
 console.log(checkAvailability(numbers, 1))

3.4找水果案例

首先將資料定義在陣列中，然后便利陣列中的資料渲染到表格中，然后可以根據價格或者名稱查詢想吃的水果

定義陣列物件資料

var fruits = [
    {
        id: 001,
        title: '蘋果',
        price: 5
    },
    {
        id: 001,
        title: '蘋果',
        price: 5
    },
    {
        id: 002,
        title: '梨',
        price: 3
    },
    {
        id: 003,
        title: '香蕉',
        price: 6
    },
    {
        id: 004,
        title: '砂糖橘',
        price: 2
    }
]

使用forEach遍歷資料并渲染到頁面中

  var tbody = document.querySelector('tbody')
  fruits.forEach(function (item) {
      var tr = ` <tr>
                <td>${item.id}</td>
                <td>${item.title}</td>
                <td>${item.price}</td>
                </tr>`
      tbody.insertAdjacentHTML('beforeend',tr)
  })

根據價格篩選資料

將篩選出的資料重新渲染到表中

function setData(ary) {
            // 先洗掉以前的資料
            tbody.innerHTML = ''
            ary.forEach(function (item) {
                var tr = ` <tr>
                     <td>${item.id}</td>
                        <td>${item.title}</td>
                        <td>${item.price}</td>
                    </tr>`
                tbody.insertAdjacentHTML('beforeend', tr)
            })
        }
        // 根據價格過濾商品
        var btnPrice = document.querySelector('#btnPrice')
        var min_price = document.querySelector('#min_price')
        var max_price = document.querySelector('#max_price')
     btnPrice.addEventListener('click', function () {
            var result = fruits.filter(function (item) {
             return item.price >= min_price.value && item.price <= max_price.value
            })
         // 重新渲染資料
            setData(result)
        })

根據名稱搜索資料

   // 根據名稱搜索
   var btnTitle = document.querySelector('#btnTitle')
       var title = document.querySelector('#title')
       btnTitle.addEventListener('click', function () {
        var result = fruits.filter(function (item) {
               return item.title == title.value
})
   // 重新渲染表格
   setData(result)
   })

上面陣列中，水果名稱是唯一的

使用filter會便利每一個物件，然后比較，查詢效率相對較低

find 方法只要查詢到一個符合條件的就會停止，所以效率相對較高

 btnTitle.addEventListener('click', function () {
            // find 方法回傳的不是陣列，而是物件，所以要使用foreach，需要將
         // 回傳的物件放到陣列中
            var result = fruits.find(function (item) {
             console.log(item)
                return item.title == title.value
            })
            var arr = []
            arr.push(result)
            // 重新渲染表格
            setData(arr)
        })

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1000px;
            margin: 50px auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }

        table {
            width: 800px;
            border-collapse: collapse;
            text-align: center;
            margin-top: 20px;
        }

        th,
        td {
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">價格</label>
        <input type="text" id="min_price">
        <span>-</span>
        <input type="text" id="max_price">
        <button id="btnPrice">搜索</button>
        <label for="">名稱</label>
        <input type="text" id="title">
        <button id="btnTitle">搜索</button>
        <table>
            <thead>
                <tr>
                    <th>編號</th>
                    <th>名稱</th>
                    <th>價格</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var fruits = [
            {
                id: 001,
                title: '蘋果',
                price: 5
            },
            {
                id: 002,
                title: '桃子',
                price: 10
            },
            {
                id: 003,
                title: '梨',
                price: 3
            },
            {
                id: 004,
                title: '香蕉',
                price: 6
            },
            {
                id: 005,
                title: '砂糖橘',
                price: 2
            }
        ]
        // 獲取tbody
        var tbody = document.querySelector('tbody')
        setData(fruits)
        // 將陣列中的資料渲染到表格中
        function setData(ary) {
            // 先洗掉以前的資料
            tbody.innerHTML = ''
            ary.forEach(function (item) {
                var tr = ` <tr>
                        <td>${item.id}</td>
                        <td>${item.title}</td>
                        <td>${item.price}</td>
                    </tr>`
                tbody.insertAdjacentHTML('beforeend', tr)
            })
        }
        // 根據價格過濾商品
        var btnPrice = document.querySelector('#btnPrice')
        var min_price = document.querySelector('#min_price')
        var max_price = document.querySelector('#max_price')
        btnPrice.addEventListener('click', function () {
            var result = fruits.filter(function (item) {
                return item.price >= min_price.value && item.price <= max_price.value
            })
            // 重新渲染資料
            setData(result)
        })

        // 根據名稱搜索
        var btnTitle = document.querySelector('#btnTitle')
        var title = document.querySelector('#title')
        btnTitle.addEventListener('click', function () {
            // find 方法回傳的不是陣列，而是物件，所以要使用foreach，需要將
            // 回傳的物件放到陣列中
            var result = fruits.find(function (item) {
                console.log(item)
                return item.title == title.value
            })
            var arr = []
            arr.push(result)
            // 重新渲染表格
            setData(arr)
        })
    </script>
</body>

</html>

3.5some和forEach區別

如果查詢陣列中唯一的元素, 用some方法更合適,在some 里面遇到 return true 就是終止遍歷迭代效率更高
在forEach和filter 里面 return 不會終止迭代

3.6 trim方法去除字串兩端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除兩端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除兩端空格

3.7獲取物件的屬性名

Object.keys(物件) 獲取到當前物件中的屬性名，回傳值是一個陣列

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

3.8Object.defineProperty

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty設定或修改物件中的屬性

Object.defineProperty(物件，修改或新增的屬性名，{
		value:修改或新增的屬性的值,
		writable:true/false,//如果值為false 不允許修改這個屬性值
		enumerable: false,//enumerable 如果值為false 則不允許遍歷
        configurable: false  //configurable 如果為false 則不允許洗掉這個屬性 屬性是否可以被洗掉或是否可以再次修改特性
})

利用上面的方法，我們可以在不為文本框添加事件的同時，將文本框的值與物件中的某個屬性關聯起來

var username=document.querySelector('#username')
var data = {}
Object.defineProperty(data, "title", {
    get: function () {
    	return username.value
    },
    set: function (newValue) {
    	username.value=newValue
    },
    enumerable: true,
    configurable: true
})

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/339209.html

標籤：其他

上一篇：喜歡的女孩想看櫻花，安排！將靜態網頁部署在Coding遠端！她說棒極了~

下一篇：Git 遠程倉庫基本操作以及常用命令大全

建構式、原型、繼承原來這么簡單？來吧！深入淺出

建構式

1.建構式和原型

1.1物件的三種創建方式–復習

1.2靜態成員和實體成員

1.2.1實體成員

1.2.2靜態成員

1.3建構式的問題

1.4建構式原型prototype

1.5物件原型

1.6constructor建構式

1.7原型鏈

1.8建構式實體和原型物件三角關系

1.9原型鏈和成員的查找機制

1.10原型物件中this指向

1.11通過原型為陣列擴展內置方法

2.繼承

2.1call()

2.2子建構式繼承父建構式中的屬性

2.3借用原型物件繼承方法

3.ES5新增方法

3.1陣列方法forEach遍歷陣列

3.2陣列方法filter過濾陣列

3.3陣列方法some

3.4找水果案例

3.5some和forEach區別

3.6 trim方法去除字串兩端的空格

3.7獲取物件的屬性名

3.8Object.defineProperty