JavaScript基本语法（全）

JavaScript

• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
• 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
• 现在也可以基于 Node.js 技术进行服务器端编程

JavaScript的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
• 网页特效
• 服务端开发(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件-物联网(Ruff)
• 游戏开发(cocos2d-js)

HTML/CSS/JS 的关系

HTML/CSS 标记语言--描述类语言

• HTML 决定网页结构和内容( 决定看到什么 )，相当
  于人的身体
• CSS 决定网页呈现给用户的模样( 决定好不好看 )，
  相当于给人穿衣服、化妆
• JS 脚本语言--编程类语言
  实现业务逻辑和页面控制( 决定功能 )，相当
  于人的各种动作

浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

• 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
• JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
  浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释
  每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JS 的组成

• ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
• 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
  通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
• BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行
  互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS的使用

JS 有3种书写位置，分别为行内、内嵌和外部。

1. 行内式 JS

<input type='button' value='点我试试' onclick='alert('Hello World')' />

2.内嵌 JS

<script>
alert('Hello World~!');
</script>

3.外部 JS文件

<script src='my.js'></script>

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

• 引用外部 JS文件的 script 标签中间不可以写代码
• 适合于JS 代码量比较大的情况

JS注释

• 单行注释
  为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。
  单行注释的注释方式如下：

// 用来注释单行文字（ 快捷键 ctrl + / ）

• 注释多行

/* 用来注释多行文字（ 默认快捷键 alt + shift + a ）*/ 快捷键修改为： ctrl + shift + /

vscode - 首选项按钮 -键盘快捷方式 -查找 原来的快捷键 - 修改为新的快捷键 - 回车确认

JavaScript 输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert()	浏览器弹出警示框	浏览器
console.log()	浏览器控制台打印输出信息	浏览器
prompt()	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

什么是变量

• 通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。
• 变量在内存中的存储
  本质：变量是程序在内存中申请的一块用来存放数据的空间。
  类似我们酒店的房间，一个房间就可以看做是一个变量。

变量的使用

变量在使用时分为两步： 1. 声明变量 2. 赋值

1. 声明变量
   // 声明变量

var age; // 声明一个 名称为age 的变量

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间。
• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

1. 赋值

age = 10; // 给 age 这个变量赋值为 10

• = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

1. 变量的初始化

var age = 18; // 声明变量同时赋值为 18

声明一个变量并赋值， 我们称之为变量的初始化。
注意：一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

4.同时声明多个变量

同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

5.变量命名规范

- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name - 严格区分大小写。var app; 和 var App; 是两个变量 - 不能 以数字开头。 18age 是错误的 - 不能 是关键字、保留字。例如：var、for、while - 变量名必须有意义。 - 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

数据类型

1.为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

2.变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串
var x = 6; // x 为数字
var x = 'Bill'; // x 为字符串

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x 为数字 var x = 'Bill'; // x 为字符串

数据类型的分类

1. JS 把数据类型分为两类：

• 简单数据类型 （Number,String,Boolean,Undefined,Null）
• 复杂数据类型 （object)

1. 简单数据类型（基本数据类型）
   JavaScript 中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21. 0.21	0
Boolean	布尔值类型，如true、 false, 等价于1和0	false
String	字符串类型,如'张三'注意咱们js里面，字符串都带引号	''
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	vara=null;声明了变量a为空值	null

1. 数字型范围
   JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，这个值为：5e-32

1. 数字型三个特殊值

alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN

- Infinity ，代表无穷大，大于任何数值
- -Infinity ，代表无穷小，小于任何数值
- NaN ，Not a number，代表一个非数值

5.isNaN()
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false ，21 不是一个非数字 var usrName = 'andy'; console.log(isNaN(userName)); // true ，'andy'是一个非数字

6.字符串型 String
字符串型可以是引号中的任意文本，其语法为 双引号 '' 和 单引号''

var strMsg = '我爱北京~'; // 使用双引号表示字符串
var strMsg2 = '我爱北京~'; // 使用单引号表示字符串

