【JS组成部分】

主要由：

  1. BOM ：全称Browser Object Model，操作浏览器发生变化的属性和方法
  2. DOM ：Document Object Model，操作文档流发生变化的属性和方法
  3. ECMAScript ：JS代码的书写语法和书写规则

【JS的书写位置】

1. 行内式

直接把代码写在标签身上

（1）a标签：书写在href属性上

1
<a href="javascript: JS代码">点我一下</a>

（2）非a标签:书写在行为属性上

1
2
<!-- 以点击事件为例 -->
<div onclick="">点我一下</div>

例如【点我一下】的代码是下方所示：

    <a href="javascript: alert('hello world');">点我一下</a>
例如【点我一下】
的代码是下方所示：
    <div onclick=" alert('hello world') ">点我一下</div>

2. 内嵌式

把代码写在<script></script>标签对内

1
2
3
<script>
    alert('hello world')
</script>

内嵌式JS代码，不需要任何依赖行为，打开页面就会执行。

3. 外链式

书写在一个.js文件内

1
2
<!-- 注意：是script标签的src属性，而不是link标签的href属性 -->
<script src="./test.js"></script>

外链式JS代码，不需要任何依赖行为，打开页面就会执行。

【JS的变量】

定义变量：

1
var num = 100
  1. 变量名可以由“数字、字母、下划线、美元符”组成，并且不能以数字开头。
  2. 变量严格区分大小写
  3. 不能是关键字。如var、for、function等
  4. 最好是一些有意义的单词，可以是拼音（不要用拼音缩写）

【JS的输出】

  • 弹出窗口输出：

    1
    alert(num)

  • 控制台打印输出：

    1
    console.log(num)

  • 页面输出：

    1
    document.write(num)

【JS的数据类型】

【JS的数据】
    - 基本数据类型
        - 数值类型Number（十进制数、科学计数法、其他进制）
        - 字符串类型String（单/双引号包裹）
        - 布尔类型Boolean（true和false）
        - 空类型
            - Undefined（表示没有值）
            - Null（表示有值，但为空值）
    - 引用数据类型
        - 对象数据类型
        - 数组数据类型

typeof

用来检查一个变量的数据类型

1
console.log(typeof num);

【JS基本数据类型转换】

1. 转数值（Number）

1
2
Number(要转换的内容)
// 作用于：字符串、布尔、Undefined、Null
1
2
parseInt(要转换的内容)
// 将字符串转换为整数
1
2
parseFloat(要转换的内容)
// 将字符串转换为浮点数（小数）

2. 转字符串（String）

1
String(要转换的内容)
1
2
要转换的内容.toString()
// 注意Undefined、Null不可使用

3. 转布尔（Boolean）

1
要转换的内容.Boolean()

会被转换为false的内容有0、NaN、''、undefined、null，
其他所有内容都会转换为true。

【JS的运算符】

1. 算数运算符

  • +：进行加法运算

    1. 两边都是数字/布尔时，进行数学运算
    2. 任意一边是字符串时，进行字符串的拼接

  • -：进行减法运算

  • *：进行乘法运算

  • /：进行除法运算

  • %：进行取余运算

2. 赋值运算符

  • =：进行赋值
  • +=：加等于
  • -=：减等于
  • *=：乘等于
  • /=：除等于
  • %=：取余等于

3. 比较运算符

  • >：大于
  • <：小于
  • >=：大于等于
  • <=：小于等于
  • ==：等于
  • ===：全等于
  • !=：不等于（只比较值，不考虑数据类型）
  • !==：不全等（只要值和数据类型任何一个不相等，就是true）

4. 逻辑运算符

  • &&：与（需要两边都是true，结果才为true）
  • ||：或（任意一边是true，结果为true；两边全是false，结果才为false）
  • ! ：非（取反）

5. 自增自减运算符

  • ++
  • --

分为前置和后置

【条件分支语句】

if

1
2
3
if () {
    
}
1
2
3
4
5
if () {
    
} else {

}
1
2
3
4
5
if () {
    
} else if () {
    
}
1
2
3
4
5
6
7
if () {
    
} else if () {
    
} else {

}
  • 案例：判断平年还是闰年？视频地址 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    // 定义一个变量表示年份信息
    var year = 2078

    // 用if语句进行判断
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        console.log(year + '是闰年')
    } else {
        console.log(year + '不是闰年')
    }

switch

