溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家分析了Python全棧中的JS對象是什么的相關知識點，內容詳細易懂，操作細節合理，具有一定參考價值。如果感興趣的話，不妨跟著跟隨小編一起來看看，下面跟著小編一起深入學習“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 = "孫堅";
obj.age = 18;
obj.weight = "200斤";
obj.eat = function(){
alert("我會吃竹子");
}
console.log(obj.name)
// obj.eat();
//2.定義對象方法二
/* 對象中的成員不要使用單引號,在特殊場景中,比如json格式字符串的轉換中會報錯; */
var obj = {
name:"張三",
"age" : 20,
sex : "男性",
drink : function(something){
console.log("我會喝牛欄山",something);
}
}
//調用方式一
console.log(obj.sex)
obj.drink("老白干")
//調用方式二
console.log(obj["age"])
obj["drink"](1)
// 注意點
var str = "name"
console.log(obj.str , "<==========================>") //error
console.log(obj.name)
console.log(obj[str]) // obj["name"]
// eval 可以把字符串當成代碼執行
eval("console.log(333)")
//3.定義對象方法三
/* 類比python中定義類的寫法 , this等價于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("劉一風",30,"男性");
var obj2 = new Person("張三風",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結合,遍歷對象中的數據;
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小時,還有一個小時上廁所.");
}
}
// 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>字符串對象的相關方法</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.清除兩側的空白 trim [ python的strip ]
var res = string.trim()
console.log(string)
console.log(res)
//2.獲取首次出現的位置 indexOf [ python的find ]
/*找不到返回-1*/
var string = "to be or not to be";
var res = string.indexOf("z")
console.log(res)
//3/最后一次出現的位置 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(開始值,結束值) 字符串的切片 留頭舍尾 [支持逆向下標]*/
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(開始值,截取幾個) */
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 返回匹配的數據
/* /正則表達式/修飾符 g:全局匹配 i:不區分大小寫 m:多行匹配 */
var string = "我的電話是 : 13838384388 你的電話是: 13854381438"
var res = string.match(/\d{11}/); // 匹配一個
var res = string.match(/\d{11}/g); // 匹配多個,(需要修飾符加上g)
console.log(res)
console.log(res[0])
console.log(res[1])
//11.字符串替換 replace
/* replace默認只替換一次 */
var string = "to be or not to be";
var res = string.replace("to","two")
console.log(res,"<==6==>")
// 方法一:
function myreplace(string,a,b){
/*
找最后一個to,如果找不到返回-1
如果能找到就不停的進行替換,直到-1為止,循環終止;
*/
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>數組對象的相關方法</title>
</head>
<body>
<script>
// 1.定義一個數組
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特征:允許在一個臨時的索引值上插入數據; ok
arr[10] = 50;
console.log(arr)
console.log(arr[5])
// (1)push 從數組的最后插入元素 相當于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 從數組的前面插入元素 相當于python的insert
var arr = [100,101];
var res = arr.unshift(1);
var res = arr.unshift(333);
console.log(res , arr);
// (3)concat 迭代追加數據 相當于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 從指定位置往后進行刪除或者添加
/* arr.splice(從第幾個位置開始,刪除幾個,[可選的是添加的元素]) */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
// 從第二個2位置開始,刪除2個
var res = arr.splice(2,2)
console.log(res , arr)
// 從第二個2位置開始,刪除0個,添加,"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)
// 數組元素反轉 reverse
var arr = [100,200,3,150];
var res = arr.reverse();
console.log(res);
// 截取數組的一部分 slice
/* arr.slice(開始值,結束值) 數組的切片 留頭舍尾 [支持逆向下標]*/
var arr = ["宋健","何旭彤","劉利偉","高雪峰","戈隆","王致和","馬生平"]
var res = arr.slice(2)
// var res = arr.slice(2,4)
var res = arr.slice(-3,-1)
console.log(res);
// 排序 默認升序 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 里面的參數是一個函數,通過函數進行升序或者降序排序;
/* 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): # 這個循環負責設置冒泡排序進行的次數
for j in range(len(nums) - i - 1): # j為列表下標
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>數學對象中的相關方法</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)
//冪運算 pow
var res = Math.pow(2,3)
//開方運算 sqrt
var res = Math.sqrt(9)
console.log(res)
// ### 隨機值推導公式
//獲取從0到1隨機值 0<x<1
var res = Math.random()
console.log(res)
//獲取1~10的隨機值 1 <= x <= 10
var res = Math.ceil(Math.random() * 10 )
console.log(res)
// 1.獲取從 m 到 n 的隨機值 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.拆解數字,把對應的m和n進行替換;
var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1)
// 3.推出最后結果
var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1)
// 4.封裝函數:終極版:隨機值;
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 整個瀏覽器窗口出現的所有內容行為都是window對象中的成員; */ console.log(window) // 1.彈出警告框 // window.alert('你好') // 2.確認彈窗 // var res = window.confirm("確認彈窗") // console.log(res); // true / false // 3.等待輸入彈窗 // var res = window.prompt("請輸入您的銀行密碼:") // console.log(res); // 4.關閉瀏覽器窗口 // window.close(); // innerHeight innerWidth 獲取瀏覽器窗口內部的寬和高 console.log(`瀏覽器窗口內部的寬度${window.innerWidth}`) console.log(`瀏覽器窗口內部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在當前頁面跳轉 // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁面跳轉 // ###定時器 /* # 定時器種類(兩種):基于單線程的異步并發程序; window.setInterval(函數名,間隔時間(毫秒)) // 定時執行多次任務 window.setTimeout(函數名,間隔時間(毫秒)) // 定時執行一次任務 window.clearInterval(id號) // 清除定時器 setInterval window.clearTimeout(id號) // 清除定時器 setTimeout */ var num = 1 function func(){ console.log(`我執行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1,"id1") console.log(id2,"id2") console.log("我執行完了....") 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 整個瀏覽器窗口出現的所有內容行為都是window對象中的成員;
*/
console.log(window)
// 1.彈出警告框
// window.alert('你好')
// 2.確認彈窗
// var res = window.confirm("確認彈窗")
// console.log(res); // true / false
// 3.等待輸入彈窗
// var res = window.prompt("請輸入您的銀行密碼:")
// console.log(res);
// 4.關閉瀏覽器窗口
// window.close();
// innerHeight innerWidth 獲取瀏覽器窗口內部的寬和高
console.log(`瀏覽器窗口內部的寬度${window.innerWidth}`)
console.log(`瀏覽器窗口內部的高度${window.innerHeight}`)
// window.open("http://www.baidu.com","_self"); // 在當前頁面跳轉
// window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁面跳轉
// ###定時器
/*
# 定時器種類(兩種):基于單線程的異步并發程序;
window.setInterval(函數名,間隔時間(毫秒)) // 定時執行多次任務
window.setTimeout(函數名,間隔時間(毫秒)) // 定時執行一次任務
window.clearInterval(id號) // 清除定時器 setInterval
window.clearTimeout(id號) // 清除定時器 setTimeout
*/
var num = 1
function func(){
console.log(`我執行了${num}`);
num++;
}
var id1 = window.setInterval(func,1000);
var id2 = window.setTimeout(func,2000);
console.log(id1,"id1")
console.log(id2,"id2")
console.log("我執行完了....")
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>獲取年月日時分秒</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()
// 獲取小時
var hour = d.getHours()
// 獲取分鐘
var minutes = d.getMinutes()
// 獲取秒數
var seconds = d.getSeconds()
strvar= `現在的時間是: ${year}年-${month+1}月-${date}日 ${hour}:${minutes}:${seconds}`;
console.log(strvar);
obj.innerHTML = strvar
console.log(minutes, typeof(minutes));
// 清除定時器的效果
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) // 在爬蟲程序中,可以偽造成瀏覽器進行數據爬取,繞開服務端的反爬機制; </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()">跳轉到上一頁</button>
<button onclick="func3()">跳轉到下一頁</button>
<button onclick="func4()">當前頁面刷新</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作用： 負責刷新頁面，跳轉頁面用的，可以獲取地址欄上面的參數
<!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()">跳轉其他頁面</button>
<button onclick="func3()">刷新頁面</button>
<button onclick="func4()">過一秒在刷新頁面</button>
<script>
function func1(){
/* 鏈接地址: http://ip + 端口號 + 路徑 + 參數 + 錨點 */
console.log(location);
console.log(`協議:${location.protocol}`);
console.log(`ip端口號:${location.host}`);
console.log(`端口號:${location.port}`);
console.log(`路徑:${location.pathname}`);
console.log(`獲取錨點:${location.hash}`);
console.log(`獲取地址欄參數:${location.search}`);
console.log(`完全地址:${location.href}`)
}
//跳轉頁面
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("我執行了...")
}
// 每過一秒刷新一下頁面
/* 等待所有頁面圖片文字全部加載完畢之后,再去執行對應的代碼 */
window.onload = function(){
func4()
}
</script>
</body>
</html>js三大對象 1. 本地對象：js語法 2. bom對象：瀏覽器相關的成員（針對于瀏覽器的控制）brower object model 3. dom文檔對象：關于html文件節點相關的數據、相關的值（針對于html的控制） document object model js是單線程的異步程序 定時器是單線程的異步程序（例子）
<!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;
// 定義并調用自動播放函數
timer = setInterval(autoPlay, 2000);
// 鼠標劃過整個容器時停止自動播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠標離開整個容器時繼續播放至下一張
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍歷所有數字導航實現劃過切換至對應的圖片
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);
}
// 定義圖片切換函數
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是一種跨平臺的、具有解釋性、編譯性、互動性和面向對象的腳本語言，其最初的設計是用于編寫自動化腳本，隨著版本的不斷更新和新功能的添加，常用于用于開發獨立的項目和大型項目。
關于“Python全棧中的JS對象是什么”就介紹到這了,更多相關內容可以搜索億速云以前的文章，希望能夠幫助大家答疑解惑，請多多支持億速云網站！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
