2.对象方法与BOM

对象及相关方法

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序列化成字符串,name强转双引号
            var res = JSON.stringify(data)
            console.log(res,typeof(res))  //{"name":"光头强","age":22} string
  
        // 2.json 反序列化,字典的键不能是单引号
            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:pythonjavascript
      
        // 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)

        // 4.排序:sort 原数组排序
        // (1).sort 会把数据当成字符串,按照ASCII排序
            var arr = [1,2,13,15]
            var res = arr.sort()
            console.log(arr,res)  //[1, 13, 15, 2] [1, 13, 15, 2]
        // (2).当成正常的数据大小排序 冒泡排序,比值函数
        // 使用比值函数,会返回负值,零或正值  正=>交换 负=>不交换
            var arr = [1,2,13,15]
        // 1.普通函数
            function bizhi(a,b){
                if(a>b){
                    return 1
                }else{
                    return -1
                }
            }
            arr.sort(bizhi)
            console.log(arr) //[1, 2, 13, 15]
        // 2.匿名函数
            arr.sort(function(a,b){
                return a>b?1:-1
            })
            console.log(arr) //[1, 2, 13, 15]
        // 3.箭头函数
            arr.sort((a,b)=>{return a>b?1:-1})
            console.log(arr) //[1, 2, 13, 15]
    </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>