01-JS 基本入门

image-20251125100829463

1. 基础

1.1 发展历史

image-20251204170503752

1.2 基本组成

image-20251204170632221

image-20251204170737072

总结：JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果。

1.3 能干什么

  1. 实现网页效果、表单验证、轮播图…
  2. 实现与H5配合实现游戏，如水果忍者…
  3. 实现应用级别的程序
  4. 实现图表统计效果
  5. 实现人工智能，如面部识别
  6. 后端开发、app开发、桌面端开发…

1.4 代码书写位置

  • 行内式（不推荐）
1
2
3
4
5
6
<body>
    <!-- 行内式(不推荐) -->
    <button onclick="alert('hello world')">点我</button>
    <br>
    <a href="javascript: alert('hello, world!')">点我</a>
</body>
  • 内嵌式
1
2
3
4
5
<!-- script标签可以放在head中，也可以放在body中 -->
<script>
    alert("我是一个弹出层")
    console.log("hello,world")
</script>
  • 外链式【推荐】
1
2
3
<!-- 一个页面可以引入多个js文件 -->
<script src="./js/hello1.js"></script>
<script src="./js/hello2.js"></script>

1.5 注释与规范

  • Ctrl + / 单行注释

    1
    // 单行注释

  • Ctrl + Shift + / 或 Alt + Shit + A 多行注释

    1
    2
    3
    4
    /*
      多行
      注释
    */

  • 每一行书写可以不加分号 ; 也可以加(两句在同一行是必须加)，按照规范全部都不加分号即可

1.6 变量(★)

语法：

1
var 变量名 = 值

示例：

1
2
3
4
5
6
7
8
9
<script>
    // 先定义
    var x
    // 后赋值
    x = 100

    var y = x + 2000
    console.log(y)
</script>

命名规则（必须遵守，不遵守就报错）：

  1. 一个变量名称可以由数字、字母、英文下划线_、美元符号$ 组成
  2. 严格区分大小写
  3. 不能由数字开头
  4. 不能是 保留字 或 关键字
  5. 不能出现空格

命名规范（建议遵守）：

  1. 变量名尽量有意义（语义化，见名知意）
  2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
  3. 不要使用中文

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    // 先定义
    var x
    // 后赋值
    x = 100

    var y = x + 2000
    console.log(y)


    // 命名规则示例
    var a1, a2, a_, _a, a$b, $a1, $a2, $A2
    var A1, a1
    // 命名规范示例
    var username, password, age, email, name
    var zhanghao, mima
    var productNumber, userInfo //商品数量, 用户信息，驼峰规则

    var 我 = "jerry"
    console.log(我)  //html5后好使，但不建议
</script>

1.7 基本数据类型(★)

基本类型：

  • Number，数字类型，eg: 18, 12.5(浮点数), 2e3(2*10^3), 十进制, 八进制, 十六进制, 二进制
  • String，字符串类型，需加双引号
  • Boolean，布尔类型，取值 true/false
  • Undefined，声明了未赋值，取值 undefined
  • Null，空值（明确未来做为对象类型使用，提前赋值为null）
  • Symbol，

复杂类型（对象类型）：

  • object

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    /* Number */
    var age = 18
    console.log(age + 20)

    var price = 12.5
    console.log(price)

    var year = 2e3   //2*10^3
    console.log(year)

    var hex = 0xff   //十六进制：0-9,a-f
    var oct = 0o77   //八进制：0-7
    var dec = 99     //十进制：0-9
    var bin = 0b11   //二进制：0-1
    console.log(hex, oct, dec, bin)

    /* 字符串在浏览器控制台颜色与数字不同，留意观察 */
    var num1 = 10
    var num2 = "20"
    console.log(num1 + num2)  //类型转换了，输出：1020，而不是30

    /* String */
    var str = "hello"
    console.log(str)

    /* Boolean */
    var isChecked = true
    var isVisited = false
    console.log(isChecked, isVisited)

    /* Undefined: 声明了但为赋值的变量 */
    var which
    console.log(which)  //undefined
    which = 100
    console.log(which)  //100

    /* Null: 明确未来做为对象类型使用，提前给null */
    var whichObject = null
    whichObject = {name: "Jerry"}
    console.log(whichObject)      //{name: 'Jerry'}
</script>

1.7.0 typeof() 类型检测

typeof 变量 或 typeof(变量) 变量类型判断，结果一定是个字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var a
    console.log(typeof a)    //写法1
    console.log(typeof(a))   //写法2

    // typeof 的结果是个字符串类型
    console.log(typeof typeof a)  //结果一定是 string 字符串

    var b
    console.log(typeof b)   //undefined
    var c = null
    console.log(typeof c)   //object
</script>

1.7.1 类型转数字

  1. Numnber(变量)
    • 可以把一个变量强制转换成数值类型
    • 可以转换小叔，会保留小数
    • 可以转换布尔值
    • 遇到不可转换的都会返回 NaN
  2. parseInt(变量)
    • 从第一位开始检查，是数字就转换，直到一个不是数字的内容
    • 开头就不是数字，那么直接返回 NaN
    • 不认识小数点，只能保留整数
  3. parseFloat(变量)
    • 从第一位开始检查，是数字就转换，直到一个不是数字的内容
    • 开头就不是数字，那么直接返回 NaN
    • 认识一次小数点
  4. 除了加法以外的数学运算
    • 运算符两边都是可运算数字才行
    • 如果运算符任何一边不是一个可运算的数字，那么就会返回 NaN
    • 加法不可以用

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    var a = "100"
    var a1 = Number(a)
    console.log(a, a1)                //100 100
    console.log(typeof a, typeof a1)  //string number

    var s = "abc"
    var s1 = Number(s)
    console.log(s, s1)                //abc Na
    console.log(typeof s, typeof s1)  //string number

    var b = false
    var b1 = Number(b)                //true-1, false-0
    console.log(b, b1)                //false 0
    console.log(typeof b, typeof b1)  //boolean number

    var n
    var n1 = Number(n)
    console.log(n, n1)                //undefined NaN
    console.log(typeof n, typeof n1)  //undefined number

    var c = "125px"
    var c1 = parseInt(c)
    console.log(c, c1)                //125px 125
    console.log(typeof c, typeof c1)  //string number

    var d = "1.25rem"
    var d1 = parseInt(d)
    console.log(d, d1)                //1.25rem 1
    console.log(typeof d, typeof d1)  //string number

    var e = "1.25rem"
    var e1 = parseFloat(e)
    console.log(e, e1)                //123.45rem 1.25
    console.log(typeof e, typeof e1)  //string number

    //非加号即可转数字 -0 /1 *1
    var x = "100"
    var x1 = x - 0
    console.log(x, x1)                //100 100
    console.log(typeof x, typeof x1)  //string number
