【JS】实用/工具函数/常用函数/Function方法

1.获取日月 时分秒

  //获取 月日
  getMonth=(time)=>{
    var date = new Date(time)
    var month = date.getMonth()+1<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
    var date  = date.getDate()<10?'0'+date.getDate():date.getDate()
    return month+'-'+date
  }

  //获取时分秒
  getTime=(time)=>{
    var date = new Date(time)
    var hours = date.getHours()<10?'0'+date.getHours():date.getHours()
    var minutes  = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
    var second  = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds()
    return hours+':'+minutes+':'+second
  }

使用： 

const CreatedAt =  '0001-01-01T00:00:00Z'

  <Text style={{fontSize: 11, color: '#999999', marginRight: 6}}> { this.getMonth(item.CreatedAt) }  </Text>

 2.短信倒计时

按钮

<Touchable
    style={{
        position: 'absolute',
        right: 20,
        bottom: 15,
        backgroundColor: theme.bgc0,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
         88,
        marginRight: 20,
        height:28,
    }}
    onPress={() => {
      this.send_sms();
    }}
>
    <View>
        <Text style={{
            color: '#FFFFFF',
            fontSize:11,
      }}>{buttonText}</Text>
    </View>
</Touchable>

发送验证码函数

  send_sms() {
    WalletAction.getVerificationCode().then((res) => { 
      if (res.status === 10000) {
        Toast.message('验证码发送成功');
        this.setState({ disabled: true });
        this._setTimeout(60);
      } else {
  
        Toast.message(res.message);
        this.setState({ disabled: false });
      }
    });
  }

倒计时函数

_setTimeout(number) {
    if (number) {
      if (this.state.time > 0) {
        return;
      }
      this.setState({
        time: number - 1,
        buttonText: `${number - 1}秒后重发`,
      }, () => {
        this._setTimeout();
      });
      return;
    }
    if (this.state.time < 1) {
      this.setState({
        buttonText: '获取验证码',
        disabled: false,
      });

    } else {
      this.setState({
        time: this.state.time - 1,
        buttonText: `${this.state.time}秒后重发`,
      });
      this.timer = setTimeout(() => {
        this._setTimeout();
      }, 1000);
    }
  }

 HTML 短信倒计时按钮

    function msgTimeout(number){
        if(number){
            if(time > 0){
                return
            }
            time = number;
            $('#captcha').text( time  + '秒后重新获取').css({'border':'1px solid #c5c5c5','color':'#c5c5c5'})
        }

       if(time < 1){
            $('#captcha').text('获取验证码').css({'border':'1px solid #dba95e','color':'#dba95e'}).attr('onclick'); //恢复点击事件
        }else {
            time = time -1;
            $('#captcha').text( time  + '秒后重新获取').removeAttr('onclick'); //移除点击事件
            setTimeout(function () {
                msgTimeout()
            },1000)
        }
    }

    //验证码按钮
    $('#captcha').on('click',function () {
        msgTimeout(10)
    });

React Hook 钩子倒计时

    const [smsText, setSmsText] = useState('60秒后重发');
    

    const send_sms = () => {
        if (!disable) {
            setDisable(true);
            _setTimeout(60);
        }
    };

    const _setTimeout = (number) => {
        if (number === 0) {
            setDisable(false);
        }
        setSmsText(`${number}秒后重发`);

        const smsTimeout = setTimeout(() => {
            _setTimeout(number - 1);
        }, 1000);
        if (number === 0) {
            clearTimeout(smsTimeout);
        }
    };

   <div
       className={classNames('reg-msg', {
         'reg-disable': disable,
         })}
         onClick={() => {
         send_sms();
         }}
          >
         {disable ? smsText : '发送验证码'}
   </div>

