【9.0】前端基础之JavaScript初识#

js也是一门面向对象的编程语言，一切皆对象

【一】变量命名规范#

变量名只能是数字/字母/下划线/$
变量名命名规范(js中推荐驼峰式命名法)
变量民不能用关键字作为变量名

【二】JS代码的书写位置#

可以单独开设JS文件书写
还可以直接在浏览器提供的 console 界面书写
- 在用浏览器书写JS的时候左上方的清除按钮这是清空页面不能清空已经写完的代码的残留问题
- 如果想重新开始，推荐新建页面书写
建议用自己写的html页面书写js代码

【三】数据类型#

js是一门拥有动态类型的语言

1
var name = "dream";
2
var name = 123;
3
var name = [];

name可以指向任意类型
- 但是在某些语言中。变量名只能指向其中一种，不支持做更改

【1】数值类型 Number#

演示#

1
var a= 11;
2
var b = 11.11;

查看数据类型#

1
typeof a;

注意#

特殊的 NaN ：数值类型
- 表示的意思是不是一个数字， Not A Number

类型转换#

1
ar e = parseInt("11.11")
2
console.log(e) // 11
3

4
console.log(parseInt("11asdasdada33336669932adsada"))
5
// 只要开头有数字就可以转，如果开头不是数字则是NoN
6
// 11
7

8
console.log(parseInt("aasdads444564546"))
9
// NaN

【2】字符类型String#

1
var a = "dream";
2
// undefined
3
typeof a;
4
// 'string'
5
var s1 = "meng";
6
// undefined
7
typeof s1;
8
// 'string'
9
var s2 = '''name''';
10
// VM332:1 Uncaught SyntaxError: Unexpected string

不支持三引号

模版字符串#

书写多行字符串

1
var s3 = `
2
as
3
df
4
ce
5
gh
6
`

格式化字符串
- 书写 ${} 会向前找定义过的变量值
  - 如果找不到会报错

模板字符串除了可以定义多行文本，还可以实现格式化字符串操作

1
var name = "dream";
2
// undefined
3
var age = 18;
4
// undefined
5
var str = `my name is ${name} my age is ${age}`;
6
// undefined
7
str
8
// 'my name is dream my age is 18'

拼接字符串#

在js中推介用 + 号做拼接

常用方法#

1
// 统计字符长度
2
var name1 = "  dream  ";
3
name1
4
// '  dream  '
5
name1.length
6
// 9
7
// -------------------------------------------
8
var name1 = "  dream  ";
9
// undefined
10
name1
11
// '  dream  '
12

13
// （1）去除两端空白
14
name1.trim()
15
// 'dream'
16

17
// （2）去除左边的空白
18
name1.trimLeft()
19
// 'dream  '
20

21
// （3）去除右边的空白
22
name1.trimRight()
23
// '  dream'
24
// -------------------------------------------
25
// （4）返回索引为n的字符
26
name1.charAt(5)
27
// 'a'
28

29
// （5）返回字符所在的索引(r的索引)
30
name1.indexOf("re");
31
// 3
32
// -------------------------------------------
33
// （6）切片
34
var name2="$$dream$$";
35
// undefined
36

37
name2
38
// '$$dream$$'
39

40
// （1）取索引 0~5的内容
41
name2.substring(0,5)
42
// '$$dre'
43

44
// （2）取索引 0~5的内容
45
name2.slice(0,5)
46
// '$$dre'
47

48
// （3）区别 slice 可以用 -1 取值
49
name2.substring(0,-1); // 废除
50
''
51
name2.slice(0,-1);
52
'$$dream$'
53
// -------------------------------------------
54
// 字符转大小写
55
var name3 = "NiHao,Dream,521"
56
// undefined
57

58
name3
59
// 'NiHao,Dream,521'
60

61
// （1）字符转全小写
62
name3.toLowerCase();
63
// 'nihao,dream,521'
64

65
//（2）字符转全大写
66
name3.toUpperCase();
67
// 'NIHAO,DREAM,521'
68
// -------------------------------------------
69
// 切分
70
var name4 = "dream|music|18|斋藤飞鸟|";
71
// undefined
72
name4
73
// 'dream|music|18|斋藤飞鸟|'
74

