JavaScript基础（1）

1. 输出方式
2. 书写位置
3. JS注释与规范
4. JS变量
- 4.1. 声明使用
- 4.2. 变量命名规则规范
5. 数据类型
6. 数据类型转换
- 6.1. 数字类型转换
- 6.2. 字符串转换
- 6.3. 布尔类型转换
7. 运算符
- 7.1. 数学运算符
- 7.2. 赋值运算符
- 7.3. 比较运算符
- 7.4. 逻辑运算符
- 7.5. 自增自减运算符
- 7.6. 三目运算符
8. 条件、循环语句
9. 函数
- 9.1. 定义函数
- 9.2. 返回值
- 9.3. 预解析
- 9.4. 重名问题
- 9.5. 作用域
10. 对象
- 10.1. 创建对象
- 10.2. 操作对象
- 10.3. 遍历对象
11. 不同数据类型的存储
12.数组
- 12.1.创建数组
- 12.2.数组实现排序
- - 12.2.1.冒泡排序
  - 12.2.2.选择排序
- 12.3.数组常用方法-1
- 12.4.数组常用方法-2
- 12.5.数组常用方法-3
13.字符串
- 13.1.创建
- 13.2.length、下标、遍历
- - 案例-统计字符出现的次数
- 13.3.常用方法
- 13.4.案例-模糊查询
- 13.5.json格式字符串
- 13.6.模板字符串
14.数字常用方法
- 14.1.具体方法
- 14.2.案例-随机整数
15.时间对象
- 15.1.new Date()
- 15.2.时间对象常用方法
- - 15.2.1.获取
  - 15.2.2.设置
16.定时器
- 16.1.延迟定时器 & 间隔定时器
- 16.2.案例-倒计时

1. 输出方式

<script>
        alert("hello world")
        document.write("hello world")
        console.log("hello world")
</script>
1
2
3
4
5

2. 书写位置

行内

<button onclick="alert('hello world')">点我</button>
<a href="javascript:alert('hello')">点我</a>
1
2

内嵌

内嵌的js可以写在head和body中，但建议放在head或者body靠后面那里。
放在body前面或中间部分，可能会因为dom结点的获取导致网页卡住。

<script type="text/javascript">
        console.log("hello")
</script>
1
2
3

外链

这种方式最推荐

<script src="./js/hello.js"></script>
1

3. JS注释与规范

注释：//单行注释；/多行注释/

alt+shitt+A -----> 多行注释快捷键

规范：要么写分号、要么用好换行

4. JS变量

4.1. 声明使用

var num
num = 100

var x = 50

var a,b,n

var c=1,d=2
1
2
3
4
5
6
7
8

4.2. 变量命名规则规范

一个变量名称可以由数字、字幕、英文下划线_、美元符号$组成
严格区分大小写；不能以数字开头；不能是保留字、关键字；不要出现空格
变量名尽量有意义（语义化）
遵循驼峰命名法，比如nameNode、userName
不要使用中文

5. 数据类型

基本类型
Number 18, 12.5, 2e3, 0b11, 011, 0x11
String 字符串类型
Boolean 布尔类型
Undefined
Null
Symbol

undefined 不知道会被赋值为什么类型的值时使用
null 知道一定会赋值为对象时使用

检测数据类型

var a = "123"
typeof a
typeof(a)

console.log(typeof a + 100) //string100
console.log(typeof(a + 100)) // string
1
2
3
4
5
6

6. 数据类型转换

6.1. 数字类型转换

Number(x)

当x为undefined或者包含字符串，则其转换为NaN （not a number)

当x为null，则其转换为0

var a = "100"
var b = Number(a)
console.log(typeof a, typeof b)

var c = "abc"
var d = Number(c) //NaN Not a Number
console.log(c, d)

var e = true // true false
var f = Number(e) //1 0
console.log(e, f)

var g = null
var h = Number(g) //0
console.log(g, h)

// var i = undefined
var i
var j = Number(i) //NaN
console.log(i, j)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

parseInt(x) parseFloat(x)
parseInt(x)：解析为int类型的数值
parseFloat(x)：解析为数值本身

var a = "123abc"
var b = "123.46ab"
var c = parseInt(a) //123
var d = parseInt(b) //123
console.log(c, d)

var e = parseFloat(a) //123
var f = parseFloat(b) //123.46
console.log(e, f)
1
2
3
4
5
6
7
8
9

非加号以外的数值运算

