JavaScript

PDF文件：Javascript.pdf Html文件：Javascript.html

课前说明

0.1 学习方法及态度

没有学不会的知识，只有不努力的傻子！

学习的过程中很痛苦，不学习的日子是苦难！

0.2 学前准备

  1. 拒绝二指弹
  2. 金山打字通，及格线：100/分
  3. 熟悉Windows中的常用的快捷键

开发工具

0.2.1 浏览器

推荐浏览器：Chrome浏览器

0.2.2 编辑器

VS Code、Atom、Sublime Text、Brackets、WebStorm、Notepad++、HBuilderX、Vim、记事本

推荐编译器：VS Code

0.2.3 注意

学习本课程一定要具备HTML与CSS相关的编程基础；

第一章 JavaScript初识

1.1 JavaScript编程语言

JavaScript一种轻量级的脚本语言，也是一种嵌入式语言，是一种对象模型语言，简称“JS”。

核心语法部分只有两个：

  1. 基本的语法构造（比如操作符、控制结构、语句）；
  2. 标准库（一系列具有各种功能的对象比如Array、Date、Math等）。

想要实现其它复杂操作和效果，都要依靠宿主环境提供API，目前。已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境（操作系统）。

1.1.1 JavaScript 现在的意义（应用场景）

JavaScript基本上无所不能。

  1. 网页特效
  2. 服务器开发（Node.js）
  3. 命令行工具（Node.js）
  4. 桌面程序（Electron）
  5. App（Cordova）
  6. 控制硬件-IOT（Ruff）
  7. 游戏开发（cocos2d.js）

1.2 发展及历史

布兰登·艾奇 10天就把JS搞出来了！

  • 1994年Netscape公司推出免费版浏览器
  • 1995年微软公司发布IE
  • 1995年网景公司为适应市场变化，需要一门专门在浏览器运行的脚本语言，这个任务交给了布兰登，只用了10天就把工作提交了，命名为Live Script，后来为了蹭Sun公司Java的热度，与sun公司合作并临时改名为“JavaScript”，其实与Java半毛钱关系没有。
  • 1996年8月，微软模仿JavaScript开发了一种相近的语言，取名叫Jscript，首先内置于IE 3.0
  • 1997年7月，ECMA组织发布ECMAScript
  • 1998年6月，ECMAScript 2.0发布
  • 1999年12月，ECMAScript 3.0发布
  • 2007年10月，ECMAScript 4.0草案发布
  • 2008年7月终止ECMAScript 3.1发布，不久后改名ECMAScript 5
  • 2011年6月，ECMAScript 5.1发布，现在使用最广泛的版本
  • 2015年6月，ECMAScript 6正式发布，改名为ECMAScript 2015
  • 随后，ECMA组织决定，每发布一个版本，以年号来代替版本号，如ECMAScript 2016、ECMAScript 2017

1.3 ECMAScript与JavaScript

ECMA 欧洲计算机制造联合会

1.4 JavaScript与HTML、CSS

  1. HTML：提供网页的结构，提供网页中的内容
  2. CSS：用来样式的排版、美化网页
  3. JavaScript：可以用来控制网页内容，给网页增加动态效果

1.5 JavaScript学习概况

在学习JS的过程中，需要学习的内容分为两部分，语言结构和宿主环境提供的API

语言结构部分主要是语言规则及内置对象（标准库对象）

而宿主环境的API，根据宿主环境不同而不同，以浏览器为例，最常见的三个类型：浏览器控制类、DOM操作类、网络控制类

第二章 JavaScript入门

2.1 如何写一段JS代码并运行

  • 写在行内：
  1. <input type="button" name="btn" value="按钮" onclick="alert(123)" />
  • 写在script标签中：
  1. <script>alert(456)</script>
  • 写在外部JS文件中引用：
  1. <!--html文件内容,0001.html 且与js文件在同一目录
  2. 注意：如果使用引入了外部的标签，那么script中不要再写其它js代码，写了也没用使用,外部引入的方式加载js代码时，script内不需要再写代码如果写了不会报错，也不会运行。
  3. --> 
  4. <script src="./0001.js"></script>

2.2 变量

2.2.1 什么是变量

  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
  • 使用变量可以方便的获取或者修改内存中的数据

变量就是存储数据的容器

