JavaScript内置函数

最新推荐文章于 2023-03-13 18:29:55 发布

小C好好干饭

最新推荐文章于 2023-03-13 18:29:55 发布

阅读量183

点赞数 2

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_44408913/article/details/117919359

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的Math对象，包括获取圆周率、最大最小值、幂运算等数学函数，并展示了如何生成指定范围内的随机整数。此外，还讲解了Date对象的使用，如获取年月日、时间戳以及日期格式化。接着，讨论了数组的各种操作，如添加、删除元素，以及数组去重、排序等方法。最后，提供了一个三级城市选择的实例，展示了如何利用JavaScript动态填充下拉菜单。

摘要由CSDN通过智能技术生成

Math函数

函数名	描述
Math.PI	获得圆周率
Math.max(v1[,v2,v3])	获得最大的数
Math.min(v1[,v2,v3])	获得最小的数
Math.pow(x,y)	获得x的y次幂
Math.abs()	数值取绝对值
Math.floor()	数值向下取整
Math.ceil()	数值向上取整
Math.round()	数值四舍五入取整
Math.random()	返回[0~1]内的一个随机小数

案例：获得一个[min,max]之间的整数

function getNum(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getNum(0, 10));

Date()日期对象

日期对象创建

var date = new Date(); // 时间只会在创建的时候赋值一次
console.log(date); //Sat Feb 06 2021 16:35:54 GMT+0800 (中国标准时间)
date = new Date(2017, 10, 12); //数值类型中月份会自动加1
console.log(date); //Sun Nov 12 2017 00:00:00 GMT+0800 (中国标准时间)
date = new Date('2017-10-12 23:52:00'); //
console.log(date); //Thu Oct 12 2017 23:52:00 GMT+0800 (中国标准时间)

日期格式化取

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月（0-11）	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0到周六6）	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

时间戳获取

console.log(date.valueOf());
console.log(date.getTime());
console.log(+new Date());//简易形式
var date1 = new Date(date.getTime())
console.log(date1);//时间戳转换为具体日期对象

案例：倒计时

时间计算公式：

d = parseInt(总秒数/60/60/24); //计算天数
h = parseInt(总秒数/60/60%24); //计算天数
m = parseInt(总秒数/60%60); //计算天数
s = parseInt(总秒数%60); //计算天数

function countDown(time) {
    var inputTime = +new Date(time);
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 1000;
    var d = parseInt(times / 60 / 60 / 24);//获得天数
    var h = parseInt(times / 60 / 60 % 24);//获得小时
    var m = parseInt(times / 60 % 60);
    var s = parseInt(times % 60);
    d = d > 10 ? d : '0' + d;
    h = h > 10 ? h : '0' + h;
    m = m > 10 ? m : '0' + m;
    s = s > 10 ? s : '0' + s;
    console.log(d + '天' + h + '时' + m + '分' + s + '秒');
}
countDown('2021-10-12 0:0:0');

案例输入年份显示日历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cal.css" />
</head>

<body>
    <div class="box"></div>
    <script>
        function calendar(y) {
            var html = '';
            for (var m = 0; m < 12; m++) {
                html += "<table>";
                html += '<tr class="title"><th colspan="7">' + y + '年' + (m + 1) + '月</th></tr>';
                html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
                // max表示月份的最多天数
                var max = new Date(y, m, 0).getDate();
                // w获得y年m月1号是星期几
                var w = new Date(y, m, 0).getDay();
                html += '<tr>'
                for (var d = 1; d <= max; d++) {
                    // 0~6的循环
                    w = (w + 1) > 6 ? 0 : w + 1;
                    // 每个月的第一天检查是否需要跨列
                    if (w && d == 1) {
                        //跨列，第一天是周几就跨几列
                        html += '<td colspan="' + w + '"></td>'
                    }
                    // 填充日期
                    html += '<td>' + d + '</td>';
                    // 7天一次换行
                    if (w == 6 && d != max) {
                        html += '</tr><tr>'
                    }
                }
                html += '</tr>';
                html += '</table>';
            }
            return html;
        }
        var year = prompt('请输入年份', '2021');
        document.querySelector('div').innerHTML = calendar(year);
    </script>
</body>

</html>

Array()数组

创建数组

var arr1 = [1, 2];
console.log(arr1);
var arr2 = new Array(); // 创建一个空数组对象
console.log(arr2);
var arr3 = new Array(2); // 创建一个长度为2的空数组
console.log(arr3);
console.log(arr3[0]); // undefined
console.log(arr3.length); // 2
var arr4 = new Array(1, 2, 3);
console.log(arr4);

判断是否为数组

var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

添加数组元素

var arr1 = [];
arr1.push(1);
arr1.push(2, 'three');
var l = arr1.push(4, '五');  // push返回值是数据添加后数组长度
console.log(l);
console.log(arr1);
arr1.unshift('零'); // 在数组前端添加数据
console.log(arr1);

删除数组元素

var arr1 = [1, 2, 3, 4, 5]
var l = arr1.pop(); //pop:删除最后一个数组元素，返回删除前数组的长度
console.log(l);
console.log(arr1);
arr1.shift()
console.log(arr1);//shift:删除第一个数组元素

添加或删除元素

var ans = [1, 2, 3, 4, 5];
ans.push(6);//添加元素到尾部 
console.log(ans);//[1, 2, 3, 4, 5, 6]
ans.pop();//弹出尾部元素
console.log(ans);//[1, 2, 3, 4, 5]
ans.unshift(0);//添加元素到头部
console.log(ans);//[0, 1, 2, 3, 4, 5]
ans.shift();//弹出头部元素
console.log(ans);//[1, 2, 3, 4, 5]

