第一章 计算机基础
1-1 计算机基础导读
- 编程: 让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程
- 计算机程序: 计算机所执行的一系列的指令集合,而程序全部都是用我们掌握的语言编写的通过计算机语言向计算机发出命令
1-2 计算机语言
- 计算机语言分为: 机器语言,汇编语言,高级语言
- 实际上计算机执行的都是机器语言,由0和1组成的二进制数,二进制数是计算机语言的基础
1-3 编程语言
编程语言:用来控制计算机的一系列指令,有固定的格式和词汇,如今通用的编程语言:
- 汇编语言
- 高级语言
翻译器
编程语言——翻译器——机器语言(二进制)
- 编程语言:主动,有逻辑性和行为性
- 标记语言:被动
1-4 计算机基础
- 硬件和软件
- 硬件:
- 输入设备:鼠标,键盘,手写板,摄像头
- 输出设备: 显示器,打印机,摄影仪
- CPU:负责处理数据与运算
- 键盘及内存: 负责存储数据,硬盘永久存储数据,内存暂时存储数据
- 软件:
- 系统软件: Windows/Linux/macOS
- 应用软件: 浏览器,sublime
- 软件运行在硬件上
- 硬件:
1-5 数据存储
- 计算机内部使用二进制0和1来表示数据
- 所有数据,包括文件、图片最终都是以二进制数据(0,1)的形式存放在硬盘中
- 所有程序,包括操作系统,本质都是各种数据,也以二进制存放在硬盘中。平时安装软件,就是把程序文件复制到硬盘中
- 硬盘、内存都是保存二进制数据
- 数据存储单位
- bit<byte<kb<CB<TB<…
- 位: 1bit可以保存一个0或者1(最小的存储单位)
- 字节(Byte): 1B= 8b
- 千字节(KB): 1KB = 1024B
- 兆字节(MB)
- 吉字节(GB)
- 太字节(TB)
1-6 程序运行
- 硬盘————>内存条————–>Cpu
- 打开某个程序时,先从硬盘中把程序的代码加载到内存中
- CPU执行内存中的代码
- 注意: 之所以要内存的原因: cpu运行太快,如果只从硬盘中读数据,会浪费cpu性能;因此,使用存储速度更快的内存来保存运行时的数据(内存是电,硬盘是机械)
第二章 初识JavaScript
2-1 JavaScript历史
- 布兰登·艾奇,1995年用10天完成js设计,网景公司最初命名为LiveScript,后来与Sun合作改名为JavaScript
- javaScript:世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
- 脚本语言: 不需要编译,运行过程中由js解释器(js引擎)逐行来解释并执行
- 可以基于node.js技术进行服务器编程
- JS的作用:
- 表单动态校验(密码强度检测)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
2-2 浏览器执行JS简介
- 浏览器分为渲染引擎和JS引擎
- 渲染引擎: 用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
- JS引擎:也称JS解析器,用来读取JS代码,对其处理后运行,比如chrome浏览器的V8
2-3 JS的组成
- javaScript分为
- ECMAScript(Java Script语法);
- DOM(页面文档对象模型)
- BOM(浏览器对象模型)
- ECMAScript是由ECMA国际进行标准化的一门标准语言,它被称为JavaScript或者JScript,但实际上后两者都是ECMAScript语言的实现和扩展
- ECMAScript分为JavaScript(网景公司)和Jscript(微软公司)
- ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
- DOM–文档对象模型(W3C组织推荐的处理可扩展标记语言的标准编程接口),通过DOM的接口对页面上的各种元素进行操作
- BOM–浏览器对象模型
- 提供了独立于内容的/可以与浏览器窗口进行互动的对象结构。
- 通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率
2-4 JS初体验
- JS的书写位置:
- 行内(写在body中)
- (常用)内嵌
<head><script>alert("沙漠骆驼");</script></head>
- 和外部,(外部新建my.js)
- 引入(在head中)
<script src="my.js"></script>
- 引入(在head中)
- 注意:
- HTML中推荐使用双引号,JS中推荐使用单引号
- alert(“”)|||alert(‘’)
- HTML中推荐使用双引号,JS中推荐使用单引号
- 注释:
- //
- /* */ (Ctrl+shift+/)
- JS 输出输入内容
- alert(msg) : 浏览器弹出警示框
- console.log(msg): 浏览器控制台打印输出信息
- prompt(info) : 浏览器弹出输入框,用户可以输入
2- 5 变量
变量: 用于存放数据的容器,通过变量名获取数据,甚至数据可以修改
变量的使用:
- 变量的初始化
var age = 19;
- 声明变量
var age;
(开房) - 赋值: age是我们定义的变量名。我们要通过变量名来访问内存中分配的空间 (住进去)
- 声明变量
- 变量的初始化
变量案例弹出用户名(重学HTML+css+js文件中)
变量语法拓展
- 同时声明多个变量 :
var age= 19,name= ndh,sex = 99;
- 只声明不赋值,结果undefined
- 不生命不赋值,直接使用会报错
- 不声明直接赋值,可以直接使用,变成全局变量
- 同时声明多个变量 :
变量的命名规范:
- 字母,数字,下划线,美元符号组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字,保留字(例如:var是关键字,不能作为变量名;)
- 驼峰命名法
第三章 数据类型
3-1 数据类型简介
js的变量数据类型只有在程序运行过程中,根据等号右边的数据类型来判断的
js是动态语言,变量的数据类型是可以变化的
1
2var x = 10;
x = 'pink'; //x字符串型数据类型的分类:
- 简单数据类型
- Number:数字型,包括整型值和浮点型值
- Boolean: 布尔值类型
- String: 字符串类型
- Undefined:
- Null:
var a =null
- 简单数据类型
3-2 简单数据类型的介绍:
数字型:
进制: 二,八,十,十六进制
八进制:
010
, (0-7)中的任意数,程序里面数字前面加0表示八进制;var num = 010; console.log(num); //输出的是十进制8
arr.length;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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
- 十六进制 0-9 a-f 数字的前面加0x表示十六进制
- ```
var num = 0x999;
console.log(num);
```
- JavaScript中数值的最大最小值
- alert(Number.MAX_VALUE); //最大值 1.79
- alert(Number.MIN_VALUE); //最小值 5e-324
- 数字型Number
- alert(Infinity); //代表无穷大
- alert(-Infinity); //代表无穷小
- NaN , Not a number,代表一个非数值
2. 字符串类型(推荐使用单引号)
- `var str = ‘我是一个”高富帅“的’;`
- 字符串转义符
- `\n` (换行符) `\\(斜杠)` `\'(单引号)` \t: tab \b:空格
- 字符串长度(length属性)
```
var strMsg = "wdhubc":
console.log(strMsg.length);
```
- 字符串拼接(字符串类型+其他类型就是拼接)
```
console.log("沙漠"+"骆驼");
console.log('pink老师'+ 18/true);
```
3. 布尔值
- ```
var flag = true;
var flag = false;
console.log(flag + 1); //2
```
4. Undefined: 如果一个声明变量未赋值,就是undefined未定义数据类型
```
var variable;
console.log(variable + 'pink'); //undefinedpink
console.log(v..+1); //NaN. undefined 和数字(或者布尔值)相加,最后是NaN
```
##### 3-3 方法
1. isNaN()
- 这个方法用来判断非数字,并且返回一个值,如果是数字返回false;如果不是数字返回true
2. 检测数据类型: typeof
```
var num = 10;
console.log(typeof num);
var str ='pink';
console.log(typeof str);
```
- **prompt取过来的值是字符型的**
##### 3-4 数据类型转化
1. 什么是数据类型转化:
- 使用表单,prompt获取来的数据默认是字符串类型的,此时不能直接简单的进行加法运算,而需要转化数据类型,就是把一种数据类型的变量转化成另外一种数据类型
2. 转化成字符串类型
- `toString()`
```
var num = 1 ;
alert(num.toString());
```
- `String()强制类型转化`
```
var num = 1;
alert(String(num));
```
- **拼接字符串的方法实现转化效果**(隐式转化)
```
console.log(num+'wond');
```
3. 转化成数字型
- parseInt(String)函数:将stirng 类型转化成整数数值型
```
var age = prompt('请输入您的年龄');
console.log(parseInt(age));
console.log(parseInt('3.94')); //取整,3
console.log(parseInt('120px')); //120
console.log(parseInt('rem120px')); // NaN
```
- parseFloat(string)函数 : 将string类型转化成浮点数数值型
- Number():强制转换函数: 将string类型转化成数值型
```
console.log(Number('12'));
```
- 隐式转化:利用 - * /饮隐式转化
-
```
console.log('12' - 0); //12
```
4. 转化成布尔型
- Boolean()函数
- 代表空、否定的值会被转化成false,如:0,NaN,null,undefined;其余值会被转化为true
- ```
console.log(Boolean(NaN)); //false
```
5. 案例: 计算年龄
```
var year =prompt('请您输入你的出生年份');
var age = 2021 - year ; //减法,隐式转化
alert('今年'+age+'岁了');
```
##### 3-5 解释性语言和编译型语言
1. 翻译器翻译的方式: 编译【java】+解释【js】(两种方式之间的区别在于翻译的时间点不同)![666](D:/Front-end/md%E7%AC%94%E8%AE%B0/html+css+%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3+ps%E5%BF%AB%E6%8D%B7%E9%94%AE/666.png)
2. 标识符:开发人员为变量、属性、参数、函数取得名字
- 不能是关键字和保留字
## 第四章 运算符
> 运算符: 算数运算符,递增递减运算符,比较运算符,逻辑运算符,赋值运算符,运算符优先级
##### 4-1 算数运算符
1. 运算符也称操作符,用于实现赋值、比较和执行算数运算等功能
2. - 取余(取模): 3%2
- 浮点数值的最高精度是17位小数,在算数运算中其精确度完全不如整数
- 如何判断一个数能被整除呢?
- 余数是0就说明这个数能被整除,这就是%取余运算符的主要用途
3. 表达式和返回值
- 表达式: 由数字、运算符、变量等组成的式子
- 返回值
##### 4-2 自增运算符
1. 前置和后置递增
- 后置递增:先表达式返回原值,后面变量再自加1
- 前置递增: 先自家,后运算
##### 4-3 比较运算符(关系运算符)
1. 返回一个布尔值
- `console.log(18 == '18'); //true`
- 判断值是否相等,隐式转化
- === !== //全等 要求值和数据类型都一致
- console.log(18 === '18')
##### 4-4 逻辑运算符
1. 返回值为布尔值
- &&
- ||
- !
2. 短路运算: 左边的表达式值可以确定结果的时候,就不早继续右边的运算了
3. 值或者表达式参与逻辑运算
- 逻辑与(如果有空的【0 "" null undefined NaN】或者否定的为假,其余为真。)
- 表达式1 && 表达式2
- 如果第一个表达式的值为真,则返回表达式2
- 如果第一个表达式的值为假,则返回表达式1
- 例子:
```
console.log(0&&1+2&&456+2333); //0(短路运算,先计算加减)
```
- 逻辑或()
- 如果表达式1结果为真,则返回的是表达式1;
- 如果表达式1结果为假,则返回的是表达式2;
- 例子:
```
console.log(123 || 456); //123
console.log(123||456||33||33); //123
console.log(0||222); //0
```
##### 4-5 赋值运算符
1. 直接把数据赋值给变量的运算符
| = | | |
| ---------- | ---- | ---- |
| +=、-= | | |
| *=、/=,%= | | |
##### 4-6 运算符优先级
1.
![444](D:/Front-end/md%E7%AC%94%E8%AE%B0/html+css+%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3+ps%E5%BF%AB%E6%8D%B7%E9%94%AE/21%E5%B9%B4%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/444.png)
2.
## 第五章 流程控制
> 流程控制就是控制我们的代码按照什么结构顺序来执行
>
> - 顺序结构
> - 分支结构
> - 循环结构
##### 5-1 顺序流程控制
##### 5-2 分支流程
1. 控制if语句(if,switch语句)
- 进入网吧案例:(用户大于18岁,就可以进入)
```
var age = prompt('请输入您的年龄');
if( age >= 18){
alert('我想带你去网吧');
}
```
- 判断闰年的案例:
```
var age = prompt('请输入年份:');
if (age%4 == 0&&age% != 0 || age%400 == 0){
alert('你输入的年份是闰年;');
}else{
alert('你输入的年龄不是闰年;')
}
```
2. 三元表达式()
3. 分支流程控制switch语句
- 区别:
- switch..case语句处理case为确定值,而if..else语句常用于范围判断
- switch语句进行条件判断直接执行到程序的条件语句,效率更高。
- 分支较多用switch
##### 5-3 循环
> 循环,for循环,双重for循环,while循环,do while循环;do while循环;continue break
1. **打断点调试**
2. 求学生成绩案例中
```
sum = sum + parseFloat(score);
```
3. for循环一行打印5个星星
```
for(var i = 1;i <= 5; i++){
str = str + ''*';
}
console.log(str);
```
4. 双重for循环概述
- 即循环嵌套
- 例子: 打印五行五列星星
```
var str = '';
for (var i = 1; i <= 5; i++){ //外层循环负责打印5行
for(var j = 1; j <= 5; j++){
str = str + '*';
}
str = str + '\n';
}
console.log(str);
```
- 九九乘法表案例
```
var str = '';
for(var i = 1; i<=9;i++){
for(var j = 1; j<=i;j++){
console.log(i+'*'+j+'='+i*j+'\t');
}
log('\n');
}
```
> while循环
1.
## 第六章 数组导读
> - 为啥要用数组,
>
> - 能够创建数组,
> - 能够获取数组,
> - 对数组中的元素进行遍历,
> - 给数组新增一个元素,
> - 独立完成冒泡排序的案例
##### 6-1 为啥使用数组
1. 利用new创建数
```
var arr = new Array(); //创建一个数组
```
2. 利用数组字面量创建数组 [ ]
```
var arr = []; //创建一个空的数组
var arr1 = [1,2,'pink老师',true];
```
3. 获取数组中的元素
```
log(arr1);
log(arr[0]); //越界下标会出现undefined
```
4. 数组长度:var arr = [1,2,4,2,4,2,4,24,2,42,]; var arr1 = []; int j = 0 for( var i = 0;i < arr.length;i++){ if(arr[i] > 10){ newArr[j++] = arr[i]; } } log(newArr);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
5. **想要输出多个变量,用逗号分开就可以了**
`console.log(sum,average);
##### 6-2 数组的应用
1. 案例一: 数组转化成分割字符串(将数组['red','green','blue','pink']转化成字符串,并且用|或其他符号分割----->输出: 'red|green|blue|pink')
```
var arr = ['red','blue','green','pink'];
var str='';
for(var i = 0;i<arr.length;i++){
str += arr[i] + '|';
}
log(str);
```
2. 新增数组元素
- 方法一:修改length长度
```
var arr = ['red','green'];
arr.length = 5;
log(arr[4]); //undefined
```
- 方法二: 修改索引号,追加数组元素
```
arr[3] = 'pink';
arr[0] = 'yellow'; //替换原来的数组元素
arr = '有点意思'; //不要直接给数组元素赋值,否则里面的数组都不在了
```
3. 筛选数组元素
- 方法一: 声明一个新的数组用于存放新数据newArrnewArr[newArr.length] = arr[i];1
2
3
- 方法二:function getSUm(num1,num2) { var sum = 0; for(var i = num1; i <= num2; i++){ sum += i; } log(sum); } getSum(1,100); getSum(50,100);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
58
59
60
61
62
##### 6-3 数组案例
1. 删除数组指定元素(数组去重)
- 将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后,形成一个不包含0的新数组
- ```
var arr = [2,0,6,1,77,0,52,0,25,7];
var newArr = [];
for( var i = 0;i < arr.length;i++){
if(arr[i]!=0){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
```
2. 反转数组:
```
var arr = ['red','yellow','blue','purple'];
var newArr = [];
for(var i = arr.length-1; i >= 0;i--){
newArr[newArr.length] = arr[i];
}
```
3. 冒泡排序(一次比较两个元素,顺序错误就把他们交换过来)
![3](D:/Front-end/md%E7%AC%94%E8%AE%B0/JS/21%E5%B9%B4%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/3.png)
```
<script>
var arr = [3.3,3,3,41,3]
for(var i = 0;i <i.length;i++){
for(var j = 0;j<arr.length - i;j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1]
arr[j+1] = temp;
}
}
}
</script>
```
## 第七章 函数
> - 为为什么需要函数
> - 根据语法书写函数
> - 根据需求封装函数
> - 说出形参和实参的传递过程
> - 使用函数的返回值
> - 使用arguments获取函数的参数
##### 7-1 函数的概念
1. 函数就是封装了一段重复执行调用的代码块,目的: 让大量代码重复使用
2. 例子:<script> //利用函数计算1-100之间的累加和 //1. 声明函数 function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(sum); } //2.调用函数 getSum(); </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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
##### 7-2 函数的使用
1. 声明函数(利用函数关键字自定义函数【命名函数】): 语法:
```
function 函数名(){
函数体
}
```
- 举例:
```
function sayHi(){
log('hi~~');
}
```
- function声明函数的关键字全部小写
- 函数是做某件事情,函数名一般是动词sayHi
- 函数不调用自己不执行
2. 函数的声明方式二: (函数表达式【匿名函数】)
- 语法: `var 变量名= function(){};`
```
var fun = function() {
log('我是函数表达式')
}
```
- - fun是变量名,不是函数名
- 函数表达声明方式跟声明变量差不多。只不过变量里面存的是值,而函数表达式里面存的是函数
- 函数表达式也可以进行传递参数
3. 调用函数
- 语法: ` 函数名();`
- 举例: `sayHi(); //调用函数的时候千万不要忘记加小括号`
4. 函数的封装:
- 就是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
- 简单理解:封装类似于将电脑配件整合到机箱中
5. 函数可以调用另一个函数
```
function fn1() {
console.log(11);
fn2();
}
fn1();
function fn2() {
log(22);
}
```
6. 案例:(利用函数计算1-100之间的累加和)if(3> 5) { var num = 10; } log(num); //这是对的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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
##### 7-3 函数的参数和返回值
1. 函数可以重复相同的代码
```
function cook() {
log('酸辣土豆丝');
}
cook();
cook();
```
2. 我们可以利用函数的参数实现函数重复不同的代码
```
function 函数名(形参1,形参2..){
}
//函数调用
函数名(实参1,实参2...);
```
- 形参和实参的执行过程(形参接受实参传来的数据,形参类似于一个变量)
```
function cook(aru ){
log(aru);
}
cook('酸辣土豆丝'); //调用函数,实参
```
3. 函数形参和实参的匹配问题:
- 实参的个数多余形参的个数: 会取到形参的个数
- 实参的个数小于形参的个数:
- 多的形参个数定义为undefined,结果为NaN
4. 返回值:
- 格式:
```
function 函数名() {
return 需要返回的结果;
}
函数名(); //调用
```
- - (1)我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名( ) ,通过return 实现
- (2) 只要函数遇到return就把后面的结果返回给函数的调用者, 函数名( ) = 【return 后面的结果】
- 例子:
- 例子一
```
function getResult() {
return 666;
}
getResult();
log(getResult());
```
- 例子二:(求任意两个数的和)
```
function getSum(num1,num2) {
return num1+ num2;
}
log(getSum(1,2));
```
- 例子三:(利用函数求任意两个数的最大值)
```
function getMax(num1,num2){
//if(){
// return num1;
//}
return num1>num2 : num1?num2;
}
log(getMax(0,10));
```
- 例子四:(利用函数求任意一个数组中的最大值,求数组[5,2,99,101,67,77])中的最大数值
```
function getArrMax(arr) { //注意:这是在传一个数组
var max = arr[0];
for(var i =1 ;i <= arr.length; i++){
if(arr[i] > max){
max = arr[i];
}
}
return max;
}
//getArrMax([5,2,99,101,67,77]); //实参是一个数组送过去
var re =getArrMax([]);
console.log(re);
```
- <font color=green>(1)return语句终止函数,return语句之后的代码不被执行(2)并且只能返回一个值</font>,但是可以返回一个数组
```
function getSum(num1) {
return num1;
log('我的民族'); //不会输出
}
//只能返回一个值
function fn(num1,num2){
return num1,num2 ; //返回的结果是最后一个值
}
log(fn(1,2));
//返回一个数组
function getResult(num1,num2) {
return [num1 + num2,num1 - num2,num1 * num2, num1 / num2];
}
```
- 函数的注意事项:
- 函数没有return返回的是undefined
- return > break > continue
##### 7-4 函数的案例
1. 利用函数求任意两个数的和
```
function getSum(num1,num2) {
log(num1+num2);
}
getSum(10,20);
```
2. 利用函数求任意两个数之间的和
```
function getSums(start,end){
var sum = 0;
for(var i = start;i <= end; i++){
sum += i;
}
console.log(sum);
}
getSums(1,100);
```
3. <font color="red">由案例得出的注意点:形参可以看作是不用声明的变量</font>
4. 利用函数封装的方法,反转数组
```
function reverse(arr) {
var newArr = [];
for(var i = arr.length - 1;i >= 0;i--){
newArr[newArr.length] = arr[i];
}
return newArr;
}
var re = [1,2,3,42,42,43];
log(reverse(re));
```
5. 利用函数封装冒泡排序
```
function sort(arr) {
for(var i = 0; i < arr.length - 1;i++){
for(var j = 0;j < arr.length- i - 1;j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
}
```
6. 判断闰年
```
function isRunYear(year) {
if(year %100 != 0 && year %4 == 0 || year % 400 == 0){
flag = true;
}
return true;
}
log(isRunYear(2000));
```
7. 输出当前年份的2月份天数
```
function backDay() {
var year = prompt('请您输入年份:');
if(isRunYear(year)){
alert('当前年份是闰年,2月份有29天');
}else
alert('当前年份是平年,2月份有28天');
}
backDay();
//判断是否为闰年的函数
function isRunYear(year){
//如果是闰年,我们返回true,否则返回false
var flag = false;
if(year %100 != 0 && year %4 == 0 || year % 400 == 0){
flag = true;
}
return flag;
}
```
##### 7-5 arguments的使用
1. 当我们不确定有多少个参数传递时,可以用arguments来获取
- 在javascript中,arguments实际上是当前函数的一个内置对象
- 所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参
2. arguments的使用
```
function fn() {
console.log(arguments); //里面存储了所有传递过来的实参
//可以按照数组的方式遍历arguments
for(var i = 0; i < arguments.length; i++){
log(arguments[i]);
}
}
fn(1,2,3);
```
3. arguments展示形式是一个伪数组,因此可以进行遍历,伪数组具有以下特点:
- 具有length属性
- 按索引方式储存数据
- 不具有数组的push,pop等方法
4. 利用函数求任意个数的最大值
```
function getMax(){
var max = arguments[0];
for(var i = i;i < arguments.length; i++){
if(argumrnts[i] > max){
max = arguments[i];
}
}
}
log(getMax(1,2,3));
log(getMax(1,2,3,4,5));
log(getMax(11,2,332,343,4,21));
```
## 第八章 作用域及 JavaScript预解析
> - JavaScript的两种作用域
> - 区分全局变量和局部变量
> - 在作用域链中查找变量的值
##### 8-1 作用域
1. JavaScript作用域: 就是代码名字(变量)在某个范围内起作用和效果
- 为了提高程序的可靠性,减少命名的重复性、
2. js的作用域(es6)之前: 全局作用域,局部作用域
- 全局作用域: 整个script标签 或者是一个单独的js文件
- 局部作用域: 在函数内部就是局部作用域,这个代码的 名字只在函数内部起效果和作用
```
<script>
var num = 10; //全局作用域
log(num);
function fn() {
var num = 20; //局部作用域
log(num);
}
</script>
```
##### 8-2 变量作用域:
1. 在JavaScript中,根据作用域的不同,变量分为
- 全局变量: 在全局作用域下的变量
- **如果在函数内部没有声明,直接使用的变量也叫全局变量**
```
function fun(){
num2 = 100;
}
log(num2);
```
- 局部变量: 在局部作用域下的变量,或者在函数内部的变量就是局部变量
- 注意: 函数的形参也可以看作局部变量
```
//这是错的
function fun() {
var num1 = 10;
}
log(num1);
```
2. 从执行效率来看全局变量和局部变量
- 全局变量只有在关闭浏览器的时候才会才会销毁,比较占内存资源
- 局部变量 ,当我们程序执行完毕就会销毁,比较节约内存资源
3. JS没有块级作用域function 构造函数名(){ this.属性 = 值: this.方法 = function() {} } new 构造函数名();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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
##### 8-3 作用域链
1. - 只要是代码,就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用**链式查找**决定哪些数据能**被外部函数访问**就称**作用域链**(<font color=red>最近原则</font>)
```
var num = 10;
function fn() {
var num = 20;
function fun(){
log(num);
}
}
```
2. 作用域链案例:
```
```
> - 预解析器运行JS分为
> - 能够说出变量提升的步骤和运行过程
> - 函数提升的步骤和运行过程
##### 8-4 预解析
1. - 问题1
```
log(num); // undefined
var num = 10;
//注意啊啊啊啊啊啊啊啊啊!!!!!!就是执行了一下代码
var num;
log(num);
num = 10;
```
- 问题2
```
//fun(); //这样子会报错
//注意啊啊啊啊啊啊啊啊啊!!!!!!就是执行了一下代码
var fun;
fun();
fun = function() {
log(22);
}
var fun = function() {
log(22);
}
//fun 这样子调用不会报错
```
2. js引擎运行分为两步: 预解析,代码执行
- 与解析: js引擎会把js里面所有的var,还有function 提升到当前作用域的最前面
- 代码执行: 按照代码书写顺序从上往下执行
3. 预解析分为 变量预解析(变量提升【**主意啊!!!!只提升变量定义,不提升变量赋值**】)和 函数预解析(函数提升)
- 变量提升 就是把所有的**变量声明**提升到当前的作用域最前面,**不提升赋值操作**
- 函数提升 就是把所有的变量声明提升到当前的作用域的最前面, **不调用函数**
4. 函数表达式的调用必须写在函数表达式的下面
##### 8-5 预解析案例
1. 案例一:
```
var num = 10;
fun();
function fun( ){
log(num);
var num = 20;
}
////////////////////相当于执行了以下操作
var num;
function fun() {
var num;
log(num); //undefined
num = 20;
}
num = 10;
fun();
```
2. 案例二:
```
var a = 18;
f1();
function f1() {
var b = 9;
log(a);
log(b);
var a = '123';
}
//////相当于执行以下代码
var a;
function f1() {
var b
b = 9;
var a;
log(a);
log(b);
a = '123';
}
```
3. 案例三: (**经典面试题**)
```
funxtion f1() {
// 相当于 var a = 9; b = 9; c = 9;b和c直接赋值,没有var声明,当 全局变量看
//集体声明 var a = 9,b = 0, c = 9
var a = b = c = 9;
log(a); //9
log(b); //9
log(c); //9
}
f1();
log(c); //9
log(b); //9
log(a); // 报错
```
## 第九章 对象
> - 说出为什么需要对象
> - 使用字面量创建对象
> - 使用构造函数创建对象
> - 说出new的执行过程
> - 遍历对象
##### 9-1 JavaScript对象及创建对象
1. 对象是具体的事物
- 明星,女朋友,苹果,班主任都不是对象
2. 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等
- 对象是由属性和方法组成的
- 属性: 事物的特征(常用名词)
- 方法: 事物的行为(常用动词)
3. 利用字面量创建对象([]是数组的字面量,{}是对象的字面量)
- 对象字面量: 就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法
- 语法: `var obj = {}; //创建了一个空的对象`
- 里面的属性或者方法我们采用键值对的形式(键 属性名 : 值 属性值)
- 多个属性或者方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
```
var obj = {
uname: "张三丰";
age : 18;
sex: '男',
sayHi: function() {
log('hi~');
}
}
```
4. 使用对象
- 调用对象的属性,我们采取 对象名.属性名
`log(obj.uname);`
- 调用属性还有一种方法: 对象名['属性名']
`log(obj['age']);`
- 调用对象的方法sayHi : 对象名.方法名
`obj.sayHi(); //函数调用必须要添加()`
##### 9-2 变量、属性、函数、方法总结:
1. 变量、属性、函数、方法总结:
2. 变量和属性:
- 相同,都是用来存储数据的
```
var num = 10;
var obj = {
age : 18
}
```
- 变量 : 单独声明并赋值,使用的时候直接写变量名,单独存在
- 属性 : 在对象里面的不需要声明,使用的时候必须是对象.属性
3. 函数和方法
- 相同点:都是实现某种方法,做某种事
- 不同点:
- 函数是单独声明,并且调用的函数名()单独存在
- 方法在对象里,调用的时候: 对象.方法
- ```
var obj = {
age: 18;
//方法
fn: function(){
}
}
//函数
function fn() {
}
```
##### 9-3 利用new Object创建对象
1. 利用new Object 创建对象
```
var obj = new Object();
obj.name = "张三丰";
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
log('hi~');
}
log(obj.uname);
log(obj['sex']);
obj.sayHi();
```
- 利用等号 = 赋值的方法,添加对象的属性和方法
- 每个属性和方法之间用分号结束
##### 9-4 构造函数创建对象
1. 我们前面两种创建对象的方式一次只能创建一个对象
```
var ldh = {
uname: '刘德华',
age : 55,
sing: function(){
log('冰雨');
}
}
```
2. 一次创建一个对象(如上),里面的很多属性和方法是大量相同的,只能ctrl+c/v
- 我们可以利用函数的方法,重复这些相同的代码就把这个函数称为 构造函数
- 这个函数不一样,里面封装的不是普通代码,而是 对象
- **构造函数就是我们对象里面的一些相同的属性和方法抽象出来封装到函数里面**
3. 构造函数创建对象方法:
```
//需要创建四大天王的对象,相同的属性: 名字,年龄,性别;相同的方法: 唱歌
function Star(uname,age,sex) {
this.name = uname;
thia,age = age;
this.sex = sex;
this.sing = function(sang){
log(sang);
}
}
var ldh = new Star('刘德华',18,'男');
log(typeof ldh); //调用函数返回的是一个对象
log(ldh.name);
log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友',19,'男');
log(zxy.name);
```
- **构造函数名字首字母要大写**
- **构造函数不需要return就可以返回结果**
4. 构造函数的语法规范:function(max,min){ min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random()*(max-min))+min; }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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
##### 9-5 构造函数和对象区别及new关键字执行过程
1. 构造函数(如Star(),抽象了对象的公共部分,封装到函数里面,泛指某一大类)
```
function Star (uname, age, sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华',12,'男');
```
2. 对象 是一个具体的事物(如new Stars(),特指某一个,通过new关键字创建对象的过程称为对象实例化,对象特指是一个具体的事物)
```
var ldh = new Star('刘德华',18,'男'); //调用函数返回的是一个对象
log(ldh);
```
3. new关键字执行过程
```
function Star (uname, age, sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华',12,'男');
```
- new构造函数可以在内存中创建一个空的对象
- this就会指向刚才创建的空对象
- 执行构造函数里面的代码,给这个空对象添加属性和方法
- 返回这个新对象(构造函数无需return)
![4](D:/Front-end/md%E7%AC%94%E8%AE%B0/JS/21%E5%B9%B4%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/4.png)
##### 9-6 遍历对象
1. ```
var obj = {
name: 'pink老师',
age : 18,
sex: '男'
fn: function(){}
}
//for in遍历我们的对象
for (var k in obj){
log(k); //k 变量 输出 得到的是属性名
log(obj[k]); //obj[k]得到的是 属性值
}
```
2. for..in 语句用于对数组或者对象的属性进行循环操作
- 语法:
```
for(变量 in obj){
log(k);
}
```
![5](D:/Front-end/md%E7%AC%94%E8%AE%B0/JS/21%E5%B9%B4%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/5.png)
##### 9-7 蝇叮咬回去看154集,老哥,长点心啊!!!!完成你的作业撒
## 第十章 内置对象
> - 什么是内置对象
> - 根据文档查询指定API的使用方法
> - 使用Math对象的常用方法
> - 使用Date对象,Array,String对象
##### 10-1 内置对象
1. JavaScript中的对象分为: 自定义对象,内置对象,浏览器对象
- 自定义对象和内置对象是JS基础内容,属于ECMAScript;第三个浏览器对象是我们JS独有的,JSAPI讲解
- 内置**对象**就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或最基本的必要的功能(属性和方法)
2. 常见内置对象: Math/Date/Array/String
3. 查阅MDN文档: Mozilla开发者网络(MDN)提供了有关开放网络(Open Web)的信息,包括HTML、CSS和万维网及HTML5应用的API
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
##### 10-2 Math方法:
> Math数学对象 不是一个构造函数,所以我们不需要new 来调用, 而是直接使用里面的属性和方法即可
1. Math最大值方法:
`console.log(Math.PI); //属性直接用`
`log(Math.max(1,22,3));`
`log(Math.min())`
- 给定的内容中有非数字,返回NaN
- 没有参数,结果为`-Infinity`
2. Math绝对值和三个取整方法
```
Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入,就近取整 ,注意: -3.5结果是 -3
Math.abs() //
```
- 绝对值:
```
Math.abs(1); //1
Math.abs(-1); //1
Math.abs('-1'); //隐式转换,会把字符串型-1转化成数字型
Math.abs('pink’); //NaN
```
3. 生成任意随机数
- Math对象随机数方法,random( )返回一个随机的小数,0 =< x < 1
- 括号里无参数
- 得到一个两数之间的随机整数
log(date.ValueOf()); //就是我们当前时间 距离1970年1月1号总的毫秒数 log(date.getTime());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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
- 得到两数之间的随机整数,包括两个数之内
```
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
```
- **随机点名**
```
var arr = ['续航三','北师大版','表达式','完给','李四'];
log(arr[getRandom(0,arr.length-1)]); //调用上面的函数
```
##### 10-3 Date对象<font color=reed>(日期对象是一个构造函数,必须使用new关键字来调用我们的日期对象)</font>
1. - ```
var arr = new Array(); //创建一个数组对象
var obj = new Obiect(); //创建一个对象实例
```
2. 使用Date
- 没有参数,返回的的当前系统的当前时间
```
var date = new Date();
log(date); //Wed May 01 2019 10:17:23 GMT+0800
```
- 参数常用的写法:
- 数字型: 2019,10,01
- 字符串型: ’2019-10-1 8:8:8'
```
var date1 = new Date(2019,10,01);
log(date1); //返回的是11月
```
3. 格式化年月日星期,时分秒
| 方法名 | 说明 | 代码 |
| ------------- | --------------------------- | ------------------ |
| getFullYear() | 获取当年 | dObj.getFullYear() |
| getMonth() | 获取当月(0-11) | ... |
| getDate() | 获取当天日期 | ... |
| getDay() | 获取星期几(周日0 到周六6) | ... |
| getHours() | 获取当前小时 | |
| getMinutes() | 获取当前分钟 | |
| getSeconds() | 获取当前秒钟 | |
-
```
var date = new Date();
log(date.getFullYear()); //返回当前日期的年
log(date.getMonth() + 1); //月份 返回的月份 小一个月,记得月份加一!!!!
log(date.getDay()); //周日返回的0
log(date.getHours());
log(date.getMinutes());
log(date.getSeconds());
```
- // 写一个2019年5月 1日 星期三
```
var year = date.getFullYear();
var month = date.getMonth() +1;
var dates = date.getDay();
var arr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
log('今年是' + year + '年' + month + '月' + dates + '日' + arr[day] );
```
- 封装一个函数返回当前的时分秒,格式 08:08:08
```
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' +h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' +s : s;
return h + ':' + m
+ ':' + s;
}
log(getTime);
```
4. Date总的毫秒数(**时间戳**)
> - Date对象是基于 1970年1月1号(世界标准时间)起的毫秒数
> - 获得Date总的毫秒数,不是当前时间的毫秒数,而是距离1970年1月1号过了多少毫秒数
- 方法一: 通过valueOf() getTime()获取var arr1 = ['green','blue','pink']; log(arr1.join()); //默认用逗号分隔 log(arr1.join('-')); //green-blue-pink1
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
- 方法二: (**常用写法**)
```
var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数
log(date1);
```
- 方法三: (H5新增)
```
log(Date.now());
```
##### 10-4 数组对象(Array)
1. 创建数组的两种方法:
- 字面量方法
```
var arr =[1,2,3];
log(arr[1]);
```
- new Array( )
```
var arr1 = new Array(); //创建一个空的数组
var arr2 = new Array(2); //表示数组的长度为2,里面有2个空的数组元素
var arr3 = new Array(2,3); //等价于[2,3]这种写法,表示里面有2个数组元素
log(arr1);
```
2. 检测是否为数组的两种方式
- 方式一: instanceof : 运算符,可以用来检测是否为数组
```
var arr = [];
var onj = {};
log(arr instanceof Array);
log(obj instanceof Array);
```
- 方式二: isArray(参数)
```
var arr = [];
var obj = {};
log(Array.isArray(arr));
log(Array.isArray(obj));
```
- 举例:(反转数组)
```
function reverse(arr) {
if(arr instanceof Array)||if(Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}else{
return 'error 则会个参数要求是数组形式[1,2,3]'
}
}
log(reverse([1,2,3]));
log(reverse({1,2,3}));
```
3. 添加删除数组元素的方法:
| 方法名 | 说明 | 返回值 |
| ------------------- | ------------------------------------------------------- | -------------------- |
| push(参数1...) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
| pop( ) | 删除数组最后一个元素,把数组长度减2,无参数,修改原数组 | 返回它删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素,数组长度减1无参数,修改原数组 | 并返回第一个元素的值 |
- push()
```
var arr = [1,2,3];
//arr.push(4,‘pink’);
log(arr.push(3)); //4,返回值是新数组的长度
log(arr); //[1,2,3,3]
```
- unshift()
```
var arr = [1,2,3];
arr.unshift('red','perple');
log(arr.unshift(3)); //4,返回的是数组的长度
log(arr); //['red','purple',1,2,3]
```
- pop():
```
var arr = [1,2,3];
arr.pop();
log(arr); //[1,2]
log(arr.pop()); //3,删除哪一个返回哪一个
```
- shift()
```
var arr = [1,2,3];
log(arr.shift()); //1
log(arr); //[2,3]
```
4. 数组排序
| 方法名 | 说明 | 是否修改原数组 |
| --------- | ---------------------------- | ---------------------------- |
| reverse() | 颠倒数组中元素的顺序,无参数 | 会改变原来的数组,返回新数组 |
| sort() | 对数组的元素进行排序 | 会改变原来的数组,返回新数组 |
- 翻转数组:
```
var arr = ['pink','red','yellow'];
arr.reverse();
log(arr);
```
- 数组排序(冒泡排序,**中间有几点需要记住**)
```
var arr = [1,3,4];
arr1.sort(function(a,b){
return a - b; //升序的顺序排列
return b-a; //降序的顺序排列
});
log(arr1);
```
5. 数组索引方法
| 方法名 | 说明 | 返回值 |
| ------------- | ------------------------------ | ---------------------------------------- |
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号,如果不存在,则返回-1 |
| lastindexOf() | 在数组中的最后一个索引 | 若存在索引号,如果不存在,则返回-1 |
- **注意: 只返回第一个满足条件的索引号**
```
var arr = ['red','green','blue','pink','blue'];
log(arr.indexOf('blue')); //2
log(arr.lastIndexOf('blue')); //4
```
6. 数组转化成字符串
| 方法名 | 说明 |
| -------------- | ------------------------------------------ |
| toString() | 把数组转化成字符串,逗号分隔每一项 |
| join('分隔符') | 方法用于把数组中的所有元素转换成一个字符串 |
| concat() | |
| slice() | |
| splice() | |
- toString()
```
var arr = [1,2,3];
log(arr.toString()); //1,2,3
```
- join()
10-5 字符串对象
1
2 var str = 'andy';
log(str.length);问题: 对象才有属性和方法,复杂数据类型 才有属性和方法;简单数据类型为什么会有length属性呢?
基本包装类型: 把简单数据类型包装成为复杂数据类型
生成临时变量,简单数据类型 包装成为复杂数据类型
var temp = new String('andy');
临时变量的值给str
str = temp;
销毁临时变量
temp = null;
JavaScript还提供了三种特殊的引用类型: String、Number和Boolean
- 基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法
字符串不可变:
1
2
3
4var str = 'andy';
log(atr); //andy
str ='red';
log(str); //red但是,真实情况是内存中开辟了新的空间,原来的字符串没有变
因为字符串不可变,所以不要大量拼接字符串,虽然看上去可以改变内容,但是地址变了,内存中开辟了一个内存空间
1
2
3
4var str = '';
for (var i = 1;i <= 100; i++){
str += i;
}
根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
方法名 说明 indexOf(‘要查找的字符’,开始的位置) 返回指定内容再元字符中的位置,找不到就返回-1 lastIndexOf() 从后往前找,只找第一个匹配的 ```
var str = ‘改革春风吹满地’;
log(str.indexOf(‘春’));
log(str.indexOf(‘春’,3)); //从索引号是3的位置开始查找1
2
3
4
5
6
7
8
9
5. 求某个字符串出现的位置以及次数
- 查找字符串“abcdefghijoklmnopqrostuvwxyz”中所有o出现的位置以及次数
- 核心算法: 先查找第一个o出现的位置
- 只要indexOf返回的结果不是-1,就继续往后查找
- 因为indexOf只能查找第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找var str = ‘abcdefghijoklmnopqrostuvwxyz’;
var index = str.indexOf(‘o’);
var num = 0;
while(index !== -1){log(index); index = str.indexOf('o', index + 1); log('o出现的次数是' + num);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
6. **根据位置返回字符**
| 方法名 | 说明 | 使用 |
| ------------------- | --------------------------- | ------------------------------- |
| charAt(index) | 返回指定位置的字符 | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码 | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5,IE8+支持 和charAt()等效 |
- ```
var str = 'andy';
log(str.charAt(3)); //y
log(str[0]); //a
//遍历所有的字符
for(var i = 0; i< str.length; i++){
log(str.charAt(i));
}-
1
2charCodeAt(index) **目的: 判断用户按下了哪个键**
log(str.charCodeAt(0)); //97 案例: 统计出现次数最多的字符(统计一个字符串dbhfberhfbhkebfk中出现次数最多的字符,并统计其次数)
核心算法: 利用charAt()遍历这个字符串
把每个字符都存储给对象,如果对象没有该属性,就为1;如果存在了就+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
25var str = 'dbhfberhfbhkebfk';
var o = {};
for(var i = 0;i < str.length; i++){
var chars = str.charAt(i); //chars是 字符串的每一个字符
if(o[chars]){ //o[chars]得到的属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
log(o);
//遍历对象
var max = 0;
var ch = '';
for (var k in o) {
//k得到的是 属性名
//o[k] 得到的是属性值
if(o[k] > max){
max = o[k];
ch = k;
}
}
log(max);
log('最多的字符是' + ch);字符串操作对象
方法名 说明 concat(str1,str2,str3…) concat()方法用于连接两个或多个字符串,拼接字符串。等效于+ substr(start,length) 截取 slice(start,end) 截取 substring(start, end) ==slice,但是不接受负值 将”改革春风吹满地“中截取”春风“出来
1
2
3
4var str1 = ”改革春风吹满地“;
log(str1.substr(2,2)); //从索引号2开始截取2个
log(str1.slice(2,4)); //不截取索引号4
log(substring());
替换字符串以及替换成数组
替换字符:
replace('被替换的字符','替换为的字符')
: 只会替换第一个字符1
2var str = 'andyandy';
log(str.replace('a','b'));字符转换成数组
split('分割符');
1
2var str2 = 'red,pink,blue';
log(str2.split(',')); //[red,pink,blue]案例:
- 有一个字符串: ‘adasfdeferjfrefbhbhfv’,要把里面所有的’o’替换成*
1
2
3
4
5var str1 = 'adasfdeferjfrefbhbhfv';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o','*');
}
log(str1);
10-6 就冲我我给你开辟一个盗版的10-6,你也要写你的作业啊!你好懒啊,虎虎虎虎虎虎,呜呜呜呜
10-6 案例
利用对象封装自己的数学对象,里面有PI,最大值,最小值方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24var myMath = {
PI: 3.1415926,
max: function() {
var max = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(arguments[i]>max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var max = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(arguments[i]<min) {
min = arguments[i];
}
}
return min;
}
}
log(myMath.PI);
log(myMath.max(1,4,9));
log(myMath.max(1,2,4));猜数字游戏(Math对象)
- 随机生成一个1-10之间的数字,让用户输入一个数字
- 如果大于该数字,就提示,数字大了,继续猜
- 小于,就是提示;等于,就对了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) {
var num = prompt('猜一猜这个1-10之间的数字:');
if (num > random) {
alert('你猜小了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你好帅啊,成功才对,老聪明了');
break;
}
}倒计时案例(Date对象)
核心算法: 输入的时间减去现在的时间就是剩余的时间,即倒计时,
- 注意: 拿着时分秒相减会出现负数,比如05-25
用时间戳来做,用户输入时间总的毫秒数减去现在时间总的毫秒数,得到的就是剩余时间的毫秒数
把剩余时间总的毫秒数转化为天、时分秒(时间转化成时分秒)
转换公式如如下:
- d = parseInt(总秒数/60/60/24); // 计算天数
- h = parseInt(总秒数/60/60%24); //计算小时
- m = parseInt(总秒数/60%60); //计分钟
- s = parseInt(总秒数%60); //计算当前秒数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15function countDown(time){
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //time是剩余时间总的毫秒数
var d = parseInt(times/ 60 / 60 / 24);
d = d< 10 ? '0'+d : d;
var h = parseInt(times/ 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times/60%60); //分
var s = parseInt(times%60); //秒
return d + '天' + h + '时' +m + '分' + +s+'秒';
}
log(countDown('2019-5-1 18:00:00'));
var date = new Date();
log(date);(数组对象)筛选数组(有一个包含工资的数组[1500,1200,200.2100,1800]),要求把数组中工资超过2000的删除,剩余的放到新数组里面
1
2
3
4
5
6
7
8var arr = [1500,1200,200.2100,1800];
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(arr[i] < 2000){
//newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}数组去重案例
- 旧数组:[‘c’,’d’,’c’,’e’,’c’,’e’,’r’,’c’];
- 把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重
- 核心原理: 遍历旧数组,然后拿着旧数组元素查询新数组,如果新数组中没有该元素,就存入新数组。
- 利用 新数组.indexOf(数组元素);如果返回-1就说明新数组里面没有该元素
1
2
3
4
5
6
7
8
9
10
11
12
13//封装一个 去重的函数unique
function unique(arr) {
var newArr = [];
for(var i = 0;i < arr.length; i++){
if(newArr.indexOf(arr[i]) === -1 ){
//newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
return newArr;
}
var deno = unique([1,2,4,2,4,2,4,4,5,,6,7]);
log(deno);
第十一章 JavaScript简单类型与复杂类型
- 简单数据类型的内存分配
- 复杂数据类型的内存分配
- 简单类型如何传参
- 复杂类型如何传参
11-1 数据类型内存分配
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型
值类型: 简单数据类型/基本数据类型,再存储时变量中存储的是值本身,因此叫做值类型
string,number,boolean,undefined,null
简单数据类型null ,返回的是一个空的对象object(这是错误的)
如果有个变量,我们以后打算存储为对象,暂时没有想好放啥,这个时候我们就给null
引用类型: 复杂数据类型,在存储变量中存储的仅仅是地址(引用)因此叫引用数据类型。通过new关键字创建的对象,如Object、Array、Date等
堆栈:
栈(操作系统): 由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
- 简单数据类型存放在栈里面
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收
- 复杂数据类型放在堆中
JS中没有堆栈的概念
简单数据类型 是存放在栈里面 直接开辟一个空间,存放的是值
复杂数据类型 首先在栈里面存放地址,16进制表示,这个地址指向堆里面的数据
11-2 简单数据类型传参
复杂数据类型