2.2.2 如何使用变量

  • 声明变量并赋值：
  1. // 声明一个变量
  2. var aa;
  3. // 给变量赋值
  4. aa = 18;
  5. // 声明一个变量并为这个变量赋值
  6. var age = 20;
  7. var a1 = 12;
  8. var b2 = 16;
  9. // 一次性声明多个变量并赋值
  10. var h1 = 12, h2 = 13, h3 = 15;
  • 变量声明的语法规则及注意事项：
  1. // 变量的命名
  2. // 变量的名字必须是 数字、字母、下划线和$ 组成
  3. // 变量的名字不能以数字开头
  4. // 变量的名字不能是关键字 例如，for while if
  5. // 建议: 变量名必须有意义
  6. var name = "张三";
  7. var num = 123;
  8. var username = '王五';
  9. var age = 45;
  10. // 注意：在Js中变量是区分大小写的
  11. var Name = "李四";
  12. var name = "王五"
  13. // 注意：如果变量重名后面的值会将会替换前面的
  14. // 变量的命名尽可能使用驼峰法来命名
  15. var userName = '赵六';
  16. // 简单的练习:以下声明的变量哪些是不合法的
  17. var aaa,
  18. age18,
  19. //18age,不合法 因为数字开头了
  20. $names,
  21. // names$*,不合法,因为后面带了个*号
  22. _sex,
  23. sex_,
  24. hello234;
  25. //小案例:将两个变量的值进行交换
  26. var a = 1;
  27. var b = 2;
  28. var c = a; 
  29. a=b;
  30. b=c;
  31. // 弹出结果
  32. alert(a);
  33. alert(b);

2.3 数据类型

2.3.1 数值和字符串

  • 数值与字符串的使用规则：
  1. // var age = 18;
  2. // var num = 1.2;
  3. // 数值型（number）、字符串（String）、布尔（Boolean）、underFined、null、对象（Object）
  5. // 李四在这里不是字符串 
  6. // var str1 = 李四;
  7. // 使用单引号或者双引号引起来的才是字符串
  8. var str1 = '李四'
  9. // 下面这个“123”是字符串
  10. var kk = '123';
  11. // 如果在字符串中要使用引号，请加转义字符"\"
  12. // var str = '你好，\'我是王大拿！\'';
  13. // alert(str);
  14. //打印出  我喜欢"学习"'Javascript'
  15. var str = '我喜欢\\\"学习\"\'JavaScript\''
  16. alert(str);
  • 字符串的拼接：
  1. var s1 = '123';
  2. var s2 = '456';
  3. var s3 = s1+s2;
  4. console.log(s3);// 控制台输出“123456”
  5. var s4 = 1;
  6. console.log(s3+s4);// 控制台输出“1234561”
  7. var s5 = 2;
  8. // “+”号既可以作为数学运算使用，也可以作为字符串拼接使用
  9. /* 
  10. 变量从前往后进行计算，如果两个变量都是数值型，那么“+”号作为数学运行算符号,直到遇到一个字符串，此后所有的“+”号都作为字符串拼接
  11. */
  12. console.log(s4+s5+s3); // 控制台输出“3123456”
  13. console.log(s3+s4+s5); // 控制台输出“12345612”

2.3.2 其它数据类型

Boolean
  • Boolean字面量：true 和 false，区分大小写
  • 计算机内部存储：true为1，false为0

Undefined和Null
  1. Undefined表示一个声明的变量没有赋值，变量只有在声明的时候默认是Undefined
  2. null表示一个空，空变量的值如果想为null，必须手动设置

Object

大课题，后面详解

2.4 注释

  • 单行注释：
  1. // 这是一个单行注释!
  • 多行注释：
  1. /*
  2.     这是一个多行注释
  3.     无论注释里面写什么东西
  4.     都不会显示在浏览器
  5.     在注释里可以写任何东西
  6. */

2.5 数据类型转换

字符串转换

  • 数值型转字符串：
  1. var n = 5;
  2. var s = n.toString();
  3. console.log(typeof s); // 输出 String
  4. console.log(typeof String(n)); // 输出 String
  5. var t = '' + n;
  6. console.log(typeof t); //输出 String
  • 布尔值转字符串：
  1. var bool = true;
  2. console.log(typeof bool.toString()); //输出 String
  3. console.log(typeof String(bool)); // 输出 String
  4. var t = '' + bool;
  5. console.log(typeof t); //输出 String

数值型转换

  • 字符串转数值型
  1. var a = '1';
  2. var b = Number(a);
  3. console.log(b); //输出数值 1
  4. console.log(typeof b); //输出类型 number
  • 其它数据类型转数值型
  1. var c = Number('c'); 
  2. var d = Number(null);
  3. var e = Number(undefined);
  4. console.log(c,d,e);//输出 NaN 0 NaN
  • parseInt()解析函数转换规则
  1. //parseInt():如果第一个字符不能转换为数字，则返回 NaN
  2. var f = parseInt('2');
  3. var g = parseInt('k23');
  4. var h = parseInt(null);
  5. var i = parseInt(undefined);
  6. console.log(f,g,h,i);//输出 2 NaN NaN NaN
  • parseFloat()解析函数转换规则
  1. //parseFloat():如果前面的字符达不到要求，后面的直接不要了，若第一个字不能转换为数字则返回 NaN
  2. var j = parseFloat('1.23df')
  3. var k = parseFloat('1.2.3.4.5')
  4. var l = parseFloat('h34');
  5. var m = parseFloat(null);
  6. var n = parseFloat(undefined);
  7. console.log(j,k,l,m,n);//输出 1.23 1.2 NaN NaN NaN

