美文网首页
js进阶(二)

js进阶(二)

作者: believedream | 来源:发表于2017-02-03 18:50 被阅读0次

    第十二天

    04-基础进阶-第02天{对象进阶、内置对象}

    对象

    工厂模式创建对象

    • 工厂模式:即在函数中创建对象时,所有属性使用参数传递进来

    • 工厂模式创建出来的对象使用typeof打印出来的全是object

      function Student(name,age,sex,score){
          var stu = new Object();
          stu.name = name;
          stu.age = age;
          stu.sex = sex;
          stu.score = score;
          stu.sayHi = function(){
              console.log("我叫"+this.name+"今年"+this.age+"岁");
          }
          return stu;
      }
      
      var stu1 = new Student("zs",18,1,100);
      var stu2 = new Student("ls",20,2,99);
      var stu3 = new Student("ww",22,1,80);
      
      console.log(typeof stu1);// object
      console.log(typeof stu2);// object
      console.log(typeof stu3);// object
      console.log(stu1 instanceof Student); // false
      console.log(stu2 instanceof Student); // false
      console.log(stu3 instanceof Student); // false
      
      

    构造函数模式创建对象

    • 原理:使用this关键字改变对象归属

      function Student(name,age,sex,score){
          this.name = name;
          this.age = age;
          this.sex = sex;
          this.score = score;
          this.sayHi = function(){
              console.log("我叫"+this.name+"今年"+this.age+"岁");
          }
      }
      
      var stu1 = new Student("zs",18,1,100);
      console.log(typeof stu1); // object
      console.log(stu1 instanceof Student); // true
      
      

    原型模式创建对象

    原型属性

    • prototype:是构造函数的原型属性。将属性或方法绑定到构造函数的prototype上后,将来通过构造函数创建的对象都有这个属性或方法

      function Student(name,age,sex,score){
          this.name = name;
          this.age = age;
          this.sex = sex;
          this.score = score;
      }
      Student.prototype.sayHi = function(){
          console.log("我叫"+this.name+"今年"+this.age+"岁");
      }
      
      var stu1 = new Student("zs",18,1,100);
      var stu2 = new Student("zs",18,1,100);
      console.log(stu1.sayHi === stu2.sayHi);// true
      
      
    • 使用:一般通过原型属性绑定公共的方法和属性

    • __proto__:是对象的原型属性。

    • 对象的原型属性__proto__指向构造函数的原型属性prototype

      console.log(stu1.__proto__ === Student.prototype); // true
      
      

    值类型&引用类型

    • 值类型:值类型其实就是基本数据类型,在内存中直接存储值

      string number boolean undefined null
      
      
    • 引用类型:引用类型其实就是复杂数据类型,在内存中存储引用,主要就是Object

    值类型作参数

    • 值类型作参数不会改变原始数据

      function fn(a,b){
          a = a+1;
          b = b+1;
          console.log(a); // 2
          console.log(b); // 3
      }
      var x = 1;
      var y = 2;
      fn(x,y);
      console.log(x); // 1
      console.log(y); // 2
      
      

    引用类型作参数

    • 引用类型作参数因为拷贝的是栈中的地址,而地址指向堆中的同一个空间,所以会改变堆中的数据

      function Person(name,age){
          this.name = name;
          this.age = age;
      }
      function f2(p){
          p.name = "ww";
          console.log(p.name);// ww
      }
      var p2 = new Person("zs",18);
      f2(p2);
      console.log(p2.name); // ww
      
      

    数组

    复制数组

    // 深层复制
    function deepClone(arr){
        var newArr = [];
        for(var i =0;i<arr.length;i++){
            newArr[newArr.length] = arr[i];
        }
        return newArr;
    }
    
    var arr1 = [1,2,3];
    var arr2 = deepClone(arr1);
    arr2[0] = 100;
    console.log(arr1);// [1,2,3] 不影响原始数组
    console.log(arr2);// [100,2,3]
    
    

    增删

    var arr = [1,2,3];
    arr.push(0); // 从后面加入 [1,2,3,0] 返回新数组的长度
    arr.unshift(0);// 从前面添加 [0,1,2,3] 返回新数组的长度
    arr.pop();// 从后面删除 [1,2] 返回删除的元素
    arr.shift();// 从前面删除 [2,3] 返回删除的元素
    
    

    字符串分隔数组

    // 数组join方法实现原理
    function join(arr,sep){
        var str = arr[0];
        for(var i=0;i<arr.length;i++){
            str = str + sep + arr[i];
        }
        retrun str;
    }
    
    

    翻转数组

    // 数组reverse方法实现原理
    function reverse(arr){
        for(var i=0;i<arr.length/2;i++){
            var temp = arr[i];
            arr[i] = arr[arr.length-1-i];
            arr[arr.length-1-i] = temp;
        }
        return arr;
    }
    
    

    数组过滤filter

    • 配合回调函数使用

      var arr = [1000,2500,1500,2000,3000];
      arr.filter(function(element,index,arr){
          if(element > 2000){
              return false; // 删除元素
          }else{
              return true; // 保留元素
          }
      });
      
      

    数组索引indexOf

    var arr = [1,2,3,1,3,2];
    console.log(arr.indexOf(2));// 0 从左往右找某元素第一次出现的位置 返回位置索引
    console.log(arr.lastIndexOf(1)); // 3 从左往右找某元素最后一次出现的位置 返回位置索引
    
    

    获取数组中某个元素每次出现的位置

    var arr = ["c","a","z","a","x","a"];
    var index = -1;
    do{
        index = arr.indexOf("a",index + 1);
        if(index != -1){
            console.log(index);// 1 3 5 
        }
    }while(index != -1);
    
    

    获取数组中每个元素出现的次数

    var arr = ["c","a","z","a","x","a"];
    var o = {};
    for(var i=0;i<arr.length;i++){
        var item = arr[i];
        if(o[item]){// 能进来说明 对象中有这个值
            o[item]++; // 每出现一次 加一次
        }else{
            // 说明对象中没有 第一次出现
            o[item] = 1;
        }
    }
    
    

    截取数组

    var arr = [0,1,2,3,4,5];
    arr.slice(1,3);// [1,2,3] 参数 [start,end) 从start开始截取到end 包括start 返回新数组
    
    arr.splice(0,2);// [0,1] 参数 start 个数 从原数组中删除符合要求的元素 返回这些元素组成的数组
    
    

    遍历数组forEach

    var arr = [1,2,3,4,5];
    arr.forEach(function(element,index,array){
        console.log(element);// 1 2 3 4 5
    });
    
    

    相关文章

      网友评论

          本文标题:js进阶(二)

          本文链接:https://www.haomeiwen.com/subject/qaidittx.html