</script>

1.7.2 类型转字符串

  1. 变量.toString()
    • 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
  2. String(变量)
    • 所有数据类型都可以
  3. 使用加法运算
    • 在js里面 + 号有两个含义
    • ① 字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接
    • ② 加法运算：只要 + 两边都是数字的时候，就会进行数学运算

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
    var a = 100
    var a1 = String(a)
    console.log(a, a1)               //100 100
    console.log(typeof a, typeof a1) //number string

    var b
    var b1 = String(b)
    console.log(b, b1)               //undefined undefined
    console.log(typeof b, typeof b1) //undefined string

    var c = null
    var c1 = String(c)
    console.log(c, c1)               //null null
    console.log(typeof c, typeof c1) //object string

    var d = 100
    var d1 = d.toString()
    console.log(d, d1)               //100 100
    console.log(typeof d, typeof d1) //number string

    //var e = null
    //var e1 = e.toString()            //null不支持toString，报错！！！
    //console.log(e, e1)
    //console.log(typeof e, typeof e1)

    var x = 100
    var y = x + ""
    console.log(x, y)                //100 100
    console.log(typeof x, typeof y)  //number string
</script>

1.7.3 类型转布尔

  1. Boolean(变量)
    • 在js中，只有' '(空格)、0、null、undefined、NaN，这些是 false
    • 其他都是 true（空格也是 true）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var a = ""
    var b = 0
    var c = null
    var d
    var e = NaN
    console.log("Boolean(a) = ", Boolean(a))        //false
    console.log("Boolean(b) = ", Boolean(b))        //false
    console.log("Boolean(c) = ", Boolean(c))        //false
    console.log("Boolean(d) = ", Boolean(d))        //false
    console.log("Boolean(e) = ", Boolean(e))        //false

    var space = " "
    console.log("Boolean(space) = ", Boolean(space)) //true
</script>

1.8 运算符

1.8.1 数学运算符

+

  • 只有符号两边都是数字的时候才会进行加法运算
  • 只要符号任意一边是字符串类型，就会进行字符串拼接

-

  • 执行减法运算
  • 会自动把两边都转换成数字运算

*

  • 执行乘法运算
  • 会自动把两边都转换成数字进行运算

/

  • 执行除法运算
  • 会自动把两边都转换成数字进行运算

%

  • 执行取余运算
  • 会自动把两边都转换成数字进行运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    /* + - * / */
    var a = 10
    var b = 20
    console.log(a + b) //30

    console.log(1 + "2"*3 + 4)  //11

    /* % */
    var x = 10
    var y = 3
    console.log(x % y) //1 (余数)
    //应用：时间转换
    var d = 1000 //分钟
    var h = parseInt(d / 60)  //小时
    var m = d % 60            //分钟
    console.log(h + ":" + m)  //16:40
</script>

1.8.2 赋值运算符

=

  • 就是把 = 号右边的赋值给等号左边的变量
  • var num = 100，就是把100赋值给num变量，那边num变量的值就是100

+=

  • a += 10 等价于 a = a + 10

-=

  • a -= 10 等价于 a = a - 10

*=

  • a *= 10 等价于 a = a * 10

/=

  • a /= 10 等价于 a = a / 10

%=

  • a %= 10 等价于 a = a % 10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    var a = 10
    console.log(a) //10

    //交换两个数
    var m = 5
    var n = 6
    var c
    c = m
    m = n
    n = c
    console.log(m, n)  //6 5

    /* += -= *= /= %= */
    var num = 1
    num += 1
    console.log(num)  //2
</script>

1.8.3 比较运算符

结果一定是 boolean 值，即 true 或 false

== 等于，只比较值

===等于，比较的是值和数据类型

!= 不等于，只比较值

!== 不等于，比较的是值和数据类型

> 大于

< 小于

>= 大于等于

<= 小于等于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var sum = 100
    console.log(sum > 200) //false

    var age = "22"
    console.log(age == 22)  //true
    console.log(age === 22) //false
    //强制转换
    console.log(parseInt(age) === 22) //true

    console.log("----------")
    console.log(true == 1)  //true
    console.log(true === 1) //false

    console.log("----------")
    console.log(""==0)         //true
    console.log(""===0)        //false
    console.log(undefined==0)  //false
    console.log(undefined===0) //false
</script>

1.8.4 逻辑运算符

&& 与 运算

|| 或 运算

! 非，即取反 运算，true 变 false，false 变 true

  • 特殊1：!!a 这种写法是为了，把 a 转换为布尔值
  • 特殊2：&&， || 短路用法，与 遇到第一个条件为假，则不执行后面的条件运算；或 遇到第一个条件为真，则不执行后面的条件运算

1.8.5 自增自减运算符

++ 自增运算，前置++ 和 后置++

  • 前置++，即 ++a，会先+1，再返回
  • 后置++，即 a++，会先返回，再+1

-- 自减运算，前置– 和 后置 –

  • 前置–，即 –a，会先-1，再返回
  • 后置–，即 a–，会先返回，再-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    /* ++ 与 -- 同理 */
    var a = 10
    console.log(++a) //11
    console.log(a++) //11
    console.log(a)   //12
    /* 考验1 */
    var n = 10
    var res = ++n + n++ + ++n;  //11 + 11 + 13
    console.log(n, res);        //13 35
    /* 考验2 */
    var m = 10
    res = m++ + --m + m-- + ++m;      //10 + 10 + 10 + 10
    console.log(m, res)               //10 40
</script>

1.8.6 三目运算符

三目运算，即由两个运算符号组成的逻辑运算语句。

语法：条件 ? 条件为true时执行运算1 : 条件为false的时候执行运算2

1
2
3
4
5
var age = 18;
age > 18 ? alert('已经成年') : alert('没有成年')

//满200减10，满100减5
sum >= 200 ? sum - 10 : (sum >= 100 ? sum - 5 : sum)

1.9 分支结构

js 代码都是从上往下，从左往右执行的顺序，条件分支可以控制代码执行的逻辑。

1.9.1 if-else 分支语句

语法：

1
2
3
if (条件1) {
  条件1为true，要执行的代码
}

扩展：

1
2
3
4
5
6
7
8
9
if (条件1) {
  条件1为true，要执行的代码
} else if (条件2) {
  条件2为true，要执行的代码
} else if (条件n) {
  条件n为true，要执行的代码
} else {
    条件1,2,n都为false，要执行的代码
}