var a = "100"
var b = a - 0 // 数值100，还可以 a*1、a/1
1
2

6.2. 字符串转换

String() 所有类型都能转成字符串
变量名.toString() null 和 undefined 转换不了
加号

 // 1. String()  所有类型都能转成字符串
var a = 123
// var b = String(a)
// console.log(a, b)

// 2. 变量名.toString() null 和 undefined 转换不了
// var b = a.toString()
// console.log(a, b)

 // 3. 加号
var b = a + ""
console.log(a, b)
1
2
3
4
5
6
7
8
9
10
11
12

6.3. 布尔类型转换

Boolean(x)
当 x 为 0，“”，undefined，null，NaN时，结果为false，其余均为true

7. 运算符

7.1. 数学运算符

+
-
*
/
%
1
2
3
4
5

7.2. 赋值运算符

=
+=
-=
*=
/=
%=
1
2
3
4
5
6

7.3. 比较运算符

==   不管数据类型 1 == "1"
===  全等于，要管数据类型
!=   不管数据类型 1 != '1' 结果为false
!==  全不等于，要管数据类型 1 != '1' 结果为true
>
<
>=
<=

1
2
3
4
5
6
7
8
9

7.4. 逻辑运算符

&& 
||
!
1
2
3

特殊情况：

!!a ==> 转换成布尔值 Boolean(a)可以写为!!a
&& || 的短路用法 a&&b a为假，就不用判断b了 a||b a为真，就不用判断b了

7.5. 自增自减运算符

a++
++a
a--
--a
1
2
3
4

7.6. 三目运算符

判断语句 ? 语句1 : 语句2

判断语句为真，则执行语句1，否则执行语句2
1
2
3

8. 条件、循环语句

if () {

} else if () {

} else {

}
1
2
3
4
5
6
7

switch (值) {
        case xxx: ...
        case xxx: ...
        default: ...
                 break;
} 
// xxx 最好不写成判断语句，而写成特定的值，
1
2
3
4
5
6
7

while() {

} 

do {
        
} while()

for () {

}
1
2
3
4
5
6
7
8
9
10
11

9. 函数

9.1. 定义函数

函数 function 是一个复杂的数据类型

声明式

//声明
function 函数名(){}

// 调用
函数名()
1
2
3
4
5

赋值式

// 声明
var 函数名 = function(){}

// 调用
函数名()
1
2
3
4
5

声明式和赋值式的区别：赋值式必须先声明再调用，而声明式的调用允许写在它的声明之前
参数可以有，可以没有

9.2. 返回值

function 函数名(参数) {
        ....
        return 返回值
}

var res = function(参数)

// 默认undefined（没有return 返回值语句时）
1
2
3
4
5
6
7
8

9.3. 预解析

js是一种解释型语言，就是在代码执行前，先对代码进行通读和解释，然后再执行代码
js代码在运行的时候，会经历解释代码和执行代码两个环节

变量的声明，声明式函数的声明，会在预解析阶段提到前面去进行声明、解析

变量在声明前使用时，它的值为undefined，如果整个代码完全没有对它的声明，则会报错
赋值式函数，不可以在声明前使用，否则会报错
声明式函数，允许在声明前使用

<script>
        // 变量
        console.log(myName)  //undefined
        var myName = "Brisa"
        console.log(myName) //Brisa

        // 赋值式函数
        // myFunc() //会报错，导致后面的代码也不能执行
        var myFunc = function() {
                console.log("my function1")
        }
        myFunc()


        // 声明式函数
        test()  //正常执行
        function test() {
                console.log("test")
        }
        test()
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

9.4. 重名问题

变量名冲突，以后面那个为主
函数名冲突，以后面那个为主
变量名和函数名冲突，若函数的声明与调用在变量声明前发生，即正常；若在这之后，则会报错（变量优先）

<script>
        /***********************************eg.1************************************/
        var myName = "fbai"
        var myName = "ey92ye"
        console.log(myName) //答案会是ey92ye，联想到预解析，就相当于是先声明了变量，再给变量前后赋值两次，所以最后结果为后面那次

        function test() {
            console.log("test1")
        }

        function test() {
            console.log("test2")
        }
        test() //答案会是test2，联想到预解析，就相当于是先声明了变量，再给变量前后赋值两次，所以最后结果为后面那次

        /************************************eg.2.1***********************************/

        //执行顺序 var age; age = 100; function age(){}
        var age = 100
        function age() {
            console.log("age is 100")
        }
        console.log(age) //答案会是100
        // age() //报错，函数名和变量名冲突

        /*************************************eg.2.2**********************************/
        //执行顺序 function age(){}; number(); var number; number = 100
        number() // number is 100（正常显示）
        var number = 100
        function number() {
            console.log("number is 100")
        }
        console.log(number) //100，函数名和变量名冲突（实际测试结果仍然正常显示）
        // number() // 函数名和变量名冲突（报错）
