python - ( js ）object对象、json对象、字符串对象的相关方法、数组对象的相关方法、BOM对象、BOM模型中 Navigator 对象

/ {"name":"文东","age":20}// window.open("http://www.baidu.com","_self");// 在当前页面跳转。// 匹配多个,(需要修饰符加上g)var arr = ["宋健","何旭彤","刘利伟","高雪峰","戈隆","王致和","马生平"]// res = "{'name':90,'age':40}";

hdh1324

357人浏览 · 2025-09-02 22:26:33

hdh1324 · 2025-09-02 22:26:33 发布

<!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>


</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>
/*
           ### 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>