1.9.2 switch-case 分支语句

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch (变量) {
    case 值1:
        变量===值1时，要执行的代码
        break
    case 值2:
        变量===值2时，要执行的代码
        break
    case 值n:
        变量===值n时，要执行的代码
        break
    default:
        没有匹配的值时，默认执行的代码
        break
}

注意：

  • switch 的判断变量 与 值是否相等时，使用的是 === 值和类型都相等
  • switch 语句中判断的变量 和 值 中尽量不要写表达式，写具体的值是规范，根据情况使用
  • break 尽可能不能省略，除非要匹配多个 case 条件，但是可读性会降低，根据情况使用，如加注释

1.9.3 while 循环语句

先进行条件判断，决定是否执行以及执行次数。

组成：①初始化 ②条件判断 ③要执行的代码 ④自身改变

语法：

1
2
3
while (条件) {
    满足条件就执行的代码
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    var n = 0

    while(n < 10) {
        console.log("hello")
        n++
    }
    /* 案例1：求1-100所有数字的和 */
    var x = 1
    var sum = 0
    while(x <= 100) {
        sum += x
        x++
    }
    console.log(sum) //5050

    /* 案例2：求一个数字的阶乘 */
    var y = 5
    var res = 1
    while(y > 0) {
        res *= y
        y--
    }
    console.log(res);  //120
</script>

1.9.4 do-while 循环语句

先不管条件，先执行一次，然后再开始进行条件判断。

语法：

1
2
3
do {
   第一次执行和条件成立循环执行的代码
} while (条件)

示例：

1
2
3
4
5
6
7
8
9
10
<script>
    do{
        var res = prompt("请输入你的名字：")
        if (res) {
            document.write(res)
        } else {
            alert("你还没有输入名字！")
        }
    } while(!res)
</script>

1.9.5 for 循环语句

语法：

1
2
3
for (var i = 0; i < 10; i++) {
    要执行的代码
}

示例：

1
2
3
4
5
6
7
8
9
for(var i = 0; i < 10; i++) {
    console.log("i = ", i)
}

var sum = 0
for(var i = 1; i <= 100; i++) {
    sum += i
}
console.log(sum)

1.9.6 break 终止循环

在循环没有进行完毕的时候，可以根据其他条件通过break进行提前终止循环。

跳出循环，就可以使用该关键字。

示例：

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
    if (i === 5) {
        break
    }
    要执行的代码
}

1.9.7 continue 结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环。

跳过本次循环，就可以用该关键字。

示例：

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
    if (i === 5) {
        continue
    }
    要执行的代码
}

案例1：求质数

质数，只能被1和自身整除的自然数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var n = 19;
    var isZhiShu = true
    for(var i = 2; i <= n/2; i++) {
        if (n % i === 0) {
            isZhiShu = false
            break
        }
    }
    if (isZhiShu) {
        console.log("是质数")
    } else {
        console.log("不是质数")
    }
</script>

案例2：九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    span{
        display: inline-block;
        width: 100px;
        height: 30px;
        font-size: 20px;
    }
</style>
<script>
    for(var m = 1; m <= 9; m++) {
        for(var n = 1; n <= m; n++) {
            document.write("<span>" + n + " * " + m + " = " + m*n + "</span>")
        }
        document.write("<br>")
    }
</script>

效果：

image-20251205174952687

1.10 函数

1.10.1 语法

定义一个函数：

  • 声明式：【推荐】(会预解析) ，定义与调用无所谓先后，先调用或后调用都可以生效
1
2
3
function fn() {
    //代码
}
  • 赋值式：只能先定义后调用
1
2
3
var fn = function() {
    //代码
}

作用：代码块进行封装，方便使用时，随时调用。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    /* ①声明式 */
    function test1() {
        console.log("我是test1函数")
    }
    /* 函数调用 */
    test1()

    /* ②赋值式 */
    var test2 = function() {
        console.log("我是test2函数")
    }
    /* 函数调用 */
    test2()
</script>

1.10.2 参数

函数传递值使用 参数，分为

  • 形参：函数定义时()内写的参数，用于接收实参
  • 实参：调用时可以传参，可以不传参
1
2
3
4
5
6
/* 函数定义 */
function fn (形参) {
    //代码
}
/* 函数调用 */
fn(实参)

示例：

1
2
3
4
5
6
7
8
9
function fn (a, b) {
    if (a === undefined || b === undefined) {
        //console.error("请传入参数a,b")
        a = 0
        b = 0
    }
    console.log("函数fn的参数值是：", a, b)
}
fn(1, 2)

函数内对与参数传递时，习惯的两种操作：

  1. 给默认值
  2. 给提示和警告

1.10.3 返回值

return 返回的意思，给函数一个 返回值 和 终端函数

  • 如果函数不需要返回值时，可以不写
  • return 后面的代码，不会执行
1
2
3
4
function fn() {
    var res = 代码
    return res
}

1.10.4 预解析

js 代码在运行的时候，会经历两个环节 解释代码 和 执行代码

  • 解释代码：预解析，会将声明和定义提前进行解析，调用时则不分先后，预解析有两类
    • 声明式函数
    • var 关键字
  • 执行代码

1.10.5 重名问题

重名时，同一个script标签内才有同名覆盖效果：

  • 同为函数的情况，在预解析阶段逐个解析，后来的会覆盖前面的。切记声明提升(覆盖)无法跨 script 标签。
  • 变量与函数名相同时
    • ① 变量先被赋值的话，此时变量定义和函数定义预解析完后，名字继续被赋值，则为赋值结果
    • ② 函数先被调用的话，此时变量定义和函数定义预解析完后，先执行函数调用，再继续赋值

1.10.6 作用域

全局作用域

  • 最大的作用域
  • 定义的变量可以在任何地方使用，可以跨script标签
  • 页面打开的时候，浏览器会自动给我们生成一个全局作用域 window
  • 这个作用域会一直存在，直到页面关闭才销毁

局部作用域

  • 局部作用域只能在局部作用域的内部使用
  • 在JS中只有函数能生成一个局部作用域，别的都不行
  • 每一个函数，都是一个局部作用域

访问规则 就近访问原则。

访问规则：

自己的作用域 >> 上一级作用域 >> 继续上一级作用域 >> 全局作用域 >> 都没有就报错(该变量 is not defined)

赋值规则 就近赋值原则。

赋值规则：

自己的作用域 >> 上一级作用域 >> 继续上一级作用域 >> 全局作用域 >> 都没有就将其定义为全局变量，再给它赋值

2. 引用数据类型

2.1 对象

