js 面试的坑（四）

r囧r小猫 2022-07-16 10:26 169阅读 0赞

函数提升比变量提升优先级高

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

input 4位加一个空格

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  9.         <title>  
  10.             数字每4位加空格  
  11.         </title>  
  12.         <script type="text/javascript">  
  13.             window.onload = function() {
  15.                 var t = document.getElementById("test");  
  16.                // t.onkeydown = change;  
  17.                 t.oninput = change;  
  18.                 //t.onkeypress = change;  
  19.             }  
  20.             function change() {
  22.                 this.value = this.value.replace(/\D/g, '').replace(/....(?!$)/g, '$& '); //替换空格前4位数字为4位数字加空格  
  23.             }  
  24.         </script>  
  25.     </head>  
  27.     <body>  
  28.         <input type="text" id="test" />  
  29.     </body>  
  31. </html>

JS中判断null、undefined与NaN的方法

  1. 写了个 str ="s"++; 
  3. 然后出现Nan，找了一会。 
  5. 收集资料如下判断： 
  7. 1.判断undefined: 
  8. 复制代码 代码如下:
  10. <span style="font-size: small;">var tmp = undefined; 
  11. if (typeof(tmp) == "undefined"){ 
  12. alert("undefined"); 
  13. }</span> 
  15. 说明：typeof 返回的是字符串，有六种可能："number"、"string"、"boolean"、"object"、"function"、"undefined" 
  17. 2.判断null: 
  18. 复制代码 代码如下:
  20. <span style="font-size: small;">var tmp = null; 
  21. if (!tmp && typeof(tmp)!="undefined" && tmp!=0){ 
  22. alert("null"); 
  23. }　</span> 
  25. 3.判断NaN: 
  26. 复制代码 代码如下:
  28. <span style="font-size: small;">var tmp = 0/0; 
  29. if(isNaN(tmp)){ 
  30. alert("NaN"); 
  31. }</span> 
  33. 说明：如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。 
  35. 提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。 
  37. 4.判断undefined和null: 
  38. 复制代码 代码如下:
  40. <span style="font-size: small;">var tmp = undefined; 
  41. if (tmp== undefined) 
  42. { 
  43. alert("null or undefined"); 
  44. } </span> 
  46. 复制代码 代码如下:
  48. <span style="font-size: small;">var tmp = undefined; 
  49. if (tmp== null) 
  50. { 
  51. alert("null or undefined"); 
  52. }</span> 
  54. 说明：null==undefined 
  56. <!--EndFragment--> 
  58. 5.判断undefined、null与NaN: 
  59. 复制代码 代码如下:
  61. <span style="font-size: small;">var tmp = null; 
  62. if (!tmp)   //if ((!tmp)&&(tmp!=0)) 
  63. { 
  64. alert("null or undefined or NaN");    
  65. }</span> 
  67. 提示：一般不那么区分就使用这个足够。

看看

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

看看

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript" src="app/js/jquery-2.1.4.js"></script>
  8.         <script type="text/javascript">
  9.             $(function() {
  11.                 var a=11;
  12.                 function aaa(a) {
  14.                     console.log(a);
  15.                     a=10; 
  16.                 }
  18.                 function bbb(a) {
  20.                     console.log(a);
  21.                     a=100;
  22.                 }
  24.                 function ccc(a) {
  26.                     console.log(a);
  27.                     a=1000;
  28.                 }
  30.                 //
  32.                 var arry = [];
  33.                 arry.push(aaa);
  34.                 arry.push(bbb);
  35.                 arry.push(ccc);
  36.                 for(var i = 0; i < arry.length; i++) {
  37.                     arry[i](a);
  38.                 }
  40.                 //var sb = $.Callbacks().add(aaa).add(bbb).add(ccc).fire();
  41.                 var sb = $.Callbacks().add(aaa, bbb ,ccc).fire(a);
  43.             })
  44.         </script>
  45.     </head>
  47.     <body>
  48.     </body>
  50. </html>

这里写图片描述

