JavaScript回调函数及数组方法测试
具体代码如下：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="GBK"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>javascript回调函数、数组知识点</title> 7 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 8</head> 9<body> 10 <script type="text/javascript"> 11 12 function callback() { 13 console.log("callback function"); 14 } 15 16 function B(msg, callback) { 17 callback(); 18 console.log("B main function"); 19 } 20 21 var person = new Object(); 22 23 person = {name:"Jack",age:17,"height":199.3}; 24 25 var arr = new Array("blue", "green", "red"); 26 arr[arr.length] = "yellow"; 27 arr[arr.length] = "pink"; 28 var arr2 = ["car", "city", "computer"]; 29 30 //数组可以作为栈（先进后出FILO）用，使用push方法添加元素，pop方法弹出最后一个元素并返回该值 31 var arr3 = new Array(); 32 arr3.push("lenovo"); 33 arr3.push("dell"); 34 var item = arr3.pop();//返回弹出的最后项的值dell 35 36 /* 37 数组可以作为队列（先进先出FIFO）用，使用push方法添加元素，shift方法移除数组的第一项并返回该值 38 unshift方法可以在数组前端新增任意个项并返回新数组的长度 39 */ 40 var arr4 = new Array(); 41 arr4.push("acer"); 42 arr4.push("xiaomi"); 43 var itme = arr4.shift();//item：acer 44 var count = arr4.unshift("huawei","asus");//新数组：huawei asus xiaomi 45 46 //用 prototype 属性为对象的类提供一组基本功能。 对象的新的实例“继承”了赋予该对象的原型的行为。 47 var testEmail = "324234@qq.com"; 48 String.prototype.isEmail = function () {//邮箱判断 49 return testEmail.includes("@"); 50 } 51 52 /* 53 数组concat方法(基于当前数组创建一个新数组)与slice（基于当前数组的一个或多个项创建数组，接受1个或2个参数）方法 54 slice(n)返回索引n到数组末尾的片段 55 slice(n,m)返回索引n到m-1的数组片段，不包括索引m处的元素 56 */ 57 var arr5 = new Array("a1","a2"); 58 var arr6 = arr5.concat("b1","b2");//concat：创建当前数组的副本，然后在副本末尾连接上新值，返回拼接的新数组 59 var t = arr6.slice(0,1);//返回arr6索引值0到0的元素 60 var t2 = arr6.slice(1,3);//返回arr6索引值1到2的元素，不包括索引3 61 console.log("arr5： " + arr5);//a1 a2 62 console.log("arr6： " + arr6);//a1 a2 b1 b2 63 console.log("arr6.slice(0,1)： " + t);//a1 64 console.log("arr6.slice(1,3)： " + t2);//a2 b1 65 66 /* 67 数组的位置方法 68 indexOf(n)从数组开头（索引0）处开始查找n所在的位置，返回n对应的索引值，找不到返回-1 69 lastIndexOf(n)从数组末尾（索引arr.length-1）处开始查找n所在的位置，返回n对应的索引值，找不到返回-1 70 */ 71 console.log("arr6.indexOf(\"b1\"): " + arr6.indexOf("b1"));//2 72 console.log("arr6.lastIndexOf(\"a2\"): " + arr6.lastIndexOf("a2"));//1 73 console.log("arr6.lastIndexOf(\"a3\"): " + arr6.lastIndexOf("a3"));//-1 74 75 /* 76 数组的5个迭代方法 77 1、every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true； 78 2、filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组； 79 3、forEach()：对数组中的每一项运行给定函数。该方法无返回值； 80 4、map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组； 81 5、some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。 82 以上方法都不会修改数组中包含的值。 83 every()方法和some()方法很像，区别就是every()方法需要每项都返回true才能返回true，some()方法 84 只要有一项运行函数返回true，则返回true。 85 */ 86 var numbers = [0,2,-9,12,200,5,-8]; 87 var everyResult = numbers.every(function(value, index, array) { 88 return (value > 0);//判断每项是否都大于0 89 }) 90 console.log("everyResult: " + everyResult);//everyResult: false 91 92 var filterResult = numbers.filter(function(value, index, array) { 93 return (value > 0);//过滤出大于0的元素 94 }) 95 console.log("filterResult: " + filterResult);//filterResult: 2,12,200,5 96 97 numbers.forEach(function(value, index, array) { 98 console.log("numbers's element is " + value);//遍历输出数组元素 99 }) 100 101 var mapResults = numbers.map(function(value, index, array) { 102 return (value * 3);//数组元素每项*3 103 }) 104 console.log("mapResults: " + mapResults);//mapResults: 0,6,-27,36,600,15,-24 105 106 var someResults = numbers.some(function(value, index, array) { 107 return (value > 0);//是否存在大于0的项 108 }) 109 console.log("someResults: " + someResults); 110 111 112 $(document).ready(function() { 113 B("HELLO",callback);//回调函数的引用作为入参，并在函数中调用回调函数 114 console.log(person.name + " is " + person.age + " years old" + "height is " + person.height); 115 console.log(typeof person.name); 116 console.log(typeof person.age); 117 console.log(typeof person.height); 118 console.log(typeof person["height"]); 119 //遍历数组 120 arr.forEach(function(key) { 121 console.log(key + "-"); 122 }); 123 $.each(arr,function(key,value) { 124 console.log(key + "~" + value); 125 }); 126 for (var i in arr) { 127 console.log(arr[i] + "#"); 128 } 129 //邮箱验证 130 console.log("email check result is " + testEmail.isEmail()) 131 }); 132 </script> 133</body> 134</html>
控制台结果：
1arr5： a1,a2 2arr6： a1,a2,b1,b2 3arr6.slice(0,1)： a1 4arr6.slice(1,3)： a2,b1 5arr6.indexOf("b1"): 2 6arr6.lastIndexOf("a2"): 1 7arr6.lastIndexOf("a3"): -1 8everyResult: false 9filterResult: 2,12,200,5 10numbers's element is 0 11numbers's element is 2 12numbers's element is -9 13numbers's element is 12 14numbers's element is 200 15numbers's element is 5 16numbers's element is -8 17mapResults: 0,6,-27,36,600,15,-24 18someResults: true 19callback function 20B main function 21Jack is 17 years oldheight is 199.3 22string 23number 24number 25number 26blue- 27green- 28red- 29yellow- 30pink- 310~blue 321~green 332~red 343~yellow 354~pink 36blue# 37green# 38red# 39yellow# 40pink# 41email check result is true