JS基础

整理自黑马Pink前端的课程资料；
算是入门第一步；
后续有时间的话，再看看书，多了解了解

7. 运算符（操作符）

浮点数的精度问题

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

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

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

8. 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程
断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

标识符命名规范

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

9. 数组

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

  • 利用 new 创建数组

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

    注意 Array () ，A 要大写

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

    //1. 使用数组字面量方式创建空的数组
    var  数组名 = []；
    //2. 使用数组字面量方式创建带初始值的数组
    var  数组名 = ['小白','小黑','大黄','瑞奇'];
    • **数组的字面量是方括号 [ ] **
    • 声明数组并赋值称为数组的初始化
    • 这种字面量方式也是我们以后最多使用的方式

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

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

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

  • 数组的长度
    数组的长度：默认情况下表示数组中元素的个数
    使用“数组名.length”可以访问数组元素的数量（数组长度）。

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

    注意：

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

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

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

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

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

10. 函数

// 声明函数
function 函数名() {
    //函数体代码
}

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

  • 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

    调用函数

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

    arguments的使用

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

  • 具有 length 属性

  • 按索引方式储存数据

  • 不具有数组的 push , pop 等方法
    注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

函数案例

函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行。

函数的两种声明方式

  • 自定义函数方式(命名函数)
    利用函数关键字 function 自定义函数方式

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

  • 函数表达式方式(匿名函数）
    **利用函数表达式方式的写法如下： **

    // 这是函数表达式写法，匿名函数后面跟分号结束
    var fn = function(){...}；
    // 调用的方式，函数调用必须写到函数体下面
    fn();
    • 因为函数没有名字，所以也被称为匿名函数
    • **这个fn 里面存储的是一个函数 **
    • 函数表达式方式原理跟声明变量方式是一致的
    • 函数调用的代码必须写到函数体后面

10 - 作用域

1.1 作用域概述

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

JavaScript（es6前）中的作用域有两种：

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

1.2 全局作用域

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

1.3 局部作用域

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

1.4 jS没有块级作用域

  • 块作用域由 { } 包括。
  • 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用；
    js中没有块级作用域（在ES6之前）
    if(true){
      var num = 123;
      //console.log(num); //123
    }
    console.log(num);   //123

1.5 变量的作用域

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

2.1 全局变量

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

2.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

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

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

1.6 - 作用域链

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

案例分析1：
function f1() {
    var num = 123;
    function f2() {
        console.log( num );//123
    }
    f2();
}
var num = 456;
f1();
作用域链：采取就近原则的方式来查找变量最终的值
var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 4
            console.log(b); //b的值 22
        }
    }
}
fn1();

1.7 - 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：

预解析和代码执行。

  • 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义，预解析也叫做变量、函数提升。
  • 代码执行： 从上到下执行JS语句。
    注意：****预解析会把变量和函数的声明在代码执行之前执行完成。

变量预解析：

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

console.log(num);  // undefined
var num = 10;
//注意：变量提升只提升声明，不提升赋值

函数预解析：

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

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

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

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

函数表达式声明函数问题：

函数表达式创建函数，会执行变量提升

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

结果：报错提示 ”fn is not a function”

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