【前端】JavaScript學習筆記（二）——資料型別

阿新 • • 發佈：2021-07-14

✨課程連結

✨學習筆記

字串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        'use strict';

        // `` 多行字串 Esc鍵下面
        let str = `多行
        字串`
        console.log(str)

        let name = 'admin'
        let passwd = 'root'
        // 模板字串
        let msg = `name:${name}passwd:${passwd}`
        console.log(msg)

        console.log("！字串不可變")
        console.log(msg.length)
        console.log(msg.toUpperCase())
        console.log(msg.toLowerCase())
        console.log(msg.indexOf("r"))
        // 1到最後
        console.log(msg.substring(1))
        // [5,10)
        console.log(msg.substring(5,10))


    </script>

</head>
<body>

</body>
</html>

陣列

Array可以包含任何的資料型別

let arr = [1, 2, 3, "1", "2"]

長度

arr.length

注意：如果給 arr.length 賦值陣列大小會發生變化如果賦值過小元素就會丟失

indexOf

通過元素獲得下標索引

arr.indexOf(1)
arr.indexOf("2")

slice()

擷取Array的一部分返回一個新陣列類似String中的substring

arr.slice(0, 1)

push() pop() 尾部

arr.pop()
arr.push()

unshift() shift() 頭部

arr.unshift()
arr.shift()

排序

arr.sort()

元素反轉

arr.reverse()

concat()

注意：並沒有修改陣列只是返回一個新的陣列

console.log(arr.concat(["A"]))

連線符 join

列印拼接陣列使用特定的字串連線

arr.join("-")

多維陣列

物件

若干個鍵值對

{...}表示一個物件

鍵值對描述屬性 xxx:xxx

多個屬性之間使用逗號隔開 最後一個屬性不加逗號！

var person = {
  name: "test",
  age: 3,
  email:"[email protected]",
  score: 0
}

js中的所有鍵都是字串值是任意物件！

物件賦值

使用一個不存在的物件屬性不會報錯！undefined

動態地刪減屬性通過delete刪除物件的屬性

動態地新增屬性直接給新的屬性新增值即可

person.temp = "temp"

判斷屬性值是否在物件中

"age" in person
true
// 繼承
"toString" in person
true

判斷一個屬性是否是這個物件自身擁有的

person.hasOwnProperty("toString")
false
person.hasOwnProperty("age")
true

流程控制

if 判斷

while 迴圈

while(true){
  alert("避免程式死迴圈")
}

do{
  alert("避免程式死迴圈")
}while (true)

for 迴圈

forEach 迴圈

ES 5.1 引入

let arr = [1, 2, 3, "1", "2"]
arr.forEach(function (value){
  console.log(value)
})

for...in

// for(index in object){}
for(let num in arr){
  if (arr.hasOwnProperty(num)){
    console.log("exist!")
    console.log(arr[num])
  }
}

for...of

// for(elem in object){}
let arr = [1, 2, 3]
for (let x of arr){
    console.log(x)
}

Map 和 Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        "use strict"

        // ES6 新特性
        var map = new Map([["name1", 100], ["name2", 99]])
        console.log(map.get("name1"))
        map.set("admin", "admin")
        console.log(map)
        map.delete("admin")

        // Set 無序不重複的集合
        // set 去重
        var set = new Set([1, 2, 3, 1, 1, 1])
        set.add("1")
        // 是否包含
        console.log(set.has(1))
    </script>

</head>
<body>

</body>
</html>

iterator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        "use strict"
        // iterator ES6新特性

        // 通過for in
        let arr = [1, 2, 3]
        // 早期bug for in 輸出index時會輸出 "name"
        arr.name = "bug"
        for (let x in arr){
            console.log(x)
        }

        var map = new Map([["name1", 100], ["name2", 99]])
        for(let x of map){
            console.log(x)
        }
        var set = new Set([1, 2, 3])
        for(let x of set){
            console.log(x)
        }
    </script>

</head>
<body>

</body>
</html>