extra：一般倒计时

   countTime = (endTime) => {
        //获取当前时间
        let date = this.state.currentTime;
        let now = date.getTime();
        //设置截止时间
        let endDate =moment(endTime)._d;
        let end = endDate.getTime();
        //时间差
        let leftTime = end - now;
        //定义变量 d,h,m,s保存倒计时的时间
        let d, h, m, s;
        if (leftTime >= 0) {
            d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
       // console.log('1',new Date("2020-6-01 00:00:00"))
        return  d + "天" + h + "时" + m + "分" + s + "秒"
    };

   {
       title: '剩余时长',
        200,
       dataIndex: '',
       key: '',
       render:(text,record) => (
           <div>{this.countTime(record.end_time)}</div>
       )
   }

3.计时器： 时分秒

  countTime() { // 记录已用聊天时间
    this._timer = setInterval(() => {
      let {seconds} = this.state; // 获取秒
      let {minutes} = this.state; // 获取分钟
      let {hour} = this.state; // 获取小时
      if (seconds < 60) { // 秒数如果小于60 就加1
        seconds++;
        if (seconds == 60) { // 秒数如果等于60 就 重置为0
          seconds = 0,
          minutes = ++minutes;
          if (minutes == 60) {
            minutes = 0;
            hour = ++hour;
          }
        }
        this.setState({
          seconds, // 更改秒的状态
          minutes, // 更改分钟的状态
          hour, // 更改小时的状态
        });
      }
    }, 1000);
  }


<Text style={{fontSize: 12, color: '#fff'}}>
               {
                 hour.toString().length == 2 ? null : 0
               }
               {hour}
               :
               {
                 minutes.toString().length == 2 ? null : 0
               }
               {minutes}
               :
               {
                 seconds.toString().length == 2 ? null : 0
               }
               {seconds}
</Text>

4.评分组件

import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    TouchableOpacity,
    Image,
} from 'react-native';
import PropTypes from 'prop-types';


export default class StarRating extends Component {
    static defaultProps = {
        maxStars: 5,
        rating: 1,
        starSize: -1,
        interItemSpacing: 0,
        valueChanged: (index) => { },
        editAble: true,
    };
    static propTypes = {
        maxStars: PropTypes.number,
        rating: PropTypes.number,
        unSelectStar: PropTypes.number,
        valueChanged: PropTypes.func,
        starSize: PropTypes.number,
        interItemSpacing: PropTypes.number,
        editAble: PropTypes.bool,
    };

    constructor(props) {
        super(props);
        this.state = {
            maxStars: this.props.maxStars,
            rating: this.props.rating,
            firstImageLayout: null,
            starSize: this.props.starSize,
        };
    }

    render() {
        let starArray = [];
        let imageSource = null;
        for (let i = 1; i <= this.state.maxStars; i++) {
            if (i <= this.props.rating) {
                imageSource = this.props.selectStar;
            }
            else {
                imageSource = this.props.unSelectStar;
            }

            let styleArray = [];
            if (i !== this.state.maxStars) {
                styleArray.push({ marginRight: this.props.interItemSpacing });
            }
            if (this.state.starSize > 0) {
                styleArray.push({  this.state.starSize, height: this.state.starSize });
            }

            //push Image
            starArray.push(
                <TouchableOpacity
                    key={i}
                    onPress={() => {
                        if (this.props.editAble) {
                            this.props.valueChanged(i)
                        }
                    }}
                >
                    <Image
                        source={imageSource}
                        style={styleArray}
                    />
                </TouchableOpacity>
            );
        }
        return (
            <View
                style={styles.container}
            >
                {starArray}
            </View>
        )
    }

};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

使用：

<StarRating
    maxStars={5} // 最大星星数量
    rating={this.state.sellerScore} // 当前星星数
    starSize={20} // 星星大小
    interItemSpacing={23} // 星星之间的间距
    valueChanged={(star) => {this.setState({sellerScore: star},() => {console.log(this.state.sellerScore)})}} // 星星数量改变
    selectStar={videoVoice} // 选中图片
    unSelectStar={videoAudio} // 未选中图片
/>

5.点赞

 //点赞
  like(id,isLike) {
    Http.postForm('/api/user/find/timeline/like/count', {
      id: id,
      status:isLike   //1点赞,2取消
    }).then((res) => {
      if (res.status === 10000) {
        if (isLike === 1) {
          this.setState({
            isLike: 2,
        });
        } else {
          this.setState({
            isLike: 1,
        });
        }
        this.getUserInfo() //获取点赞数量
    }
    })
  }

 getUserInfo() {
      Http.postForm('/api/user/userinfo').then(res => {
        console.log('获取用户ID',res)
        if (res.status === 10000) {
          this.Checklike(this.props.item.ID,res.user.ID)
          this.setState({
            Userid:res.user.ID
          })
        }
      })
    }
    //查看动态详情
  Checklike(id,Userid) {
    Http.postForm('/api/user/find/timeline/detail', {
      id,
      user_id:Userid
    }).then((res) => {
      console.log('查看返回信息',res);
      if (res.status === 10000) {
        this.setState({
          like_number:res.data.like_number,
          comment_number:res.data.comment_number,
          is_like:res.data.is_like,//1 已点赞 2 没点赞
          isLike:res.data.is_like===1?2:1
        })
    }
    })
  }

