简单记录的常用js代码片段

时间排序

  var data = [
    {
        name:'1',
        time:'2019-04-26 10:53:19'
    },
    {
        name:'2',
        time:'2019-04-26 10:51:19'
    }
  ]
   data.sort(function(a,b){
      return a.time < b.time ? 1 : -1
  })

监听localStorage和sessionStorage的变化


//  * @description
//  * @author (Set the text for this tag by adding docthis.authorName to your settings file.)
//  * @date 2019-05-29
//  * vue 项目中监听 localStorage 或 sessionStorage 的变化   
//  * 在 main.js 中给 Vue.protorype 注册一个全局方法
//  * Vue.prototype.resetSetItem = StorageEvent
//  * @param { number } type 1 localStorage 2 sessionStorage
//  * @param { string } key 键
//  * @param { string } data 要存储的数据
//  * @returns 
export default function StorageEvent(type, key, data) {
    if (type === 1) {
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function (k, val) {
                localStorage.setItem(k, val);
                // 初始化创建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派发对象
                window.dispatchEvent(newStorageEvent);
            }
        }
        return storage.setItem(key, data);
    } else {
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function (k, val) {
                sessionStorage.setItem(k, val);
                // 初始化创建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派发对象
                window.dispatchEvent(newStorageEvent);
            }
        }
        return storage.setItem(key, data);
    }
}

// 2.在A组件中调用——写入缓存

// this.$addStorageEvent(2, "userinfo", data);
// 或者

// this.resetSetItem('userinfo', jsonObj);


// 3.在B组件中监听

// window.addEventListener('setItem', (e) => {
//      console.log(e);
// });
// 或者

// window.addEventListener('setItem', ()=> {
//         this.newVal = sessionStorage.getItem('watchStorage');
//         var data=JSON.parse(this.newVal)
//          console.log(data)
// })

axios请求封装


/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios'; import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'


const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  // baseURL: 'http://192.168.1.126', //   开发
  // baseURL: 'http://test-around-home-api.ajuli.cn', //  测试
  // baseURL: 'https://around-home-api.ajuli.cn', // 生产
  // 请求超时时间
  timeout = 10000;
})
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    })

// 响应拦截器
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况 
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录    
                // 未登录则跳转登录页面，并携带当前页面的路径    
                // 在登录成功后返回当前页面，这一步需要在登录页操作。    
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                    break;
                // 403 token过期    
                // 登录过期对用户进行提示    
                // 清除本地token和清空vuex中token对象    
                // 跳转登录页面    
                case 403:
                    Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token     
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                // 404请求不存在    
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示    
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
);
export default service



import service from './service'
//get请求
export const get = (url,data) => service.get(url,data) 
//post请求
export const post = (url,data) => service.post(url,data) 
//put请求
export const put = (url,data) => service.put(url,data) 
//delete请求
export const delete = (url,data) => service.delete(url,data)

获取当前浏览器名称


var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
export default function getBrowser(){
    // console.log(userAgent)
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {//判断是否Opera浏览器
        return "Opera"
    }; 
    if (userAgent.indexOf("Firefox") > -1) {//判断是否Firefox浏览器
        return "FF";
    } 
    if (userAgent.indexOf("Chrome") > -1){//判断是否Chrome浏览器
        return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) {//判断是否Safari浏览器
        return "Safari";
    } 
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {//判断是否IE浏览器
        return "IE";
    }; 
}