对象就是一个键值对的集合类型。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    /* 1.对象的创建 */
    var obj = {}
    console.log(obj)

    /* 1.1 字面量方式 */
    var obj1 = {
        name: "张三",
        age: 18,
        sex: "男"
    }
    console.log(obj1)

    /* 1.2 构造函数方式 */
    var obj2 = new Object({
        name: "李四",
        age: 20,
        sex: "女"
    })
    console.log(obj2)
</script>

2.1.1 对象的增删改查

obj["key"] = value 推荐使用此方式，可以规避很多问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
    // 增
    var obj = {}
    console.log(obj)    // {}
    obj.name = "张三"
    obj.age = 18
    obj.sex = "男"
    console.log(obj)    // {name: "张三", age: 18, sex: "男"}
    // 查
    document.write("姓名是：" + obj.name)
    document.write("年龄是：" + obj.age)
    document.write("性别是：" + obj.sex)
    // 改
    obj.name = "李四"
    obj.name2 = "王五"
    console.log(obj)    // {name: "李四", age: 18, sex: "男", name2: "王五"}
    // 删
    delete obj.name2
    console.log(obj)    // {name: "赵六", age: 18, sex: "男"}

    // 增-2，使用数组的方式添加属性，key的名称必须用引号括起来
    var obj2 = {}
    obj2["name"] = "李四"
    obj2["age"] = 20
    obj2["sex"] = "女"
    console.log(obj2)    // {name: "李四", age: 20, sex: "女"}
    // 查-2，使用数组的方式查询属性值
    document.write("姓名是：" + obj["name"])
    document.write("年龄是：" + obj["age"])
    document.write("性别是：" + obj["sex"])
    // 改-2，使用数组的方式修改属性值
    obj["name"] = "赵六"
    console.log(obj)    // {name: "赵六", age: 18, sex: "男", name2: "王五"}
    // 删-2，使用数组的方式删除属性
    delete obj["age"]
    console.log(obj)    // {name: "赵六", sex: "男"}
</script>

2.1.2 对象的属性遍历

1
2
3
4
for(var key in obj){
    console.log(key)         // key
    console.log(obj[key])    // value
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 遍历对象的属性
    var obj = {
        name: "张三",
        age: 18,
        sex: "男"
    }
    console.log(obj)    // {name: "张三", age: 18, sex: "男"}
    // 遍历对象的属性
    for(var key in obj){
        console.log(key)    // name age sex
        console.log(obj[key])    // 张三 18 男
    }
</script>

2.1.3 不同数据类型的存储

注意：

  • 对象数据类型的内存地址存储在 栈 中，值存储在 堆 中。
  • 内存地址只要相同，那么不论 == 还是 === 结果都相同；内存地址不同时，就算值相同也是 === 不相等的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
    var str1 = "abcd"
    var str2 = str1
    console.log(str1 === str2)    // true，因为str1和str2指向的是同一个字符串，内存地址相同

    var str3 = "abcd"
    console.log(str1 === str3)    // true，因为str1和str3指向的是同一个字符串，内存地址相同

    var obj1 = {
        name: "张三",
        age: 18,
        sex: "男"
    }
    var obj2 = obj1
    console.log(obj1 === obj2)    // true，因为obj1和obj2指向的是同一个对象，内存地址相同
    obj2.name = "李四"
    console.log("obj1:", obj1)    // obj1: {name: "李四", age: 18, sex: "男"}

    var o1 = {name: "jerry"}  // 等价于 new object{}, o1指向的是一个对象，内存地址为0x1000
    var o2 = {name: "jerry"}  // 等价于 new object{}, o2指向的是一个对象，内存地址为0x2000
    console.log(o1 == o2)     // false，因为o1和o2是两个不同的对象，内存地址不同
    console.log(o1 === o2)    // false，因为o1和o2是两个不同的对象，内存地址不同

    // 深拷贝
    var newObj = {
        name: "李四",
        age: 20,
        sex: "男"
    }
    var newObj2 = {}
    for(var key in newObj){
        newObj2[key] = newObj[key]
    }
    console.log(newObj2)    // {name: "李四", age: 20, sex: "男"}
    // 改值不再互相影响
    newObj2.name = "王五"
    console.log(newObj2)    // {name: "王五", age: 20, sex: "男"}
</script>

2.2 数组

2.2.1 数组的定义

[值1, 值2, ...] 或者 new Array(值1, 值2, ...) 两种方式创建。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    // 数组的定义
    /* 1.字面量 */
    var arr1 = [1, 2, 3, 4, 5]
    console.log(arr1)    // [1, 2, 3, 4, 5]
    var arrObjs = [
        {name: "张三", age: 18, sex: "男"},
        {name: "李四", age: 20, sex: "男"},
        {name: "王五", age: 22, sex: "男"}
    ]
    console.log(arrObjs)    // [{name: "张三", age: 18, sex: "男"}, {name: "李四", age: 20, sex: "男"}, {name: "王五", age: 22, sex: "男"}]
    /* 2.构造函数 */
    var arr2 = new Array(1, 2, 3, 4, 5)
    console.log(arr2)    // [1, 2, 3, 4, 5]
    // 构造函数创建数组时，若只传递一个参数，该参数为数组的长度
    var array = new Array(5)
    console.log(array)    // [empty * 5], 数组的长度为5，但是数组的元素都是空值
</script>

2.2.2 数组的操作

  • .length 是可读可写的
  • .slice(0) 可以对数组进行深拷贝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
    // 数组的长度：数组中元素的个数
    var arr = [1, 2, 3, 4, 5]
    console.log(arr.length)    // 5
    // length属性是可读可写的
    arr.length = 3
    console.log(arr)    // [1, 2, 3]
    // 清空数组
    // arr.length = 0
    // console.log(arr)    // []

    // 索引：数组中每个元素的位置，从0开始
    console.log(arr[0])    // 1
    console.log(arr[1])    // 2
    console.log(arr[2])    // 3
    console.log(arr[3])    // undefined，因为索引3的位置没有元素
    arr[0] = "Jerry"
    console.log(arr)    // ["Jerry", 2, 3]
    arr[3] = "Tom"
    console.log(arr)    // ["Jerry", 2, 3, "Tom"]

    // 遍历数组
    for(var i = 0; i < arr.length; i++){
        console.log(arr[i])    // "Jerry", 2, 3, "Tom"
    }

    // 复制数组
    var newArr = arr.slice(0)
    console.log(newArr)    // ["Jerry", 2, 3, "Tom"]

    // 改值不再互相影响
    newArr[0] = "张三"
    console.log(newArr)    // ["张三", 2, 3, "Tom"]
    console.log(arr)    // ["Jerry", 2, 3, "Tom"]

    // 数组的方法
    // 1.添加元素
    newArr.push("新元素")
    console.log(newArr)    // ["张三", 2, 3, "Tom", "新元素"]
    // 2.删除元素
    newArr.pop()
    console.log(newArr)    // ["张三", 2, 3, "Tom"]
</script>

2.2.3 数组的排序

1
2
3
4
5
6
7
var arr = [3, 2, 1, 4]
arr.sort()
console.log(arr)    // [1, 2, 3, 4]
arr.sort(function(a, b){
    return b - a
})
console.log(arr)    // [4, 3, 2, 1]
  • 冒泡排序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 冒泡排序: 每次比较相邻的两个元素, 如果第一个元素大于第二个元素, 就交换它们的位置, 一次比较完成后, 最大的元素就会被排到最后面, 然后再对前面的元素进行比较, 直到所有元素都排好序
function bubbleSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
}
bubbleSort(arr)
console.log(arr)    // [1, 2, 3, 4]
  • 快速排序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 快速排序: 选择一个基准元素, 把数组分成两个子数组, 一个子数组的元素都小于基准元素, 另一个子数组的元素都大于基准元素, 然后对这两个子数组进行快速排序, 直到所有元素都排好序