// 渲染标签
<Touchable
            delayPress={300}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginRight: 30,
            }}
            onPress={()=>{this.like(item.ID,isLike)}}
          >
            {is_like === 2? <Image source={unstar}/>: <Image source={star} />}
            <Text style={{fontSize: 11, color: '#C1C1C1', marginLeft: 6,marginTop:3 }}>{like_number}</Text>
          </Touchable>

 6.在数组中跟根据id数组筛选出相同id的对象

大数组.filter(item=>
            id数组.filter(e=>e === item.id).length > 0 )

为什么length要大于0呢？

7.颜色渐变代码

 getColor = (bili) => {
    //var 百分之一 = (单色值范围) / 50;  单颜色的变化范围只在50%之内
    let one = (255+255) / 100;
    let r=0;
    let g=0;
    let b=0;

    if ( bili < 50 ) {
      // 比例小于50的时候红色是越来越多的,直到红色为255时(红+绿)变为黄色.
      r = one * bili;
      g=255;
    }
    if ( bili >= 50 ) {
      // 比例大于50的时候绿色是越来越少的,直到0 变为纯红
      g =  255 - ( (bili - 50 ) * one) ;
      r = 255;
    }
    r = parseInt(r);// 取整
    g = parseInt(g);// 取整
    b = parseInt(b);// 取整

    return "rgb("+r+","+g+","+b+")";

  };

8.生成一周时间

new Array 创建的数组只是添加了length属性，并没有实际的内容。通过扩展后，变为可用数组用于循环

function getWeekTime(){
  return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())
}

使用

getWeekTime()
// ["2020/2/26", "2020/2/27", "2020/2/28", "2020/2/29", "2020/3/1", "2020/3/2", "2020/3/3"]

9.类型判断

判断核心使用 Object.prototype.toString，这种方式可以准确的判断数据类型。

/**
 * @param {any} target 
 * @param {string} type 
 * @return {boolean} 
 */
function isType(target, type) {
  let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  return targetType === type.toLowerCase()
}

使用

isType([], 'Array') // true
isType(/d/, 'RegExp') // true
isType(new Date(), 'Date') // true
isType(function(){}, 'Function') // true
isType(Symbol(1), 'Symbol') // true

10.对象属性剔除

应用场景很简单，当你需要使用一个对象，但想移除部分属性时，可以使用该方法。同样的，你可以实现一个对象属性选取方法。

/**
 * @param {object} object
 * @param {string[]} props
 * @return {object}
 */
function omit(object, props=[]){
  let res = {}
  Object.keys(object).forEach(key=>{
    if(props.includes(key) === false){
      res[key] = typeof object[key] === 'object' && object[key] !== null ?
        JSON.parse(JSON.stringify(object[key])):
        object[key]
    }
  })
  return res
}

使用

let data = {
  id: 1,
  title: 'xxx',
  comment: []
}
omit(data, ['id']) // {title: 'xxx', comment: []} 

11.日期格式化  /或者用moment

一个很灵活的日期格式化函数，可以根据使用者给定的格式进行格式化，能应对大部分场景

/**
 * @param {string} format
 * @param {number} timestamp - 时间戳
 * @return {string} 
 */
function formatDate(format='Y-M-D h:m', timestamp=Date.now()){
  let date = new Date(timestamp)
  let dateInfo = {
    Y: date.getFullYear(),
    M: date.getMonth()+1,
    D: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds()
  }
  let formatNumber = (n) => n > 10 ? n : '0' + n
  let res = format
    .replace('Y', dateInfo.Y)
    .replace('M', dateInfo.M)
    .replace('D', dateInfo.D)
    .replace('h', formatNumber(dateInfo.h))
    .replace('m', formatNumber(dateInfo.m))
    .replace('s', formatNumber(dateInfo.s))
  return res
}

使用

formatDate() // "2020-2-24 13:44"
formatDate('M月D日 h:m') // "2月24日 13:45"
formatDate('h:m Y-M-D', 1582526221604) // "14:37 2020-2-24"

extra：

      var formatDateTime = function (date) {

            var y = date.getFullYear();

            var m = date.getMonth() + 1;

            m = m < 10 ? ('0' + m) : m;

            var d = date.getDate();

            d = d < 10 ? ('0' + d) : d;

            var h = date.getHours();

            h=h < 10 ? ('0' + h) : h;

            var minute = date.getMinutes();

            minute = minute < 10 ? ('0' + minute) : minute;

            var second=date.getSeconds();

            second=second < 10 ? ('0' + second) : second;

            return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;

        };

         formatDateTime(new Date()) //2020-05-16 16:03:13