注意：因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
7.字符串引号嵌套
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我要'亲亲'宝宝'; // 可以用''包含'' var strMsg2 = '我要'亲亲'宝宝'; // 也可以用'' 包含''

8.字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的
转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
'	' 单引号
'	”双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

9.字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
（注意空格也是一个字符串哦）

var strMsg = '我饿了！';
alert(strMsg.length); // 显示 4

10.字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1 字符串 '相加' alert('hello' + ' ' + 'world'); // hello world //2 数值字符串 '相加' alert('100' + '100'); // 100100 //3 数值字符串 + 数值 alert('11' + 12); // 1112

11.布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

12.Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

获取检测变量的数据类型

1.typeof 可用来获取检测变量的数据类型

var num = 18; console.log(typeof num) // 结果 number

注意：null的返回值不是null，是object
2.字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

1.转换为字符串

方式	说明	案例
toString( )	转成字符串	var num= 1; alert(num.toString);
String( )强制转换	转成字符串	var num = 1; alert(String(num);

• toString() 和 String() 使用方式不一样。

2.转换为数字型（重点）

方式	说明	案例
parselInt(string)函数	将string类型转成整数数值型	parselnt(78)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换(- * /)	利用算术运算隐式转换为数值型	'12'-0

• 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
• 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

3.转换为布尔型

• 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
• 其余值都会被转换为 true

方式	说明	案例
Boolean( )函数	其他类型转成布尔值	Boolean'true';

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

运算符（操作符）

运算符的分类

​运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有： - 算数运算符 - 递增和递减运算符 - 比较运算符 - 逻辑运算符 - 赋值运算符

算数运算符

• 算术运算符概述

  概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	实例
+	加	10+ 20= 30
-	减	10- 20=-10
*	乘	10* 20= 200
/	除	10/20= 0.5
%	取余数(取模)	返回除法的余数9%2= 1

• 浮点数的精度问题

  ​浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

  var result = 0.1 + 0.2;//结果是：0.30000000000000004
  console.log(0.07 * 100);//结果是：7.000000000000001
  

  ​所以：不要直接判断两个浮点数是否相等 !

• 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 ​简单理解：是由数字、运算符、变量等组成的式子 ​表达式最终都会有一个结果，返回给开发者，称为返回值

递增和递减运算符

• 递增和递减运算符概述

  ​如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

  在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

    注意：递增和递减运算符必须和变量配合使用。
  

• 递增运算符

  • 前置递增运算符

    ++num 前置递增，就是自加1，类似于 num = num + 1

    使用口诀：先自加，后返回值

  var num = 10; alert(++num + 10); // 21

  • 后置递增运算符

    num++ 后置递增，就是自加1，类似于 num = num + 1

    使用口诀：先返回原值，后自加

  var  num = 10;
  alert(10 + num++);  // 20
  

总结：

1. 前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单 2. 单独使用时，运行结果相同 3. 与其他代码联用时，执行结果会不同 4. 后置：先原值运算，后自加（先人后己） 5. 前置：先自加，后运算（先已后人） 6. 大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num--;

比较运算符

• 比较运算符概述

  ​概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号(大于或者等于)	2>= 2	true
<=	小于等于号(小于或者等于)	3<= 2	false
==	等号	37 == 37	true
!=	不等号	37 != 37	false
===	全等要求值和数据类型都一致	37 === '37'	false

• 等号比较

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等
===	全等	判断两边的值和数据类型是否完全相同

console.log(18 == '18'); // true
console.log(18 === '18'); // false

逻辑运算符

• 逻辑运算符概述

  ​逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符	说明	案例
&&	“逻辑与'，简称'与”and	true && false
||	'逻辑或'，简称'或” or	true || false
!	“逻辑非'，简称“非' not	! true

• 逻辑与&&

  ​两边都是 true才返回 true，否则返回 false

• 逻辑或 ||

  ​两边都是 true才返回 true，否则返回 false

• 逻辑非 ！

  ​逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

  var isOk = !true; console.log(isOk); // false

赋值运算符

​概念：用来把数据赋值给变量的运算符。

赋值运算符	说明	案例
=	直接赋值	var usrName ='我是值';
+= , - =	加、减一个数后在赋值	varage= 10; age+=5; // 15
*=、/=、%=	乘、除、取模后在赋值	varage= 2; age*=5;// 10.

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

运算符优先级

优先级	运算符	顺序
1	小括号	( )
2	一元运算符	++ -- !
3	算数运算符	先* / % 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后||
7	赋值运算符	=
8	逗号运算符	,

• 一元运算符里面的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

流程控制

流程控制概念

​在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

​简单理解：流程控制就是来控制代码按照一定结构顺序来执行

​流程控制主要有三种结构：顺序结构、分支（选择）结构、循环结构

顺序流程控制

分支流程控制

• 分支结构

​

​JS 语言提供了两种分支结构语句：if 语句、switch 语句

• if 语句

  • 语法结构
  // 条件成立执行代码，否则什么也不做 if (条件表达式) { // 条件成立执行的代码语句 }

  语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

• if else语句（双分支语句）

  • 语法结构

    // 条件成立  执行 if 里面代码，否则执行else 里面的代码
    if (条件表达式) {
        // [如果] 条件成立执行的代码
    } else {
        // [否则] 执行的代码
    }
    
    

• if else if 语句(多分支语句)

  • 语法结构

    // 适合于检查多重条件。 if (条件表达式1) { 语句1； } else if (条件表达式2) { 语句2； } else if (条件表达式3) { 语句3； .... } else { // 上述条件都不成立执行此处代码 }

总结：

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

三元表达式

• 语法结构

  表达式1 ? 表达式2 : 表达式3;

• 执行思路

  • 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
  • 简单理解： 就类似于 if else （双分支） 的简写

switch分支流程控制

• 语法结构

  switch( 表达式 ){
     case value1:
         // 表达式 等于 value1 时要执行的代码
         break;
     case value2:
         // 表达式 等于 value2 时要执行的代码
         break;
     default:
         // 表达式 不等于任何一个 value 时要执行的代码
  }
  

  • 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量

  • 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

  • switch 表达式的值会与结构中的 case 的值做比较

  • 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

  • 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

    注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

• switch 语句和 if else if 语句的区别

  • 一般情况下，它们两个语句可以相互替换
  • switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
  • 当分支比较少时，if… else语句的执行效率比 switch语句高。
  • 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

循环结构

在javascript中，循环语句有三种，while、do..while、for循环。

for循环

小结： while和do...while一般用来解决无法确认次数的循环。 for循环一般在循环次数确定的时候比较方便

• 语法结构

  for(初始化变量; 条件表达式; 操作表达式 ){
      //循环体
  }
  

  名称	作用
  初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
  条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
  操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

  执行过程：

  1. 初始化变量，初始化操作在整个 for 循环只会执行一次。

• 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

1. 执行操作表达式，此时第一轮结束。
2. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
3. 继续执行操作表达式，第二轮结束。
4. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

双重for循环

• 双重 for 循环概述

  循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

• 双重 for 循环语法

  for (外循环的初始; 外循环的条件; 外循环的操作表达式) { for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 需执行的代码; } }
  • 内层循环可以看做外层循环的循环体语句
  • 内层循环执行的顺序也要遵循 for 循环的执行顺序
  • 外层循环执行一次，内层循环要执行全部次数

