持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

简单类型与复杂类型

简单类型又称为值类型,复杂类型又叫做引用类型，下面略微说下两者的区别

值类型,在存储的时候变量存储的是值本身

如 string number Boolean undefined null，它们的内存中存储的是准确的值
引用类型, 在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型

通过new创建的,如Object Array Date等

1. 堆和栈

栈(操作系统)stack : 由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型

堆(操作系统) : 存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型

注意： JavaScript中没有堆栈的概念，通过堆栈的方式，更容易理解代码的一些执行方式，便于将来学习其他语言

2. 简单类型的内存分配

值类型：直接放在变量（栈空间）中

3. 复杂类型的内存分配

（其栈空间）变量里存放的是地址，真正的对象实例放在堆空间

4. 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

5. 复杂类型传参

当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

下面有个例子，大家可以看看应该会输出什么

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 1. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 2. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 3. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?

1. 流程控制

三种结构
1. 顺序结构(最基本\最简单的)
2. 分支结构
3. 循环结构

2. 分支结构

2.1 if语句

if (条件表达式) {
    // 条件成立执行的代码语句
}

2.1.1 if else

if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码

2.1.2 三元表达式

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

2.2 switch

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

小例子:

①弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。

②将这个变量作为 switch 括号里面的表达式。

③case 后面的值写几个不同的水果名称，注意一定要加引号，因为必须是全等匹配。

④弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。

⑤将 default 设置为没有此水果。

var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}

3. 循环结构

3.1 for

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

断点调试

当不知道程序bug出现在哪里时，可以通过断点测试排除区域

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

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。

F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

3.2 while

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

3.3 do while

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

3.4 continue break

如同C语言中一样，两者都可在不执行下面语句的情况下跳出循环，只是continue用于跳出后进行下一次循环，而break直接停止循环，不再执行下面的循环体

【前端三剑客——JS】数据类型加流程结构