</script>
<script>
        // 预解析（变量提声-提前声明）只能提声到它自己所在的script便签内
        number()
        function number() {
            console.log("number is 200")
        }
</script>
<script>
        function test(a, b) {
            var result = a + b
            console.log(result)
        }
        test(1, 2)
       // console.log(result) //报错，该变量作用域只在函数内，函数外无法正常调用
</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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

9.5. 作用域

9.5.1. 区别

全局作用域

全局作用于中定义的变量可以在任何地方使用
页面打开时，浏览器会自动为我们生成一个全局作用于window，这个作用于会一直存在，直到页面关闭就销毁了

局部作用域

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

9.5.2. 访问规则

获取变量的规则：就近原则
首先，在自己的作用域找；没有，就去上一级作用域找；以此类推；若一直到全局作用域都没有这个变量，则会直接报错
作用域的查找机制，只能是向上找，不能向下找

9.5.3. 赋值规则

现在自己的作用域找，有就直接赋值
没有就去上一级作用域找，有就直接赋值（以此类推）
若一直找到全局作用域都没有，name就讲这个变量定义为全局变量，再给它赋值

function fn(){
        num = 100 //前面没有对num有任何声明，就会将num定义为一个全局变量，再赋值为100
}
1
2
3

10. 对象

对象，是一个复杂的数据类型
对象是一个键值对的集合

<script>
        var obj = {
            name: "kerwin",
            age: 15,
            location: "大连",
            "a+b": "111111"
        }
</script>
1
2
3
4
5
6
7
8

shift + " 给选中内容加""
要不要给obj里的key加引号取决于它是否符合变量命名规则，不符合的情况下建议加上引号有没有特殊符号，没有的情况下可以不加

10.1. 创建对象

字面量的方式

// 创建一个空对象
var obj = {}
// 向对象中添加成员
obj.name = "ali"
obj.age = 18
1
2
3
4
5

内置构造函数的方式

// 创建一个空对象
var obj = new Object()
// 向对象中添加成员
obj.name = "rose"
obj.age = 18
1
2
3
4
5

Object()是JS中内置的创建对象的函数

10.2. 操作对象

obj.属性名
obj[“属性名”]
（尤其适合处理不符合命名规范的属性）

删除属性 -> delete obj.属性名或者 delete obj[“属性名”]

 <script>
        // 增
        var obj = {}
        obj.name = "kerwin"
        obj.age = 100
        obj.location = "dalian"

        // 查 
        console.log(obj.name)

        // 改
        obj.age = 18
        console.log(obj)

        // 删
        delete obj.name
        console.log(obj)

        // 2.增
        var obj2 = {}
        obj2["name"] = "tie"
        console.log(obj2)

        // 2.查
        console.log(obj2["name"])

        // 2.改
        obj2["name"] = "tiechui"
        console.log(obj2)

        // 2.删
        delete obj2["name"]
        console.log(obj2)
</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
34

10.3. 遍历对象