$.Callbacks()实现原理

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript" src="app/js/jquery-2.1.4.js"></script>
  8.         <script type="text/javascript">
  9.             $(function() {
  11.                 function aaa() {
  13.                     alert(1);
  14.                 }
  16.                 function bbb() {
  18.                     alert(2);
  19.                 }
  21.                 function ccc() {
  23.                     alert(3);
  24.                 }
  26.                 var arry = [];
  27.                 arry.push(aaa);
  28.                 arry.push(bbb);
  29.                 arry.push(ccc);
  30.                 for(var i = 0; i < arry.length; i++) {
  31.                     arry[i]();
  32.                 }
  34.                 //var sb = $.Callbacks().add(aaa).add(bbb).add(ccc).fire();
  35.                 var sb = $.Callbacks().add(aaa, bbb ,ccc).fire();
  36.             })
  37.         </script>
  38.     </head>
  40.     <body>
  41.     </body>
  43. </html>

再原基础上加

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript" src="app/js/jquery-2.1.4.js"></script>
  8.         <script type="text/javascript">
  9.             $(function() {
  11.                 console.log($.now());
  12.                 $("#id").click(function() {
  14.                     $(this).css('width', "+=100px");  //在原基础上加
  15.                 })
  16.             })
  17.         </script>
  18.     </head>
  20.     <body>
  21.         <div id="id" style="width: 100px;height: 100px;background: red;">
  23.         </div>
  24.     </body>
  26. </html>

默认变量

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript">
  8.             var plugin = (function() {
  10.                 var sayhi = function(str = '你好啊!') {
  12.                     console.log(str);
  13.                 }
  14.                 var sayhello = function() {
  16.                     console.log("这个API能做很牛逼的事情");
  17.                 }
  18.                 return {
  19.                     sayhi: sayhi,
  20.                     sayhello: sayhello
  21.                 }
  22.             })();
  24.             //通过插件提供的API使用插件
  25.             plugin.sayhi();
  26.             plugin.sayhi('javascript');
  27.             plugin.sayhello();
  28.         </script>
  29.     </head>
  31.     <body>
  32.     </body>
  34. </html>

这里写图片描述

5星级

参考链接：http://www.cnblogs.com/libin-1/p/5962269.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <title>Document</title>
  8.         <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  9.         <style type="text/css">
  10.             .red {
  11.                 width: 100px;
  12.                 height: 100px;
  13.                 background: red;
  14.             }
  16.             .green {
  17.                 width: 100px;
  18.                 height: 100px;
  19.                 background: green;
  20.             }
  21.         </style>
  22.         <script type="text/javascript">
  23.             $(function() {
  24.             //闭包的常规用法
  25.                 var i = 0;
  26.                 function main() {
  28.                     return function() {
  30.                         console.log("我是：" + i++);
  31.                     }
  32.                 }
  33.                 var sbs = main();
  34.                 sbs();
  35.                 sbs();
  36.                 sbs();
  37.                 sbs();
  38.             });
  40.             $(function() {
  42.                 $(".red").click((function(a, b, c) {
  44.                     return function() {
  46.                         console.log(a++, b++, c++);
  47.                     }
  48.                 })(1, 2, 3));
  49.             });
  50.             //上面的原理
  51.             $(function() {
  53.                 var haha = (function(a, b, c) {
  55.                     return function() {
  57.                         console.log(a++, b++, c++);
  58.                     }
  59.                 })(100, 200, 300)
  60.                 $(".green").click(haha);
  62.             })
  63.         </script>
  64.     </head>
  66.     <body>
  67.         <div class="red"></div>
  68.         <div class="green"></div>
  69.     </body>
  71. </html>
  73. <!doctype html>
  74. <html lang="en">
  76.     <head>
  77.         <meta charset="UTF-8" />
  78.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  79.         <title>Document</title>
  80.         <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  81.         <style type="text/css">
  82.             .red {
  83.                 width: 100px;
  84.                 height: 100px;
  85.                 background: red;
  86.             }
  88.             .green {
  89.                 width: 100px;
  90.                 height: 100px;
  91.                 background: green;
  92.             }
  93.         </style>
  94.         <script type="text/javascript">
  95.             $(function() {
  96.       //闭包的常规用法
  97.                 var i = 0;
  99.                 function main() {
  101.                     return function() {
  103.                         console.log("我是：" + i++);
  104.                     }
  105.                 }
  106.                 var sbs = main();
  107.                 sbs();
  108.                 sbs();
  109.                 sbs();
  110.                 sbs();
  111.             });
  112.             $(function() {
  114.                 var sb = (function(i, j) {
  116.                     return i + j;
  117.                 })(2, 3);
  118.                 console.log("sb：" + sb);
  119.             })
  120.             $(function() {
  122.                 $(".red").click((function(a, b, c) {
  124.                     return function() {
  126.                         console.log(a++, b++, c++);
  127.                     }
  128.                 })(1, 2, 3));
  129.             });
  130.             //上面的原理
  131.             $(function() {
  133.                 var haha = (function(a, b, c) {
  135.                     return function() {
  137.                         console.log(a++, b++, c++);
  138.                     }
  139.                 })(100, 200, 300)
  140.                 $(".green").click(haha);
  142.             });
  144.             //上面的为啥会闭包：一般匿名自执行函数里面return函数就是闭包
  145.             //回调函数就是匿名自执行，里面return 就是闭包
  146.             $(function() {
  148.                 var main = function() {
  150.                     console.log('sb');
  151.                 }
  152.                 var set = setInterval(main, 1000)
  153.             })
  154.         </script>
  155.     </head>
  157.     <body>
  158.         <div class="red"></div>
  159.         <div class="green"></div>
  160.     </body>
  162. </html>