12.性能分析

Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能

performance.timing 包含延迟相关的性能信息

performance.memory 包含内存信息，是Chrome中添加的一个非标准扩展，在使用时需要注意

window.onload = function(){
  setTimeout(()=>{
    let t = performance.timing,
        m = performance.memory
    console.table({
      'DNS查询耗时': (t.domainLookupEnd - t.domainLookupStart).toFixed(0),
      'TCP链接耗时': (t.connectEnd - t.connectStart).toFixed(0),
      'request请求耗时': (t.responseEnd - t.responseStart).toFixed(0),
      '解析dom树耗时': (t.domComplete - t.domInteractive).toFixed(0),
      '白屏时间': (t.responseStart - t.navigationStart).toFixed(0),
      'domready时间': (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0),
      'onload时间': (t.loadEventEnd - t.navigationStart).toFixed(0),
      'js内存使用占比': m ? (m.usedJSHeapSize / m.totalJSHeapSize * 100).toFixed(2) + '%' : undefined
    })
  })
}

13.防抖

性能优化方案，防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。

基础版本

function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(fn,wait);
  }
}

改进版本添加是否立即执行的参数，因为有些场景下，我们希望函数能立即执行。

/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @param {boolean} immediate - 是否立即执行
 * @return {function}
 */
function debounce(func, wait = 300, immediate = false){
  let timer, ctx;
  let later = (arg) => setTimeout(()=>{
    func.apply(ctx, arg)
    timer = ctx = null
  }, wait)
  return function(...arg){
    if(!timer){
      timer = later(arg)
      ctx = this
      if(immediate){
        func.apply(ctx, arg)
      }
    }else{
      clearTimeout(timer)
      timer = later(arg)
    }
  }
}

使用

let scrollHandler = debounce(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

14.节流

性能优化方案，节流用于减少函数请求次数，与防抖不同，节流是在一段时间执行一次。

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}

使用

let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

15.base64数据导出文件下载

/**
 * @param {string} filename - 下载时的文件名
 * @param {string} data - base64字符串
 */
function downloadFile(filename, data){  
  let downloadLink = document.createElement('a');  
  if ( downloadLink ){  
    document.body.appendChild(downloadLink);  
    downloadLink.style = 'display: none';  
    downloadLink.download = filename;  
    downloadLink.href = data;  
    if ( document.createEvent ){  
      let downloadEvt = document.createEvent('MouseEvents');  
      downloadEvt.initEvent('click', true, false);  
      downloadLink.dispatchEvent(downloadEvt);  
    } else if ( document.createEventObject ) {
      downloadLink.fireEvent('onclick');  
    } else if (typeof downloadLink.onclick == 'function' ) {
      downloadLink.onclick();
    }
    document.body.removeChild(downloadLink);  
  }  
}  

16.检测是否为PC端浏览器

function isPCBroswer() {  
  let e = window.navigator.userAgent.toLowerCase()  
    , t = "ipad" == e.match(/ipad/i)  
    , i = "iphone" == e.match(/iphone/i)  
    , r = "midp" == e.match(/midp/i)  
    , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)  
    , a = "ucweb" == e.match(/ucweb/i)  
    , o = "android" == e.match(/android/i)  
    , s = "windows ce" == e.match(/windows ce/i)  
    , l = "windows mobile" == e.match(/windows mobile/i);
  return !(t || i || r || n || a || o || s || l)  
} 

17.识别浏览器及平台

function getPlatformInfo(){
  //运行环境是浏览器 
  let inBrowser = typeof window !== 'undefined';  
  //运行环境是微信  
  let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;  
  let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();  
  //浏览器 UA 判断  
  let UA = inBrowser && window.navigator.userAgent.toLowerCase();
  if(UA){
    let platforms = {
      IE: /msie|trident/.test(UA),
      IE9: UA.indexOf('msie 9.0') > 0,
      Edge: UA.indexOf('edge/') > 0,
      Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),
      IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),
      Chrome: /chrome/d+/.test(UA) && !(UA.indexOf('edge/') > 0),
    }
    for (const key in platforms) {
      if (platforms.hasOwnProperty(key)) {
        if(platforms[key]) return key
      }
    }
  }
}

