along.js

平时写代码用到的方法，就给封装了一下。需要的拿走不谢。。。

1.数组去重 并判断一个元素出现的次数
    handle(str){
        let arr=str.split('')
        var newarr=[];
        var obj={};
        for(var i=0;i<arr.length;i++){
            if(!obj[arr[i]]){
                newarr.push(arr[i]);
                obj[arr[i]]=1;
            }else{
                obj[arr[i]]++;
        }
    }
        console.log(obj);//{a: 3, b: 2, c: 1, d: 2, e: 1, …}
    }
2.获取最小与最大时间的方法
    getAll(value1, value2) {
        var arr = [];
        var getDate = function(str) {
            var tempDate = new Date();
            var list = str.split("-");
            tempDate.setFullYear(list[0]);
            tempDate.setMonth(list[1] - 1);
            tempDate.setDate(list[2]);
            return tempDate;
        }
        var date1 = getDate(value1);
        var date2 = getDate(value2);
        if(date1 > date2) {
            var tempDate = date1;
            date1 = date2;
            date2 = tempDate;
        }
        date1.setDate(date1.getDate());
        var dateArr = [];
        var i = 0;
        while(!(date1.getFullYear() === date2.getFullYear() &&
                date1.getMonth() === date2.getMonth() && date1.getDate() === date2
                .getDate())) {
            var dayStr = date1.getDate().toString();
            if(dayStr.length === 1) {
                dayStr = "0" + dayStr;
            }
            dateArr[i] = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" +
                dayStr;
            date1.setDate(date1.getDate() + 1);
            i++;
        }
        arr = dateArr;
        arr.push(value2)
        return arr;
    }