75
// 以指定字符切分字符串
76
name4.split("|");
77
// (5) ['dream', 'music', '18', '斋藤飞鸟', '']
78

79
// 参数 2 意思是拿前两个参数，如果大于目标个数，有几个拿几个
80
name4.split("|",2);
81
// (2) ['dream', 'music']
82
// -------------------------------------------
83
// 字符串拼接 可以自动转换数据类型，进行拼接
84
name1.concat(name2,name3,name4);
85
// '$$dream$$NiHao,Dream,521dream|music|18|斋藤飞鸟|'

【四】布尔类型 Boolean#

在Python中布尔值是首字母大写的
但是在js中布尔值是全小写的

1
var a = true
2
// undefined
3
typeof a
4
// 'boolean'

布尔值是false的有哪些
- 空字符串
- 0
- null
- undefined
- NaN

【五】null 和 undefined#

null
- 表示值为空，一般都是指定或者清空一个变量时使用
undefined
- 表示声明了一个变量，但是没有做初始化操作
- 函数没有指定返回值的时候也是返回的undefined

【六】对象#

数组
- 类似于Python当中的列表
自定义对象
- 类似于Python当中的字典

【1】数组#

1
// 声明数组
2
var l = [11,22,33,44];
3
// undefined
4
l
5
// (4) [11, 22, 33, 44]
6

7
// 查看数组类型
8
typeof(l)
9
// 'object'
10
var ll = [11,"ansg",11.11,true];
11
// undefined
12
ll
13
// (4) [11, 'ansg', 11.11, true]
14

15
// 数组根据索引取值
16
ll[1];
17
// 'ansg'
18

19
// 数组不能倒着取值
20
ll[-1];
21
// undefined

常用方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

Python中添加元素的方式
- append
  - 尾部追加
- extend
  - 扩展列表
  - 内部是 for循环 + append
- insert
  - 指定位置插入元素
Python中删除元素的方式
- pop
  - 弹出元素（默认是最后一个元素）
- remove
  - 移除元素
- del
  - 删除元素通用方法
Python中常用的方法
- map
  - 映射函数
- zip
  - 拉链方法
  - 将两个列表中的元素两两拼接成元祖返回
- filter
  - 过滤函数
  - 符合条件为真的元素被留下
- reduce
  - 多个进一个出

【2】常用方法#

1
var l= [11,22,33,44,55,66];
2
// undefined
3

4
l
5
// (6) [11, 22, 33, 44, 55, 66]
6

7
// （1）统计数组的个数
8
l.length
9
// 6
10

11
// （2）向数组尾部添加元素
12
l.push(77);
13
// 7
14
l
15
// (7) [11, 22, 33, 44, 55, 66, 77]
16

17
// （8） 弹出最后一个元素
18
l.pop();
19
// 77
20
l
21
// (6) [11, 22, 33, 44, 55, 66]
22

23
// （7）在头部添加一个元素
24
l.unshift(88);
25
// 7
26
l
27
// (7) [88, 11, 22, 33, 44, 55, 66]
28

29
// （8） 移除头部元素
30
l.shift(99);
31
// 88
32
l
33
// (6) [11, 22, 33, 44, 55, 66]
34

35
// （8） 移除头部元素
36
l
37
// (5) [22, 33, 44, 55, 66]
38

39
// （9） 切片：取索引 0-3 的元素
40
l.slice(0,3)
41
// (3) [22, 33, 44]
42

43
// （10） 反转列表
44
l.reverse();
45
// (5) [66, 55, 44, 33, 22]
46

47
// （11） 将元素提出，拼接字符串
48
l.join("$");
49
// '66$55$44$33$22'
50

51
// （12）添加数组，但是不改变原来的数组
52
l.concat([111,2222,3333])
53
// (8) [66, 55, 44, 33, 22, 111, 2222, 3333]

【3】forEach#

一个参数#

数组中的每一个元素

1
// 类似于Python中的map函数
2
var ll = [11,22,33,44,55,66,77];
3
undefined
4

5
// 参数（一个函数，一个迭代列表）
6
ll.forEach(function (value) {
7
    console.log(value)
8
},ll)
9

10
/*
11
VM2817:2 11
12
VM2817:2 22
13
VM2817:2 33
14
VM2817:2 44
15
VM2817:2 55
16
VM2817:2 66
17
VM2817:2 77
18
undefined
19
*/