1
2
3
4
5
6
7
8
9
switch ( 已知条件 ) {
    case 情况1 :
        执行语句 
        break        // braek表示穿透

    case 情况2 :
        执行语句 
        break
}
1
2
3
4
5
6
7
8
9
10
11
12
switch ( 已知条件 ) {
    case 情况1 :
        执行语句 
        break
        
    case 情况2 :
        执行语句 
        break
// 所有条件都不满足时，执行下方默认代码
    default:
        执行语句 
}
  • 案例：一年中的第几天？视频地址 
    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
    // 准备三个变量，分别表示 年 月 日
    var year = 2008
    var month = 8
    var date = 8

    //再准备一个变量接受统计结果
    var total = 0

    // 使用 switch 累加月份信息
    switch ( month ) {
    case 12: total += 30; // 累加11月天数
    case 11: total += 31; // 累加10月天数
    case 10: total += 30; // 累加9月天数
    case 9 : total += 31; // 累加8月天数
    case 8 : total += 31; // 累加7月天数
    case 7 : total += 30; // 累加6月天数
    case 6 : total += 31; // 累加5月天数
    case 5 : total += 30; // 累加4月天数
    case 4 : total += 31; // 累加3月天数
    case 3 : 
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            total += 29
        } else {
            total += 28
        } // 累加2月天数，平年28，闰年29
    case 2 : total += 31; // 累加1月天数
    }

    // 最后叠加当月天数
    total += date

    // 此时 total 就是当年中的第几天了
    console.log('今天是这一年的第' + total + '天')

【循环语句】

while

1
2
3
4
while ( 循环条件 ) {
    重复执行语句
    …
}
1
2
3
4
5
6
7
8
9
10
11
// 定义初始变量 n
var n = 0
// 条件判断 n < 总数
while (n < 3) {
    // 一段重复代码
    console.log('打你一下')
    // 改变初始值
    n++
}
// 后续代码
console.log('亲你一下')

do while

  1. 初始变量在条件以内时，while和do while一样
  2. 初始变量在条件以外时，while不执行，do while执行一次
1
2
3
4
do {
    重复执行语句
    …
} while ( 条件 )
  • 案例：请回答弹窗问题！ 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // do while 先执行代码，后判断
    do {
        // 在浏览器弹出输入框
        var result = prompt('你爱不爱我？（爱/不爱）')
        // 打印一下用户输入的内容
        console.log(result)
    } while ( result !== '爱' )

    // 回答正确之后
    alert('宝贝我也爱你鸭！')

for

1
2
3
4
for ( 定义初始变量; 条件判断; 改变初始值 ) {
    重复执行语句
    …
}
1
2
3
4
5
6
// for 循环结构
for ( var i = 0; i < 3; i++ ) {
    console.log('打你一下')
}
// 循环结束后
console.log('亲你一下')
  • 案例：打印星号正方形方阵、三角形、九九乘法表（视频教程）
  • 案例：寻找最大公约数、最小公倍数（视频教程）
    （其中最小公倍数代码的初始设定变量应为i = max，看的时候注意一下）

【JS函数】

1. 函数定义阶段

把代码装进“盒子”里

1
2
3
4
function fn() {
    装在盒子里的代码
    …
}

2. 函数调用阶段

把“盒子”里的代码执行

1
函数名()

案例演示

1
2
3
4
5
6
7
// 定义函数
function fn() {
    console.log('我是一个叫做 fn 的函数')
}

// 调用函数
fn()
  1. 定义函数过程中，小括号叫形参。
    是一个特殊的变量，只能在函数内部使用，
    它（们）的值是在函数调用的时候，由实参决定的。
  2. 调用函数过程中，小括号叫实参。
    给形参按照从左到右依次进行赋值，
    每调用一次，赋值一次。
1
2
3
4
5
6
7
8
9
10
11
// 定义函数，添加形参
function fn( a, b ) {
    console.log('我是一个叫做 fn 的函数')
    console.log(a)
    console.log(b)
}

// 调用函数，添加实参
fn( 10, 20 )
// 每次调用，每次赋值
fn( 100, 200 )

3. 函数的返回值