布尔类型转换

  • 各种数据类型转布尔型
  1. var a = Boolean('0');
  2. var b = Boolean(0);
  3. var c = Boolean('2');
  4. var d = Boolean(null);
  5. var e = Boolean(undefined);
  6. var f = Boolean('');
  7. console.log(a,b,c,d,e,f); // 输出true false true false false false
  8. /*
  9. a:true,字符串是有内容的
  10. b:false,数值型的0为false
  11. c:true,字符串是有内容的
  12. d:false,值为空的
  13. e:false,值为空的
  14. f:false,字符串没内容
  15. 布尔
  16. */

第三章 JavaScript操作运算符

表达式：值和操作符，运算会有一个结果

同时，表达式的每个数值及部分表达式，又称为子表达式

3.1 算术运算符

  1. //算术运算符有：+-*/%
  2. var s1 = 6;
  3. var s2 = 3;
  4. var s3 = 4;
  5. console.log(s1+s2);// 加号，控制台输出9
  6. console.log(s1-s2);// 减号，控制台输出3
  7. console.log(s1*s2);// 乘号，控制台输出18
  8. console.log(s1/s2);// 除号，控制台输出2
  9. console.log(s1%s3);// 求余，控制台输出2

3.2 一元运算符

  1. //一元运算符,++ -- 对自身操作加一或减一
  2. var n1 = 5;
  3. var n2 = 5;
  4. var n3 = 5;
  5. var n4 = 5;
  6. n1++;
  7. n2--;
  8. ++n3;
  9. --n4;
  10. console.log(n1);// 控制台输出6
  11. console.log(n2);// 控制台输出4
  12. console.log(n3);// 控制台输出6
  13. console.log(n4);// 控制台输出4
  14. // 案例一
  15. var x = 5;
  16. ++x; //此时x=6
  17. var y = 6;
  18. console.log(x+ ++y);//控制台输出13）
  19. // 差异案例
  20. var i = 5;
  21. ++i;
  22. var j = 6;
  23. console.log(i+ j++);//控制台输出12
  24. /*
  25. 差异分析：
  26. 如果操作符在变量前面，先进行自身的运算，再进行其它运算
  27. 如果操作符再变量后面，先进行其它的运算，再进行自身运算
  28. */
  29. // 案例二
  30. var a = 1;
  31. var b = ++a + a++;//（2+2）
  32. /*
  33. a初始值为1
  34. ++a时，a已经变成2
  35. 然后再做了个加法运算则为 a+a = 2+2
  36. 由于是++，所以先进行自身运算再进行其它运算
  37. 所以b此时的值为4
  38. 当表达式结束时，运行了一次a++
  39. 所以a此时的值为3
  40. */
  41. console.log(b);// 控制台输出4
  42. console.log(a);// 控制台输出3
  43. // 案例三
  44. var m = 1;
  45. var n = m++ + ++m;// （1+3）
  46. /*
  47. m初始值为1
  48. m++时，先给出m=1再运算m++
  49. 所以“+”前为1，但m实际值已经为2
  50. 运算++m，则加号后面为++2 = 3
  51. 等式为 n = 1 + 3
  52. 则n的值为4，此时m的值为3
  53. */
  54. console.log(n);// 控制台输出4
  55. console.log(m);// 控制台输出3
  56. //案例四
  57. var num1 = 1;
  58. var num2 = ++num1 + ++num1;// （2+3）
  59. /*
  60. num1初始值为1
  61. ++num1时，先运行+1操作
  62. 所以num1此时的值已经为2
  63. 加号后面为++a
  64. 所以也要先运行+1操作
  65. a此时的值已经为2，则后面的++a为3
  66. 所以num2 = 2 + 3，num2值为5 
  67. 此时num1的值为3
  68. */
  69. console.log(num2);// 控制台输出5
  70. console.log(num1);// 控制台输出3

