zoukankan      html  css  js  c++  java
  • JavaScript回调函数及数组方法测试

    JavaScript回调函数及数组方法测试

    具体代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="GBK">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>javascript回调函数、数组知识点</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
    
            function callback() {
                console.log("callback function");
            }
    
            function B(msg, callback) {
                callback();
                console.log("B main function");
            }
    
            var person = new Object();
            
            person = {name:"Jack",age:17,"height":199.3};
            
            var arr = new Array("blue", "green", "red");
            arr[arr.length] = "yellow";
            arr[arr.length] = "pink";
            var arr2 = ["car", "city", "computer"];
    
            //数组可以作为栈(先进后出FILO)用,使用push方法添加元素,pop方法弹出最后一个元素并返回该值
            var arr3 = new Array();
            arr3.push("lenovo");
            arr3.push("dell");
            var item = arr3.pop();//返回弹出的最后项的值dell
    
            /*
            数组可以作为队列(先进先出FIFO)用,使用push方法添加元素,shift方法移除数组的第一项并返回该值
            unshift方法可以在数组前端新增任意个项并返回新数组的长度
            */
            var arr4 = new Array();
            arr4.push("acer");
            arr4.push("xiaomi");
            var itme = arr4.shift();//item:acer
            var count = arr4.unshift("huawei","asus");//新数组:huawei asus xiaomi
    
            //用 prototype 属性为对象的类提供一组基本功能。 对象的新的实例“继承”了赋予该对象的原型的行为。
            var testEmail = "324234@qq.com";
            String.prototype.isEmail = function () {//邮箱判断
                return testEmail.includes("@");
            }
            
            /*
            数组concat方法(基于当前数组创建一个新数组)与slice(基于当前数组的一个或多个项创建数组,接受1个或2个参数)方法
            slice(n)返回索引n到数组末尾的片段
            slice(n,m)返回索引n到m-1的数组片段,不包括索引m处的元素
            */
            var arr5 = new Array("a1","a2");
            var arr6 = arr5.concat("b1","b2");//concat:创建当前数组的副本,然后在副本末尾连接上新值,返回拼接的新数组
            var t = arr6.slice(0,1);//返回arr6索引值0到0的元素
            var t2 = arr6.slice(1,3);//返回arr6索引值1到2的元素,不包括索引3
            console.log("arr5: " + arr5);//a1 a2
            console.log("arr6: " + arr6);//a1 a2 b1 b2
            console.log("arr6.slice(0,1): " + t);//a1
            console.log("arr6.slice(1,3): " + t2);//a2 b1
    
            /*
            数组的位置方法
            indexOf(n)从数组开头(索引0)处开始查找n所在的位置,返回n对应的索引值,找不到返回-1
            lastIndexOf(n)从数组末尾(索引arr.length-1)处开始查找n所在的位置,返回n对应的索引值,找不到返回-1
            */
            console.log("arr6.indexOf("b1"): " + arr6.indexOf("b1"));//2
            console.log("arr6.lastIndexOf("a2"): " + arr6.lastIndexOf("a2"));//1
            console.log("arr6.lastIndexOf("a3"): " + arr6.lastIndexOf("a3"));//-1
            
            /*
            数组的5个迭代方法
            1、every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true;
            2、filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组;
            3、forEach():对数组中的每一项运行给定函数。该方法无返回值;
            4、map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组;
            5、some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。
            以上方法都不会修改数组中包含的值。
            every()方法和some()方法很像,区别就是every()方法需要每项都返回true才能返回true,some()方法
            只要有一项运行函数返回true,则返回true。
            */
            var numbers = [0,2,-9,12,200,5,-8];
            var everyResult = numbers.every(function(value, index, array) {
                return (value > 0);//判断每项是否都大于0
            })
            console.log("everyResult: " + everyResult);//everyResult: false
    
            var filterResult = numbers.filter(function(value, index, array) {
                return (value > 0);//过滤出大于0的元素
            })
            console.log("filterResult: " + filterResult);//filterResult: 2,12,200,5
    
            numbers.forEach(function(value, index, array) {
                console.log("numbers's element is " + value);//遍历输出数组元素
            })
    
            var mapResults = numbers.map(function(value, index, array) {
                return (value * 3);//数组元素每项*3
            })
            console.log("mapResults: " + mapResults);//mapResults: 0,6,-27,36,600,15,-24
            
            var someResults = numbers.some(function(value, index, array) {
                return (value > 0);//是否存在大于0的项
            })
            console.log("someResults: " + someResults);
    
    
            $(document).ready(function() {
                B("HELLO",callback);//回调函数的引用作为入参,并在函数中调用回调函数
                console.log(person.name + " is " + person.age + " years old" + "height is " + person.height);
                console.log(typeof person.name);
                console.log(typeof person.age);
                console.log(typeof person.height);
                console.log(typeof person["height"]);
                //遍历数组
                arr.forEach(function(key) {
                    console.log(key + "-");
                });
                $.each(arr,function(key,value) {
                    console.log(key + "~" + value);
                });
                for (var i in arr) {
                    console.log(arr[i] + "#");
                }
                //邮箱验证
                console.log("email check result is " + testEmail.isEmail())
            });
        </script>
    </body>
    </html>

    控制台结果:

    arr5: a1,a2
    arr6: a1,a2,b1,b2
    arr6.slice(0,1): a1
    arr6.slice(1,3): a2,b1
    arr6.indexOf("b1"): 2
    arr6.lastIndexOf("a2"): 1
    arr6.lastIndexOf("a3"): -1
    everyResult: false
    filterResult: 2,12,200,5
    numbers's element is 0
    numbers's element is 2
    numbers's element is -9
    numbers's element is 12
    numbers's element is 200
    numbers's element is 5
    numbers's element is -8
    mapResults: 0,6,-27,36,600,15,-24
    someResults: true
    callback function
    B main function
    Jack is 17 years oldheight is 199.3
    string
    number
    number
    number
    blue-
    green-
    red-
    yellow-
    pink-
    0~blue
    1~green
    2~red
    3~yellow
    4~pink
    blue#
    green#
    red#
    yellow#
    pink#
    email check result is true
  • 相关阅读:
    DC综合流程
    DC set_tcl脚本配置
    同步FIFO设计
    顺序脉冲 发生器
    状态机的写法
    verilog串并转换
    indexOf()
    jQuery 效果
    jQuery 事件
    jQuery css
  • 原文地址:https://www.cnblogs.com/stm32stm32/p/9166674.html
Copyright © 2011-2022 走看看