3.2、JavaScript对象和函数
程序员文章站
2022-03-04 13:31:51
文章目录函数函数的两种定义方式、自调用函数、arguments参数javascript:void(0)StringNumber无穷大NaNDateMathArrayRegExp 对象函数函数的两种定义方式、自调用函数、arguments参数
文章目录
函数
函数的两种定义方式、自调用函数、arguments参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
函数的定义：
1、var show = function() {}
2、function show() {}
-->
<script>
var show = function () {
alert("JS");
}
function show2() {
alert("function");
}
/* 自调用函数 */
var sum = (
function add(a, b) {
return a + b;
}(10, 20)
);
alert(sum);
// 30
/* 函数是对象，属性arguments，把所有的实参接收 */
var test = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
};
var demo = test(10, 20, 30);
alert(demo);
// 60
</script>
</body>
</html>
九九乘法表
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + "*" + i + "=" + (i * j), "   ");
}
document.write("<br>");
}
javascript:void(0)
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>
// 阻止链接跳转，URL不会有任何变化
<a href="javascript:void(0)">点击此处</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="javascript:void(target())">进入百度</a>
<script>
function target() {
if (window.confirm("你即将进入外部网站，请确认。")) {
window.open("https://www.baidu.com");
}
}
</script>
</body>
</html>
String
字符串属性和方法
| 属性和方法 | 描述 |
|---|---|
| length | 字符串长度 |
| charAt() | 返回指定位置上的字符 |
| concat() | 拼接字符串 |
| indexOf() | 指定字符串第一次出现的位置 |
| lastIndexOf() | 指定字符串最后一次出现的位置 |
| match() | 查找字符串中特定的字符 |
| replace() | 在字符串中用某些字符替换另一些字符 |
| toUpperCase() | 转换为大写 |
| toLowerCase() | 转换为小写 |
| split() | 分割字符串 |
| substring() | 截取字符串 |
'use strict'
var str = "aaaaa";
console.log(str.replace('a', 'h'));
// haaaa
var student = "student";
console.log(student.indexOf("dent"));
// 3
Number
无穷大
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。
var mynumber = 2;
while (mynumber != Infinity) {
mynumber = mynumber * mynumber;
document.write(mynumber, "<br>");
}
var a = 2 / 0;
document.write(a, "<br>");
// Infinity
var b = -2 / 0;
document.write(b);
// -Infinity
4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity
NaN
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
var x = 1000 / "Apple";
isNaN(x);
// 返回 true
// 一个数字除以一个字符串结果不是一个数字
var y = 100 / "1000";
isNaN(y);
// 返回 false
// 一个数字除以一个字符串数字结果是一个数字
var x = 1000 / 0;
isNaN(x); // 返回 false
// Infinity无穷大是一个数字
数字可以是数字或者对象；
var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
(x === y) // 为 false，因为 x 是一个数字，y 是一个对象
Number的属性
Number.MAX_VALUE;
Number.MIN_VALUE;
Number.NaN;
parseInt()和parseFloat()、String()和Number(）都是全局方法。
| 方法 | 描述 |
|---|---|
| parseInt() | 将字符串转换成整型数字 |
| parseFloat() | 将字符串转换成浮点数 |
| toFixed() | 返回指定小数位数的表示形式 |
| toString() | 输出指定格式的字符串 |
var x = 3.1415926;
document.write(x.toFixed(2));
// 3.14
var y = 128;
document.write(y.toString(10), "<br>");
// 128
document.write(y.toString(2), "<br>");
// 10000000
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/moment.js"></script>
</head>
<body>
<script>
var date = new Date();
/* var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var str = date.toLocaleString();
*/
document.write(date, "<br>");
// Sun Jul 12 2020 14:50:16 GMT+0800 (中国标准时间)
var formatStr = moment().format("YYYY-MM-DD HH:mm:ss dddd");
document.write(formatStr);
// 2020-07-12 14:53:26 Sunday
/* 使用第三方的JS来格式化日期 */
</script>
</body>
</html>
Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数
var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math.abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向上取整 */
/* 返回1-100的整数 */
var num = Math.floor(Math.random() * 100 + 1);
</script>
</body>
</html>
Array
'use strict'
/* JS中的数组大小是可变的，当未给数组中的元素赋值时，元素都为undefined */
var nums = new Array();
var numss = new Array(10);
var numsss = new Array(10, 20, 30);
/* 简便写法 */
var num = [];
/* 空数组 */
console.log(num[0]);
// undefined
数组对象中的方法
| 方法 | 描述 |
|---|---|
| indexOf() | 通过数组元素获取索引 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度 |
| slice() | 选取数组的的一部分，并返回一个新数组 |
| pop() | 删除数组的最后一个元素并返回删除的元素 |
| shift() | 删除并返回数组的第一个元素 |
| concat() | 连接两个或更多的数组，并返回结果 |
| join() | 把数组的所有元素放入一个字符串 |
| reverse() | 反转数组的元素顺序 |
| sort() | 对数组的元素进行排序 |
| splice() | 从数组中添加或删除元素 |
var res = [1, 2, 3, 4, 5, 6, 7];
res.push(8);
res.unshift(0);
/* 0 1 2 3 4 5 6 7 8 */
res.splice(1, 2, 11, 12)
/* 删除并添加，删除从索引1开始的两个元素，并添加11,12两个元素 */
/* 0 11 12 3 4 5 6 7 8 */
res.sort(function (a, b) {
/* 匿名函数 */
return a - b;
});
/* 0 3 4 5 6 7 8 11 12 */
console.log(res.reverse());
/* 反转数组 */
/* 12 11 8 7 6 5 4 3 0 */
/* filter/map/reduce */
var num = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
/* 链式编程 */
var number = num.filter(function (n) {
return n > 80;
}).map(function (n) {
return n / 2;
}).reduce(function (pre, next) {
return pre + next;
}, 0);
/* 过滤、映射、汇总 */
console.log(number);
/* 45 + 50 = 95 */
/* 箭头函数 */
var number2 = num.filter(n => n > 80).map(n => n / 2).reduce((pre, next) => pre + next, 0);
console.log(number2);
// 95
RegExp 对象
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
- pattern（模式） 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
修饰符
修饰符用于执行区分大小写和全局匹配:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） |
| m | 执行多行匹配 |
方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符 |
| [^abc] | 查找任何不在方括号之间的字符 |
| [0-9] | 查找任何从 0 至 9 的数字 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符 |
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符 |
| \w | 查找单词字符 |
| \W | 查找非单词字符 |
| \d | 查找数字 |
| \D | 查找非数字 |
| \s | 查找空白字符 |
| \S | 查找非空白字符 |
| \b | 匹配单词边界 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 一个或多个 |
| n* | 零个或多个 |
| n? | 零个或一个 |
| n{X} | X个 |
| n{X,Y} | 最少X，最低Y |
| n$ | 以n结尾 |
| ^n | 以n开头 |
RegExp对象方法
| 方法 | 描述 |
|---|---|
| test() | 检索字符串中指定的值。返回 true 或 false |
| exec() | 检索字符串中指定的值。返回找到的值，并确定其位置 |
var str = "hello123";
var reg = /^[A-Z0-9]+$/;
^和$代表整体匹配
var res = reg.test(str);
// alert(res);
// false
reg = /^[A-Z0-9]+$/i;
// i修饰符代表不区分大小写
res = reg.test(str);
// alert(res);
// true
str = "hello_123";
res = reg.test(str);
// alert(res);
// false
/* 获取出由三个字符组成的单词 */
var str2 = "daaa ABC jia hao hao xue xi aaaa,df?";
reg = /\b[a-zA-Z]{3}\b/i;
/* 现在没有了代表开头的^和代表结尾的$，所以是局部匹配 */
res = reg.exec(str2);
// alert(res);
// ABC
reg = /\b[a-zA-Z]{3}\b/gi;
/* 相比上次增加了g，全局匹配，而非匹配到一次后就结束 */
while ((res = reg.exec(str2)) != null) {
alert(res);
}
// ABC jia hao hao xue
支持正则表达式的String对象的方法
| 方法 | 描述 |
|---|---|
| search() | 检索与正则表达式相匹配的值 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| split() | 把字符串分割为字符串数组 |
var str = "daaa ABC jia hao hao xue xi aaaa,df?";
var reg = /\b[a-z]{3}\b/gi;
// 1、String的match()方法
var res = str.match(reg);
document.write(res, "<br>");
// ABC,jia,hao,hao,xue
// 2、String的search()方法，类似于indexOf()方法 比他强大一下，可以根据正则去查找。检索不到返回-1
res = str.search(reg);
document.write(res, "<br>");
// 5 ABC所在的索引确实是5
// 3、String的replace()方法 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串
var str2 = "daaa ABC jia hao hao xue xi aaaa,df?";
// 替代空白符
reg = /\s+/g;
// 匹配多个空白符,并且是全局替换
res = str2.replace(reg, "-");
document.write(res, "<br>");
// daaa-ABC-jia-hao-hao-xue-xi-aaaa,df?
// 4、String的split()方法
var str3 = "aaa=bbb=ccc=ddd=eee=fff";
reg = /[=]+/g;
res = str3.split(reg);
document.write(res);
// aaa,bbb,ccc,ddd,eee,fff
本文地址：https://blog.csdn.net/ShawnYue_08/article/details/107301175