1
2
3
4
5
6
// 定义函数，把函数结果当做返回值
function fn() {
    装在盒子里的代码
    …
    return 结果  
}
  • 案例：计算n的阶乘，计算结果赋值给新的变量 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 定义函数，把函数结果total当做返回值
    function fn( n ) {
        // 定义total变量存放函数结果
        var total = 1
        // 计算n的阶乘
        while (n >= 1) {
            total *= n
            n--
        }

        // 计算结果作为函数的返回值
        return total
    }

    // 调用上面那个函数，求10的阶乘，把结果赋值给r1
    var r1 = fn( 10 )
    // 调用上面那个函数，求12的阶乘，把结果赋值给r2
    var r2 = fn( 12 )

    console.log(r1, r2)
    如果此案例没有return total，调用时控制台会打印undefined无定义的结果

对JS函数的总结：

  1. 函数就是 JS 中的一个 数据类型 而已（看做装代码的盒子）
  2. 函数定义阶段，不执行函数体内代码，调用一次执行一次。
  3. 形参：定义在 函数内部 使用的变量
    实参：函数调用时给 形参赋值 的内容
  4. 在函数内部使用 return 给函数添加一个结果，作为函数的返回值。

【递归函数】

递归函数是函数的一种应用方式，包含递的过程和归的过程。

所以需要满足：（1）调用自身（2）有结束条件

1
2
3
4
5
// 此函数调用了自身，我们称为递归，计算的是n的阶乘
function fn(n) {
    if(n === 1) return 1; //结束条件:n=1
    return n * fn(n - 1); //调用自身
}
  • 案例：求斐波那契数列第n位数字（1、1、2、3、5、8、13、21、34、55 …） 
    1
    2
    3
    4
    function fn(n) {
        if (n==1 || n==2) return 1; //结束条件：n=1或者2
        return fn(n-1) + f(n-2); //调用自身：(n-1)和(n-2)的和就是n
    }

【作用域】

一个变量可以在什么范围内使用

  • 范围：

    1. 全局作用域：一个页面就是一个全局作用域
    2. 私有作用域：只有函数，生成私有作用域

  • 使用：

    1. 定义：声明在什么位置的变量就是哪一个作用域的变量
    2. 访问：自己作用域内有该变量的话那就用自己的，没有的话就用父级的，到全局都没有的话就报错
    3. 赋值：自己给自己作用域某变量赋值，没有的话就赋值父级的，再没有的话就赋值全局的，到全局都没有的话就直接定义该变量为全局变量并赋值

【JS引用数据类型】

1.对象数据类型

对象可以看成一个能放很多书的书架，我们需要哪个内容的时候，只要按照书名拿出来，翻开就能看到内容了。

(1) 创建对象

创建一个对象(Object)：

1
2
3
4
5
//               值(value)
//               “书的内容”
var obj = { hair: '没招' }
//         “书名”
//         键(key)

对象：就是一个“键值对”的集合

一个对象可以有多个键值对，用逗号分隔开。

1
2
3
4
5
6
7
// 创建一个对象
var obj = {
    a: 100,
    b: true,
    c: 'hello world'
}

(2) 对象的操作

就是对象内 键值对 的操作

  • 增：向对象内增加一个键值对

    1
    2
    3
    4
    5
    // 语法1
    obj.name = '小灰狼'

    // 语法2
    obj['age'] = 18     //注意方括号内是字符串形式

  • 删：删除对象内的一个键值对

    1
    2
    3
    4
    5
    // 语法1
    delete.obj.name

    // 语法2
    delete.obj['age']    //注意方括号内是字符串形式

  • 改：修改对象内某键值对的值

    1
    2
    // 和增加键值对的语法是一样的
    //如果没有就增加，如果已经存在就修改并覆盖

  • 查：访问对象内某一个键的值

    1
    2
    3
    4
    5
    // 语法1
    console.log( obj.name )

    // 语法2
    console.log( obj['age'] )    //注意方括号内是字符串形式

2. 数组数据类型

数组（Array）：有序的 数据 的集合

1
var arr = []

数组中可以存放任何数据类型。（字符串要加引号）

1
var arr = [100, true, 'hello world']

(1) 创建数组

和对象数据类型的区别是，数组数据类型每个数据没有键名，但有序号，也叫索引和下标（从0开始）。

1
2
3
4
5
// 创建数组
var arr = [100, true, 'hello world'] 

// 输出数组
console.log( arr )

(2) 数组的操作

  • 长度的操作

    1. 获取长度：console.log( arr.length )（长度是个属性）
    2. 设置长度：arr.length = 3（当成赋值就行）

  • 数据的操作

    1. 获取数据：console.log( arr[2] )（获取索引为2的数据）
    2. 设置数据：arr[2] = 5678（当成赋值就行）

(3) 数组的遍历

