WEB前端 | JS基礎——(4)陣列、二維陣列和this
阿新 • • 發佈：2019-02-10
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>陣列</title> </head> <body> </body> <script type="text/javascript"> // 定義一個空陣列arr。 var arr = []; var arr1 = [23, 45, 55, 75]; console.log(arr); console.log(arr1); // 陣列的取值，直接是 陣列名[下標] // 注意：下標從0開始 console.log(arr1[2]); // 陣列的賦值 取到對應的元素直接賦值 arr1[2] = 88; console.log(arr1); // 陣列第二種建立方式 // 建立一個空陣列 var arr2 = new Array(); console.log(arr2); // 建立空間大小為5的陣列 var arr3 = new Array(5); console.log(arr3); // 建立內容為34, 56, 78的陣列 var arr4 = new Array(34, 56, 78); console.log(arr4); // 陣列在使用的時候不要越界 var numMin = Math.min(16, 44, 2, 56); console.log(numMin); var numMax = Math.max(16, 44, 2, 56); console.log(numMax); // 向上取整 var numCeil = Math.ceil(1.2); console.log(numCeil); // 向下取整 var numFloor = Math.floor(1.8); console.log(numFloor); // 四捨五入 var numRound = Math.round(1.5); console.log(numRound); // 0~1隨機數 var numRandom = Math.random(); console.log(numRandom); // a ~ b // var numRandom1 = Math.random() * (b - a) + a; // console.log(numRandom1); var arr5 = new Array(); console.log(arr5); // push 和 unshift 都是新增新元素，push 加在最後，unshift 加在最前面。 arr5.push(45); arr5.push(76); arr5.push(24); arr5.unshift(88); console.log(arr5); arr5.pop(); arr5.shift(); console.log(arr5); arr5 = [1, 3, 5, 7 , 9, 11]; // splice(引數1, 引數2, 可選引數1, 可選引數2) // 引數1代表 起始下標 // 引數2代表 長度(可為0) // 用法: 把所有的可選引數覆蓋引數1、引數2所表示的區域 arr5.splice(0, 3, 33, 33, 33); console.log(arr5); // sort() 按照ASICC排序 arr5.sort(); console.log(arr5); var arr6 = [99, 88, 77]; // concat 連線陣列，會產生一個新陣列，不影響原來的陣列 var arr7 = arr5.concat(arr6); console.log(arr7); // join 分隔陣列，會產生一個新陣列 var sting1 = arr7.join('fuck'); console.log(sting1); var arr8 = [1, 2, 3, 4, 5]; for(var i = 0; i < 5; i++) { console.log(arr8[i]); } // 隨機生產20個50~100之間的整數 var arr10 = new Array(20); for(var i = 0; i < 20; i++) { arr10[i] = parseInt(Math.random() * (100 - 50) + 50); } console.log(arr10); // 隨機生產20個不重複的50~100之間的整數 // 方法一 var arr11 = new Array(20); for(var i = 0; i < 20; i++) { arr11[i] = parseInt(Math.random() * (100 - 50) + 50); for(var n = 0; n < i; n++) { if(arr11[n] == arr11[i]) { i--; break; } } } arr11.sort(); console.log(arr11); // 方法二 var arr12 = new Array(20); for(var i = 0; i < 20; i++) { var suijishu = parseInt(Math.random() * (100 - 50) + 50); for(var n = 0; n < i; n++) { if(arr12[n] == suijishu) { suijishu = parseInt(Math.random() * (100 - 50) + 50); j = 0 ; } } arr12[i] = suijishu } arr12.sort(); console.log(arr12); // 方法三 var numArr = new Array(20); for (var i = 0; i < 20; i++){ var suijishu = parseInt(Math.random() * (100 - 50) + 50); var isfirst = true; for(var j = 0; j < i; j++){ if (suijishu == numArr[j]) { isfirst = false; break; } } if (isfirst) { numArr[i] = suijishu; } else { i--; } } numArr.sort(); console.log(numArr); // 氣泡排序 for (var i = 0; i < numArr.length - 1; i++){ var isYouXu = true; for(var j = 0; j < numArr.length - 1 - i; j++){ if (numArr[j] > numArr[j + 1]) { isYouXu = false; var temp = numArr[j]; numArr[j] = numArr[j + 1]; numArr[j + 1] = temp; } } if (isYouXu) { break; } } console.log(numArr); </script> </html>
二、二維陣列和this
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>二維陣列和this</title> <style type="text/css"> #reddiv { width: 400px; height: 400px; background-color: red; } #bluediv { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div id="reddiv"> <div id="bluediv"></div> </div> </body> <script type="text/javascript"> // 陣列中可以儲存不同型別的元素 var arr = [1, 2, 4, 'A']; var num = arr[3]; console.log(num); // 二維陣列： 在陣列中儲存的元素都是陣列 var arr2 = [[1, 2, 3], [4, 5, 6]]; var a = arr2[0]; console.log(a[0]); console.log(arr2[0][0]); arr2[0][2] = 33; console.log(arr2[0]); for (var i = 0; i < arr.length;i++) { console.log(arr[i]); } for (var i = 0; i < arr2.length;i++) { for (var n = 0; n < arr2[i].length;n++) { console.log(arr2[i][n]); } } // this document.getElementById('reddiv').onclick = function(){ // this代表的時和當前方法繫結的元素自身。 this.style.backgroundColor = 'gold'; console.log(this); } // 事件 // onmouseover onmouseout onclick // onmouseenter(滑鼠移入) onmouseleave(滑鼠移出) onmousemove(滑鼠移動); // onmouseover 和 onmouseout 會在滑鼠從本元素到子集元素的時候會連續執行滑鼠移出、滑鼠移入的方法。 // onmouseenter 和 onmouseleave 只會在滑鼠從移入/移出本元素的時候才會執行一次，本元素到子元素不會執行移入/移出的方法。 // onmousemove 滑鼠在元素中移動的時候會一直執行方法。 var reddiv = document.getElementById('reddiv'); reddiv.onmousemove = function(){ console.log('滑鼠進來了'); } reddiv.onmouseleave = function(){ console.log('鼠標出去了'); } </script> </html>