【十】JavaScript之内置对象

Chimengmeng

于 2023-07-04 14:19:00 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/Chimengmeng/article/details/131547229

版权

【十】JavaScript之内置对象

【1】内置对象

build-in Object，也叫内建对象，由浏览器提供给开发者直接使用的。

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

【2】Number

数值对象，在js中一切的数值类型数据,都附带Number对象的属性方法，可以直接使用Number而不需要单独创建对象。

方法	描述
`toFixed(n)`	保留n个小数位
toLocaleString()	千分位数字格式化，逗号分隔符格式
toPrecision(n)	格式化数值的显示长度(n的取值范围在[1,21])。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    // var num = 20;
    // console.log(num, typeof num); // 20 "number"
    //
    // var price = 10/3;
    // var price2 = price.toFixed(2);
    // console.log(price2 ,typeof price2); // 3.33 string
    // // 注意：toFixed的返回值是一个字符串


    // var num1 = 1009999333.3333333333333
    // // 千分位格式化
    // console.log(num1.toLocaleString())  // 1,009,999,333.333

    // 格式化数值的显示长度
    var num =133.5;
    console.log(num.toPrecision(8)); // 133.50000
</script>
</body>
</html>

【3】Math

数学对象, 是一个静态对象，所以直接使用Math对象即可，不需要使用new创建对象，所谓静态对象，可以理解为python中的单例对象。

方法/属性	描述
`Math.round(num)`	对数值num进行四舍五入取整。
`Math.ceil(num)`	对数值num进行向上取整，也叫进一法取整。
`Math.floor(num)`	对数值num进行向下取整，保留整数部分，去除小数部分，也叫地板取整或舍一法取整。
Math.abs(num)	去数值num的绝对值
Math.max(a,b,c,d...)	求最大值
Math.min(a,b,c,d...)	求最小值
`Math.random()`	获取范围在[0,1)内的随机数值。
Math.PI	圆周率

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    // var num1 = -10
    // console.log(Math.abs(num1));     // 绝对值，非负数的绝对值是自身，负数的绝对值是去除-号后的数值

    // var num2 = 3.14
    // console.log(Math.round(num2)); // 3
    // console.log(Math.ceil(num2));  // 4
    // var num3 = 3.5
    // console.log(Math.round(num3)); // 4
    // console.log(Math.floor(num3)); // 3


    // // 参数可以有0~多个
    // console.log(Math.max(3,33,4));  // 最大值
    // console.log(Math.min(3,33,4));  // 最大值

    // console.log(Math.pow(3,3));     // 幂运算
    // console.log( 3 ** 3);           //上一句的简写

    /**
     * 生成随机数
     */
    // console.log( Math.random() );

    // 生成0~100之间的随机数
    // console.log(Math.random() * 100);

    // 生成0~100之间的随机整数
    // console.log(parseInt(Math.random() * 100));

    // // 生成一个指定范围的整数
    // function randint(min, max){
    //     return parseInt(Math.random() * (max+1-min)) + min;
    // }
    // console.log( randint(50,55) );
    
    console.log(Math.PI);           // 圆周率，3.141592653589793
</script>
</body>
</html>

【4】Date

日期对象，获取浏览器所在系统的时间相关信息。

基本使用

// 获取当前时间的时间日期对象
var d = new Date();

// 获取指定日期时间的时间日期对象
var d = new Date("2022-06-17 12:30:30");