• 打印五行五列星星

  var star = '';
  for (var j = 1; j <= 3; j++) {
      for (var i = 1; i <= 3; i++) {
        star += '☆'
      }
      // 每次满 5个星星 就 加一次换行
      star += '\n'
  }
  console.log(star);
  

  核心逻辑：

  1.内层循环负责一行打印五个星星

  2.外层循环负责打印五行

• for 循环小结

  • for 循环可以重复执行某些相同代码
  • for 循环可以重复执行些许不同的代码，因为我们有计数器
  • for 循环可以重复执行某些操作，比如算术运算符加法操作
  • 随着需求增加，双重for循环可以做更多、更好看的效果
  • 双重 for 循环，外层循环一次，内层 for 循环全部执行
  • for 循环是循环条件和数字直接相关的循环

JS要理解掌握的代码题型： 打印1-100之间所有数 求1-100之间所有数的和 求1-100之间所有数的平均值 求1-100之间所有偶数的和 同时求1-100之间所有偶数和奇数的和 打印正方形 // console.log 输出重复内容的问题 // console.log 默认输出内容介绍后有换行 var start = ''; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { start += '* '; } start += '\n'; } console.log(start); 打印直角三角形 var start = ''; for (var i = 0; i < 10; i++) { for (var j = i; j < 10; j++) { start += '* '; } start += '\n'; } console.log(start); 打印9*9乘法表 var str = ''; for (var i = 1; i <= 9; i++) { for (var j = i; j <=9; j++) { str += i + ' * ' + j + ' = ' + i * j + '\t'; } str += '\n'; } console.log(str);

