javascript学习笔记——数组，函数，作用域，对象

二、JavaScript数组

  1. 数组：数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存放在单个变量名下的方式。

  2. 数组创建的方式：

    • 利用new创建数组
      1
      2
      var 数组名=new Array();
      var arr=new Array();   //创建一个空的新数组
    • 利用数组字面量创建数组
      1
      2
      3
      4
      //1.利用数组字面量的方式创建数组
      var 数组名=[];
      //2.利用数组字面量的方式创建带初始值的数组
      var 数组名=['小白','小黑','大黄'];

  3. 获取数组元素:

    • 数组索的引
      • 索引：用来访问数组元素的序号（数组下标从0开始）
      • 数组可以通过索引访问、修改、设置对应的数组元素。
    • 数组的长度：使用“数组名.length”可以访问数组元素的数量（数组长度）

  4. 数组中新增元素

    • 通过修改length长度新增数组元素
    • 通过修改数组索引新增数组元素
      • 可以通过修改数组索引的方式追加数组元素
      • 不能直接给数组名赋值，否则会覆盖掉以前的数据。

  5. 冒泡排序

JavaScript中的函数

  1. 函数就是封装了一段可以被重复调用执行调用的代码块。 目的就是让大量代码重复使用
  2. 声明函数(命名函数)，函数不调用，自己不执行
    1
    2
    3
    function 函数名(){
        //函数体
    }
  3. 调用函数 
    1
    函数名();   //通过调用函数名来执行函数体代码
  4. 利用函数的参数实现函数重复不同的代码
    1
    2
    3
    4
    5
    function 函数名(形参1,形参2....)
    {

    }
    函数名(实参1,实参2...);
  5. 函数的返回值
    • 函数只是实现基本的功能，最终的结果需要返回给函数调用者。
    • 只要函数遇见 return 就把后面的结果返回给调用者。
      1
      2
      3
      function 函数名(){
         return 需要返回的结果;
      }
    • return终止函数：return后面的代码不会被执行！
    • return只能返回一个值，若以逗号隔开，则只返回以最后一个值为准。
    • 函数若存在return则返回return后面的值，若函数没有return则返回undefined
    • break、continue、return的区别
      • break:结束当前的循环体（如for,while）
      • continue:跳出本次循环，继续执行下次循环（如for,while）
      • return:不仅能够退出循环，还能返回return语句中的值，同时还可以结束当前函数体中的代码
  6. arguments的使用
    • 当我们不确定有多少个参数传递时，可以用arguments来获取。arguments实际上是当前函数的一个内置对象。
    • 所有函数都内置一个arguments对象，arguments对象中存储了传递的所有参数。
    • arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：
      • 具有length属性
      • 按索引方式进行存储
      • 不具有数组的push()和pop()方法
  7. 函数的另一种声明方式(匿名函数) 
    1
    2
    3
    4
    5
    var 变量名= function(){};

    var fun=function (){
        console.log("我是函数表达式~");
    }
    • fun是变量名不是函数名
    • 函数表法式申明方式跟声明变量差不多，只不过变量里面存的是值，函数表达式里面存的是函数

三、JavaScript中的作用域

  1. 作用域
    • 通常来说，一段程序代码中所用到的名字并不总是有效可用的，而限定这个名字可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
    • 也可理解为：代码名字（变量）在某个范围内起作用和效果
    • JS的作用域（es6之前）：全局作用域和局部作用域
      • 在es6中新增块级作用域
    • 全局作用域：整个script标签 或者是一个单独的js文件
    • 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
  2. 变量作用域的分类
    • 全局变量：在全局作用域下的变量 在全局下都可以使用。
      • 注：如果在函数内部没有申明，直接赋值的变量也属于全局变量。
        1
        2
        3
        4
        5
        6
                  function fn(){
        	var num=30;
        	num2=200;
        }
        fn();
        console.log(num2);  //将会输出200
    • 局部变量： 在局部作用域下的变量，或者是在函数内部的变量。函数的形参也可看做局部变量
    • 从执行效率来对比全局变量与局部变量
      • 全局变量只有当浏览器关闭的时候才会销毁，比较占内存资源。
      • 局部变量 当程序执行结束就会销毁，比较节约内存资源
  3. 作用域链
    • 根据内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