方法/属性	描述
`getFullYear()`	从 Date 对象以四位数字返回年份。
`getMonth()`	从 Date 对象返回月份 (0 ~ 11)。
`getDate()`	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
`getDay()`	从 Date 对象返回一周中的某一天 (0 ~ 6)。周日为0
`getHours()`	返回 Date 对象的小时 (0 ~ 23)。
`getMinutes()`	返回 Date 对象的分钟 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
`getSeconds()`	返回 Date 对象的秒数 (0 ~ 59)。
`getTime()`	返回 1970 年 1 月 1 日至今的毫秒数。
toDateString()	把 Date 对象的日期部分转换为字符串。
`toJSON()`	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    var d = new Date();  // 获取当前客户端系统的当前时间

    // console.log(d,typeof d); // Thu Jun 23 2022 20:02:01 GMT+0800 (中国标准时间) "object"
    // // 直接打印日期时间对象，会默认执行对象的toString方法，这个方法类似python中的__str__方法或者__repr__方法。

    // // 直接基于隐式类型转换，获取毫秒时间戳
    // console.log(d - 0);
    // console.log(parseInt((d - 0)/1000)); // 获取秒时间戳

    // // 获取毫秒时间戳的方法
    // console.log(d.getTime());    // 获取时间戳[单位:毫秒,ms]
    // console.log(Date.now());    // 获取时间戳[单位:毫秒,ms]

    // // 获取年-月-日
    // console.log(d.getFullYear()); // 获取4位数字表单的年份
    // console.log(d.getMonth()+1); // 获取一年的第几个月
    // console.log(d.getDate());  // 一个月中的第几天
    // console.log(d.getDay());   // 一个星期中的第几天,星期几

    // // 补0函数
    // let fillzero = (num) => num<10?'0'+num:num;
    // // 格式化输出日期字符串
    // console.log(`${d.getFullYear()}-${fillzero(d.getMonth()+1)}-${fillzero(d.getDate())}`)

    // // 获取时分秒
    // console.log(d.getHours());
    // console.log(d.getMinutes());
    // console.log(d.getSeconds());
    // console.log(d.getMilliseconds()); // 毫秒,1000ms = 1s
    //
    // // 获取字符串格式的日期时间
    // let fillzero = (num) => num<10?'0'+num:num;
    // var t = `${d.getFullYear()}-${fillzero(d.getMonth()+1)}-${fillzero(d.getDate())} ${fillzero(d.getHours())}:${fillzero(d.getMinutes())}:${fillzero(d.getSeconds())}`
    // console.log(t);


    // // Date本身提供的其他格式化日期时间
    // console.log(d.toLocaleDateString());  // 2020/10/17
    // console.log(d.toLocaleTimeString());  // 上午11:38:13
    // console.log(d.toLocaleString());      // 2020/10/17 上午11:38:32
    console.log(d.toJSON());      // 2022-06-23T12:12:48.930Z
    // 快速格式化一个日期时间字符串
    let ret = d.toJSON().replaceAll(/[ZT]/g, " ")
    console.log(ret)


    // 计算2个时间的相差的毫米数
    var date1 = "2020-10-01 12:00:00";
    var date2 = "2020-10-11 12:00:00";
    timer1 = new Date(date1); // 此处是代表指定的一个时间对象,并非当前时间的对象
    timer2 = new Date(date2);
    console.log( timer2-timer1 );
    console.log( Math.abs(parseInt((timer2-timer1)/1000)) ); // 获取两个时间的秒差
</script>
</body>
</html>

【5】String