while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码
}

执行思路：

• 1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
• 2 执行循环体代码
• 3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

1.4 do-while循环

do... while 语句的语法结构如下：

do { // 循环体代码 - 条件表达式为 true 时重复执行循环体代码 } while(条件表达式);

执行思路

• 1 先执行一次循环体代码

• 2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

  注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

数组

1.1 数组的概念

• 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
• 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

1.2 创建数组

JS 中创建数组有两种方式：

• 利用 new 创建数组

  var 数组名 = new Array() ；
  var arr = new Array();   // 创建一个新的空数组
  

  注意 Array () ，A 要大写

• 利用数组字面量创建数组

// 创建一个空数组 var arr1 = []; // 创建一个包含3个数值的数组，多个数组项以逗号隔开 var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组 var arr3 = ['a', 'c']; // 可以通过数组的length属性获取数组的长度 console.log(arr3.length); // 可以设置length属性改变数组中元素的个数 arr3.length = 0; - 数组的字面量是方括号 [ ] - 声明数组并赋值称为数组的初始化 - 这种字面量方式也是我们以后最多使用的方式

• 数组元素的类型

  数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

  var arrStus = ['小白',12,true,28.9];
  

1.3 获取数组中的元素

​索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组 var arrStus = [1,2,3]; // 获取数组中的第2个元素 alert(arrStus[1]);

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
}

• 数组的长度

  数组的长度：默认情况下表示数组中元素的个数

  使用“数组名.length”可以访问数组元素的数量（数组长度）。

  var arrStus = [1,2,3]; alert(arrStus.length); // 3

  注意：

  • 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。

• 当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

  • 数组的length属性可以被修改：

• 如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；

  • 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除

数组中新增元素

数组的赋值

// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，
//会给数组新增一个元素。
var arr = ['red', 'green', 'blue'];
// 把red替换成了yellow
arr[0] = 'yellow';
// 给数组新增加了一个pink的值
arr[3] = 'pink';