3.3 逻辑运算符

  1. // && 逻辑与运算符：参与运算的数据必须同时为真，结果为真
  2. // || 逻辑或运算符：参与运算的数据只要有一个为真，结果为真
  3. // ！ 逻辑非运算符：获取相反的结果
  4. var a = true;
  5. console.log(!a); // 控制台输出false
  6. var m = 1;
  7. var n = 2;
  8. var s = 0;
  9. // 有值为真，为0则假
  10. console.log(m && n);// 控制台输出2
  11. console.log(s && n);// 控制台输出0
  12. console.log(m || n);// 控制台输出1
  13. console.log(m || s);// 控制台输出1
  14. // 在Js中逻辑运算的结果是决定整个表达式的子表达式的值
  15. // 运算的优先级，如果同时出现，先运算 && 再运算 ||
  16. // s && n 为假 输出 0 再运行 m || 0 为真 输出 1
  17. console.log(m || s && n);// 控制台输出1

3.4 关系运算符

  1. /*
  2. 基本： > < >= <= 
  3. 等于：== 
  4. 不等于：!= 
  5. 全等于：=== 
  6. 不全等：!==
  7. */
  8. var a = '2';
  9. var b = 2;
  10. // 因为js是一种弱类型语言
  11. // 变量的类型存在自动转换
  12. // 两个等号只比较值
  13. // 三个等号比上数据类型
  14. console.log(a == b);// 控制台输出true
  15. console.log(a === b);// 控制台输出false

3.5 赋值运算符

  1. // = += -= *= /= %=
  2. var a = 1;
  3. var b = 1;
  4. var c = 5;
  5. a = a + 4;
  6. b += 4;
  7. c -= 2;
  8. console.log(a);// 控制台输出5
  9. console.log(b);// 控制台输出5
  10. console.log(c);// 控制台输出3

3.6 运算符的优先级

  1. // 输出的值是有决定权的变量的值
  2. var a = 1;
  3. var b = 2;
  4. var c = 0;
  5. console.log((a || c) && b);// 控制台输出2
  6. // 运算优先级从上往下
  7. // 1. 优先级最高：（）
  8. // 2. 一元运算符：++ -- ！
  9. // 3. 算术运算符（先乘除取余再加减）：+ - * / % 
  10. // 4. 关系运算符：> < >= <= 
  11. // 5. 相等运算符：== === != !==
  12. // 6. 逻辑运算符：&& 和 || 先 && 再 ||
  13. // 7. 赋值运算符：=
  14. var s = 4 >= 6 || '人' != '哈哈' && !(12*2+3 == 122) && true;
  15. /*
  16. 1.先算括号内的值，结果为false
  17. 2.再算关系运算符(4>=6)，结果为false
  18. 3.再算相等运算符，结果为true
  19. 4.得出 s = false || true && true
  20. */
  21. console.log(s);// 控制台输出true

第四章 JavaScript语句

程序的三种基本结构：

顺序结构：从上到下执行的代码就是顺序结构，程序是默认从上到下执行的

分支结构：根据不同的情况及判断，执行对应代码

循环结构：重复执行一段代码

4.1 if语句

  1. // 如果2大于1则输出2
  2. if (2>1) {
  3.     console.log(2);
  4. }
  5. else if(3>2)
  6. {
  7.     console.log(3);
  8. }
  9. else{
  10.     console.log(1);
  11. }
  12. // 基本结构
  13. /*
  14. if>else if>else
  15. 如果if判断错了，接着运行else i，最后运行else
  16. if(要判断的值){
  17.     运行的代码块;
  18. }
  19. else if(要判断的值){
  20.     运行的代码块;
  21. }
  22. else{
  23.     运行的代码块;
  24. }
  25. */

4.2 switch-case语句

  1. var ex = 2;
  2. switch (ex) {
  3.     case 1:
  4.          console.log("1");
  5.         break;
  6.     case 2:
  7.         console.log("2");
  8.         break;
  9.     default:
  10.         console.log("default");
  11.         break;
  12. }// 控制台输出2
  13. /*
  14. switch语句
  15. 判断case值是否与switch是否相等，是则运行代码块
  16. switch(值){
  17.     case 值1:
  18.         运行的代码块;
  19.         break;
  20.     case 值2:
  21.         运行的代码块;
  22.         break;
  23.     default:
  24.         运行的代码块;
  25.         break;
  26. }
  27. */

4.3 while语句与do-while语句

  • while语句
  1. var i = 0;
  2. while(i<100){
  3.     console.log(i);
  4.     i++;
  5. }
  6. /* 
  7. 执行代码都会重新进行判断
  8. 如果条件成立，则代码里面的代码块就会一直执行直到条件不成立
  9.  while (条件) {
  10.     代码块;
  11.  }
  12. */
  • do-while语句
  1. var i = 10;
  2. do{
  3.     console.log(i);
  4.     i--;
  5. }while(i>0);
  6. /*
  7. 先执行一次代码再看条件成不成立
  8. 若条件成立继续循环进行
  9. 若不成立则不继续循环进行
  10. do{
  11.     代码块;
  12. }
  13. while(条件);
  14. */

