『笔记』JavaScript基础学习笔记 3
Brains - 灵感乌托邦

『笔记』JavaScript基础学习笔记 3

六六丶
2021-11-01 / 0 评论 / 2,206 阅读 / 正在检测是否收录...
广告

this

解析器(浏览器)在调用函数时每次都会向函数内部传递进一个隐含的参数

1、this的定义

function fun(){
  //console.log("a=" +a+",b="+b);
  console.log(this.name);
}
fun();//输出object.window

//创建一个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//console.log(obj.sayName == fun);//输出true

var name = "全局的name属性"
obj.sayName();//输出object.object   [name:"孙悟空",sayName:fun]
//以函数形式调用,this时window
fun();
//以方法的形式调用,this是调用方法的对象
obj.sayName();
obj2.sayName();

2、this补充

//创建一个name变量
var name = "全局";

//创建一个fun()函数
function fun(){
  console.log(this.name);
}

//创建两个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//调用obj.sayName()时输出obj的名字
obj.sayName();//输出 孙悟空
obj2.sayName();//输出 沙和尚

对象

1、使用工厂方法创建对象

可以使用该方法大批量创建对象

使用工厂方法创建的对象使用的构造函数都是Object

所以创建的对象都是Object类型,导致无法区分出多种不同类型的对象

function createPerson(name,age,gender){
  //创建一个新的对象
  var obj = new Object();
  //向对象中添加属性
  obj.name = name;
  obj.age = age;
  obj.gender = gender;
  obj.sayName = function(){
    alert(this.name);
  }
  
  //将新的对象返回
  return obj;
}
var obj2 = createPerson("猪八戒",18,"男");
var obj3 = createPerson("白骨精",17,"女");
var obj4 = createPerson("蜘蛛精",16,"女");

console.log(obj2);
console.log(obj3);
console.log(obj4);
obj2.sayName();

2、构造函数

构造函数的执行流程:

使用同一个构造函数创建的对象,称为一类对象,也将构造函数称为一个类

使用instanceof可以检查一个对象是否是一个类的实例

语法: 对象 instanceof 构造函数

//创建一个构造函数,专门用来创建Person对象
var per = new Person();
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayNmae = function(){
    alert(this.name);
  };
}

var per = new Person("孙悟空",18,"男")
var per = new Person("玉兔精",17,"女")

console.log(per);

console.log(per instanceof Person);

this的情况:

3、构造函数修改

在Person构造函数中,为每一个对象都添加了一个sayName方法

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = function(){
    alert("Hello大家好,我是:"+this.name);
  };
}
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();
  • 方法是在构造函数内部创建的,构造函数每执行一次就会创建一个新的sayName方法, 也就是所有实例的sayName都是唯一的
  • 会导致构造函数每执行一次就会创建一个新的方法

