2-23 对象

205 阅读19分钟

1.自定义对象概念

JavaScript 的对象包含三种:自定义对象 内置对象 浏览器对象

ECMAscript 的对象:自定义对象 内置对象

为什么有对象?

如果有一组相关的数据,松散的存储不利于使用,存入数组中受下标限制又必须有固定的

顺序,而对象可以自定义名称存储一系列无序的相关数据。

什么是对象?

现实生活中的对象:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。

  • JavaScript 中的对象:就是生活中对象的一个抽象。
  • JavaScript 的对象是无序属性的集合。
  • 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象
  • 想象成键值对,其中值可以是数据和函数。

对象的行为和特征:

特征---在对象中用属性表示

行为---在对象中用方法表示

创建对象的方法

  • 通过对象字面量方式创建一个对象
  • 通过new Object() 创建对象
  • 工厂函数创建对象
  • 自定义构造函数

2.对象字面量

创建一个对象最简单的方式是使用对象字面量赋值给变量。类似数组。

• 对象字面量语法:{}

• 内部可以存放多条数据,数据与数据之间用逗号分隔,最后一个后面不要加逗号。

• 每条数据都是有属性名和属性值组成,键值对写法:k: v

• k: 属性名

• v:属性值,可以是任意类型的数据,比如简单类型数据、函数、对象。

    // 通过对象字面量方式创建一个对象
    var person1 = {
      name : "zs",
      age : 18,
      sex : "male",
      sayHi : function () {
        console.log(this.name + "向你说您好");
      }
    };

    // 调用对象的属性和方法
    // console.log(person1.name);
    // console.log(person1.age);
    // console.log(person1.sex);
    // person1.sayHi();
    // 中括号调用方法
    // console.log(person1["name"]);
    // person1["sayHi"]();
    // person1.sayHi();

    // 更改数据
    person1.age = 19;

    // 添加新数据
    person1.weight = 140;

    // 删除属性
    delete person1.sex;
    console.log(person1);

区分属性和方法

属性:对象的描述性特征,一般是名词,相当于定义在对象内部的变量。

方法:对象的行为和功能,一般是动词,定义在对象中的函数。

调用对象内部属性和方法

  • 用对象的变量名打点调用某个属性名,得到属性值。
  • 在对象内部用 this 打点调用属性名。this 替代对象。
  • 用对象的变量名后面加 [] 调用,[] 内部是字符串格式的属性名。
  • 调用方法时,需要在方法名后加 () 执行。

更改对象内部属性和方法的语法

更改属性的属性值方法:先调用属性,再等号赋值。

o.age = 19;

增加新的属性和属性值:使用点语法或者[]方法直接定义新属性,等号赋值。

o.height = 180;

删除一条属性:使用一个 delete 关键字,空格后面加属性调用。

delete o.sex;

3.new Object() 创建对象

Object() 构造函数 ,是一种特殊的函数。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与 new 运算符一起使用在创建对象的语句中。

​ 1.构造函数用于创建一类对象,首字母要大写。

​ 2.构造函数要和 new 一起使用才有意义。

    // new Object() 方法创建
    var person1 = new Object();   //创建了一个新的空的对象
    // 添加属性和方法
    person1.name = "zs";
    person1.age = 18;
    person1.sex = true;
    person1.sayHi = function () {
      console.log("你好");
    };

    var person2 = new Object();   //创建了一个新的空的对象
    // 添加属性和方法
    person1.name = "ls";
    person1.age = 19;
    person1.sex = true;
    person1.sayHi = function () {
      console.log("你好");
    };
    // 输出
    console.log(person1);

new 在执行时会做四件事情

  • new 会在内存中创建一个新的空对象
  • new 会让 this 指向这个新的对象
  • 执行构造函数 目的:给这个新对象加属性和方法
  • new 会返回这个新对象

4.工厂函数创建对象

如果要创建多个类似的对象,可以将 new Object() 过程封装到一个函数中,将来调用函数就能创建一个对象,相当于一个生产对象的函数工厂,用来简化代码。

    // 工厂方法就是相当于对 new Object() 方法的一个封装
    function createPerson(name,age,sex) {
      // 创建一个空对象
      var person = new Object();
      // 添加属性和方法,属性可以接受参数的值
      person.name = name;
      person.age = age;
      person.sex = sex;
      person.sayHi = function () {
        console.log("hello");
      };
      // 将对象作为函数的返回值
      return person;
    }
    // 想创建一个对象,可以调用工厂函数
    var p1 = createPerson("zs",18,true);
    var p2 = createPerson("ls",19,false);
    // 输出
    console.log(p1);
    console.log(p2);