中文数字转换成阿拉伯数字

   var map = {
            "零":0,
        
            "一":1,
            "壹":1,
        
            "二":2,
            "贰":2,
            "两":2,
        
            "三":3,
            "叁":3,
        
            "四":4,
            "肆":4,
        
            "五":5,
            "伍":5,
        
            "六":6,
            "陆":6,
        
            "七":7,
            "柒":7,
        
            "八":8,
            "捌":8,
        
            "九":9,
            "玖":9,
        
            "十":10,
            "拾":10,
        
            "百":100,
            "佰":100,
        
            "千":1000,
            "仟":1000,
        
            "万":10000,
            "十万":100000,
            "百万":1000000,
            "千万":10000000,
            "亿":100000000
        };
    // 解析失败返回-1，成功返回转换后的数字，不支持负数
    function chinese_number_to_digit(chinese_number){
        var len = chinese_number.length;
        if(len == 0) return -1;
        if(len == 1) return (map[chinese_number]<=10) ? map[chinese_number] : -1;
        // 返回的总和
        var summary = 0;
    
        // 十开头省略一的情况 例 `十二` 和 `一十二`
        if(map[chinese_number[0]] == 10) {
            chinese_number = "一"+chinese_number;
            len++;
        }
    
        // 单位结尾，省略末尾单位的情况  例 一万二  三千一 二百五
        if(len >= 3 && map[chinese_number[len-1]] < 10){
            var last_second_num = map[chinese_number[len-2]];
            if(last_second_num == 100 || last_second_num == 1000 || last_second_num == 10000 || last_second_num == 100000000){
                for(var key in map){
                if(map[key] == last_second_num/10){
                    chinese_number += key;
                    len += key.length;
                    break;
                }
                }
            }
        }
        // 不支持 一亿亿xxx  十亿亿xx ...
        if(chinese_number.match(/亿/g) && chinese_number.match(/亿/g).length>1) return -1;
    
        // 处理一亿以上的情况 例 三百二十三亿三千二百万两千零二十二
        var splited = chinese_number.split("亿");
        if(splited.length == 2){
            var rest = splited[1]=="" ? 0 : chinese_number_to_digit(splited[1]);
            return summary + chinese_number_to_digit(splited[0])*100000000 + rest;
        }
    
        // 下面处理小于一亿的情况 例 三千二百万两千零二十二
        splited = chinese_number.split("万");
        if(splited.length == 2){
            var rest = splited[1]=="" ? 0 : chinese_number_to_digit(splited[1]);
            return summary + chinese_number_to_digit(splited[0])*10000 + rest;
        }
    
        // 下面处理小于一万的情况 例 两千零二十二
        var i = 0;
        while (i<len){
            var first_char_num = map[chinese_number[i]];
            var second_char_num = map[chinese_number[i+1]];
        if(second_char_num > 9)
            summary+= first_char_num*second_char_num;
            i++;
        if(i==len)
            summary+=first_char_num<=9?first_char_num:0;
        }
        return summary;
    }
  console.log(chinese_number_to_digit('八亿两千三百五十'))

排序交换位置

         // 排序      arr需要排序的数组  startIndex 和 endIndex交换位置
        swapArray(arr, startIndex, endIndex) {
            // console.log(arr, startIndex, endIndex)
            // console.log(arr.splice(endIndex, 1, arr[startIndex])[0])
            arr[startIndex] = arr.splice(endIndex, 1, arr[startIndex])[0];
            // console.log(arr)
            return arr;
        },


  let newArr = swapArray(arr,startIndex,endIndex)

复制

<div id="cardList">
　　<div class="btn">点击我，复制我</div>
</div>
        
<script type="text/javascript">
            
　　function copy(str){
　　　　var save = function (e){
　　　　　　e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象
　　　　　　e.preventDefault();//阻止默认行为
　　　　}
　　　　document.addEventListener('copy',save);
　　　　document.execCommand("copy");//使文档处于可编辑状态，否则无效
　　}
                    
　　document.getElementById('cardList').addEventListener('click',function(ev){
　　　　copy(ev.target.innerText)
　　})
                
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 36个常用js代码片段
    数组 Array 数组去重 查找数组最大 查找数组最小 返回已 size 为长度的数组分割的原数组 检查数组中某元...
    SecondRocker阅读 2,635评论 0赞 0
  • 常用JS代码片段
    https://www.kancloud.cn/zhanglei928/js-ex/676837
    Dorazzz阅读 2,372评论 0赞 0
  • 前端基础面试题(JS部分)
    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型：Undefined、Nul...
    极乐君阅读 10,938评论 0赞 106
  • 前端基础面试题(JS部分)
    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型：Undefined、Nul...
    伯纳乌的追风少年阅读 25,965评论 2赞 46
  • js基础
    js三座大山：原型和原型链 作用域和闭包 异步和单线程引用类型：对象 数组 函数 因为指针引用的是一个空间 所以叫...
    悠哈121阅读 3,666评论 0赞 11