JavaScript开发小知识积累

1、统计字符串中字符出现的次数

   var arr = "helloworld";
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            var key = arr[i];
            if (obj[key]) {
                obj[key]++;
            } else {
                obj[key] = 1;
            }
        }

2、统计数组中元素出现的次数
第一种方法(reduce)：

        var countedNames = names.reduce(function (allNames, name) {
            if (name in allNames) {
                allNames[name]++;
            } else {
                allNames[name] = 1;
            }
            return allNames;
        }, {});

第二种方法：

function getEleNums(data) {
 var map = {}
 for (i = 0; i < data.length; i++) {
     var key = data[i]
     if (map[key]) {
         map[key] += 1
     } else {
         map[key] = 1
     }
 }
 return map
}

3、获取URL中的参数

 function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

4、电话号码中间4位用*替换
利用正则解决

var reg = /(\d{3})(\d{4})(\d{4})/;
phone = phone.replace(reg, "$1****$3");

利用普通js方法解决

var phone = "1308080088".split("")
        phone.splice(3,4,"*".repeat(4))
        console.log(phone.join(""))

利用substring和substr来解决

 var phone = "1308080088"
        let a = phone.substring(0, 3)
        let b = phone.substr(7, 4)
        let str = a + "****" + b
        console.log(str)

5、延时器，可用来延时掉接口

sleep = (ms) => {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                resolve();
            }, ms)
        })
    };

6、当我们做模糊查询，要传参时，data是原有的值，param是查询的参数，可以使用Object.assign的方式来复制进去

  if (Object.keys(param)?.length) {
            Object.assign(data, param)
        }

7、react中ref的两种使用方式
第一种方式

<List ref={ref => (this._list = ref)}/>

this._list.endLoading();

第二种方式

 <List ref={"ListRef"}/>

this.refs["ScrollableTabView"].endLoading();

8、在一个表单页，每个控件都对应一个变量，当我们在提交的时候，要将这将这些变量清空（移动端中也可以返回到上一个页面）。这时我们可以将这些变量存到一个对象当中，这样做的好处是便于重置数据以及提高代码可读性。

9、在reactNative的开发中，详情页面有一个“关注/取消关注”的功能，页面初始化的时候，通过详情的接口将关注的状态显示出来，点击关注的调用关注的接口。如果按照这个逻辑去做，点击关注之后，此时虽然 后台的数据变了，但是页面还没刷新，不难想到，我门的页面是通过详情的接口渲染出来的，在调用关注的接口时，页面并不会有改变，除非重新调一次详情接口。此时可将是否关注存一个变量到state中，用这个变量来控制页面上显示“未关注”或是“已关注”。获取到详情的接口后赋值给它完成初始化的渲染，在调用关注或取消关注的接口后通过this.setState对页面进行更新。

10、填充一个固定数组

  var arr = data.concat(new Array(6 - data.length).fill(0))