前端小技巧日常积累

最新推荐文章于 2025-04-20 10:04:56 发布

玉米_欣

最新推荐文章于 2025-04-20 10:04:56 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js 积累文章标签： object 数组字符串排序

本文链接：https://blog.youkuaiyun.com/u012967849/article/details/84037736

前端同时被 3 个专栏收录

49 篇文章

订阅专栏

21 篇文章

订阅专栏

积累

7 篇文章

订阅专栏

检查用户名是否合法

$scope.check_name=function(data){
    var reg = new RegExp("^[\u4E00-\u9FA5A-Za-z_0-9]+$");
        if(!data||!reg.test($scope.dialogDatas.mingcheng)){
        	$scope.is_regularname=true;
        	$(".mingcheng").css("border-color","#ca6843");
        }else{
        	$scope.is_regularname=false;
        	$(".mingcheng").css("border-color","#b7b3b4");
        }
}

将两个对象合成一个对象【Object.assign】

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

input propertychange事件，当input的value值发生改变时触发（文本框的值即时搜索）

    $("#txt_gsName").bind("input propertychange", function () {  
           var gsName = $("#txt_gsName").val(); //公司名称  
           $.ajax({  
               type: "post",  
               url: "/StoreApply/CheckGsName",  
               data: { gsName: gsName },  
               dataType: "json",  
               success: function (data) {  
                   if (data.statue == true) {  
                       alert(data.message);  
                       $("#txt_gsName").val("");  
                       return false;  
                   }  
               }  
           });  
       });

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

判断数组或对象中的key是否存在

JS中数组和对象是等同的，判断一个key是否存在于数组中(或对象是否包含某个属性)，我们可能马上想到的是使用ary[key] == undefined来判断key是否存在这个数组或者是对象中，但是这样判断是有问题的，因为可能存在ary = {key:undefined};


正确的方法应该为：

ary.hasOwnProperty(key); 或 obj.hasOwnProperty(key);

另外数组或对象进行循环的时候应该使用：

for(var key in ary) { console.log(key+" : "+ary[key]); }

图片缓存清除、

在服务端实时的获取动态变化的图片，如果图片的名称路径没有改变，浏览器会贱贱的拿着缓存不放，这个时候我们要做的就是改变图片的路径，不是真正的改变src的路径，而是在这个路径后面加上没有用的参数：

src='image/123.png?t='+new Date().getTime(); 

或者

src='image/123.png?m='+Math.random();

Pomise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

Promise.all([请求1，请求2]).then(values => {
      //请求1结果values[0]，请求2结果values[1]
        console.log(values[0],values[1])
       })

删除对象中的一个key

对象中的key是一个变量的时候

    delete this.keyValue[data.num];

    var o = { x: 1 };
    delete o.x; // true
    o.x; // undefined

排序

data=data.sort(this.sortByOrdinal);

sortByOrdinal(a,b){ return a.ordinal-b.ordinal; }

input password如何解决由浏览器记住密码的默认行为带来的密码下拉选项问题

input 的name disable 的属性都会影响是否显示下拉选项
思想：要让浏览器找不到填充的位置就可以了。具体方式就是先告诉浏览器我的type=passowrd的input标签是一个新创建的密码，也就是设置autocomplete=”new-password”，然后不给这个input标签设置id和name属性，这样就无法填充了。但是当你的页面中只包含type=password的input标签的时候上诉方法就有问题了，比如在修改密码页面，首先我们不需要它自动填充密码，而且修改密码页面一般只有旧密码、新密码、重复新密码三个需要type=password的input标签，这时候没有type=text的input标签，此时用上面的方法就有问题了，解决办法是加一个隐藏type=text的input标签
核心代码：

   <!-- 这里添加了一个隐藏的type=text的input标签 -->
    <input type="text" style="display: none;">
    <input type="password" class="form-control"  placeholder=""  autocomplete="new-password">

参考博客：
- 通过h5代码写法取消chorme密码自动填充

判断输入的字符串长度英文不超过40个字符，中文不超过20个汉字

/**
   *判断字符串长度
   */
  strLength(str) {
    if (str == null) return 0;
    if (typeof str != "string") {
      str += "";
    }
    return str.replace(/[^\x00-\xff]/g, "01").length;
  }

JS中合并多个数组，且去除数组重复元素

merge(bigArray) {
    let array = [];
    const middeleArray = bigArray.reduce((a, b) => { return a.concat(b); });
    middeleArray.forEach((arrItem) => {
      if (array.indexOf(arrItem) == -1) {
        array.push(arrItem);
      }
    });
    return array;
}
  console.log(merge([[4,5],[1,1],[2,3],[4,2,3]]));