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

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