红色的点三下，绿色的点三下，重复两次：

这里写图片描述

学习和工作的过程中总结的干货，包括常用函数、常用js技巧、常用正则表达式、git笔记等。为刚接触前端的童鞋们提供一个简单的查询的途径，也以此来缅怀我的前端学习之路。 PS：此文档，我会持续更新。
Ajax请求
jquery ajax函数
我自己封装了一个ajax的函数，代码如下：

  1. var Ajax = function(url, type success, error) {
  2.     $.ajax({
  3.         url: url,
  4.         type: type,
  5.         dataType: 'json',
  6.         timeout: 10000,
  7.         success: function(d) {
  8.             var data = d.data;
  9.             success && success(data);
  10.         },
  11.         error: function(e) {
  12.             error && error(e);
  13.         }
  14.     });
  15. };

// 使用方法：

  1. Ajax('/data.json', 'get', function(data) {
  3.     console.log(data);
  4. });

jsonp方式
有时候我们为了跨域，要使用jsonp的方法，我也封装了一个函数：

  1. function jsonp(config) {
  3.     var options = config || {};   // 需要配置url, success, time, fail四个属性
  4.     var callbackName = ('jsonp_' + Math.random()).replace(".", "");
  5.     var oHead = document.getElementsByTagName('head')[0];
  6.     var oScript = document.createElement('script');
  7.     oHead.appendChild(oScript);
  8.     window[callbackName] = function(json) {
  9.       //创建jsonp回调函数
  10.         oHead.removeChild(oScript);
  11.         clearTimeout(oScript.timer);
  12.         window[callbackName] = null;
  13.         options.success && options.success(json);   //先删除script标签，实际上执行的是success函数
  14.     };
  15.     oScript.src = options.url + '?' + callbackName;    //发送请求
  16.     if (options.time) {  //设置超时处理
  17.         oScript.timer = setTimeout(function () {
  19.             window[callbackName] = null;
  20.             oHead.removeChild(oScript);
  21.             options.fail && options.fail({ message: "超时" });
  22.         }, options.time);
  23.     }
  24. };
  25. // 使用方法：
  26. jsonp({
  27.     url: '/b.com/b.json',
  28.     success: function(d){
  30.         //数据处理
  31.     },
  32.     time: 5000,
  33.     fail: function(){
  35.         //错误处理
  36.     }       
  37. });