方法	描述
`concat()`	拼接两个或更多字符串，并返回新的字符串。
`fromCharCode()`	将 Unicode 编码转为字符，支持ASCII编码转换字符。
`indexOf()`	返回某个指定的字符串值在字符串中首次出现的下标位置。
lastIndexOf()	从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置
repeat()	复制字符串指定次数，并将它们连接在一起返回。
`search()`	查找与正则表达式相匹配的下标。
`match()`	查找找到一个或多个正则表达式的匹配。
`replace()`	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
`replaceAll()`	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
`split()`	把字符串分割为字符串数组，支持按正则表达式进行模糊分割
`startsWith()`	查看字符串是否以指定的子字符串开头。
`endsWith()`	判断当前字符串是否是以指定的子字符串结尾的(区分大小写)。
`includes()`	查找字符串中是否包含指定的子字符串。
`slice()`	提取字符串的片断，并在新的字符串中返回被提取的部分。
`substr()`	从起始索引号提取字符串中指定数目的字符。
`substring()`	提取字符串中两个指定的索引号之间的字符。
`toLowerCase()`	把字符串转换为小写。
`toUpperCase()`	把字符串转换为大写。
`trim()`	去除字符串两边的空白。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    // var str = "abcdef中文"
    // // 获取字符串长度
    // console.log(str.length); // 8 中文算1个长度
    //
    // // 获取字符串中的字符，可以通过下标操作，从0开始，不支持切片，也不支持负数下标
    // console.log(str[0]) // 获取第一个字符
    // console.log(str[str.length-1]) // 获取最后一个字符

    // js中的字符串与python一样，是字符类型，不支持修改部分字符的操作


    // console.log(str.includes("abc"));     // true, 判断指定的子串是否是属于当前字符串的一部分
    // console.log(str.endsWith("ef"));      // false, 判断结尾
    // console.log(str.startsWith("abc"));   // true, 判断开头

    // var str1 = "abcdef abce"
    // console.log(str1.indexOf("c"));  // 2    首次出现的位置下标
    // console.log(str1.lastIndexOf("c")); // 9 最后一次出现的位置下标

    // 转换编码[根据编码值获取字符]
    // console.log(String.fromCharCode(0x4e2d, 0x6587));
    // console.log(String.fromCharCode(65, 97));


    // repeat填充
    // console.log("abc".repeat(3)); // abcabcabc


    // // search查找指定字符首次出现的下标位置
    // console.log("hello".search("o"));
    //
    // // match匹配指定字符
    // console.log("13312345678".match(/1[3-9]\d{9}/))

    // // split 分割，把字符串分割成数组
    // console.log("湖南省-长沙市-xx区".split("-")) // ["湖南省", "长沙市", "xx区"]
    // console.log("我是中国人".split("")); // ["我", "是", "中", "国", "人"]
    //
    // // 替换一次
    // console.log("我是中国人".replace("我", "大家都")); // 大家都是中国人
    // console.log("hello python，hello, javascript".replace("hello", "你好")); // 你好 python，hello, javascript
    //
    // // 替换多次
    // console.log("hello python，hello, javascript".replaceAll("hello", "你好")); // 你好 python，你好, javascript


    // // slice(开始下标，结束下标) 切片操作，切取范围是 (开始下标, 结束下标]  左闭(包含)右开(不包含)
    // // slice 支持负数下标操作，所以slice与python中的切片几乎是一样的操作，但只支持2个参数
    // mobile = "13312345678";
    // console.log(mobile.slice(0, -3)); // 133
    //
    // // substr(开始下标，截取长度)
    // mobile = "13312345678";
    // console.log(mobile.substr(3, 4)); // 1234
    //
    // // substring(开始下标，结束下标)
    // mobile = "13312345678"
    // console.log(mobile.substring(3)); // 12345678, 从开始下标，一直截取到最后
    // console.log(mobile.substring(3, 7)); // 1234, 从开始下标，一直截取到指定下标

    // 字母转换大/小写
    // console.log("hello，小明".toUpperCase()); // HELLO，小明
    // console.log("HELLO，小明".toLowerCase()); // hello，小明

    // 清除字符窜两边的空格或空白字符
    var str3 = " hello "
    var res = str3.trim();
    console.log(res, res.length);
</script>
</body>
</html>

【6】RegExp

正则对象, js中使用的正则和python里面的正则是同一套，常用于表单数据校验。
js中的正则，不是字符串格式，而是一个对象。格式：

/正则模式/模式修正符

(1)模式修正符

修饰符用于执行区分大小写和全局匹配

模式修正符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m	执行多行匹配，让*号通配符可以匹配换行符。

(2)正则对象提供的方法

方法	描述
`exec`	检索字符串中指定的值。返回找到的值，并确定其位置。
`test`	检索字符串中指定的值。返回 true 或 false。