function quickSort(arr) {
    // 递归结束条件: 数组长度小于等于1, 直接返回数组
    if (arr.length <= 1) {
        return arr
    }
    // 选择基准元素: 这里选择第一个元素作为基准元素
    var pivot = arr[0]
    var left = []
    var right = []
    // 遍历数组, 把小于基准元素的元素放到左边子数组, 大于基准元素的元素放到右边子数组
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i])
        } else {
            right.push(arr[i])
        }
    }
    // 递归调用快速排序, 对左右子数组进行排序, 并合并结果
    return quickSort(left).concat(pivot, quickSort(right))
}
console.log(quickSort(arr))    // [1, 2, 3, 4]

2.2.4 数组常用方法

注意：以下方法都会修改原数组内容。

  • .push() 向数组末尾添加元素，返回数组长度
  • .pop() 删除数组最后一个元素，返回该删除元素
  • .unshift() 向数组开头添加元素，返回数组长度
  • .shift() 删除数组的第一个元素，返回该删除元素
  • .splice() 删除数组指定的一个或多个元素，返回该删除元素
  • .reverse() 颠倒数组中的元素顺序，返回该数组
  • .sort([function]) 对数组进行排序，默认升序，可自定义回调函数指定排序规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
    var arr = [1, 2, 3]
    // push: 向数组的末尾添加一个或多个元素, 并返回新的数组长度
    var res = arr.push("Jerry")
    console.log(arr, res)    // [1, 2, 3, "Jerry"] 4

    // pop: 删除数组的最后一个元素, 并返回该删除的元素
    var res2 = arr.pop()
    console.log(arr, res2)    // [1, 2, 3] "Jerry"

    // unshift: 向数组的开头添加一个或多个元素, 并返回新的数组长度
    var res3 = arr.unshift("Tom")
    console.log(arr, res3)    // ["Tom", 1, 2, 3] 4

    // shift: 删除数组的第一个元素, 并返回该删除的元素
    var res4 = arr.shift()
    console.log(arr, res4)    // [1, 2, 3] "Tom"

    // splice: 参数1: 删除的起始位置, 参数2: 删除的元素个数。删除数组的元素, 并返回该删除的元素
    var res5 = arr.splice(1, 2)
    console.log(arr, res5)     // [1] [2, 3]

    // splice: 参数1: 添加的起始位置, 参数2: 删除的元素个数(0表示不删), 参数3: 添加的元素。向数组的指定位置添加一个或多个元素, 并返回该删除的元素
    var res6 = arr.splice(1, 0, "Jerry", "Tom")
    console.log(arr, res6)    // [1, "Jerry", "Tom"] []

    // reverse: 颠倒数组中元素的顺序, 并返回该数组
    arr = [2, 4, 3, 1, 5, 6]
    arr.reverse()
    console.log(arr)    // [6, 5, 1, 3, 4, 2]

    // sort: 对数组的元素进行排序, 并返回该数组。默认升序
    arr.sort()
    console.log(arr)    // [1, 2, 3, 4, 5, 6]
    // sort: 对数组的元素进行排序, 并返回该数组。可以传递一个回调函数作为参数, 自定义排序规则
    arr.sort(function(a, b){
        //return a - b    // 升序
        return b - a    // 降序
    })
    console.log(arr)    // [6, 5, 4, 3, 2, 1]
</script>

注意：以下方法不会修改原数组。

  • .concat() 合并数组
  • .join() 数组转换为字符串，可指定分隔符，默认逗号
  • .slice() 截取数组，.slice(0) 深拷贝原数组
  • .indexOf() 查找元素对应的索引值，-1未找到
  • .lastIndexOf() 查找数组中元素的最后一个索引值，-1未找到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    // concat() 方法，合并数组，不影响原数组
    var arr1 = [1, 2, 3]
    var arr2 = [4, 5, 6]
    console.log(arr1)    // [1, 2, 3]
    console.log(arr2)    // [4, 5, 6]

    var arr3 = arr1.concat(arr2, 7, [8, 9])
    console.log(arr3)    // [1, 2, 3, 4, 5, 6, 7, 8, 9]

    // 深拷贝数组，不影响原数组
    var arr4 = arr1.concat();
    arr4.pop()
    console.log(arr1, arr4)    // [1, 2, 3] [1, 2]

    // join() 方法，将数组转换为字符串，不影响原数组, 可以指定分隔符，默认逗号
    var arr5 = [1, 2, 3, 4, 5, 6]
    console.log(arr5)    // [1, 2, 3, 4, 5, 6]
    console.log(arr5.join(""))     // 123456
    console.log(arr5.join())       // 1,2,3,4,5,6
    console.log(arr5.join("-"))    // 1-2-3-4-5-6

    // slice() 方法，截取数组，不影响原数组
    var arr6 = [1, 2, 3, 4, 5, 6, 2, 3]
    console.log(arr6)    // [1, 2, 3, 4, 5, 6, 2, 3]
    console.log(arr6.slice(0, 3))    // [1, 2, 3]
    console.log(arr6.slice(3))    // [4, 5, 6, 2, 3]
    console.log(arr6)    // [1, 2, 3, 4, 5, 6, 2, 3]

    // 深拷贝数组，不影响原数组
    var arr7 = arr6.slice(0)
    arr7.pop()
    console.log(arr6, arr7)    // [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]

    // indexOf() 方法，查找数组中元素的索引，不影响原数组。-1表示未找到
    console.log(arr6.indexOf(3))    // 2
    console.log(arr6.indexOf(99))    // -1

    // lastIndexOf() 方法，查找数组中元素的最后一个索引，不影响原数组。-1表示未找到
    console.log(arr6.lastIndexOf(3))    // 7
    console.log(arr6.lastIndexOf(99))    // -1