4.4 for语句

  1. for(var i = 0;i < 100;i++){
  2.     console.log(i);
  3. }
  4. /*
  5. for(初始表达式;判断表达式;自增或自减){
  6.     代码块;
  7. }
  8. */

第五章 JavaScript数组

5.1 数组的基本概念

所谓数组，就是将多个同一类型的元素按照一定排序放到一个集合中，那么这个集合就被称为数组

  1. // 数组下标从0开始
  2. // 数组的声明
  3. var arr = ['a','b','c'];
  4. var arr2 = [1,2,3];
  5. // 查找数组元素
  6. console.log(arr[1]);// 控制台输出b
  8. // 字面量方式创建数组
  9. var a1 = [];// 这是一个空数组
  10. var a2 = [1,2,3,'d'];
  11. console.log(a2);
  12. /*
  13. 控制台输出:
  14. [1, 2, 3, 'd']
  15. 0: 1
  16. 1: 2
  17. 2: 3
  18. 3: "d"
  19. */
  21. // 构造函数方式创建数组
  22. var b1 = new Array(1,3,'h','k');
  23. console.log(b1);
  24. /*
  25. 控制台输出:
  26. [1, 3, 'h', 'k']
  27. 0: 1
  28. 1: 3
  29. 2: "h"
  30. 3: "k"
  31. */
  33. // 获取数组长度
  34. var l = a2.length;
  35. console.log(l);// 控制台输出4
  37. // 数组里面能不能有数组？
  38. var c1 = [1,4,'k','l']
  39. var c2 = [6,7,c1,'t']
  40. console.log(c2);
  41. /*
  42. 控制台输出:
  43. [6, 7, Array(4), 't']
  44. 0: 6
  45. 1: 7
  46. 2: Array(4)
  47. 0: 1
  48. 1: 4
  49. 2: "k"
  50. 3: "l"
  51. length: 4
  52. [[Prototype]]: Array(0)
  53. 3: "t"
  54. length: 4
  55. 能，数组里面又有数组的情况
  56. 将其称之为多维数组
  57. */
  59. // 三维数组，数组的维度是无限的，但是越大越复杂
  60. var c3 = [4,c2,'p']
  61. console.log(c3);

5.2 数组元素获取

  1. // 数组内容的标号被称为下标，获取的方式 数组名[下标]
  2. var d1 = ['red','green','yellow'];
  3. console.log(d1[2]);
  4. //多维数组怎么查找元素
  5. var d2 = ['路飞','娜美',['巴基','小丑',['乔巴','索隆']]];
  6. // 小丑,在数组中的3号元素中的数组中的2号元素
  7. // 用[]依次填入下标进行查找
  8. // 第一个下标为2，第二个下标为1，则如下
  9. console.log(d2[2][1]);// 控制台输出“小丑”
  10. //同理，查找索隆如下
  11. console.log(d2[2][2][1]);// 控制台输出“索隆”

5.3 数组元素遍历

  1. // 将数组里面所有元素挨个打印
  2. var e1 = [1,2,3,4,5];
  3. var e2 = ['a','b','w','q','y','f'];
  4. for(var i = 0;i < e2.length;i++)
  5. {
  6.     console.log(e1[i]);
  7.     console.log(e2[i]);
  8. }
  9. /*
  10. 控制台输出：
  11. 1
  12. a
  13. 2
  14. b
  15. 3
  16. w
  17. 4
  18. q
  19. 5
  20. y
  21. undefined  未查询到
  22. f
  23. */

5.4 数组元素求和

  1. // 将所有的数字相加，打印它们的和
  2. var m = [12,26,1,7,8,4];
  3. var n = 0;
  4. for(var i = 0;i<m.length;i++){
  5.     n += m[i];
  6. }
  7. console.log(n);// 控制台输出58

5.5 数组循环遍历

  1. //打印出数组中最大的值x
  2. var x = [12,26,1,7,8,4];
  3. var y = 0;
  4. for(var i = 0;i < x.length;i++){
  5.     if(y < x[i]){
  6.         y = x[i]
  7.     }
  8. }
  9. console.log(y);// 控制台输出26
  11. //打印出数组中所有的偶数
  12. var t = [12,26,1,7,8,4];
  13. for(var i = 0;i < t.length;i++){
  14.     if(x[i] % 2 == 0){
  15.         console.log(x[i]);// 控制台逐一将偶数输出
  16.     }
  17. }
  19. // 将数组元素以竖线 | 分割为一个字符串
  20. var u = [12,26,1,7,8,4];
  21. var v = '';
  22. for(var i = 0;i < u.length;i++){
  23.     v += u[i]+'|'
  24. }
  25. console.log(v);//控制台输出 12|26|1|7|8|4|

第六章 JavaScript函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立的实体，就是函数，函数的作用就是封装一段代码，使其可以重复使用

