JavaScript对象

2020-12-01 本文已影响0人 amanohina

概念

JavaScript 中的对象：
JavaScript 中的对象其实就是生活中对象的一个抽象。
JavaScript 的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象想象成键值对，其中值可以是数据和函数。
对象的行为和特征：
特征---在对象中用属性表示
行为---在对象中用方法表示

对象字面量

创建一个对象最简单的方式就是使用对象字面量赋值给变量，类似于数组
对象字面量语法：{}
内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个后面不要加逗号。
每条数据都是有属性名和属性值组成，键值对写法：k: v
k: 属性名
v：属性值，可以是任意类型的数据，比如简单类型数据、函数、对象。

var obj = {
    k:v,
    k:v,
    k:v
};

var person1 = {
      name : "zs",
      age : 18,
      sex : "male",
      sayHi : function () {
        console.log(this.name + "向你说您好");
      }
    };

区分属性和方法

属性：对象的描述性特征，一般是名词，相当于定义在对象内部的变量。
方法：对象的行为和功能，一般是动词，定义在对象中的函数。

调用对象内部属性和方法的语法

用对象的变量名打点调用某个属性名，得到属性值。

person1.name

在对象内部用 this 打点调用属性名。this 替代对象。

this.name

用对象的变量名后面加 [] 调用，[] 内部是字符串格式的属性名。

person1["name"]

调用方法时，需要在方法名后加 () 执行

person1.sayHi();
person1["sayHi"]();

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

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

person1.age = 19;

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

person1.height = 180;

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

delete person1.sex;

其他创建对象的方法

new Object()创建对象

Object() 构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。
1. 构造函数用于创建一类对象，首字母要大写。
2. 构造函数要和 new 一起使用才有意义

new在执行时会做四件事情

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

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

工厂函数创建对象

要创建多个类似的对象，使用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",18,false);
    console.log(p1);
    console.log(p2);

自定义构造函数

比工厂方法更为简单
自定义一个创建具体对象的构造函数，函数内部不需要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);

对象遍历

for in 循环也是循环的一种，专门用来遍历对象，内部会定义一个 k 变量， k 变量在每次循环时会从第一个开始接收属性名，一直接收到最后一条属性名，执行完后跳出循环。
简单的循环遍历：输出每一项的属性名和属性值。
// 循环遍历输出每一项

for(var k in obj){
console.log(k + "项的属性值是" + obj[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]);
    }

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

基本类型又叫做值类型，复杂类型又叫做引用类型
值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值的本身，因此也叫做值的类型
引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），因此也叫做引用类型

堆和栈

堆栈空间分配区别：
1.栈（操作系统）：存放简单类型，函数的参数值，局部变量的值等等，由操作系统自动分配释放
2.堆（操作系统）：存储复杂类型（对象），一般由程序员设置释放与否，如果不释放，系统垃圾回收机制回收

简单类型在内存中的存储

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

number值复制给n变量，number本身不会有变化

复杂类型在内存中的存储

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

都是一个地址，牵一发而动全身

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

image.png

内置对象

MDN学习手册

Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN：

https://developer.mozilla.org/zh-CN/

比如：通过查询MDN学习Math对象的random()方法的使用

学习一个新的方法

1.方法的功能
2.参数的意义和类型
3.返回值意义和类型
4.demo进行测试

Math对象

Math 对象它具有数学常数和函数的属性和方法，我们可以直接进行使用
根据数学相关的运算来找 Math 中的成员（求绝对值，取整）

部分功能

Array对象

new Array()构造函数方法

var arr1 = new Array();
    // 添加数据，可以传参数
    var arr2 = new Array(1,2,3);
    var arr3 = new Array("zs","ls","ww");

检测数据类型

instanceof 检测某个实例是否是某个对象类型

 var a = function (){};
    // 检测某个实例对象是否属于某个对象类型
    console.log(arr instanceof Array);
    console.log(arr2 instanceof Array);
    console.log(a instanceof Function);

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

首尾操作方法

toString()方法

 var arr = [1,2,3,4];

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

数组常用方法

首尾数据操作：
1.push() 在数组末尾添加一个或多个元素，并返回数组操作后的长度
2.pop() 删除数组最后一项，返回删除项
3.shift() 删除数组第一项，返回删除项
4.unshift() 在数组开头添加一个或多个元素，并返回数组的新长度
合并和拆分：
1.concat()
- 将两个数组合并成一个新的数组，原数组不受影响。参数位置可以是一个数组字面量、数组变量、零散的值。
  2.slice(start,end)