5.自定义构造函数

• 比工厂方法更加简单。

• 自定义一个创建具体对象的构造函数,函数内部不需要 new 一个构造函数的过程,直接使用 this 代替对象进行属性和方法的书写,也不需要 return 一个返回值。

• 使用时,利用 new 关键字调用自定义的构造函数即可。

• 注意:构造函数的函数名首字母需要大写,区别于其他普通函数名。

    // 自己定义一个构造函数
    function Person(name,age,sex) {
      // 不需要使用 new 一个新对象
      // 用 this 替代将来创建的新对象
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.sayHi = function () {
        console.log("hello");
      };
      // 不需要添加 return
    }
    // 用 new 关键字调用构造函数
    var p1 = new Person("zs",18,true);
    console.log(p1);

6.对象遍历

for in 循环也是循环的一种,专门用来遍历对象,内部会定义一个 k 变量, k 变量在每次循

环时会从第一个开始接收属性名,一直接收到最后一条属性名,执行完后跳出循环。

• 简单的循环遍历:输出每一项的属性名和属性值。

// 循环遍历输出每一项

    // 通过对象字面量方式创建一个对象
    var person1 = {
      name : "zs",
      age : 18,
      sex : "male",
      sayHi : function () {
        console.log(this.name + "向你说您好");
      }
    };

    // 遍历对象
    for (var k in person1) {
      // k 存储的是每一条数据的属性名或者方法名
      console.log(k + "属性的属性值为" + person1[k]);
    }

7.简单类型和复杂类型的区别

• 基本类型又叫做值类型,复杂类型又叫做引用类型

值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。

引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。

8.堆和栈

JavaScript 中没有堆和栈的概念,此处我们用堆和栈来讲解,目的是方便理解和方便以后的学习。

堆栈空间分配区别:

栈(操作系统):由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。

堆(操作系统): 存储复杂类型(对象),一般由程序员分配释放, 若程序员不释放,由垃圾回收机制回收。

9.基本类型在内存中的存储

变量中如果存储的是简单类型的数据,那么变量中存储的是值本身,如果将变量赋值给另一个变量,是将内部的值复制一份给了另一个变量,两个变量之间没有联系,一个变化,另一个不会同时变化。

    // 基础数据类型
    var a = 5;
    var b = a;  //将 a 内部存储的数据 5 复制了一份给 b
    a = 10;
    console.log(a);
    console.log(b);

10.复杂类型在内存中的存储

如果将复杂类型的数据赋值给一个变量,复杂类型的数据会在内存中创建一个原型,而变量中存储的是指向对象的一个地址,如果将变量赋值给另一个变量,相当于将地址复制一份给了新的变量,两个变量的地址相同,指向的是同一个原型,不论通过哪个地址更改了原型,都是在原型上发生的更改,两个变量下次访问时,都会发生变化。

    // 复杂数据类型
    var p1 = {
      name : "zs",
      age : 18,
      sex : "male"
    };
    var p = p1;  //p1 将内部存储的指向对象原型的地址复制给了 p
    // 两个变量之间是一个联动的关系,一个变化,会引起另一个变化
    p.name = "ls";
    console.log(p);
    console.log(p1);

    // 数组和函数存储在变量中时,也是存储的地址
    var arr = [1,2,3,4];
    var arr2 = arr;
    arr[4] = 5;
    console.log(arr);
    console.log(arr2);

11.内置对象

需要借助MDN参考手册,如何学习一个方法?

  1. 方法的功能

  2. 参数的意义和类型

  3. 返回值意义和类型

  4. demo 进行测试

12.内置对象-Math对象

Math 对象它具有数学常数和函数的属性和方法,我们可以直接进行使用

• 根据数学相关的运算来找 Math 中的成员(求绝对值,取整)