JS数组要会的题： /* 求数组[2,6,1,77,52,25,7]中的最大值。 分析：冒泡排序法：是一种算法，把一系列的数据按照一定的顺序进行排列显示 (从小到大或从大到小）。 回顾：把2个变量交换数据 // 利用第三个变量 var num1 = 10; var num2 = 20; var temp = num1; num1 = num2; num2 = temp; console.log(num1, num2); ① 声明一个保存最大元素的变量 max。 ② 默认最大值可以取数组中的第一个元素。 ③ 遍历这个数组，把里面每个数组元素和 max 相比较。 ④ 如果这个数组元素大于max 就把这个数组元素存到 max 里面， 否则继续下一轮比较。 ⑤ 最后输出这个 max。*/ var arrNum = [2,6,1,77,52,25,7]; var maxNum = arrNum[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素 // 从0 开始循环数组里的每个元素 for(var i = 0;i< arrNum.length; i++){ // 如果数组里当前循环的元素大于 maxNum，则保存这个元素和下标 if(arrNum[i] > maxNum){ maxNum = arrNum[i]; // 保存数值到变量 maxNum } } /* 删除指定数组元素 要求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。 分析 ① 需要一个新数组用于存放筛选之后的数据。 ② 遍历原来的数组，把不是 0 的数据添加到新数组里面( 此时要注意采用数组名+索引的格式接收数据)。 ③ 新数组里面的个数，用 length 不断累加。*/ var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; var newArr = []; // 空数组的默认的长度为 0 // 定义一个变量 i 用来计算新数组的索引号 for (var i = 0; i < arr.length; i++) { // 找出大于 10 的数 if (arr[i] != 0) { // 给新数组 // 每次存入一个值，newArr长度都会 +1 newArr[newArr.length] = arr[i]; } } console.log(newArr);

什么是函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

函数的定义

• 函数声明

function 函数名(){
  // 函数体
}

function 是声明函数的关键字,必须小写

• 函数表达式

var fn = function() { // 函数体 }

• 特点：

  函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。
  函数一般都用来干一件事情，需用使用动词+名词，表示做一件事情 tellStory sayHello等

函数的调用

• 调用函数的语法：

函数名();// 通过调用函数名来执行函数体代码

• 特点：

  函数体只有在调用的时候才会执行，调用需要()进行调用。
  可以调用多次(重复使用)

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

代码示例：

// 声明函数
function sayHi() {
  console.log('吃了没？');
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

• 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

  例子：封装计算1-100累加和

  /* 计算1-100之间值的函数 */ // 声明函数 function getSum(){ var sumNum = 0;// 准备一个变量，保存数字和 for (var i = 1; i <= 100; i++) { sumNum += i;// 把每个数值 都累加 到变量中 } alert(sumNum); } // 调用函数 getSum();

函数的参数

• 为什么要有参数
  ​参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
  函数参数的运用：

  // 带参数的函数声明
  function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
    // 函数体
  }
  // 带参数的函数调用
  函数名(实参1, 实参2, 实参3...);
  

  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为：不用声明的变量
  3. 实参和形参的多个参数之间用逗号（,）分隔

function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(); } // 虽然上面代码可以重复调用，但是只能计算1-100之间的值 // 如果想要计算n-m之间所有数的和，应该怎么办呢？

• 语法：

// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}

// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

• 形参和实参

  1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
     简单理解(函数定义时设置接收调用时传入)
  2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。
     简单理解(函数调用时传入小括号内的真实数据)

参数	说明
形参	形式_上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

var x = 5, y = 6; fn(x,y); function fn(a, b) { console.log(a + b); } //x,y实参，有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y

注意：在JavaScript中，形参的默认值是undefined。

小结：

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔

函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值

返回值语法：

//声明一个带返回值的函数 function 函数名(形参1, 形参2, 形参...){ //函数体 return 返回值; } //可以通过变量来接收这个返回值 var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

返回值详解：
- 在使用 return 语句时，函数会停止执行，并返回指定的值

• 如果函数没有 return ，返回的值是 undefined

• 在使用 return 语句时，函数会停止执行，并返回指定的值
  如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
  如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
  函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

  推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。

break ,continue ,return 的区别

• break ：结束当前的循环体（如 for、while）
• continue ：跳出本次循环，继续执行下次循环（如 for、while）
• return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

​当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有 length 属性

• 按索引方式储存数据

• 不具有数组的 push , pop 等方法

  注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
  函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，
  使用函数名加括号即可以将封装的操作执行。

函数的两种声明方式

• 自定义函数方式(命名函数)

  利用函数关键字 function 自定义函数方式

  // 声明定义方式 function fn() {...} // 调用 fn();
  • 因为有名字，所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

• 函数表达式方式(匿名函数）

  利用函数表达式方式的写法如下：

  // 这是函数表达式写法，匿名函数后面跟分号结束
  var fn = function(){...}；
  // 调用的方式，函数调用必须写到函数体下面
  fn();
  

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用 匿名函数自调用

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

• 因为函数没有名字，所以也被称为匿名函数
• 这个fn 里面存储的是一个函数
• 函数表达式方式原理跟声明变量方式是一致的
• 函数调用的代码必须写到函数体后面

自调用函数

匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

(function () {
  alert(123);
})();

函数是一种数据类型

function fn() {} console.log(typeof fn);

• 函数作为参数

因为函数也是一种类型，可以把函数作为两一个函数的参数，在两一个函数中调用

• 函数做为返回值

因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回，这种用法在后面很常见。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

调试

• 过去调试JavaScript的方式
  • alert()
  • console.log()
• 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

• 调试步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

• 调试中的相关操作

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，
这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

代码规范

标识符命名规范

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名称一般用动词

操作符规范

// 操作符的左右两侧各保留一个空格 for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接退出整个 for 循环，跳到整个for循环下面的语句 } console.log('我正在吃第' + i + '个包子呢'); }

单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

其他规范

关键词、操作符之间后加空格

小结：
1.命名规范
    2.变量规范
    var name = 'zs';
    3.注释规范
    // 这里是注释
    4.空格规范
    5.换行规范
    var arr = [1, 2, 3, 4];
    if (a > b) {

    }
    for(var i = 0; i < 10; i++) {

    }
    function fn() {

    }

作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的， 而限定这个名字的可用性的代码范围就是这个名字的作用域。 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 JavaScript（es6前）中的作用域有两种：

• 全局作用域
• 局部作用域（函数作用域）

全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

局部作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系， 所以也称为函数作用域。

JS没有块级作用域

• 块作用域由 { } 包括。

• 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

  java有块级作用域：

  if(true){
    int num = 123;
    system.out.print(num);  // 123
  }
  system.out.print(num);    // 报错
  

  以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；

  而与之类似的JavaScript代码，则不会报错：

  Js中没有块级作用域（在ES6之前）

  if(true){ var num = 123; console.log(123); //123 } console.log(123); //123

  小结：
  任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
  在es6之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域

词法作用域

变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。

在 js 中词法作用域规则:

• 函数允许访问函数外的数据.
• 整个代码结构中只有函数可以限定作用域.
• 作用域规则首先使用提升规则分析
• 如果当前作用规则中有名字了, 就不考虑外面的名字

变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

• 全局变量
• 局部变量

全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量 是全局变量
• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

全局变量和局部变量的区别

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

作用域链

只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在[内部函数可以访问外部函数变量]的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。 JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

• 代码执行： 从上到下执行JS语句。

  预解析会把变量和函数的声明在代码执行之前执行完成。

变量预解析

预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num); // 结果是多少？ var num = 10; // ？

结果：undefined

注意：变量提升只提升声明，不提升赋值

• 函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

fn(); function fn() { console.log('打印'); }

结果：控制台打印字符串 --- ”打印“ 

注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，
但是函数并没有被调用！

函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('想不到吧');
}

结果：报错提示 ”fn is not a function' 解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined； 而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined ，所以无法正确调用

对象的相关概念

• 什么是对象？

  在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
  （现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。）
  对象是由属性和方法组成的。

  • 属性：事物的特征，在对象中用属性来表示（常用名词）

  • 方法：事物的行为，在对象中用方法来表示（常用动词）

• 为什么需要对象？

  保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

    如果要保存一个人的完整信息呢？
  

因此为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象 JavaScript的对象是无序属性的集合。 属性和方法 如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性， 属性一般是名词，用来描述事物的特征 如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法， 方法是动词，描述事物的行为和功能 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。 我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。 对象的行为和特征 特征---属性 行为---方法

• 事物的特征在对象中用属性来表示。
• 事物的行为在对象中用方法来表示。
  创建对象的三种方式

• 利用字面量创建对象

  使用对象字面量创建对象：

    就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示
  

  • 键：相当于属性名

  • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

    代码如下：

    var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };

    上述代码中 star即是创建的对象。