- 从当前数组中截取一个新的数组，不影响原来的数组，返回一个新的数组，包含从 start 到end （不包括end该元素）的元素。
- 参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，参数可以只传递一个，表示从开始位置截取到字符串结尾。
删除、插入、替换：
splice(index,howmany,element1,element2,……)
用于插入、删除或替换数组的元素
index：删除元素的开始位置
howmany：删除元素的个数，可以是0
element1,element2：要替换的新的数据。
只删除：

   // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // 删除功能，传前两个参数
    console.log(arr.splice(2,5));
    console.log(arr);

替换：

    arr.splice(2,5,"haha","hello");
    console.log(arr);

插入：

    // 插入功能，传3个及以上的参数，但是第二个参数必须为0
    arr.splice(2,0,"hello");
    console.log(arr);

位置方法：
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));

倒序：reverse() 将数组完全颠倒，第一项变成最后一项，最后一项变成第一项。

var arr = [1,2,3,4,5,6,7,8,9,10,20,30];

    // 倒序排列
    console.log(arr.reverse());
    console.log(arr);

排序：sort(); 默认根据字符编码顺序，从小到大排序
如果想要根据数值大小进行排序，必须添加sort的比较函数参数。
该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，根据a和b的关系作为判断条件，返回值根据条件分为三个分支，正数、负数、0：
返回值是负数-1：a排在b前面。
返回值是正数1：a排在b后面。
返回值是0：a和b的顺序保持不变。
人为能控制的是判断条件。

arr.sort(function(a,b){
      if (a < b) {
        return -1;   //表示 a 要排在 b 前面
      } else if (a > b) {
        return 1;  //表示 a 要排在 b 后面
      } else {
        return 0;  //表示 a 和 b 保持原样，不换位置
      }
    });
    console.log(arr);

转字符串方法：将数组的所有元素连接到一个字符串中。
join() ：通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

 var arr = [1,2,3,4,5,6,7,8,9,10,20,30];

    // 转字符串方法
    var str = arr.join("*");
    // var str = arr.join("");
    console.log(str);

清空数组

1.arr = [];
2.arr.length = 0;
3.arr.splice(0,arr.length);

String对象

基本包装类型

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

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

关于上述代码str和str2截取的运行原理：

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

字符串的特点

字符串是不可变的。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题。
比如说：

var a = "abc";
a = "bcd";

这两行代码，a一开始赋值"abc"时申请了一块内存进行存储数据，当进行修改时并没有进行覆盖，而是又另外申请了一块内存进行存储，原本的"abc"的内存没有变量去指向，也就造成了内存浪费

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新
的字符串

字符串属性

长度属性：str.length
- 字符串长度指的是一个字符串中所有的字符总数

字符串方法

charAt() 方法可返回指定位置的字符。
- char：charator，字符
- at：在哪儿
- 参数是 index 字符串的下标。也是从 0 开始。
- 表示返回指定的下标位置的字符。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
- 找到指定的子字符串在原字符串中第一次出现的位置的下标。如果子字符串在原字符串中没有，返回值是 -1
concat() 方法用于连接两个或多个字符串。
- 参数比较灵活，可以是字符串、或者字符串变量、多个字符串。
- 生成的是一个新的字符串，原字符串不发生变化。
split() 方法用于把一个字符串分割成字符串数组。
- 参数部分是分割符，利用分割符将字符串分割成多个部分，多个部分作为数组的每一项组成数组。
- 如果分割符是空字符串，相当于将每个字符拆分成数组中的每一项。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
- 将所有的英文字符转为大写或者小写。
- 生成的是新的字符串，原字符串不发生变化。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
- 语法：slice(start，end)
- 从开始位置截取到结束位置（不包括结束位置）的字符串。
- 参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，参数可以只传递一个，表示从开始位置截取到字符串结尾。
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符
- 语法：substr(start,howmany)
- 从开始位置截取到指定长度的字符串。
- start 参数区分正负。正值表示下标位置，负值表示从后往前数第几个位置。
- howmany 参数必须为正数，也可以不写，不写表示从 start 截取到最后。
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
- 语法：substring(start,end)
- 参数只能为正数。
- 两个参数都是指代下标，两个数字大小不限制，执行方法之前会比较一下两个参数的大小，会用小当做开始位置，大的当做结束位置，从开始位置截取到结束位置但是不包含结束位置。
- 如果不写第二个参数，从开始截取到字符串结尾.