6.1 函数的声明与调用

  1. // 关键字声明：function 函数名(){代码;}
  2. // 表达式声明：var 函数名 = function(){代码;}
  3. // 函数声明完后里面的代码是不会执行的
  4. // 如果要执行，必须调用函数
  5. // 不管什么情况下，不调用一定不会执行函数
  6. function f1(){
  7.     console.log(2);
  8. }
  9. // 函数的调用：函数名.();
  10. f1();// 控制台输出2
  11. f1();// 控制台输出2
  12. f1();// 控制台输出2
  13. f1();// 控制台输出2
  14. //函数调用了4次
  16. function s(){
  17.     var m = 0;
  18.     var n = 0;
  19.     while(n <= 100){
  20.         m += n;// 从1加到100
  21.         n++;
  22.     }
  23.     console.log(m);
  24. }
  25. s();// 控制台输出5050

6.2 形参与实参

  1. function s(a){
  2.     var m = 0;
  3.     var n = 0;
  4.     while(n <= a){
  5.         m += n;// 从1加到a
  6.         n++;
  7.     }
  8.     console.log(m);
  9. }
  10. s(100);
  11. // 声明：
  12. // function fun(形参1,形参2,形参3){
  13. // 
  14. // }
  15. // 调用：
  16. // fun(形参1,形参2,形参3);
  17. // 形参是形式上的参数，是没有实际值的
  18. // 形参是在声明函数时写的，多个形参用逗号隔开
  19. // 形参的值是不固定的，传入什么值就是什么值
  20. // 形参就是一个占位值，他要与实参传入的值一一对应
  21. // 实参就是实际的参数，实参在调用时，实际传入函数中的值
  22. // 在传入后在函数中，使用形参获取实际的值
  23. function fn(a,b){
  24.     console.log(a+b);
  25. }
  26. fn(15,78);// 控制台输出93
  27. fn(16,88);// 控制台输出104

6.3 函数的返回值

  1. // function f(形参,形参){
  2. // 代码; 
  3. // return 返回值;
  4. // }
  5. // var re = f(形参,形参)  此时re的值就是函数的返回值
  6. function f(a,b){
  7.     var c = a - b;
  8.     return c;
  9. }
  10. var re = f(5,2);
  11. console.log(re);
  13. // 如果函数中没有return
  14. // 那么函数调用之后接到的返回值就是undefined
  15. // 如果函数中有return但是return没有值，
  16. // 那么函数调用之后接到的返回值也是undefined
  17. // 函数中return之后，不管有什么代码，均不执行

6.4 匿名函数与自调用

  1. // 表达式声明函数
  2. var fun = function(){
  3.     console.log(1);
  4. }
  5. fun();// 控制台输出1
  6. // 匿名函数，函数本身是没有名字的
  7. // 立即执行函数，自调用的匿名函数
  8. (function(){
  9.     alert(123);
  10. })();// 这个函数是没有名字的，窗口弹出123
  12. // 作用域：
  13. // 防止全局变量的污染，同时可以封装一个局部作用

6.5 函数当作参数

  1.  // 函数也是一种数据类型
  2. function fn(){}
  3. // function 数据类型==>对象(数组、函数)
  4. console.log(typeof fn);// 控制台输出function
  6. function f1(s){
  7.     s();// 说明函数准备执行
  8. }
  10. var f2 = function(){
  11.     console.log(22233);
  12. }
  13. f1(f2);
  14. // 回调函数：将函数当作值传入一个函数内调用
  15. // f2会被当成值传入f1函数内
  17. function f3(){
  18.     var a = 10;
  19.     var f4 = function(){
  20.         alert(2);
  21.     }
  22.     return f4;// 将函数作为返回值
  23. }
  24. // 闭包
  25. var k = f3();
  26. // return 将f4的值返回
  27. // var k 接住了f4的值
  28. // 此时k的值为f4()为一个函数
  29. k();

6.6 作用域与JS代码的运行

作用域：变量可以起作用的范围和领域

6.6.1 作用域

  1. // 只有函数才能制造作用域
  2. // 如果函数中又有函数，则可以多一个作用域
  3. // 函数外面就是全局作用域
  4. var a = 1;// 全局作用域变量
  5. // 函数里面就是局部作用域
  6. function f1(){
  7.     var b = 2;// 局部作用域变量
  8. }
  10. var f2 = function(){
  11.     var c = 1;
  12. }
  13. var c = 2;
  14. console.log(c);// 控制台输出2

