day29-JavaScript(1)

中楠

1、JavaScript 的历史

1.1、JavaScript 的历史

JavaScript 因为互联网而生，紧随着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史讲起。
1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便。
1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做Mosaic。这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览。
1994年10月，NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司（Mosaic Communications），不久后改名为Netscape。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。
1994年12月，Navigator发布了1.0版，市场份额一举超过90%。
Netscape 公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。
管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习和部署。那一年，正逢Sun公司的Java语言问世，市场推广活动非常成功。Netscape公司决定与Sun公司合作，浏览器支持嵌入Java小程序（后来称为Java applet）。但是，浏览器脚本语言是否就选用Java，则存在争论。后来，还是决定不使用Java，因为网页小程序不需要Java这么“重”的语法。但是，同时也决定脚本语言的语法要接近Java，并且可以支持Java程序。这些设想直接排除了使用现存语言，比如Perl、Python和TCL。
1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。Brendan Eich有很强的函数式编程背景，希望以Scheme语言（函数式语言鼻祖LISP语言的一种方言）为蓝本，实现这种新语言。
1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。为了保持简单，这种脚本语言缺少一些关键的功能，比如块级作用域、模块、子类型（subtyping）等等，但是可以利用现有功能找出解决办法。这种功能的不足，直接导致了后来JavaScript的一个显著特点：对于其他语言，你需要学习语言的各种功能，而对于JavaScript，你常常需要学习各种解决问题的模式。而且由于来源多样，从一开始就注定，JavaScript的编程风格是函数式编程和面向对象编程的一种混合体。
Netscape 公司的这种浏览器脚本语言，最初名字叫做 Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器。
之所以起这个名字，并不是因为JavaScript本身与Java语言有多么深的关系（事实上，两者关系并不深），而是因为Netscape公司已经决定，使用Java语言开发网络应用程序，JavaScript可以像胶水一样，将各个部分连接起来。当然，后来的历史是Java语言的浏览器插件失败了，JavaScript反而发扬光大。
1995年12月4日，Netscape 公司与 Sun 公司联合发布了 JavaScript 语言。当时的意图是将 JavaScript 作为 Java 的补充，用来操作网页。
1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。
1.2、JavaScript与ECMAScript的关系

1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript（JavaScript是Netscape的注册商标，微软不能用），首先内置于IE 3.0。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA（European Computer Manufacturers Association），希望JavaScript能够成为国际标准，以此抵抗微软。ECMA的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。
1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。之所以不叫JavaScript，一方面是由于商标的关系，Java是Sun公司的商标，根据一份授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript已经被Netscape公司注册为商标，另一方面也是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
ECMAScript只用来标准化JavaScript这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如DOM的标准就是由W3C组织（World Wide Web Consortium）制定的。

一个完整的JavaScript包含三个部分：ECMAScript（标准语法），DOM以及BOM！

ECMA-262标准后来也被另一个国际标准化组织ISO（International Organization for Standardization）批准，标准号是ISO-16262。
1.3、JavaScript与Java的关系

JavaScript和Java是两种不一样的语言，但是它们之间存在联系。
JavaScript的基本语法和对象体系，是模仿Java而设计的。但是，JavaScript没有采用Java的静态类型。正是因为JavaScript与Java有很大的相似性，所以这门语言才从一开始的LiveScript改名为JavaScript。基本上，JavaScript这个名字的原意是“很像Java的脚本语言”。
在JavaScript语言中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。这是它与Java语法最大的两点区别。JavaScript语法要比Java自由得多。
另外，Java语言需要编译，而JavaScript语言则是运行时由解释器直接执行。
总之，JavaScript的原始设计目标是一种小型的、简单的动态语言，与Java有足够的相似性，使得使用者（尤其是Java程序员）可以快速上手。
1.4、JavaScript的版本

1997年7月，ECMAScript 1.0发布。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。TC39的总体考虑是，ECMAScript 5与ECMAScript 3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。当时，JavaScript.next指的是ECMAScript 6。第六版发布以后，将指ECMAScript 7。TC39预计，ECMAScript 5会在2013年的年中成为JavaScript开发的主流标准，并在此后五年中一直保持这个位置。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。这是因为TC39委员会计划，以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。
除了ECMAScript的版本，很长一段时间中，Netscape公司（以及继承它的Mozilla基金会）在内部依然使用自己的版本号。这导致了JavaScript有自己不同于ECMAScript的版本号。1996年3月，Navigator 2.0内置了JavaScript 1.0。JavaScript 1.1版对应ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0。JavaScript 1.5版完全兼容ECMAScript 3.0。目前的JavaScript 1.8版完全兼容ECMAScript 5。
参考链接
2、JS的引入方式

1. 1 直接编写
2. var person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. };
9. 2 导入文件
10. var person = {
11.     name: "alvin",
12.     age: 18
13. };var person = {
14.     name: "alvin",
15.     age: 18
16. };

复制代码

3、ECMAScript基本语法

js是一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.

• 变量
  

1. 格式:
2. var person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. };// 方式1 先声明再赋值
9. var person = {
10.     name: "alvin",
11.     age: 18
12. };var person = {
13.     name: "alvin",
14.     age: 18
15. };var 变量名;var person = {
16.     name: "alvin",
17.     age: 18
18. }; // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
19. var person = {
20.     name: "alvin",
21.     age: 18
22. };var person = {
23.     name: "alvin",
24.     age: 18
25. };变量名 = 变量值;
26. var person = {
27.     name: "alvin",
28.     age: 18
29. };var person = {
30.     name: "alvin",
31.     age: 18
32. };// 方式2 声明并赋值
33. var person = {
34.     name: "alvin",
35.     age: 18
36. };var person = {
37.     name: "alvin",
38.     age: 18
39. };var 变量名 = 变量值;
40. var person = {
41.     name: "alvin",
42.     age: 18
43. };var person = {
44.     name: "alvin",
45.     age: 18
46. };// 方式3 一行可以声明多个变量.并且可以是不同类型
47. var person = {
48.     name: "alvin",
49.     age: 18
50. };var person = {
51.     name: "alvin",
52.     age: 18
53. };var name="yuan", age=20, job="lecturer";

复制代码

1、声明变量时 可以不用var. 如果不用var 那么它是全局变量
2、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写

• 注释
  

1. // 单行注释
3. /*
4. var person = {
5.     name: "alvin",
6.     age: 18
7. }; 多行注释
8. */

复制代码

• 语句分隔符
  

1. var a = 1var person = {
2.     name: "alvin",
3.     age: 18
4. }; // 分号和换行符作为语句分隔符号
5. var b = 2;
6. console.log(a,b)

复制代码

4、ECMAScript 基本数据类型

4.4.1、数字类型

JavaScript 没有整型和浮点型，只有一种数字类型，即number类型。

1. var x = 10;
2. var y = 3.14;
3. console.log(x,typeof x);var person = {
4.     name: "alvin",
5.     age: 18
6. };// 10 "number"
7. console.log(y,typeof y);var person = {
8.     name: "alvin",
9.     age: 18
10. };// 3.14 "number"

