JS的对象与内置对象详细介绍

前言

JS的对象就是Object，还有独立于宿主环境的ECMAScript实现提供的内置对象：Array,String,Date,Math。。。

首先我们来学习一下JS的对象：

一、基本对象Object:

JS里有一句话叫万物皆对象（除了基本数据类型）。但是new String(‘’)或者new Number()这种不属于基本数据类型，属于引用类型。

对象就是属性的无序集合。数组是有序集合。

创建对象的方法：

1. 直接量（也叫字面量）
   属性（对象的静态体征）
   方法（对象的动态行为）
   一个属性属性名结束后用，逗号隔开。

var stu = {
	//name与age属于静态体征
	name: '李四',
	age: 13,
	//study与eat属于动态行为
	study: function(course) {
		console.log('学习课程:' + course)
	},
	eat: function(pig) {
		console.log('吃：' + pig)
	}
}

2. 通过构造函数创建
   方法：var person = new 函数名();
   通过该方法创建对象时，会自动执行该构造函数。
   例如：

//构造函数的函数名首字母大写，区分与普通函数的区别，不是强制规定的，你也可以小写。
function Person(name, sex) {
	this.name = name;
	this.sex = sex,
	this.job = function() {
		alert(this.name)
	}
}
var child = new Person('Jack', '男');
Person.job();
//此代码一共会两次跳出对话框，因为创建对象时会自动执行构造函数一次。this指的是调用函数的对象。

3. 通过new Object()创建
   方法:通过object构造器new一个对象，在丰富对象信息。

var person = new Object();
person.name = 'wuxiaodi';
person.sex = 'boy';

4. 工厂方式

function createStudent(name, age) {
	let stu = new Object();
	stu.name = name;
	stu.age = age;
	stu.study = function() {
		console.log(this.name + " 学习...");
	}
	return stu;
}

5. 构造函数 + prototype
   prototype: 原型对象
   对象共享资源
   _proto_:原型属性
   prototype：默认每个函数对象都有prototype属性，显式属性
   _proto_：默认每个对象都有 _proto_ 属性，该属性默认指向创建对应对象的构造函数中的 prototype，隐式属性

JS中的对象都是基于原型的对象。

对象属性调用：
对象名.属性名
对象名.方法名(参数列表)
或：
对象名[‘属性名’]
对象名[‘方法名’](参数列表)

先在自身空间中查找，如果有则直接使用，如果没有，则到原型中查找；如果原型中存在，则调用使用，如果原型中不存在，则继续到原型的原型(原型链)中查找，依此方式继续查找使用，如果一直不存在，会继续向原型链中查找，直到 Object.prototype（原型链终点）中。如果原型链中不存在待调用的属性，则返回 undefined

6. Object.create()
7. class 语法糖
8. …

删除对象属性：

var xiaoming = {
    name: '小明',
    age: 20
};
delete xiaoming.age; // 删除age属性
delete xiaoming['name']; // 删除name属性
delete xiaoming.gender; // 删除一个不存在的school属性也不会报错

判断对象是否拥有某一属性：
1.可以用 in 操作符：

