03【Web】基础-JavaScript
2024-05-11 01:15:18
03【Web】基础-JavaScript(P2)对象
本系列文章，针对Web前端的相关知识进行了详细的介绍
文章目录
- 03【Web】基础-JavaScript(P2)对象
- 1. 数组对象
- 1.1 基本用法
- 1.1.1 声明、创建、初始化
- 1.1.2 常用属性和方法
- 1. 常见属性
- 2. 常用方法
- 1.1.3 二维数组
- 1.2 常用算法
- 1.2.1 查找算法
- 1. 线性查找
- 2. 二分法查找
- 1.2.2 排序算法
- 1. 冒泡排序
- 2. 插入排序
- 3. 快速排序
- 1.2.3 存放对象的数组
- 2. 字符串对象
- 2.1 字符串的创建
- 2.1.1 字面量方式
- 2.1.2 new方式
- 2.1.3 转移字符
- 2.2 Stirng与stirng的区别
- 2.3 字符串的常用方法
- 2.3.1 频繁使用
- 2.3.2 经常使用
- 2.3.3 不常使用
- 3. RegExp正则表达式对象
- 3.1 介绍
- 3.2 使用正则对象(表达式)
- 3.2.1 创建正则表达式
- 1. 直接量
- 2. 构造函数方式
- 3. 参数说明
- 3.2.2 执行正则表达式
- 1.exec()方法
- 2.test()方法
- 3.complie()方法
- 3.2.3 正则表达式的通配符
- 1. 元字符
- 2. 括号表达式
- 3. 常见量词
- 4. 常用验证的正则表达式
- 3.3 综合和案例
- 4. Date对象
- 4.1 声明,创建
- 4.2 常用属性和方法
- 5. Math对象
- 5.1 声明,创建
- 5.2 常用属性和方法
- 6.自定义对象
- 6.1 构造函数方式
- 6.2 原始方式
- 6.3 原型方式
- 6.4 混合方式
- 6.5 JSON方式
- 总结
JS的对象是其特征之一，是自我包含的数据集合。非常重要
|
|
|
|---|---|---|
|
|
|
|
1. 数组对象
Array是一个有序的数据集合，使用单独的变量名来存储一些列数据的数据类型。
与强类型语言不同：在JS中定义数组时不需要指定数组的数据类型。
1.1 基本用法
1.1.1 声明、创建、初始化
语法：
/* 语法 */
new Array();
new Array(size); // 返回一个长度为size的数组，每个元素均为undefined
new Array(element0,element1,element2,...,elementn);
特点:
数组的长度可变。总长度等于数组的最大索引+1
同一数组中的元素类型可以互不相同
当访问未赋值的数组元素时，该元素值为undefined，不会数组越界
示例：
/* 示例 */
var array=[]; //定义一个空数组
var goodTypes=new Array(); //定义一个空数组,并通过索引赋值
goodTypes[0]="男装";
goodTypes[1]="女装";
var foodTypes = new Array("卤菜", "川菜","粤菜");
for (const key in foodTypes) {if (Object.hasOwnProperty.call(foodTypes, key)) {const element = foodTypes[key];document.write(element);}
}var MovieTypes = new Array(8); // 返回一个长度为 8 的数组，每个元素均为undefined
for (const key in MovieTypes) {if (Object.hasOwnProperty.call(MovieTypes, key)) {const element = MovieTypes[key];document.write(element);}
}/* 简写 */
var foods=["兰州拉面","潍坊火烧","背景烤鸭","德州扒鸡"]; // 直接为数组赋值
1.1.2 常用属性和方法
1. 常见属性
| 常用属性 | 说明 |
|---|---|
| array.length | 数组的长度 |
| array.constructor | 返回对此对象的构造函数的引用 |
| array.prototype | 为对象添加属性和方法 |
/* 数组属性演示方法 */
function arrayProperty() {var movies = new Array('飓风营救', '复仇者联盟3:无限战争','疯狂的麦克斯:狂暴之路', '分歧者:绝地反击');switch (movies.constructor) {case String: confirm('movie是一个字符串'); break;case Array: confirm('movies是一个数组对象'); break;case Date: confirm('movies是一个时间对象'); break;default: confirm('movies不是内置对象'); break;}
}
2. 常用方法
| 方法 | 说明 |
|---|---|
| arrayA.push (newElement1,…,newElementX); | 用于向数组尾部添加一个或多个元素，返回数组的新长度 |
| arrayA.pop() | 用于删除并返回数组中尾部最后一个元素 |
| arrayA.concat(arrayB,arrayC,…arrayN); | 用于连接俩个或多个数组，返回合并后的新数组,而原数组保持不变 |
| arrayA.join(separator); | 将数组中的元素通过指定的字符串连接 |
| arrayA.unshift(newElement1,…,newElementX); | 用于向数组开头添加一个或多个元素，并返回新的数组长度 |
| arrayA.shift() | 用于删除并返回数组中开头第一个元素 |
| arrayA.sort([sortby]); | 用于对当前数组进行排序 |
| arrayA.reverse() | 在原有的数组的基础上颠倒数组中元素的顺序,不会创建新数组 |
| array.Foreach() | 对数组元素遍历后逐个操作 |
| arrayA.slice(start,[end]); | 从数组中返回指定的一部分元素 |
|
arrayA.splice (index,howmany,[item1,…itemX)]); 向数组中添加1-n个元素 或者从数组中删除元素 |
index必选：规定添加和删除元素的位置， index<0 时从数组尾部向前计数 ,-1表示最后一个元素，-2表示导数第二 howmany必选：表示要删除元素的数量，0代表不删除数据 [items]可选：表示向数组中添加和替换的元素 |
function arrayConcat() {var movies = new Array('飓风营救', '复仇者联盟3:无限战争','疯狂的麦克斯:狂暴之路', '分歧者:绝地反击');var newMovie = '长津湖:水门桥';var hotMovie = movies.concat(newMovie);var htmlstr = '<p>';(function (movieArray, description) {// document.write(description + ":");htmlstr += description + ":";for (let i = 0; i < movieArray.length; i++) {// document.write(movieArray[i]);htmlstr += movieArray[i];if (i != movieArray.length - 1) {// document.write('、');htmlstr += "、";}}})(movies, '原始影片');// document.write('<hr/>');htmlstr += '</p><hr/><p>';(function (movieArray, description) {// document.write(description + ':');// document.write(movieArray.join('_'));htmlstr += description + ':';htmlstr += movieArray.join('_');})(hotMovie, '最新热映');document.getElementsByClassName('result')[0].innerHTML = htmlstr + "</p>";
}function arrayjoin() {//匿名函数 定一个排序规则var sortNumber = function (a, b) {return b - a;}// 匿名函数 定义一个连接字串var showFoodsByJoin = function (foods) {// document.write('<hr>中国美食：\t');// document.write(foods.join(','));document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>中国美食：\t'+foods.join(',');}var foods = new Array();foods[0] = '兰州拉面';foods[1] = '肉夹馍';foods.push('潍坊火烧');var length = foods.push('泰山包子');// document.write('<hr>排序前的数组长度：' + foods.length);document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>排序前的数组长度：' + foods.lengthshowFoodsByJoin(foods);foods.push('周黑鸭');foods.push('柳亭猪蹄');foods.push('德州扒鸡');showFoodsByJoin(foods);foods.unshift('淄博烧饼');showFoodsByJoin(foods);/* 向数组中添加1-n个元素或者从数组中删除元素，index必选，规定添加和删除元素的位置，index<0 时从数组尾部向前计数,-1表示最后一个元素，-2表示导数第二howmany必选，表示要删除元素的数量，0代表不删除数据[items]可选：表示向数组中添加和替换的元素从第二项开始删除两项，替换为‘北京烤鸭’,总数减少一项 */foods.slice(2, 2, '北京烤鸭');showFoodsByJoin(foods);var betterfood = foods.slice(1, 4);//document.write('<hr>获赞的食品：' + betterfood);document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>获赞的食品有：' + betterfood;//document.write('<hr>获赞反向的：' + betterfood.reverse());document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>获赞逆向显示：' + betterfood.reverse();var prices = [35, 82, 20, 16, 55];//document.write('<hr>排序前的数组：' + prices);document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>排序前的数组：' + prices;//document.write('<hr>默认的默认方式：' + prices.sort());document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>默认排序方式：' + prices.sort();//document.write('<hr>指定排序方式：' + prices.sort(sortNumber));document.getElementsByClassName('resultMethod')[0].innerHTML+='<hr>指定排序方式：' + prices.sort(sortNumber);
}
1.1.3 二维数组
在JS中，没有二维数组或多维数组，不能通过new Array()的方式来创建。只能利用Js的若数据类型特点，在一维数组中存放另一个数组的方式来模拟实现二维数组
var array=new Array();
array[0] = new Array('科幻','流浪地球',80);
array[1]=new Array('战争','长津湖',79);
array[2]='从1992到2012年这二十年时本次太阳纪的最后一个周期,又被称为"地球更新期"...';
array[3]=88;
/* 简写 */
var movies=[['科幻','流浪地球',80],['战争','长津湖',79],['动漫','雄狮少年',6],['戏剧','赵氏孤儿',100]
]
示例：
function arrayMatrix() {var title = new Array('电影类型', '电影名称', '票价');var movies = [['科幻', '流浪地球', 57.9],["动漫", "雾山五行", 27.9],["战争", "长津湖", 87.9],["历史", "我和我的父辈", 97.9],];var htmlstr='';// document.write('<table border="1px" rules="all">');htmlstr+='<table border="1px" rules="all">';// document.write("<tr>");htmlstr+="<tr>";for (let index = 0; index < title.length; index++) {// document.write("<th>" + title[index] + "</th>");htmlstr+="<th>" + title[index] + "</th>";}for (let i = 0; i < movies.length; i++) {// document.write('<tr>')htmlstr+='<tr>';for (let j = 0; j < movies[i].length; j++) {// document.write("<td>"+ movies[i][j]+"</td>");htmlstr+="<td>"+ movies[i][j]+"</td>";}// document.write('</tr>')htmlstr+='</tr>';}// document.write('</table>');htmlstr+='</table>';document.getElementsByClassName('resultMatrix')[0].innerHTML=htmlstr;
}
<script>/* 杨辉三角形 */var array = new Array(8);for (let i = 0; i < array.length; i++) {array[i] = new Array();for (let j = 0; j <= i; j++) {if (j == 0 || j == i) {array[i][j] = 1;} else {array[i][j] = parseInt(array[i - 1][j]) + parseInt(array[i - 1][j - 1]);}}}for (let i = 0; i < array.length; i++) {for (let j = 0; j < array[i].length; j++) {document.write(String(array[i][j]).padStart(2, '0') + " ");}document.write("</br>");}
</script>
1.2 常用算法
1.2.1 查找算法
/* 触发查找方法 */
btnSearch.onclick = function () {var searchMethodArr = document.getElementById('searchMethod');var searchMethod = searchMethodArr.options[searchMethodArr.selectedIndex];var arraySrc = arrayItemSearch.value.split(',');var searchItem = arraySearch.value;switch (parseInt(searchMethod.value)) {case 0: SearchLine(arraySrc, searchItem); break;case 1: SearchBranch(SortInsert(arraySrc).split(','), searchItem); break;case 2: SearchMinAndMax(arraySrc); break;default: break;}
}
1. 线性查找
/* 线性查找 */
function SearchLine(arraySrc, item) {var index = -1;for (let i = 0; i < arraySrc.length; i++) {if (item == arraySrc[i]) {index = i + 1;break;}}if (index != -1) {alert('检索到所查询数据' + index);} else {alert('未找到检索数据!');}
}
/* 查找最大最小值 */
function SearchMinAndMax(arraySrc) {var max = arraySrc[0];var min = arraySrc[0];for (let i = 0; i < arraySrc.length; i++) {if (arraySrc[i] >= max) {max = arraySrc[i];}if (min >= arraySrc[i]) {min = arraySrc[i]}}alert('数组中最大最小值分分别为:Max=' + max + 'Min=' + min);
}
2. 二分法查找
/* 二分法查找 */
function SearchBranch(arraySrc, item) {var start = 0;var end = arraySrc.length;var middle;var index = -1;while (start <= end) {middle = parseInt((start + end) / 2);item1 = parseInt(item);arraySrc1 = parseInt(arraySrc[middle]);if (item1 == arraySrc1) {index = middle + 1;break;}if (item1 < arraySrc1) {end = middle - 1;}if (item1 > arraySrc1) {start = middle + 1;}}if (index != -1) {alert("二分法需要先进性排序：" + arraySrc.join(',') + '\r\n检索到所查询数据:' + index);} else {alert('二分法需要先进性排序：' + arraySrc.join(',') + '\r\n未找到检索数据!');}
}
1.2.2 排序算法
/* 触发排序方法 */
btnSort.onclick = function () {var sortMethodArr = document.getElementById('sortMethod');var sortMethod = sortMethodArr.options[sortMethodArr.selectedIndex];var arraySrc = arrayItemSort.value.split(',');var sortResult;switch (parseInt(sortMethod.value)) {case 0: sortResult = SortBubble(arraySrc); break;case 1: sortResult = SortSelect(arraySrc); break;case 2: sortResult = SortInsert(arraySrc); break;default: break;}arraySort.value = sortResult;
}
1. 冒泡排序
/* 冒泡排序 */
function SortBubble(array) {var arrayint = [];array.forEach(element => {arrayint.push(+element);});for (let i = 0; i < arrayint.length; i++) {for (let j = 0; j < arrayint.length - 1 - i; j++) {if (arrayint[j] > arrayint[j + 1]) {var temp = arrayint[j];arrayint[j] = arrayint[j + 1];arrayint[j + 1] = temp;}}}return arrayint.join(',');
}
2. 插入排序
/* 插入排序 */
function SortInsert(params) {var arrayInt = [];params.forEach(function (data, index, arr) {arrayInt.push(+data);});for (let i = 1; i < arrayInt.length; i++) {var temp = arrayInt[i];var j = i;while (j > 0 && temp < arrayInt[j - 1]) {arrayInt[j] = arrayInt[j - 1];j--;}arrayInt[j] = temp;}return arrayInt.join(',');
}
3. 快速排序
/* 选择排序 */
function SortSelect(params) {var arrayInt = [];params.forEach(function (data, index, arr) {arrayInt.push(+data);});var index = 0;// N个数比较N-1轮for (let i = 0; i < arrayInt.length - 1; i++) {// 记录当前数为最小数index = i;for (let j = i + 1; j < arrayInt.length; j++) {// 当发现最小数时记下下标if (arrayInt[index] > arrayInt[j]) {index = j;}}if (index != i) {var temp = arrayInt[i];arrayInt[i] = arrayInt[index];arrayInt[index] = temp;}}return arrayInt.join(',');
}
1.2.3 存放对象的数组
2. 字符串对象
2.1 字符串的创建
2.1.1 字面量方式
- 字符串类型是一个基本的数据类型，而字符串对象是将字符串封装成了一个对象。
- 封装后的对象可以调用该对象的属性和方法。在Js中可以隐式地将一个字符串转换成一个字符串对象。
var movieString="哪吒"
2.1.2 new方式
- new方式创建字符串对象是通过调用String()构造函数来完成的，并返回一个String对象
- 使用字面量方式创建字符串时，其类型是string类型，而通过new方式创建时，返回的是String对象。
- 仅使用构造函数而没有new关键字时，类型也是string类型
var movieString=new String("哪吒")
2.1.3 转移字符
另外，也有一些教程将转移字符视为一种特殊的数据类型
| 特殊字符 | 含义 | 特殊字符 | 含义 |
|---|---|---|---|
| \b | 表示退格 | \ " | 表示双引号本身 |
| \n | 表示换页 | \ ’ | 表示单引号本身 |
| \t | 表示Tab符号 | \ \ | 表示反斜线 |
| \r | 表示回车符 | \b | 表示退格 |
2.2 Stirng与stirng的区别
| 比较维度 | String | string |
|---|---|---|
| 含义 | String是string的包装类 | 字面含义 |
| 构造函数 |
String是构造函数可使用其创建字符串对象 具有substring()等方法 |
string是一种基本的数据类型 没提供substring()等方 |
| prototype |
String对象具有prototype原型对象 通过浏览器的端点调试方式可查看此区别 |
string没有提供prototype |
| typeof() 查看类型 | String对象返回Object String()返回function | string变量返回string |
| 比较(==) | String对象则判断是否对同一对象进行引用 | string类型判断其值是否相等 |
| 声明周期 | 使用new创建的对象会一直存在 | 自动生成的后台代码，执行后立即销毁 |
2.3 字符串的常用方法
2.3.1 频繁使用
| 方法 | 说明 |
|---|---|
| toString() | 返回字符串 |
| charAt(index) | 返回在指定位置的字符 |
| concat() | 连接字符串 |
| split() | 把字符串分割为字符串数组 |
| slice(start,[end]) | 提取字符串的片段，并在新的字符串中返回被提取的部分 |
| substr(strat,length) | 从起始索引号提取字符串中指定数目的字符 |
| substring(string,[stop]) | 提取字符串中两个指定的索引号之间的字符 |
| match(searchvalue/regExp) | 找一个或多个正则表达式的匹配 |
| search(regExp) | 检索与正则表达式匹配的值 |
| valueOf() | 返回某个字符串对象的原始值 |
| fromCharCode() | 从字符编码创建一个字符串 |
| charCodeAt() | 返回指定位置字符的Unicode码 |
2.3.2 经常使用
| 方法 | 说明 |
|---|---|
| replace(regExp/substr,replacement) | 替换与正则表达式匹配的子串 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| indexOf(searchValue,[fromIndex]) | 检索字符串 |
| lastIndexOf(searchValue,[fromIndex]) | 从后向前检索字符串 |
| toLocaleLowerCase() | 按本地方式把字符串转换为小写 |
| toLocaleUpperCase() | 按本地方式把字符串转换为大写 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
2.3.3 不常使用
| 方法 | 说明 | 方法 | 说明 |
|---|---|---|---|
| fontsize(size) | 指定显示字符串尺寸size取1-7 | fontcolor(color) | 使用指定的颜色来显示字符串 |
| big() | 用大号字体显示字符串 | blink() | 显示闪动字符串 |
| bold() | 使用粗体显示字符串 | fixed() | 以打字机文本显示字符串 |
| italics() | 使用斜体显示字符串 | link() | 将字符串显示为链接 |
| small() | 使用小字号来显示字符串 | strike() | 使用删除线来显示字符串 |
| sub() | 把字符串显示为下表 | sup() | 把字符串显示为上标 |
注意：JavaScript中的字符串与Java中字符串的区别：
- Java中字符串可以用单引号括起来
- JavaScript中比较两个字符串的字符序列是否相等使用 == 即可，无需使用equals 方法
3. RegExp正则表达式对象
3.1 介绍
- 概念
正则表达式是字符串操作的一种逻辑公式，就是实现定义好的一些特殊字符、以及这些特殊字符的组合，组合成一个"规则字符出串"，这个“规则字符串”用来表达对字符串的一种过滤逻辑
- 历史
正则表达式(Regular Expression)最早出现在20世纪40年代，在数学与计算机科学理论中用于反映“正则性”的数学表达特征。直到20世纪70年代末，才真正用于程序设计领域。目前流行的程序设计语言都支持正则表达式。
- 目的
判断给定的字符串是否符合正则表达式的过滤逻辑（“匹配”）
通过正则表达式，截取我们从字符串中想要获取的特定部分
- 特点
灵活性、逻辑性和功能性较强
可以迅速地用极简单的方式达到字符串的复杂控制
比较晦涩难懂
3.2 使用正则对象(表达式)
3.2.1 创建正则表达式
1. 直接量
var regExp=/pattern/attributes; // 不用加双引号
2. 构造函数方式
var regExp=new RegExp(pattern,attributes)
3. 参数说明
以上两种方式下，关于pattern和attributes的 参数说明
| 参数 | 说明 |
|---|---|
| pattern | 是一个字符串或表达式，表示正则表达式的模式 |
| attributes |
i：匹配时忽略大小写 g：全局匹配，遇到第一个匹配不会停止，会继续查找，直到完成所有匹配 m：多行匹配， |
3.2.2 执行正则表达式
1.exec()方法
检测字符串中正则表达式的匹配情况，当匹配成功时就返回匹配内容和所在位置，语法如下：
var result=regExp.exec(string);
string:表示被检索的字符串
exec():用于返回第一个匹配的内容，可以循环方式进行全局匹配
result:返回的匹配内容，其中 result.index 表示匹配文本的第一个字符出现的位置
其中：获取匹配内容的之后下标使用 regExp.lastIndex
<script type="text/javascript">/* 定义测试字符串 */var str="WebSite CloudWhales Builder by chuanmingxie It's have Copyright at CloudWhales"/*方式1： 使用字面量方式的正则匹配（其中i:忽略大小写，g:全局匹配，可以同时使用） */var regExp=/cloud/ig;var result=regExp.exec(str);alert(result.index);/*方式2： 使用new 对象 方式的正则匹配（其中i:忽略大小写，g:全局匹配，可以同时使用） */var regExpn=new RegExp('cloud','ig');var i=0;var resultStr="";//var resutln=regExpn.exec(str);/* 想使用多次匹配需要通过 while 方式进行多次判空执行 exec */while((result=regExpn.exec(str))!=null){resultStr+="第"+(++i)+"次匹配"+result.index+"~"+regExpn.lastIndex+"\n";}/* 返回查找多次拼接的字符串 */alert(resultStr);
</script>
2.test()方法
当匹配成功时：表示被检索的字符串在参数string与正则表达式匹配时，返回true，否则返回false。
if(RegExpObject.test(string))
exec()方法功能强大，test()方法方便快捷，
RegExpOb.test(string)等价于RegExpob.exec(string)!=null
<script type="text/javascript"> var str="WebSite CloudWhales Build by chuanmingxie He's have Copyright at CloudWhales"var regExp=/whales/ig;var i=0;/* exec方法更为强大,提供了返回结果，尤其是针对通过通配符等定义的正则表达式而言，使用exec可以进行真正的筛选 */while(regExp.test(str)){alert("匹配"+(++i)+"次"+"检测到最后下标"+regExp.lastIndex);}
</script>
3.complie()方法
用于编译指定的正则表达式，编译后的正则表达式会提高执行速度。多次调用同一个正则表达式，可以使用该方法，提高正则表达式的执行速度。单对于只执行一次的正则表达式，则没有太大作用
complie(RegExpObject)
3.2.3 正则表达式的通配符
1. 元字符
| 元字符 | 描述 | 元字符 | 描述 |
|---|---|---|---|
| . | 可以匹配任何字符（除换行和结束符） | \. | 匹配 点 |
| \w | 匹配所有单词字符(0-9,26个字母和下划线) | \s | 匹配所有空白字符（制表、换行、回车均属于） |
| \W | 匹配所有非单词字符 | \S | 匹配所有非空白字符 |
| \d | 匹配所有数字 | \b | 匹配单词边界 |
| \D | 匹配所有非数字 | \B | 匹配非单词边界 |
| \n | 匹配换行 | \xxx | 查找8进制xxx |
| \r | 匹配回车 | \xdd | 查找16进制dd |
<script type="text/javascript">/* 元字符的使用 */var str = "WebSite CloudWhales Build by chuanmingxie" + "\r" +" He's have Copyright at CloudWhales" + "\n" +"This's WebSite use 5-10 days and can running 0x86 0x64 or Liunx 077";document.write(str + "<br/>");var regArray = new Array()regArray[0] = /./;regArray[1] = /\d/regArray[2] = /\D/regArray[3] = /\s/regArray[4] = /\S/regArray[5] = /\n/regArray[6] = /\r/// regArray[7] = /\077/ //检测不到，result.index 报错// regArray[8] = /\x86/ //检测不到，result.index 报错for (let i = 0; i < regArray.length; i++) {// while((result=(regArray[i]).exec(str))!=null){result = (regArray[i]).exec(str);alert(result.index + "~" + regArray[i].lastIndex);document.write(result.toString() + ":" + result.index + "~" + regArray[i].lastIndex + "<br/>")// }}
</script>
2. 括号表达式
| 表达式 | 描述 | 表达式 | 描述 |
|---|---|---|---|
| [0-9] | 匹配0-9之间的字符 | [a-z] | 匹配a-z之间的字符 |
| [A-z] | 匹配A-z之间的字符 | [A-Z] | 匹配A-Z之间的字符 |
| [abc] | 匹配abc内的任意字符 | [boy|girl|body] | 匹配括号内的某一项 |
| [^abc] | 匹配除了abc以外的字符 |
<script type="text/javascript">str="cloudcloudcloud123whalesWhalesABC";document.write(str + "<br/>");var regArray=[/[cloud]/,/[^cloud]/,/[0-9]/,/[a-z]/,/[A-z]/,/[A-Z]/,/["whales"|"123"|"ABC"]/];for (let i = 0; i < regArray.length; i++) {result = (regArray[i].exec(str));alert(result.index + "~" + regArray[i].lastIndex);document.write(result.toString() + ":" + result.index + "~" + regArray[i].lastIndex + "<br/>")}
</script>
3. 常见量词
| 量词 | 说明 | 量词 | 说明 |
|---|---|---|---|
| n+ | 匹配1-多个 | n{x} | 匹配 x 个 |
| n* | 匹配0-多个 | n{x,y} | 匹配x-y个 |
| n? | 匹配0-1个 | n{x, } | 匹配x-多个 |
| n$ | 匹配结尾 | ？=n | 匹配紧跟n 的字符串 |
| ^n | 匹配开头 | ?!n | 匹配没有紧跟n 的字符串 |
^匹配一行开头或字符串的开头；$匹配字符串的结尾或一行的结尾
<script type="text/javascript">var str = "cloudwhalescloudwhales";document.write(str + "<br/>");var regArray = [/w+/, /w*/, /w?/, /d{1,7}/, /d{1}/, /d{0,}/, /^c/, /s$/];// /?=cloud/, /?!cloud/ 检测不到，result.index 报错for (let i = 0; i < regArray.length; i++) {result = (regArray[i].exec(str));alert(result.index + "~" + regArray[i].lastIndex);document.write(result.toString() + ":" + result.index + "~" + regArray[i].lastIndex + "<br/>")}
</script>
4. 常用验证的正则表达式
/* 常用的校验正则表达式 - 数字校验 */
var regNum1 = /^[0-9]*$/; /* 0~n个数字 */
var regNum2 = /^\d{n}$/; /* n位整数 */
var regNum3 = /^\d{n,}*$/; /* 至少n位数字 */
var regNum4 = /^\d{m,n}$/; /* m-n位的数字 */
var regNum5 = /^([1-9][0-9*])+(.[0-9]{1,2})?$/; /* 非零开头,且最多带两位小数的数字 */
var regNum6 = /^((\-)?\d)+(\.\d{1,2})?$/; /* 带1-2位小数的整数或负数 */
var regNum7 = /^[1-9]\d*$/; /* 带零正整数 */
var regNum8 = /^\-[1-9]\d*$/; /* 非零负整数 */
var regNum9 = /^(-? \d+)(\.\d+)?$/; /* 浮点数 *//* 常用的校验正则表达式 - 字符串校验 */
var regletter1 = /^[\u4e00-\u9fa5]{0,}$/; /* 汉字 */
var regletter2 = /^[A-Za-z0-9]+$/; /* 数字和字母组成的字符串 */
var regletter3 = /^.(6,30)$/; /* 长度6-30的所有字符 */
var regletter4 = /^[A-Za-z]+$/; /* 英文字符组成的字符串，不区分大小写 */
var regletter5 = /^[A-Z]+$/; /* 小写英文字符组成的字符串 */
var regletter6 = /^[a-z]+$/; /* 大写英文字符组成的字符串 */
var regletter7 = /^\w+$/; /* 数字，字母，下划线组成的字符串 */
var regletter8=/^[\u4e00-\u9fa5A-Za-z0-9_]+$/; /* 汉字，字母，下划线组成的字符串 */
var regletter9=/^[\u4e00-\u9fa5A-Za-z0-9]+$/; /* 汉字，字母，组成的字符串 */
var regletter10=/^#?([a-f0-9]{6}[a-f0-9]{3})$/; /* 16进制值 *//* 常用的校验正则表达式 - 用户信息校验*/
var userInfo1 = /^((\d{3}-\d{8})|(\d{4}-\d{7}))$/; /* 国内电话号码 */
var userInfo2 = /(^\d{15}$)|(^\d{17}([0-9]|X))$/ /* 身份证号码 */
var userInfo3 = /^\d{4}-\d{1,2}-\d{1,2}/ /* 日期格式 */
var userInfo4 = /[1-9][0-9]{4,}/; /* QQ号，从10000开始 */
var userInfo5 = /\n\s* \r/; /* 可用来删除空白行 */
var userInfo6 = /[1-9]\d{5}(?! \d)/; /* 邮政编码，其中(?! \d)表示位置的后面不能匹配\d */
var userInfo7 = /^[+]{0,1}(d){1,3}[]?([-]?((d)|[]){1,12})+$/; /* 手机号码(不好用) */
var mobilePhoneReg = /^[+]{0,1}\d{1,3}[-| ]?(1[3|4|5|7|8][0-9]{9})$/; /* 手机号码(好用) */
var userInfo8 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; /* Email邮箱 */
var userInfo9 = /((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))/; /* IP地址 */
<script type="text/javascript">/* 正则的神奇之处就在于组合的千变万化，如下面的三种方式 ([.]{1,}) : 括号表达式[]代表限定必须为括号内的字符,只能为"." 表示1-多个 "." 组成字符串([\.]{1,})：与上面表达式一样(.{1,}) : 表示任意超过1个的字符的字符串([0-9A-z-_]) 表示任意 数子、字母、中划、下划线组成的字符串([\dA-z\.])与上面表达式相同*/var regExp = /^[0-9A-z_-]+@([\.]{1,})+\.(com|org|cn)$/;alert(regExp.test("12chuan-_dce@..org")); // true;var regExp = /^[0-9A-z_-]+@(.{1,})+\.(com|org|cn)$/;alert(regExp.test("12chuan-_dce@sina.org")); // true;var regExp = /^([0-9A-z_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;alert(regExp.test("12chuan-_dce@sina.org")); // true;var regExp = /^[0-9A-z_-]+@([0-9A-z-_]{1,})+\.(com|org|cn)$/;alert(regExp.test("12chuan-_dce@sina.org")); // true;
</script>
3.3 综合和案例
/* 验证座机号码： */
function telephoneValidate(telephone) {/* d{3} 表示匹配3个数字。 座机是 区号-号码 包含3位-8位和4位-7位两种形式*/var telephoneReg = /^((\d{3}-\d{8})|(\d{4}-\d{7}))$/;return telephoneReg.test(telephone);
}/* 验证手机号码 */
function mobileValidate(mobile) {/* 电话号码是11位，第二位包括3、4、5、6、7、8，第三位取0-9,最后补全9位 */var mobileReg = new RegExp("1[3|4|5|7|8][0-9]{9}");return mobileReg.test(mobile);
}/* 判断是否为纯数字串 */
function isDigit(str) {var digitReg = new RegExp("^\\d*$");var digitReg2 = /^\d* $/;return digitReg2.test(str);
}function contentValidate(content) {document.write(content + "<br/>");var contentReg = new RegExp('Ea', "gi");var i = 1;while ((result = contentReg.exec(content)) != null) {document.write("第" + (i++) + "次匹配" + result + ",位置在"+ result.index + "~" + contentReg.lastIndex + "<br />");}
}
/* 自调函数 */
(function () {var telephone = "0532-1234-5671234";if (telephoneValidate(telephone)) {document.write(telephone + "座机号码无效<br />");} else {document.write(telephone + "座机号码无效<br />");}var mobile = "17348594235";if (mobileValidate(mobile)) {document.write(mobile + "手机号码有效<br />");} else {document.write(mobile + "手机号码无效<br />");}var num = "123a";document.write(num + ":" + (isDigit(num) ? "使出数字" : "非出数字") + "<br />");var content = "Qingdao,located in the southEast part of Shandong Province,is a beautiful SEASIDE city with clear air and enchanting SEA view";contentValidate(content);document.write("<br />");
})();
4. Date对象
用来对日期和事件进行操作，它的大多数方法需要利用对象调用，因此必须声明和通过new 创建Date对象。
4.1 声明,创建
new Date();
new Date(milliseconds);
new Date(yyyy,MM,dd);
new Date(yyyy,MM,dd,hh,mm,ss);
new Date(MM/dd/yyyy hh:mm;ss);
new Date("month dd,yyyy");
new Date("month dd,yyyy hh:mm:ss");
4.2 常用属性和方法
Date对象没有可供直接访问的对象，只有获取和设置时间的方法
在方法 带有 UTC的均表示设置和获取国际date
setInterval(code,millisec) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
| 方法** | 描 述 | ||
|---|---|---|---|
| getDate() | 返回一个月中的某一天(1~31) | setDate(dateInt) | 设置一个月中的某一天(1~31) |
| getDay() | 返回一周中的某一天(0~6) | setDay(dayInt) | 设置一周中的某一天(0~6) |
| getMonth() | 返回月份(0~11) | setMonth(monthInt) | 设置回月份(0~11) |
| getFullYear() | 返回4位数字的年份 | setFullYear(yearInt) | 设置4位数字的年份 |
| getHours() | 返回Date对象的小时(0~23) | setHours(hourInt) | 设置Date对象的小时(0~23) |
| getMinutes() | 返回Date对象的分钟(0~59) | setMinutes(minInt) | 设置Date对象的分钟(0~59) |
| getSeconds() | 返回Date对象的秒数(0~59) | setSeconds(secInt) | 设置Date对象的秒数(0~59) |
| getMilliseconds | 返回当前毫秒数 | setMilliseconds(millInt) | 设置当前毫秒数 |
| getTime() | 返回1970年1月1日至今的毫秒数 | setTime(timeInt) | 设置从1970年1月1日至今的毫秒数 |
| parse(dataString) | 静态方法返回 getTime | ||
| toLocaleString() |
使用所在计算机上配置的特定时间格式 将Date对象的日期转换为字符串 |
||
| toGMTString | 根据格林尼治时间转化成字符串 | valueOf() | 返回日期对象的原始值 |
(function () {showTime(new Date());showTime(new Date(121825316795));showTime(new Date(2012,05,12));showTime(new Date(2021,10,2,12,08,12));showTime(new Date("10/12/2021 9:25:38"));showTime(new Date("April 25,2045"));showTime(new Date("April 25,2045 18:24:24"));
})();function showTime(myDate) {var year = myDate.getFullYear();var month = myDate.getMonth() + 1;var day = myDate.getDate();var hour = myDate.getHours();var minute = myDate.getMinutes();var second = myDate.getSeconds();var pcontrol = document.getElementsByTagName('p')[2];pcontrol.innerHTML +=getImg(year) + "年" +getImg(month) + "月" +getImg(day) + "日 " +getImg(hour) + ":" +getImg(minute) + ":" +getImg(second) + "<br>";
}function getImg(params) {if (params < 10) {params = '0' + params;}params=params.toString(); //必须toString() 否则length 无效var picpre = "<img src='img/num_";var pixrear = ".png' />";var result = '';for (let i = 0; i < params.length; i++) {result += picpre + params[i] + pixrear;}return result;
}
5. Math对象
处理数学运算
5.1 声明,创建
Math的属性和方法可以直接调用
5.2 常用属性和方法
| 属性 | 描 述 | 属性 | 描述 |
|---|---|---|---|
| LN2 | 返回2的自然对数（约等于0.693） | E | 返回算术常量e，即自然对数的底数（约等于2.718） |
| LN10 | 返回10的自然对数（约等于2.302） | PI | 返回圆周率（约等于3.14159） |
| LOG2E | 返回以2为底的e的对数（约等于1.442） | SORT2 | 返回2的平方根（约等于1.414） |
| LOG10E | 返回以10为底的e的对数（约等于0.434） | SQRT1_2 | 返回2的平方根的倒数（约等于0.7071） |
| 方法 | 描 述 | 方法 | 描 述 |
|---|---|---|---|
| abs(x) | 返回数字的绝对值 | min(x,y) | 求最小值 |
| ceil(x) | 对数字进行上取整 | pow(x,y) | 返回x的y次幂 |
| floor(x) | 对数字进行下取整 | sqrt(x) | 返回数字的平方根 |
| round(x) | 对数字进行四舍五入 | random() | 返回0~1之间的随机数（1-16：random()*16+1） |
| exp(x) | 返回e的指数 | sin(x)/cos(x)/tan(x) | 计算x的正弦、余弦、正切值 |
| log(x) | 返回数字的自然对数（底为e） | asin(x)/acos(x)/atan(x) | 计算x的反正弦、反余弦、反正切值 |
| max(x,y) | 求最大值 |
/* Math对象-属性的使用 */
(function() {document.write('<br />Math.PI=' + Math.PI);document.write('<br />Math.E=' + Math.E);document.write('<br />Math.LN2=' + Math.LN2);document.write('<br />Math.LN10=' + Math.LN10);document.write('<br />Math.LOG2E=' + Math.LOG2E);document.write('<br />Math.LOG10E=' + Math.LOG10E);document.write('<br />半径为4的圆的面积' + circularArea(4));document.write("<br />半径为8，高为10的圆柱体的体积" + CylinderCapacity(8, 10));
})()function circularArea(radius) {return Math.PI * radius * radius;
}function CylinderCapacity(radius, height) {return Math.PI * radius * radius * height;
}/* Math 对象-方法的使用 */
(function() {maxAndMin();var randomNum = 60 + Math.random() * 40;document.write("随机生成一个60-100之间的数：" + randomNum);document.write("<br />round()四舍五入的结果" + Math.round(randomNum));document.write("<br />ceil()向上取整的结果：" + Math.ceil(randomNum));document.write("<br />向下取整的结果：" + Math.floor(randomNum));document.write("</p><hr /><p>");document.write("2的3次幂：" + Math.pow(2, 3));document.write("<br />16的平方根：" + Math.sqrt(16));document.write("<br />90<sup>o</sup>的正弦值是：" + Math.sin(90 * Math.PI / 180)+"</p>");
})()function maxAndMin() {var num = 10;document.write("<hr /><p>随机生成" + num + "个整数:");var array = [];var maxNum = 0;var minNum = 0;for (var i = 0; i < num; i++) {var tmp = Math.random() * 100;array[i] = Math.floor(tmp);document.write(array[i] + "\t");if (i == 0) {maxNum = array[0];minNum = array[0];} else {maxNum = Math.max(maxNum, array[i]);minNum = Math.min(minNum, array[i]);}}document.write("<br />随机数中，最大数为：" + maxNum);document.write("<br />随机数中，最小数为：" + minNum);document.write("</p><hr /><p>")
}
6.自定义对象
6.1 构造函数方式
- 原理:
通过构造函数constructor function创建一个JS对象
构造函数名即为对象的类名，使用时通过new运算符和构造函数创建
- 语法
Function ClassName([param1],[param2],…){this.propertyName=value;this.MethodName=functionName|function() {};
}
- 示例
/* 构造函数定义对象 */
function Goods(name, type, price, color) {this.name = name;this.type = type;this.price = price;this.color = color;this.showInfo = function () {document.write("商品名称为：" + this.name +"<br>商品类型为：" + this.type +"<br>商品价格为：" + this.price +"<br>商品颜色为：" + this.color)}this.showColor = showColor;function showColor() {document.write("商品颜色为：" + this.color + "<br>");}
}
/* 调用对象 */
var goods1 = new Goods("男士衬衫", "男装", 200, "白色");
var goods2 = new Goods("女士花裙", "女装", 700, "红色");
goods1.showColor();
goods2.showInfo();
6.2 原始方式
- 原理:
首选定义一个object对象,然后为对象添加所需的属性和方法
- 使用object创建一个Object对象
- prototypeName表示为object对象添加的属性名
- methodNamr 表示为object添加的方法名
- 方法名的值可以是预先定义好的函数，也可以是匿名函数
- 语法
var object=new object();
object.prototypeName=value;
object.MethodName=functionName|function(){};
- 示例
/* 原始方法定义对象 */
var goodsOption = new Object();
goodsOption.name = "男士白领衬衫";
goodsOption.type = "男装";
goodsOption.price = "580";
goodsOption.color = "white";
goodsOption.showInfo = function () {document.write("商品名称为：" + goodsOption.name +"<br>商品类型：" + goodsOption.type +"<br>商品价格：" + goodsOption.price +"<br>商品颜色：" + goodsOption.color);
}
goodsOption.showColor = showColor;
function showColor() {document.write("<br>商品颜色为：" + goodsOption.color);
}
/* 调用对象 */
goodsOption.showInfo();
goodsOption.showColor();
6.3 原型方式
原理:通过prototype属性对象添加新的属性和方法
语法
object.prototype.name(属性或方法)=value;
/*object表示被扩展的对象，包括系统内置对象和自定义对象Prototype 表示对象的原型name 表示所添加的属性或方法。当添加属性时,value代表属性值；当添加方式时value为函数的引用或匿名函数
*/
- 示例
/* 原型方法定义对象 */
function Goods() { }
Goods.prototype.name = "耐克运动鞋";
Goods.prototype.type = "鞋类";
Goods.prototype.price = "1200";
Goods.prototype.color = "白色";
Goods.prototype.showInfo = function () {document.write("商品名称为：" + this.name +"<br >商品类型为：" + this.type +"<br >商品价格为：" + this.price +"<br >商品颜色为：" + this.color);
}
Goods.prototype.showColor = showColor;
function showColor() {document.write('商品颜色为：' + this.color);
}
/* 调用原型方法定义的对象 */
var goods = new Goods();
goods.showInfo();
goods.showColor();
6.4 混合方式
原理：将以上方式混合使用
语法：遵循各自的语法格式
示例
/* 4. 混合定义法 - 以构造函数定义属性,原型拓展定义方法 */
function goodMuddy(name, type, price, color) {this.name = name;this.type = type;this.price = price;this.color = color;
}
goodMuddy.prototype.showInfo = function () {document.write('商品名称为：' + this.name +"<br>商品类型为：" + this.type +"<br>商品价格为：" + this.price +"<br>商品颜色为：" + this.color);
}
goodMuddy.prototype.showColor = showMuddyColor;
function showMuddyColor() {document.write('<br>商品颜色为：' + this.color);
}
6.5 JSON方式
- 原理
是一种基于ECAMScript的轻量级数据交换格式,采用完全独立于语言的文本格式, 能够以更加简明的方式创建对象JSON对象。
与XML数据相比,JSON数据格式具有简洁易读,数据体积小、传输速度快等的特点。JSON对象是一种轻量级的数据交换格式，是理想的数据交换格式。
- 语法
JSON以{开始 ,以}结束。属性名和属性值之间使用冒号隔开，属性的类型可以是字符串、数值、日期、数组或自定义对象等类型。
方法部分是由方法和匿名函数构造，并使用冒号（“:”）隔开， 属性或方法之间使用逗号（,）隔开,最后一项不需要逗号。
- 示例
定义JSON对象作为自定义对象
var customerData = {name: 'chuamingxie',type: 'Member user',enjoy: ['看剧', '读书', '创造', '运动'],hometown: {province: 'anhui',city: 'huaibei',},orders: [{ name: '男士衬衫', price: '200', type: '男装', numebr: '6' },{ name: '男士鞋服', price: '180', type: '男装', numebr: '2' },],consumption: function () {var sum = 0;this.orders.forEach(element => {sum += element.price * element.numebr;});return sum;},userfeature: function () {document.write('用户姓名：' + this.name + '<br>用户类别：'+ this.type +'<br>用户家乡：' +this.hometown.province + "省 " + this.hometown.city + "市" +'<br>用户爱好：' +this.enjoy.join(','));},
};
将JSON字符串转换为JSON对象
在传输过程中，JSON对象往往以字符串的形式进行传输，所以在页面中需要通过JavaScript中的evel()方式或者Function对象的方式将字符串解析成JavaScript
alert(typeof(evel("{}"))) // return undefined
alert(typeof(evel("({})"))) // return object[object]
/* 即进行JSON转化时，要添加一对小括号才能进行正常转化 */
var movieStr = '{' +'name:"长津湖",' +'type:"战争",' +'price:80,' +'showInfo:function(){' +'document.write("影片名称："+this.name+",电影类型："+this.type+",票价："+this.price+"<br/>");'+'}' +
'}';
var movie = eval("(" + movieStr + ")");
movie.showInfo();
var movieStr = '{' +'name:"长津湖",' +'type:"战争",' +'price:80,' +'showInfo:function(){' +'document.write("影片名称："+this.name+",电影类型："+this.type+",票价："+this.price+"<br/>");'+'}' +
'}';
document.write('方式1')
var movie=(new Function("","return"+movieStr))();
movie.showInfo();document.write('方式2')
var movie2=new Function("","return"+movieStr);
var movie=new movie2();
movie.showInfo();
总结
以上就是【Web】基础-JavaScript(P2)-对象的基本介绍
03【Web】基础-JavaScript相关推荐
- Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- educoder头歌实训 web课——JavaScript语言基础：JS循环语句
educoder头歌实训 太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客 第1关:while类型 任务描述 质数的定义如下:大于1的自然数,且除 ...
- C1认证之web基础知识及习题——我的学习笔记
文章目录 目录 文章目录 前言 Web基础 十四.语义化标签 知识点 习题 十五.表单标签 知识点 习题 十六.转义字符 知识点 习题 十七.Head头 知识点 习题 十八.CSS引入方 ...
- JQuery-学习笔记03【基础——DOM操作】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- # EXP8 Web基础
EXP8 Web基础 基础问题回答 1.什么是表单? 表单:表单在网页中主要负责数据采集功能. 基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表 ...
- 20145233《网络对抗》Exp8 Web基础
20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...
最新文章
- 命令行创建React项目
- activemq启动异常
- angularjs 导出excel php,AngularJS 导出Excel指令
- Windows7查看本地Java安装是否成功和路径的方法
- 基于 ida 的反汇编转换 Obj 的可行性 笔记(1)
- html/css学习笔记（一）
- python测试框架untest怎么循环执行_unittest如何在循环遍历一条用例时生成多个测试结果...
- scrapy框架_Python：Scrapy框架
- 习题:输出九九乘法表
- hihoCoder挑战赛25
- 开发LED屏幕页面遇到的问题
- excel如何将英文星期转为中文星期_用Excel制作偶像日历的体验，你一定不能错过...
- 人类高质量编程语言Delphi盛大发布2021新版本RAD Studio 11 Alexandria
- 企业网站排名，关键词选择原则，6个基本策略
- OneZero第三周第一次站立会议（2016.4.4）
- 手机麦克风权限在哪里开启_手机麦克风权限怎么设置
- 气死老师的作文（转贴）
- 考勤 日历 ajax,vue实现钉钉的考勤日历
- LWIP+ENC28J60长时间运行后无法访问外网服务器
- centos系统安装教程