var obj = {
            name: "kerwin",
            age: 100,
            location: "dalian"
}
for (var i in obj) {
            // 这里只能用obj[i]的方式访问属性值，obj.i由于i是变化的，无法正常访问到相对应的值
            document.write(i + ":" + obj[i])
            document.write("
")
}
1
2
3
4
5
6
7
8
9
10

11. 不同数据类型的存储

简单类型存储在栈中，复杂类型存储在堆中

var obj = {...}
var mvobj = obj //此时，他们指向了同一地址，不管谁对...中的值作了修改，另外一个都会变化

var obij = {...} //它操作的是另一地址...的值，不会互相影响

var obj3 = {}  // 就相当于，它自己有一个地址
for (var i in obj) {
	obj3[i] = obj[i]
}
// 这种情况下，我们对obj3进行改变，也不会影响到obj
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

12.数组

数组：数字的组合，数据的集合

数据类型分类：

number string boolean undefined null object function array …
我们把数据类型分为两类 基本数据类型 和 复杂数据类型
- 基本数据类型：number string boolean undefined null
- 复杂数据类型：object function array …

12.1.创建数组

var arr1 = []
var arr2 = new Array()
var arr3 = [1, 2, 3, 4, 5]
1
2
3

长度
arr.length length是可读可写的

var arr1 = [1, 2, 3, 4, 8]
arr1.length = 3
// arr1 -> [1, 2, 3]

//清空数组
arr1.length = 0
1
2
3
4
5
6

索引

var arr1 = [1, 2, 3, 4, 8]
console.log(arr1[2]) // 3
arr1[2] = 4 //修改为4
arr1[5] = 5 // 增加一个元素
1
2
3
4

遍历

var arr1 = [1, 2, 3, 4, 8]
for (var i=0; i<arr1.length; i++){
        console.log(arr1[i])
}
1
2
3
4

数组是复杂数据类型

var arr1 = [1, 2, 3, 4, 8]
var arr2 = arr1
arr2[2] = 3
console.log(arr1[2]) // 3 
// 对arr2更改也会影响arr1

var arr3 = []
for (var i=0; i<arr1.length; i++){
        arr3[i] = arr1[i]
}
1
2
3
4
5
6
7
8
9
10

12.2.数组实现排序

12.2.1.冒泡排序

function bubbleSort(var arr) {
        var flag = true
        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
                                flag = false
                        }
                }
                if (!flag) {
                        break;
                }
        }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

12.2.2.选择排序