</script>

数组的其他复杂常用方法：

  • .forEach() 遍历数组，传回调函数指定遍历规则
  • .map() 映射数组，传回调函数指定映射规则
  • .filter() 过滤数组，传回调函数指定过滤规则，返回新数组
  • .every() 检测数组所有元素是否符合回调函数指定的规则
  • .some() 检测数组任一元素是否符合回调函数指定的规则
  • .find() 查找数组符合回调函数指定的规则的第一个元素
  • .reduce() 累加器，将数组元素都累加起来，字符串则是拼接起来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<style>
    li{
        margin-left: 20px;
    }
</style>
<script>
    // .forEach() 遍历数组
    var arr = ["aaa", "bbb", "ccc", "ddd"]
    arr.forEach(function(item, index){
        console.log(item, index)
    })

    // .map() 映射数组
    var newArr = arr.map(function(item, index){
        // 映射数组，将每个元素的首字母大写
        // return item.slice(0, 1).toUpperCase() + item.slice(1)
        return "<li>" + item + "</li>"
    })
    console.log(newArr)    // ["<li>aaa</li>", "<li>bbb</li>", "<li>ccc</li>", "<li>ddd</li>"]
    //页面没有显示li标签的圆点，是因为li标签是行内元素，没有默认的margin-left属性
    document.write(newArr.join(""))    // <li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li>

    // .filter() 过滤数组，返回的是一个新数组
    var filterArr = arr.filter(function(item, index){
        // 过滤数组，将数组中大于"bbb"的元素过滤出来
        return item > "bbb"
    })
    console.log(filterArr)    // ["ccc", "ddd"]

    // .every() 所有，检测数组所有元素是否都符合指定条件
    var everyRes = arr.every(function(item, index){
        // 检测数组所有元素是否都大于"bbb"
        return item > "bbb"
    })
    console.log(everyRes)    // false

    // .some() 任一，检测数组是否有元素符合指定条件
    var someRes = arr.some(function(item, index){
        // 检测数组是否有元素大于"bbb"
        return item > "bbb"
    })
    console.log(someRes)    // true

    // .find() 查找数组中符合指定条件的第一个元素
    var findRes = arr.find(function(item, index){
        // 查找数组中第一个大于"bbb"的元素
        return item > "bbb"
    })
    console.log(findRes)    // "ccc"

    // .reduce() 累加器，将数组元素累加起来
    var reduceRes = arr.reduce(function(prev, item){
        // 累加数组元素
        return prev + "-" + item
    })
    console.log(reduceRes)    // "aaa-bbb-ccc-ddd"
</script>

2.2.5 数组的去重

方法有3：

  1. 利用查找indexOf()返回-1未找到的特性，遍历
  2. 利用对象的属性名不能重复的特性，遍历
  3. 利用 new Set() 直接去重后，再利用 Array.from() 转换为数组
1
var newArr = Array.from(new Set(arr))

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    var arr = [1, 2, 3, 4, 5, 6, 2, 3]
    console.log(arr)    // [1, 2, 3, 4, 5, 6, 2, 3]
    // 数组的去重方式1，利用查找indexOf()返回-1未找到的特性
    var newArr = []
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) === -1){
            newArr.push(arr[i])
        }
    }
    console.log("indexOf去重：", newArr)    // [1, 2, 3, 4, 5, 6]

    // 数组的去重方式2，利用对象的属性名不能重复的特性
    var newArr2 = []
    var obj = {}
    for(var i = 0; i < arr.length; i++){
        if(!obj[arr[i]]){
            newArr2.push(arr[i])
            obj[arr[i]] = true
        }
    }
    console.log("对象属性名去重：", newArr2)    // [1, 2, 3, 4, 5, 6]

    // 数组的去重方式3，利用 new Set() 去重后，再利用 Array.from() 转换为数组
    var newArr3 = Array.from(new Set(arr))
    console.log("Array.from()去重：", newArr3)    // [1, 2, 3, 4, 5, 6]
</script>

2.3 字符串

2.3.1 字符串的创建

  • 字面量
1
var str = "hello"
  • 构造函数
1
var str = new String("hello")

案例：统计字符出现的次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    var str = "helloworld"
    var obj = {}
    for (var i = 0; i < str.length; i++) {
        var char = str[i]
        // obj[char] 不是 undefined 也不是 null，说明 obj 中已经有了 char 这个属性，结果是 true
        if (obj[char]) {
            obj[char]++
        } else {
            obj[char] = 1
        }
    }
    console.log(obj)    // {h: 1, e: 1, l: 3, o: 2,  : 1, w: 1, r: 1, d: 1}
</script>

