1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 函数function 9 函数中可以封装一些功能（代码），在需要时可以执行这些功能 10 函数中可以保存一些代码在需要的时候调用 11 使用typeof检查一个函数对象时，会返回function 12 13 14 1.可以将要封装的代码以字符串的形式传递给构造函数 15 */ 16 var fun=new Function("console.log("hello")"); 17 console.log(fun); 18 /* 19 2.使用函数声明来创建一个函数 20 语法 function 函数名（形参1，形参2）{语句} 21 22 3.使用函数表达式来创建一个函数 创建匿名函数将匿名函数赋值给一个变量 23 var 函数名= function([形参1，形参2···形参N]){ 24 语句··· 25 } 26 27 调用函数时，解析器也不会检查实参的数量 28 多余实参不会被赋值 29 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined 30 31 */ 32 function sum(a,b,c){ 33 var d=a+b+c; 34 return d; 35 //return后可以跟任意类型的值 return;相当于return undefined; 36 } 37 var f=function(){ 38 console.log("我是匿名函数封装的代码"); 39 } 40 var result=sum(5,7,8);//20 41 /* 42 实参可以是任意的数据类型，也可以是一个变量 43 当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递 44 */ 45 function hello(o){ 46 console.log("我是"+o.name+",今年我"+o.age+"岁，住"+o.address); 47 } 48 var obj={ 49 name:"wxy", 50 age:"18", 51 address:"zzz" 52 } 53 hello(obj); 54 /* 55 实参可以是一个对象，也可以是一个函数(函数也是一个对象) 56 */ 57 function fun(a) 58 { 59 a(obj); 60 } 61 fun(hello); 62 /* 将一个匿名函数作为实参传递给函数 */ 63 fun(function(){alert("hello")}); 64 </script> 65 <head> 66 <body> 67 </body> 68 </html>
/* // ES6中的形参赋值默认值：设定形参不传递值，走等号后面的默认值，但是一旦传递值了(undefined除外)，不论传递什么都不会走默认值 function sum(x = 0, y = 0) { var total = x + y, average = total / 2; average = average.toFixed(2); // 在函数体中一定可以拿到处理完成的结果的 // console.log(average); //"15.00" } sum(10, 20); console.log(average); //Uncaught ReferenceError: average is not defined 但是在函数外面，是不能直接访问函数体中的内容的（闭包的机制：当前上下文中的私有变量是受到保护的，不能在上下文以外直接的访问） */ // 函数的出口：返回值机制 function sum(x = 0, y = 0) { var total = x + y, average = total / 2; average = average.toFixed(2); // return // + 不写return或者return后面啥都没有，默认返回值都是undefined // + return后面是啥，返回值就是啥 // + return的一定是一个值，return average也不是返回变量，而是把变量存储的结果返回 -> return '15.00'; return average; // 函数体中只要遇到return，函数体中，return下面的代码都不会再执行的 console.log('OK'); }
任意数求和
1 // ========for循环 2 // 循环：一轮轮的重复做一些事情 3 // for(「1.设定初始值」;「2.设定或者验证循环执行的条件」；「4.步长的累计」){ 4 // 「3.执行循环体中的代码」 5 // } 6 // i++ => i+=1 => i=i+1 自身基础上累加1 7 // 区别：i++/++i一定是数学运算 i+=1/i=i+1可能是字符串拼接 8 /* for (var i = 0; i < 5; i++) { 9 console.log(`循环内:${i}`); 10 } 11 console.log(`循环外:${i}`); */ 12 13 //========= 14 // 需求：任意数求和 15 function sum() { 16 var args = arguments; 17 // 思路：依次循环(遍历/迭代)集合中的每一项，把取出来的每一项进行累加 18 var total = 0; 19 for (var i = 0; i < args.length; i++) { 20 // i=0 第一轮循环 args[0]集合中的第一项 i++ 21 // i=1 第二轮循环 args[1]集合中的第二项 i++ 22 // i=2 循环结束 23 // 循环的变量i从零开始，args这个集合中的每一项也是从索引零开始 => 每一轮循环的时候，i存储的值正好是我们需要获取集合中当前项的索引 24 => 每一轮循环 args[i] 获取的就是当前这一轮循环，从集合中取出来的当前项，i等价于当前项的索引 25 var item = Number(args[i]); 26 if (!isNaN(item)) { //isNaN(item) === false 有效数字 27 total += item; 28 } 29 } 30 return total; 31 } 32 33 var sum = (...args) => { 34 var total = 0; 35 for (var i = 0; i < args.length; i++) { 36 var item = Number(args[i]); 37 if (!isNaN(item)) { 38 total += item; 39 } 40 } 41 return total; 42 }; 43 44 var sum = (...args) => { 45 // 利用数组的方法实现求和 46 var total = 0; 47 args.forEach(item => { 48 item = Number(item); 49 if (!isNaN(item)) { 50 total += item; 51 } 52 }); 53 return total; 54 }; 55 56 var sum = (...args) => { 57 return args.reduce((total, item) => { 58 item = Number(item); 59 isNaN(item) ? item = 0 : null; 60 return total + item; 61 }, 0); 62 }; 63 64 var res = sum(10, 20); 65 console.log(res); //=>30 66 67 res = sum(10, 20, '30'); 68 console.log(res); //=>60 把字符串转换为数字，防止出现字符串拼接 69 70 res = sum(10, 20, '30', 'AA'); 71 console.log(res); //=>60 非有效数字不进行任何的累加操作
获取时间字符串函数
1 // 需求：真实项目中，我们从服务器获取到了时间字符串，但是格式并不是我们需要的，我们需要呈现在页面中的是 2 // => “yyyy年mm月dd日 hh时mm分ss秒” 3 // 此时就需要客户端基于JS完成时间格式字符串的数据解析 4 var time = "2020-9-18 9:55:12"; 5 time = "2020/9/18"; 6 7 // supplyZero:传递一个值给我，我们较验其是否符合两位，如果不符合，我们在前面补充零 8 function supplyZero(value) { 9 // 不论什么值加字符串都会变为字符串拼接:把value转换为字符串 String(value)/value.toString() 10 value += ''; 11 return value.length < 2 ? `0${value}` : value; 12 } 13 14 /* 15 * 思路4:JS中关于字符串的处理，往往最强大的方案“正则” 16 */ 17 String.prototype.formatTime = function formatTime(template = '{0}年{1}月{2}日 {3}时{4}分{5}秒') { 18 // this -> time时间字符串 19 var arr = this.match(/d+/g); //["2020", "9", "18", "9", "55", "12"] 20 return template.replace(/{(d+)}/g, function (_, index) { 21 var item = arr[index] || "00"; 22 item.length < 2 ? item = `0${item}` : null; 23 return item; 24 }); 25 }; 26 time = time.formatTime(); 27 console.log(time); 28 29 time = time.formatTime('{0}/{1}/{2}'); 30 console.log(time); 31 32 time = time.formatTime('{1}-{2} {3}:{4}'); 33 console.log(time); 34 35 36 37 38 39 /* 40 * 思路3:利用标准日期对象中提供的方法,获取“年月日”等信息 41 */ 42 /* time = new Date(time); 43 var year = time.getFullYear(), 44 month = time.getMonth() + 1, //0~11 => 1月~12月 45 day = time.getDate(), 46 weekday=time.getDay(),//获取星期几0~6 47 hours = time.getHours(), 48 minutes = time.getMinutes(), 49 seconds = time.getSeconds(); 50 time = `${year}年${supplyZero(month)}月${supplyZero(day)}日 ${supplyZero(hours)}时${supplyZero(minutes)}分${supplyZero(seconds)}秒`; 51 console.log(time); 52 new Date().getTime()//获取日期距离1970-1-1 00：00：00之间的毫秒差 日期计算时经常用到 53 54 */ 55 56 // var nowTime = new Date(); //获取当前客户端的时间 57 // console.log(nowTime); 58 // typeof nowTime => "object" 59 // time = new Date(time); //把一个时间格式的字符串，转换为标准的日期对象 自己扩展：支持的时间字符串格式 60 61 /* 62 * 思路2:按照指定的分割符号和规律各种拆，最后获取到“年月日”等信息 63 * + split([char]):按照指定的分割符号，把字符串中拆出来的每一项存放到数组中 64 */ 65 /* var arr = time.split(' '), //["2020-9-18", "9:55:12"] 66 arrLeft = arr[0].split('-'), //["2020", "9", "18"] 67 arrRight = arr[1].split(':'); //["9", "55", "12"] */ 68 // 优化:加入正则的辅助 s一个空白字符 |或者 ?:只匹配不捕获 69 /* var arr = time.split(/(?:s|-|:)/); //["2020", "9", "18", "9", "55", "12"] */ 70 /* var year = arr[0], 71 month = arr[1], 72 day = arr[2], 73 hours = arr[3], 74 minutes = arr[4], 75 seconds = arr[5]; */ 76 // 优化:基于ES6的解构赋值快速获取每一项的信息 77 /* var [year, month, day, hours, minutes, seconds] = arr; 78 time = `${year}年${supplyZero(month)}月${supplyZero(day)}日 ${supplyZero(hours)}时${supplyZero(minutes)}分${supplyZero(seconds)}秒`; 79 console.log(time); */ 80 81 /* 82 * 思路1:根据字符串截取的办法，获取到字符串中“年月日”等数据信息 83 * + substr(n,m) 从索引n开始截取m个 84 * + substring(n,m) 从索引n开始截取到索引m处，不包含m 85 * + slice(n,m) 和substring类似，可以支持负数作为索引的 86 * + indexOf/lastIndexOf([char]) 获取字符在字符串中第一次或者最后一次出现位置的索引,如果没有这个字符,返回索引-1 87 */ 88 /* var indexBar1 = time.indexOf('-'), 89 indexBar2 = time.lastIndexOf('-'), 90 indexSpace = time.indexOf(' '), 91 indexColon1 = time.indexOf(':'), 92 indexColon2 = time.lastIndexOf(':'); 93 var year = time.substring(0, indexBar1), 94 month = time.substring(indexBar1 + 1, indexBar2), 95 day = time.substring(indexBar2 + 1, indexSpace), 96 hours = time.substring(indexSpace + 1, indexColon1), 97 minutes = time.substring(indexColon1 + 1, indexColon2), 98 seconds = time.substring(indexColon2 + 1); 99 time = `${year}年${supplyZero(month)}月${supplyZero(day)}日 ${supplyZero(hours)}时${supplyZero(minutes)}分${supplyZero(seconds)}秒`; 100 console.log(time); */