(3)字符串中支持正则表达式的方法

方法	描述
search()	查找与正则表达式相匹配的值。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
split()	把字符串分割为字符串数组，支持按正则表达式进行模糊分割

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="links">
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.tmall.com">天猫</a>
    <a href="https://www.jd.com">京东</a>
</div>
<script>
    // // 创建正则对象有2种方式：
    // // 1. 正则字面量创建[常用]
    // var reg = /1[3-9]\d{9}/


    // // 2. 基于RegExp构造函数创建
    // reg = new RegExp(/1[3-9]\d{9}/)
    // res = reg.test("13312345678")
    // console.log(res);

    // // 正则替换，捕获模式，模式的反向引用
    // mobile = "13312345678" // 133****5678
    // var ret = mobile.replace(/(1[3-9]\d)\d{4}(\d{4})/,"$1****$2");  // 捕获模式, 参数中的$1代表正则中的第一个小括号的内容,$2表示第二个小括号,这种用法叫反向引用.
    // console.log(ret); // 133****5678


    // // 正则分割
    // var str = "1323fdsd23545das53466";
    // ret = str.split(/\d+/);
    // console.log(ret); // ["", "fdsd", "das", ""]

    // 正则查找
    // var exp = /^1[3-9]\d{9}$/
    // console.log( exp.exec("13312345678") );

    // 正则匹配
    var links = document.querySelector(".links").innerHTML;
    console.log(links)

    // var exp = /<a href="(.*?)">(.*?)<\/a>/
    // console.log(links.search(exp)); // 获取首次匹配的下标
    // console.log(links.match(exp));  // 获取首次匹配的内容信息

    var exp1 = /<a href="(.*?)">(.*?)<\/a>/g
    console.log(links.match(exp1)); // 获取所有匹配的内容


</script>
</body>
</html>

(4)表单验证

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .row{
        height: 42px;
        border-bottom: 1px solid #aaa;
        margin-bottom: 10px;
    }
    .username-tips, .password-tips, .password2-tips, .mobile-tips, .email-tips{
        color: red;
        font-size: 12px;
    }
    </style>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
    <div class="row">
        登录账号：<input type="text" name="username" placeholder="请输入3-16位之间的账号" value="root">
        <div class="username-tips"></div>
    </div>
    <div class="row">
        登录密码：<input type="password" name="password" placeholder="请输入6-16位之间的密码" value="123456">
        <div class="password-tips"></div>
    </div>
    <div class="row">
        确认密码：<input type="password" name="password2" placeholder="请再次输入登录密码" value="123456">
        <div class="password2-tips"></div>
    </div>
    <div class="row">
        手机号码：<input type="text" name="mobile" placeholder="请输入手机号码" value="13312345678">
        <div class="mobile-tips"></div>
    </div>
    <div class="raw">
        注册邮箱：<input type="email" name="email" placeholder="请输入邮箱地址">
        <div class="email-tips"></div>
    </div>
    <input type="submit" value="注册">
</form>
<script>
    // 在2种情况下，进行数据验证
    // 用户输入完以后验证
    var username = document.querySelector('input[name="username"]')
    var password = document.querySelector('input[name="password"]')
    var password2 = document.querySelector('input[name="password2"]')
    var mobile = document.querySelector('input[name="mobile"]')
    var email = document.querySelector('input[name="email"]')
    var submit = document.querySelector('input[type="submit"]');

    username.onfocus = function(){
        // 当输入光标进入当前输入框会触发onfocus事件，去除错误提示
        document.querySelector('.username-tips').innerHTML = "";
    }

    submit.onclick = function(){
        let uv = username.value
        let pv = password.value
        let pv2 = password2.value
        let mv = mobile.value
        let ev = email.value
        // 校验账号
        if(uv.length<3 || uv.length>16){
            document.querySelector('.username-tips').innerHTML = "请输入3-16位之间的账号!"
            return false;
        }

        // 校验密码
        if(pv.length<6 || pv.length > 16){
            document.querySelector('.password-tips').innerHTML = "请输入6-16位之间的密码!"
            return false;
        }

        // 校验确认密码
        if(pv!=pv2){
            document.querySelector('.password2-tips').innerHTML = "登录密码与确认密码必须一致！"
            return false;
        }

        // 验证手机号
        if(!/^1[3-9]\d{9}$/.test(mv)){
            document.querySelector('.mobile-tips').innerHTML = "手机号码格式有误！"
            return false;
        }

        // 验证邮箱格式
        // 1@qq.com
        // 123213@qq.com
        if(!/^\w+@\w+\.\w+$/.test(ev)){
            document.querySelector('.email-tips').innerHTML = "注册邮箱格式有误！"
            return false;
        }

    }