• 对象的使用

  • 对象的属性

    • 对象中存储具体数据的 '键值对'中的 '键'称为对象的属性，即对象中存储具体数据的项

  • 对象的方法

    • 对象中存储函数的 '键值对'中的 '键'称为对象的方法，即对象中存储函数的项

  • 访问对象的属性

    • 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”

    • 对象里面属性的另一种调用方式 : 对象['属性名’]，注意方括号里面的属性必须加引号

      示例代码如下：

      console.log(star.name)     // 调用名字属性
      console.log(star['name'])  // 调用名字属性
      

  • 调用对象的方法

    • 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

      示例代码如下：

      star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

  • 变量、属性、函数、方法总结

    属性是对象的一部分，而变量不是对象的一部分，
    变量是单独存储数据的容器
    

    • 变量：单独声明赋值，单独存在

    • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

      方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

    • 函数：单独存在的，通过“函数名()”的方式就可以调用

    • 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

• 利用 new Object 创建对象

  • 创建空对象

    var andy = new Obect();

    通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象

  • 给空对象添加属性和方法

    • 通过对象操作属性和方法的方式，来为对象增加属性和方法

      示例代码如下：

    andy.name = 'pink';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){
        alert('大家好啊~');
    }
    

    注意：

    • Object() ：第一个字母大写
    • new Object() ：需要 new 关键字
    • 使用的格式：对象.属性 = 值;