案例：删除工资大于2000的数据

var arr1 = [1092, 4000, 2001, 239, 1013, 5000];
var newArr = new Array();
for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] < 2000) {
        newArr.push(arr1[i])
    }
}
console.log(newArr);

数组填充

var ans = [1, 2, 3, 4, 5];
ans.fill('abc', 1, 2);
console.log(ans);

数组删截

var ans = [1, 2, 3, 4, 5];
ans.splice(2);
console.log(ans);

数组反转和排序

var arr1 = [1092, 4000, 2001, 239, 1013, 5000, 'a', 'c', 'b'];
arr1.sort();//数组排序
console.log(arr1);//[1013, 1092, 2001, 239, 4000, 5000, "a", "b", "c"]
arr1.reverse();//数组反转
console.log(arr1);//["c", "b", "a", 5000, 4000, 239, 2001, 1092, 1013]

//升序排序  ["c", "b", "a", 239, 1013, 1092, 2001, 4000, 5000]
arr1.sort(function (a, b) {
    return a - b;
});
console.log(arr1);
//降序排序  ["c", "b", "a", 5000, 4000, 2001, 1092, 1013, 239]
arr1.sort(function (a, b) {
    return b - a;
});
console.log(arr1);

数组是否包含数据

var ans = [1, 2, 3, 4, 5];
console.log(ans.includes(0)); //false
console.log(ans.includes(3)); //true

数组查询索引

var arr1 = ['red', 'green', 'blue', 'chenyu', 'blue']
console.log(arr1.indexOf('blue'));//返回数组元素找到的第一个索引位置的元素下标,找不到返回-1
console.log(arr1.lastIndexOf('blue'));//返回数组元素中最后一个找到的数组元素下标,找不到返回-1

案例：数组去重

var arr1 = ['a', 'b', 'c', 'd', 'a', 'c', 'e', 'f'];
function unique(arr) {
    var newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i])
        }
    }
    return newArr;
}
console.log(unique(arr1));

数组转换为字符串–join

var arr1 = ['1', 2, '三', 4];
var s1 = arr1.toString();//将数组转换为字符串以‘,’分割
var s2 = arr1.join(';');//将数组转换为字符串以指定字符分割
console.log(s1);
console.log(s2);

数组拼接、截取、删除

var arr1 = [1, 2, 3];
var arr2 = ['4', '5', '6'];
//连接两个数组--不影响原数组
var newArr = arr1.concat(arr2);
console.log(newArr);
//数组截取--不影响原数组
newArr = arr1.slice(1, 3);//返回截取的字符串
console.log(newArr);
console.log(arr1);
//数组删除--影响原数组
newArr = arr2.splice(1, 3);//返回被删除的字符串
console.log(newArr);
console.log(arr2);

案例：三级城市选择

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form>
        省份
        <select id='province'>
            <option value='-1'>请选择</option>
        </select>
        市
        <select id='city'></select>
        区
        <select id='country'></select>
    </form>
    <script>
        var pr = ['上海', '江苏', '河北'];
        var ci = [
            ['上海市'],
            ['苏州市', '南京市', '扬州市'],
            ['石家庄', '秦皇岛', '张家口']
        ];
        var co = [
            [
                ['黄浦区', '静安区', '长宁区', '浦东区']
            ],
            [
                ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
                ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
                ['邗江区', '广陵区', '江都区'],
            ],
            [
                ['长安区', '桥西区', '新华区', '井陉矿区'],
                ['海港区', '山海关区', '北戴河区', '抚宁区'],
                ['桥东区', '桥西区', '宜化区', '下花园区']
            ]
        ]

        // obj表示要填充的select组件，data具体填充的数据
        function createOtion(obj, data) {
            for (const i in data) {
                var op = new Option(data[i], i);
                obj.options.add(op);
            }
        }
        var province = document.querySelector('#province');
        var city = document.querySelector('#city');
        var country = document.querySelector('#country');
        createOtion(province, pr);
        province.onchange = function () {
            city.options.length = 0;
            country.options.length = 0;
            createOtion(city, ci[province.value]);
            createOtion(country, co[province.value][city.value]);
        };
        city.onchange = function () {
            country.options.length = 0;
            createOtion(country, co[province.value][city.value]);
        }

    </script>
</body>

</html>

字符串

函数名	描述
indexOf(‘要查找的字符’,开始查找的位置)	返回指定内容在元素字符串中的起始位置，如果不存在就返回-1，开始查找的位置是index索引号，默认为0
lastIndexOf()	从后往前找，只找第一个匹配的
charAt(i)	得到字符串第i位置的字符
substring(start[,end])	截取从start开始到end位置之间的一个子字符串
substr(start[,lenght])	截取从start开始lenght长度的字符串
toLowerCase()	获取字符串小写形式
toUpperCase()	获取字符串大写形式
split([separator[,limit]])	使用separator分隔符将字符串分隔为数组，limit用于限定分隔的数量
replace(str1,str2)	使用str1替换str2

Number

成员	作用
MAX_VALUE	在js中所能表示的最大值
MIN_VALUE	在js中所能表示的最小值
toFixed(digits)	使用顶点表示法来格式化一个数值

小C好好干饭

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript内置函数

Math函数函数名描述Math.PI获得圆周率Math.max(v1[,v2,v3])获得最大的数Math.min(v1[,v2,v3])获得最小的数Math.pow(x,y)获得x的y次幂Math.abs()数值取绝对值Math.floor()数值向下取整Math.ceil()数值向上取整Math.round()数值四舍五入取整Math.random()返回[0~1]内的一个随机小数案例：获得一个[min,max
复制链接

扫一扫

专栏目录