复制代码

4.4.2、字符串

字符串创建(两种方式)

• 变量 = “字符串”
  
• 字串对象名称 = new String (字符串)
  

1. var str1="hello world";
2. var str1= new String("hello word");

复制代码

1. // 字符串对象的操作
2. var str = "hello"; // 这就是字符串对象
3. console.log(str);
5. // 字符串对象内置属性
6. // length 计算字符串的长度
7. console.log( str.length );
9. // 字符串对象内置方法
10. // toUpperCase();var person = {
11.     name: "alvin",
12.     age: 18
13. };字母大写转换
14. // toLowerCase();var person = {
15.     name: "alvin",
16.     age: 18
17. };字母小写转换
19. console.log( str.toUpperCase() );
20. console.log( str.toLowerCase() );
22. // indexOf 获取指定字符在字符串中第一次出现的索引位置
23. // 字符串也有下标,也可以使用中括号来提取字符串的指定字符
24. console.log(str[1]); // e
25. console.log( str.indexOf("e") ); // 1
27. // 切片,当前方法支持使用负数代表倒数下标
28. // slice(开始下标)var person = {
29.     name: "alvin",
30.     age: 18
31. }; 从开始位置切到最后
32. // slice(开始下标,结束下标)var person = {
33.     name: "alvin",
34.     age: 18
35. };从开始下标切到指定位置之前
36. var str = "helloworld";
37. var ret = str.slice(3,6); // 开区间,不包含结束下标的内容
38. console.log(ret); // low
39. var ret = str.slice(5);
40. console.log(ret); // world
41. var ret = str.slice(2,-1);
42. console.log(ret); // lloworl
43. var ret = str.slice(-4,-1);
44. console.log(ret); // orl
45. var ret = str.slice(-1,-4);
46. console.log(ret); // ""
48. // splitvar person = {
49.     name: "alvin",
50.     age: 18
51. }; 正则分割,经常用于把字符串转换成数组
52. var str = "广东-深圳-南山";
53. var ret = str.split("-");
54. console.log( ret );
56. // substrvar person = {
57.     name: "alvin",
58.     age: 18
59. };截取
60. var str = "hello world";
61. var ret = str.substr(0,3);
62. console.log(ret); // hel
64. // trimvar person = {
65.     name: "alvin",
66.     age: 18
67. };var person = {
68.     name: "alvin",
69.     age: 18
70. };移除字符串首尾空白
71. var password = "var person = {
72.     name: "alvin",
73.     age: 18
74. };var person = {
75.     name: "alvin",
76.     age: 18
77. };ge llovar person = {
78.     name: "alvin",
79.     age: 18
80. }; ";
81. var ret = password.trim();
82. console.log(password.length); // 13
83. console.log(ret.length);var person = {
84.     name: "alvin",
85.     age: 18
86. };// 6

复制代码

4.4.3、布尔值

1、Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
2、布尔值也可以看作on/off、yes/no、1/0对应true/false;
3、Boolean值主要用于JavaScript的控制语句

1. console.log(true);
2. console.log(false);
3. console.log(typeof true);
4. console.log(true === 1);
5. console.log(true == 1);
6. console.log(true + 1);
7. console.log(false + 1);

复制代码

4.4.4、空值（Undefined和Null）

• undefined类型
  

undefined类型只有一个值，即 undefined。
（1）当声明的变量未初始化时，该变量的默认值是 undefined。
（2）当函数无明确返回值时，返回的也是值 undefined;

• null类型
  

另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
4.4.5、类型转换

js中,类型转换有2种.一种就是强制转换,一种就是自动转换.

因为js是一门弱类型的脚本语言,所以变量会在运算符的运行要求,有时候根据运算符的要求,进行自动转换的.

• 强制转换
  

1. // 1. 转换数据为数值类型
2. // parseIntvar person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. }; 把数据转换成整数
9. // parseFloatvar person = {
10.     name: "alvin",
11.     age: 18
12. }; 把数据转换成小数
13. // Numbervar person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };var person = {
20.     name: "alvin",
21.     age: 18
22. }; 把数据转换成数值
23. var box1 = "一共100件"; // 转换会失败
24. var box1 = "100件";var person = {
25.     name: "alvin",
26.     age: 18
27. };var person = {
28.     name: "alvin",
29.     age: 18
30. }; // 转换会成功
31. var ret = parseInt(box1);
32. console.log(box1);
33. console.log(ret);
34. //
35. var box2 = "3.14";
36. console.log(parseFloat(box2) ); // 3.14
37. //
38. var box3 = "3.14";var person = {
39.     name: "alvin",
40.     age: 18
41. }; // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
42. // var box3 = "3.1.4";var person = {
43.     name: "alvin",
44.     age: 18
45. };// 转换失败!
46. console.log( Number(box3) );
48. // 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型
50. // 2. 转换数据为字符串
51. // 变量.toString()
52. // String(数据)
53. var box4 = 3.14;
54. var ret = box4.toString();
55. console.log(ret);
56. //
57. ret = String(box4);
58. console.log(ret);
60. // 3. 转换数据成布尔类型
61. // Boolean()
63. var box5 = "";
64. console.log( Boolean(box5) ); // false
65. var box6 = -1;
66. console.log( Boolean(box6) ); // true
67. var box7 = 0;
68. console.log( Boolean(box7) ); // false;
69. var box8 = "false";
70. console.log( Boolean(box8) ); // true
71. var box9 = [];
72. console.log( Boolean(box9) ); // true
73. var box10 = {};
74. console.log( Boolean(box10) ); // true
75. var box11 = "0";
76. console.log( Boolean(box11) ); // true
77. var box12 = null;
78. console.log( Boolean(box12) ); // false
79. var box13 = undefined;
80. console.log( Boolean(box13) ); // false

复制代码

• 自动转换
  

1. // 所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
2. var box1 = 1 + true;
3. // true 转换成数值,是1, false转换成数值,是0
4. console.log(box1); // 2
6. var box2 = 1 + "200";
7. console.log(box2); // 1200 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于数值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串最终的结果就是 "1" +"200"
9. var box3 = 1 - "200";
10. console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

复制代码

4.4.6、原始值和引用值

根据数据类型不同，有的变量储存在栈中，有的储存在堆中。具体区别如下：
原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
引用值是把 引用变量的名称储存在栈中，但是把其实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针， 此时 两者指向的 是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；但若不是通过方法 而是通过 重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变 ，则另外一个 值不会随他的改变而改变。

1. // 初始值类型
2. var a = "yuan";
3. var b = a;
4. a = "alvin";
5. console.log(a);//alvin
6. console.log(b);//yuan
8. // 对象类型
9. var arr1=[1,2];
10. arr2 = arr1;
11. arr1.push(3);
12. console.log(arr1)// [1,2,3]
13. console.log(arr2);//[1,2,3]
15. arr1=[4,5];
16. console.log(arr1);//[4,5]
17. console.log(arr2);//[1,2,3]