6.6.2 变量提升

  1. console.log(z);// z 还未赋值
  2. var z = 2;
  3. // 变量提升：
  4. // 在代码执行阶段变量已经在编译阶段被声明
  5. // JS代码的运行分为两个阶段
  6. // 1：解析（编译）阶段：语法检查，变量及函数进行声明
  7. // 2：运行阶段：变量的赋值，代码流程的执行
  8. // 将代码拆解
  9. // var z;
  10. // console.log(z);
  11. // z 
  13. // console.log(x);
  14. function x(){
  15.     console.log("aaa");
  16. }
  17. // 如果函数与变量重名，那么函数会替换变量声明
  18. var x = 1;
  19. console.log(x);

6.6.3 作用域链

  1. var a = 1;// 全局变量
  2. function f1(){
  3.     function f2(){
  4.         function f3(){
  5.             var a = 4;// 局部变量
  6.             console.log(a);
  7.         }
  8.         f3();
  9.     }
  10.     f2();
  11. }
  12. f1();
  13. // 作用域链
  14. // 当函数中使用某个变量时
  15. // 优先在自己的作用域中查找
  16. // 如果找不到，就会一直向上一层作用域查找
  17. // 直到全局作用域，如果还找不到，直接报错
  18. // 这一个过程叫做

第七章 JavaScript对象

7.1 什么是对象

万物皆对象

  1. 现实生活中：万物皆对象，对象是一个具体的事物
  2. 举例：一部车，一个手机
  3. 一类事物，称之为类，具体的实例是对象
  4. 对象有个部分，特征和行为
  5. 如一辆红色的四个轮子的车，能使他驾驶或停车
  6. 在这里：
  7.     车的特征：红色，四个轮子
  8.     车的行为：驾驶或刹车

7.2 JavaScript中的对象

  1. JavaScript中的对象其实就是生活中对象的一个抽象
  2. JavaScript的对象是无序属性的集合
  3. 其属性可以包含基本值、对象、数组或函数
  4. 对象就是一组没有顺序的值
  5. 我们可以把JavaScript中的对象想象成键值对，其中的值可以是数据和函数
  6. 对象的特征和行为：
  7. 特征---属性
  8. 行为---方法

事物的特征在对象中用属性来表示

事物的行为在对象中用方法来表示

7.3 对象的声明及使用

  1. // 字面量声明一个对象
  2. var obj11= {};
  3. // 对象中都是键值成对存在的
  4. // 通常来说，值是函数则称之为方法，其它类性的值都是属性
  5. var obj12 = {age:12,sg:190,name:'麻瓜',fei:function(){}};
  7. // 实例化方式（使用内置的构造函数）
  8. var obj12 = new Object();
  10. // 自定义构造函数
  11. function Fun(){
  13. }
  14. // 实例化自定义构造函数方式声明对象
  15. var f = new Fun();
  16. var obj2 = {
  17.     age:12,
  18.     sg:190,
  19.     name:'麻瓜',
  20.     fei:function(){
  21.         console.log(3);
  22.     }
  23. };
  25. // 获取对象的属性或者方法  对象.属性名
  26. console.log(obj2.age);
  27. obj2.fei();

7.4 this的用法

  1. // this的指向
  2. var obj = {
  3.     name:'老豆',
  4.     age:18,
  5.     fun:function(){
  6.         // 在方法中的this值的就是这个方法所在的对象
  7.         var s = this.age;
  8.         console.log();
  9.     }
  10. }
  11. obj.fun();// 控制台输出18
  13. // 普通的函数中也是有this的
  14. // this 指向全局对象，这个全局对象就是window对象
  15. function f(){
  16.     console.log(this.a);
  17. }
  19. // this永远指向一个对象
  20. // this在什么情况下，什么地方，指向哪个对象？
  21. k = '678';
  22. function funny(){
  23.     var k = '891';
  24.     console.log(this.k);
  25. }
  26. var o1 = {
  27.     k:"123",
  28.     f:funny,
  29. }
  30. var o2 = {
  31.     k:"345",
  32.     f:funny,
  33. }
  34. o1.f();
  35. o2.f();
  36. // this 在哪个对象下面，就指向哪个对象
  38. var o3 = {
  39.     age:18,
  40.     fun:function(){
  41.         console.log(this.age);
  42.     }
  43. }
  45. var o4 = {
  46.     age:16,
  47.     fun:o3.fun,
  48. }
  50. o4.fun();// 控制台输出1 6

7.5 对象的遍历及删除

  1. var o1 = {
  2.     name:'路飞',
  3.     age:15,
  4.     sex:'男'
  5. }
  6. // 遍历 for...in
  7. // for(键 in 对象)
  8. // for...in循环不仅可以循环遍历对象，还可以循环遍历数组
  9. for(var k in o1){
  10.     console.log(o1[k]);
  11. }
  13. // 补充遍历数组
  14. var arr = [1,2,3,4,5]
  15. for(var k in o2){
  16.     console.log(o2[k]);
  17. }
  19. console.log(o1);
  20. delete o1.age;// 删除对象属性
  21. console.log(o1);

