前端--js基礎2

阿新 • • 發佈：2021-01-21

一 Object物件

1.以字典的形式定義 [把name age 當成字典的鍵]

var obj = {
            "name":"張三",
            "age":10
    }

新增/修改

obj["sex"] = "男性"

刪除

delete obj["sex"]

獲取

console.log(obj["name"],typeof(obj))

2.以物件形式定義

var obj2 = {
            name:"李四",
            age:80,
            eat:function(){
                console.log( 
"喜歡吃黃豆,喝涼水")
            }
        }
console.log(obj2,typeof(obj2))

新增/修改

obj2.age = 38
        obj2.skill1 = function(something){
            console.log(something)
        }

獲取

console.log(obj2.age)
obj2.skill1("打豆豆")

刪除

delete obj.age
console.log(obj.age)

獲取時的注意點

var str = "name"
        console.log(obj2.name)  
// ok
        console.log(obj2.str)  // undefined
        console.log(obj2[str]) // ok obj2["name"]

3.自定義建構函式

類比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}`) 

}    
            // 除非返回其他物件,否則都預設返回this本物件
            return this //本物件
            // return 1000 無效的數字,預設返回的是本物件
            // return obj2 // 其他物件

}
// 實列化物件
var obj1 = new Person('張銀',20,'野獸')
console.log(obj1.sex)
console.log(obj1.name)
console.log(obj1 , typeof(obj1))
console.loh(obj1 instanceof Person)

4.遍歷物件

"""方法一 """
for (var i in obj1){
     if(i=='info'){
     obj1[i]()
}else{
        console.log(obj1[i])
    
}

}



"""方法二 """
with(obj1){
     console.log(name)
     console.log(age)
     console.log(sex)
     info()   

}

二json物件

var data = {
            'name':"耿擇時",
            "age" : 88
        }

        // js物件 => json格式的字串 [轉化為json字串時 , 強制轉化成雙引號]
        var res = JSON.stringify(data);
        console.log(res , typeof(res));

        res = '{"name":"王文","age":18}'  // success [反解json字串時,字串的鍵必須是雙引號]
        res = "{'name':'王文','age':18}"  // error   字典的鍵不能是單引號
        
        // json格式的字串 => js物件
        var data = JSON.parse(res)
        console.log(data,typeof(data))

三字串物件的相關方法

1.獲取字串長度 length

        var string = "good good study day day up"
        var res = string.length
        var res = string[-1] //不支援逆向下標 undefined
        console.log(res)

獲取字串長度

2.清除兩側的空白 trim [ python的strip ]

var string = "   good good study day day up     "
console.log(string.trim())

清除兩側的空白

3.獲取首次出現的位置 indexOf

var string = "good good study day day up study study "
        var res = string.indexOf("study") // 10
        var res = string.indexOf("study",15,90) // 27
        var res = string.indexOf("study1111111") // -1
        console.log(res)

獲取首次出現的位置

4.最後一次出現的位置lastIndexOf

var res = string.lastIndexOf("study")     //33
        var res = string.lastIndexOf("study",3,6) //-1
        console.log(res) // 33

最後一次出現的位置

5.連線字串 concat

var string = ""
        var res = string.concat("c:\\","3000soft\\","lianxi\\")
        console.log(res)

連線字串

6.大小寫 toUpperCase toLowerCase

var string = "good good study day day up study study "
        var res = string.toUpperCase()
        console.log(res) // GOOD GOOD STUDY DAY DAY UP STUDY STUDY

        var res = res.toLowerCase()
        console.log(res)

大小寫

7.擷取字串 slice

// slice(開始值,結束值) 字串切片 留頭舍尾 從左到右 [支援逆向下標]
        var string = "good good study day day up study study"
        var res = string.slice(3,9)
        var res = string.slice(-5,-1)
        var res = string.slice(-5) // 從-5擷取到最後
        console.log(res)

擷取字串

8.拆分字串 split

var string = "good good study day day up study"
        var res = string.split(" ")
        console.log(res)

拆分字串

9.search 匹配第一次找到的索引位置

// 找不到資料直接返回-1
        var string = "the shy is a big father"
        var res = string.search(/b.*?g/)
        var res = string.search(/ccc/)
        console.log(res)

匹配第一次找到的索引位置

10.match 返回匹配的資料

// /正則表示式/修飾符   i : 不區分大小寫 m : 多行匹配  g:全域性匹配
        var string = "the shy is a big father shy saby sccy"
        var string1 = string.match(/s.*?y/g)
        var string2 = string.match(/s\S*?y/g)
        var string3 = string.match(/shy/g)
        console.log(string3)

返回匹配的資料

11.字串替換 replace

// 方法一
        var string = "to be or not to be"
        var res = string.replace("to","three")
        console.log(res , typeof(res))

        // 方法二
        var res = string.replace(/to/g,"three")
        console.log(res , typeof(res))

        // 方法三
        console.log("<===============>")
        // string 原字串 a 被替換的字串 b 替換成什麼
        function myreplace(string , a , b){
            /*
            一直做替換,直到 lastIndexOf 返回-1
            代表替換完畢
            */
            while(string.lastIndexOf(a) != -1){
                console.log("ok")
                string = string.replace(a,b)
            }
            return string
        }
        var res = myreplace(string,"to","four")
        console.log(res)

字串的替換

乘法表 [js]

        for(var i = 1;i<10;i++){
            for(var j = 1 ; j<=i;j++){
                var a = String(i * j)
                console.log(a.length,typeof(a))
                // if(a.length == 1){
                //     a = `&nbsp;&nbsp;${i*j}`
                // }else{
                //     a = `${i*j}`
                // }
                a = a.length == 1?`&nbsp;&nbsp;${i*j}`: `${i*j}`
                var res = `${i}*${j}=${a}&nbsp;&nbsp;`
                document.write(res)
            }
            document.write("<br/>")
        }

乘法表

四.陣列物件的相關方法

1.定義陣列

一.增

        arr[0] = 100
        arr[1] = 200
        arr[2] = 300
        arr[10] = 400
        console.log(arr,typeof(arr))

(1) push 從陣列的最後插入元素[python 的 append]

var arr = []
arr.push(100)
arr.push(200)

從陣列的最後插入元素

(2) unshift 從陣列的前面插入元素 [python 的 insert]

       arr.unshift(99)
        arr.unshift(98)
        console.log(arr,typeof(arr))

從陣列的前面插入元素

(3) concat 迭代追加資料 [python 的 extend]

var arr = []
        var arr1 = [1,2,3]
        var arr2 = [7,8,9]
        // 迭代追加多個數據,如果是可迭代性資料會一個個把其中的內容追加進去,返回新陣列
        var res = arr.concat(arr1,arr2)
        var res = arr.concat(1,2,3,4)
        console.log(res)

二.刪

(1) delete刪除原位置用空保留,獲取值是undefined

        var arr = [100,200,300,400]
        delete arr[2]
        console.log(arr)

delete刪除原位置用空保留

(2) pop 從後面刪 , 返回刪除的元素

        var arr = [100,200,300,400]
        var res = arr.pop()
        console.log(arr,res,"<=================>")

pop 從後面刪 , 返回刪除的元素

(3) shift 從前面刪除

var arr = [100,200,300,400]
        var res = arr.shift()
        console.log(arr,res)

從前面刪除

(4) splice 從指定位置往後刪除/新增

        // splice(開始位置,刪除幾個,[新增幾個元素])
        var arr = [100,200,300,400,"尤佳","黃常見","朱培峰","李琦"]
        // 效果1 , 從4下標開始刪,刪2個
        var res = arr.splice(4,2)
        // 效果2 , 從4下標開始刪,刪2個,並且新增 王永娟,荷葉2個元素
        var res = arr.splice(4,2,"王永娟","荷葉")
        // 效果3 , 模擬 python insert 操作
        var res = arr.splice(4,0,"草配線")
        console.log(arr,res)

從指定位置往後刪除

三.改查

var arr1 = [1,2,3]
        arr1[0] = 200
        console.log(arr1,arr1[0])

改查

四.陣列的其他方法

1.join 拼接字串和split是一對

        var arr = ["no","can","no","bb"]
        var res = arr.join("-")
        console.log(res)

join 拼接字串和split是一對

2.陣列反轉 reverse

        var arr = [1,100,-3,4]
        var res = arr.reverse()
        console.log(res)
        console.log(arr)

陣列反轉 reverse

3.擷取陣列的一部分 slice [python列表切片]

        // slice(開始值,結束值) 字串切片 留頭舍尾 從左到右 [支援逆向下標]
        var arr = ["樑新宇","孫杰龍","趙瀋陽","李雅琪","王雨涵","石磊","呂菲菲"]
        var res = arr.slice(2,4)
        var res = arr.slice(-3,-1)
        var res = arr.slice(-2)
        console.log(res)

擷取

4.sort 排序

        // sort 會把資料當成字串,按照ascii編碼排序
        var arr = [1,3,13,15,2]
        var res = arr.sort()
        console.log(res , arr)

sort 排序

五.數學物件相關方法

1.四捨五入round

        var res = Math.round(3.5)
        console.log(res)
        var res = Math.round(4.51)
        console.log(res)

round

2.最大值最小值絕對值

        //最大值 max
        var res = Math.max(1,2,3,4,100)
        console.log(res)
        //最小值 min
        var res = Math.min(1,2,3,4,100)
        console.log(res)
        //絕對值 abs
        var res = Math.abs(-100)
        console.log(res)

max min abs

3.向上,下取整 floor 地板

        //向下取整 floor 地板
        var res = Math.floor(1.19)
        console.log(res)
        //向上取整 ceil 天花板
        var res = Math.ceil(1.1)
        console.log(res)

取值

4.冪運算 pow

        var res = Math.pow(2,3)
        console.log(res)

冪運算

5.開方運算 sqrt

        var res = Math.sqrt(16)
        console.log(res)

開平方

6.獲取從0到1隨機值 0<x<1

        var res = Math.random()
        console.log(res)

獲取從0到1隨機值

六BOM

/*
BOM => browser object model 控制瀏覽器
整個瀏覽器中最大的物件是window視窗物件
瀏覽器中所有的行為都由window視窗物件中的成員控制;
所有成員都歸屬於window物件,所以window物件可以不寫;
*/

 console.log(window)
        // 1.彈出提示框
        // window.alert("112233")
        // 2.彈出確認取消框,返回狀態true / false
        // var res = window.confirm("111")
        // console.log(res)
        // 3.等待使用者輸入框 
        // var res = window.prompt("請輸入您的銀行卡密碼:")
        // console.log(res,typeof(res))
        // 4.關閉窗體
        // window.close()

        // 開啟窗體,本頁面跳轉
        // window.open("http://www.baidu.com","_self");
        // 開啟窗體,新視窗跳轉
        // window.open("http://www.baidu.com","_blank","width=1px,height=1px");

        // 獲取瀏覽器視窗顯示的寬度和高度
        console.log(window.innerWidth)
        console.log(window.innerHeight)

        // 定時器
        /*
            // 定時器是基於單執行緒的非同步併發操作
            window.setInterval(函式,間隔時間(毫秒)) // 定時執行多次任務
            window.setTimeout(函式,間隔時間(毫秒))  // 定時執行一次任務  
            
            // 清除定時器
            window.clearInterval(id號)
            window.clearTimeout(id號)
        */
        // 建立一個定時器1
        // var id1 = window.setInterval(func,1000)

        // 建立一個定時器2
        var id2 = window.setTimeout(func,1000)

        var count = 1
        // 執行任務 當前函式可以預載入
        function func(){
            console.log("當前數值為:",count)
            if(count == 10){
                // 殺死定時器1
                // window.clearInterval(id1)
                // 殺死定時器2
                window.clearTimeout(id2)
            }
            count++
        }




        // console.log("程式碼執行結束 .... " , id1)
        console.log("程式碼執行結束 .... " , id2)

具體方法

七.Date物件_檢視時間效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date物件_檢視時間效果</title>
    <style>
        #time
        {
            width:600px;
            height:50px;
            border:dotted 1px green;
            text-align: center;
            line-height: 50px;
            background:black;
            color:red;
            border-radius: 30px;
            font-weight: bold;
            font-size:20px;
        }
    </style>
</head>
<body>

    <div id="time"></div>

    <script>
        
        // 獲取div這個標籤的節點物件
        var obj2 = document.getElementById("time")
        console.log(obj2)
        function clock(){
            var obj = new Date()
            console.log(obj)
            //獲取年  getFullYear
            var year = obj.getFullYear()
            console.log(year)
            //獲取月份 getMonth 月份的索引是從 0 開始的
            var month = obj.getMonth()
            console.log(month) // 0 => 1月份
            //獲取日期 getDate
            var date = obj.getDate()
            console.log(date)
            //獲取小時 getHours
            var hour = obj.getHours()
            console.log(hour)
            //獲取分鐘 getMinutes
            var minutes = obj.getMinutes()
            console.log(minutes)
            //獲取秒   getSeconds
            var seconds = obj.getSeconds()
            console.log(seconds)

            var abc = null;
            switch(month){
                case 0:
                    abc = "jan"
                    break;
                case 1:
                    abc = "Tu"
                    break;
                default:
                    abc = "沒有"
                    break;
            }

            strvar = `現在的時間是:${year}年-${abc}月-${date}日 ${hour}:${minutes}:${seconds}`
            // 往div標籤中插入內容  innerHTML
            obj2.innerHTML = strvar
            // console.log(strvar)
            // document.write(strvar)
        }

        var id = window.setInterval(clock,1000)

    </script>

    
</body>
</html>