2018-04-22

javascript基础

一.函数的arguments

  • 伪数组:像数组,但不是数组
  • 可以动态添加参数
 //求任意个数的最大值
     function fn(){
         var max = arguments[0];
         for(var i = 1;i< arguments[i];i++){
             if(max < arguments[i]){
                 max = arguments[i]
             }
         }
         return max;
     }
     var max = fn(12,34,56,890);
     console.log(max);

二.函数的其他案例

   // 翻转数组 reserve(翻转)
     function fn(arr){
     var newArray = [];
     for(var i = arr.length-1; i >= 0; i--){
         newArray[newArray.length] = arr[i];
     }
     return newArray;
     }
     var arr1 = [12,34,56,1];
     var newArray = fn(arr1);
     console.log(newArray);

    // 翻转数组的方法 reverse()
     var arr1 = [12,34,56,1]
     console.log(arr1.reverse());

     // 数组的冒泡排序的原理?
     // 数组的两两比较把大值依次往后挪
     // 外层循环一次取出比较值中的最大值一次,最后冒泡排序完成
     // 注意做个开关提高效率  
     function getMp(arr){
         var isSort;
         for(var i = 0;i < arr.length-1;i++){
             isSort = true;
             for(var j = 0; j < arr.length-1-i;j++){
                 if(arr[j] > arr[j+1]){
                     isSort = false; //还没有排序好,false
                     var temp = arr[j];
                     arr[j] = arr[j+1];
                     arr[j+1] = temp;
                 }
             }
             //定义一个开关,如果true,跳出循环
             if(isSort){
                 break;
             }
         }
         return arr;
     }
     var arr = [12,23,190,89];
     var le = getMp(arr);
     console.log(le);*/

     // var arr = [12,23,190,89];
     // console.log(arr.sort()); //错误

     // 输入年份是否是闰年
     function getYear(year){
         var flag;
             if(year % 4 ===0 && year % 100 !==0 || year % 400 ===0){
                 console.log(year+'是闰年');
                 flag = true;
             } else{
                 console.log(year+'是平年');
                 flag = false;
             }
             return flag;
         }
         getYear(2016);

    //闰年2
     function fn(year){
         var flag = false;
         if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
             console.log(year+'是闰年');
             flag = true;
         } else {
             console.log(year+'是平年');
         }
         return flag;
     }
     fn(1998);

     //获取年月日 是当前年的多少天,中的难点是比如传入的是5月遍历1-5月天数累加
     //一、三、五、七、八、十、腊是31天,四、六、九、十一是30天。平年二月28闰年二月29天
     function getDate(year,month,day){
         var days = day;
         for(var i = 1;i

三.匿名函数和自调用函数

  • 匿名函数:没有方法名的函数

    注意点:

    1. 不可以独立存在 :只能定义变量等于函数
     var vvv = function(){  
     }
    
    1. 可以通过自调用函数:自己调用自己
  • 自调用函数: 自己调用自己;

      (function (){})();
      +function (){}();
      -function (){}();
      *function (){}();
      /function (){}();
    

四.作用域和作用域链

  • 作用域

    函数或者变量可以起作用访问;
    1.全局作用域:
    在script或者一个独立的js文件中,在全局作用域中定义的变量 全局变量。在任何位置都可以访问.
    2.局部作用域:
    任何一个函数的内部都有一个局部作用域,在局部作用域中定义的变量 局部变量。局部变量只有在定义该变量的函数中可以访问

      // 全局变量
      var a = 10;
      function fn(){
          // 局部变量
          var b = 10;
          //全局变量 ==> window.c = 30,但是不推荐这样使用
          c = 30;
          console.log(a); // 10
          console.log(c); // 30
          console.log(b); // 10
      }
      fn();
      console.log(c) // 30
      console.log(a); // 10
      console.log(b); // b is not defined
  • 作用域链

就近原则

    // 全局变量
     var a = 10; //----->0级作用域链
     function fn(){
          // 局部变量
         var a = 20; //----->1级作用域链
         console.log(a); // 20
        function fn1(){
            // 局部变量  //----->2级作用域链
             console.log(a) // 20
         }
         fn1();
     }
     fn();
     console.log(a); // 10

五.预解析

  • 函数提升:但是赋值不提升
  • 变量提升:调用不提升
  • 函数和变量同时存在,函数优先
  案例:
  // 1.
  var a = 25;
          function abc (){
              alert(a); //undefined
              var a = 10;
          }
          abc(); 
   //预解析
      function abc(){
          var a;
          alert(a); //undefined
          a = 10;
      }
      var a;
      a = 25;
      abc(); // 调用函数而已

   //----------
   // 2.
   console.log(a); //打印函数a
          function a() {
            console.log('aaaaa');
          }
          var a = 1;
          console.log(a);

          // 解析
          var a;
          function a() {
            console.log('aaaaa');
          }
          console.log(a); // 函数整体
          a = 1;
          console.log(a); // 1

          //-------
          var a = 18;
          f1();
          function f1() {
              var b = 9;
              console.log(a);
              console.log(b);
              var a = '123';
          }

          // 解析 
          var a;
          function f1() {
              var b = 9;
              var a;
              console.log(a); //undefined
              console.log(b); // 9
              a = '123';
          }
          a = 18;
          f1();

六.对象概念

  1. 万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。
  2. js中对象的语法格式
      var student = {
      name: '张飞', // key: value,
      age: 18,
      sex: '男',
      sayHi: function () {
          console.log('hello');
      }
      };
      // 对象 具有  属性和方法
      // 属性: 特征
      // 方法: 行为

七.创建对象

  1. 对象字面量
 var obj = {
     name:'zs',
     age: 18,
     sayHi:function(){
         console.log(obj.name+'hello');
     } 
 }
 console.log(obj);
  1. 用new Object 获取对象
     var obj = new Object;
     obj.name = 'keke';
     obj.age = 21;
     obj.sex = '女';
     obj.sayHi = function(){
         console.log(obj.name+'hello');
     }
     console.log(obj)
  1. 当有多个对象就需要封装函数-->工厂方法
      function Creatstudent(name,age,sex,hobby){
          var obj = new Object;
          obj.name = name;
          obj.age = age;
          obj.sex = sex;
          obj.hobby = hobby;
          obj.sayHi = function(){
              console.log(this.name+'hello');
          }
          return obj;
      }
      var stu1 = Creatstudent('张三',18,'男',['唱歌','跳舞','旅游']);
      var stu2 = Creatstudent('李四',22,'男',['唱歌','摄影','旅游']);
      console.log(stu1);
      console.log(stu2);
      stu1.sayHi();
      stu2.sayHi();
  1. 构造函数 函数名的第一个字母要大写(帕斯卡命名)
  function Student(name,age,sex,hobby){
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.hobby = hobby;
      this.sayHi = function(){
          console.log(this.name+'hello');
      }
  }
  var stu1 = new Student('张三',18,'男',['唱歌','跳舞','旅游']);
  var stu2 = new Student('李四',22,'女',['绘画','跳舞','旅游']);
  console.log(stu1);
  stu1.sayHi();
  console.log(stu2);
  stu2.sayHi();

八.new

  1. 创建一个空的对象Object;{}
  2. 让构造函数中的this指向当前对象
  3. 执行构造函数
  4. 返回这个对象(return);

九.this

  1. 在函数中 -----> 指向winndow;
     function fn(){
         console.log(this); //window
     }
     fn();
  1. 在方法中 -----> 指向当前方法创建的对象;
     var stu = {
     name:'keke',
     age:18,
     sex:'男',
     sayHi:function(){
         console.log(this.name+'hello');
         console.log(this); //stu这个方法,包括里面所有的内容
     }
     }
     console.log(stu);
     stu.sayHi();
  1. 在构造函数中 -----> 指向构造函数创建的对象;
  function Student(name,age,sex){
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.sayHi = function(){
          console.log(this.name+':hello');
          console.log(this); // Student 这构造函数创建的方法
      }
  }
  var stu1 = new Student('张三',18,'男');
  console.log(stu1);
  stu1.sayHi();

十.遍历对象和删除对象

 // 1.遍历对象
 // 访问对象的属性: obj.name / obj['name']
       var obj = {
           name: 'keke',
           age: 18,
           sex: '男',
           sayHi: function(){
               console.log(this.name+':hello');
           }
       }
       console.log(stu);
  // for in
       for(var key in obj){
           console.log(key+'----->'+obj[key]);
       }

  // 动态添加对象
       var kk = {};
       for(var i = 0;i < 7; i++){
           kk['a'+i] = i;
       }
       console.log(kk);

       for(var key in kk){
           console.log(key+':'+kk[key]);
       }

  // 删除对象
       var obj = {
           name: 'keke',
           age: 18,
           sex: '女',
           sayHi: function(){
               console.log(this.name+':hello');
           }
       }
       console.log(obj);
       delete obj.name; //删除对象
       console.log(obj);
       delete obj.sayHi; //删除方法
       console.log(obj);

你可能感兴趣的:(2018-04-22)