</script>
</body>
</html>

【7】Array

数组对象，提供了所有关于数组类型数据的基本操作。

方法	描述
`concat()`	合并数组，连接两个或更多的数组，并返回结果。
`pop()`	删除数组的最后一个元素并返回删除的元素。
`push()`	向数组的末尾添加一个或更多元素，并返回新的长度。
`shift()`	删除并返回数组的第一个元素。
`unshift()`	向数组的开头添加一个或更多元素，并返回新的长度。
`reverse()`	反转数组的元素顺序。
entries()	返回数组的可迭代对象。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
`forEach()`	数组每个元素都执行一次回调函数。
`includes()`	判断一个数组是否包含一个指定的值。
`slice()`	选取数组的一部分，并返回一个新数组。相当于python中的切片操作
`indexOf()`	搜索数组中的元素，并返回它所在的位置。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
`Array.isArray()`	判断对象是否为数组。
`join()`	把数组的所有元素放入一个字符串。与字符串的`split`方法对应。
`every()`	检测数值元素的每个元素是否都符合条件。
some()	检测数组元素中是否有至少一个元素符合指定条件。
`filter()`	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试(函数)条件的数组元素的值。filter的别名函数
findIndex()	返回符合传入测试(函数)条件的数组元素的索引。
`map()`	通过指定函数处理数组的每个元素，并返回处理后的数组。
`reduce()`	将数组元素计算为一个值(从左到右)。
reduceRight()	将数组元素计算为一个值(从右到左)。
`sort()`	对数组的元素进行排序，也可以把排序函数作为参数进行排序。
`splice()`	从数组中添加、删除、替换元素。
toString()	把数组转换为字符串，并返回结果。