可以将将sayName方法在全局作用域中定义(尽量不要将函数定义在全局作用域)

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = fun;
  };
}
//将sayName方法在全局作用域中定义
function fun(){
    alert("Hello大家好,我是:"+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();

4、原型对象

原型 prototype

创建的每一个函数,解析器都会向函数中添加一个属性prototype

kvhut6qq.png

function MyClass(){
  
}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
  alert("hello");
};

var mc = new MyClass();

console.log(MyClass.prototype);
console.log(mc.__proto__ == MyClass.prototype);//输出true
console.log(mc.a);//输出123
//向mc中添加a属性
mc.a = "我是mc中的a";
console.log(mc.a);//输出 我是mc中的a

mc.sayHello();//输出 弹窗hello

kvhvk7mj.png

创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中

这样不用分别为每一个对象添加,就可以使每个对象都具有这些属性和方法,也不会影响到全局作用域

例:

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向中添加一个方法
  // this.sayName = fun;
  };
}
//向原型中添加sayName方法
Person.prototype.sayName = function(){
    alert("Hello大家好,我是:"+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName(); // 输出弹窗

补充:

//创建一个构造函数
function MyClass(){
  
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的name";

var mc = new MyClass();
console.log(mc.name);
//使用in检查对象中是否含有某个属性时,如果对象中没有单数原型中有,也会返回true
console.log("name" in mc); //输出 true
//可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性
//使用该方法只有当对象自身含有该属性时才会返回true
console.log(mc.hasOwnProperty("name"));//返回false
console.log(mc.hasOwnProperty("hasOwnProperty"));//返回false
console.log(mc.__protp__.hasOwnProperty("hasOwnProperty"));//输出false
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出true

5、toString

function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
}

//修改Person原型中的toString
Person.prototype.toString = function(){
  return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
};

//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");

//console.log(per);
//console.log(per.toString);//与上面相同
/*输出Person[name=孙悟空,age=18,gender=男]
per.toString = function(){
  return "Person[name="+this.name",age="+this.age",gender="+this.gender"]"
}; */

var result = per.toString();
//console.log("result = "+result);
//console.log(per.__pro__.__pro__.hasOwnProperty("toString"));//返回true

console.log(per);
console.log(per2);

6、垃圾回收(GC)

  1. 当一个对象没有任何的变量或者属性对它进行引用时,将永远无法操作该对象,此时这种对象就是一个垃圾
  2. 这种对象过多会占用大量的内存空间,导致程序运行过慢,所以这种垃圾必须进行清理

kvqcs2sd.png

//创建一个对象
var obj = new Object();
//对对象进行各种操作。。。。
obj = null;

{nextPage/}

内建对象

对象的类型:内建对象、宿主对象、自定义对象

一、数组

1、数组(Array)的简介

  • 向数组中添加元素,语法: 数组[索引] = 值
  • 读取数组中的元素,语法: 数组[索引]
  • //创建数组对象
    var arr = new Array();
    //使用typeof检查一个数组时,会返回Object
    console.log(typeof arr);
    //向数组中添加元素
    arr[0] = 10;
    arr[1] = 33;
    arr[2] = 22;
    arr[3] = 25;
    //arr[10] = 21;
    //arr[100] = 210;
    //console.log(arr[3]);//输出undefined
    //获取数组的长度
    console.log(arr.length);
    console.log(arr);
    
    //修改length
    /* 如果修改的length大于原长度,则会空出多出的元素
    如果修改的length小于原长度,则会删除多出的元素
    */
    //arr[10] = 21;
    arr[2] = 22;
    
    //向数组的最后一个位置添加元素
    arr[arr.length] = 20;
    
    console.log(arr.length);
    console.log(arr);

    2、数组字面量

    使用字面量来创建数组,语法:[]

    //var arr = new Array();
    /* 无意义
    arr[0] = 123;
    arr.hello = "abc";
    console.log(arr.hello);
    */
    //使用字面量来创建数组
    //var arr = [];
    var arr = [1,2,3,4,5,6,10];
    
    console.log(arr[1]);
    console.log(arr.length);
    
    var arr = new Array(10,20,30);
    console.log(arr2);
    
    //创建一个数组中只有一个元素10
    arr = [10];
    
    //创建一个长度为10的数组
    arr2 = new Array(10);
    
    console.log(arr[0]);
    console.log(arr2);
    
    //数组中的元素可以是任意的数据类型
    arr = [10,"hello",true,null,undefined];
    
    var obj = {name:"孙悟空"};
    arr[arr.length] = obj;
    arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]
    console.log(arr[1].name);
    
    arr = [function()

    3、数组的方法

    (1) push()

    语法: 数组.push(参数一,参数二,参数N);

    可以向数组的末尾添加一个或多个元素,并返回数组新的长度

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var result = arr.push("唐僧","蜘蛛精","白骨精");
    
    console.log(arr);
    console.log("result = "+result);
    
    (2) pop() :

    语法: 数组.pop();

    该方法可以删除啊数组的最后一个元素,并将被删除的元素作为返回值返回,删除几次就写几次

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    
    arr.pop();
    arr.pop();
    console.log(arr);
    console.log("result = "+result);
    
    (3) unshift()

    语法: 数组.unshift(参数一,参数二,参数N);

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    
    arr.unshift("牛魔王","二郎神");
    console.log(arr);
    console.log("result = "+result);
    (4) shift()

    语法: 数组.shift();

    可以删除数组的第一个元素,并将被删除的元素作为返回值返回,要删除几个就写几个

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    
    arr.shift();
    console.log(arr);
    
    result = arr.shift();
    console.log("result = "+result);
    (5) slice()

    语法: 数组.slice(参数一,参数二);

    可以从已有的数组中返回选定的元素

    参数:

    1. 截取开始的位置的索引,包含开始索引
    2. 截取结束的位置的索引,不包含结束索引

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
    
    var result = arr.slice(0,2);
    console.log(result);
    (6) splice()

    语法: 数组.splice(参数一,参数二,参数三,参数N);

    可以用于删除数组中的指定元素,并向数组中添加新的元素

    参数:

    1. 第一个:开始的位置的索引
    2. 第二个:删除的数量
    3. 第三个及以后的参数可以传递一些新的元素,这些元素将会自动插入到开始位置的索引前面

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
    
    var result = arr.splice(1,0,"牛魔王","红孩儿");
    console.log(result);
    (7)数组去重练习
    //创建一个数组
    var arr = [1,2,3,2,1,3,4,2,5];
    //去除数组中重复的数字

    解法:

    //创建一个数组
    var arr = [1,2,3,2,2,1,3,4,2,5];
    //去除数组中重复的数字
    //获取数组中的每一个函数
    for(var i=0; i<arr.lenth; i++){
      //console.log(arr[i]);
      for(var j=i+1; j<arr.lenth; j++){
        //console.log(arr[j]);
        //判断两个元素的值是否相等
        if(arr[i] == arr[j]){
          //如果相等则证明出现了重复的元素,删除j对应的元素
          arr.splice(j,1);
          //当删除了当前j所在的元素以后,后面的元素会自动补位
          //此时将不会再比较这个元素,需要再比较一次j所在位置的元素
          //当删除一个元素后,使j自减
          j--;
        }
      }
    } 
    
    console.log(arr);
    (8) concat()

    语法: 数组.concat();

    连接两个或多个数组,并将新的数组返回

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var arr2 = ["白骨精","玉兔精","蜘蛛精"];
    var arr2 = ["二郎神","太乙真人","太上老君"];
    
    var result = arr.concat(arr2,arr3,"牛魔王");
    
    console.log(result);
    (9) join()

    语法: 数组.join("连接符");

    该方法可以将数组转换为一个字符串

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    
    var result = arr.join("-");
    
    console.log(typeof result);//输出string
    console.log(result);//输出 孙悟空-猪八戒-沙和尚
    (10) reverse()

    语法: 数组.reverse();

    该方法用来反转数组(前边的去后边,后边的去前边)

    该方法会直接修改原数组

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];
    
    arr.reverse();
    console.log(arr);//输出 沙和尚,猪八戒,孙悟空
    (11) sort()

    语法: 数组.sort();

    该方法可以用来对数组中的元素进行排序

    该方法会影响原数组,默认会按照Unicode编码进行排序

    //创建一个数组
    var arr = [5,4,2,1,3,6,8,7];
    
    arr.sort();
    console.log(arr);//输出 a,b,d
    //arr.reverse();
    console.log(arr);//输出 d,b,a
    
    arr.sort(function(a,b){
      // if(a>b){
      //   return 1;
      // }else if(a<b){
      //   return -1;
      // }else{
      //   return 0;
      // }
      //升序排列
      return a - b;
      //降序排列
      return b - a;
    });
    console.log(arr);

    4、数组的遍历

    遍历数组:就是将数组中的所有元素都取出来

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
    /*console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    */
    for(var i=0; i<arr.length; i++){
      console.log(arr[i]);
    }

    5、数组练习

    创建一个函数,可以将perArr中的满18岁的Person提取出来,然后封装到一个新的数组中并返回,arr 形参:要提取信息的数组

    function Person(name,age,gender){
      this.name = name;
      this.age = age;
    }
    
    //修改Person原型中的toString
    Person.prototype.toString = function(){
      return "Person[name="+this.name+",age="+this.age+"]"
    };
    //创建一个Person对象
    var per = new Person("孙悟空",18);
    var per2 = new Person("猪八戒",28);
    var per3 = new Person("红孩儿",8);
    var per4 = new Person("蜘蛛精",16);
    var per5 = new Person("二郎神",38);
    
    //将这些person对象放入到一个数组中
    var perArr = [per,per2,per3,per4,per5];
    
    /*创建一个函数,可以将perArr中的满18岁的Person提取出来,然后封装到一个新的数组中并返回
    arr 形参,要提取信息的数组
    */
    function getAdult(arr){
      //创建一个新的数组
      var newArr = [];
      
      //遍历arr,获取arr中的Person对象
    
      //判断Person对象的age是否大于等于18
    
      //如果大于等于18,则将这个对象添加到newArr中
    
      //将新的数组返回
      return newArr;
    }
    
    var result = getAdult(perArr);
    console.log(result);

    解法:

    //遍历arr,获取arr中的Person对象
    for(var i=0; i<arr.length; i++){
      var p = arr[i];
      //判断Person对象的age是否大于等于18
      if(p.age>=18){
        //如果大于等于18,则将这个对象添加到newArr中
        newArr.push(p);
      }
    }

    6、 forEach()

    一般都是使用for循环遍历数组,JS中还提供了一个 forEach() 方法来遍历数组,但是只支持IE8以上浏览器,所以需要兼容IE8尽量不要使用该方法

    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
    arr.forEach(function(value,index,obj){
      console.log("value ="+value);
      console.log("index ="+index);
      console.log("obj ="+obj);
    });
    7
    打赏
    gzh

    评论 (0)

    取消
    文章目录