js高级第五天
課程回顧：
? 原型鏈：由原型構成鏈狀結構，提供成員查找機制
? 繼承：組合繼承：構造函數和原型對象
? 屬性：調用父構造函數的時候用call改變this指向
? 方法：父實例對象賦值給子原型對象，最后指回構造函數本身
? 新增方法：
? 數組：forEach，filter，some
? 字符串：trim
? 語法：數組.方法名(function ( val， index， obj ) { });
ES6中的新增方法
ES6 中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括：數組方法字符串方法數組方法：
迭代(遍歷)方法：forEach()、map()、filter()、some()、every()；這些方法都是遍歷數組的forEach()
array.forEach(function(currentValue, index, arr))遍歷數組currentValue：數組當前項的值 index：數組當前項的索引 arr：數組對象本身 var arr = ['red','blue','yellow','orange'];arr.forEach(function (elm,i,arrAbc) {console.log(elm,i,arrAbc); });filter()
array.filter(function(currentValue, index, arr))filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素,主要用于篩選數組注意它直接返回一個新數組currentValue: 數組當前項的值index：數組當前項的索引arr：數組對象本身?回調函數里面添加return添加返回條件 var arr = [100,66,99,123,333,33,44,66];var reArr = arr.filter(function (elm, a, n) {// console.log(elm,a, n);return elm % 2 == 0;});console.log(reArr);some()
array.some(function(currentValue, index, arr)) 【注意：找到或者滿足條件立刻停止】some() 方法用于檢測數組中的元素是否滿足指定條件. 通俗點查找數組中是否有滿足條件的元素注意它返回值是布爾值, 如果查找到這個元素, 就返回true , 如果查找不到就返回false.如果找到第一個滿足條件的元素,則終止循環. 不在繼續查找.currentValue: 數組當前項的值?index：數組當前項的索引arr：數組對象本身 var arr = [100,200,300,400]; var re = arr.some(function (elm,i,arr) {// console.log(elm,i,arr);console.log(i);return elm >= 200;}); console.log(re);查詢商品案例
1.把數據渲染到頁面中(forEach)【insertAdjacentHTML】var tbody = document.querySelector('tbody');data.forEach(function (ele, i) {// console.log(ele);var tr = '<tr><td>' + ele.id +'</td><td>' + ele.pname + '</td><td>' + ele.price + '</td></tr>';tbody.insertAdjacentHTML('beforeend',tr);});2.根據價格顯示數據var btn = document.querySelector('.search-price');var start = document.querySelector('.start');var end = document.querySelector('.end');btn.onclick = function () {var reArr = data.filter(function (ele, i) {return start.value <= ele.price && ele.price <= end.value;});tbody.innerHTML = '';sreArr.forEach(function (ele) {var tr = '<tr><td>' + ele.id +'</td><td>' + ele.pname + '</td><td>' + ele.price + '</td></tr>';tbody.insertAdjacentHTML('beforeend',tr);});};3.根據商品名稱顯示數據 var sele = document.getElementById('sele');sele.onchange = function () {var n = [];var id = sele.value;data.some(function (ele) {if (id == 0) {n = data;return true;}else if (ele.id == id) {n.push(ele);return true;}});tbody.innerHTML = '';n.forEach(function (ele, i) {// console.log(ele);var tr = '<tr><td>' + ele.id +'</td><td>' + ele.pname + '</td><td>' + ele.price + '</td></tr>';tbody.insertAdjacentHTML('beforeend',tr);});}必做題：求這個是數組所有數的和，求數組最大值和最小值，及最大值的下標和最小值的下標，求平均值;var arr = [[123,45,66],[1234,23,45,56,67],[435,67,78,43,67,78,673,34]]字符串方法：
str.trim()trim：刪除字符串兩側的空白符<input type="text" id="txt"><input type="button" value="點擊" id="btn"><script type="text/javascript">// var str = new String('abcd');// var str = ' abc defg abcd ';// console.log( str );// console.log( str.trim() );var btn = document.getElementById('btn');var txt = document.getElementById('txt');btn.onclick = function () {if ( txt.value.trim().length > 0 ) {alert('允許提交');} else {alert('不允許提交');}}</script>函數進階
函數的定義和調用
函數聲明方式function 關鍵字(命名函數)
函數表達式(匿名函數)【自調用函數】
new Function() var fn = new Function(‘參數1’,‘參數2’…, ‘函數體’)
var fn = new Function('a','b','console.log(a,b);');fn(123,456);Function 里面參數都必須是字符串格式第三種方式執行效率低，也不方便書寫，因此較少使用所有函數都是Function 的實例(對象) 函數也屬于對象// var n = 3; // var fn = function () {}函數的調用方式
函數定義：命名函數，匿名函數
調用函數：好多種
this指向
? this指向誰，如果大家記不住，那么就可以這樣來記：
? 構造函數中的this指向的是實例對象
? 其他的都是調用者
改變函數內部this 指向
JavaScript 為我們專門提供了一些函數方法來幫我們更優雅的處理函數內部this的指向問題，常用的有bind()、call()、apply() 三種方法。
call 方法
call() 方法調用一個對象。簡單理解為調用函數的方式，但是它可以改變函數的this指向。
fun.call(thisArg, arg1, arg2, ...) thisArg：在fun 函數運行時指定的this 值arg1，arg2：傳遞的其他參數返回值就是函數的返回值，因為它就是調用函數function Father () {this} function Son () { Father.call(this,1,2) }因此當我們想改變this 指向，同時想調用這個函數的時候，可以使用call，比如繼承var obj = {name : '阿飛',fei : function () {console.log(this);}}var o = {name : '帶土'};// 函數.call(對象)// console.log( obj.fei );obj.fei.call(o);apply 方法
fun.apply(thisArg, [argsArray]):調用函數thisArg：在fun函數運行時指定的this值argsArray：傳遞的值，必須包含在數組里面返回值就是函數的返回值，因為它就是調用函數因此apply 主要跟數組有關系，比如使用Math.max() 求數組的最大值var arr = [23,45,56,23,54];var n = Math.max.apply(null,arr);console.log(n);改變this指向：fn.apply(obj,[數組])fn.call(obj,a,b,c,d)bind 方法
bind() 方法不會調用函數。但是能改變函數內部this 指向fun.bind(thisArg, arg1, arg2, ...)thisArg：在fun 函數運行時指定的this 值arg1，arg2：傳遞的其他參數返回由指定的this 值和初始化參數改造的原函數拷貝因此當我們只是想改變this 指向，并且不想調用這個函數的時候，可以使用bindvar btn = document.querySelector('input');btn.onclick = function () {this.disabled = true;window.setTimeout(function () {this.disabled = false;}.bind(btn),2000); }call apply bind 總結
fun.call(obj,arg1,arg2......); fun.apply(obj,[a,b,c]) fun.bind(obj,arg1,arg2......);相同點: 都可以改變函數內部的this指向.區別點: 1.call 和apply 會調用函數, 并且改變函數內部this指向. 2.call 和apply 傳遞的參數不一樣, call 傳遞參數aru1, aru2..形式apply 必須數組形式[arg] 3.bind 不會調用函數, 可以改變函數內部this指向主要應用場景: 1.call 經常做繼承. 2.apply 經常跟數組有關系.比如借助于數學對象實現數組最大值最小值 3.bind 不調用函數,但是還想改變this指向. 比如改變定時器內部的this指向嚴格模式
JS：兩種模式[類似于HTML版本]1、正常模式2、嚴格模式什么是嚴格模式
JavaScript 除了提供正常模式外，還提供了嚴格模式（strictmode）。ES5 的嚴格模式是采用具有限制性JavaScript 變體的一種方式，即在嚴格的條件下運行JS 代碼。
嚴格模式在IE10 以上版本的瀏覽器中才會被支持，舊版本瀏覽器中會被忽略。
嚴格模式對正常的JavaScript 語義做了一些更改：
開啟嚴格模式
開啟嚴格模式：“use strict”
<script>"use strict"</script>：腳本開啟嚴格模式 <script>function fn () {"use strict"}</script>為函數開啟嚴格模式嚴格模式可以應用到整個腳本或個別函數中。因此在使用時，我們可以將嚴格模式分為為腳本開啟嚴格模式和為函數開啟嚴格模式兩種情況。
為腳本開啟嚴格模式
為整個腳本文件開啟嚴格模式，需要在所有語句之前放一個特定語句“use strict”;（或‘use strict’;）。 <script>"use strict";console.log("這是嚴格模式。"); </script>因為"use strict"加了引號，所以老版本的瀏覽器會把它當作一行普通字符串而忽略。為函數開啟嚴格模式
要給某個函數開啟嚴格模式，需要把“use strict”; (或'use strict'; ) 聲明放在函數體所有語句之前。function fn(){"use strict";return "這是嚴格模式。";}將"use strict"放在函數體的第一行，則整個函數以"嚴格模式"運行。嚴格模式中的變化
嚴格模式對Javascript的語法和行為，都做了一些改變。
變量規定
變量申明必須加var，而且不準刪除變量在正常模式中，如果一個變量沒有聲明就賦值，默認是全局變量。嚴格模式禁止這種用法，變量都必須先用var命令聲明，然后再使用。 n = 3; 嚴禁刪除已經聲明變量。例如，delete x; 語法是錯誤的。嚴格模式下this 指向問題
嚴格模式下，普通函數this是undefined;以前在全局作用域函數中的this 指向window 對象。 嚴格模式下全局作用域中函數中的this是undefined。其他的沒有變化： 以前構造函數時不加new也可以調用,當普通函數，this 指向全局對象 嚴格模式下,如果構造函數不加new調用, this 指向的是undefined 如果給他賦值則會報錯 new 實例化的構造函數指向創建的對象實例。 定時器this 還是指向window 。 事件、對象還是指向調用者。函數變化
參數不能重名函數不能有重名的參數。函數必須聲明在頂層.新版本的JavaScript 會引入“塊級作用域”（ES6 中已引入）。為了與新版本接軌，不允許在非函數的代碼塊內聲明函數。【if，for等里面定義函數也不可以，但是現在不可以】更多嚴格模式要求參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode錯誤寫法: function fn (a,a) {console.log(a+a);} fn(1,2);JS：正常模式，嚴格模式 開啟嚴格模式："use strict";腳本開啟，函數開啟 變量嚴格，普通函數this指向undefined，函數參數不能重名......高階函數
高階函數是對其他函數進行操作的函數，它接收函數作為參數或將函數作為返回值輸出。把函數作為參數，或者把函數作為返回值的的函數，稱為高階函數此時fn就是一個高階函數
函數也是一種數據類型，同樣可以作為參數，傳遞給另外一個參數使用。最典型的就是作為回調函數。
同理函數也可以作為返回值傳遞回來
<script>function fn(callback){callback&&callback();}fn(function(){alert('hi')；}) </script><script>function fn(){return function() {}}fn(); </script>課程回顧：
? 函數定義：命名函數，匿名函數，new Function()
? 調用函數：普通函數，事件處理程序，方法…
? this指向：構造函數this指向實例對象，其他this指向調用者
? 改變this指向：call，apply，bind【fun.方法(對象,參數)】
? 嚴格模式：“use strict”;腳本開啟嚴格，函數開啟嚴格
? 高階函數：把函數當做參數或者把函數當做返回值的函數，就是高階函數
課程回顧：
? 函數定義：命名函數，匿名函數，new Function
? 函數調用：普通函數，事件處理程序，方法…
? this指向：構造函數this指向實例對象，其他的this指向當前調用者
? 改變this指向：call，apply，bind
? 嚴格模式：正常模式，嚴格模式（“use strict”），整個腳本開啟，為函數開啟
? 高階函數：把函數當做參數或者返回值的函數
閉包
變量作用域
變量根據作用域的不同分為兩種：全局變量和局部變量。函數內部可以使用全局變量。函數外部不可以使用局部變量。當函數執行完畢，本作用域內的局部變量會銷毀。什么是閉包
閉包作用：延伸變量的作用范圍，以及使用周期
閉包（closure）指有權訪問另一個函數作用域中變量的函數。【很多種解釋，都并不權威】
【子函數訪問父作用域中的局部變量】
<script>function fn1(){// fn2 就是閉包函數var num = 10;function fn2(){console.log(num); // 10}fn2()}fn1(); </script>思考：如何再函數外面訪問到函數內部的變量
function fn () { var i = 7;return function () {console.log(i);}// function fn1 () {// console.log(i);// }// fn1(); } var n = fn(); n();練習：
注冊事件練習：打印索引值
var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) {(function (index) {lis[index].onclick = function () {console.log(index);}})(i); }?
?
思考題：
閉包：有權訪問另外一個函數的局部變量的函數,作用：延長變量的使用范圍
遞歸：函數調用其本身，用return;停止函數
遞歸
什么是遞歸
遞歸：**如果一個函數在內部可以調用其本身，那么這個函數就是遞歸函數。簡單理解:函數內部自己調用自己, 這個函數就是遞歸函數函數的遞歸，遞歸函數遞歸：函數調用函數其本身**注意：**遞歸函數的作用和循環效果一樣，由于遞歸很容易發生“棧溢出”錯誤（stack overflow），所以必須要加退出條件return。練習：
利用遞歸求1~n的任意一個數的階乘//利用遞歸函數求1~n的階乘 1 * 2 * 3 * 4 * ..nfunction fn(n) {if (n == 1) { //結束條件return 1;}return n * fn(n - 1);}console.log(fn(3)); 利用遞歸求斐波那契數列// 利用遞歸函數求斐波那契數列(兔子序列) 1、1、2、3、5、8、13、21... // 用戶輸入一個數字 n 就可以求出 這個數字對應的兔子序列值 // 我們只需要知道用戶輸入的n 的前面兩項(n-1 n-2)就可以計算出n 對應的序列值 function fb(n) {if (n === 1 || n === 2) {return 1;}return fb(n - 1) + fb(n - 2); } console.log(fb(3));思考題羊村：50人家，每戶一只羊每戶只能看別人家的羊有木有病每戶只能殺自己家的羊第一天，第二天 ,第三天，砰砰砰幾聲槍響，問殺了幾只羊 利用遞歸遍歷數據var data = [{id : 1,name : '家電'},{id : 2,name : '服飾'}];var data = [{id: 1,name: '家電',goods: [{id: 11,gname: '冰箱',goods: [{id: 111,gname: '海爾'}, {id: 112,gname: '美的'},]}, {id: 12,gname: '洗衣機'}]}, {id: 2,name: '服飾' }]; //1.利用 forEach 去遍歷里面的每一個對象function getID(json, id) {var o = {};json.forEach(function(item) {// console.log(item); // 2個數組元素if (item.id == id) {// console.log(item);o = item;// 2. 我們想要得里層的數據 11 12 可以利用遞歸函數// 里面應該有goods這個數組并且數組的長度不為 0 } else if (item.goods && item.goods.length > 0) {o = getID(item.goods, id);}});return o; }深拷貝和淺拷貝
? 拷貝不能直接賦值，對象賦值的是地址
var obj = {name : '張三豐',age : 22}; var newObj = obj; console.log(newObj);淺拷貝：
只拷貝最外面一層
var obj = {name : '張三豐',age : 22};var newObj = {};for (key in obj) {newObj[key] = obj[key];}console.log(newObj);es6：新方法Object.assign(target, sources);console.log(newObj);深拷貝
<script type="text/javascript">var obj = {name : '張三豐',age : 22,color : ['red','blue','yellow'],message : {sex : '男',score : 99}}var newObj = {};// 定義一個函數完成function kaobei (newObj, obj) {// newObj新的對象// obj就是有內存的對象for (key in obj) {// newObj[key] = obj[key];if (obj[key] instanceof Array) { // obj[key]是否是數組//切記數組與對象的判斷時，先判斷數組結構，因為萬物皆對象，會與下面的對象判斷出現錯亂// 數組一定是Array的實例對象// 繼續吧數組遍歷newObj[key] = [];//利用遞歸作用調用自己的方式，達到效果kaobei(newObj[key], obj[key]);} else if (obj[key] instanceof Object) {// obj[key]是否是是對象// 繼續遍歷這個對象newObj[key] = {};kaobei(newObj[key], obj[key]);} else {newObj[key] = obj[key];}}}kaobei(newObj, obj);obj.message.sex = '女';console.log( obj );console.log( newObj );// console.log( typeof [12,3] );</script>課程回顧：
? 閉包：有權訪問另外一個函數的局部變量的函數，作用：延伸變量使用范圍
function () {var n = 3;return function () {console.log(n);}}? 遞歸：函數調用其本身
function fn () {fn(); }淺拷貝和深拷貝?
console.log(newObj);es6：新方法
Object.assign(target, sources);
console.log(newObj);
### 深拷貝var obj = {
name : ‘1張三豐’,
age : 22,
messige : {
sex : ‘男’,
score : 16
},
color : [‘red’,‘purple’,‘qing’]
}
var newObj = {};
function kaobei (newObj,obj) {for (key in obj) {if (obj[key] instanceof Array) {newObj[key] = [];kaobei(newObj[key],obj[key]);} else if (obj[key] instanceof Object) {newObj[key] = {};kaobei(newObj[key],obj[key])} else {newObj[key] = obj[key];}}}obj.messige.sex = 99;kaobei(newObj,obj);console.log(newObj); 課程回顧：? 閉包：有權訪問另外一個函數的局部變量的函數，作用：延伸變量使用范圍 function () {var n = 3;return function () {console.log(n);} } ? 遞歸：函數調用其本身function fn () {
fn();
}
淺拷貝和深拷貝
?總結
