【从0-1的JavaScript】第2篇：JS对象的创建、使用已经内置对象
文章目录
- JavaScript对象
- JavaScript创建对象
- {}创建对象
- 通过Object对象创建
- 通过构造函数来创建对象
- 通过类创建对象
- 对象属性的访问
- 对象属性的修改
- 对象属性的删除
- 对象属性的添加
- JavaScript内置对象
- Number
- Math
- Date
- String
- RegExp
- Array
- JSON
- 总结
JavaScript对象
JavaScript是一种面向对象的编程语言，JavaScript中的所有东西都是对象，对象是一个属性的无序集合，每个属性都有一个名称和值（键值对）。
JavaScript创建对象
{}创建对象
语法：使用{}来创建对象，{}中用来定义对象中的属性，属性之间用逗号分隔开来，{}中有定义的函数一般被称为方法。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js对象创建</title>
</head>
<body><script>let person = {name : "嬴政",gender : "男",dynasty : "秦",commentFunc: function (){return "千古一帝";}}console.log(`人物:${person.name},后世评价:${person.commentFunc()}`)</script>
</body>
</html>
通过Object对象创建
Object是JavaScript中一切对象的基础对象，所有的对象都是基于它而来，所以创建的Object对象内部基本都是一些不对外开放的方法属性，是用来提供开发者创建空对象使用的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js对象创建</title>
</head>
<body>
<script>let obj1 = new Object();let obj2 = Object();console.log(obj1);console.log(obj2);
</script>
</body>
</html>
通过构造函数来创建对象
构造函数是一种特殊函数，主要是用来初始化对象的，约定俗成来说，构造函数的函数名一般都要进行大写，普通函数的函数名一般都会小写。
对象通过new 构造函数来创建。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js对象创建-构造函数</title>
</head>
<body>
<script>function Person(name = "刘邦",dynasty = "西汉",commentDesc = "草根创业成功") {this.name = name;this.dynasty = dynasty;this.commentFunc = function (){return commentDesc;}}let Person1 = new Person();console.log(`人物:${Person1.name},后世评价:${Person1.commentFunc()}`)let Person2 = new Person("刘秀","东汉","大魔导师，位面之子");console.log(`人物:${Person2.name},后世评价:${Person2.commentFunc()}`)
</script>
</body>
</html>
通过类创建对象
与C++中类型，只是构造函数名必须为construction，也等同于python中类的init方法。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js对象创建-类</title>
</head>
<body>
<script>class Person{constructor(name,dynasty,commentDesc) {this.name = name;this.dynasty = dynasty;this.commentDesc = commentDesc;}commentFunc(){return this.commentDesc;}}let Person1 = new Person("刘彻","西汉","三猪，穷兵黩武");console.log(`人物:${Person1.name},后世评价:${Person1.commentFunc()}`)let Person2 = new Person("刘秀","东汉","大魔导师，位面之子");console.log(`人物:${Person2.name},后世评价:${Person2.commentFunc()}`)
</script>
</body>
</html>
对象属性的访问
访问对象属性可以通过对象名.属性名或者对象名[“属性名”]来进行访问
对象属性的修改
修改对象的属性同样可以通过对象名.属性名或者对象名[“属性名”]来进行修改
对象属性的删除
删除对象属性可以通过delete关键字来进行，仅是将该属性值置为undefined或者null，并不是删除该属性值
对象属性的添加
可以通过对象名.属性名或者对象名.方法名来添加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js对象使用</title>
</head>
<body>
<script>let person = {name : "嬴政",gender : "男",dynasty : "秦",commentDesc : "穷兵黩武",commentFunc: function (){return "千古一帝";}}// 1、对象属性的访问console.log(person.name);console.log(person["dynasty"]);// 2、对象属性的修改person.commentDesc = "千古一帝，奠定中国的基本板块";// 3、对象属性的删除delete person.dynasty;console.log(person.dynasty);// 4、属性的追加person.preDynasty = "秦";person.say = function () {console.log("强汉");}console.log(`前一个朝代：${person.preDynasty}`)</script>
</body>
</html>
JavaScript内置对象
JavaScript有提供一些内置对象来给开发者直接使用，内置对象主要是以下几种
Number
数值对象，在js中一切的数值类型数据,都附带Number对象的属性方法，可以直接使用Number而不需要单独创建对象。
| 方法 | 描述 |
|---|---|
toFixed(n) | 保留n个小数位 |
| toLocaleString() | 千分位数字格式化，逗号分隔符格式 |
| toPrecision(n) | 格式化数值的显示长度（n的取值范围在[1,21]）。 |
Math
数学对象, 是一个静态对象，所以直接使用Math对象即可，不需要使用new创建对象，所谓静态对象，可以理解为python中的单例对象。
| 方法/属性 | 描述 |
|---|---|
Math.round(num) | 对数值num进行四舍五入取整。 |
Math.ceil(num) | 对数值num进行向上取整，也叫进一法取整。 |
Math.floor(num) | 对数值num进行向下取整，保留整数部分，去除小数部分，也叫地板取整或舍一法取整。 |
| Math.abs(num) | 去数值num的绝对值 |
| Math.max(a,b,c,d…) | 求最大值 |
| Math.min(a,b,c,d…) | 求最小值 |
Math.random() | 获取范围在[0,1)内的随机数值。 |
| Math.PI | 圆周率 |
Date
日期对象，获取浏览器所在系统的时间相关信息
语法：var d = new Date(); var d = new Date(“2022-06-17 12:30:30”);
| 方法/属性 | 描述 |
|---|---|
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。周日为0 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
String
String是用来处理字符串的对象，提供了大量操作字符串的方法和一些属性。
| 方法 | 描述 |
|---|---|
concat() | 拼接两个或更多字符串，并返回新的字符串。 |
fromCharCode() | 将 Unicode 编码转为字符，支持ASCII编码转换字符。 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的下标位置。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
search() | 查找与正则表达式相匹配的下标。 |
match() | 查找找到一个或多个正则表达式的匹配。 |
replace() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 |
replaceAll() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 |
split() | 把字符串分割为字符串数组，支持按正则表达式进行模糊分割 |
startsWith() | 查看字符串是否以指定的子字符串开头。 |
endsWith() | 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 |
includes() | 查找字符串中是否包含指定的子字符串。 |
slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
trim() | 去除字符串两边的空白。 |
RegExp
JavaScript中的正则是一个对象，不是一个字符串格式, js中使用的正则和python里面的正则是同一套，常用于表单数据校验。
格式：/正则模式/模式修正符
| 模式修正符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配，让*号通配符可以匹配换行符。 |
正则对象的方法
| 方法 | 描述 |
|---|---|
exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 |
test | 检索字符串中指定的值。返回 true 或 false。 |
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div class="links"><a href="https://www.baidu.com">百度</a><a href="https://www.tmall.com">天猫</a><a href="https://www.jd.com">京东</a>
</div>
<script>// // 创建正则对象有2种方式：// // 1. 正则字面量创建[常用]// var reg = /1[3-9]\d{9}/// // 2. 基于RegExp构造函数创建// reg = new RegExp(/1[3-9]\d{9}/)// res = reg.test("13312345678")// console.log(res);// // 正则替换，捕获模式，模式的反向引用// mobile = "13312345678" // 133****5678// var ret = mobile.replace(/(1[3-9]\d)\d{4}(\d{4})/,"$1****$2"); // 捕获模式, 参数中的$1代表正则中的第一个小括号的内容,$2表示第二个小括号,这种用法叫反向引用.// console.log(ret); // 133****5678// // 正则分割// var str = "1323fdsd23545das53466";// ret = str.split(/\d+/);// console.log(ret); // ["", "fdsd", "das", ""]// 正则查找// var exp = /^1[3-9]\d{9}$/// console.log( exp.exec("13312345678") );// 正则匹配var links = document.querySelector(".links").innerHTML;console.log(links)// var exp = /<a href="(.*?)">(.*?)<\/a>/// console.log(links.search(exp)); // 获取首次匹配的下标// console.log(links.match(exp)); // 获取首次匹配的内容信息var exp1 = /<a href="(.*?)">(.*?)<\/a>/gconsole.log(links.match(exp1)); // 获取所有匹配的内容</script>
</body>
</html>
Array
数组对象，提供了所有关于数组类型数据的基本操作。
| 方法 | 描述 |
|---|---|
concat() | 合并数组，连接两个或更多的数组，并返回结果。 |
pop() | 删除数组的最后一个元素并返回删除的元素。 |
push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
shift() | 删除并返回数组的第一个元素。 |
unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
reverse() | 反转数组的元素顺序。 |
| entries() | 返回数组的可迭代对象。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
forEach() | 数组每个元素都执行一次回调函数。 |
includes() | 判断一个数组是否包含一个指定的值。 |
slice() | 选取数组的一部分，并返回一个新数组。相当于python中的切片操作 |
indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
Array.isArray() | 判断对象是否为数组。 |
join() | 把数组的所有元素放入一个字符串。与字符串的**split**方法对应。 |
every() | 检测数值元素的每个元素是否都符合条件。 |
| some() | 检测数组元素中是否有至少一个元素符合指定条件。 |
filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素的值。filter的别名函数 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素的索引。 |
map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
sort() | 对数组的元素进行排序，也可以把排序函数作为参数进行排序。 |
splice() | 从数组中添加、删除、替换元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
JSON
JSON 全称为“JavaScript Object Notation”，是当前最流行的一种轻量级的数据交换格式，用来存储和传输数据，通常服务器端与客户端在进行交互时就是使用 JSON 格式的数据
| 方法 | 描述 |
|---|---|
JSON.stringify(obj) | 把obj对象转换成json格式字符串，会移除对象方法 |
JSON.parse(str) | 把符合json语法的字符串转换成js对象 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>// // 把对象转换成json字符串// var a = {name:"小名",age:18,};// console.log(a);// var t = JSON.stringify(a);// console.log( t ); // {"name":"小名","age":18}// console.log( typeof t ); // string// 把符合json语法的字符串转换成对象var str = '{"name":"小名","age":18}';console.log(str);data = JSON.parse(str);console.log(data);
</script>
</body>
</html>
总结
JavaScript是一种面向对象的编程语言，JavaScript中的所有东西都是对象，对象的创建可以通过{}、构造函数、class类、Object来创建，同时对象属性的访问和修改都可以对象名.属性名或者对象名[“属性名”]，使用delete删除对象属性时只是将该属性值置为undefined或者null，而不是删除这个属性，JavaScript也提供了很多内置对象及其方法来给开发者使用。