1
2
3
4
5
6
7
8
// 创建数组
var arr = [100, 200, 300, 400, 500, 600, 700] 
// 输出数组
console.log( arr )
// 循环遍历
for (var i = 0; i < arr.length; i++) {
    console.log( arr[i] )
}

【排序】

1. 冒泡排序(Bubble Sort)

从头开始，两两比较数据大小，交换位置，到末尾为一轮，每一轮完成时都会将最大的数换到后面，重复n-1轮。

视频教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 创建数组
var arr = [ 9, 3, 6, 2, 4, 1, 8, 5, 7 ] 
// 输出数组
console.log( arr )

// 进行n-1轮的比较
for (var j = 0; j < arr.length - 1; j++) {
    // 循环遍历数组（一轮）
    for (var i =0; i < arr.length - 1 - j; i++) {
        // 依次比较当前和下一个数字
        if (arr[i] > arr[i + 1]) {
            // 条件为true时交换位置
            var temp = arr[i]
            arr[i] = arr[i + 1]
            arr[i + 1] = temp
        }
    }
}
// 再次输出
console.log( arr )

2. 选择排序(Select Sort)

不要过多关注数据，需要关注索引

从头开始，两两比较索引大小，到末尾为一轮，选择最小的数据往前换，每一轮完成时都会将最小的数换到前面，重复n-1轮。

    [ 9, 3, 6, 2, 4, 1, 8, 5, 7 ] 
索引  0  1  2  3  4  5  6  7  8
 ↓
假设最小数字的索引是 ：0    //从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
// 创建数组
var arr = [ 9, 3, 6, 2, 4, 1, 8, 5, 7 ] 
// 输出数组
console.log( arr )

// 进行n-1轮的比较
for (var j = 0; j < arr.length - 1; j++) {

    // 假设最小数索引是0
    var minIndex = j
    // 循环遍历数组（一轮）
    for (var i = j + 1; i < arr.length; i++) {
        // 判断是否比假设索引位置的数字小
        if (arr[i] < arr[minIndex]) {
            // 条件为true时，替换minIndex
            minIndex = i
        }
    }
    // 交换索引 0 位置和 minIndex 位置的数据
    var temp = arr[j]
    arr[j] = arr[minIndex]
    arr[minIndex] = temp
}

// 再次输出
console.log( arr )

【JS数组常用方法】

帮助我们对数组进行快速操作

下图中，左边会改变原始数组，右边不改变原始数组
HoPJNd.png

push()方法

将数据追加到数组末尾，
返回值是追加数据后数组最新的长度（可以知道加上后的长度）

1
数组.push( 数据 )
1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次数组
console.log( arr )

// 执行 push 方法，并把返回值(最新长度)赋值给变量
var result = arr.push( '追加的' )

// 输出数组
console.log( arr )
// 输出返回值
console.log( result )

pop()方法

删除数组末尾数据
返回值是被删除的数据（可以知道被删除的是啥）

1
数组.pop( 数据 )

unshift()方法

将数据添加到数组最前，
返回值是添加数据后数组最新的长度（可以知道加上后的长度）

1
数组.unshift( 数据 )

shift()方法

删除数组开头数据
返回值是被删除的数据（可以知道被删除的是啥）

1
数组.shift( 数据 )

reverse()方法

将数组反转，
返回值是反转后的数组（可以知道反转后是啥）

1
2
数组.reverse()
// 括号内不需要参数

splice()方法

删除数组中若干数据，并选择是否插入新的数据，
返回值是被删除的数据（以新数组的形式）

1
2
3
4
5
6
数组.splice( 开始索引, 多少个, 要插入的数据 )
// 默认值：     0        0         无

// 括号内不写参数，不删除不插入。原数组不变，返回值是空数组
// 写两个参数，只删除不插入。返回值是被删的数据组成的数组
// 写三个参数，既删除又插入。如( 1, ,1 '新来的')，从哪删除从哪插入！

sort()方法

对数组中的元素进行排序
返回值是排好序的新数组（可以知道排序后是啥）

1
2
3
4
5
6
// 语法1，无参数，字母降序排列，(因为会按照Unicode编码排序，所以对数字排序会错误
数组.sort()
// 语法2，函数作为参数，数字从小到大升序排列
数组.sort( function (a, b) { return a - b } )
// 语法3，函数作为参数，数字从大到小降序排列
数组.sort( function (a, b) { return b - a } )

join()方法

将数组用连接符连接成为一个字符串
返回值是连接好的字符串（可以知道连接后是啥）

