js进阶（二）

第十二天

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

• 第十二天
  • 对象
    • 工厂模式创建对象
    • 构造函数模式创建对象
    • 原型模式创建对象
      • 原型属性
  • 值类型&引用类型
    • 值类型作参数
    • 引用类型作参数
  • 数组
    • 复制数组
    • 增删
    • 字符串分隔数组
    • 翻转数组
    • 数组过滤filter
    • 数组索引indexOf
      • 获取数组中某个元素每次出现的位置
      • 获取数组中每个元素出现的次数
    • 截取数组
    • 遍历数组forEach

对象

工厂模式创建对象

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

• 工厂模式创建出来的对象使用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

增删

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

翻转数组

// 数组reverse方法实现原理
function reverse(arr){
    for(var i=0;i

数组过滤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

截取数组

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
});