两个参数#

数组中的每一个元素 + 数据的索引

1
// 类似于Python中的map函数
2
var ll = [11,22,33,44,55,66,77];
3
undefined
4

5
// 参数（一个函数，一个迭代列表,元素所在的索引值）
6
ll.forEach(function (value,index) {
7
    console.log(value,index)
8
},ll)
9

10
/*
11
VM2856:2 11 0
12
VM2856:2 22 1
13
VM2856:2 33 2
14
VM2856:2 44 3
15
VM2856:2 55 4
16
VM2856:2 66 5
17
VM2856:2 77 6
18
undefined
19
*/

三个参数#

数组中的每一个元素 + 数据的索引 + 数据的来源

1
// 类似于Python中的map函数
2
var ll = [11,22,33,44,55,66,77];
3
undefined
4

5
// 参数（一个函数，一个迭代列表,元素所在的索引值,数据的来源）
6
ll.forEach(function (value,index,arr) {
7
    console.log(value,index,arr)
8
},ll)
9

10
/*
11
VM2884:2 11 0 (7) [11, 22, 33, 44, 55, 66, 77]
12
VM2884:2 22 1 (7) [11, 22, 33, 44, 55, 66, 77]
13
VM2884:2 33 2 (7) [11, 22, 33, 44, 55, 66, 77]
14
VM2884:2 44 3 (7) [11, 22, 33, 44, 55, 66, 77]
15
VM2884:2 55 4 (7) [11, 22, 33, 44, 55, 66, 77]
16
VM2884:2 66 5 (7) [11, 22, 33, 44, 55, 66, 77]
17
VM2884:2 77 6 (7) [11, 22, 33, 44, 55, 66, 77]
18
undefined*/

【4】splice#

两个参数#

起始位置 + 删除的个数

1
ll
2
// (7) [11, 22, 33, 44, 55, 66, 77]
3

4
// 从索引为0的位置向后删除三个元素
5
ll.splice(0,3);
6
// (3) [11, 22, 33]
7
ll
8
// (4) [44, 55, 66, 77]

三个参数#

先删除后添加

1
// 先将指定索引的元素删除，再在原来的位置添加后面的元素
2
ll
3
// (4) [44, 55, 66, 77]
4
ll.splice(0,1,888);
5
// [44]
6
ll
7
// (4) [888, 55, 66, 77]

【5】map#

类似于forEach
- 也可以加三个参数

1
var l1 = [11,22,33,44,55,66,77,88]
2
// undefined
3
l1
4
// (8) [11, 22, 33, 44, 55, 66, 77, 88]
5

6
l1.map(function(value){console.log(value)},l1)
7

8
/*
9
VM3225:1 11
10
VM3225:1 22
11
VM3225:1 33
12
VM3225:1 44
13
VM3225:1 55
14
VM3225:1 66
15
VM3225:1 77
16
VM3225:1 88
17
*/

1
l1.map(function(value,index){return value*2},l1)
2
(8) [22, 44, 66, 88, 110, 132, 154, 176]

【七】运算符#

【1】算数运算符：`+`#

+ 在前面
- 先增加后赋值
+ 在后面
- 先赋值后增加

1
var a = 10;
2
// undefined
3
var res1 = a++;
4
// undefined
5
var res2 = ++a;
6
// undefined
7
res1
8
// 10
9
res2
10
// 12

【2】比较运算符 `==` 与 `===`#

当使用”==“比较运算符时，会进行类型转换然后再比较。
- 如果操作数的类型不同，则会尝试将它们转换为相同的类型，然后再进行比较。
而使用”===“严格相等运算符时，不会进行类型转换。
- 它要求操作数的值和类型都相同才会返回true。

`==`

弱等于
- 内部自动转换成相同的数据类型比较了

`===`#

强等于
- 内部不做类型转换

1
1 == '1';
2
true
3
1 === '1';
4
false

【3】逻辑运算符#

Python中的 and or not
JavaScript中 && || !

1
5 && '5';
2
'5'
3
0 || 1;
4
1
5
!5 && '5';
6
'5'

【4】赋值运算符#

= += -+

【八】流程控制#

【1】if判断#

语法