2.3.2 字符串常用方法

  • .length 字符串长度
  • .charCodeAt(索引) 索引对应的字符
  • String.fromCharCode(ASCII码) ASCII码转字符串
  • .toUpperCase() 转大写
  • .toLowerCase() 转小写
  • .substr() 截取字符串，substr(开始索引, 长度)
  • .substring() 截取字符串，substring(开始索引, 结束索引<不含>)
  • .slice() 截取字符串，slice(开始索引, 结束索引<不含>)
  • .replace() 替换字符串中指定内容，支持正则表达式
  • .split(分隔符) 字符串转数组
  • .indexOf() 查找子字符串首次出现的索引位置
  • .lastIndexOf() 查找子字符串最后一次出现的索引位置
  • .concat() 字符串拼接
  • .trim() 移除字符串首尾空格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
    var str = "hello world"
    console.log(str.length)    // 11

    // charAt(index) 返回索引对应的字符
    console.log(str.charAt(4))    // "o"

    // charCodeAt(index) 返回索引对应的字符的 Unicode 编码
    console.log(str.charCodeAt(4))    // 111
    var arr = []
    for (var i = 65; i <= 90; i++) {
        arr.push(String.fromCharCode(i))
    }
    console.log(arr)    // ["A", "B", "C", ..., "Z"]

    // toUpperCase() 把字符串转换为大写
    console.log(str.toUpperCase())    // "HELLO WORLD"
    // toLowerCase() 把字符串转换为小写
    console.log(str.toLowerCase())    // "hello world"
    // 首字母大写：substr(开始索引, 长度)、substring(开始索引, 结束索引<不含>)、slice(开始索引, 结束索引<不含>)
    console.log(str.substr(0, 1).toUpperCase() + str.substr(1))    // "Hello world"
    console.log(str.substring(0, 1).toUpperCase() + str.substring(1))    // "Hello world"
    console.log(str.slice(0, 1).toUpperCase() + str.slice(1))    // "Hello world"

    // replace(oldStr, newStr) 替换字符串中的指定内容 - 也支持正则表达式
    console.log(str.replace("world", "universe"))    // "hello universe"

    // split(separator) 把字符串转换为数组
    console.log(str.split(" "))    // ["hello", "world"]

    // indexOf(str) 返回 str 首次出现的索引位置，没有返回 -1
    console.log(str.indexOf("world"))    // 6
    console.log(str.indexOf("universe"))    // -1
    // lastIndexOf(str) 返回 str 最后一次出现的索引位置，没有返回 -1
    console.log(str.lastIndexOf("world"))    // 6
    console.log(str.lastIndexOf("universe"))    // -1

    // concat(str1, str2, ...) 连接两个或多个字符串，与 + 号拼接相同
    console.log(str.concat(" ", "universe"))    // "hello world universe"

    // trim() 移除字符串首尾空格，不包括内部空格。trimStart()/trimLeft() - 去掉首空格, trimEnd()/trimRight() - 去掉尾空格
    console.log("   hello world   ".trim())    // "hello world"
    console.log("   hello world   ".trimLeft())    // "hello world   "
    console.log("   hello world   ".trimRight())    // "   hello world"
    console.log("   hello world   ".trimEnd())    // "   hello world"
    console.log("   hello world   ".trimStart())    // "hello world   "
</script>

案例：字符串模糊查找

1
2
3
4
5
6
7
8
<script>
    var arr = ["hello", "world", "universe", "javascript", "typescript", "python"]
    //过滤出包含"script"的字符串
    var res = arr.filter(function(item){
        return item.indexOf("script") > -1   // !== 或 != 或 > 都可以
    })
    console.log(res)    // ["javascript", "typescript"]
</script>

2.3.3 json格式字符串(★)

主要用于前后端数据发送到服务器、服务器返回的数据格式，统一标准。

  • JSON.parse(jsonStr) json字符串解析为JSON对象。
  • JSON.stringify(jsonObj) JSON对象序列化为json字符串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    // json格式字符串
    var jsonStr = '{"name": "张三", "age": 18, "sex": "男"}'
    console.log(jsonStr)           // {"name": "张三", "age": 18, "sex": "男"}
    console.log(typeof jsonStr)    // string
    console.log(jsonStr.name)      // undefined，因为jsonStr是一个字符串，不是一个对象

    // json字符串转JSON对象，解析json格式字符串
    var jsonObj = JSON.parse(jsonStr)
    console.log(jsonObj)           // {name: "张三", age: 18, sex: "男"}
    console.log(typeof jsonObj)    // object
    console.log(jsonObj.name)      // 张三

    // JSON对象转json字符串，序列化json格式字符串
    var jsonStr2 = JSON.stringify(jsonObj)
    console.log(jsonStr2)           // {"name":"张三","age":18,"sex":"男"}
</script>

2.3.4 模版字符串(★)

es6支持的模版字符串格式。

语法：

  1. ` ` 双反引号包裹
  2. ${key} 通配符替换，通配符支持计算表达式、三目运算符等 （类似Linux shell脚本的变量取值格式）
1
2
3
4
5
6
// 模版字符串 - es6支持
var name = "张三"
var age = 18
var sex = 1
var str = `姓名：${name}，年龄：${age+10}，性别：${sex===1?'男':'女'}`
console.log(str)    // 姓名：张三，年龄：28，性别：男

应用案例：

1
2
3
4
5
6
7
8
9
// 将li标签拼接替换为模版字符串格式
var arr = ["aaa", "bbb", "ccc", "ddd"]
var newArr = arr.map(function(item, index){
    // return "<li>" + item + "</li>"
    return `<li style="margin-left: 20px;">${item}</li>`
})
console.log(newArr)    // ["<li>aaa</li>", "<li>bbb</li>", "<li>ccc</li>", "<li>ddd</li>"]
//页面没有显示li标签的圆点，是因为li标签是行内元素，没有默认的margin-left属性
document.write(newArr.join(""))    // <li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li>

2.4 数字

2.4.1 数字的定义

Number 数字类型。Math 数学类型。

  • Math.random() 0-1之间的随机数，如 0.12177631585793602
  • Math.round() 四舍五入取整
  • Math.floor() 向下取整（舍弃小数）
  • Math.ceil() 向上取整（小数进位）
  • Math.max(...) 取最大值
  • Math.min(...) 取最小值
  • Math.pow(底数, 指数) 求次幂
  • Math.sqrt() 求平方根
  • Math.abs() 求绝对值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
    var num = 123.45678
    console.log(num)            // 123.45678
    console.log(typeof num)     // number
    // toFixed(n) 保留指定小数位数n，四舍五入，不够会补0
    var sum = num.toFixed(2)
    console.log(sum)            // 123.46
    console.log(typeof sum)     // string
    sum = Number(num.toFixed(2))
    console.log(sum)            // 123.46
    console.log(typeof sum)     // number

    /* Math对象 */
    // Math.PI 圆周率π
    console.log(Math.PI)            // 3.141592653589793
    // Math.random() 0~1之间的随机数
    console.log(Math.random())      // 0~1之间的随机数
    // Math.round() 四舍五入取整
    console.log(Math.round(1.5))    // 2
    console.log(Math.round(1.4))    // 1
    // Math.floor() 向下取整
    console.log(Math.floor(1.5))    // 1
    console.log(Math.floor(1.4))    // 1
    // Math.ceil() 向上取整
    console.log(Math.ceil(1.5))    // 2
    console.log(Math.ceil(1.4))    // 2
    // Math.max() 求最大值
    console.log(Math.max(1,2,3))    // 3
    // Math.min() 求最小值
    console.log(Math.min(1,2,3))    // 1
    // Math.pow(底数, 指数) 求幂
    console.log(Math.pow(2,3))    // 8
    // Math.sqrt() 求平方根
    console.log(Math.sqrt(9))    // 3
    // Math.abs() 求绝对值
    console.log(Math.abs(-1))    // 1
</script>

2.4.2 随机整数