Math.PI圆周率
Math.random()生成随机数
Math.floor()/Math.ceil()向下取整/向上取整
Math.round()取整,四舍五入
Math.abs()绝对值
Math.max()/Math.min()求最大和最小值
Math.sin()/Math.cos()正弦/余弦
Math.power()/Math.sqrt()求指数次幂/求平方根
    // 一个半径为10的圆的周长
    // 圆周率
    // console.log(2 * 10 * Math.PI);

    // 随机数
    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 
    }
    // console.log(getRandomIntInclusive(10,20));

    // 四舍五入取整
    // console.log(Math.round(4.3));
    // console.log(Math.round(4.7));

    // 绝对值
    // console.log(Math.abs(-90));

    // 获取最大值和最小值
    // console.log(Math.max(45,67,34,90,123,33));
    // console.log(Math.min(45,67,34,90,123,33));

    // 求一个数的几次方
    console.log(Math.pow(3,4));
    // 平方根
    console.log(Math.sqrt(4));
    console.log(Math.pow(4,1/2));

13.内置对象-Array对象

1.创建数组对象的方法:

  1. 字面量方式

  2. new Array() 构造函数方法

2.检测数组类型

instanceof 检测某个实例是否是某个对象类型(既是否是构造函数的实例)

    // 字面量方法
    var arr = [1,2,3];

    // 数组也是对象,可以通过构造函数生成
    // 空数组
    var arr1 = new Array();
    // 添加数据,可以传参数
    var arr2 = new Array(1,2,3);
    var arr3 = new Array("zs","ls","ww");
    // console.log(arr1);
    // console.log(arr2);
    // console.log(arr3);

    // 检测数组的数据类型
    // console.log(typeof(arr));
    // console.log(typeof(arr3));
    var a = {};
    // 检测某个实例对象是否属于某个对象类型
    console.log(arr instanceof Array);  // true
    console.log(arr2 instanceof Array);  // true
    console.log(a instanceof Array);  // false

    function fun () {
      console.log(1);
    }
    console.log(fun instanceof Function);  // true

3.常用数组方法-首尾操作

toString()把数组转换成字符串,逗号分隔每一项
push()在数组末尾添加一个或多个元素,并返回数组操作后的长度
pop()删除数组最后一项,返回删除项
shift()删除数组第一项,返回删除项
unshift()在数组开头添加一个或多个元素,并返回数组的新长度
    // 字面量方法
    var arr = [1,2,3,4];

    // toString() 方法:转字符串
    console.log(arr.toString());

    // 首尾操作方法
    // 尾推,参数是随意的,可以有一个或多个
    console.log(arr.push(5,6,7,8)); // 返回最后一项8
    console.log(arr.push([5,6,7,8])); // [1,2,3,4,[5,6,7,8]]
    console.log(arr); // [1,2,3,4,5,6,7,8]

    // 尾删,删除最后一项数据
    // 不需要传参
    console.log(arr.pop()); // 返回删除的数据
    console.log(arr);

    // 首删,删除第一项数据,不需要传参
    console.log(arr.shift());
    console.log(arr);

    // 首添,参数与 push 方法类似
    console.log(arr.unshift(-1,0));
    // console.log(arr);

首尾案例

    // 字面量方法
    var arr = [1,2,3,4];

    // 将数组的第一项移动到最后一项
    // 删除第一项
    // 将删除的项添到最后一项
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);

4.常用数组方法-合并拆分

concat()

  • 将两个数组合并成一个新的数组,原数组不受影响。参数位置可以是一个数组字面量、数组变量、零散的值。

slice(start,end)

  • 从当前数组中截取一个新的数组,不影响原来的数组,返回一个新的数组,包含从 start 到end (不包括该元素)的元素。

  • 参数区分正负,正值表示下标位置(从0开始),负值表示从后面往前数第几个位置,参数可以只传递一个,表示从开始位置截取到字符串结尾。

    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // 合并方法
    // 参数:数组、数组的变量、零散的值
    // 返回值:一个新的拼接后的数组
    // var arr1 = arr.concat([5,6,7]);
    // var ar = [8,9,10]
    // var arr1 = arr.concat(ar);
    // var arr1 = arr.concat(11,12,13);
    // console.log(arr);
    // console.log(arr1);
    
    // 拆分方法
    // 参数为正
    // var arr1 = arr.slice(3,7); // 4 5 6 7
    // 参数为负
    // var arr1 = arr.slice(-7,-1); // 4 5 6 7 8 9
    // 只书写一个参数
    var arr1 = arr.slice(-7); // 4 5 6 7 8 9 10
    console.log(arr);
    console.log(arr1);

5.数组常用方法-删除、插入、替换