function selectSort(var arr) {
        for (var i=0; i<arr.length; i++){
                var minIndex = i
                for (var j=i+1; j<arr.length;j++){
                        if (arr[j] < arr[minIndex]) {
                                minIndex = j
                        }
                }
                if (minIndex !== i) {
                        var temp = arr[i]
                        arr[i] = arr[minIndex]
                        arr[minIndex] = temp
                }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

12.3.数组常用方法-1

会影响数组本身

push

最后面追加元素

返回值：追加后的数组长度

var arr = [1, 2, 3]
var res = arr.push(5)
console.log(res) // 4
1
2
3

pop

删除最后面的元素

返回值：删除的元素

var arr = [1, 2, 3]
var res = arr.pop()
console.log(res) // 3
1
2
3

unshift

最前面追加元素

返回值：追加后的数组长度

var arr = [1, 2, 3]
var res = arr.unshift(0)
console.log(res) // 4

1
2
3
4

shift

删除最前面的元素

返回值：删除的元素

var arr = [1, 2, 3]
var res = arr.shift()
console.log(res) // 1

1
2
3
4

splice

删除元素或追加元素

返回值：删除的元素组成的的数组

// arr.splice(i, j, a, b, ...) i 开始的位置（下标）；j 要删除元素的个数，写0就不删；a、b、...增加的内容
var arr = [1, 2, 3]
var res1 = arr.splice(1, 2)
var res2 = arr.splice(1, 0, 4, 5, 6)
console.log(res) // 4

1
2
3
4
5
6

reverse

倒序

var arr = [1, 2, 3]
arr.reverse()
console.log(arr) // 3, 2, 1

1
2
3
4

sort

排序，sort是一个一个的排

var arr = [1, 2, 13,27, 5]
arr.sort()
console.log(arr) // 注意这里的结果！！！  1, 13, 2, 27, 5
1
2
3

arr.sort(function(a, b){
        return a-b // 从大到小  
        //return b-a 从小到大
}
1
2
3
4

12.4.数组常用方法-2

不会影响数组本身

concat

拼接元素

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

var arr5 = arr1.concat()  // 不传参可进行复制
1

join

数组转字符串

var arr1 = [1, 2, 3]
var arr2 = arr1.join("-")
console.log(arr2) // 1-2-3
1
2
3

var arr = []
for (var i=0; i<5; i++){
        arr.push(""+i+"
")
}
document.write(arr)
1
2
3
4
5

slice

截取（开始索引，结束索引）
区别于slice，不会截走数组

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.slice(0, 2)  
console.log(arr2)  // arr2 -> [1, 2, 3]

var arr3 = arr1.slice(0, -1) // [1, 2, 3, 4]
// -1, -2, ... 就相当于从最后一个往前数，倒数第一个的下标即为-1
1
2
3
4
5
6

var arr4 = arr1.slice()  // 不传参，也相当于复制了一份，也是全新的复制，不会互相影响
1

indexOf

定位
返回值：找的到就返回对应下标，找不到返回-1

var arr1 = ["a", "b", "c", "d"]
var res = arr1.indexOf("b")  
console.log(res)  // 1

var res2 = arr1.indexOf("b", 2) // 从下标2的位置找是否存在 b
console.log(res2) // -1 没找到
1
2
3
4
5
6

lastIndexOf

定位，从后往前找
返回值：找的到就返回对应下标，找不到返回-1

var arr1 = ["a", "b", "c", "d"]
var res = arr1.lastIndexOf("b", 2)  
console.log(res)  // 1
1
2
3

案例-数组去重

var arr = [1, 2, 3, 4, 5, 2, 1]
var res = []
for (var i=0; i<arr.length; i++){
        if(res.indexOf(arr[i]) === -1){
                res.push(arr[i])
        }
}
console.log(res)
1
2
3
4
5
6
7
8

利用对象

var arr = [1, 2, 3, 4, 5, 2, 1]
var obj = {}
for (var i=0; i<arr.length; i++){
        obj[arr[i]] = i
}
var res = []
for (var i in obj){
        res.push(i-0) //转数字
}
console.log(res)
1
2
3
4
5
6
7
8
9
10

new Set

var arr = [1, 2, 3, 4, 5, 2, 1]
var set1 = new Set(arr)
var res = Array.from(set1) // 转成数组
console.log(res)
1
2
3
4

12.5.数组常用方法-3

forEach

遍历

var arr = [1, 2, 3, 4, 5, 2, 1]
arr.forEach(function(item, index, arr) { //index, arr 可略
        console.log(item, index, arr)
})
1
2
3
4

map

映射

var arr = [1, 2, 3, 4, 5, 2, 1]
var arr2 = arr.map(function(item) { //index, arr 可略
        return item*item
})
1
2
3
4

filter

过滤

var arr = [1, 2, 3, 4, 5, 2, 1]
var arr2 = arr.filter(function(item) { //index, arr 可略
        return item>2
})
1
2
3
4

var arr = [{name:"aaa",price:100}, {name:"bbb",price:120}, {name:"ccc",price:150}]
var arr2 = arr.filter(function(item) { //index, arr 可略
        return item.price>120
})
1
2
3
4

every

每一项，都满足时返回true，否则返回false

var arr = [1, 2, 3, 4, 5, 2, 1]

var res = arr.every(function(item) { 
        return item>=1
})
console.log(res)
1
2
3
4
5
6

some

只要有一项，满足时就返回true

var arr = [1, 2, 3, 4, 5, 2, 1]

var res = arr.some(function(item) { 
        return item>=5
})
console.log(res)
1
2
3
4
5
6

find

找到满足条件的第一项
区别于filter，filter是过滤得到满足条件的数组，find是找到满足条件的第一项

var arr = [
        {
                name:"语文",
                grade:95
        },{
                name:"数学",
                grade:100
        },{
                name:"体育",
                grade:96
        }
]

var arr2 = arr.find(function(item) { 
        return item.grade===5
})
console.log(arr2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

reduce

叠加

var arr = [1, 2, 3, 4, 5]
var res = arr.reduce(function(prev, item){//prev 上一次返回的结果，每一项
        return prev+item
},0)//0这个位置是放prev的初始值
console.log(res)
console.log(arr)
// prev 0  1  3  6 10  15
// item 1  2  3  4 5   
1
2
3
4
5
6
7
8

13.字符串

13.1.创建

两种差不多，但第二种是对象型字符串

var str1 = "hello"  // hello
var str2 = new String("hello")  //String{"hello"}
1
2

13.2.length、下标、遍历

length
只读，区别于数组的length

var str = "qewwaidf"
console.log(str.length)
1
2

索引/下标
str[i] 也是只读

console.log(str[1]) 
1

遍历

var str = "hello"
for (var i=0; i<str.length; i++){
        console.log(i, str[i])
}


var str2 = str
str2 = "123"
console.log(str)//str仍为原样，因为str是简单数据类型，直接复制只是值的复制
1
2
3
4
5
6
7
8
9

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

var str = "abcabcbc"
var obj = {}
for(var i=0;i<str.length;i++){
        var key = str[i]
        if(obj[key]){
                obj[key]++
        } else{
                obj[key] = 1
        }
}
console.log(obj)
1
2
3
4
5
6
7
8
9
10
11

13.3.常用方法

charAt(索引)

返回索引对应的字符

var str = "abcdef"
var str1 = str.charAt(2)
console.log(str1) // c
1
2
3

charCodeAt(索引)

返回索引对应的字符的ASCII编码

var str = "abcdef"
var str1 = str.charCodeAt(2)
console.log(str1) // 99
1
2
3

var arr = []
for (var i=65;i<91;i++){
        arr.push(String.fromCharCode(i))
}
console.log(arr) // ['A', 'B',...,'Z']
1
2
3
4
5

toUpperCase() & toLowerCase()

返回索引对应的字符的ASCII编码

var str = "abCDef"
var str1 = str.toUpperCase()
var str2 = str.toLowerCase()
console.log(str,str1,str2) // 
1
2
3
4

substr(开始索引，长度) & substring(开始索引，结束索引) & slice(开始索引，结束索引)

区别：

slice的第二个参数是长度
substring的结束索引不可以为负数
slice的结束索引可以为负数

var str = "abcdef"
var str1 = str.substr(1, 2)
console.log(str1) // bc
1
2
3

var str = "abcdef"
var str1 = str.substring(1, 2)
console.log(str1) // b
var str2 = str.substring(1) //只写一个，则默认截取开始索引到后面全部
console.log(str2) // bcedf
1
2
3
4
5

var str = "abcdef"
var str1 = str.slice(1, 2)
var str2 = str.slice(1)
var str3 = str.slice(1, -1)
console.log(str, str1, str2, str3)
// abcdef b bcdef bcde
1
2
3
4
5
6

案例-首字母大写

var str = "abcdef"
str = (str.substring(0,1)).toUpperCase()+str.substring(1)
console.log(str)
1
2
3

replace(待替换字符，替换后的字符)

替换
弊端：它只替换遇到的第一个相应的字符，想要全部替换可以用for循环或者后面会学到的正则表达式

var str = "abdcsgsr"
var str1 = str.replace("d", "*")
console.log(str1)
1
2
3

split

分割，和数组中的join反过来了

var str = "a, b, c, d"
var str1 = str.split(",") //用数组包裹起来 ['a', 'b', ...]
var str2 = str.split("")//空字符串，则表示把字符串的每一个字符都分割 ["a", ",", "b",...]
console.log(str1, str)
1
2
3
4

indexOf & lastIndexOf

var str = "abcd"
console.log(str.indexOf("b"))
console.log(str.indexOf("b", 1)) //1-开始寻找的位置 
console.log(str.lastIndexOf("b"))
console.log(str.lastIndexOf("b", 2)) // 2-开始寻找的位置，反向找
1
2
3
4
5

concat

连接字符串

var str1 = "abcd"
var str2 = str1.concat("ef")
var str3 = str1 + "ef" //和+号没有区别
console.log(str2, str3)
1
2
3
4

trim() & trimStart() & trimLeft() & trimEnd() & trimRight()

去掉首尾空格 trim()
去掉首空格 trimStart() & trimLeft()
去掉尾空格 trimEnd() & trimRight()

var str = " hello  world   "
console.log("|" + str + "|")
console.log("|" + str.trim() + "|")
console.log("|" + str.trimStart() + "|")
console.log("|" + str.trimLeft() + "|")
console.log("|" + str.trimEnd() + "|")
console.log("|" + str.trimRight() + "|")
// | hello  world   |
// |hello  world|
// |hello  world   |
// |hello  world   |
// | hello  world|
// | hello  world|
1
2
3
4
5
6
7
8
9
10
11
12
13

13.4.案例-模糊查询

var arr = ["aaa", "bbb", "ccc", "abc", "bcc", "bcd", "ccd"]
var input = prompt("请输入查询的内容")
var res = arr.filter(function(item) {
        return item.indexOf(input) != -1
        // 也可以写 > -1
})
console.log(res)
1
2
3
4
5
6
7

13.5.json格式字符串

// split
// json字符串-->对象
var str = '{"name":"ali", "age":100}'
var obj = JSON.parse(str)
console.log(obj) //不符合格式的就会出问题

// 下面的会报错，因为key没有引号，且不能多逗号
/*var str1 = '{name:"ali", age:"100"}'
var obj1 = JSON.parse(str1)
console.log(obj1)*/

// 对象-->JSON字符串
var obj1 = {
        "name": "alala",
        "age": 100
}
var str1 = JSON.stringify(obj1)
console.log(obj1, str1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

13.6.模板字符串

//es6 -`` 反引号（~键英文输入）
/*var myhtml = '11111111\
222222\
333333333
'*/
var myhtml = `11111111
222222
333333333`
document.write(myhtml)

var myname = "alili"
var str = `my name is ${myname}, ${10+20} ${10>20 ? 'aaa':'bbb'}` //反引号里面还可以填入变量
document.write(str)

var arr = ["xiaoming", "daqiang", "blue"]
var arr2 = arr.map(function(item) {
        return `${item}`
})
console.log(arr2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

14.数字常用方法

14.1.具体方法

// Number 
// toFixed() 保留几位小数，且返回的是字符串
var price = 123.456
var sum = price.toFixed(2) - 0 + 100
console.log(sum.toFixed(2))
1
2
3
4
5

// Math 对象
// console.log(Math)
// random [0,1)之间的随机数
console.log(Math.random())

// round 四舍五入取整
console.log(Math.round(4.46))

// ceil 向上取整
console.log(Math.ceil(4.46))

// floor 向下取整
console.log(Math.floor(4.96))

// abs 绝对值
console.log(Math.abs(-10))

// sqrt 平方根
console.log(Math.sqrt(4))

// pow(底数， 指数) 
console.log(Math.pow(2, 3))

// max(多个参数)
console.log(Math.max(2, 3))

// min(多个参数)
console.log(Math.min(2, 3))

// PI
console.log(Math.PI)
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

14.2.案例-随机整数

//  0-10 不包含10 
var res = Math.floor(Math.random() * 10)
console.log(res)
        //  0-10 包含10 
var res = Math.floor(Math.random() * (10 + 1))
console.log(res)
        //  10-20 不包含20 
var res = Math.floor(Math.random() * 10) + 10
console.log(res)
        //  10-20 包含20 
var res = Math.floor(Math.random() * (10 + 1)) + 10
console.log(res)

// 函数  min-max 不包含
function getRnd1(min, max) {
        if (min > max) {
                console.error("参数有误")
                return
        }
        return Math.floor(Math.random() * (max - min)) + min
}
console.log(getRnd1(10, 20))

// 函数  min-max 包含
function getRnd2(min, max) {
        if (min > max) {
                console.error("参数有误")
                return
        }
        return Math.floor(Math.random() * (max - min + 1)) + min
}
console.log(getRnd2(10, 20))

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

15.时间对象

15.1.new Date()

// 不传参，获取当前时间
var date = new Date()
console.log(date) // 自动转为字符串

// new Date 传参
// 1个传参 毫秒数
var date1 = new Date(1000)
console.log(date1)
        // 1970 1 1 0:0:1

// 2个参数 3个参数
var date2 = new Date(2023, 0) // 年份，月份（0-11对应1-12月），几号，时，分，秒
console.log(date2)

var date3 = new Date(2023, 0, 3, 12, 55, 37)
console.log(date3)

// 字符串
var date4 = new Date("2023-10-10 10:10:10")
var date5 = new Date("2023/10/10 10:10:10")
console.log(date4)
console.log(date5)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

15.2.时间对象常用方法

15.2.1.获取

var date = new Date()

// getFullYear()
console.log(date.getFullYear())

// getMonth() 返回的是0-11 对应 1-12
console.log(date.getMonth())

// getDate() 几号
console.log(date.getDate())

// getDay() 周几
console.log(date.getDay())

// getHours() 
console.log(date.getHours())

// getMinutes()
console.log(date.getMinutes())

// getSeconds()
console.log(date.getSeconds())

// getMilliseconds()
console.log(date.getMilliseconds())


// getTime() 时间戳
console.log(date.getTime()) // 距1970.1.1. 0:0:0的毫秒数
console.log(new Date(1663919317554))

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

15.2.2.设置

// 设置
var date = new Date()

console.log(date)

date.setFullYear(2025)
date.setMonth(5)
date.setDate(6)
date.setHours(12)
date.setMinutes(55)
date.setSeconds(21)
date.setMilliseconds(356)
console.log(date)

// 时间戳
date.setTime(1663919317554)
console.log(date)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

16.定时器

16.1.延迟定时器 & 间隔定时器

<button id="btn1">清除定时器-延时button>
<button id="btn2">清除定时器-间隔button>

<script>
// 注册定时器，延时执行代码 2000=2s
var time1 = setTimeout(function() {
        console.log("abc")
}, 2000)

// 注册间隔定时器，间隔时间执行代码 1000=1s
var time2 = setInterval(function() {
        console.log(new Date())
}, 1000)

console.log(time1, time2) // 注册顺序

// 停下的方法
// clearTimeout(time1)
// clearInterval(time2)


console.log(btn1, btn2) // 直接通过id，拿到按钮对象
btn1.onclick = function() {
        console.log("btn1 onclick")
        clearTimeout(time1)
}
btn2.onclick = function() {
        console.log("btn2 onclick")
        clearInterval(time2)
}
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

// 总体同步，间隔里的function异步执行，且异步在同步执行完后才执行
console.log("111111111111")
setTimeout(function() { // 顺序仍然是从上往下的，不过先进行注册的这一步，然后继续向下，与此同时，异步中仍然在执行0s后的function
        console.log("abc")
}, 0)
console.log("222222222222")
1
2
3
4
5
6

16.2.案例-倒计时

<div id="box">div>
<script>
var currentDate = new Date()
var targetDate = new Date("2022/11/11")

console.log(targetDate - currentDate) // 时间戳差值

// 函数
function diffTime(current, target) {
        var sub = Math.ceil((target - current) / 1000) //毫秒差
        var day = parseInt(sub / (60 * 60 * 24))
        var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60))
        var minutes = parseInt(sub % (60 * 60) / 60)
        var seconds = sub % 60
        var obj = {
        day: day,
        hours: hours,
        minutes: minutes,
        seconds: seconds
        }
        return obj
}


setInterval(function() {
        var currentDate = new Date()
        var obj = diffTime(currentDate, targetDate)
        // console.log(obj)
        // document.write(`距离TB双11还有 ${obj.day}天${obj.day}时${obj.minutes}分${obj.seconds}秒`)
        // document.write("
")

        box.innerHTML = `距离TB双11还有 ${obj.day}天${obj.day}时${obj.minutes}分${obj.seconds}秒`
}, 1000)
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
34

相关阅读:
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
 用python写一个贪吃蛇的程序能运行能用键盘控制
 kafka笔记要点和集群安装、消息分组、消费者分组以及与storm的整合机制
 Qt Quick读取本地文件并显示成表格
 【C进阶】指针和数组笔试题解析
 项目中应该使用nginx还是拦截器来封禁IP
echarts 折线图柱图封装
 SpringBoot使用DevTools实现后端热部署
 MindSpore:无法观看官网线上课程视频
 SpringBoot整合sql数据源
原文地址：https://blog.csdn.net/m0_43416592/article/details/126905767

JavaScript基础（1）

目录

1. 输出方式

2. 书写位置

3. JS注释与规范

4. JS变量

4.1. 声明使用

4.2. 变量命名规则规范

5. 数据类型

6. 数据类型转换

6.1. 数字类型转换

6.2. 字符串转换

6.3. 布尔类型转换

7. 运算符

7.1. 数学运算符

7.2. 赋值运算符

7.3. 比较运算符

7.4. 逻辑运算符

7.5. 自增自减运算符

7.6. 三目运算符

8. 条件、循环语句

9. 函数

9.1. 定义函数

9.2. 返回值

9.3. 预解析

9.4. 重名问题

9.5. 作用域

9.5.1. 区别

9.5.2. 访问规则

9.5.3. 赋值规则

10. 对象

10.1. 创建对象

10.2. 操作对象

10.3. 遍历对象

11. 不同数据类型的存储

12.数组

12.1.创建数组

12.2.数组实现排序

12.2.1.冒泡排序

12.2.2.选择排序

12.3.数组常用方法-1

push

pop

unshift

shift

splice

reverse

sort

12.4.数组常用方法-2

concat

join

slice

indexOf

lastIndexOf

案例-数组去重

12.5.数组常用方法-3

forEach

map

filter

every

some

find

reduce

13.字符串

13.1.创建

13.2.length、下标、遍历

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

13.3.常用方法

charAt(索引)

charCodeAt(索引)

toUpperCase() & toLowerCase()

substr(开始索引，长度) & substring(开始索引，结束索引) & slice(开始索引，结束索引)

案例-首字母大写

replace(待替换字符，替换后的字符)

split

indexOf & lastIndexOf

concat

trim() & trimStart() & trimLeft() & trimEnd() & trimRight()

13.4.案例-模糊查询

13.5.json格式字符串