1
// if - else
2
if (条件){条件成立执行的代码块}else{条件不成立时执行的代码块}
3
// if - else if - else
4
if (条件){条件成立执行的代码块}else if(条件){条件成立执行的代码块}else{条件不成立时执行的代码块}
5

6

7
// () 条件 {} 执行的代码块

1
var age = 10;
2
if (age>=18){
3
    console.log("你好")
4
}else{
5
    console.log("滚蛋")
6
};

1
// if - else
2
if (age >= 18 ){
3
    console.log("你好")
4
}else if(age<10){
5
    console.log("萝莉酱")
6
}else{
7
    console.log("滚蛋")
8
};

【2】switch - case 语法#

提前定义好可能出现的条件和解决方式
- break
  - 如果不加break，匹配成功之后会依次执行
- default
  - 所有条件都不成立时走的代码

1
var num = 2;
2
switch (num) {
3
    case 0:
4
        console.log("喝酒");
5
        break;
6

7
    case 1:
8
        console.log("吃饭");
9
        break;
10

11
    case 2:
12
        console.log("打牌");
13
        break;
14
  default
15
        console.log("走人")
16
}

【3】for循环#

1
for (起始条件，结束条件，循环条件){条件成立执行的代码}

1
// 打印 0-9 的数字
2
for (let i=0;i<10;i++){
3
    console.log(i)
4
}
5

6
// 打印列表内的每一个值
7
var ll = [11,22,33,44,55,66,77];
8
for (let i = 0;i < ll.length; i++){
9
    console.log(ll[i])
10
};

【4】while循环#

1
while (条件){条件成立执行的代码}

1
var i = 0;
2
while (i<100){
3
    console.log(i)
4
    i++;
5
};

【5】三元运算符#

Python中

1
res = 4 if 1 > 2 else 6

JavaScript中

1
条件 ？ 条件成立取到的值:条件不成立取到的值

1
var res = 1 > 2 ? 4 : 6;
2
// 6
3

4
var res = 1 > 2 ? 4 : (8 > 5 ? 999 : 888);
5
// 999

三元运算符不要过于复杂

【九】函数#

在Python中定义函数需要用 def
在JavaScript中定义函数需要用 function

【1】格式#

1
// 格式
2
function 函数名(形参,形参,形参，形参...){
3
    函数体代码
4
}

【2】无参函数#

1
// 无参函数
2
function func1(){
3
    console.log("我是无参函数")
4
}
5

6
func1()

【3】有参函数#

1
// 有参函数
2
function func2(a,b){
3
    console.log(a,b)
4
};
5

6
func2(1,2)

1
function func2(a,b){
2
    console.log(a,b)
3
};
4

5
func2(1,2)
6
// VM3577:2 1 2
7

8
func2(1,2,3,4,5,6,7)
9
// VM3577:2 1 2
10

11
func2(1)
12
//VM3577:2 1 undefined

在js中传多了只拿对应的数据
在js中传少了也不会报错

【4】关键字arguments#

1
function func3(a,b,c){
2
    console.log(arguments)
3
    console.log(a,b,c)
4
};

1
function func3(a,b,c){
2
    console.log(arguments)
3
    console.log(a,b,c)
4
};
5

6
func3(1,2,3,4,5,6,7)
7

8
/*
9
VM3668:2 Arguments(7) [1, 2, 3, 4, 5, 6, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
10
VM3668:3 1 2 3
11
*/

能够获取到函数接收到的所有参数

用途#

1
function func4(a,b,c){
2
    if (arguments.length > 3){
3
        console.log("传多了")
4
    }else if (arguments.length < 3){
5
        console.log("传少了")
6
    }else{
7
        console.log(a,b,c)
8
    }
9
};

【5】函数的返回值#

使用关键字 return
返回单个值

1
function index(){
2
    return 666
3
};

返回多个值要用数组约束

1
function index(){
2
    return [777,88,99]
3
};

JavaScript不支持解压赋值

【6】匿名函数#

1
function (){};
2

3
// 自调用
4
function (){}();
5

6
// 变量存储
7
var b = function (){}

【7】箭头函数#

用来处理简答的逻辑，类似于Python中的匿名函数

箭头左面的是形参
- 右边的是返回值

单个参数#

1
var func1 = v => v;

等价于