复制代码

5、运算符

• 运算符
  

1. /*
2. //算术运算符
3. var person = {
4.     name: "alvin",
5.     age: 18
6. }; +var person = {
7.     name: "alvin",
8.     age: 18
9. }; 数值相加
10. var person = {
11.     name: "alvin",
12.     age: 18
13. }; -var person = {
14.     name: "alvin",
15.     age: 18
16. }; 数值相减
17. var person = {
18.     name: "alvin",
19.     age: 18
20. }; *var person = {
21.     name: "alvin",
22.     age: 18
23. }; 数值相乘
24. var person = {
25.     name: "alvin",
26.     age: 18
27. }; /var person = {
28.     name: "alvin",
29.     age: 18
30. }; 数值相除
31. var person = {
32.     name: "alvin",
33.     age: 18
34. }; %var person = {
35.     name: "alvin",
36.     age: 18
37. }; 数值求余
38. var person = {
39.     name: "alvin",
40.     age: 18
41. }; **var person = {
42.     name: "alvin",
43.     age: 18
44. };数值求幂
45. var person = {
46.     name: "alvin",
47.     age: 18
48. }; a++ 数值后自增1var person = {
49.     name: "alvin",
50.     age: 18
51. }; a=a+1
52. var person = {
53.     name: "alvin",
54.     age: 18
55. }; ++a 数值前自增1var person = {
56.     name: "alvin",
57.     age: 18
58. }; a=a+1
59. var person = {
60.     name: "alvin",
61.     age: 18
62. }; b-- 数值后自减1var person = {
63.     name: "alvin",
64.     age: 18
65. }; b=b-1
66. var person = {
67.     name: "alvin",
68.     age: 18
69. }; --b 数值前自减1var person = {
70.     name: "alvin",
71.     age: 18
72. }; b=b-1
73. var person = {
74.     name: "alvin",
75.     age: 18
76. };
77. //赋值运算符
78. var person = {
79.     name: "alvin",
80.     age: 18
81. }; =
82. var person = {
83.     name: "alvin",
84.     age: 18
85. }; +=
86. var person = {
87.     name: "alvin",
88.     age: 18
89. }; -=
90. var person = {
91.     name: "alvin",
92.     age: 18
93. }; *=
94. var person = {
95.     name: "alvin",
96.     age: 18
97. }; /=
98. var person = {
99.     name: "alvin",
100.     age: 18
101. }; %=
102. var person = {
103.     name: "alvin",
104.     age: 18
105. }; **=
107. //比较运算符,比较的结果要么是true, 要么是false
108. var person = {
109.     name: "alvin",
110.     age: 18
111. };>var person = {
112.     name: "alvin",
113.     age: 18
114. }; 大于
115. var person = {
116.     name: "alvin",
117.     age: 18
118. };<var person = {
119.     name: "alvin",
120.     age: 18
121. }; 小于
122. var person = {
123.     name: "alvin",
124.     age: 18
125. };>=var person = {
126.     name: "alvin",
127.     age: 18
128. };大于或者等于
129. var person = {
130.     name: "alvin",
131.     age: 18
132. };<=var person = {
133.     name: "alvin",
134.     age: 18
135. };小于或者等于
136. var person = {
137.     name: "alvin",
138.     age: 18
139. };!=var person = {
140.     name: "alvin",
141.     age: 18
142. };不等于[计算数值]
143. var person = {
144.     name: "alvin",
145.     age: 18
146. };==var person = {
147.     name: "alvin",
148.     age: 18
149. };等于[计算]
151. var person = {
152.     name: "alvin",
153.     age: 18
154. };!== 不全等[不仅判断数值,还会判断类型是否一致]
155. var person = {
156.     name: "alvin",
157.     age: 18
158. };=== 全等[不仅判断数值,还会判断类型是否一致]
160. //逻辑运算符
161. var person = {
162.     name: "alvin",
163.     age: 18
164. };&&var person = {
165.     name: "alvin",
166.     age: 18
167. }; 并且var person = {
168.     name: "alvin",
169.     age: 18
170. };andvar person = {
171.     name: "alvin",
172.     age: 18
173. };var person = {
174.     name: "alvin",
175.     age: 18
176. };两边的运算结果为true,最终结果才是true
177. var person = {
178.     name: "alvin",
179.     age: 18
180. };||var person = {
181.     name: "alvin",
182.     age: 18
183. }; 或者var person = {
184.     name: "alvin",
185.     age: 18
186. };orvar person = {
187.     name: "alvin",
188.     age: 18
189. };var person = {
190.     name: "alvin",
191.     age: 18
192. }; 两边的运算结果为false,最终结果才是false
193. var person = {
194.     name: "alvin",
195.     age: 18
196. };!var person = {
197.     name: "alvin",
198.     age: 18
199. };var person = {
200.     name: "alvin",
201.     age: 18
202. };非var person = {
203.     name: "alvin",
204.     age: 18
205. };var person = {
206.     name: "alvin",
207.     age: 18
208. };notvar person = {
209.     name: "alvin",
210.     age: 18
211. };var person = {
212.     name: "alvin",
213.     age: 18
214. };运算符的结果如果是true,则最终结果是false ,反之亦然.
216. var person = {
217.     name: "alvin",
218.     age: 18
219. };//逻辑运算符进阶用法:
220. var person = {
221.     name: "alvin",
222.     age: 18
223. };var person = {
224.     name: "alvin",
225.     age: 18
226. }; 1. 实现短路
227. var person = {
228.     name: "alvin",
229.     age: 18
230. };var person = {
231.     name: "alvin",
232.     age: 18
233. };var person = {
234.     name: "alvin",
235.     age: 18
236. };var person = {
237.     name: "alvin",
238.     age: 18
239. };var a = false || 2var person = {
240.     name: "alvin",
241.     age: 18
242. };var person = {
243.     name: "alvin",
244.     age: 18
245. };var person = {
246.     name: "alvin",
247.     age: 18
248. };>>> a = 2
249. var person = {
250.     name: "alvin",
251.     age: 18
252. };var person = {
253.     name: "alvin",
254.     age: 18
255. };var person = {
256.     name: "alvin",
257.     age: 18
258. };var person = {
259.     name: "alvin",
260.     age: 18
261. };var a = true && "hehe"var person = {
262.     name: "alvin",
263.     age: 18
264. };>>>var person = {
265.     name: "alvin",
266.     age: 18
267. };a = "hehe"
268. var person = {
269.     name: "alvin",
270.     age: 18
271. };var person = {
272.     name: "alvin",
273.     age: 18
274. };
275. var person = {
276.     name: "alvin",
277.     age: 18
278. };var person = {
279.     name: "alvin",
280.     age: 18
281. }; 2. 快速布尔化[把数据快速转换成布尔类型]
282. var person = {
283.     name: "alvin",
284.     age: 18
285. };var person = {
286.     name: "alvin",
287.     age: 18
288. };var person = {
289.     name: "alvin",
290.     age: 18
291. };var person = {
292.     name: "alvin",
293.     age: 18
294. };var a = 100
295. var person = {
296.     name: "alvin",
297.     age: 18
298. };var person = {
299.     name: "alvin",
300.     age: 18
301. };var person = {
302.     name: "alvin",
303.     age: 18
304. };var person = {
305.     name: "alvin",
306.     age: 18
307. };!!avar person = {
308.     name: "alvin",
309.     age: 18
310. };>>> true
312. //条件运算符[三目运算符]
313. 条件?true:false
314. 例如:
315. var person = {
316.     name: "alvin",
317.     age: 18
318. };var person = {
319.     name: "alvin",
320.     age: 18
321. };var person = {
322.     name: "alvin",
323.     age: 18
324. };var person = {
325.     name: "alvin",
326.     age: 18
327. };var age = 12;
328. var person = {
329.     name: "alvin",
330.     age: 18
331. };var person = {
332.     name: "alvin",
333.     age: 18
334. };var person = {
335.     name: "alvin",
336.     age: 18
337. };var person = {
338.     name: "alvin",
339.     age: 18
340. };var ret = age>=18?"成年":"未成年"; // 相当于 python中的"成年" if age >= 18 else "未成年"
341. var person = {
342.     name: "alvin",
343.     age: 18
344. };var person = {
345.     name: "alvin",
346.     age: 18
347. };var person = {
348.     name: "alvin",
349.     age: 18
350. };var person = {
351.     name: "alvin",
352.     age: 18
353. };console.log(ret);
354. */

