当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 3.2、JavaScript对象和函数

3.2、JavaScript对象和函数

2020年07月14日  | 移动技术网IT编程  | 我要评论

文章目录

函数

函数的两种定义方式、自调用函数、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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网