splice(index,howmany,element1,element2,……)

用于插入、删除或替换数组的元素

index:删除元素的开始位置

howmany:删除元素的个数,可以是0

element1,element2:要替换的新的数据。

  • 删除功能,传前两个参数,会返回删除的值
  • 替换功能,传3个及以上的参数
  • 插入功能,传3个及以上的参数,但是第二个参数必须为0
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // 删除功能,传前两个参数
    // console.log(arr.splice(2,5)); // 返回删除的值
    // console.log(arr); // 1 2 8 9 10

    // 替换功能,传3个及以上的参数
    // arr.splice(2,5,"haha","hello");
    // console.log(arr); // 1,2,"haha","hello",9,10

    // 插入功能,传3个及以上的参数,但是第二个参数必须为0
    arr.splice(2,0,"hello");
    console.log(arr);1,2,"hello",3,4,5,6,7,8,9,10

6.数组常用方法-查找位置

indexOf()

查找数据在数组中最先出现的下标

lastIndexOf()

查找数据在数组中最后一次出现的下标

注意:如果没找到返回-1

    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10,4,5];

    // 查找某个元素在数组中从前往后第一次 出现位置的下标
    console.log(arr.indexOf(4));
    // 查找某个元素在数组中从前往后最后一次出现位置的下标
    console.log(arr.lastIndexOf(4));
    console.log(arr.lastIndexOf(11));

7.数组常用方法-倒序和排序

倒序:reverse()

将数组完全颠倒,第一项变成最后一项,最后一项变成第一项。

作用在原始数组之上。

返回值就是倒置之后的结果

排序:sort();

默认根据字符编码顺序,从小到大排序

如果想要根据数值大小进行排序,必须添加sort的比较函数参数。

该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,根据a和b的关系作为判断条件,返回值根据条件分为三个分支,正数、负数、0:

​ 返回值是负数-1:a排在b前面。

​ 返回值是正数1:a排在b后面。

​ 返回值是0:a和b的顺序保持不变。

人为能控制的是判断条件。

8.数组常用方法-转字符串方法

转字符串方法:将数组的所有元素连接到一个字符串中。

join()

通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

9.数组常用方法-清空数组

  • 方式1 推荐

arr = [];

  • 方式2

arr.length = 0;

  • 方式3

arr.splice(0, arr.length);

    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10,20,30];

    // 转字符串方法
    var str = arr.join("*"); // 1*2*3*4*5*6*7*8*9*10*20*30
    var str = arr.join(""); // 123456789102030
    console.log(str);

    // 清空数组
    // arr = [];
    // arr.length = 0;
    arr.splice(0,arr.length);
    console.log(arr);

14.内置对象-String对象

基本包装类型

为了方便操作简单数据类型,JavaScript 还提供了特殊的简单类型对象:String

基本类型是没有方法的。

当调用 str.substring() 等方法的时候,先把 str 包装成 String 类型的临时对象,再调用substring 方法,最后销毁临时对象。

可以使用new String()构造函数方法创建字符串对象。

    // 基本类型的数据:没有属性和方法
    // 对象数据类型:有属性和方法
    // 但是字符串是可以调用一些属性和方法
    var str = "这是一个字符串";
    var str2 = str.slice(3,5);
    console.log(str2);

    // 基本包装类型:基本类型的数据在进行一些特殊操作时,会暂时被包装成一个对象,结束后再被销毁
    // 字符串也有一种根据构造函数创建的方法
    var str3 = new String("abcdef");
    console.log(str);
    console.log(str3);

    // 模拟计算机的工作
    var str = "这是一个字符串";
    // 进行了一个临时的包装
    var str4 = new String(str);
    var str2 = str4.slice(3,5);
    str4 = null;

字符串特点

  • 字符串是不可变的。

    • 重新赋值时,原先字符串的值不会被替换掉,新值是重新开辟的空间存储的。
    • 原先字符串的值,只能等计算机定期更新才能被销毁。
  • 由于字符串的不可变,在大量拼接字符串的时候会有效率问题。

    // 定义一个字符串
    // 特点:字符串是不可变的
    // var a = "abc";
    // a = "cde";

    // 大量拼接字符串时,会有效率问题
    var sum = "";
    for (var i = 1 ; i <= 1000000 ; i++) {
      sum += i;
    }
    console.log(sum);

字符串属性

长度属性:str.length

