javascript
JavaScript基础09-day11【原型对象、toString()、垃圾回收、数组、数组字面量、数组方法】
學習地址：
JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)】
目? ?錄
P65?65.尚硅谷_JS基礎_.構造函數修改?10:29
P66?66.尚硅谷_JS基礎_原型對象?20:43
原型 prototype
向原型中添加屬性
向原型中添加方法
P67?67.尚硅谷_JS基礎_原型對象?11:16
使用“in”檢查對象中是否含有某個屬性
P68?68.尚硅谷_JS基礎_toString()?11:33
對象.toString()
修改原型的toString
P69?69.尚硅谷_JS基礎_垃圾回收?09:19
垃圾回收（GC）garbage collection
P70?70.尚硅谷_JS基礎_數組簡介?24:46
對象的分類
數組（Array）
向數組中添加元素
查找數組中的元素
獲取數組長度
修改數組長度
向數組的最后一個位置添加元素
P71?71.尚硅谷_JS基礎_數組字面量?14:19
使用“字面量”創建數組
數組中的元素可以是任意的數據類型！
P72?72.尚硅谷_JS基礎_數組的四個方法?13:45
Array 對象屬性
Array 對象方法
1、push()
2、pop()
3、unshift()
4、shift()
P73?73.尚硅谷_JS基礎_數組的遍歷?13:45
小練習
P74?74.尚硅谷_JS基礎_數組練習?04:52
P75?75.尚硅谷_JS基礎_forEach?13:15
P76?76.尚硅谷_JS基礎_slice和splice?18:25
slice()
splice()
P77?77.尚硅谷_JS基礎_數組去重練習?13:34
P65?65.尚硅谷_JS基礎_.構造函數修改?10:29
創建一個Person構造函數。在Person構造函數中，為每一個對象都添加了一個sayName方法。
目前我們的方法是在構造函數內部創建的，也就是構造函數每執行一次就會創建一個新的sayName方法，也是所有實例的sayName都是唯一的。
這樣就導致了構造函數執行一次就會創建一個新的方法，執行10000次就會創建10000個新的方法，而10000個方法都是一摸一樣的。
這是完全沒有必要，完全可以使所有的對象共享同一個方法。
P66?66.尚硅谷_JS基礎_原型對象?20:43
如果寫在Person對象里面，每次new Person，都會創建sayName方法對象，浪費內存。但是如果放在外面，sayName()就屬于Window對象，調所有對象里的sayName都是調用的外部Window對象中的sayName。好處：易維護，如果兩個構造函數擁有同一個函數功能就可以單獨拿出來寫，不用每次修改功能都每個地方改一下。
將函數定義在全局作用域，污染了全局作用域的命名空間，而且定義在全局作用域中也很不安全。
原型 prototype
我們所創建的每一個函數，解析器都會向函數中添加一個屬性prototype。這個屬性對應著一個對象，這個對象就是我們所謂的原型對象。
如果函數作為普通函數調用prototype沒有任何作用，當函數以構造函數的形式調用時，它所創建的對象中都會有一個隱含的屬性，指向該構造函數的原型對象，我們可以通過__proto__來訪問該屬性。
原型對象就相當于一個公共的區域，所有同一個類的實例都可以訪問到這個原型對象，我們可以將對象中共有的內容，統一設置到原型對象中。
向原型中添加屬性
當我們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，如果有則直接使用，如果沒有則會去原型對象中尋找，如果找到則直接使用。
向原型中添加方法
以后我們創建構造函數時，可以將這些對象共有的屬性和方法，統一添加到構造函數的原型對象中。
這樣不用分別為每一個對象添加共有的屬性和方法，也不會影響到全局作用域，就可以使每個對象都具有這些屬性和方法了。
P67?67.尚硅谷_JS基礎_原型對象?11:16
使用“in”檢查對象中是否含有某個屬性
原型對象也是對象，所以它也有原型。
? ?當我們使用一個對象的屬性或方法時，會現在自身中尋找，
? ? ? 自身中如果有，則直接使用，
? ? ? 如果沒有則去原型對象中尋找，如果原型對象中有，則使用，
? ? ? 如果沒有則去原型的原型中尋找，直到找到Object對象的原型，
? ? ? Object對象的原型沒有原型，如果在Object原型中依然沒有找到，則返回undefined。
P68?68.尚硅谷_JS基礎_toString()?11:33
對象.toString()
當我們直接在頁面中打印一個對象時，事件上是輸出的對象的toString()方法的返回值。
修改原型的toString
當我們直接在頁面中打印一個對象時，實際上是輸出的對象的toString()方法的返回值。
如果我們希望在輸出對象時不輸出“[object Object]”，可以為對象添加一個toString()方法。
P69?69.尚硅谷_JS基礎_垃圾回收?09:19
垃圾回收（GC）garbage collection
垃圾回收（GC）：就像人生活的時間長了會產生垃圾一樣，程序運行過程中也會產生垃圾。
這些垃圾積攢過多以后，會導致程序運行的速度過慢，所以我們需要一個垃圾回收的機制，來處理程序運行過程中產生垃圾。
當一個對象沒有任何的變量或屬性對它進行引用，此時我們將永遠無法操作該對象，此時這種對象就是一個垃圾，這種對象過多會占用大量的內存空間，導致程序運行變慢，所以這種垃圾必須進行清理。
在JS中擁有自動的垃圾回收機制，會自動將這些垃圾對象從內存中銷毀，我們不需要也不能進行垃圾回收的操作，我們需要做的只是要將不再使用的對象設置null即可。
P70?70.尚硅谷_JS基礎_數組簡介?24:46
對象的分類
對象分為3種：
數組（Array）
數組（Array）
向數組中添加元素
查找數組中的元素
獲取數組長度
獲取數組的長度，可以使用length屬性來獲取數組的長度(元素的個數)。
語法：數組.length
- 對于連續的數組，使用length可以獲取到數組的長度（元素的個數）。
- 對于非連續的數組，使用length會獲取到數組的最大的索引+1，盡量不要創建非連續的數組。
修改數組長度
修改length：如果修改的length大于原長度，則多出部分會空出來，如果修改的length小于原長度，則多出的元素會被刪除。
向數組的最后一個位置添加元素
向數組的最后一個位置添加元素。語法：數組[數組.length] = 值;
P71?71.尚硅谷_JS基礎_數組字面量?14:19
使用“字面量”創建數組
與var arr = new Array();創建數組的方式一樣，但[]更加簡單、方便。
數組中的元素可以是任意的數據類型！
P72?72.尚硅谷_JS基礎_數組的四個方法?13:45
Array 對象屬性
Array 對象方法
1、push()
push()
- 該方法可以向數組的末尾添加一個或多個元素，并返回數組的新的長度。
- 可以將要添加的元素作為方法的參數傳遞，這樣這些元素將會自動添加到數組的末尾。
- 該方法會將數組新的長度作為返回值返回。
2、pop()
pop()：該方法可以刪除數組的最后一個元素，并將被刪除的元素作為返回值返回。
3、unshift()
unshift()
- 向數組開頭添加一個或多個元素，并返回新的數組長度。
- 向前邊插入元素以后，其他的元素索引會依次調整。
4、shift()
shift()：可以刪除數組的第一個元素，并將被刪除的元素作為返回值返回。
P73?73.尚硅谷_JS基礎_數組的遍歷?13:45
所謂的遍歷數組，就是將數組中所有的元素都取出來。
小練習
P74?74.尚硅谷_JS基礎_數組練習?04:52
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function Person(name, age, gender) {this.name = name;this.age = age;}// 修改Person原型的toStringPerson.prototype.toString = function() {return "Person[name=" + this.name + ",age=" + this.age + "]";};//創建一個Person對象var per = new Person("孫悟空", 18);var per2 = new Person("豬八戒", 28);var per3 = new Person("紅孩兒", 8);var per4 = new Person("蜘蛛精", 16);var per5 = new Person("二郎神", 38);// 將這些person對象放入到一個數組中var perArr = [per, per2, per3, per4, per5];console.log(perArr);/** 創建一個函數，可以將perArr中的滿18歲的Person提取出來，* 然后封裝到一個新的數組中并返回* arr：形參，要提取信息的數組*/function getAdult(arr) {//創建一個新的數組var newArr = [];//遍歷arr，獲取arr中Person對象for (var i = 0; i < arr.length; i++) {var p = arr[i];//判斷Person對象的age是否大于等于18if (p.age >= 18) {//如果大于等于18，則將這個對象添加到newArr中//將對象放入到新數組中newArr.push(p);}}//將新的數組返回return newArr;}var result = getAdult(perArr);console.log(result);</script></head><body></body> </html>P75?75.尚硅谷_JS基礎_forEach?13:15
一般我們都是使用for循環去遍歷數組，JS中還為我們提供了一個方法，用來遍歷數組：forEach()。
這個方法只支持IE8以上的瀏覽器，IE8及以下的瀏覽器均不支持該方法，所以如果需要兼容IE8，則不要使用forEach，還是使用for循環來遍歷。
forEach()方法需要一個函數作為參數：
- 像這種函數，由我們創建但是不由我們調用的，我們稱為回調函數。
- 數組中有幾個元素，函數就會執行幾次。每次執行時，瀏覽器會將遍歷到的元素，以實參的形式傳遞進來。我們可以來定義形參，來讀取這些內容。
- 瀏覽器會在回調函數中傳遞三個參數：【第1個參數，就是當前正在遍歷的元素；第2個參數，就是當前正在遍歷的元素的索引；第3個參數，就是正在遍歷的數組。】
P76?76.尚硅谷_JS基礎_slice和splice?18:25
slice()
slice()
? ? ?- 可以用來從數組提取指定元素
? ? ?- 該方法不會改變元素數組，而是將截取到的元素封裝到一個新數組中返回
? ? ?- 參數：
? ? ? ? ?1.截取開始的位置的索引,包含開始索引
? ? ? ? ?2.截取結束的位置的索引,不包含結束索引
? ? ? ? ? ? ?- 第二個參數可以省略不寫,此時會截取從開始索引往后的所有元素
? ? ? ? ?- 索引可以傳遞一個負值，如果傳遞一個負值，則從后往前計算
? ? ? ? ? ? ?-1 倒數第一個
? ? ? ? ? ? ?-2 倒數第二個
splice()
splice()
? ? - 可以用于刪除數組中的指定元素。
? ? - 使用splice()會影響到原數組，會將指定元素從原數組中刪除，并將被刪除的元素作為返回值返回。
? ? - 參數：
? ? ? ? 第一個，表示開始位置的索引
? ? ? ? 第二個，表示刪除的數量
? ? ? ? 第三個及以后。
? ? ? ? ? ? 可以傳遞一些新的元素，這些元素將會自動插入到開始位置索引前邊
P77?77.尚硅谷_JS基礎_數組去重練習?13:34
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//創建一個數組var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];//去除數組中重復的數字//獲取數組中的每一個元素for (var i = 0; i < arr.length; i++) {//console.log(arr[i]);/*獲取當前元素后的所有元素*/for (var j = i + 1; j < arr.length; j++) {//console.log("---->"+arr[j]);//判斷兩個元素的值是否相等if (arr[i] == arr[j]) {//如果相等則證明出現了重復的元素，則刪除j對應的元素arr.splice(j, 1);//當刪除了當前j所在的元素以后，后邊的元素會自動補位//此時將不會在比較這個元素吧，我需要在比較一次j所在位置的元素//使j自減j--;}}}console.log(arr);</script></head><body></body> </html>加油，沖沖沖~
總結
以上是生活随笔為你收集整理的JavaScript基础09-day11【原型对象、toString()、垃圾回收、数组、数组字面量、数组方法】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript基础08-day10
- 下一篇： JavaScript基础11-day13