1
数组.join( 连接符 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次数组
console.log( arr )

// 执行join方法
var res = arr.join( '-' )   //连接符当然可以是其他的

// 输出一次数组
console.log( arr )

// 输出一次返回值
console.log( res )

concat()方法

将其他数组和数组拼接在一起
返回值是拼接好的新数组（可以知道拼接后是啥）

1
数组.concat( 其他数组 )
1
2
// 执行concat方法
var res = arr.concat( [ 500, 600 ] )

slice()方法

‘截取’数组中的某些数据
返回值是截取出来的内容（以新数组的形式）

1
2
3
4
5
6
数组.slice( 开始索引, 结束索引 )
// 默认值      0     数组长度

// 也就是括号里为空时，默认从头截取到尾
// 当只有一个参数（如：1）时，默认从索引1截取到尾
// 当有两个参数（如1, 3）时，包前不包后（也就是只截取索引1和2）
1
2
// 执行concat方法
var res = arr.concat( [ 500, 600 ] )

indexOf()方法

查找’数据’在数组中的索引位置
返回值：

  1. 若有该数据，返回第一次出现的索引位置
  2. 若没有该数据，返回-1
1
数组.indexOf( 数据 )

forEach()方法

‘遍历’数组
没有返回值

1
2
3
4
数组.forEach( function (item ,index, arr) {} )
// item参数表示每一项
// index参数表示数组的索引
// arr参数是原始数组名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次
console.log( arr )

// 执行forEach方法（遍历数组）
arr.forEach( function (item, index, arr) {

    // item 参数表示数组每一项
    console.log(item)
    // index 参数表示索引
    console.log(index)
    // arr 参数是原始数组的名称
    console.log(arr)

    // 输出一个分隔线
    console.log('-----------------')
})

map()方法

‘映射’数组
返回值是映射好的数组

1
2
3
4
数组.map( function (item ,index, arr) {} )
// item参数表示每一项
// index参数表示数组的索引
// arr参数是原始数组名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次
console.log( arr )

// 执行map方法
var res = arr.map( function (item, index, arr) {

    // 以return的方式书写映射条件
    return item * 10    //比如每一项放大10倍
})

// 输出返回值
console.log( res )

filter()方法

‘过滤’数组
返回值是过滤好的新数组

1
2
3
4
数组.filter( function (item ,index, arr) {} )
// item参数表示每一项
// index参数表示数组的索引
// arr参数是原始数组名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次
console.log( arr )

// 执行filter方法
var res = arr.filter( function (item, index, arr) {

    // 以return的方式书写过滤条件
    return item > 150    //比如大于150的
})

// 输出返回值
console.log( res )

every()方法

判断数组是不是每一项都满足条件
返回值是一个布尔值（true和false）

1
2
3
4
数组.every( function (item ,index, arr) {} )
// item参数表示每一项
// index参数表示数组的索引
// arr参数是原始数组名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次
console.log( arr )

// 执行every方法
var res = arr.every( function (item, index, arr) {

    // 以return的方式书写过滤条件
    return item > 50    //比如大于50的
})

// 输出返回值
console.log( res )

some()方法

判断数组是不是有某一项满足条件
返回值是一个布尔值（true和false）

1
2
3
4
数组.some( function (item ,index, arr) {} )
// item参数表示每一项
// index参数表示数组的索引
// arr参数是原始数组名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 创建数组
var arr = [ 100, 200 ,300, 400 ]

// 输出一次
console.log( arr )

// 执行every方法
var res = arr.some( function (item, index, arr) {

    // 以return的方式书写过滤条件
    return item > 150    //比如大于150的
})

// 输出返回值
console.log( res )

【JS字符串常用方法】

        '百里飞洋，你真帅'
索引:    0 1 2 3 4 5 6 7
（索引从0开始，依次加1）

一定要注意substr、substring和slice方法的参数
以下所有方法均不改变原有字符串，都是以返回值的形式出现结果
HoiSVe.png

chatAt()方法

获取对应索引位置的字符
返回值如上

1
字符串.chatAt( 索引 )
1
2
3
4
5
6
7
8
9
10
11
// 创建字符串
var str = '百里飞洋，你真帅'

// 输出一次
console.log( str )

// 执行chatAt方法
var res = str.chatAt( 3 )

// 输出返回值
console.log( res )  //输出结果是 飞 这个字

toLowerCase()方法

将字符串内的字母全部转换为小写
返回值是转换好的字符串

1
2
字符串.toLowerCase()
// 不需要参数

toUpperCase()方法

将字符串内的字母全部转换为大写
返回值是转换好的字符串

1
2
字符串.toUpperCase()
// 不需要参数

replace()方法

将字符串内第一个满足换下内容的片段替换成换上内容
返回值是替换好的字符串

1
字符串.replace( 换下内容, 换上内容 )

trim()方法

去除字符串首尾的空格
返回值是去除空格后的字符串

1
字符串.trim()

split()方法

按照分隔符将字符串切割成为一个数组（分隔符必须是字符串内已经有的）
返回值是切割后的数组

1
字符串.split( 分隔符 )
1
2
3
4
5
6
7
8
9
10
11
// 创建字符串
var str = '2070-3-22'

// 输出一次
console.log( str )

// 执行split方法
var res = str.split( '-' )  //比如用 - 切割字符串

// 输出返回值
console.log( res )  //输出结果是 ["2070", "3", "22"]

substr()方法

截取字符串
返回值是截取出来的字符串

1
2
字符串.substr( 开始索引, 多少个 )
// 如( 1, 6 )就是从索引1开始，截取6个字符

substring()方法

截取字符串
返回值是截取出来的字符串

1
2
3
字符串.substring( 开始索引, 结束索引 )
// 两个参数，包前不包后
// 比substr()方法少截取一个字符

slice()方法

截取字符串
返回值是截取出来的字符串

不是数组方法，只是重名

1
2
3
字符串.slice( 开始索引, 结束索引 )
// 两个参数，包前不包后
// 比substr()方法少截取一个字符

【JS数字常用方法】

帮助我们对数字进行快速操作

下图最后一个PI是个属性，不是方法，使用时不用加小括号，获取到的是一个近似π的值
下图中最右边是封装的“获取一定范围内随机整数”的方法
HoEEWj.png

random()方法

获取 0 ~ 1 之间的随机小数（包含 0 ，但是不包含 1 ）
返回值如上

1
2
Math.random()
// 不需要参数

round()方法

对数字进行四舍五入取整
返回值是整数

1
Math.round( 数字 )

ceil()方法

对数字进行向上取整
返回值是整数

1
Math.ceil( 数字 )

floor()方法

对数字进行向下取整
返回值是整数

1
Math.floor( 数字 )

pow()方法

对数字进行取幂运算（也就是计算一个数的某次方）
返回值是取幂后的结果

1
Math.floor( 底数, 指数 )

sqrt()方法

对数字进行二次方根运算（也就是计算平方根）
返回值是二次方根后的结果（仅保留正数部分，因此也是计算算术平方根）

1
Math.sqrt( 数字 )

abs()方法

对数字进行绝对值运算
返回值是绝对值后的结果

1
Math.abs( 数字 )

max()方法

获取若干数字的最大值
返回值如上

1
Math.max( 数字1, 数字2, 数字3, … )  //正负值都可以

min()方法

获取若干数字的最小值
返回值如上

1
Math.min( 数字1, 数字2, 数字3, … )  //正负值都可以

PI属性

不是方法，是属性，不用加小括号
得到一个近似π的值（因为普通计算机最多保留到小数点后17位，并不完全等于π）

1
Math.PI
1
2
3
4
5
// 直接获取一个近似π的数字
var res = Math.PI

// 输出获取结果
console.log( res )   //结果是3.141592653589793

案例:获取随机整数

封装函数，获取一个范围内的随机整数

为啥要封装？因为random()方法只能获取到0 ~ 1之间的随机小数，所以需要自己制作一个方法。

  • 获取 0 ~ 10 之间的随机整数（不太公平的方法）

    1. 使用 Math.random() 获取 0 ~ 0.999… 之间的随机小数
    2. 把它乘以 10，得到 0 ~ 9.999… 之间的随机小数
    3. 结果用 Math.round 进行取整，就得到 0 ~ 10 之间的随机整数（但取到0或10的概率是其他值的一半）
      1
      2
      3
      4
      5
      6
      7
      8
      // 1. 获取一个随机小数
      var r1 = Math.random()
      // 2. 随机小数乘以10
      var r2 = r1 * 10
      // 3. 四舍五入取整
      var res = Math.round( r2 )
      // 输出最后结果
      console.log(res)

  • 获取 0 ~ 10 之间的随机整数（概率比较平均的方法）

    1. 使用 Math.random() 获取 0 ~ 0.999… 之间的随机小数
    2. 把它乘以 11，得到 0 ~ 10.999… 之间的随机小数
    3. 结果用 Math.floor 进行向下取整，就得到 0 ~ 10.999 之间的随机整数（概率比较平均）
      1
      2
      3
      4
      5
      6
      7
      8
      // 1. 获取一个随机小数
      var r1 = Math.random()
      // 2. 随机小数乘以10
      var r2 = r1 * 11
      // 3. 向下取整
      var res = Math.floor( r2 )
      // 输出最后结果
      console.log(res)

  • 获取 0 ~ 20 之间的随机整数（概率比较平均的方法）

    1. 使用 Math.random() 获取 0 ~ 0.999… 之间的随机小数
    2. 把它乘以 21，得到 0 ~ 20.999… 之间的随机小数
    3. 结果用 Math.floor 进行向下取整，就得到 0 ~ 20.999 之间的随机整数（概率比较平均）
      1
      2
      3
      4
      5
      6
      7
      8
      // 1. 获取一个随机小数
      var r1 = Math.random()
      // 2. 随机小数乘以10
      var r2 = r1 * 21
      // 3. 向下取整
      var res = Math.floor( r2 )
      // 输出最后结果
      console.log(res)

  • 【找规律】封装函数，获取一个范围内的随机整数

    1. 获取 0 ~ 10 之间的随机整数：Math.random() * 11，然后向下取整
    2. 获取 0 ~ 20 之间的随机整数：Math.random() * 21，然后向下取整
    3. 获取 0 ~ X 之间的随机整数：Math.random() * (X+1)，然后向下取整
    4. 获取 10 ~ 20 之间的随机整数：0 ~ 10 之间的随机整数，然后 + 10
    5. 获取 10 ~ 30 之间的随机整数：0 ~ 20 之间的随机整数，然后 + 10
    6. 获取 20 ~ 30 之间的随机整数：0 ~ 10 之间的随机整数，然后 + 20
    7. 获取 X ~ Y 之间的随机整数：0 ~ 两数差 之间的随机整数，然后 + 小一点的数字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 准备一个函数，接受两个参数
function randomNum(min, max) {
    // 1. 准备两个数字做范围
    var min = 15
    var max = 26

    // 2. 求 “0 ~ 两数差” 之间的随机整数
    var res Math.floor( Math.rendom() * (max - min + 1))

    // 3. 使用随机整数 + 相对小的数字
    var res2 = res + min

    // 输出最后结果
    // console.log( res2 )
    // 返回值
    return res2
}

使用时直接调用上面封装好的函数randomNum(x,y)即可：

1
2
// 需要 10 ~ 20 之间是随机整数
var res = randomNum(10,20)

【JS时间常用方法】

创建时间（Date）对象

1
2
3
4
5
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

创建指定节点的时间对象

注意：参数里月份的数字从0开始数！参数里月份的数字从0开始数！参数里月份的数字从0开始数！重要的事情说三遍！！！

1
2
3
4
5
6
// 第二个参数是1，就表示2月份
var time = new Date( 2022,1,23,11,22,18 )
//          2022 年 2 月 23 日 11 点 22 分 18 

// 输出一次
console.log( time )

输出结果包含很多信息：

1
2
        Wed Mar 31 2021 09:40:25 GMT+0800（中国标准时间）
//      周三,3月,日, 年    时间     时区

(1) 时间获取

getFullYear()方法

获取事件对象中的年份信息

1
2
时间对象.getFullYear()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的年份信息
var year = time.getFullYear()

// 输出年份信息
console.log( year )

getMonth()方法

获取事件对象中的月份信息

注意：0表示1月，11表示12月

1
2
时间对象.getMonth()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的月份信息
var month = time.getMonth()

// 输出月份信息
console.log( month )

getDate()方法

获取事件对象中的日期信息

1
2
时间对象.getDate()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的日期信息
var date = time.getDate()

// 输出日期信息
console.log( date )

getHours()方法

获取事件对象中的小时信息

1
2
时间对象.getHours()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的小时信息
var hours = time.getHours()

// 输出小时信息
console.log( hours )

getMinutes()方法

获取事件对象中的分钟信息

1
2
时间对象.getMinutes()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的分钟信息
var minutes = time.getMinutes()

// 输出分钟信息
console.log( minutes )

getSeconds()方法

获取事件对象中的秒钟信息

1
2
时间对象.getSeconds()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的秒钟信息
var seconds = time.getSeconds()

// 输出秒钟信息
console.log( seconds )

getDay()方法

获取事件对象中的星期信息

注意：星期从0开始数！星期从0开始数！星期从0开始数！重要的事情说三遍！！！
因此 0 表示周日，1~6 表示周一到周六

1
2
时间对象.getDay()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的星期信息
var week = time.getDay()

// 输出星期信息
console.log( week )

getTime()方法

获取事件对象中的时间戳信息

计算机元年（格林威治时间）1970-1-1 0:0:0
时间戳是指任意一个时间和格林威治时间相差的毫秒数，注意是毫秒，不是秒

1
2
时间对象.getTime()
// 不需要参数
1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 获取事件对象中的时间戳信息
var ms = time.getTime()

// 输出事时间戳信息
console.log( ms )

(2) 时间设置

时间设置不能设置星期，因为设置年月日会自动匹配

1
2
3
4
5
6
7
事件对象.setFullYear( 数字 )
事件对象.setMonth( 数字 )
事件对象.setDate( 数字 )
事件对象.setHours( 数字 )
事件对象.setMinutes( 数字 )
事件对象.setSeconds( 数字 )
事件对象.setTime( 数字 )

setFullYear()等方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 设置年份信息
time.setFullYear( 2022 )
// 设置月份信息
time.setMonth( 2 )
// 设置日期信息
time.setDate( 23 )
// 设置小时信息
time.setHours( 11 )
// 设置分钟信息
time.setMinutes( 22 )
// 设置秒钟信息
time.setSeconds( 18 )

// 再次输出时间对象
console.log( time )

setTime()方法

1
2
3
4
5
6
7
8
9
10
11
// 创建(当前终端电脑的)时间对象
var time = new Date()

// 输出一次
console.log( time )

// 设置时间戳信息
time.setTime( 1016853738151 )

// 再次输出时间对象
console.log( time )

案例:获取两节点时间差

封装函数，获取两个时间节点之间的时间差
提示：利用时间戳之差

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 准备两个时间节点
var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

// 2. 获取到两个时间节点的时间戳
var ms1 = time1.getTime()
var ms2 = time2.getTime()

// 3. 两个时间戳相减得到相差的毫秒数
// var sub = ms2 - ms1
// 除以1000再取整得到相差的秒数
var sub = Math.ceil( (ms2 - ms1 ) / 1000)  

// 输出一下相差的秒数
console.log( sub )

下面开始对秒数进行换算：

1
2
3
4
5
6
7
8
9
10
11
// 1. 换算天数(向下取整)    //总秒数除以1天的秒数
var day = Math.floor( sub / (60 * 60 * 24) )
// 2. 换算小时(向下取整)    //总秒数对1天的秒数取余(得到不够一天的秒数)，除以每小时秒数
var hours = Math.floor( sub % (60 * 60 * 24) / (60 * 60) )
// 3. 换算分钟(向下取整)    //总秒数对1小时的秒数取余(得到不够1小时的秒数)，除以每分钟秒数
var minutes = Math.floor( sub % (60 * 60) / 60 )
// 4. 换算秒数(向下取整)    //总秒数对1分钟的秒数取余
var seconds =  sub % 60

// 输出一下
console.log( day, hours, minutes, seconds )

封装成函数，获取两个时间节点之间的时间差

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 1. 准备两个时间节点
var time1 = new Date( 2021, 1, 23, 11, 22, 18 )
var time2 = new Date( 2021, 1, 25, 3, 45, 36 )

// 2. 准备一个函数接受两个参数
function getDiff( time1, time2 ) {
    // 获取到两个时间节点的时间戳
    var ms1 = time1.getTime()
    var ms2 = time2.getTime()
    // 两个时间戳相减得到相差的秒数
    var sub = Math.ceil( (ms2 - ms1 ) / 1000)  
    // 开始换算
    var day = Math.floor( sub / (60 * 60 * 24) )
    var hours = Math.floor( sub % (60 * 60 * 24) / (60 * 60) )
    var minutes = Math.floor( sub % (60 * 60) / 60 )
    var seconds =  sub % 60

    // 要返回多个信息，这里用对象数据类型进行返回(键值对形式)
    return { day: day, hours: hours, minutes: minutes, seconds: seconds }
}

以后需要获取两时间节点时间差的时候，直接用getDiff( time1, time2 )函数调用就可以了：

1
2
var res = getDiff( time1, time2 )
console.log(res)

特别感谢：