18.休眠函数

   //参数n为休眠时间，单位为毫秒:    
    function sleep(n) {
        var start = new Date().getTime();
        console.log('休眠前：' + start);
        while (true) {
            if (new Date().getTime() - start > n) {
                break;
            }
        }
        console.log('休眠后：' + new Date().getTime());
    }
    function abc(){
　　console.log('123')　　　　
   sleep(3000)
   console.log('222')
   }

19.数组去重，返回一个新数组

案例一

function unique(arr){
    if(!isArrayLink(arr)){ //不是类数组对象
        return arr
    }
    let result = []
    let objarr = []
    let obj = Object.create(null)
    
    arr.forEach(item => {
        if(isStatic(item)){//是除了symbol外的原始数据
            let key = item + '_' + getRawType(item);
            if(!obj[key]){
                obj[key] = true
                result.push(item)
            }
        }else{//引用类型及symbol
            if(!objarr.includes(item)){
                objarr.push(item)
                result.push(item)
            }
        }
    })
    
    return resulte
}

 案例二 checkBox 多选框  拼接多个种类

拼接多个数组，分门别类组成一个新的总数组。

    //获取二级策略 访问同一接口多次
    _getList(id) {

       //时机为第一个
　　　　 if (id == this.props.list[0].id) {
            this.setState({
                loading:window.$message.loading('加载中', 0)
            });
        }
        HttpUtils.postForm('/api/admin/dm/strategy/list', {
            dm_strategy_temp_id: id,
            page: 1,
            pers: 50
        }).then(res => {
            if (res.status === 10000) {
                if(res.data.length > 0){
                    this.setState({
                        data:this.state.data.concat([{fatherId:id,son:res.data}]),
                    })
                }
　　　　　　　　　　//时机为最后一个
                if(id == this.props.list[this.props.list.length - 1].id){
                    setTimeout(()=>{
                        this.setState({
                            visible:true,
                        })
                        this.state.loading()
                    },500)
                }
            }else {
                this.state.loading()
　　　　　　　　　　//时机为最后一个
                if(id == this.props.list[this.props.list.length - 1].id){
                    window.$message.warn(res.message);
                }
            }
        }).catch(() => {
            this.state.loading()
            window.$message.error('通讯失败')
        })
    }

//checkBox 多选  选了一类二级分类1 ，再去选择二类二级分类1的时候， 一类二级分类1 直接没了（因为这里使用的onChange函数是同一个checkedList）
一类
  一类二级分类1  
二类
  二类二级分类1 
//解决办法： 使用组件

//父组件

{
    this.props.list && this.props.list.filter(item=>{return item.id !== -1 }).map(items=>(
        <CheckedItem onChange={this._getChecklist} ref={(e)=>{this._checkBox = e}} data={this.state.data} items={items} />

    ))
}

CheckedItem.js

render() {
    const {items,data} = this.props
    return (
                <div>
                    <div className="site-checkbox-all-wrapper">
                        <Checkbox
                            onChange={this.onCheckAllChange}
                            checked={this.state.checkAll}
                        >
                            {items.name}
                        </Checkbox>
                    </div>
                    <br />
                    <CheckboxGroup
                        options={this.state.plainOptions}
                        value={this.state.checkedList}
                        onChange={(e)=>{this.onChange(e,items.id)}}
                        style={{marginBottom:10}}
                    />
                </div>
    );
}

 new Map() 函数去重 / 拼接checkedItem组件的值 

//数组去重
   unique = (arr)=>{
        const res = new Map();
        return arr.filter((val)=>!res.has(val) && res.set(val,1))
    }

   _getChecklist = (checkedList,isRemove,val)=>{
        const newArr = this.unique(this.state.checkedList.concat(checkedList))
        if (isRemove){
            for(let i = 0 ; i < newArr.length ; i ++){
                if (newArr[i] == val) {
                    newArr.splice(i,1)
                }
            }
        }

        this.setState({
            checkedList:newArr
        })
    };

按类别筛选

    componentDidMount() {
        const {items,data} = this.props
        this.setState({
            plainOptions:data.length>0 &&  data.filter(item=>{
                return item.fatherId === items.id
            }).length > 0 &&  data.filter(item=>{
                return item.fatherId === items.id //自己做的数组中的值 fatherId === 8个对象中的id值
            })[0].son.map(item=>{
                return{
                    label: item.name,
                    value: item.id
                }
            })
        })
    }

 删除数组中指定元素 这个例子中不能直接使用，但可以借鉴

