前端开发(2)-JavaScript入门与提高1

发表于
字数统计 1.8k | 阅读时长 6

系列课程地址：戳这里。
系列课程共分为三部分：阶段 1：HTML+CSS；阶段 2：JavaScript；阶段 3：开发工具；阶段 4：前端框架；阶段 5：移动及服务端开发。
这里介绍阶段 2：JavaScript，此部分涉及许多计算机及编程基础知识，这里略过不做记录，只记录之前用的比较少的部分。

断点调试

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

断点调试可以帮我们观察程序的运行过程

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

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

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

do while循环

do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

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

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

执行顺序：

①先执行一次循环体代码

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

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

continue和 break

continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个。

break关键字

break关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃。

数组

数组创建

利用数组字面量创建数组 

1
2
3
4
//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组长度

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

筛选数组案例

要求：将数组 [2, 0,
6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。

1
2
3
4
5
6
7
8
9
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 索引号直接用newArr.length
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

函数形参和实参个数匹配

函数返回值

  1. return 语句之后的代码不被执行。、

  2. return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

  3. return若要返回多个值，采取数组等方法。

  4. 函数都是有返回值的

    1）如果有return 则返回 return 后面的值；

    2）如果没有return 则返回 undefined ；

    • break ：结束当前的循环体（如 for、while）

    • continue ：跳出本次循环，继续执行下次循环（如 for、while）

    • return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  • 具有 length 属性
  • 按索引方式储存数据
  • 不具有数组的 push , pop 等方法
1
2
3
4
5
6
7
8
9
10
11
function maxValue() {
      var max = arguments[0];
      for (var i = 0; i < arguments.length; i++) {
         if (max < arguments[i]) {
                    max = arguments[i];
         }
      }
      return max;
}
 console.log(maxValue(2, 4, 5, 9));
 console.log(maxValue(12, 4, 9));

函数两种声明方式

  1. 自定义函数方式（命名函数）

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

    1
    2
    3
    4
    // 声明定义方式
    function fn() {...}
    // 调用  
    fn();

  2. 函数表达式方式 （匿名函数）

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

变量分类

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

  1. 全局变量

    全局变量在代码的任何位置都可以使用。只有在浏览器关闭时才会被销毁，因此比较占内存。

    • 在全局作用域下 var 声明的变量，是全局变量
    • 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

  2. 局部变量

    局部变量只能在该函数内部使用。当代码块运行结束后，就会被销毁，因此更节省内存空间。

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

预解析

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

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

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

预解析只会发生在通过 var 定义的变量和 function 上。

变量预解析（变量提升）

变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

函数预解析（函数提升）

函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

1
2
3
4
5
6
7
8
9
10
11
// 经典案例，下面结果是什么？
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

按照预解析规则解析以及按照作用域规则执行后，相当于执行以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function f1() {
    var a;
    a = b = c = 9;
    // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var声明 当全局变量看，只有a进行了声明，为局部变量。
    // 集体声明  var a = 9, b = 9, c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
1
先执行函数内的三个console.log，输出9，9，9，再执行函数外的三个console.log，输出9，9，报错（a为局部变量，全局未定义）。

注：转载文章请注明出处，谢谢~