(1)基本操作函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // var arr1 = ["苹果","香蕉","葡萄"];
    // console.log(arr1.length);

    // 遍历数组
    // for(let index in arr1){
    //     console.log(index, arr1[index]); // 遍历提取下标 与 值
    // }
    //
    // for(let value of arr1){
    //     console.log(value);
    // }

    // // 遍历数组[参数分别是值，下标，数组本身]
    // arr1.forEach((value, index, arr)=>{
    //     console.log(value, index, arr);
    // })

    // // 合并数组
    // arr1 = [1,2,3]
    // arr2 = [4,5,6]
    // arr3 = [7,8,9]
    // res = arr1.concat(arr2, arr3) // concat 中可以有1-多个参数....
    // console.log(res);

    // 后面追加,如果需要前面插入则是 数组.unshift
    // var arr1 = ["苹果","香蕉","葡萄"];
    // arr1.push("哈密瓜");
    // arr1.unshift("芒果");
    // console.log(arr1)

    // // 移除成员
    // var arr1 = ["苹果","香蕉","葡萄"];
    // arr1.pop() // 移除最后一个成员,如果是要移除第一个,则是shift
    // console.log(arr1);
    // console.log( arr1.indexOf("葡萄") ) // 查找数据在数组中的索引位置,找不到则放回-1

    // // 判断是否包含成员
    // var arr1 = ["苹果","香蕉","葡萄"];
    // console.log(arr1.includes("香蕉")); // true

    // // 反转数组
    // var arr1 = ["苹果","香蕉","葡萄"];
    // arr1.reverse()
    // console.log(arr1);

    // // 字符串反转?
    // var str1 = "hello world";
    // // 转换成数组,进行反转,再转回字符串
    // arr = str1.split("")
    // arr.reverse()
    // str1 = arr.join("")
    // console.log(str1);

    // // 可以定义一个辅助函数,转换用于反转字符串
    // function reverse(str){
    //     return str.split("").reverse().join("");
    // }
    //
    // str2 = reverse("abcdef")
    // console.log(str2);

    // var arr1 = ["苹果","香蕉","葡萄"];
    // // keys() 获取下标
    // for(let item of arr1.keys()){
    //     console.log(item);
    // }
    //
    // // 获取成员，类似python中的enumerate()
    // for(let item of arr1.entries()){
    //     console.log(item);
    // }

    // // 判断是否是数组
    // // 因为数组本身属于对象，所以无法通过typeof来查看类型
    // data = "1,2,3"
    // console.log( Array.isArray(data) ); // false
    //
    //
    // data = [1,2,3,4]
    // console.log(Array.isArray(data)); // true

    // slice(开始下标，结束下标) 切片操作
    data = [1,2,3,4]
    ret = data.slice(1)   //  相当于python中 data[1:]
    console.log(ret);  // [2, 3, 4]
    ret = data.slice(1,3) //  相当于python中 data[1:3]
    console.log(ret);  // [2, 3]

    ret = data.slice(-2)  // 相当于python中 data[-2:]
    console.log(ret);  // [3, 4]
</script>
</body>
</html>

(2)补充数组的基础方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 给js中的字符串的原型添加方法,让所有的字符串共享。
    String.prototype.reverse = function() {
        return this.split("").reverse().join("");
    }

    // js中所有的字符串都是String对象创建出来的，所以把方法挂在String.prototype上，那么js中所有的字符串都可以拥有该方法。
    console.log("hello".reverse());
    console.log("age".reverse());

    console.log(String);
    console.log(String.prototype);

    class Humen{
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        desc(){
            return `我叫${this.name}, 今年${this.age}岁。`
        }
    }

    // 子类， extends表示继承父类，js中只能支持继承一个父类
    class Student extends Humen{
        constructor(name, age, classes, ) {
            super(name, age); // 调用父类的构造函数 constructor
            this.classes = classes;
        }
    }

    xm = new Student("小明", 17, "301班")
    xh = new Student("小黑", 16, "301班")
    console.log(xm, xh);
    console.log(xm.desc());

    // 相当于给Student的父类Humen动态添加方法
    Student.prototype.say = function(){
        return "请说中国话";
    }

    console.log(xm.say());
    console.log(xh.say());
</script>
</body>
</html>

