JavaScript对象

对象

JavaScript中包括三种对象：自定义对象、内置对象以及浏览器对象。

自定义对象

对象由属性和方法组成。

• 属性：事物的特征；
• 方法：事物的行为；

创建对象的三种方式

利用字面量创建对象

对象字面量：{}。利用字面量来创建对象时注意：

1. 多个属性或方法之间用逗号隔开；
2. 方法后跟的是一个匿名函数；

调用对象：

• 调用属性：1. 对象.属性名；
  2. 对象[‘属性名’];
• 调用方法：对象.方法名（）;

//利用字面量创建对象
var person = {
    name:'mike',
    age:20,
    sing:function(){
        console.log('i can sing some songs.');
    }
}
//调用对象
console.log(person.name);
console.log(person['age']);
person.sing();

利用 new Object 创建对象

先利用new Object创建一个空对象，再添加对象的属性和方法。每个属性和方法之间用分号隔开。

//利用 new Object 创建对象
var person = new Object();
person.name = 'mike';
person.age = 20;
person.sing = function(){
    console.log('i can sing some songs.');
    }
//调用对象跟前一种一致

利用构造函数创建对象（函数对象）

构造函数：一种特殊的函数，主要用来初始化对象，就是把对象里相同的属性和方法抽象出来封装到函数内。当有一类对象里面很多属性和方法都是相同的，就可以考虑利用构造函数批量创建对象。

利用构造函数来创建对象的过程也称为对象的实例化。

使用构造函数来创建对象时需要注意：

1. 创建某一类对象时，首字母要大写；
2. 要与new一起使用；
3. 调用构造函数返回的是一个对象；

function Person(name,age,sex){
    //注意this的用法，指的是当前对象
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(){
        console.log('i can sing some songs');
    }
}
var mike = new Person('mike',20,'man');
console.log(mike.name);
console.log(mike.sex);
mike.sing();
//

new的执行过程

1. 在内存中创建一个新的空对象；
2. 让this指向这个空对象；
3. 执行构造函数，给空对象添加属性和方法；
4. 返回这个对象（因此构造函数不需要return）

遍历对象属性

利用for…in语句对数组或对象的属性进行循环操作。

for(变量 in 对象){
    //代码
}

var person = {
    name:'mike',
    age:20,
}
//运行结果 name age mike 20
for(var k in person){
    //这里输出的k是属性名
    console.log(k);
    //这里输出的person[k]是属性值
    console.log(person[k]);
}

内置对象

内置对象是JS自带的一些对象，主要是为了帮助我们快速开发。内置对象有Math、Date、Array、String等。

Math对象

Math不是一个函数对象，不需要new来调用，可以直接使用里面的属性和方法。

console.log(Math.PI);
// 99
console.log(Math.max(1,2,99));
// NaN
console.log(max(1,99,'mike'));
//infinity
console.log(max());

Math.round()的四舍五入规则：带.5的往大了取。

// 2
Math.round(1.5);
// -1
Math.round(-1.5)

Date 日期对象

Date是一个构造函数，必须使用new来调用。

var date = new Date();
//输出系统的当前时间
console.log(date);

// 2022,8,9
var date1 = new Date(2022,8,9);
console.log(date1);

// '2022-8-9'
var date2 = new Date('2022-8-9');
console.log(date2);

格式化日期

可以根据Date自带的方法和字符串拼接成想要的日期样式。

var date = new Date();
var year = date.getFullYear();
//月份从0开始，所以要加1
var month = date.getMonth()+1;
//返回多少号
var dates = date.getDate();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//返回星期几,也是从0开始
var day = date.getDay();
//进行拼接
console.log('今天是'+year+'年'+month+'月'+dates+'日'+array[day])；

获得总毫秒数

var date = new Date();
//输出离1970.1.1的总毫秒数
console.log(date.value0f());
console.log(date.getTime());
console.log(Date.now());
//最常用的写法
var date2 = +new Date();
console.log(date2);

数组对象

利用new Array（）创建数组对象。

//创建一个长度为3的空数组
var arr = new Array(3);
//创建一个有元素1,2的数组
var arr1 = new Array(1,2);
//[1,2]
console.log(arr1);

检测是否为数组

• 利用instanceof运算符;
• 利用Array.isArray(参数),Array.isArray()是h5新增的方法，有一些浏览器不支持;

var arr = new Array();
var obj = {};
// true false true false
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

添加或删除数组元素

添加数组元素

1. push（）向数组末尾添加元素,push()返回的结果是push之后新数组的长度，同时数组也会发生变化。

var arr = [1,2];
// 3
console.log(arr.push('mike'));
// [1,2,'mike']
console.log(arr);

2. unshift() 向数组开头添加元素，unshift（）返回的是unshift之后新数组的长度，同时数组也会发生变化。

var arr = [1,2];
// 3
console.log(arr.unshift('mike'));
// ['mike',1,2]
console.log(arr);

删除数组元素

1. pop()删除数组的最后一个元素，没有参数，pop（）返回的结果是删除的那个元素，同时数组也会发生变化。

var array = [1,2];
// 2
console.log(array.pop());
// [1]
console.log(array);

2. shift()删除数组的第一个元素，没有参数，shift()返回的结果是删除的那个元素，同时数组也会发生变化。

var array = [1,2];
// 1
console.log(array.shift());
// [2]
console.log(array);

数组排序

1. 翻转数组reverse()；
2. 数组排序sort(),注意sort的排序规则，查文档；

返回数组索引

1. indexOf（元素）从前面开始查找返回元素的索引号；
2. lastIndexOf(元素) 从后面开始查找返回元素的索引号；
3. 如果数组中不含此元素则返回-1；

转换为字符串

1. toString
2. join(分隔的符号);

var arr = [1,2,3];
//1&2&3
console.log(arr.jion('&'));

基本包装类型

JavaScript有三个特殊的引用类型：Sting、Number、Boolean。基本包装类型就是把简单的数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法。

// 基本数据类型是没有方法和属性的，对象才有，下面的代码能够正确运行是因为把
//String包装成了复杂数据类型。
var str = 'mike';
console.log(str.length);

//包装的过程
var temp = new String('mike');
str = temp;
temp = null;

字符串的不可变性

字符串虽然可以改变内容，但在实质上只是改变了地址，在内存中开辟了一个新的空间，之前的字符串不会被销毁，仍然存储在内存中。因此大量地拼接字符串很占空间。

字符串中返回字符的位置

一次只能查找一个字符。如果没有找到返回-1。

• str.indexOf(‘要查找的字符’，【起始的位置】);
• str.lastIndexOf();

字符串中根据位置返回字符

• str.charAt(index);
• str.charCodeAt(index);返回相应索引号的字符ASCII值
• str[index];

其他操作方法

• concat(‘字符串1’,‘字符串2’…);将多个字符串进行连接
• substr(‘截取的起始位置’，‘截取字符个数’);截取字符
• replace(‘被替换的字符’，‘用于替换的字符’);只能替换符合的第一个字符
• split(‘分隔符’);将字符串转化为数组

// ['ab','cd','ef']
var str = 'ab,cd,ef';
console.log(str.split(','));

练习

对象的练习