1
var func1 = function(v){
2
    return v
3
};

多个参数#

1
var func2 = (args1,args2) => args1 + args2;

等价于

1
var func1 = function(args1,args2){
2
    return args1 + args2
3
};

【十】函数的全局变量与局部变量#

1
var city = "BeiJing";
2
function f() {
3
  var city = "ShangHai";
4
  function inner(){
5
    var city = "ShenZhen";
6
    console.log(city);
7
  }
8
  inner();
9
}
10

11
f();  //输出结果是？

输出结果是：“ShenZhen”。
在函数 inner 内部，变量 city 的值被赋为 “ShenZhen”
- 因此 console.log(city) 会输出 “ShenZhen”。
由于函数 inner 是在函数 f 中定义的，并且在函数 f 中调用了 inner
- 所以同样的规则适用于函数 f。
即使在函数 f 内部有一个与全局变量 city 同名的局部变量 city
- 但在执行 console.log(city) 时，它将访问最内层的局部变量 city 的值
- 也就是 “ShenZhen”。

1
var city = "BeiJing";
2
function Bar() {
3
  console.log(city);
4
}
5
function f() {
6
  var city = "ShangHai";
7
  return Bar;
8
}
9
var ret = f();
10
ret();  // 打印结果是？

在你提供的代码中，输出结果将是：“BeiJing”。
首先，全局变量 city 被赋值为 “BeiJing”。
然后，在函数 f 内部定义了一个名为 city 的局部变量，将其值设置为 “ShangHai”。
接下来，f 函数返回了函数 Bar 的引用。
在执行 var ret = f() 后，ret 变量被赋值为 Bar 函数的引用
- 即 ret 现在指向函数 Bar。
最后，执行 ret()

此时由于 ret 指向 Bar 函数
- 所以会执行 Bar 函数，并打印当前作用域内的变量 city 的值，即输出 “BeiJing”。
注意，这是因为 Bar 函数在执行时访问的是其定义时所处的作用域，即全局作用域，而非 f 函数内部的作用域。

1
var city = "BeiJing";
2
function f(){
3
    var city = "ShangHai";
4
    function inner(){
5
        console.log(city);
6
    }
7
    return inner;
8
}
9
var ret = f();
10
ret();

输出结果将是：“ShangHai”。
首先，全局变量 city 被赋值为 “BeiJing”。
- 然后，在函数 f 内部定义了一个名为 city 的局部变量，将其值设置为 “ShangHai”。
- 接下来，f 函数返回了函数 inner 的引用。
在执行 var ret = f() 后，
- ret 变量被赋值为 inner 函数的引用
- 即 ret 现在指向函数 inner。
最后，执行 ret()
- 此时由于 ret 指向 inner 函数，所以会执行 inner 函数，并打印当前作用域内的变量 city 的值，即输出 “ShangHai”。
注意，这是因为 inner 函数在执行时访问的是其定义时所处的作用域，即函数 f 内部的作用域。在该作用域中，变量 city 的值为 “ShangHai”。

音乐

JavaScript 初识

【9.0】前端基础之JavaScript初识#

【一】变量命名规范#

【二】JS代码的书写位置#

【三】数据类型#

【1】数值类型 Number#

演示#

查看数据类型#

注意#

类型转换#

【2】字符类型String#

模版字符串#

拼接字符串#

常用方法#

【四】布尔类型 Boolean#

【五】null 和 undefined#

【六】对象#

【1】数组#

【2】常用方法#

【3】forEach#

一个参数#

两个参数#

三个参数#

【4】splice#

两个参数#

三个参数#

【5】map#

【七】运算符#

【1】算数运算符：+#

【2】比较运算符 == 与 ===#

==

===#

【3】逻辑运算符#

【4】赋值运算符#

【八】流程控制#

【1】if判断#

【2】switch - case 语法#

【3】for循环#

【4】while循环#

【5】三元运算符#

【九】函数#

【1】格式#

【2】无参函数#

【3】有参函数#

【4】关键字arguments#

用途#

【5】函数的返回值#

【6】匿名函数#

【7】箭头函数#

单个参数#

多个参数#

【十】函数的全局变量与局部变量#

支持与分享

【1】算数运算符：`+`#

【2】比较运算符 `==` 与 `===`#

`==`

`===`#