百度前端學院第17到18天和第16天的作業
- 2019 年 10 月 19 日
- 筆記
終於學JavaScript了!
數組的相關參數
數組shift
刪除第一個元素,pop
刪除最後一個元素,返回的都是刪除的元素,unshift
在開頭增加一個元素,push
在結尾增加元素,splice
用於刪除和修改,slice
用於切片.
***
數據類型轉換
一元的 + 運算符可用於把變數轉換為數字:如果無法轉換變數,則仍會成為數字,但是值為 NaN(Not a number):
constructor
"Bill".constructor // 返回 "function String() { [native code] }" (3.14).constructor // 返回 "function Number() { [native code] }" false.constructor // 返回 "function Boolean() { [native code] }" [1,2,3,4].constructor // 返回 "function Array() { [native code] }" {name:'Bill', age:62}.constructor // 返回" function Object() { [native code] }" new Date().constructor // 返回 "function Date() { [native code] }" function () {}.constructor // 返回 "function Function(){ [native code] }"
可以檢查對象是否是數組函數:
function isArray(myArray) { return myArray.constructor === Array; }
可以在文本字元串中使用反斜杠對程式碼行進行換行。
const
關鍵字用來聲明 JavaScript中的常量(與變數相對,不可修改,但同樣是用於存儲資訊的"容器"。),常量的值不能通過重新賦值來改變,並且不能重新聲明。
就算變數定義的是數組格式,
typeof
返回的數據類型還是object
:
數組和對象都是object
if for switch while
if
switch
如果 default
不是 switch
程式碼塊中最後一個case
,請記得用 break
結束默認case
。
for
for (語句 1; 語句 2; 語句 3/*第三個語句是不需要;的*/) { 要執行的程式碼塊 }
語句 1 在循環(程式碼塊)開始之前執行。
語句 2 定義運行循環(程式碼塊)的條件。
語句 3 會在循環(程式碼塊)每次被執行後執行。
通常,您會使用語句 1 來初始化循環中所使用的的變數(i = 0)。
但情況並不總是這樣,JavaScript 不會在意。語句 1 是可選的。
您可以在語句 1 中初始化多個值(由逗號分隔):
for循環的語句1可以有多個,用,分割
for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + "<br>"; }
for-in 循環遍歷的是對象的屬性,而不是數組的索引。因此, for-in 遍歷的對象便不局限於數組,還可以遍歷對象。
語句1和語句3都是可以省略的,語句2也是可選的。
正則表達式
// constructor轉換 c="1111"; a=c.constructor===Array; console.log(a); // false // 使用search返回地址 var a="HELLO world"; b=a.search("wo"); console.log(b); // 6 // 使用replace用於修改 b=a.replace("hello","你好"); console.log(b); b = a.replace(/hello/i,"nihao"); console.log(b); // 返回nihao world // text用來搜索字元串返回true或者別的。 c=/e/i.test("hello world"); console.log(c); // "hello world"裡面有e所以返回true; console.log(typeof(true)); // exec它通過指定的模式(pattern)搜索字元串,並返回已找到的文本。如果未找到匹配,則返回 null。 console.log(/e/i.exec("hllo woefr")); // 返回e console.log(typeof(/e/i.exec("hellofregt"))); // 返回object
異常
function jj(){ var jieguo=document.getElementById("jieguo"); jieguo.innerHTML="nihao"; var input=document.getElementById("input").value; try{ if(isNaN(input)) throw "不是數字"; if(input=="") throw "是空的"; input=Number(input); if(input<5) throw "太小"; if(input>10) throw "太大"; } catch(err){ jieguo.innerHTML="輸入:"+err; } finally{ document.getElementById("input").value=""; } }
作業程式碼1 實現加減乘除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> <input id="first-number" type="number" value="0" placeholder="第一個數字"> <input id="second-number" type="number" value="0" placeholder="第二個數字"> <button id="add-btn" onclick="jia()">加</button> <button id="minus-btn" onclick="jian()">減</button> <button id="times-btn" onclick="chen()">乘</button> <button id="divide-btn" onclick="chu()">除</button> <p id="result">運算結果</p> <script> function jia(){ try{ one=document.getElementById("first-number").value; two=document.getElementById("second-number").value; // if(isNaN(one)) throw "不是數字"; // if(isNaN(two)) throw "不是數字"; console.log("原始"+typeof(one)+one); one=parseFloat(one); two=parseFloat(two); if(isNaN(one)) throw "不是數字"; if(isNaN(two)) throw "不是數字"; console.log("結果"+typeof(one)+one) result=one+two; document.getElementById("result").innerHTML="運算結果:"+result; } catch(err){ console.log("輸入"+err); } } function jian(){ one=document.getElementById("first-number").value; two=document.getElementById("second-number").value; console.log("原始"+typeof(one)+one); one=parseFloat(one); two=parseFloat(two); console.log("結果"+typeof(one)+one) result=one-two; document.getElementById("result").innerHTML="運算結果:"+result; } function chen(){ one=document.getElementById("first-number").value; two=document.getElementById("second-number").value; console.log("原始"+typeof(one)+one); one=parseFloat(one); two=parseFloat(two); console.log("結果"+typeof(one)+one) result=one*two; document.getElementById("result").innerHTML="運算結果:"+result; } function chu(){ one=document.getElementById("first-number").value; two=document.getElementById("second-number").value; console.log("原始"+typeof(one)+one); one=parseFloat(one); two=parseFloat(two); console.log("結果"+typeof(one)+one) result=one/two; document.getElementById("result").innerHTML="運算結果:"+result; } </script> </body> </html>
作業程式碼2 實現轉換2進位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> <style> input{ width: 200px; } </style> </head> <body> <input id="dec-number" type="number" placeholder="輸入一個十進位非負整數"> <input id="bin-bit" type="number" placeholder="輸入轉化後二進位數字位數"> <button id="trans-btn" onclick="jj()">轉化為二進位</button> <p id="result">運算結果</p> <script> function dec2bin(decNumber) { // 在這裡實現你的轉化方法,注意需要判斷輸入必須為一個非負整數 try{ console.log(decNumber); if (decNumber<=0||decNumber.constructor!=Number) throw "輸入必須為一個非負整數"; var z=decNumber; var a="" for(var i=0;;i++){ y=z%2; a=String(y)+a; if(z==1){ break; } z=parseInt(z/2); } a=Number(a); return a; } catch(err){ document.getElementById("result").innerHTML=err; } } // console.log(typeof(c)) // console.log(c) // 實現黨點擊轉化按鈕時,將輸入的十進位數字轉化為二進位,並顯示在result的p標籤內 // Some codeing function jj(){ var c=Number(document.getElementById("dec-number").value); d=dec2bin(c); // d=new Number(d); weishu=document.getElementById("bin-bit").value; weishu=Number(weishu); long=String(d).length console.log(long); console.log(weishu); if(weishu>=long){ x=weishu-long; for(var i=0;i<x;i++){ d="0"+String(d); // d=Number(d); } }else{ d="位數過小,請重新輸入,最小位數為:"+long; console.log(typeof(d)); } document.getElementById("result").innerHTML=d; } </script> </body> </html>
加減乘除預覽
自己打的一些東西
var c=12; var day console.log(typeof(c)) if (c!="12"){ console.log("yes") }else if (c=='12'){ console.log("完全相等") } else{ console.log("no") } c= new Date() console.log(new Date().getDay()) switch(new Date().getDay()){ // case 0: // day ="星期天"; // break; // case 2: // day ="星期2"; // break; // case 3: // day = "星期3"; // break; // default: // day="未設置"; // // break; case 0: day = "星期天"; break; case 1: day = "星期一"; break; case 2: day = "星期二"; break; case 3: day = "星期三"; break; } console.log("今天是"+day); switch (new Date().getDay()) { case 0: day = "星期天"; break; case 1: day = "星期一"; break; case 2: day = "星期二"; break; case 3: day = "星期三"; break; // case 4: // day = "星期四"; // break; // case 5: // day = "星期五"; // break; // case 6: // day = "星期六"; } console.log("今天是"+day); var c=["html","css","python","java"] ,d="",i; for(i=0;i<c.length;i++){ d+=c[i]+"t"; } console.log(d); var text="123"; for(i=0;i<c.length;i++){ text+=c[i]+"n"; } console.log(text) var x; for (x in c){ console.log("star") console.log(c[x]); } function zixing(){ var b=1; for(i=0,c=1;i<100;i++){ // console.log("typeof(c)= "+typeof(c)); // console.log("c="+c); b=1+i; document.write(b); document.write("<br>"); // console.log(typeof(b)); } } var i=null; i=0; while (i<10){ i++; console.log(i) if(i===3){ break; } } var i=null; i=0; do{ console.log(i); i++; if(i===3){ console.log("hello"); // continue; break; } console.log("執行完畢") } while(i<10); console.log("stt") console.log(i); i=0; var list=["hello","world","welcome","to","china"] biaoqian:{ console.log(list[i]+"n"); console.log(list[3]+"n"); i++; console.log(list[i]+"n"); break biaoqian; console.log("after break"); } console.log("111".constructor) // var a="111"; // document.getElementById("id").innerHTML=lz(a); // function lz(sh){ // return sh.constructor === String; // } var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("qq").innerHTML = isArray(fruits); function isArray(myArray) { return myArray.constructor === Array; } var d=["11","123",["12",'1']]; console.log(d.length); // c=d.join("*") d.pop(); d.push("增加"); console.log(d); d.shift(); console.log(d); d=null; d=["hello","world","nihao"]; c=d.shift(); console.log(c+"n"+d); c=d.unshift(["11","11"]); console.log(c+"n"+d); console.log(d[0]); // 通過splice刪除或增加元素; d.splice(0,1,"xin"); console.log(d); // concat用來鏈接元素 dd=["新","元","素"]; console.log(d.concat(dd)); c="111"; console.log(c.length); // slice()用於切出。 e=dd.slice(1,2); console.log(e); var b= new Date(); console.log(b); console.log("11"); console.log(typeof(b)); bb=b.toDateString(); console.log(bb); console.log(typeof(bb)); b=b.getDate(); console.log(b); console.log(typeof(b)); // constructor轉換 c="1111"; a=c.constructor===Array; console.log(a); // false // 使用search返回地址 var a="HELLO world"; b=a.search("wo"); console.log(b); // 6 // 使用replace用於修改 b=a.replace("hello","你好"); console.log(b); b = a.replace(/hello/i,"nihao"); console.log(b); // 返回nihao world // text用來搜索字元串返回true或者別的。 c=/e/i.test("hello world"); console.log(c); // "hello world"裡面有e所以返回true; console.log(typeof(true)); // exec它通過指定的模式(pattern)搜索字元串,並返回已找到的文本。如果未找到匹配,則返回 null。 console.log(/e/i.exec("hllo woefr")); // 返回e console.log(typeof(/e/i.exec("hellofregt"))); // 返回object function jj(){ var jieguo=document.getElementById("jieguo"); jieguo.innerHTML="nihao"; var input=document.getElementById("input").value; try{ if(isNaN(input)) throw "不是數字"; if(input=="") throw "是空的"; input=Number(input); if(input<5) throw "太小"; if(input>10) throw "太大"; } catch(err){ jieguo.innerHTML="輸入:"+err; } finally{ document.getElementById("input").value=""; } }