//删除数组中指定元素
    const a  = [30,60,90,120,150]
    Array.prototype.indexOf = function (val) {
        for (let i = 0 ; i < a.length ; i ++ ){
            console.log('index',i,'val',val)
            if(this[i] == val) return i ;
        }
        return -1;
    };

    Array.prototype.remove = function (val) {
        const index = a.indexOf(val)
        if(index > -1){
            this.splice(index,1)
            console.log('哈哈',this)
        }
    };

    a.remove([90])
    console.log('让我康康',a) // 30 ,60 120 ,150

借鉴修改的函数

 includes 函数 检查数组是否含有某元素 是则返回true

//CheckItem中的选择框onChange函数，数组相减获取需要删除的元素

    onChange = (checkedList,id) => {

        console.log('当前',checkedList,'上次',this.state.checkedList)

        if(checkedList.length < this.state.checkedList.length){ //这里说明有的勾选被取消了
            this.props.onChange(checkedList,true,this.state.checkedList.filter(el => !checkedList.includes(el)))
            console.log('两个数组相减',this.state.checkedList.filter(el => !checkedList.includes(el)))
        }else {
            this.props.onChange(checkedList)
        }

        this.setState({
            checkedList,
            indeterminate: !!checkedList.length && checkedList.length < this.state.plainOptions.length,
            father:id,
            checkAll: checkedList.length === this.state.plainOptions.length,
        });
    };

//父组件调用删除函数

   _getChecklist = (checkedList,isRemove,val)=>{
        const newArr = this.unique(this.state.checkedList.concat(checkedList))
        if (isRemove){
            for(let i = 0 ; i < newArr.length ; i ++){
                if (newArr[i] == val) {
                    newArr.splice(i,1)
                }
            }
        }

        this.setState({
            checkedList:newArr
        })
    };

 

20.获取Url参数，返回一个对象

function GetUrlParam(){
    let url = document.location.toString();
    let arrObj = url.split("?");
    let params = Object.create(null)
    if (arrObj.length > 1){
        arrObj = arrObj[1].split("&");
        arrObj.forEach(item=>{
            item = item.split("=");
            params[item[0]] = item[1]
        })
    }
    return params;
}
// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}

21.禁止键盘事件

document.addEventListener('keydown', function(event){
    return !(
        112 == event.keyCode || //F1
        123 == event.keyCode || //F12
        event.ctrlKey && 82 == event.keyCode || //ctrl + R
        event.ctrlKey && 78 == event.keyCode || //ctrl + N
        event.shiftKey && 121 == event.keyCode || //shift + F10
        event.altKey && 115 == event.keyCode || //alt + F4
        "A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签
    ) || (event.returnValue = false)
});

22.禁止 右键/选择/复制

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(event){
        return event.returnValue = false
    })
});

23.交集/并集/去重

    1.求交集
　　　　var arr1 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3}];
      var arr1Id = [1,2,3]
      var arr2 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3},{name:'name4',id:4},{name:'name5',id:5}];
      var result = arr2.filter(function(v){
            return arr1Id.indexOf(v.id)!==-1 // 利用filter方法来遍历是否有相同的元素
        })
      console.log(result);

      2.求并集
　　　　let arr1 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3}];
      let arr2 = [{name:'name1',id:1},{name:'name4',id:4},{name:'name5',id:5}];
      let arr3 = arr1.concat(arr2);
      let result = [];
      var obj = [];
      result = arr3.reduce(function(prev, cur, index, arr) {
        console.log(prev, cur);
        obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
        return prev;
      }, []);
      console.log(result);

3.求差集<br>　　　　let arr1 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3}];
  let arr1Id = [1,2,3];
  let arr2 = [{name:'name1',id:1},{name:'name4',id:4},{name:'name5',id:5}];
  let arr2Id = [1,4,5];
  let arr3 = arr1.concat(arr2);
  let result = arr3.filter(function(v){
      return arr1Id.indexOf(v.id)===-1 || (arr2Id.indexOf(v.id)===-1)
  })
  console.log(result);

      4.去重
　　　　let arr = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3},{name:'name1',id:1},{name:'name4',id:4},{name:'name5',id:5}];
      var obj = [];
      let result = arr.reduce(function(prev, cur, index, arr) {
        console.log(prev, cur);
        obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
        return prev;
      }, []);

去重运用：
　a方法
　　　　　　　let includeThis = false
            let vm = this
            if(vm.informedPersonList.length>0){
                vm.informedPersonList.forEach(el =>{
                    if(el.id == vm.selectedTrueItem.id){
                        includeThis = true
                    }
                })
            }
            if(includeThis===false){
                vm.informedPersonList.push(vm.selectedTrueItem)
            }else{
                Message({message: '请勿重复添加',type: 'warning'})
            }