复制代码

6、流程控制语句

编程语言的流程控制分为三种：

• 顺序结构(从上向下顺序执行)
  
• 分支结构
  
• 循环结构
  

之前我们学习的方式就是顺序执行，即代码的执行从上到下，一行行分别执行。
例如：

1. console.log("星期一");
2. console.log("星期二");
3. console.log("星期三");

复制代码

4.6.1、分支结构

• if 分支语句
  

1. if(条件){
2. // 条件为true时,执行的代码
3. }
5. if(条件){
6. // 条件为true时,执行的代码
7. }else{
8. // 条件为false时,执行的代码
9. }
11. if(条件1){
12. // 条件1为true时,执行的代码
13. }else if(条件2){
14. // 条件2为true时,执行的代码
16. }....
18. }else{
19. // 上述条件都不成立的时候,执行的代码
20. }

复制代码

• switch语句
  

1. switch(条件){
2. var person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. };var person = {
9.     name: "alvin",
10.     age: 18
11. };case 结果1:
12. var person = {
13.     name: "alvin",
14.     age: 18
15. };var person = {
16.     name: "alvin",
17.     age: 18
18. };var person = {
19.     name: "alvin",
20.     age: 18
21. };var person = {
22.     name: "alvin",
23.     age: 18
24. };var person = {
25.     name: "alvin",
26.     age: 18
27. }; 满足条件执行的结果是结果1时,执行这里的代码..
28. var person = {
29.     name: "alvin",
30.     age: 18
31. };var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };var person = {
38.     name: "alvin",
39.     age: 18
40. };var person = {
41.     name: "alvin",
42.     age: 18
43. }; break;
44. var person = {
45.     name: "alvin",
46.     age: 18
47. };var person = {
48.     name: "alvin",
49.     age: 18
50. };var person = {
51.     name: "alvin",
52.     age: 18
53. };case 结果2:
54. var person = {
55.     name: "alvin",
56.     age: 18
57. };var person = {
58.     name: "alvin",
59.     age: 18
60. };var person = {
61.     name: "alvin",
62.     age: 18
63. };var person = {
64.     name: "alvin",
65.     age: 18
66. };var person = {
67.     name: "alvin",
68.     age: 18
69. }; 满足条件执行的结果是结果2时,执行这里的代码..
70. var person = {
71.     name: "alvin",
72.     age: 18
73. };var person = {
74.     name: "alvin",
75.     age: 18
76. };var person = {
77.     name: "alvin",
78.     age: 18
79. };var person = {
80.     name: "alvin",
81.     age: 18
82. };var person = {
83.     name: "alvin",
84.     age: 18
85. }; break;
86. var person = {
87.     name: "alvin",
88.     age: 18
89. };var person = {
90.     name: "alvin",
91.     age: 18
92. };var person = {
93.     name: "alvin",
94.     age: 18
95. };.....
96. var person = {
97.     name: "alvin",
98.     age: 18
99. };var person = {
100.     name: "alvin",
101.     age: 18
102. };var person = {
103.     name: "alvin",
104.     age: 18
105. };default:
106. var person = {
107.     name: "alvin",
108.     age: 18
109. };var person = {
110.     name: "alvin",
111.     age: 18
112. };var person = {
113.     name: "alvin",
114.     age: 18
115. };var person = {
116.     name: "alvin",
117.     age: 18
118. };var person = {
119.     name: "alvin",
120.     age: 18
121. }; 条件和上述所有结果都不相等时,则执行这里的代码
122. var person = {
123.     name: "alvin",
124.     age: 18
125. }; }

复制代码

1、switch比if else更为简洁
2、执行效率更高。switch…case会生成一个跳转表来指示实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的。从而，switch…case不用像if…else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的。
3、到底使用哪一个选择语句，代码环境有关，如果是范围取值，则使用if else语句更为快捷；如果是确定取值，则使用switch是更优方案。

4.6.2、循环语句

• while循环
  

1. var person = {
2.     name: "alvin",
3.     age: 18
4. }; while(循环的条件){
5. var person = {
6.     name: "alvin",
7.     age: 18
8. };var person = {
9.     name: "alvin",
10.     age: 18
11. };var person = {
12.     name: "alvin",
13.     age: 18
14. };// 循环条件为true的时候,会执行这里的代码
15. var person = {
16.     name: "alvin",
17.     age: 18
18. }; }
19. var person = {
20.     name: "alvin",
21.     age: 18
22. };

复制代码

循环案例：

1. var count = 0
2. while (count<10){
3. var person = {
4.     name: "alvin",
5.     age: 18
6. };var person = {
7.     name: "alvin",
8.     age: 18
9. }; console.log(count);
10. var person = {
11.     name: "alvin",
12.     age: 18
13. };var person = {
14.     name: "alvin",
15.     age: 18
16. }; count++;
17. }

复制代码

不同于python，js代码在运行时，会分为两大部分———预编译 和 执行阶段。

• 预编译：会先检测代码的语法错误，进行变量、函数的声明。
  
• 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。
  

11.3、函数参数

（1） 参数基本使用