字符串长度指的是一个字符串中所有的字符总数。

1.字符串对象的常用方法-返回指定位置的字符

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

charAt() 方法可返回指定位置的字符。

• char:charator,字符

• at:在哪儿

• 参数是 index 字符串的下标。也是从 0 开始

• 表示返回指定的下标位置的字符。

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";

    // 长度属性
    console.log(str.length);

    // charAt() 返回指定下标位置的字符
    console.log(str.charAt(6)); // 的

2.字符串对象的常用方法-返回某个指定的字符串值在字符串中首次出现的位置

indexOf()

方法可返回某个指定的字符串值在字符串中首次出现的位置。

• 找到指定的子字符串在原字符串中第一次出现的位置的下标。如果子字符串在原字符串中

​ 没有,返回值是 -1

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
   // indexOf() 返回子串在原始字符串中第一次出现位置的下标
    console.log(str.indexOf("字符串")); // 7

3.字符串对象的常用方法-连接两个或多个字符串

concat() 方法用于连接两个或多个字符串。

• 参数比较灵活,可以是字符串、或者字符串变量、多个字符串。

生成的是一个新的字符串,原字符串不发生变化

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
    // concat() 字符串拼接
    var str2 = str.concat("哈哈哈","普通");
    console.log(str);
    console.log(str2);


4.字符串对象的常用方法-分割字符串

split()

方法用于把一个字符串分割成字符串数组。

  • 参数部分是分割符,利用分割符将字符串分割成多个部分,多个部分作为数组的每一项组成数组
  • 如果分割符是空字符串,相当于将每个字符拆分成数组中的每一项。
    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
    // split() 分割字符串成一个数组
    var arr = str.split(",");
    console.log(arr);

    // 字符串内容倒置
    var arr = str.split("");
    arr.reverse();
    str = arr.join("");
    str = str.split("").reverse().join("");
    console.log(str);

5.字符串对象的常用方法-转换大小写

toLowerCase() 把字符串转换为小写。

toUpperCase() 把字符串转换为大写。

  • 将所有的英文字符转为大写或者小写。
  • 生成的是新的字符串,原字符串不发生变化。
    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
    // 大小写转换
    var str1 = str.toUpperCase();
    var str2 = str1.toLowerCase();
    console.log(str);
    console.log(str1);
    console.log(str2);

6.字符串对象的常用方法-截取字符串方法一

slice()

方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

• 语法:slice(start,end)

• 从开始位置截取到结束位置(不包括结束位置)的字符串。

• 参数区分正负,正值表示下标位置,负值表示从后面往前数第几个位置,参数可以只传递一个,表示从开始位置截取到字符串结尾。

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
    // 截取字符串方法:三种
    // slice(start,end) 从开始位置截取到结束位置,但是不包含结束位置
    var str1 = str.slice(3,7); // 个普通的
    var str1 = str.slice(-7,-3); // ,   
    var str1 = str.slice(-7); // ,   ¥%#
    console.log(str1);

7.字符串对象的常用方法-截取字符串方法二

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符

• 语法:substr(start,howmany)

• 从开始位置截取到指定长度的字符串。

• start 参数区分正负。正值表示下标位置,负值表示从后往前数第几个位置。

• howmany 参数必须为正数,也可以不写,

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
    // substr(start,howmany) 从开始位置截取一定长度
    var str2 = str.substr(3,7); // 个普通的字符串
    var str2 = str.substr(-9,7); // bc,   ¥
    var str2 = str.substr(-9); // bc,   ¥%#
    console.log(str2);

8.字符串对象的常用方法-截取字符串方法三

substring()

方法用于提取字符串中介于两个指定下标之间的字符。

• 语法:substring(start,end)

• 参数只能为正数。

• 两个参数都是指代下标,两个数字大小不限制,执行方法之前会比较一下两个参数的大小,

会用小当做开始位置,大的当做结束位置,从开始位置截取到结束位置但是不包含结束位置。

• 如果不写第二个参数,从开始截取到字符串结尾.

    // 定义一个字符串
    var str = "这是一个普通的字符串,abc,   ¥%#";
   // substring(start,end) 参数必须是整数,比较两个数的大小,小的作为开始,大的作为结束
    var str3 = str.substring(3,7); // 普通的
    var str3 = str.substring(7,3); // 普通的
    var str3 = str.substring(7); // 符串,abc,   ¥%#
    console.log(str3);