常用正则验证表达式
手机号验证

  1. var validate = function(num) {
  3.     var exp = /^1[3-9]\d{9}$/;
  4.     return exp.test(num);
  5. };

身份证号验证

  1. var exp = /^[1-9]{
  2.     1}[0-9]{
  3.     14}$|^[1-9]{
  4.     1}[0-9]{
  5.     16}([0-9]|[xX])$/;

ip验证

  1. var exp = /^(\d{
  2.     1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{
  3.     1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{
  4.     1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{
  5.     1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
  7. 常用js函数
  8. //返回顶部
  11. $(window).scroll(function() {
  13.     var a = $(window).scrollTop();
  14.     if(a > 100) {
  15.         $('.go-top').fadeIn();
  16.     }else {
  17.         $('.go-top').fadeOut();
  18.     }
  19. });
  20. $(".go-top").click(function(){
  22.     $("html,body").animate({scrollTop:"0px"},'600');
  23. });
  24. //阻止冒泡
  25. function stopBubble(e){
  27.     e = e || window.event;  
  28.     if(e.stopPropagation){
  29.         e.stopPropagation();  //W3C阻止冒泡方法  
  30.     }else {  
  31.         e.cancelBubble = true; //IE阻止冒泡方法  
  32.     }  
  33. }
  34. //全部替换replaceAll
  35. var replaceAll = function(bigStr, str1, str2) {
  36.       //把bigStr中的所有str1替换为str2
  37.     var reg = new RegExp(str1, 'gm');
  38.     return bigStr.replace(reg, str2);
  39. }
  40. //获取浏览器url中的参数值
  41. var getURLParam = function(name) {
  43.     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
  44. };
  45. //深度拷贝对象
  46. function cloneObj(obj) {
  48.     var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
  49.     for(var key in obj){
  50.         if(o[key] != obj[key] ){
  51.             if(typeof(obj[key]) == 'object' ){
  52.                 o[key] = mods.cloneObj(obj[key]);
  53.             }else{
  54.                 o[key] = obj[key];
  55.             }
  56.         }
  57.     }
  58.     return o;
  59. }
  60. //数组去重
  61. var unique = function(arr) {
  63.     var result = [], json = {};
  64.     for (var i = 0, len = arr.length; i < len; i++){
  65.         if (!json[arr[i]]) {
  66.             json[arr[i]] = 1;
  67.             result.push(arr[i]);  //返回没被删除的元素
  68.         }
  69.     }
  70.     return result;
  71. };
  72. //判断数组元素是否重复
  73. var isRepeat = function(arr) {
  74.       //arr是否有重复元素
  75.     var hash = {};
  76.     for (var i in arr) {
  77.         if (hash[arr[i]]) return true;
  78.         hash[arr[i]] = true;
  79.     }
  80.     return false;
  81. };
  82. //生成随机数
  83. function randombetween(min, max){
  85.     return min + (Math.random() * (max-min +1));
  86. }
  87. //操作cookie
  88. own.setCookie = function(cname, cvalue, exdays){
  90.     var d = new Date();
  91.     d.setTime(d.getTime() + (exdays*24*60*60*1000));
  92.     var expires = 'expires='+d.toUTCString();
  93.     document.cookie = cname + '=' + cvalue + '; ' + expires;
  94. };
  95. own.getCookie = function(cname) {
  97.     var name = cname + '=';
  98.     var ca = document.cookie.split(';');
  99.     for(var i=0; i< ca.length; i++) {
  100.         var c = ca[i];
  101.         while (c.charAt(0) == ' ') c = c.substring(1);
  102.         if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  103.     }
  104.     return '';
  105. };

知识技巧总结

  1. 数据类型
  2. underfined、null、0、false、NaN、空字符串。他们的逻辑非结果均为true。
  3. 闭包格式
  4. 好处：避免命名冲突（全局变量污染）。
  5. (function(a, b) {
  7.     console.log(a+b);  //30
  8. })(10, 20);
  9. 截取和清空数组
  10. var arr = [12, 222, 44, 88];
  11. arr.length = 2;   //截取，arr = [12, 222];  
  12. arr.length = 0;   //清空，arr will be equal to [].
  13. 获取数组的最大最小值
  14. var numbers = [5, 45822, 120, -215];
  15. var maxInNumbers = Math.max.apply(Math, numbers);   //45822
  16. var minInNumbers = Math.min.apply(Math, numbers);   //-215
  17. 浮点数计算问题
  18. 0.1 + 0.2 == 0.3   //false
  19. 为什么呢？因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建，在内部都是64位浮点小数表示。可以通过使用toFixed()来解决这个问题。
  20. 数组排序sort函数
  21. var arr = [1, 5, 6, 3];    //数字数组
  22. arr.sort(function(a, b) {
  24.     return a - b;   //从小到大排
  25.     return b - a;   //从大到小排
  26.     return Math.random() - 0.5;   //数组洗牌
  27. });
  28. var arr = [{   //对象数组
  29.     num: 1,
  30.     text: 'num1'
  31. }, {
  32.     num: 5,
  33.     text: 'num2'
  34. }, {
  35.     num: 6,
  36.     text: 'num3'
  37. }, {
  38.     num: 3,
  39.     text: 'num4'
  40. }];   
  41. arr.sort(function(a, b) {
  43.     return a.num - b.num;   //从小到大排
  44.     return b.num - a.num;   //从大到小排
  45. });
  46. 对象和字符串的转换
  47. var obj = {a: 'aaa', b: 'bbb'};
  48. var objStr = JSON.stringify(obj);    // "{"a":"aaa","b":"bbb"}"
  49. var newObj = JSON.parse(objStr);     // {a: "aaa", b: "bbb"}

git笔记
git使用之前的配置

  1. 1.git config --global user.email xxx@163.com
  2. 2.git config --global user.name xxx
  3. 3.ssh-keygen -t rsa -C xxx@163.com(邮箱地址)      // 生成ssh
  4. 4.找到.ssh文件夹打开，使用cat id_rsa.pub    //打开公钥ssh串
  5. 5.登陆github，settings － SSH keys  － add ssh keys （把上面的内容全部添加进去即可）
  6. 说明：然后这个邮箱（xxxxx@gmail.com）对应的账号在github上就有权限对仓库进行操作了。可以尽情的进行下面的git命令了。
  7. git常用命令
  8. 1、git config user.name  /  user.email     //查看当前git的用户名称、邮箱
  9. 2、git clone https://github.com/jarson7426/javascript.git  project  //clone仓库到本地。
  10. 3、修改本地代码，提交到分支:  git add file   /   git commit -m “新增文件”
  11. 4、把本地库推送到远程库:  git push origin master
  12. 5、查看提交日志：git log -5
  13. 6、返回某一个版本：git reset --hard 123
  14. 7、分支：git branch / git checkout name  / git checkout -b dev
  15. 8、合并name分支到当前分支：git merge name   /   git pull origin
  16. 9、删除本地分支：git branch -D name
  17. 10、删除远程分支： git push origin  :daily/x.x.x
  18. 11、git checkout -b mydev origin/daily/1.0.0    //把远程daily分支映射到本地mydev分支进行开发
  19. 12、合并远程分支到当前分支 git pull origin daily/1.1.1
  20. 13、发布到线上：
  21.     git tag publish/0.1.5
  22.     git push origin publish/0.1.5:publish/0.1.5
  23. 14、线上代码覆盖到本地：
  24.     git checkout --theirs build/scripts/ddos
  25.     git checkout --theirs src/app/ddos

发表评论

表情：
评论列表 （有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js坑

    判断一个变量var是否是数组，你需要使用Array.isArray(var)，不能用typeof，否则弹出object 数组排序：\[1,2,5,10\].sort((a, b

    你的名字你的名字/ 0 赞/ 200 阅读