【前端】JavaScript学习笔记(二)——数据类型

✨课程链接

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili


✨学习笔记

字符串

<!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:"test@163.com",
  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>

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/15009823.html

版权所有,如需转载请注明出处。

posted @ 2021-07-14 10:53  双份浓缩馥芮白  阅读(138)  评论(0编辑  收藏  举报