　b方法(必须先let informedPersonL = vm.informedPersonList，不能直接使用vm.informedPersonList，否则浏览器控制台会报错)

vm.informedPersonList.push(this.selectedTrueItem)
let obj = {};
let informedPersonL = vm.informedPersonList
informedPersonL = informedPersonL.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
vm.selectedTrueItem = {}
vm.$emit("backInformedPList",informedPersonL);

24.删除数组对象中相同的对象

       deteleObject = (obj) =>{
                var uniques = [];
                var stringify = {};
                for (var i = 0; i < obj.length; i++) {
                    var keys = Object.keys(obj[i]);
                    keys.sort(function(a, b) {
                        return (Number(a) - Number(b));
                    });
                    var str = '';
                    for (var j = 0; j < keys.length; j++) {
                        str += JSON.stringify(keys[j]);
                        str += JSON.stringify(obj[i][keys[j]]);
                    }
                    if (!stringify.hasOwnProperty(str)) {
                        uniques.push(obj[i]);
                        stringify[str] = true;
                    }
                }
                uniques = uniques;
                return uniques;
            }
            const obj = [
                {name:'1',url:'a'},
                {name:'1',url:'a'},
                {name:'2',url:'b'},
            ]
            console.log('让我康康',this.deteleObject(obj))

25.JS 阿拉伯数字与中文数字互转

var chnUnitSection = ["","万","亿","万亿","亿亿"]; //阿拉伯数字转中文数字用
var chnUnitChar = ["","十","百","千"]; //阿拉伯数字转中文数字用
var chnNumChar = ["零","一","二","三","四","五","六","七","八","九"]; //两个都要用到
var chnNameValue = { //中文数字转阿拉伯数字作用

　　　　ChineseToNumber(chnStr){
        var rtn = 0;
        var section = 0;
        var number = 0;
        var secUnit = false;
        var str = chnStr.split('');

        for(var i = 0; i < str.length; i++){
            var num = chnNumChar[str[i]];
            if(typeof num !== 'undefined'){
                number = num;
                if(i === str.length - 1){
                    section += number;
                }
            }else{
                var unit = chnNameValue[str[i]].value;
                secUnit = chnNameValue[str[i]].secUnit;
                if(secUnit){
                    section = (section + number) * unit;
                    rtn += section;
                    section = 0;
                }else{
                    section += (number * unit);
                }
                number = 0;
            }
        }
        return rtn + section;
    }

    SectionToChinese(section){
        var strIns = '', chnStr = '';
        var unitPos = 0;
        var zero = true;
        while(section > 0){
            var v = section % 10;
            if(v === 0){
                if(!zero){
                    zero = true;
                    chnStr = chnNumChar[v] + chnStr;
                }
            }else{
                zero = false;
                strIns = chnNumChar[v];
                strIns += chnUnitChar[unitPos];
                chnStr = strIns + chnStr;
            }
            unitPos++;
            section = Math.floor(section / 10);
        }
        return chnStr;
    }

    NumberToChinese = (num)=>{
        var unitPos = 0;
        var strIns = '', chnStr = '';
        var needZero = false;

        if(num === 0){
            return chnNumChar[0];
        }

        while(num > 0){
            var section = num % 10000;
            if(needZero){
                chnStr = chnNumChar[0] + chnStr;
            }
            strIns = this.SectionToChinese(section);
            strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
            chnStr = strIns + chnStr;
            needZero = (section < 1000) && (section > 0);
            num = Math.floor(num / 10000);
            unitPos++;
        }

        return chnStr;
    }

阿拉伯数字转汉字二

    const numberChinese = (number) => {
        let units = '个十百千万@#%亿^&~', chars = '零一二三四五六七八九';
        let a = (number + '').split(''), s = []
        if (a.length > 12) {
            throw new Error('too big');
        } else {
            for (let i = 0, j = a.length - 1; i <= j; i++) {
                if (j == 1 || j == 5 || j == 9) {//两位数 处理特殊的 1*
                    if (i == 0) {
                        if (a[i] != '1') s.push(chars.charAt(a[i]));
                    } else {
                        s.push(chars.charAt(a[i]));
                    }
                } else {
                    s.push(chars.charAt(a[i]));
                }
                if (i != j) {
                    s.push(units.charAt(j - i));
                }
            }
        }
        //return s;
        return s.join('').replace(/零([十百千万亿@#%^&~])/g, function (m, d, b) {//优先处理 零百 零千 等
            b = units.indexOf(d);
            if (b != -1) {
                if (d == '亿') return d;
                if (d == '万') return d;
                if (a[j - b] == '0') return '零'
            }
            return '';
        }).replace(/零+/g, '零').replace(/零([万亿])/g, function (m, b) {// 零百 零千处理后 可能出现 零零相连的 再处理结尾为零的
            return b;
        }).replace(/亿[万千百]/g, '亿').replace(/[零]$/, '').replace(/[@#%^&~]/g, function (m) {
            return { '@': '十', '#': '百', '%': '千', '^': '十', '&': '百', '~': '千' }[m];
        }).replace(/([亿万])([一-九])/g, function (m, d, b, c) {
            c = units.indexOf(d);
            if (c != -1) {
                if (a[j - c] == '0') return d + '零' + b
            }
            return m;
        });
    }

 

 

 

26.科学计数法转化为数字

function toFixed(x) {
  if (Math.abs(x) < 1.0) {
    var e = parseInt(x.toString().split('e-')[1]);
    if (e) {
        x *= Math.pow(10,e-1);
        x = '0.' + (new Array(e)).join('0') + x.toString().substring(2);
    }
  } else {
    var e = parseInt(x.toString().split('+')[1]);
    if (e > 20) {
        e -= 20;
        x /= Math.pow(10,e);
        x += (new Array(e+1)).join('0');
    }
  }
  return x;
}

 27.时间戳转化为日期

    var dateFormat = function (timestamp, formats) {
        // formats格式包括
        // 1. Y-m-d
        // 2. Y-m-d H:i:s
        // 3. Y年m月d日
        // 4. Y年m月d日 H时i分
        formats = formats || 'Y-m-d';

        var zero = function (value) {
            if (value < 10) {
                return '0' + value;
            }
            return value;
        };

        var myDate = timestamp? new Date(timestamp): new Date();

        var year = myDate.getFullYear();
        var month = zero(myDate.getMonth() + 1);
        var day = zero(myDate.getDate());

        var hour = zero(myDate.getHours());
        var minite = zero(myDate.getMinutes());
        var second = zero(myDate.getSeconds());

        return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
            return ({
                Y: year,
                m: month,
                d: day,
                H: hour,
                i: minite,
                s: second
            })[matches];
        });
    };

    console.log('date',dateFormat(1589365354007,'Y年m月d日 H时i分')) // 2020年05月13日 18时22分

 28.自动分隔手机号     

       

    $("#mobilePhone").keyup(function(){
        let text_len = this.value.length;
        if ((text_len === 3 || text_len === 8) && window.event.keyCode !== 8 ) {
            this.value += " ";
        }

    });