3.数组扁平化
    flat(arr){
        var newArr =[];
        for(var i= 0; i < arr.length; i++){
            if(arr[i] instanceof Array){
                newArr = newArr.concat(this.flat(arr[i]));
            }else{
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

4.时间戳转化成时间格式
    timeFormat(timestamp){
        var time = new Date(timestamp);
        var year = time.getFullYear();
        var month = time.getMonth()+1;
        var date = time.getDate();
        var day=time.getDay();
        return year+'-'+this.add0(month)+'-'+this.add0(date)
    }
    add0(m){return m<10?'0'+m:m }

5.星期封装方法 返回星期几
    GetWeek(num){
        let b=num%7;
        switch(b){
            case 1:
                return '周一'
            case 2:
                return '周二'
            case 3:
                return '周三'
            case 4:
                return '周四'
            case 5:
                return '周五'
            case 6:
                return '周六'
            case 0:
                return '周日'
            default:
                console.log('有误')
        }
    }

6.取最小值
    Minarr(arr){
        return Math.min(...arr);
    }

7.取最大值
    Maxarr(arr){
        return Math.max(...arr);
    }
8.如何用异步解决下面问题?
    function getNextEvent(){
        var event1=getNextKeyboarEvent();
        var event2=getNextTouchEvent();
        return event1 || event2
    }
    function getNextEvent(callback){
        let timer=setInterval(function(){
            let event=getNextKeyboarEvent() || getNextTouchEvent()
            if (event) {
                clearInterval(timer)
                callback(event)
            }
        })
    }
9.冒泡排序：依次对相邻的两个数据进行比较，大的放在后面，小的放在前面
    function Arrp(arr){
            var temp=0;
            for(let i=0;i<arr.length;i++){
                for(let j=i+1;j<arr.length;j++){
                    if(arr[i]>arr[j]){
                        temp=arr[i];
                        arr[i]=arr[j];
                        arr[j]=temp;
                    }
                }
            }
            console.log(arr)
        }
10.选择排序：将第一位的数据与后面的数据依次比较，得到最小值与第一位交换，第二位大的值再一次与后面的数据依次比较，进行排序。
    function ArraySt(arr){
            for(let i=0;i<arr.length-1;i++){
                var min=arr[i];//假设第一位是最小值
                var minIndex=i;//再拿到最小值时的索引
                for(let j=i+1;j<arr.length;j++){
                    if(min>arr[j]){//假设失败 最小值大于了后一位的值
                        min=arr[j];//存储此时的最小值
                        minIndex=j;//存储此时最小值的索引
                    }
                }
                arr[minIndex]=arr[i];//再把第一位的数据放在第二位最小值的位置
                arr[i]=min;//再把最小值放在第一位的位置
            }
            console.log(arr)
        }
11.数组去重
    function Setarr(arr){
        var set = new Set(arr);
        return set;
   }
12.实现数据双向绑定
    <body>
   <div id="app">
       <input type="text" id="txt">
       <p id="show-txt"></p>
   </div>
   <script>
       var obj = {}
       Object.defineProperty(obj, 'txt', {
           get: function () {
               return obj
           },
           set: function (newValue) {
               document.getElementById('txt').value = newValue
               document.getElementById('show-txt').innerHTML = newValue
           }
       })
       document.addEventListener('keyup', function (e) {
           obj.txt = e.target.value
       })
   </script>
</body>
13.将数字金额每三位用逗号分隔
     // * 功能：金额按千位逗号分隔
     // * 参数：s，需要格式化的金额数值.
     // * 参数：type,判断格式化后的金额是否需要小数位.
     // * 返回：返回格式化后的数值字符串.
    formatMoney(s, type) {
        if (/[^0-9]/.test(s))
            return "0.00";
        if (s === null || s === "null" || s === "")
            return "0.00";
        s = s.toString().replace(/^(\d*)$/, "$1.");
        s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
        s = s.replace(".", ",");
        var re = /(\d)(\d{3},)/;
        while (re.test(s))
            s = s.replace(re, "$1,$2");
        s = s.replace(/,(\d\d)$/, ".$1");
        if (type === 0) {
            var a = s.split(".");
            if (a[1] === "00") {
                s = a[0];
            }
        }
        return s;
    }
14.获取任意两日期内所有的月份
    getMonthBetween(start, end) {
        var result = [];
        var s = start.split("-");
        var e = end.split("-");
        var min = new Date();
        var max = new Date();
        min.setFullYear(s[0], s[1]);
        max.setFullYear(e[0], e[1]);
        var curr = min;
        while(curr <= max) {
            var month = curr.getMonth()+1;
            result.push(curr.getFullYear() + "-" + (month < 10 ? ("0" + month) : month));
            curr.setMonth(month);
        }
        return result;
    }
15.获取日期前天，昨天，今天，明天，后天...
    GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;//获取当前月份的日期
        var d = dd.getDate();
        return y+"-"+m+"-"+d;
    }

16.url地址传递数据截取
    var url="http:item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
    function StrUrl(url){
        let result={};
        let a=url.split("?")[1];
        let b=a.split("&");
        for(let i=0;i<b.length;i++){
            result[b[i].split("=")[0]]=b[i].split("=")[1]
        }
        return result;
    }
17.函数防抖
    HTML:
        <button id='show'>抢购</button>
        <div id="box">0</div>
    JS:
        let oBtn=document.getElementById('show');
        let oBox=document.getElementById('box');
        /*
            handle:buy函数
            wait:规定在一秒钟内只能执行一次
        */
        function throttle (handle, wait) {
            let lastTime = 0;
            return function (e) {
                let nowTime = new Date().getTime()
                if (nowTime - lastTime > wait) {
                    handle.apply(this,arguments);
                    handle();
                    lastTime = nowTime;
                }
            }
        }
        function buy(e){
            console.log(this,e)
            oBox.innerText = parseInt(oBox.innerText)+1
        }
        oBtn.onclick = throttle(buy, 1000)
18.函数节流
    HTML:
        <input type='text' id='ipt'/>
    JS:
        let oIpt = document.getElementById('ipt');
        let time = null;
        function debounce (handle, delay) {
            let time = null;
            return function () {
                let self = this,arg = arguments;
                clearTimeout(time);
                time = setTimeout(function () {
                    handle.apply(self,arg);
                },delay)
            }
        }
        function ajax (e) {
            console.log(e,this.value)
        }
        oIpt.oninput = debounce(ajax, 1000)
19.数据随机
    arr.sort(function randomsort(a, b) {  // 数据随机
      return Math.random() > .5 ? -1 : 1;
    });
20.多行文本溢出显示省略号
    overflow: hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
21.在一个无序整数数组中，找出连续增长片段最长的一段, 增长步长是1。
    let arr = [3,2,1,14,5,5,8,1,2,3,4,5,6,76,7,1,2,9];
    function fn(arr){
        let temp = [];
        let sub = [];
        for ( let i = 0; i < arr.length; i++ ){
            if(arr[i]+1 === arr[i+1]){
                temp.push(arr[i]);
            }else{
                if(temp.length!=0){
                    let temp1 = [];
                    temp.push(arr[i]);

                    for( let i = 0 ; i < temp.length; i++){
                        temp1.push(temp[i])
                    }

                    if(sub.length===0||sub.length<temp1.length){
                        sub = temp1
                    }
                    temp = [];
                }
            }
        }
        return sub;
    }
    let arr1 = fn(arr);
    console.log(arr1);

22.字符中去掉汉字
    function RemoveChinese(strValue) {
      if(strValue!= null && strValue != ""){
        var reg = /[\u4e00-\u9fa5]/g;
        return strValue.replace(reg, "");
      }
      else
        return "";
    }
23.获取所有DOM子元素
    function getDom(elem) {
      var childArr = elem.children || elem.childNodes,
        childArrTem = new Array();
       for (var i = 0 ; i < childArr.length; i ++ ) {
        if (childArr[i].nodeType == 1){
        childArrTem.push(childArr[i]);
       }
      }
      return childArrTem;
     }
24.数组元素随机排序
    function randomSort(a){
      var arr = a,
          random = [],
          len = arr.length;
      for (var i = 0; i < len; i++) {
        var index = Math.floor(Math.random()*(len - i));
        random.push(a[index]);
        arr.splice(index,1);
      }
      return random;
    }

25.要取一个小数的小数点后四位，有什么方法？
    1 使用 Math.floor
        var num = 3.141592653
        var result = Math.floor (num * 10000) / 10000
    2 当做字符串，使用正则匹配
        var num = 3.141592653
        var regex = /^\d+(?:\.\d{0,4})?/
        var result = num.toString().match(regex)
    3 通过四舍五入
        var num = 3.141592653
        var result = num.toFixed(4)  //"3.1416"

26.如何全选checkbox表单，或者反选他们
//全选
$("#all").click(function(){
    //获取所有的checkbox
    var ches=$("input[type='checkbox']")
    //遍历所有的checkbox,重设选中状态为选中
    ches.each(function(){
    $(this).prop("checked",true)
  })
})
//反选
$("#unall").click(function(){
    //获取所有的checkbox
    var ches=$("input[type='checkbox']")
    //遍历所有的checkbox,重设选中状态为不选中
    ches.each(function(){
    $(this).prop("checked",false)
  })
})

37.现在要做一个 类似 nav 或者 tab 的效果，点击一个元素的时候，让他高亮，他的同级元素则没有效果，用jQuery，代码应该是怎样的？
$('.mod-tab .tab').on('click',function(){
  $(this).addClass('active')  .siblings().removeClass('active')
}

38.select获取选项中的值和文本
    <select id="test" name="">
        <option value="1">text1</option>
        <option value="2">text2</option>
    </select>
    <button id="my">获取</button>
    ---------------------------------------
    $("#my").on("click",function () {
        var textValue = $("#test option:selected");
        console.log(textValue.val());//值
        console.log(textValue.text());//文本
    })
39. Demo案例
    39.1）简单选项卡功能
        https://www.cnblogs.com/qdclub/archive/2018/10/07/9750614.html
    39.2）数组的方法
        https://www.cnblogs.com/yyjbk/archive/2018/10/10/9764518.html
    39.3）.向指定元素添加事件的方法：addEventListener()方法
    39.4）.js实现动态分页
        https://www.cnblogs.com/littleboyck/archive/2018/10/10/9769051.html
    39.5）.vue懒加载
        https://www.cnblogs.com/huangenai/p/9736035.html
    39.6）.css基础
        http://www.divcss5.com/rumen/r307.shtml
    39.7）.调拨打电话页面
        <a href=”tel:15771791266 ”>拨打电话</a>
    39.8）.前端规范
        https://www.cnblogs.com/xiaolingyan/p/9831740.html
    39.9）.移动端自适应
        https://www.cnblogs.com/web1/p/9812669.html
	40.0）.异步async和await
        https://www.cnblogs.com/SamWeb/p/8417940.html
    40.1）常用类库汇总
        http://react-china.org/t/topic/27278
    40.2) fetch的详解
        https://juejin.im/post/5c2c36626fb9a049b506eb94

40.锚点链接
    $(document).ready(function () {
        //点击触发事件
        $("").click(function () {
            $("html,body").animate({
                scrollTop: $("").offset().top//跳转到的位置
            }, {
                duration: 400,//预定速度
                easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
            });
        });

    });

41.无线H5开放平台
    http://h5.alibaba-inc.com/windvane/StandardEvent.html
    41.1）Native 向 H5 发送事件
      var btnHref;
      container.find('a').each(function(item, i) {
        $(item).on('click', function() {
          btnHref = $(item).attr('href');
          // console.log(btnHref)
          if (window.WindVane && window.WindVane.isAvailable) {
            var params = {
              url: btnHref
            };
            window.WindVane.call('WVNative', 'openWindow', params, function(e) {
            }, function(e) {
              window.location.href = btnHref;
            });
            return false;
          }
        });
      });

42.Es7
    1.Array.prototype.includes() 查找一个值是否在数组中，若在返回true，不在返回false
        1.1 接收一个参数
            ['a', 'b', 'c'].includes('a')     // true
            ['a', 'b', 'c'].includes('d')     // false
        1.2 接收两个参数
            ['a', 'b', 'c', 'd'].includes('b')         // true
            ['a', 'b', 'c', 'd'].includes('b', 1)      // true
            ['a', 'b', 'c', 'd'].includes('b', 2)      // false

	2.求幂运算符
        2.1 基本用法
            3 ** 2  //9   <==>  Math.pow(3,2)
            var b = 3; b **=2; b-->9
43.Es8
    1.async await 异步函数async function()
    2.生明方式
        函数声明  ： async function foo() {}
        函数表达式： const foo = async function() {}
        对象的方式： let obj = { async foo() {} }
        箭头函数  ： const foo = async () => {}
44.数组值为对象去重
    setArr (arr) {
    var result = [];
    var obj = {};
    for(var i =0; i<arr.length; i++){
        if(!obj[arr[i].id]){
          result.push(arr[i]);
          obj[arr[i].id] = true;
        }
    }
    return result;
  }

  45.数组值为对象去重
    1.// 将对象元素转换成字符串以作比较
    function obj2key(obj, keys) {
      var n = keys.length,
        key = [];
      while (n--) {
        key.push(obj[keys[n]]);
      }
      return key.join('|');
    }
    // 去重操作
    function uniqeByKeys(array, keys) {
      var arr = [];
      var hash = {};
      for (var i = 0, j = array.length; i < j; i++) {
        var k = obj2key(array[i], keys);
        if (!(k in hash)) {
          hash[k] = true;
          arr .push(array[i]);
        }
      }
      return arr;
    }  

    newArr = uniqeByKeys(newArr, ['video_pic']);

    2.
    // 去重
      removeRepeat: function(arr) {
        let res = [];
        let repeat = [];
        for (var i = 0; i < arr.length; i++) {
          var title = arr[i].itemTitle;
          if (!repeat[title]) {
            res.push(arr[i]);
            repeat[title] = 1;
          }
        }
        return res;
      }

	46.css实现圆柱
        .ellipse{
          position: absolute;
          left: 0;
          top: 20%;
          width:100px;
          height:100px;
          border:solid 0.5px black;
          background: deepskyblue;
          border-radius: 50px;
          transform: rotateX(70deg);//css3新属性
        }
        .ellipse:after{
          content: '';
          display:inline-block;
          width:100px;
          height: 140px;
          position:relative;
          opacity: 0.6;
          background: deepskyblue;
          top:50%;
          left:-0.5px;
          border-left:black 0.5px solid;
          border-right:black 0.5px solid;
          border-bottom: black 0.5px solid;
          border-bottom-left-radius: 50px;//css3新属性
          border-bottom-right-radius: 50px;
        }

    47.Object.getPrototypeOf()方法可以用来从子类上获取父类。

	48. // 数据排序
        newArr.sort(function(a, b) {
          return a.video_price - b.video_price;
        });

	49.z-index的取值范围
        z-index的取值范围在-32767至32767之间

	50.查看页面dom元素
        document.getElementsByTagName('*').length

	51.async await语法
        51.1）async function basicDemo() {
            let result = await Math.random();
            console.log(result,'result');
        }
        basicDemo();
        51.2）async
            async function demo01() {
                return 123;
            }
            demo01().then(val => {
                console.log(val);// 123
            });
            若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();
    52.区分浏览器内核
        function getBrowserInfo() {
          var ua = navigator.userAgent.toLocaleLowerCase();
          var browserType = null;
          if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
            browserType = "IE";
            browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
            alert('推荐使用谷歌浏览器打开')
          } else if (ua.match(/firefox/) != null) {
            browserType = "火狐";
          } else if (ua.match(/ubrowser/) != null) {
            browserType = "UC";
          } else if (ua.match(/opera/) != null) {
            browserType = "欧朋";
          } else if (ua.match(/bidubrowser/) != null) {
            browserType = "百度";
          } else if (ua.match(/metasr/) != null) {
            browserType = "搜狗";
          } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            browserType = "QQ";
          } else if (ua.match(/maxthon/) != null) {
            browserType = "遨游";
          } else if (ua.match(/chrome/) != null) {
            var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
            function _mime(option, value) {
              var mimeTypes = navigator.mimeTypes;
              for (var mt in mimeTypes) {
                if (mimeTypes[mt][option] == value) {
                  return true;
                }
              }
              return false;
            }
            if (is360) {
              browserType = '360';
            } else {
              browserType = '谷歌'
            }
          } else if (ua.match(/safari/) != null) {
            browserType = "Safari";
          }
          console.log('当前浏览器： ' + browserType)
        }
        getBrowserInfo()
    53.发出url请求并阻止
        function stopDefault( e ) {
        if ( e && e.preventDefault )
          e.preventDefault();
        else
        window.event.returnValue = false;
        return false;
      }
      var url = 'https://iwatch.cainiao-inc.com/iwatch/report/json/visit_record.json?url=https%3a%2f%2fi.cainiao-inc.com%2fcainiao-nplus%2fiknow_tms%2fiknow_tms_click_start&hostName=i.cainiao-inc.com&pathName=%2fcainiao-nplus%2fiknow_tms%2fiknow_tms_click_start&userName=' + inval;
      stopDefault(e);
    54.随机生成字符串
        function randomString(n) {
            let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
            let tmp = '',
              i = 0,
              l = str.length;
            for (i = 0; i < n; i++) {
              tmp += str.charAt(Math.floor(Math.random() * l));
            }
            return tmp;
          }
    55.反转一个整数 支持负数
        const reverseInteger = function (number) {
            var str = String(number)
            if(str.length>9) return 0
            if(str.charAt(0) == "-"){
                var str_r = String(number).substr(1,str.length)
                return parseInt("-"+str.split("").reverse().join(""))
            }

            return parseInt(str.split("").reverse().join(""))
        }
    56.递归
        function factorialize(num){
          if(num < 0){
            return -1;
          }
          if(num === 0 || num === 1){
            return 1;
          }
          if(num >1){
            return num * factorialize(num-1)
          }
        }
    57.密码移位
        function rot13(str) {
           var new_arr=[];
          for(var i=0;i<str.length;i++){
             if(str.charCodeAt(i)<65||str.charCodeAt(i)>90){
               new_arr.push(str.charAt(i));
             }else if(str.charCodeAt(i)>77){
               new_arr.push(String.fromCharCode(str.charCodeAt(i)-1));
             }else{
               new_arr.push(String.fromCharCode(str.charCodeAt(i)+1));
             }
           }
           return new_arr.join("");
        }
    58.this指向
         定义：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
     总结：
          1.在普通函数内部，this的指向是window
          2.在方法内部，this的指向是方法的拥有者。
          3.在箭头函数内部，this指向是创建箭头函数时所在的环境中的this指向的值。
          4.在对象中，this指向当前对象
     这里的this指向会发生改变
          5.计时器中的this
          6.回调函数中的this
          7.事件处理函数中的this指向事件的绑定者
    59.查找元素在数组中的位置
        function indexOf(arr, item) {
          if (Array.prototype.indexOf){   //判断当前浏览器是否支持
              return arr.indexOf(item);
          } else {
              for (var i = 0; i < arr.length; i++){
                  if (arr[i] === item){
                      return i;
                  }
              }
          }
          return -1;     //总是把return -1暴漏在最外层
        }

渡人如渡己，渡已，亦是渡当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。