• 利用构造函数创建对象

  • 构造函数

    • 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

    • 构造函数的封装格式：

      function 构造函数名(形参1,形参2,形参3) { this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; }

    • 构造函数的调用格式

      var obj = new 构造函数名(实参1，实参2，实参3)
      

      以上代码中，obj即接收到构造函数创建出来的对象。

    • 注意事项

      1. 构造函数约定首字母大写。
      2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
      3. 构造函数中不需要 return 返回结果。
      4. 当我们创建对象的时候，必须用 new 来调用构造函数。

    • 其他

      构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
      创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

new关键字

构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

1. 构造函数用于创建一类对象，首字母要大写。
2. 构造函数要和new一起使用才有意义。

new在执行时会做四件事情

new会在内存中创建一个新的空对象 new 会让this指向这个新的对象 执行构造函数 目的：给这个新对象加属性和方法 new会返回这个新对象

this详解

JavaScript中的this指向问题，有时候会让人难以捉摸，随着学习的深入，
我们可以逐渐了解
现在我们需要掌握函数内部的this几个特点
1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
2. 一般函数直接执行，内部this指向全局window
3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
4. 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，
5. 所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，
从而实现实例化

对象的使用

• new关键字的作用

  1. 在构造函数代码开始执行之前，创建一个空对象；
  2. 修改this的指向，把this指向创建出来的空对象；
  3. 执行函数的代码
  4. 在函数完成之后，返回this---即创建出来的对象

5.3 遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。 其语法如下：

for (变量 in 对象名字) {
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范， 通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

简单类型和复杂类型的区别

基本类型又叫做值类型，复杂类型又叫做引用类型

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

• 堆和栈

  堆栈空间分配区别： 　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值， 　　局部变量的值等。其操作方式类似于数据结构中的栈； 　　2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 　　 若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

  注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈的目的方便理解

为什么会有堆内存和栈内存之分

首先 JavaScript 中的变量分为基本类型和引用类型。

基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。

1 、基本类型

基本类型有 Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。

2 、引用类型

引用类型，值大小不固定，栈内存中存放地址指向堆内存中的对象。是按引用访问的。如下图所示：栈内存中存放的只是该对象的访问地址， 在堆内存中为这个值分配空间 。 由于这种值的大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。 这样，当查询引用类型的变量时， 先从栈中读取内存地址， 然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问。

PS：当我们看到一个变量类型是已知的，就分配在栈里面，比如INT,Double等。其他未知的类型，比如自定义的类型，因为系统不知道需要多大，所以程序自己申请，这样就分配在堆里面。

为什么会有栈内存和堆内存之分：

通常与垃圾回收机制有关。为了使程序运行时占用的内存最小。

当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；

当我们在程序中创建一个对象时，这个对象将被保存到运行时数据区中，以便反复利用（因为对象的创建成本通常较大），这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。