四、JavaScript预解析*

  1. 几种不同的输出结果 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
          //1.直接输出
    console.log(num);  //num is not defined
    //2. 输出在前，定义在后
    	 console.log(num);
    	 var num=10;    // 输出 undefined
    // 3.命名函数
    	 fun();
    	 function fun(){
    		 console.log(11);  //输出11
    	 }
     //4. 使用匿名函数
    	 fuc();
    	 var fuc=function(){
    		 console.log(11);  //fuc is not a function
     		 }
  2. javascript代码又浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码时分为两步：预解析和代码执行。
    • 预解析：JS引擎会把js里面所有的var还有function提升到当前作用域的最前面
    • 代码执行：按照代码书写的顺序从上往下执行
  3. 预解析分为 变量预解析（变量提升）函数预解析（函数提升）
    • 变量提升： 就是把变量声明提升到当前作用域的最前面， 不提升赋值操作。
    • 函数提升：就是把所有的函数声明提升到当前作用于的最前面， 不调用函数。
      1
      2
      3
      4
      5
      6
      7
              var num=10;
      fun();
      function fun(){
      	console.log(num);
      	var num=10;
      }
               //执行结果输出undefined
    • 另外一种结合了如果在函数内部没有申明，直接赋值的变量也属于全局变量
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
               fun();
      console.log(c);
      console.log(b);
      console.log(a);
      function fun(){
      	var a=b=c=10;
      	console.log(a);
      	console.log(b);
      	console.log(c);
      }
               //会输出5个10，最后一个a为未定义  （a is not defined）

五、JavaScript对象

  1. 对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。

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

  2. 创建对象的三种方式

    • 利用字面量创建对象
    • 利用new Object创建对象
    • 利用构造函数创建对象

  3. 利用字面量创建对象

    • 对象字面量：是‘{}’，里面包含了表达合格具体事物（对象）的属性和方法
    • 里面的属性和方法采取键值对的形式 ， 键——属性名：值——属性值(数字类型、字符串类型、布尔类型、函数类型)。
    • 方法后面跟着匿名函数
    • 使用对象**
      • 调用对象的属性，采用 对象名.属性名 
        1
        console.log(obj.name);
      • 另外一种方法为 对象名['属性名']
        1
        console.log(obj['name']);
      • 调用对象的方法 对象名.方法名(); 
        1
        obj.func();

  4. 利用 new Object 来创建对象

    • 创建空对象，追加属性
      1
      2
      3
      4
      5
      6
      var obj=new Object();
      obj.uname="fanda";
      obj.age=19;
      obj.func=function(){
          console.log("创建方法");
      }

  5. 利用构造函数创建对象

    • 因为前面两种创建对象的方式一次只能创建一个对象.
    • 构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
    • 构造函数的语法格式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      function 构造函数名(){
          this.属性=值;
          this.方法=function(){};
      }
      new 构造函数名();

      //构造函数的函数名首字母要大写
      function Star(uname,age,sex){
          this.name=uname;
          this.age=age;
          this.sex=sex;
      }
      var ldh=new Star('刘德华',43,'男');  //构造函数不需要return就可以返回结果
      var zxy=new Star('张学友',56,'男');

  6. 构造函数与对象

    • 构造函数：抽象了对象的公共部分，封装到函数里面，它泛指某一大类。
    • 创建对象：特指某一个，通过new关键字创建对象的过程也称为对象的实例化。

  7. new关键字执行过程

    • new构建函数可以在内存中创建一个空的对象
    • this就会指向刚才创建的空对象
    • 执行构造函数里面的代码，给这个空对象添加属性和方法
    • 返回这个对象

  8. 对象的遍历

    • for...in 用于对数组或者对象的属性进行循环遍历
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // for(变量 in 对象){ }
      var obj={
          uname:'fanda';
          age:21;
          sex:'男'
      }
      for(var k in obj)
      {
          console.log(k);   //输出得到属性名
          console.log(obj[k]);  // 输出得到属性值
      }