(3)数组操作的高阶函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // filter返回条件为True的结果组成的新数组
    // var arr2 = [100,78,67,50,30,77,61]
    // arr3 = arr2.filter(function(a){
    //     return a>60;
    // })
    // console.log(arr3);

    // // map 对数组成员进行批量操作
    // var arr2 = [100,78,67,50,30,77,61];
    // arr3 = arr2.map(function(a){
    //     return a.toFixed(2);
    // });
    // console.log(arr3);

    // // every 对数组的每个成员进行函数操作，判断是否每一个成员都满足判断条件
    // arr2 = [100,78,67,77,61]; // 全部成员都满足条件，则结果为true
    // // arr2 = [100,78,67,77,61, 50];  // 只要数组有一个成员不满足条件，则返回结果为false
    // arr3 = arr2.every((a)=>{
    //     return a > 60;
    // })
    // console.log(arr3);

    // // some 对数组的每个成员进行函数操作，判断是否有至少一个成员满足判断条件
    // // arr2 = [100,78,67,77,61]; // 全部成员都不满足条件，则结果为false
    // arr2 = [100,78,67,77,61, 50];  // 只要数组有一个成员满足条件，则返回结果为true
    // arr3 = arr2.some((a)=>{
    //     return a < 60;
    // })
    // console.log(arr3);

    // // find 查找符合条件的元素，实际上就是filter的别名函数
    // arr2 = [100,78,67,50,30,77,61]
    // arr3 = arr2.filter(function(a){
    //     return a>60;
    // })
    // console.log(arr3);

    // // reduce 累计计算(和、差、积、商)
    // arr2 = [1,2,3,4,5]
    // res  = arr2.reduce(function(a,b){
    //     return a+b
    // })
    // console.log(res);


    // // sort 默认ASCII码排序
    // arr2 = ['c','b',1,'a', 2, 22,'11', 5,'13',3,4]
    // console.log( arr2.sort() ) // [1, "11", "13", 2, 3, 4, 5, "a"]

    // // 实现按数值排序，只有数组中只存在数值类型，数字字符串，布尔值成员才能正常排序
    // arr2 = [1,2, 22,'11', 5,'13',3,4]
    // res  = arr2.sort(function(a,b){
    //     // return a - b; // 正序
    //     return b-a;      // 倒序
    // })
    // console.log( res );

    // // 按ascii码正序排序
    // arr2 = ["A", 1, "D", 13, 3, "C", "a", "ab", "ad", "ac"]
    // res  = arr2.sort()
    // // 数组反转就可以实现倒序了。
    // res.reverse()
    // console.log(res);

    // 高阶数组操作函数
    // splice(操作开始下标, 删除成员的数量, 插入的成员1, , 插入的成员2, , 插入的成员3...)
    // 返回值是被删除的成员数组

    // // 1. 删除指定下标开始的指定数量成员
    // arr2 = ["a", "b", "d", "c", "e"]
    // res = arr2.splice(1, 2);
    // console.log(arr2); // ["a", "c", "e"]
    // console.log(res);  // ["b", "d"]   被删除的成员

    // // 2. 在指定位置添加成员，可以添加0~多个成员
    // arr2 = ["a", "b", "d", "c", "e"]
    // arr2.splice(2, 0, "w", "m", "G");
    // console.log(arr2); // ["a", "b", "w", "m", "G", "d", "c", "e"]

    // 3. 替换指定位置成员
    arr2 = ["a", "b", "d", "c", "e"]
    arr2.splice(2, 1, "w")
    console.log(arr2); // ["a", "b", "w", "c", "e"]

</script>
</body>
</html>

(4)解包操作

数组解包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // // 解包，解构，全接收
    // var data = ["A1", "A2", "A3", "A4"];
    // var [str1, str2, str3, str4] = data; // 按位置赋值
    // console.log(str1, str2, str3, str4);  // A1 A2 A3 A4

    // js中目前不支持赋值组包，所以代码会报错
    // var data = "A1", "A2", "A3"


    // // 解包，顺序接收，可以只接收部分成员
    // var data = ["A1", "A2", "A3", "A4"];
    // var [str1, , str] = data;
    // console.log(str1, str); // A1 A3


    // // 解包，指定默认值，如果成员值为undefined则采用默认值，其他的都按位赋值，包括null
    // var data = ["A1", null, undefined, "A4"];
    // var [str1, str2 = "abc", str3 = "默认值"] = data;
    // console.log(str1, str2, str3); // A1 null 默认值


    // 解包，接收剩余数据
    var data = ["A1", "A2", "A3", "A4"];
    var [str1, str2, ...surplus] = data;
    console.log(surplus); // ["A3", "A4"]
    
</script>
</body>
</html>