7.6 包装对象

  1. // 包装对象
  2. // 三种原始类型的值  数值  字符串  布尔
  3. // 原始类型的数据在一定条件下可以自动转为对象
  4. // 这就是包装对象
  5. var a1 = new Number(123);
  6. console.log(a1);
  7. // 原始值 可以自动当作对象来调用，可以调用各种属性及方法
  8. // 如果包装对象使用完成，会自动立即销毁
  9. var a = '456';
  10. a.length;
  11. console.log(a.length);

7.7 数学对象

  1. // 经常使用的Math对象
  3. // Math.abs(); 取绝对值
  4. var n = -2;
  5. var n2 = Math.abs(n);
  6. console.log(n2);
  8. // Math.random(); 取随机数
  9. // 返回一个浮点，伪随机数在范围[0,1)
  10. // 从0往上但是不包括1
  11. var r = Math.random();
  12. console.log(r);
  13. // 随机数用法公式
  14. var r2 = Math.random()*10;
  15. console.log(r2);
  16. // Math.floor(); 使数字向下取整
  17. var r3 = Math.floor(r2);
  18. console.log(r3);
  19. // 获取m-n之间的随机数
  20. // Math.random() * (n-m) + m;
  21. Math.random() * (8-2) + 2;
  22. // Math.random() ×（最大值-最小值）+ 最小值;
  23. // 实例:求40-100之间的随机数
  24. // 由于随机数排除1，且Math.floor()向下取整
  25. // 则最大值应该加1，如100则最大值为101
  26. var t = Math.random() * (101-40) + 40;
  27. console.log(Math.floor(t));

7.8 日期对象

  1. // 实例化构造函数获取时间对象
  2. var date = new Date();
  3. console.log(date);
  4. // Date.now(); 获取毫秒数
  5. console.log(Date.now());
  6. // .getHours(); 获取当前小时数
  7. console.log(date.getHours());
  8. // .getDate(); 获取当前天数
  9. console.log(date.getDate());
  10. // .getFullYear(); 获取当前年数
  11. console.log(date.getFullYear());
  12. // .getMouth(); 获取当前月份，从0开始，得加1
  13. console.log(date.getMonth()+1);
  14. // Js中获取的时间是计算机本地的时间
  15. // Js中月份的数字是从

7.9 数组对象

  1. var arr = [1,6,8,4,5,2,4,6];
  2. console.log(arr.length);
  3. var k = 3;
  4. // .push(); 在数组的末尾插入一个元素
  5. arr.push(k);
  6. console.log(arr);
  7. // .pop(); 删除末尾的元素
  8. arr.pop();
  9. console.log(arr);
  10. // .slice(m,n); 返回一个新的数组对象
  11. // 由原始数组开始的下标和末尾的下标（不包括末尾）的值组成
  12. // 原始数组的内容不会发生改变
  13. var arrCopy = arr.slice(2,6);
  14. console.log(arrCopy);
  15. console.log(arr);
  16. // .concat(); 返回一个新的数组对象
  17. // 由原始数组使用，用 原始数组.concat();
  18. // 在该数组末尾添加新的数组元素
  19. // 并且返回一个新的数组，原数组不被改变
  20. var kk = ['k','p','l'];
  21. var arrKk = arr.concat(kk);
  22. console.log(arrKk);
  23. // .join(); 将一个数组中（或一个类数组对象）的所有元素连接
  24. // 合成一个字符串并且返回这个字符串并且使用分隔符分隔
  25. // 括号中可传入分隔符，默认为逗号
  26. var s = arr.join();
  27. var y = arr.join(';');
  28. console.log(arr);
  29. console.log(s);
  30. console.log(y);

7.10 字符串对象

  1. var s = 'Hello JavaScript!';
  2. // console.log(s.length);
  4. // .indexOf(字符); 找到字符第一次出现的位置
  5. var n = s.indexOf('J');
  6. console.log(n);
  8. // .substr(m,n); 意思为从m开始截取n个字符
  9. var l = s.substr(6,10);
  10. console.log(l);
  12. // 大小写转换
  13. // .toLowerCase; 小写转换
  14. // .toUpperCase; 大写转换
  15. var i = s.toLowerCase();
  16. var j = s.toUpperCase();
  17. console.log(i);
  18. console.log(j);
  20. // .replace(); 
  21. // 返回一个由替换值替换一些或所有匹配模式后的新字符串
  22. // 模式可以是一个字符串或一个正则表达式
  23. // 替换值可以是一个字符串或者一个每次匹配都要调用的函数
  24. // 原始字符串不会改变
  25. var x = s.replace('a','k');
  26. console.log(x);