var xiaoming = {
    name: '小明',
    birth: 1998
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

PS:不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString' in xiaoming; // true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

---

二、内置对象之Array：

数组：保存一组数据

数组对象的作用是：使用单独的变量名来存储一系列的值。（动态数组：可自动根据元素个数调用长度大小）

概念：

• 元素：数组中所保存数据的空间
• 长度：数组中所保存元素的个数
• 下标（索引）：数组中元素的编号，从0开始编号，到（长度-1）结束

使用：
创建数组对象：

var arr = [];	//直接量
var arr = new Array();	//创建数组对象。当数组长度为0的时候括号可以不写。
var arr = [1, 2, 3, 4];		//直接量，在创建数组对象的同时初始化保存的数据
var arr = new Array(1, 2, 3, 4);
var arr = new Array(size);		//size为数字参数，表示创建数组时先预定size个空间

访问数组元素：
数组名[下标]
关于数组的变量迭代请看：
数组ES5新增的遍历迭代方法
也可以使用for循环的方式。
关于数组的常用API请看：
数组的常用方法及其使用场景
关于数组排序的算法请看：
JS常见算法小总结

---

三、内置对象之Math：

作用： 用来处理数字数据。
定义对象：

var num = 15;
var num = new Number(15);

API：

• Math.random()
  生成一个0~1之间的随机小数
  如果要生成0-54之间的随机整数：

Math.floor(Math.random() * 54)

• Math.floor(num)
  将num向下取整，取小于等于num的最大整数，
  如：

Math.floor(3.1)		//3  
Math.floor(3.999)	//3

• Math.ceil(num)
  将num向上取整数，取大于等于num的最小整数，
  如：

Math.ceil(3.1)		//4
Math.ceil(3.999)	//4

• Math.round(num)
  将num四舍五入取整数
• Math.pow(x, y)
  求 x 的 y 次方
  如：

Math.pow(5, 3)		//125

• Math.sqrt(x)
  求x的开方：
  如：

Math.sqrt(25)	//5

• Math.trunc() - - 用于去除一个数的小数部分，返回整数部分。对于非数值它会内部调用Number方法先将其转换为数值。
• Math.sign()方法判断一个数是正数、负数、零或者NaN。对于非数值，会将其转换为数值。他会返回五种值：
  1. 参数为正数，返回+1；
  2. 参数为负数，返回-1；
  3. 参数为 0，返回0；
  4. 参数为-0，返回-0;
  5. 其他值，返回NaN。

四、内置对象之Number：

API：
方法：

• isFinite() - - 检测是否是有限的数字,即不是Infinity。如果参数不是数字直接返回false。
• isNaN() - - 判断参数是不是NaN。
• parseInt() - - 将字符串转为整数【有容错能力】
• parseFloat() - - 将字符串转为浮点数【有容错能力】

有容错能力的意思就是允许后面有非数字的内容。会将前面是数字的内容进行转换。无容错能力就是不会转换

• Number() - - 将字符串转为数字。【无容错能力，遇到不是数字的话就会返回NaN】
• isInteger() - - 用来判断一个数值是否是整数。【如果数字超过了小数点后面的十六个进制则会判断失误因为超过的被遗弃了。或者绝对值小于js能判断的最小值也会失误被转为0】

---

五、内置对象之String：

作用： 处理文本数据
定义对象：

var str = 'abc';
var str = new String('abc');

API:
属性：length - - 字符串的长度
方法：

• charAt(index) - - 获取index位置处的字符
• charCodeAt(index) - - 获取index位置处字符的unicode编码
• String.fromCharCode(code) - - 将unicode编码转换为对应的字符串
• concat() - - 字符串连接
• indexOf(sub) - - 查找符合条件的第一个字符串所在下标
• lastIndexOf(sub) - - 查找符合条件的第一个字符串所在下标(从后往前查)
• slice(start, end) - - 截取子字符串
• subString(start, end) - - 截取子字符串
• split() - - 切割字符串不传值的话就是直接把字符串用数组包起来，传值就是以值为分割。比如：
  
  请仔细看我传入的值，与最后的结果。
• replace(oldString, newString) - - 替换
• toUpperCase() - - 转换为大写
• toLowerCase() - - 转换为小写
• trim() - - 去掉前后空白
• trimStart() - - 去除头部空白
• trimLeft() - - 去除头部空白【trimStart的别名】
• trimEnd() - - 去除尾部空白
• trimRight() - - 去除尾部空白【trimEnd的别名】
• replace(/^\s+|\s+$/g, ‘’) - - 去掉前后空白的兼容写法
• includes(sub) - - 返回布尔值，表示是否找到了参数字符串。
• startsWith(sub) - - 返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith(sub) - - 返回布尔值，表示参数字符串是否在原字符串的尾部。
  从下图可以看到这三个方法都会将数据类型进行隐式转换。
  
  并且上述三个方法支持第二个参数，表示开始搜索的位置：
  
  上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
• repeat - - 返回一个新字符串，表示将原字符串重复N次。

注意：传入的如果是小数会向下取整;传入的如果是负数或者Infinity会报错;传入的如果是字符串会先进行隐式类型转换【不是纯数字的字符串会被转为0】

• padStart - - 用于头部补全
• padEnd - - 用于尾部补全
  

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
如果省略第二个参数，默认使用空格补全长度。

• matchAll() - - 返回一个正则表达式在当前字符串的所有匹配

---

六、内置对象之Date：

作用：

创建方法：

let date = new Date();	//系统当前时间
let date = new Date(value);		//value是距1970-1-1 0：0：0（UTC）依赖的毫秒值
let date = new Date(dateString);	//dateString表示日期时间字符串“yyyy-MM-ddThh:mm:ss”
let date = new Date(year,month[, hour[, minutes[, seconds[, milliseconds]]]]);;	//传递日期时间数字。month合理取值为0~11；

API:
获取时间：

getFullYear()	//获取四位年份
getMonth()		//获取月份，返回值是0~11
getDate()		//获取日期
getDay()		//获取星期，返回值是0~6
getHours()		//获取小时
getMinutes()	//获取分钟
getSeconds()	//获取秒
getMilliseconds()	//获取毫秒
getTime()		//获取距 1970-1-1 0:0:0 以来的毫秒值

设置时间：

setFullYear()	//设置四位年份
setMonth()		//设置月份，传值是0~11
setDate()		//设置日期
setHours()		//设置小时
setMinutes()	//设置分钟
setSeconds()	//设置秒
setMilliseconds()	//设置毫秒
setTime()		//设置距1970-1-1 0：0：0多少毫秒是什么时间（取负值的话就是1970年之前）

时间转换：

Date.parse()	//解析，将日期时间字符串转换为表示时间的毫秒值
toString()		//将日期时间字符串转换为字符串
toUTCString()	//将日期时间转换为世界标准时间的字符串
valueOf()		//返回Date对象的原始值。与getTime()一致。
tolSOString()	//将日期时间转为格式为  YYYY-MM-DDTHH:mm:ss.sssZ  的字符串 
toJSON()		//返回 Date 对象的字符串形式。

获取日期时间毫秒值:

new Date.getTime()
Date.parse()
new Date().valueOf()
+new Date()	//隐式类型转换的方法
Date.now()	//ES5的方法

---

七、内置对象之JSON（ES5新增内置对象）

全称：
JavaScript Object Notation(JavaScript对象表示法)

作用：
用于存储和交换数据的文本格式（XML）

API：

//将JS值转换为JSON文本字符串
JSON.stringify()	
//将JSON文本字符串解析为JS值
JSON.parse()

//编码
encodeURIComponent()
//解码
decodeURIComponent()

小案例：

JSON.stringify与JSON.parse也可以用来拷贝对象的值，我们上面的小例子就已经实现了拷贝对象。

这个小案例就实现了编码与解码的操作。
注意传入的值要是字符串才可以哦~

结束语

更多内置对象欢迎对mdn文档进行翻阅：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects