对象及相关方法
1.Object对象
<script>
// 一.以字典形式定义
var obj = {"name":"熊大","age":10}
obj["sex"] = "雄性" //添加/修改
delete obj["age"] //删除
console.log(obj) //获取
// 二.以对象形式定义
var obj2 = {
name:"熊二",
age:20,
}
// 1.添加/修改
obj.skill = function(){console.log("咆哮")}
obj.age = 33
// 2.删除
delete obj.age
// 3.获取
console.log(obj.name) //熊二
console.log(obj["name"])//熊二
obj.skill() //咆哮
console.log(obj) //{name: "熊大", sex: "雄性", skill: ƒ}
// 三.自定义构造函数
// 1.类比python中定义类的写法 this 等价于 self
function person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.info = function(){console.log(`姓名:${this.name},年龄:${this.age}`)}
}
// 2.实例化对象
var obj = new person("熊大",20,"公的")
console.log(obj.name)
obj.info() //姓名:熊大,年龄:20
console.log(obj,typeof(obj)) //person {name: "熊大", age: 20, sex: "公的", info: ƒ} "object"
console.log(obj instanceof person) //true
// 四.遍历对象
// 1.方法一:
for (var i in obj){
if (i == "info"){
obj[i]()
}else{
console.log(obj[i])
}
}
// 2.方法二:with 直接获取成员值
with(obj){
console.log(name)
console.log(age)
console.log(sex)
info()
}
</script>
2.json对象
序列化: 将当前语言数据格式转化为可以存储或网络传输的数据格式;
反序列化: 存储或网络传输的数据格式转化成本语言数据格式;
数据类型可以是: 字符串, 布尔, 数组, 字典等
<script>
var data = {'name':"光头强","age":22}
// 1.json序列化成字符串 -- stringify
var res = JSON.stringify(data)
console.log(res,typeof(res)) //{"name":"光头强","age":22} string
// 2.json 反序列化,字典的键不能是单引号 - parse
res = "{'name':'熊二'}" //error 字典键是单引号不能反序列化
res = '{"name":"光头强","age":22}'
var data = JSON.parse(res)
console.log(data,typeof(data)) //{name: "光头强", age: 22} "object"
</script>
3.字符串对象的相关方法
<script>
// 1.获取字符串的长度: length
var str = "hello world!"
var res = str[-2] //undefined 字符串不支持逆向下标
var res = str.length
console.log(res)
// 2.清除两侧的空白:trim [类比python中strip]
var str = " hello world "
var res = str.trim()
console.log(res)
// 3.获取首次出现的位置: indexOf [python的find] 找不到返回-1
var str = "hello world"
var res = str.indexOf("l") //2
var res = str.indexOf("l",5,10) //9
console.log(res)
// 4.获取最后一次出现的位置: lastIndexOf 找不到返回-1
var str = "hello world"
var res = str.lastIndexOf("l")
console.log(res) //9
// 5.连接字符串: concat [python的 os.path.join]
var str = ""
var res = str.concat("c:\\","python\\","javascript")
console.log(res) //c:\python\javascript
// 6.大小写: toUpperCase,toLowerCase [python的 upper,lower]
var str = "hello world"
var res = str.toUpperCase()
console.log(res) //HELLO WORLD
var res = res.toLowerCase()
console.log(res) //hello world
// 7.截取字符串: slice
// slice(开始值,结束值) 字符串切片 留头舍尾 从左到右 [支持逆向下标]
var str = "hello world"
var res = str.slice(2,5)
var res = str.slice(-3) //从-3截取到最后
console.log(res)
// 8.拆分字符串: split [python的split] 按某个字符拆分成数组
var str = "hello world"
var res = str.split(" ") //按空格拆分
console.log(res) //["hello", "world"]
// 9.search 正则匹配第一次找到索引的位置 找不到返回-1
var str = "you can you up,no can no bb"
var res = str.search(/c.*?n/) // 4
var res = str.search(/up/) // 12
console.log(res)
// 10.match 返回正则匹配的数据
// /正则表达式/+修饰符 修饰符: i 不区分大小写 , m 多行匹配 , g 全局匹配
var str = "you can you up,no can no bb"
var res = str.match(/c.*?n/)
// ["can", index: 4, input: "you can you up,no can no bb", groups: undefined]
console.log(res)
// 11.字符串替换 : replace
var str = "you can you up,no can no bb"
var res = str.replace("you","he") //替换第一个词
console.log(res)
var res = str.replace(/you/g,"he") //替换所有词
console.log(res) //he can he up,no can no bb
// 定义函数替换所有词
function func(str,a,b){//string 原字符串 a 被替换的字符串 b 替换成什么
while(str.indexOf(a) != -1){
str = str.replace(a,b)
}return str
}
var res = func(str,"no","yes")
console.log(res) //you can you up,yes can yes bb
</script>
4.数组对象的相关方法
<script>
// 一.添加增数据
// 1.push 从数组的后面插入元素
var arr = [1,2]
arr.push(11)
console.log(arr) //[1, 2, 11]
// 2.unshift 从数组的前面插入元素
arr.unshift(22)
console.log(arr)
// 3.concat 迭代追加数据 [python 的 extend]
var arr = []
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var res = arr.concat(arr1,arr2) //[1, 2, 3, 4, 5, 6]
var res = arr.concat(1,2,3,4,5) //[1, 2, 3, 4, 5]
console.log(res)
// 二.删除数据
// 1.delete 删除,原位置用空保留 ,若获取值则是未定义undefined
var arr = [1,2,3,4,5]
delete arr[0]
console.log(arr) //[empty, 2, 3, 4, 5]
// 2.pop 从后面删除 ,返回被删除掉的元素
var arr = [1,2,3,4,5]
var res = arr.pop()
console.log(arr,res) //[1, 2, 3, 4] 5
// 3.shift 从前面删除,返回被删除的元素
var arr = [1,2,3,4,5]
var res = arr.shift()
console.log(arr,res) //[2, 3, 4, 5] 1
// 4.splice 从指定位置往后删除/添加元素 返回被删除数据的数组
// splice(开始位置,删除几个,[添加元素])
var arr = [1,2,3,4,5]
var res = arr.splice(2,2) //从第2下标开始,删除2个 [1, 2, 5] [3, 4]
var res = arr.splice(2,1,11,22) //删除一个添加两个 [1, 2, 11, 22] [5]
var res = arr.splice(2,0,"aa","bb","cc")
//模拟python insert 插入 [1, 2, "aa", "bb", "cc", 11, 22] []
console.log(arr,res)
// 三.改查
var arr = [1,2,3]
arr[0] = 100 //改
console.log(arr,arr[0]) //查 [100, 2, 3] 100
// 四.数组的其他方法
// 1.join 拼接字符串,与split拆分字符串是一对
var arr = ["hello","world"]
var res = arr.join(" ") //使用空格拼接
console.log(res) //hello world
// 2.数组反转 : reverse 原数组反转,返回的也反转
var arr = [1,3,2,4]
var res = arr.reverse()
console.log(arr,res) //[4, 2, 3, 1] [4, 2, 3, 1]
// 3.截取数组的一部分 slice [列表切片]
// slice(开始值,结束值) 字符串切片 留头舍尾 从左到右 [支持逆向下标]
var arr = [1,2,3,4,5,6,7,8,9]
var res = arr.slice(3,6) //[4, 5, 6]
var res = arr.slice(-3,-1) //[7, 8]
var res = arr.slice(-4) //[6, 7, 8, 9] 从-4下标到最后
console.log(res)
// 五. 内置高阶函数 filter map sort 等使用
// filter 过滤出数据 真保留
var arrma = [1, 5, 23, 4, 51, 6, 7]
// 普通函数
function guolu(item) {
return item % 2 === 0 // 过滤出偶数数据
}
console.log(arrma.filter(guolu))
// 简化 - 直接嵌套匿名函数
var ret = arrma.filter(function (item) {
return item % 2 === 0
})
console.log(ret)
// map 映射 对数组中数据做统一操作
var ret = arrma.map(function (item) {
return item * 3
})
console.log(ret)
// sort 按数据大小排序, 利用比值函数,会返回负值,零或正值 正=>交换 负=>不交换
var ret = arrma.sort(function (a, b) {
return a > b ? 1 : -1;
})
console.log(ret)
// 再简化 - 直接嵌套箭头函数
var ret = arrma.sort((a, b) => {
return a > b ? 1 : -1
})
console.log(ret)
</script>
5.数学对象相关函数 Math
<script>
// Math.成员方法
// 1.四舍五入: round
var res = Math.round(3.5) // 4
console.log(res)
// 2.最大值:max , 最小值:min , 绝对值:abs
var res = Math.max(1,3,-2,7) //7
console.log(res)
// 3.向上取整:ceil , 向下取整:floor
var res = Math.ceil(1.1) // 2
console.log(res)
// 4.幂运算: pow , 开方运算: sqrt
var res = Math.pow(3,3) // 27
var res = Math.sqrt(9) // 3
console.log(res)
// 5.获取0~1的随机值 : random
var res = Math.random()
console.log(res)
// 6.获取从m~n的随机整数值,实现python中的randrange效果
// (1).先实现5~14之间的整数
var res = Math.ceil( Math.random()*10 ) //从1到10
var res = Math.ceil( Math.random()*10 )+4 //从5到14
// (2).推到过程: 假设 m=5 , n=14
// var res = Math.ceil( Math.random()*10 )+4
// var res = Math.ceil( Math.random()*(n-m+1) )+(m-1)
// 结论:封装函数
function randrange(m,n){
return Math.ceil( Math.random()*(n-m+1) )+(m-1)
}
var res = randrange(0,10)
console.log(res)
</script>
6.时间对象相关方法 Date
页面实现时钟效果
<body>
<div id="time"></div>
<script>
// 获取div标签的节点对象
var obj2 = document.getElementById("time")
function clock(){
var obj = new Date() //创建时间对象
console.log(obj) //Wed Jan 20 2021 22:22:13 GMT+0800 (中国标准时间)
var year = obj.getFullYear() //年
var month = obj.getMonth() //月 从0开始 0=>1月份
var date = obj.getDate() //日
var hour = obj.getHours() //时
var minute = obj.getMinutes()//分
var second = obj.getSeconds()//秒
strvar = `现在的时间是:${year}年-${month+1}月-${date}日 ${hour}:${minute}:${second}`
// 往div标签里插入内容: innerHTML
obj2.innerHTML = strvar
}
window.setInterval(clock,1000) //定时执行多次任务 1000毫秒执行一次
</script>
</body>
7.BOM模型 :控制浏览器
<script>
/*
BOM => browser object model 控制浏览器
整个浏览器中最大的对象是window窗口对象
浏览器中所有的行为都由window窗口对象中的成员控制;
所有成员都归属于window对象,所以window对象可以不写;
*/
// 1.弹出提示框: alert
window.alert("hehe")
// 2.弹出确认取消框:confirm,返回状态 true/false
var res = confirm("111")
console.log(res)
// 3.弹出等到用户输入框:prompt 确认返回输入内容,取消返回null
var res = prompt("请输入账号:")
console.log(res)
// 4.关闭窗体:close 关闭整个子页面浏览器
// close()
// 5.打开窗体: open
// open("http://www.baidu.com","_self") //本页面跳转
// open("http://www.taobao.com","_blank") //新窗口跳转
// 6.获取浏览器显示的宽度: innerWidth和高度: innerHeight
console.log(innerWidth,innerHeight)
// 7.定时器
/*
// 定时器是基于单线程的异步并发操作
window.setInterval(函数,间隔时间(毫秒)) // 定时执行多次任务
window.setTimeout(函数,间隔时间(毫秒)) // 定时执行一次任务
// 清除定时器
window.clearInterval(id号)
window.clearTimeout(id号)
*/
// 1.创建定时器1
var id1 = setInterval(func,1000)
var count = 1
function func(){
console.log("当前数值:",count)
if(count == 10){
clearInterval(id1)
}
count++
}
</script>
<div id="i1" class="c1">11</div>
<div id="i2" class="c2">22</div>
<script>
// dom标签直接定位 id唯一 class数组
var dom = document.getElementById("i1") // 定位ID
console.log(dom)
// dom.on事件 = function(){} 绑定事件
dom.onclick = function () {
alert("点击事件触发!!")
}
var dom = document.getElementsByClassName("c2")[0] // class定位
console.log(dom)
// dom 选择器定位 querySelector定位一个, querySelectorAll定位多个
var dom = document.querySelector("#i1") // id定位
console.log(dom)
var dom = document.querySelector(".c2") // class定位
console.log(dom)
var dom = document.querySelector("div") // 标签定位
console.log(dom)
var dom = document.querySelectorAll("#i1")
console.log(dom) // 数组 NodeList [div#i1.c1]
var dom = document.querySelectorAll(".c1")[0]
console.log(dom) // 数组取值定位
var dom = document.querySelectorAll("div") // 标签定位 数组
console.log(dom)
</script>