1
2
3
4
5
6
7
8
<script>
    // Math.random() 0~1之间的随机数
    console.log(Math.random())                      // 0~1之间的随机数，小数
    // 求0~100之间的随机整数
    console.log(Math.floor(Math.random() * 100))     // 0~99之间的随机整数
    // 求1~100之间的随机整数
    console.log(Math.floor(Math.random() * 100) + 1)    // 1~100之间的随机整数
</script>

函数封装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//函数 start-end（包含start和end）
function getRandomInt(start, end) {
    if (start > end) {
        var temp = start;
        start = end;
        end = temp;
    }
    start = Math.ceil(start);   // 确保start是整数，且不小于start，向上取整
    end = Math.floor(end);   // 确保end是整数，且不大于end，向下取整
    return Math.floor(Math.random() * (end - start + 1)) + start;
}
// 调用函数
console.log("1~100之间的随机整数:", getRandomInt(1, 100))    // 1~100之间的随机整数
console.log("1~100之间的随机整数:", getRandomInt(100, 1))    // 1~100之间的随机整数

2.5 时间

2.5.1 时间的定义

Date 是js提供的内置函数，专们用来获取时间的。

  • new Date(参数, ...) 创建时间对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    // Date对象：中国时间，默认东八区 GMT+0800
    var date = new Date()
    console.log(date)            // Mon Dec 08 20xx 12:28:57 GMT+0800 (中国标准时间)
    console.log(typeof date)     // object

    // 传参-毫秒
    var date1 = new Date(1000)   // 1000ms 即 1s
    console.log(date1)           // Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
    // 传参-日期字符串
    // var date2 = new Date("1970-01-01 08:00:00")
    var date2 = new Date("1970/01/01 08:00:00")
    console.log(date2)           // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
    // 传参-多个参数
    var date3 = new Date(1970, 0, 1, 8, 0, 0)
    console.log(date3)           // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
</script>

2.5.2 时间常用方法

getXXX/setXXX-年/月/日/时/分/秒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    // Date对象：中国时间，默认东八区 GMT+0800
    var date = new Date()
    console.log(date)            // Mon Dec 08 20xx 12:28:57 GMT+0800 (中国标准时间)
    console.log(typeof date)     // object

    // 日期方法
    console.log(date.getFullYear())     // 年：20xx
    console.log(date.getMonth())        // 月：11（0~11） 真实月份需要+1
    console.log(date.getDate())         // 日：8
    console.log(date.getDay())          // 周：1（0~6）   周日是0，周一~六 1~6
    console.log(date.getHours())        // 时：12
    console.log(date.getMinutes())      // 分：28
    console.log(date.getSeconds())      // 秒：57
    console.log(date.getMilliseconds()) // 毫秒：573

    // 时间戳：时间距离1970年1月1日00:00:00的毫秒数
    console.log(date.getTime())        // 时间戳：1653280060490

    // 设置时间戳
    date.setTime(1653280060490)
    console.log(date)                   // Mon Dec 08 20xx 12:28:57 GMT+0800 (中国标准时间)
    date.setFullYear(2077)
    console.log(date)                   // Mon Dec 08 2077 12:28:57 GMT+0800 (中国标准时间)
    date.setMonth(10)
    console.log(date)                   // Mon Nov 08 2077 12:28:57 GMT+0800 (中国标准时间)
    date.setDate(10)
    console.log(date)                   // Mon Nov 10 2077 12:28:57 GMT+0800 (中国标准时间)
    date.setHours(10)
    console.log(date)                   // Mon Nov 10 2077 10:28:57 GMT+0800 (中国标准时间)
    date.setMinutes(10)
    console.log(date)                   // Mon Nov 10 2077 10:10:57 GMT+0800 (中国标准时间)
    date.setSeconds(10)
    console.log(date)                   // Mon Nov 10 2077 10:10:10 GMT+0800 (中国标准时间)
</script>

2.5.3 定时器(★)

  • var t1 = setTimeout(func) 设置倒计时定时器

  • var t2 = setInterval(func) 设置间隔定时器

  • clearTimeout(t1) 清除倒计时定时器

  • clearInterval(t2) 清除间隔定时器

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<button id="btn1">点击停止倒计时定时器</button>
<button id="btn2">点击停止间隔定时器</button>

<script>
    // 倒计时定时器(异步)：一个3s倒计时的定时器
    var timer1 = setTimeout(function () {
        console.log('3s倒计时结束')
    }, 3000)

    // 间隔定时器（异步）：每隔1s倒计时的定时器
    var timer2 = setInterval(function () {
        console.log('每隔1s打印一次')
    }, 1000)

    console.log(timer1)      // 数字，定时器的唯一标识，代表第几个定时器
    console.log(timer2)      // 数字，定时器的唯一标识，代表第几个定时器

    //直接通过id拿到按钮对象：需要js代码在按钮对象的后面
    console.log(btn1, btn2)

    // 点击按钮1，停止倒计时定时器
    btn1.onclick = function () {
        console.log('点击按钮1，停止倒计时定时器')
        clearTimeout(timer1)
    }

    // 点击按钮2，停止间隔定时器
    btn2.onclick = function () {
        console.log('点击按钮2，停止间隔定时器')
        clearInterval(timer2)
    }
</script>

案例：倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="box"></div>

<script>
    var targetDate = new Date('2077-01-01')

    function getDiffTime(currentDate, targetDate) {
        var diffTime = Math.ceil((targetDate - currentDate) / 1000)
        var day = Math.floor(diffTime / 60 / 60 / 24)
        var hour = Math.floor(diffTime / 60 / 60 % 24)
        var minute = Math.floor(diffTime / 60 % 60)
        var second = Math.floor(diffTime % 60)

        var obj = {
            'day': day,
            'hour': hour,
            'minute': minute,
            'second': second
        }
        return obj
    }

    //每秒调用一次getDiffTime函数，获取当前时间与目标时间的差值
    setInterval(() => {
        var currentDate = new Date()
        //console.log(targetDate - currentDate)          // 时间戳毫秒值
        var dt = getDiffTime(currentDate, targetDate)
        // document.write(`春节倒计时：${dt.day}天${dt.hour}小时${dt.minute}分钟${dt.second}秒`)
        // document.write('<br>')
        var str = `春节倒计时：${dt.day}天${dt.hour}小时${dt.minute}分钟${dt.second}秒`
        // innerHTML 会覆盖之前的内容
        box.innerHTML = str
    }, 1000)
</script>

效果：

chrome-capture-2025-12-08

04_大前端 > 03_JavaScript
#JavaScript #JS
01-JS 基本入门
https://janycode.github.io/2018/04/28/04_大前端/03_JavaScript/01-JS 基本入门/
作者
Jerry(姜源)
发布于
2018年4月28日
许可协议