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
