欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

3.2、JavaScript对象和函数

程序员文章站 2022-06-22 16:49:22
文章目录函数函数的两种定义方式、自调用函数、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), "&nbsp;&nbsp&nbsp");
    }
    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