//表单验证替换空格
const tel = $('#mobilePhone').val().replace(/s*/g,"");

29.textarea高度自适应

$.fn.autoHeight = function(){
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });
    };
    $('textarea[autoHeight]').autoHeight();

直接在textarea标签上添加 autoHeight='true' 即可

 

 30.jQuery点击空白处关闭弹窗 

    $(document).mouseup(function(e){
        var _con=$('目标区域');//设置目标区域
        if(!_con.is(e.target)&&_con.has(e.target).length===0){//Mark1
            $('.confirm-info').addClass('hidden')
            $('.confirm-box').addClass('hidden')
        }
    });

 

经过测试，在移动端Iphone手机上点击页面空白处弹出层关闭失效，不支持document写法，解决方案：可以添加一个背景层作为页面空白对象处理。  （用main替代document）

       $('.main').mouseup(function(e){
            if(!con.is(e.target)&& con.has(e.target).length === 0){
                con.addClass('hidden')
             $('.main').addClass('hidden')

            }
        })

然后又发现了一个问题 ios系统点击会有灰色背景出现，解决方法：

html,body{
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解

（一）-webkit-tap-highlight-color

        这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例：设置高亮色为50%透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

（二）css3中-webkit-text-size-adjust详解：      

1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

(三)outline：none(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus="true"(2)input，textarea{outline:none}  取消chrome下默认的文本框聚焦样式(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

（四）webkit-appearance   -webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。   注意：不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

（五）.-webkit-user-select   -webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

（六）-webkit-touch-callout   -webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

 

 

 

31 生成指定位数随机数

 function getRandom(num){
         let random = Math.floor((Math.random()+Math.floor(Math.random()*9+1))*Math.pow(10,num-1));
         return random
    }