1. var person = {
2.     name: "alvin",
3.     age: 18
4. };
5. var person = {
6.     name: "alvin",
7.     age: 18
8. }; // 循环三要素
9. var person = {
10.     name: "alvin",
11.     age: 18
12. }; for(1.声明循环的开始; 2.条件; 4. 循环的计数){
13. var person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };var person = {
20.     name: "alvin",
21.     age: 18
22. };// 3. 循环条件为true的时候,会执行这里的代码
23. var person = {
24.     name: "alvin",
25.     age: 18
26. }; }
27. var person = {
28.     name: "alvin",
29.     age: 18
30. };
31. var person = {
32.     name: "alvin",
33.     age: 18
34. }; for(循环的成员下标 in 被循环的数据){
35. var person = {
36.     name: "alvin",
37.     age: 18
38. };var person = {
39.     name: "alvin",
40.     age: 18
41. };var person = {
42.     name: "alvin",
43.     age: 18
44. };// 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码
45. var person = {
46.     name: "alvin",
47.     age: 18
48. }; }var person = {
49.     name: "alvin",
50.     age: 18
51. };

复制代码

（2）函数中的arguments对象

1. // 方式1
2. for (var i = 0;i<10;i++){
3. var person = {
4.     name: "alvin",
5.     age: 18
6. };var person = {
7.     name: "alvin",
8.     age: 18
9. };console.log(i)
10. }
12. // 方式2
13. var arr = [111,222,333]
14. for (var i in arr){
15. var person = {
16.     name: "alvin",
17.     age: 18
18. };var person = {
19.     name: "alvin",
20.     age: 18
21. };console.log(i,arr[i])
22. }

复制代码

11.4、函数返回值

在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。

1. for (var i = 0;i<100;i++){
2. var person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. };if (i===88){
9. var person = {
10.     name: "alvin",
11.     age: 18
12. };var person = {
13.     name: "alvin",
14.     age: 18
15. };var person = {
16.     name: "alvin",
17.     age: 18
18. };var person = {
19.     name: "alvin",
20.     age: 18
21. };continuevar person = {
22.     name: "alvin",
23.     age: 18
24. };// 退出当次循环
25. var person = {
26.     name: "alvin",
27.     age: 18
28. };var person = {
29.     name: "alvin",
30.     age: 18
31. };var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };// breakvar person = {
38.     name: "alvin",
39.     age: 18
40. };// 退出当前整个循环
41. var person = {
42.     name: "alvin",
43.     age: 18
44. };var person = {
45.     name: "alvin",
46.     age: 18
47. };}
48. var person = {
49.     name: "alvin",
50.     age: 18
51. };var person = {
52.     name: "alvin",
53.     age: 18
54. };console.log(i)
55. }

复制代码

1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句
2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。

11.5、匿名函数

匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。

1. 创建方式1:
2. var arrname = [元素0,元素1,….];var person = {
3.     name: "alvin",
4.     age: 18
5. };var person = {
6.     name: "alvin",
7.     age: 18
8. };var person = {
9.     name: "alvin",
10.     age: 18
11. };var person = {
12.     name: "alvin",
13.     age: 18
14. };var person = {
15.     name: "alvin",
16.     age: 18
17. };// var arr=[1,2,3];
19. 创建方式2:
20. var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

复制代码

使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！

11.6、函数作用域

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。
任何程序设计语言都有作用域的概念，简单的说，作用域就是变量可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

1. var arr = ["A","B","C","D"];
2. // 内置属性
3. console.log( arr.length );
4. // 获取指定下标的成员
5. // console.log( arr[3] ); // D
6. console.log( arr[arr.length-1] ); // 最后一个成员
8. // (1) pop()var person = {
9.     name: "alvin",
10.     age: 18
11. };出栈,删除最后一个成员作为返回值
12. var arr = [1,2,3,4,5];
13. var ret = arr.pop();
14. console.log(arr); // [1, 2, 3, 4]
15. console.log(ret); // 5
18. // (2) push() 入栈,给数组后面追加成员
19. var arr = [1,2,3,4,5];
20. arr.push("a");
21. console.log(arr); // [1, 2, 3, 4, 5, "a"]
24. // (3) shift是将数组的第一个元素删除
25. var arr = [1,2,3,4,5];
26. arr.shift()
27. console.log(arr); // [2, 3, 4, 5]
29. // (4) unshift是将value值插入到数组的开始
30. var arr = [1,2,3,4,5];
31. arr.unshift("yuan")
32. console.log(arr); // ["yuan",1,2, 3, 4, 5]
35. // (5) reverse() 反转排列
36. var arr = [1,2,3,4,5];
37. arr.reverse();
38. console.log(arr); // [5, 4, 3, 2, 1]
40. // (6) slice(开始下标,结束下标)var person = {
41.     name: "alvin",
42.     age: 18
43. };切片,开区间
46. // (7) sort() 排序
47. var arr = [3,4,1,2,5,10];
48. console.log( arr ); // [3, 4, 1, 2, 5, 10]
49. arr.sort();
50. //
51. // // 这是字符的排序,不是数值的排序
52. console.log(arr);var person = {
53.     name: "alvin",
54.     age: 18
55. }; //var person = {
56.     name: "alvin",
57.     age: 18
58. };[1, 10, 2, 3, 4, 5]
60. // 数值升序
61. var arr = [3,4,1,2,5,10];
62. arr.sort(function(a,b){
63. var person = {
64.     name: "alvin",
65.     age: 18
66. };var person = {
67.     name: "alvin",
68.     age: 18
69. };return a-b;
70. });
71. console.log(arr);var person = {
72.     name: "alvin",
73.     age: 18
74. };// [1, 2, 3, 4, 5, 10]
76. // 数值降序
77. var arr = [3,4,1,2,5,10];
78. arr.sort(function(a,b){
79. var person = {
80.     name: "alvin",
81.     age: 18
82. };var person = {
83.     name: "alvin",
84.     age: 18
85. };return b-a;
86. });
87. console.log(arr); // [10, 5, 4, 3, 2, 1]
89. // (8) splice(操作位置的下标,删除操作的成员长度,"替换或者添加的成员1","替换或者添加的成员2")var person = {
90.     name: "alvin",
91.     age: 18
92. };添加/删除指定的成员var person = {
93.     name: "alvin",
94.     age: 18
95. }; "万能函数"
96. var arr1 = [1,2,3];
97. arr1.splice(1,1);
98. console.log(arr1); // 删除指定的1个成员var person = {
99.     name: "alvin",
100.     age: 18
101. };[1, 3]
103. var arr2 = ["a","b","c","d"];
104. arr2.splice(2,0,"w","x","w"); // 添加
105. console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]
107. var arr3 = ["a","b","c"];
108. arr3.splice(1,1,"w");
109. console.log(arr3); // ["a", "w", "c"]
111. // (9) concat() 把2个或者多个数组合并
112. var arr1 = [1,2,3];
113. var arr2 = [4,5,7];
114. var ret = arr1.concat(arr2);
115. console.log( ret );
118. // (10) join()var person = {
119.     name: "alvin",
120.     age: 18
121. };把数组的每一个成员按照指定的符号进行拼接成字符串
122. var str = "广东-深圳-南山";
123. var arr = str.split("-");
124. console.log( arr ); // ["广东", "深圳", "南山"];
126. var arr1 = ["广东", "深圳", "南山"];
127. var str1 = arr1.join("-");
128. console.log( str1 ); // 广东-深圳-南山
131. // (11) find()var person = {
132.     name: "alvin",
133.     age: 18
134. };高阶函数, 返回符合条件的第一个成员
135. var arr = [4,6,5,7];
136. var func = (num)=>{
137. var person = {
138.     name: "alvin",
139.     age: 18
140. };var person = {
141.     name: "alvin",
142.     age: 18
143. };if(num%2===0){
144. var person = {
145.     name: "alvin",
146.     age: 18
147. };var person = {
148.     name: "alvin",
149.     age: 18
150. };var person = {
151.     name: "alvin",
152.     age: 18
153. };var person = {
154.     name: "alvin",
155.     age: 18
156. };return num;
157. var person = {
158.     name: "alvin",
159.     age: 18
160. };var person = {
161.     name: "alvin",
162.     age: 18
163. };}
164. };
165. var ret = arr.find(func);
166. console.log( ret ); // 4
168. // (12)var person = {
169.     name: "alvin",
170.     age: 18
171. };filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果
172. var arr = [4,6,5,7];
173. function func(num){var person = {
174.     name: "alvin",
175.     age: 18
176. };// 也可以使用匿名函数或者箭头函数
177. var person = {
178.     name: "alvin",
179.     age: 18
180. };var person = {
181.     name: "alvin",
182.     age: 18
183. };if(num%2===0){
184. var person = {
185.     name: "alvin",
186.     age: 18
187. };var person = {
188.     name: "alvin",
189.     age: 18
190. };var person = {
191.     name: "alvin",
192.     age: 18
193. };var person = {
194.     name: "alvin",
195.     age: 18
196. };return num;
197. var person = {
198.     name: "alvin",
199.     age: 18
200. };var person = {
201.     name: "alvin",
202.     age: 18
203. };}
204. }
205. var ret = arr.filter(func);var person = {
206.     name: "alvin",
207.     age: 18
208. };// 所有的函数名都可以作为参数传递到另一个函数中被执行
209. console.log( ret );
211. // (13) map() 对数组的每一个成员进行处理,返回处理后的每一个成员
212. var arr = [1,2,3,4,5];
213. var ret = arr.map((num)=>{
214. var person = {
215.     name: "alvin",
216.     age: 18
217. };var person = {
218.     name: "alvin",
219.     age: 18
220. };return num**3;
221. });
222. console.log( retvar person = {
223.     name: "alvin",
224.     age: 18
225. };); // [1, 8, 27, 64, 125]
227. // (14) 其它方法
228. // includesvar person = {
229.     name: "alvin",
230.     age: 18
231. }; 查询指定数据是否在数组中存在!
232. // indexOf()var person = {
233.     name: "alvin",
234.     age: 18
235. };查询指定数据在数组中第一次出现的位置
236. // isArray()var person = {
237.     name: "alvin",
238.     age: 18
239. };判断变量的值是否是数组
240. var person = {
241.     name: "alvin",
242.     age: 18
243. };var person = {
244.     name: "alvin",
245.     age: 18
246. };var person = {
247.     name: "alvin",
248.     age: 18
249. };

