JS學習小結（上）
阿新 • • 發佈：2018-08-31
indexof() val scrip map 查找 。。 頁面 () 引用
學而時習之，不亦說乎，開啟JS學習新樂章~
JS是幹啥的？網頁特效，它主要是實現控制結構和樣式，是一種行為，有多重要，不言而喻吧，頁面炫酷的資本。
1. JS輸出：
1 alert("hello World!") //第一種輸出， alert 屬於 window 對象，一般省略。 2 console.log() 3 console.warn() 4 console.error()//第二種輸出，只在控制臺輸出，包含正常、警告、錯誤等信息，方便進行錯誤定位 5 document.write()//第三種輸出，文檔打印
2. 變量，就是一個容器 用來裝東西的，變量具有不同的基本數據類型，變量有局部變量和全局變量之分，具體區別主要體現在作用域上，這裏需要註意的是，寫在函數體內部，但是沒有var 聲明的變量也是全局變量：
1 var //變量申明符 2 var carName = "hello"; //單雙引是不分的哦，字符型，可通過“+”來連接，String()/.valueOf/.toString()來強制轉換 3 var carNum = 12; //數值型，可通過Number()來轉換，亦可通過內置函數parseInt()取整，parseFloat()取浮，isNaN()來判斷是否為數值 4 var car = true; // boolean , 可通過Boolean()來轉換 5 var a = new Object(); //引用型，Object包括：Int,Float,String,Function,Boolean,Array6 var timer = null; // 空類型 null 7 var test; // 聲明變量未給值 undefined，null == undefined(true)
3. JS書寫位置
1 <a href=”javascript:void(0)”></a> //行內式 2 <script type=”text/javascript”>...事件代碼...</script> //內嵌式 3 <script src="hello.js" type="text/javascript"></script> //外鏈式
4. 事件，前面說過JS是一種行為，行為就是事件， 事件三要素： 事件源，事件，事件處理程序三部分組成，通常以匿名的形式出現：
事件源.事件 = function() { 事件處理語句;} //匿名函數
1 <script> 2 // 獲取元素 3 var one = document.getElementById("one"); // 獲取第2個li 4 var two = document.getElementById("two"); // 獲取第2個li 5 var pic = document.getElementById("pic"); // pic 6 // 操作元素 7 // 事件源.事件 = function() {} 8 two.onclick = function() { 9 pic.src = "images/02.jpg"; 10 } 11 one.onclick = function() { 12 pic.src = "images/01.jpg"; 13 } 14 </script> 15 /* 16 這裏的時間不僅僅局限於noclick，也可以是ondblclick，onkeyup，onchange，onfocus，onblur ，onmouseover ，onmouseout ，onload，onunload等 17 18 */
5. 函數，函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。通常情況下，函數構建具有三種方式：
<script type="text/javascript">
// 盡量要求形參和實參相互匹配，靜態方法
function fn(a,b) {
console.log(a+b);
return 3; // 終止程序執行，不會執行return 後面的語句
}
console.log(fn(1,2));// 調用函數，並且遵循先聲明後調用的基本準則
// 動態匿名方法
var fun =new function(‘a‘,‘b‘,‘return a+b;‘);單雙引號不分哦，不交叉使用即可
// 直接量方法
var fun = function(){
console.log(1);
}
進行new 操作實現函數構建，與普通方式構建函數差距很明顯，new之後會將其看作是對象處理，必然會返回一個對象了，然後就可以更加靈活的使用構造方法以及我們熟悉好用的this。
1、函數預編譯過程 this —> window
2、全局作用域裏 this —> window
3、obj.func(); func()裏面的this指向obj)， 可以這樣理解，誰調用func，則this就指向誰
4、call/apply 可以改變函數運行時this指向，
（1）、call用法：
func.call(要改變後的this, arg1, arg2, ... );
（2）、apply用法:
func.apply(要改變後的this, [arg1, arg2, arg2]);
（3）、apply和call共同點：都是改變this指向，apply和call不同點：傳參形式不同,call是將參數一個個傳進來，而apply是將所有參數存進一個數組中，然後將該數組傳，如下demo：
function demo1() { console.log(this); } // demo1() <==> this.demo1(); <==> window.demo1() demo1(); // window // demo2 var demo2 = { retThis: function () { console.log(this); } } demo2.retThis(); // demo2 = {...} // call / apply改變this demo1.call(demo2); // demo2 = {} demo2.retThis.call(window); // window
6. 流程，流程控制語句包括：循環，跳轉，選擇以及異常處理：
<html> <body> <script type="text/javascript"> //for循環 let array1 = [‘a‘,‘b‘,‘c‘]; for (let i = 0;i < array1.length;i++){ console.log(array1[i]); // a b c } //while循環 var j= 1; while(j>0){ console.log(j); j--; } //do while循環 do{ console.log(j); j--; }while(j>0); //for in循環 var array = [1,2,3,4]; for(let index in array) { console.log(index,array[index]); }; var A = {a:1,b:2,c:3,d:"hello world"}; for(let k in A) { console.log(k,A[k]); } //跳轉包括：return; break; continue; //選擇包括if(判斷語句){。。}else{}, if(判斷語句){}else if(判斷語句){}else{} // 異常語句 try{ console.log(b); console.log("我不會輸出的，不要找了") } catch(error){ console.log("發生錯誤了") } finally { console.log("不管發生不發生錯誤，我都會執行") } console.log("我try catch後面的代碼") //選擇語句 var i = 4; switch (i){ //i表示要判斷的值 case 0: document.write("星期天") break; case 1: //case裏面都是所對應的值，每一個代碼段後都要加上一個break讓他跳出判斷 document.write("星期一") break case 2: document.write("星期二") break case 3: document.write("星期三") break; case 4: document.write("星期四") break; default: //default的意思是以上case裏的值都不是的話，執行default語句裏的代碼段 document.write("什麽都不是") } </script> </body> </html>
7. 數組，顧名思義，數據的集合，其構建及常見方法如下：
<script type="text/javascript"> //構建 var arr1 = new Array(); //創建一個空數組 var arr2 = new Array(20); // 創建一個包含20項的數組 var arr = new Array("lily","lucy","Tom"); // 創建一個包含3個字符串的數組 var arr4 = []; //創建一個空數組 var arr5 = [20]; // 創建一個包含1項的數組 var arr6 = ["lily","lucy","Tom"]; // 創建一個包含3個字符串的數組 //常規方法 //join(),將數組的元素組起一個字符串，以"-"為分隔符,可重復插入字符串 arr.join("-") //push(), 可以接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度 var count = arr.push("Jack","Sean"); console.log(count); // 5 console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"] //pop(), 數組末尾移除最後一項，減少數組的 length 值，然後返回移除的項 var item = arr.pop(); console.log(item); // Sean console.log(arr); // ["Lily", "lucy", "Tom", "Jack"] //shift(), 刪除原數組第一項，並返回刪除元素的值 var item = arr.shift(); console.log(item); // Jack console.log(arr); // ["Sean", "Lily", "lucy", "Tom"] //unshift, 將參數添加到原數組開頭，並返回數組的長度 var count = arr.unshift("Jack","Sean"); console.log(count); // 5 console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"] //sort(), 按升序排列數組項 var arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); // ["a", "b", "c", "d"] arr2 = [13, 24, 51, 3]; console.log(arr2.sort()); // [13, 24, 3, 51] console.log(arr2); // [13, 24, 3, 51](原數組被改變，字符串比較原則) //reverse(), 反轉數組項的順序 var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原數組改變) //concat(), 將參數添加到原數組中。 var arr = [1,3,5,7]; var arrCopy = arr.concat(9,[11,13]); console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // [1, 3, 5, 7](原數組未被修改) //slice(), 返回從原數組中指定開始下標到結束下標之間的項組成的新數組（切片） var arr = [1,3,5,7,9,11]; var arrCopy = arr.slice(1); var arrCopy2 = arr.slice(1,4); var arrCopy3 = arr.slice(1,-2); var arrCopy4 = arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11](原數組沒變) console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9] //splice(), 很強大的數組方法，它有很多種用法，可以實現刪除、插入和替換 var arr = [1,3,5,7,9,11]; var arrRemoved = arr.splice(0,2); console.log(arr); //[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] var arrRemoved2 = arr.splice(2,0,4); console.log(arr); // [5, 7, 4, 9, 11] console.log(arrRemoved2); // [] var arrRemoved3 = arr.splice(1,1,2,4); console.log(arr); // [5, 2, 4, 4, 9, 11] console.log(arrRemoved3); //[7] // indexOf(), 接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引,lastIndexOf(),從數組的末尾開始向前查找 var arr = [1,3,5,7,7,5,3,1]; console.log(arr.indexOf(5)); //2 console.log(arr.lastIndexOf(5)); //5 //forEach(), 對數組進行遍歷循環,對數組中的每一項運行給定函數。這個方法沒有返回值。參數都是function類型，默認有傳參，參數分別為：遍歷的數組內容；第對應的數組索引，數組本身。 var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a){ console.log(x + ‘|‘ + index + ‘|‘ + (a === arr)); }); // 輸出為： // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true //map(), 指“映射”，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組 var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(function(item){ return item*item; }); console.log(arr2); //[1, 4, 9, 16, 25] //filter(), “過濾”功能，數組中的每一項運行給定函數，返回滿足過濾條件組成的數組 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var arr2 = arr.filter(function(x, index) { return index % 3 === 0 || x >= 8; }); console.log(arr2); //[1, 4, 7, 8, 9, 10] //every(), 判斷數組中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true var arr = [1, 2, 3, 4, 5]; var arr2 = arr.every(function(x) { return x < 10; }); console.log(arr2); //true var arr3 = arr.every(function(x) { return x < 3; }); console.log(arr3); // false //some(), 判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true var arr = [1, 2, 3, 4, 5]; var arr2 = arr.some(function(x) { return x < 3; }); console.log(arr2); //true var arr3 = arr.some(function(x) { return x < 1; }); console.log(arr3); // false //reduce()和 reduceRight(),這兩個方法都會實現叠代數組的所有項，然後構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項。 var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; },10); console.log(sum); //25 <script>
JS學習小結（上）