您好,登錄后才能下訂單哦!
這篇文章主要為大家分析了Python全棧中的JS對象是什么的相關(guān)知識點(diǎn),內(nèi)容詳細(xì)易懂,操作細(xì)節(jié)合理,具有一定參考價(jià)值。如果感興趣的話,不妨跟著跟隨小編一起來看看,下面跟著小編一起深入學(xué)習(xí)“Python全棧中的JS對象是什么”的知識吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>object對象</title> </head> <body> <script> // 1.定義對象方法一 var obj = new Object(); console.log(obj , typeof(obj)) obj.name = "孫堅(jiān)"; obj.age = 18; obj.weight = "200斤"; obj.eat = function(){ alert("我會吃竹子"); } console.log(obj.name) // obj.eat(); //2.定義對象方法二 /* 對象中的成員不要使用單引號,在特殊場景中,比如json格式字符串的轉(zhuǎn)換中會報(bào)錯(cuò); */ var obj = { name:"張三", "age" : 20, sex : "男性", drink : function(something){ console.log("我會喝牛欄山",something); } } //調(diào)用方式一 console.log(obj.sex) obj.drink("老白干") //調(diào)用方式二 console.log(obj["age"]) obj["drink"](1) // 注意點(diǎn) var str = "name" console.log(obj.str , "<==========================>") //error console.log(obj.name) console.log(obj[str]) // obj["name"] // eval 可以把字符串當(dāng)成代碼執(zhí)行 eval("console.log(333)") //3.定義對象方法三 /* 類比python中定義類的寫法 , this等價(jià)于self */ function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; this.func = function(){ console.log("我是func"); return this.sex; } } var obj1 = new Person("劉一風(fēng)",30,"男性"); var obj2 = new Person("張三風(fēng)",90,"女性"); console.log(obj1.name); var res = obj1.func(); console.log(res); console.log(obj2.name) var res = obj2.func(); console.log(res); //4.遍歷對象 for(var i in obj1){ console.log(i) } //5. with(對象) 語法可以直接獲取對象成員的值 with(obj1){ console.log(name); console.log(sex); console.log(age); res = func(); console.log(res); } console.log("<===================================>") //將4和5結(jié)合,遍歷對象中的數(shù)據(jù); for(var i in obj1){ //console.log(i , typeof(i)) // name age sex func ... string with(obj1){ console.log(eval(i)) } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>json對象</title> </head> <body> <script> var data = { 'name':"文東", age:20, "sleep":function(){ alert("文東一天睡23小時(shí),還有一個(gè)小時(shí)上廁所."); } } // js對象 => json格式的字符串 var res = JSON.stringify(data); console.log(res , typeof(res)); // {"name":"文東","age":20} // json格式的字符串 => js對象 res = '{"name":"東東","age":30}'; // success // res = "{'name':90,'age':40}"; error 引號必須是雙引號 var res2 = JSON.parse(res); console.log(res2,typeof(res2)); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串對象的相關(guān)方法</title> </head> <body> <script> var string = "to be or not to be"; //獲取字符串長度 length var res = string.length var res = string[-1] console.log(res) //1.清除兩側(cè)的空白 trim [ python的strip ] var res = string.trim() console.log(string) console.log(res) //2.獲取首次出現(xiàn)的位置 indexOf [ python的find ] /*找不到返回-1*/ var string = "to be or not to be"; var res = string.indexOf("z") console.log(res) //3/最后一次出現(xiàn)的位置 lastIndexOf /*找不到返回-1*/ var res = string.lastIndexOf("zzz") console.log(res); //4.連接字符串 concat [ python的 os.path.join + ] var res = string.concat("d:\\","python32\\","day42"); console.log(res); //5.截取字符串 slice /* string.slice(開始值,結(jié)束值) 字符串的切片 留頭舍尾 [支持逆向下標(biāo)]*/ var string = "11122233e or not to be"; var res = string.slice(1,7); var res = string.slice(-5,-1); // to b // var res = string.slice(-5,-10); //截取不到返回空 console.log(res,"<==1==>") //6.截取字符串 substr /* string.substr(開始值,截取幾個(gè)) */ var string = "11122233e or not to be"; var res = string.substr(3,4) console.log(res,"<==2==>") //7.拆分字符串 split [ python的 split ] var string = "11122233e or not to be"; var res = string.split(" ") console.log(res,"<==3==>") //8.大小寫 toUpperCase toLowerCase var string = "11122233e Or noT tO be"; res = string.toUpperCase(); res = string.toLowerCase(); console.log(res,"<==4==>") //9.search 匹配第一次找到的索引位置,找不到返回-1 var string = "aaabbb oldaoy ccc" var res = string.search(/oldboy/) console.log(res,"<==5==>") //10.match 返回匹配的數(shù)據(jù) /* /正則表達(dá)式/修飾符 g:全局匹配 i:不區(qū)分大小寫 m:多行匹配 */ var string = "我的電話是 : 13838384388 你的電話是: 13854381438" var res = string.match(/\d{11}/); // 匹配一個(gè) var res = string.match(/\d{11}/g); // 匹配多個(gè),(需要修飾符加上g) console.log(res) console.log(res[0]) console.log(res[1]) //11.字符串替換 replace /* replace默認(rèn)只替換一次 */ var string = "to be or not to be"; var res = string.replace("to","two") console.log(res,"<==6==>") // 方法一: function myreplace(string,a,b){ /* 找最后一個(gè)to,如果找不到返回-1 如果能找到就不停的進(jìn)行替換,直到-1為止,循環(huán)終止; */ while(string.lastIndexOf(a) != -1){ console.log(1) string = string.replace(a,b); } return string; } var string = "to be or not to be"; var res = myreplace(string,"to","two") console.log(res) // two be or not two be // 方法二 var string = "to be or not to be"; var res = string.replace(/to/g,"two"); console.log(res) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>數(shù)組對象的相關(guān)方法</title> </head> <body> <script> // 1.定義一個(gè)數(shù)組 var arr = Array(); var arr = Array(10,11,12); var arr = [15,16,17] console.log(arr , typeof(arr)) // ### 1.增 var arr = []; arr[0] = 10; arr[1] = 11; arr[2] = 12; // js特征:允許在一個(gè)臨時(shí)的索引值上插入數(shù)據(jù); ok arr[10] = 50; console.log(arr) console.log(arr[5]) // (1)push 從數(shù)組的最后插入元素 相當(dāng)于python的append var arr = []; var res = arr.push(111); var res = arr.push(222); var res = arr.push(333); console.log(res,arr) // (2)unshift 從數(shù)組的前面插入元素 相當(dāng)于python的insert var arr = [100,101]; var res = arr.unshift(1); var res = arr.unshift(333); console.log(res , arr); // (3)concat 迭代追加數(shù)據(jù) 相當(dāng)于python的extend var arr1 = [1,2,3] var arr2 = ["你好","我好","她也好"] var res = arr1.concat(arr2) console.log(res, typeof(res)); // ###2刪 // (1) delete 刪除 /* 把值刪掉了,原位置用空來取代,返回undifined */ var arr = [1, 2, 3, "你好", "我好", "她也好"]; delete arr[1]; console.log(arr); console.log(arr[1]) // (2)pop 從后面刪除; var arr = [1, 2, 3, "你好", "我好", "她也好"]; var res = arr.pop(); console.log(res ,arr); // (3)shift 從前面刪除 var arr = [1, 2, 3, "你好", "我好", "她也好"]; var res = arr.shift() console.log(res , arr) // ### 特別splice 從指定位置往后進(jìn)行刪除或者添加 /* arr.splice(從第幾個(gè)位置開始,刪除幾個(gè),[可選的是添加的元素]) */ var arr = [1, 2, 3, "你好", "我好", "她也好"]; // 從第二個(gè)2位置開始,刪除2個(gè) var res = arr.splice(2,2) console.log(res , arr) // 從第二個(gè)2位置開始,刪除0個(gè),添加,"hello","world" var arr = [1, 2, 3, "你好", "我好", "她也好"]; var res = arr.splice(2,0,"hello","world") console.log(res , arr) // ###3改查 var arr = [1, 2, 3, "你好", "我好", "她也好"]; //修改元素 arr[3] = "你不好"; //獲取元素 console.log(arr[3]); console.log(arr); // ###4 其他方法 // 拼接字符串 join /* split 和 join 是一對;*/ var arr = ["you","can","you","up"]; var res = arr.join("#") console.log(res) // 數(shù)組元素反轉(zhuǎn) reverse var arr = [100,200,3,150]; var res = arr.reverse(); console.log(res); // 截取數(shù)組的一部分 slice /* arr.slice(開始值,結(jié)束值) 數(shù)組的切片 留頭舍尾 [支持逆向下標(biāo)]*/ var arr = ["宋健","何旭彤","劉利偉","高雪峰","戈隆","王致和","馬生平"] var res = arr.slice(2) // var res = arr.slice(2,4) var res = arr.slice(-3,-1) console.log(res); // 排序 默認(rèn)升序 sort var arr = [1,2,3,4,9,22,21]; var arr = ["1","2","3","4","9","22","21"]; var res = arr.sort() console.log(res) var arr = [100,1,2,3,4,9,22,21]; // sorted 里面的參數(shù)是一個(gè)函數(shù),通過函數(shù)進(jìn)行升序或者降序排序; /* return 1代表交換位置,如果return -1 代表不交換位置 */ var res = arr.sort(function(a,b){ if(a>b){ return -1; }else{ return 1; } }); console.log(res) </script> <!-- python : 冒泡排序 nums = [1,22,3,2,4,9,21]; def bubble_sort(nums): for i in range(len(nums) - 1): # 這個(gè)循環(huán)負(fù)責(zé)設(shè)置冒泡排序進(jìn)行的次數(shù) for j in range(len(nums) - i - 1): # j為列表下標(biāo) if nums[j] > nums[j + 1]: nums[j], nums[j + 1] = nums[j + 1], nums[j] break; return nums res = bubble_sort(nums) print(res) --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>數(shù)學(xué)對象中的相關(guān)方法</title> </head> <body> <script> //四舍五入round var res = Math.round(3.5) var res = Math.round(2.5) var res = Math.round(2.31) console.log(res) //最大值 max var res = Math.max(1,2,3,4,34343); //最小值 min var res = Math.min(1,2,3,4,34343); //絕對值 abs var res = Math.abs(-90); console.log(res) //向下取整 floor 地板 var res = Math.floor(3.001) //向上取整 ceil 天花板 var res = Math.ceil(3.990) //冪運(yùn)算 pow var res = Math.pow(2,3) //開方運(yùn)算 sqrt var res = Math.sqrt(9) console.log(res) // ### 隨機(jī)值推導(dǎo)公式 //獲取從0到1隨機(jī)值 0<x<1 var res = Math.random() console.log(res) //獲取1~10的隨機(jī)值 1 <= x <= 10 var res = Math.ceil(Math.random() * 10 ) console.log(res) // 1.獲取從 m 到 n 的隨機(jī)值 5,14 m=5 , n=14 // 1 <= x <= 10 => 1+4 <= x <= 10+4 < 5 <= x <= 14 var res = Math.ceil(Math.random() * 10 ) + 4 // m = 5 , n = 14 // 2.拆解數(shù)字,把對應(yīng)的m和n進(jìn)行替換; var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1) // 3.推出最后結(jié)果 var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1) // 4.封裝函數(shù):終極版:隨機(jī)值; function randrange(m,n){ return Math.ceil(Math.random() * (n-m+1) ) + (m - 1); } </script> </body> </html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM對象 </title></head><body> <script> /*### BOMjs BOM對象 : 針對于瀏覽器的控制 browser object model js 中最大的對象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對象中的成員; */ console.log(window) // 1.彈出警告框 // window.alert('你好') // 2.確認(rèn)彈窗 // var res = window.confirm("確認(rèn)彈窗") // console.log(res); // true / false // 3.等待輸入彈窗 // var res = window.prompt("請輸入您的銀行密碼:") // console.log(res); // 4.關(guān)閉瀏覽器窗口 // window.close(); // innerHeight innerWidth 獲取瀏覽器窗口內(nèi)部的寬和高 console.log(`瀏覽器窗口內(nèi)部的寬度${window.innerWidth}`) console.log(`瀏覽器窗口內(nèi)部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在當(dāng)前頁面跳轉(zhuǎn) // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁面跳轉(zhuǎn) // ###定時(shí)器 /* # 定時(shí)器種類(兩種):基于單線程的異步并發(fā)程序; window.setInterval(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行多次任務(wù) window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行一次任務(wù) window.clearInterval(id號) // 清除定時(shí)器 setInterval window.clearTimeout(id號) // 清除定時(shí)器 setTimeout */ var num = 1 function func(){ console.log(`我執(zhí)行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1,"id1") console.log(id2,"id2") console.log("我執(zhí)行完了....") window.clearInterval(id1) </script> </body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM對象 </title> </head> <body> <script> /* ### BOM js BOM對象 : 針對于瀏覽器的控制 browser object model js 中最大的對象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對象中的成員; */ console.log(window) // 1.彈出警告框 // window.alert('你好') // 2.確認(rèn)彈窗 // var res = window.confirm("確認(rèn)彈窗") // console.log(res); // true / false // 3.等待輸入彈窗 // var res = window.prompt("請輸入您的銀行密碼:") // console.log(res); // 4.關(guān)閉瀏覽器窗口 // window.close(); // innerHeight innerWidth 獲取瀏覽器窗口內(nèi)部的寬和高 console.log(`瀏覽器窗口內(nèi)部的寬度${window.innerWidth}`) console.log(`瀏覽器窗口內(nèi)部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在當(dāng)前頁面跳轉(zhuǎn) // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁面跳轉(zhuǎn) // ###定時(shí)器 /* # 定時(shí)器種類(兩種):基于單線程的異步并發(fā)程序; window.setInterval(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行多次任務(wù) window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行一次任務(wù) window.clearInterval(id號) // 清除定時(shí)器 setInterval window.clearTimeout(id號) // 清除定時(shí)器 setTimeout */ var num = 1 function func(){ console.log(`我執(zhí)行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1,"id1") console.log(id2,"id2") console.log("我執(zhí)行完了....") window.clearInterval(id1) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>獲取年月日時(shí)分秒</title> <style> #clock { width:500px; height:50px; border:solid 1px red; border-radius: 25px; text-align: center; line-height: 50px; background-color: chartreuse; color:red; } </style> </head> <body> <div id="clock"> </div> <script> var obj = document.getElementById("clock"); console.log(obj) function func(){ var d = new Date(); console.log(d); // 獲取年份 var year = d.getFullYear() // 獲取月份 月份范圍 0 ~ 11 0代表1月份 var month = d.getMonth() // 獲取日期 var date = d.getDate() // 獲取小時(shí) var hour = d.getHours() // 獲取分鐘 var minutes = d.getMinutes() // 獲取秒數(shù) var seconds = d.getSeconds() strvar= `現(xiàn)在的時(shí)間是: ${year}年-${month+1}月-${date}日 ${hour}:${minutes}:${seconds}`; console.log(strvar); obj.innerHTML = strvar console.log(minutes, typeof(minutes)); // 清除定時(shí)器的效果 if(minutes == 8){ clearInterval(id); } } var id = window.setInterval(func,1000) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM模型中 Navigator 對象 </title> </head> <body> <script> console.log(navigator); console.log(navigator.platform) // 判斷是pc端還是移動端 console.log(navigator.userAgent) // 在爬蟲程序中,可以偽造成瀏覽器進(jìn)行數(shù)據(jù)爬取,繞開服務(wù)端的反爬機(jī)制; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="func1()">查看歷史對象</button> <button onclick="func2()">跳轉(zhuǎn)到上一頁</button> <button onclick="func3()">跳轉(zhuǎn)到下一頁</button> <button onclick="func4()">當(dāng)前頁面刷新</button> <script> function func1(){ console.log(history); } function func2(){ history.go(-1); } function func3(){ // history.go(1); history.go(2); } function func4(){ history.go(0); } </script> </body> </html>
location作用: 負(fù)責(zé)刷新頁面,跳轉(zhuǎn)頁面用的,可以獲取地址欄上面的參數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM對象 location</title> </head> <body> <button onclick="func1()">查看location對象</button> <button onclick="func2()">跳轉(zhuǎn)其他頁面</button> <button onclick="func3()">刷新頁面</button> <button onclick="func4()">過一秒在刷新頁面</button> <script> function func1(){ /* 鏈接地址: http://ip + 端口號 + 路徑 + 參數(shù) + 錨點(diǎn) */ console.log(location); console.log(`協(xié)議:${location.protocol}`); console.log(`ip端口號:${location.host}`); console.log(`端口號:${location.port}`); console.log(`路徑:${location.pathname}`); console.log(`獲取錨點(diǎn):${location.hash}`); console.log(`獲取地址欄參數(shù):${location.search}`); console.log(`完全地址:${location.href}`) } //跳轉(zhuǎn)頁面 function func2(){ // location.href = "http://www.baidu.com";方法一 location.assign("http://www.jd.com"); } //刷新頁面 function func3(){ location.reload(); } // 過一秒在刷新頁面 function func4(){ setTimeout(func3,1000); console.log("我執(zhí)行了...") } // 每過一秒刷新一下頁面 /* 等待所有頁面圖片文字全部加載完畢之后,再去執(zhí)行對應(yīng)的代碼 */ window.onload = function(){ func4() } </script> </body> </html>
js三大對象 1. 本地對象:js語法 2. bom對象:瀏覽器相關(guān)的成員(針對于瀏覽器的控制)brower object model 3. dom文檔對象:關(guān)于html文件節(jié)點(diǎn)相關(guān)的數(shù)據(jù)、相關(guān)的值(針對于html的控制) document object model js是單線程的異步程序 定時(shí)器是單線程的異步程序(例子)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic').getElementsByTagName("li"), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定義并調(diào)用自動播放函數(shù) timer = setInterval(autoPlay, 2000); // 鼠標(biāo)劃過整個(gè)容器時(shí)停止自動播放 wrap.onmouseover = function () { clearInterval(timer); } // 鼠標(biāo)離開整個(gè)容器時(shí)繼續(xù)播放至下一張 wrap.onmouseout = function () { timer = setInterval(autoPlay, 2000); } // 遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過切換至對應(yīng)的圖片 for (var i = 0; i < list.length; i++) { list[i].onmouseover = function () { clearInterval(timer); index = this.innerText - 1; changePic(index); }; }; function autoPlay () { if (++index >= pic.length) index = 0; changePic(index); } // 定義圖片切換函數(shù) function changePic (curIndex) { for (var i = 0; i < pic.length; ++i) { pic[i].style.display = "none"; list[i].className = ""; } pic[curIndex].style.display = "block"; list[curIndex].className = "on"; } }; </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="../image/img1.png" alt=""></li> <li><img src="../image/img2.png" alt=""></li> <li><img src="../image/img3.png" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
Python是一種跨平臺的、具有解釋性、編譯性、互動性和面向?qū)ο蟮哪_本語言,其最初的設(shè)計(jì)是用于編寫自動化腳本,隨著版本的不斷更新和新功能的添加,常用于用于開發(fā)獨(dú)立的項(xiàng)目和大型項(xiàng)目。
關(guān)于“Python全棧中的JS對象是什么”就介紹到這了,更多相關(guān)內(nèi)容可以搜索億速云以前的文章,希望能夠幫助大家答疑解惑,請多多支持億速云網(wǎng)站!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。