对象解包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // // 解包对象，不需要按书序，而是按属性名赋值，不存在的属性，则为undefined
    // var xiaoming = { name: "小明", age: 18, sex: true, address: "北京市" };
    // var { name, address, age, mobile="1331234567", city} = xiaoming;
    // console.log(name, age, address, mobile, city); // 小明 18 北京市 1331234567 undefined

    // 解包对象，属性重命名，并指定默认值
    name = "html网页标题"
    var xiaoming = { name: "xiaoming", age: 18, sex: true, address: "北京" };
    var { name: myname, age: myage, mobile: mymobile="1331234567"} = xiaoming;
    console.log(myname, myage, mymobile); // xiaoming 18 undefined

    console.log(name);
</script>
</body>
</html>

解包在函数或方法中的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // // 对象解包
    // function fn1({ x, y }){ // 相当于{ x, y } = { x: 10, y: 20 }
    //   console.log(x+y);
    // }
    //
    // fn1({ x: 10, y: 5 });
    // fn1({ x: 10, y: 10 });


    // // 数组解包
    // function fn2([x, y, z]){  // 相当于 [x,y,z] = [10,20,30]
    //     console.log(x, y, z)
    // }
    // arr = [10,20,30]
    // fn2(arr); // 10 20 30


    // // 接收剩余参数
    // function fn3(x, y, ...kwargs){ // ... 后面跟着的是变量，随便命名
    //     console.log(x, y, kwargs)
    // }
    // fn3(10,20,30,40,50); // 10 20 [30, 40, 50]


    // 实参解包，在形参中接收剩余参数
    function fn4(x, y, ...surplus){
        console.log(x, y, surplus)
    }
    arr = [10,20,30,40,50]
    fn4(...arr); // 10 20 [30, 40, 50]
</script>
</body>
</html>

【8】JSON

JSON是一个静态对象，所以直接调用即可，不需要使用new创建。

方法	描述
`JSON.stringify(obj)`	把obj对象转换成json格式字符串，会移除对象方法
`JSON.parse(str)`	把符合json语法的字符串转换成js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // // 把对象转换成json字符串
    // var a = {name:"小名",age:18,};
    // console.log(a);
    // var t = JSON.stringify(a);
    // console.log( t ); // {"name":"小名","age":18}
    // console.log( typeof t ); // string

    // 把符合json语法的字符串转换成对象
    var str = '{"name":"小名","age":18}';
    console.log(str);
    data = JSON.parse(str);
    console.log(data);
</script>
</body>
</html>

【9】Console

Console，控制台操作对象，主要用于在前端浏览器中进行代码打印调试的。
注意：仅针对浏览器使用，如果后续在selenium，appium等地方，Console不太适用，自己改成日志调试更好。

方法	描述
`console.log(value)`	打印变量信息
`console.dir(element)`	打印HTML元素变量信息
console.clear()	清空控制台调试打印信息
`console.table()`	以交互式表格方式打印数组、对象格式变量的数据
console.count(message)	写在函数或方法内部，用于跟踪统计当前函数被调用的次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // // 打印普通数据
    // console.log(100);
    // console.log("A", "C");
    // console.log(["A", "C"]);
    // // console.log适用于打印数据，而针对于HTML元素，一般默认会打印文档结构出来
    // // console.log(document.body);
    //
    // // 如果要打印HTML元素的属性信息，使用dir，与python中的dir函数类似。
    // console.dir(document.body);
    //
    // // 清除控制台的内容
    // console.clear();

    // // 以交互式表格格式打印数组、对象等数据
    // var data = [
    //     {id:1, name: '小明'},
    //     {id:2, name: '小白'},
    //     {id:3, name: '小黑'},
    // ]
    // console.table(data);


    // 跟踪统计代码被调用的次数
    function fn(){
        console.count("fn函数被调用次数");
        return "hello"
    }
    fn();
    fn();
    fn();
    fn();

</script>
</body>
</html>

Chimengmeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【十】JavaScript之内置对象

【十】JavaScript之内置对象【1】内置对象build-in Object，也叫内建对象，由浏览器提供给开发者直接使用的。文档地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects【2】Number数值对象，在js中一切的数值类型数据,都附带Number对象的...
复制链接

扫一扫