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

电玩女神 2024-04-18 13:42 101阅读 0赞

## 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，隐式属性

## 内置对象之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个空间

## 内置对象之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

## 内置对象之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, length) - - 截取子字符串
 *  split() - - 切割字符串不传值的话就是直接把字符串用数组包起来，传值就是以值为分割。比如：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]

*  replace(oldString, newString) - - 替换
 *  toUpperCase() - - 转换为大写
 *  toLowerCase() - - 转换为小写
 *  trim() - - 去掉前后空白
 *  replace(/^\\s+|\\s+$/g, ‘’) - - 去掉前后空白的兼容写法

## 内置对象之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年之前）

获取日期时间毫秒值:

> new Date.getTime()  
> Date.parse(new Date)  
> 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()

小案例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]  
JSON.stringify与JSON.parse也可以用来拷贝对象的值，我们上面的小例子就已经实现了拷贝对象。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]  
这个小案例就实现了编码与解码的操作。  
注意传入的值要是字符串才可以哦~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ef4302765c24477e82d3a78df07c0689.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cc3c5bb449174d74ba42a723a21bd42a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/04cb0d730b26421c964860b3e21e4e36.png