复制代码

首先熟悉下var

1. var arr = [12,23,34]
2. for (var i in arr){
3. var person = {
4.     name: "alvin",
5.     age: 18
6. };var person = {
7.     name: "alvin",
8.     age: 18
9. };var person = {
10.     name: "alvin",
11.     age: 18
12. }; console.log(i,arr[i])
13. }

复制代码

作用域案例：

1. var person = new Object();
2. person.name = "alvin";
3. person.age = 18;

复制代码

11.7、JS的预编译

js运行三个阶段：

• 语法分析
  
• 预编译
  
• 解释执行
  

语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译，简单理解就是在内存中开辟一些空间，存放一些变量与函数 。
预编译可分为全局预编译和局部预编译。

• 在js脚本加载之后，会先通篇检查是否存在低级错误；
  
• 在语法检测完之后，便进行全局预编译；
  
• 在全局预编译之后，就解释一行，执行一行；
  
• 当执行到函数调用那一行前一刻，会先进行函数预编译，再往下执行。
  

全局预编译的3个步骤：

• 创建GO对象（Global Object）全局对象，即window对象。
  
• 找变量声明，将变量名作为GO属性名，值为undefined
  
• 查找函数声明，作为GO属性，值赋予函数体
  

局部预编译的4个步骤：

• 创建AO对象（Activation Object）执行期上下文。
  
• 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
  
• 将实参值和形参统一。
  
• 在函数体里面找函数声明，值赋予函数体。
  

GO对象是全局预编译，所以它优先于AO对象所创建和执行

案例分析：

1. var person = {
2.     name: "alvin",
3.     age: 18
4. };

复制代码

全局预编译

1. GO/window = {var person = {
2.     name: "alvin",
3.     age: 18
4. };var person = {
5.     name: "alvin",
6.     age: 18
7. };a: undefined,var person = {
8.     name: "alvin",
9.     age: 18
10. };var person = {
11.     name: "alvin",
12.     age: 18
13. };c: undefined，var person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };foo: function(a) {var person = {
20.     name: "alvin",
21.     age: 18
22. };var person = {
23.     name: "alvin",
24.     age: 18
25. };var person = {
26.     name: "alvin",
27.     age: 18
28. };var person = {
29.     name: "alvin",
30.     age: 18
31. };console.log(a);var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };var person = {
38.     name: "alvin",
39.     age: 18
40. };var person = {
41.     name: "alvin",
42.     age: 18
43. };var a = 123;var person = {
44.     name: "alvin",
45.     age: 18
46. };var person = {
47.     name: "alvin",
48.     age: 18
49. };var person = {
50.     name: "alvin",
51.     age: 18
52. };var person = {
53.     name: "alvin",
54.     age: 18
55. };console.log(a);var person = {
56.     name: "alvin",
57.     age: 18
58. };var person = {
59.     name: "alvin",
60.     age: 18
61. };var person = {
62.     name: "alvin",
63.     age: 18
64. };var person = {
65.     name: "alvin",
66.     age: 18
67. };function a() {}var person = {
68.     name: "alvin",
69.     age: 18
70. };var person = {
71.     name: "alvin",
72.     age: 18
73. };var person = {
74.     name: "alvin",
75.     age: 18
76. };var person = {
77.     name: "alvin",
78.     age: 18
79. };console.log(a);var person = {
80.     name: "alvin",
81.     age: 18
82. };var person = {
83.     name: "alvin",
84.     age: 18
85. };var person = {
86.     name: "alvin",
87.     age: 18
88. };var person = {
89.     name: "alvin",
90.     age: 18
91. };var b = function() {}var person = {
92.     name: "alvin",
93.     age: 18
94. };var person = {
95.     name: "alvin",
96.     age: 18
97. };var person = {
98.     name: "alvin",
99.     age: 18
100. };var person = {
101.     name: "alvin",
102.     age: 18
103. };console.log(b);var person = {
104.     name: "alvin",
105.     age: 18
106. };var person = {
107.     name: "alvin",
108.     age: 18
109. };var person = {
110.     name: "alvin",
111.     age: 18
112. };var person = {
113.     name: "alvin",
114.     age: 18
115. };function d() {}var person = {
116.     name: "alvin",
117.     age: 18
118. };var person = {
119.     name: "alvin",
120.     age: 18
121. };}}

复制代码

解释执行代码（直到执行调用函数foo(20)语句）

1. GO/window = {var person = {
2.     name: "alvin",
3.     age: 18
4. };var person = {
5.     name: "alvin",
6.     age: 18
7. };a: 10,var person = {
8.     name: "alvin",
9.     age: 18
10. };var person = {
11.     name: "alvin",
12.     age: 18
13. };c: function (){var person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };var person = {
20.     name: "alvin",
21.     age: 18
22. };var person = {
23.     name: "alvin",
24.     age: 18
25. };console.log("I at C function");var person = {
26.     name: "alvin",
27.     age: 18
28. };var person = {
29.     name: "alvin",
30.     age: 18
31. };}var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };test: function(a) {var person = {
38.     name: "alvin",
39.     age: 18
40. };var person = {
41.     name: "alvin",
42.     age: 18
43. };var person = {
44.     name: "alvin",
45.     age: 18
46. };var person = {
47.     name: "alvin",
48.     age: 18
49. };console.log(a);var person = {
50.     name: "alvin",
51.     age: 18
52. };var person = {
53.     name: "alvin",
54.     age: 18
55. };var person = {
56.     name: "alvin",
57.     age: 18
58. };var person = {
59.     name: "alvin",
60.     age: 18
61. };var a = 123;var person = {
62.     name: "alvin",
63.     age: 18
64. };var person = {
65.     name: "alvin",
66.     age: 18
67. };var person = {
68.     name: "alvin",
69.     age: 18
70. };var person = {
71.     name: "alvin",
72.     age: 18
73. };console.log(a);var person = {
74.     name: "alvin",
75.     age: 18
76. };var person = {
77.     name: "alvin",
78.     age: 18
79. };var person = {
80.     name: "alvin",
81.     age: 18
82. };var person = {
83.     name: "alvin",
84.     age: 18
85. };function a() {}var person = {
86.     name: "alvin",
87.     age: 18
88. };var person = {
89.     name: "alvin",
90.     age: 18
91. };var person = {
92.     name: "alvin",
93.     age: 18
94. };var person = {
95.     name: "alvin",
96.     age: 18
97. };console.log(a);var person = {
98.     name: "alvin",
99.     age: 18
100. };var person = {
101.     name: "alvin",
102.     age: 18
103. };var person = {
104.     name: "alvin",
105.     age: 18
106. };var person = {
107.     name: "alvin",
108.     age: 18
109. };var b = function() {}var person = {
110.     name: "alvin",
111.     age: 18
112. };var person = {
113.     name: "alvin",
114.     age: 18
115. };var person = {
116.     name: "alvin",
117.     age: 18
118. };var person = {
119.     name: "alvin",
120.     age: 18
121. };console.log(b);var person = {
122.     name: "alvin",
123.     age: 18
124. };var person = {
125.     name: "alvin",
126.     age: 18
127. };var person = {
128.     name: "alvin",
129.     age: 18
130. };var person = {
131.     name: "alvin",
132.     age: 18
133. };function d() {}var person = {
134.     name: "alvin",
135.     age: 18
136. };var person = {
137.     name: "alvin",
138.     age: 18
139. };}}

复制代码

调用函数foo(20)前发生布局预编译

1. // 局部预编译前两步：AO = {var person = {
2.     name: "alvin",
3.     age: 18
4. };var person = {
5.     name: "alvin",
6.     age: 18
7. };a:undefined,var person = {
8.     name: "alvin",
9.     age: 18
10. };var person = {
11.     name: "alvin",
12.     age: 18
13. };b:undefined,}// 局部预编译第三步：AO = {var person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };a:20,var person = {
20.     name: "alvin",
21.     age: 18
22. };var person = {
23.     name: "alvin",
24.     age: 18
25. };b:undefined,}// 局部预编译第四步：AO = {var person = {
26.     name: "alvin",
27.     age: 18
28. };var person = {
29.     name: "alvin",
30.     age: 18
31. };a:function a() {},var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };b:undefinedvar person = {
38.     name: "alvin",
39.     age: 18
40. };var person = {
41.     name: "alvin",
42.     age: 18
43. };d:function d() {}}

复制代码

预编译总结：

• 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
  
• 变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
  

面试题：

1. var num3 = 10;function func3(){var person = {
2.     name: "alvin",
3.     age: 18
4. };var person = {
5.     name: "alvin",
6.     age: 18
7. };console.log(num3);var person = {
8.     name: "alvin",
9.     age: 18
10. };var person = {
11.     name: "alvin",
12.     age: 18
13. }; var num3 = 20;var person = {
14.     name: "alvin",
15.     age: 18
16. };var person = {
17.     name: "alvin",
18.     age: 18
19. };var person = {
20.     name: "alvin",
21.     age: 18
22. }; }func3();console.log(num3);var person = {
23.     name: "alvin",
24.     age: 18
25. };/*var person = {
26.     name: "alvin",
27.     age: 18
28. };var person = {
29.     name: "alvin",
30.     age: 18
31. };var person = {
32.     name: "alvin",
33.     age: 18
34. };var person = {
35.     name: "alvin",
36.     age: 18
37. };// 全局编译var person = {
38.     name: "alvin",
39.     age: 18
40. };var person = {
41.     name: "alvin",
42.     age: 18
43. };var person = {
44.     name: "alvin",
45.     age: 18
46. };var person = {
47.     name: "alvin",
48.     age: 18
49. };GO{var person = {
50.     name: "alvin",
51.     age: 18
52. };var person = {
53.     name: "alvin",
54.     age: 18
55. };var person = {
56.     name: "alvin",
57.     age: 18
58. };var person = {
59.     name: "alvin",
60.     age: 18
61. };var person = {
62.     name: "alvin",
63.     age: 18
64. }; num3:undefined,var person = {
65.     name: "alvin",
66.     age: 18
67. };var person = {
68.     name: "alvin",
69.     age: 18
70. };var person = {
71.     name: "alvin",
72.     age: 18
73. };var person = {
74.     name: "alvin",
75.     age: 18
76. };var person = {
77.     name: "alvin",
78.     age: 18
79. }; func3: function (){var person = {
80.     name: "alvin",
81.     age: 18
82. };var person = {
83.     name: "alvin",
84.     age: 18
85. };var person = {
86.     name: "alvin",
87.     age: 18
88. };var person = {
89.     name: "alvin",
90.     age: 18
91. };var person = {
92.     name: "alvin",
93.     age: 18
94. };var person = {
95.     name: "alvin",
96.     age: 18
97. };console.log(num3);var person = {
98.     name: "alvin",
99.     age: 18
100. };var person = {
101.     name: "alvin",
102.     age: 18
103. };var person = {
104.     name: "alvin",
105.     age: 18
106. };var person = {
107.     name: "alvin",
108.     age: 18
109. };var person = {
110.     name: "alvin",
111.     age: 18
112. };var person = {
113.     name: "alvin",
114.     age: 18
115. };var num3 = 20;var person = {
116.     name: "alvin",
117.     age: 18
118. };var person = {
119.     name: "alvin",
120.     age: 18
121. };var person = {
122.     name: "alvin",
123.     age: 18
124. };var person = {
125.     name: "alvin",
126.     age: 18
127. };}var person = {
128.     name: "alvin",
129.     age: 18
130. };var person = {
131.     name: "alvin",
132.     age: 18
133. };var person = {
134.     name: "alvin",
135.     age: 18
136. };var person = {
137.     name: "alvin",
138.     age: 18
139. };// 全局执行var person = {
140.     name: "alvin",
141.     age: 18
142. };var person = {
143.     name: "alvin",
144.     age: 18
145. };var person = {
146.     name: "alvin",
147.     age: 18
148. };var person = {
149.     name: "alvin",
150.     age: 18
151. };var num3 = 10;var person = {
152.     name: "alvin",
153.     age: 18
154. };var person = {
155.     name: "alvin",
156.     age: 18
157. };var person = {
158.     name: "alvin",
159.     age: 18
160. };var person = {
161.     name: "alvin",
162.     age: 18
163. };GO{var person = {
164.     name: "alvin",
165.     age: 18
166. };var person = {
167.     name: "alvin",
168.     age: 18
169. };var person = {
170.     name: "alvin",
171.     age: 18
172. };var person = {
173.     name: "alvin",
174.     age: 18
175. };var person = {
176.     name: "alvin",
177.     age: 18
178. }; num3:10,var person = {
179.     name: "alvin",
180.     age: 18
181. };var person = {
182.     name: "alvin",
183.     age: 18
184. };var person = {
185.     name: "alvin",
186.     age: 18
187. };var person = {
188.     name: "alvin",
189.     age: 18
190. };var person = {
191.     name: "alvin",
192.     age: 18
193. }; func3: function (){var person = {
194.     name: "alvin",
195.     age: 18
196. };var person = {
197.     name: "alvin",
198.     age: 18
199. };var person = {
200.     name: "alvin",
201.     age: 18
202. };var person = {
203.     name: "alvin",
204.     age: 18
205. };var person = {
206.     name: "alvin",
207.     age: 18
208. };var person = {
209.     name: "alvin",
210.     age: 18
211. };console.log(num3);var person = {
212.     name: "alvin",
213.     age: 18
214. };var person = {
215.     name: "alvin",
216.     age: 18
217. };var person = {
218.     name: "alvin",
219.     age: 18
220. };var person = {
221.     name: "alvin",
222.     age: 18
223. };var person = {
224.     name: "alvin",
225.     age: 18
226. };var person = {
227.     name: "alvin",
228.     age: 18
229. };var num3 = 20;var person = {
230.     name: "alvin",
231.     age: 18
232. };var person = {
233.     name: "alvin",
234.     age: 18
235. };var person = {
236.     name: "alvin",
237.     age: 18
238. };var person = {
239.     name: "alvin",
240.     age: 18
241. };}var person = {
242.     name: "alvin",
243.     age: 18
244. };var person = {
245.     name: "alvin",
246.     age: 18
247. };var person = {
248.     name: "alvin",
249.     age: 18
250. };var person = {
251.     name: "alvin",
252.     age: 18
253. };// 局部编译var person = {
254.     name: "alvin",
255.     age: 18
256. };var person = {
257.     name: "alvin",
258.     age: 18
259. };var person = {
260.     name: "alvin",
261.     age: 18
262. };var person = {
263.     name: "alvin",
264.     age: 18
265. };func3.AO{var person = {
266.     name: "alvin",
267.     age: 18
268. };var person = {
269.     name: "alvin",
270.     age: 18
271. };var person = {
272.     name: "alvin",
273.     age: 18
274. };var person = {
275.     name: "alvin",
276.     age: 18
277. };var person = {
278.     name: "alvin",
279.     age: 18
280. }; num3:undefined,var person = {
281.     name: "alvin",
282.     age: 18
283. };var person = {
284.     name: "alvin",
285.     age: 18
286. };var person = {
287.     name: "alvin",
288.     age: 18
289. };var person = {
290.     name: "alvin",
291.     age: 18
292. };}var person = {
293.     name: "alvin",
294.     age: 18
295. };var person = {
296.     name: "alvin",
297.     age: 18
298. };var person = {
299.     name: "alvin",
300.     age: 18
301. };var person = {
302.     name: "alvin",
303.     age: 18
304. };// 局部执行var person = {
305.     name: "alvin",
306.     age: 18
307. };var person = {
308.     name: "alvin",
309.     age: 18
310. };var person = {
311.     name: "alvin",
312.     age: 18
313. };var person = {
314.     name: "alvin",
315.     age: 18
316. };func3.AO{var person = {
317.     name: "alvin",
318.     age: 18
319. };var person = {
320.     name: "alvin",
321.     age: 18
322. };var person = {
323.     name: "alvin",
324.     age: 18
325. };var person = {
326.     name: "alvin",
327.     age: 18
328. };var person = {
329.     name: "alvin",
330.     age: 18
331. }; num3:20,var person = {
332.     name: "alvin",
333.     age: 18
334. };var person = {
335.     name: "alvin",
336.     age: 18
337. };var person = {
338.     name: "alvin",
339.     age: 18
340. };var person = {
341.     name: "alvin",
342.     age: 18
343. };}var person = {
344.     name: "alvin",
345.     age: 18
346. };var person = {
347.     name: "alvin",
348.     age: 18
349. };var person = {
350.     name: "alvin",
351.     age: 18
352. };var person = {
353.     name: "alvin",
354.     age: 18
355. };// 全局执行var person = {
356.     name: "alvin",
357.     age: 18
358. };var person = {
359.     name: "alvin",
360.     age: 18
361. };var person = {
362.     name: "alvin",
363.     age: 18
364. };var person = {
365.     name: "alvin",
366.     age: 18
367. };GO.num3 = 10var person = {
368.     name: "alvin",
369.     age: 18
370. };var person = {
371.     name: "alvin",
372.     age: 18
373. };var person = {
374.     name: "alvin",
375.     age: 18
376. };var person = {
377.     name: "alvin",
378.     age: 18
379. };}*/

复制代码

来源:https://www.cnblogs.com/sbhglqy/p/18168077
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！