前端学习-JavaScript对象

216 阅读10分钟

对象

对象字面量

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

var obj = {
    name: 'zs',
    age: 18,
    sex: true,
    sayHi:function(){
        console.log("你好");
    }
};

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

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

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

更改属性的属性值方法:先调用属性,再等号赋值。
o.age = 19;
增加新的属性和属性值:使用点语法或者[]方法直接定义新属性,等号赋值。
o.height = 180;
删除一条属性:使用一个 delete 关键字,空格后面加属性调用。
delete o.sex;

new Object() 创建对象

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

  1. 构造函数用于创建一类对象,首字母要大写。
  2. 构造函数要和 new 一起使用才有意义。
var person = new Object();  
    
person.name = "zs";
person.age = 18;
person.sex = true;
person.sayHi = function () {
  console.log("hello");
};

new 在执行时会做四件事情

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

工厂函数创建对象

如果要创建多个类似的对象,可以将 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);

自定义构造函数

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

对象遍历

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

// 循环遍历输出每一项
for(var k in obj) {
    console.log(k + "项的属性值是" + obj[k]);
}

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

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

基本类型在内存中的存储

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

复杂类型在内存中的存储

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



内置对象

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()求指数次幂/求平方根

Array对象

创建数组对象的两种方式

字面量方式

var arr = [1,2,3];

new Array() 构造函数方法

var arr = new Array(1,2,3);

检测数组类型

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

console.log(arr instanceof Array);

数组常用方法

首尾数据操作:

push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度
pop() 删除数组最后一项,返回删除项
shift() 删除数组第一项,返回删除项
unshift() 在数组开头添加一个或多个元素,并返回数组的新长度

合并和拆分:

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

slice(start,end)
从当前数组中截取一个新的数组,不影响原来的数组,返回一个新的数组,包含从 start 到end (不包括该元素)的元素。
参数区分正负,正值表示下标位置,负值表示从后面往前数第几个位置,参数可以只传递一个,表示从开始位置截取到字符串结尾。

删除、插入、替换:

splice(index,howmany,element1,element2,......)
用于插入、删除或替换数组的元素
index:删除元素的开始位置
howmany:删除元素的个数,可以是0
element1,element2:要替换的新的数据。

位置方法:

indexOf() 查找数据在数组中最先出现的下标
lastIndexOf() 查找数据在数组中最后一次出现的下标
注意:如果没找到返回-1

倒序:

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

排序:

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

转字符串方法:

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

toString() 把数组转换成字符串,逗号分隔每一项
join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

清空数组

方式1 推荐
arr = [];
方式2
arr.length = 0;
方式3
arr.splice(0, arr.length);


String对象

基本包装类型

为了方便操作简单数据类型,JavaScript 还提供了特殊的简单类型对象:String 基本类型是没有方法的。
当调用 str.substring() 等方法的时候,先把 str 包装成 String 类型的临时对象,再调用substring 方法,最后销毁临时对象。
可以使用 new String() 构造函数方法创建字符串对象。

字符串的特点

字符串是不可变的。 由于字符串的不可变,在大量拼接字符串的时候会有效率问题。
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新 的字符串。

字符串属性

长度属性: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)
参数只能为正数。
两个参数都是指代下标,两个数字大小不限制,执行方法之前会比较一下两个参数的大小,会用小当做开始位置,大的当做结束位置,从开始位置截取到结束位置但是不包含结束位置。
如果不写第二个参数,从开始截取到字符串结尾.