js代码优化

最新推荐文章于 2024-04-22 11:36:02 发布

小方同志多个誌

最新推荐文章于 2024-04-22 11:36:02 发布

阅读量158

点赞数

文章标签： js javascript es6

本文链接：https://blog.csdn.net/weixin_45837653/article/details/119214757

版权

if 多条件判断

let x = 'dec'
if (['avas','abc','ghi'].includes(x)) {}

2.if 判断

// 冗余
let test: boolean;
if (x > 100) {test = true;} else {test = false;}
// 简洁
let test = x > 10;

3.Null,undenfined，空值检查

// 冗余
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}
// 简洁
let second = first || '';

4.forEach循环

// 冗余
for (var i = 0; i < testData.length; i++)
    
// 简洁
for (let i in testData)
// 或
for (let i of testData)

5.函数条件调用

// 冗余 
function test1() { console.log('test1'); }; 
function test2() { console.log('test2'); }; 
var test3 = 1; 
if (test3 == 1) { test1(); } else { test2(); } 
// 简单 
(test3 === 1? test1:test2)();

switch条件

let anything = 0
// 冗余
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
}

// 简洁
var data = {
  1: test1,
  2: test2,
  3: test
};
data[anything] && data[anything]();

8.隐式返回

// 冗余
function getArea(diameter) {
  return Math.PI * diameter
}

// 简洁
getArea = diameter => (
  Math.PI * diameter;
)

9.重复字符串多次

// 冗余
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 

// 简洁
'test '.repeat(5);

10.数组对象去重

let array = [ 
    {id:1,name:"掘金"}, 
    {id:2,name:"JKL"}, 
    {id:3,name:"JKD"}, 
    {id:5,name:"JKX"}, 
    {id:1,name:"掘金是掘金"} 
] 
//数组对象去重 
function duplicate(arrayobj, key) { 
//采用一个第三方的对象来判断 
let obj = {} 
return arrayobj.reduce((accumulator, currentValue, currentIndex) => {
 //当前key键的value值存在于obj函数中时,说明重复 
 if (!obj[currentValue[key]]) { 
     obj[currentValue[key]] = true 
     accumulator.push(currentValue) 
     } 
     return accumulator 
 }, []) } 
 console.log(duplicate(array, 'id'))

11.数组扁平化

// 第一种
[1, [2, [3]]].flat(2)  // [1, 2, 3]
// 优点：会跳过空位，返回新数组，不会修改原数组

// 第二种
const arr = [1, 2, 3, [4, 5, [6, 7]]];
const flatten = arr.toString().split(',');
console.log(flatten); // ["1", "2", "3", "4", "5", "6", "7"]
// 优点：简单，方便，对原数据没有影响 
// 缺点：最好数组元素全是数字或字符，不会跳过空位

// 第三种
const arr = [1, 2, 3, [4, 5]];
console.log([].concat(...arr));
// 优点：简单，方便 缺点：只能扁平化一层

12.递归

// ES5 实现：递归。
function flatten(arr) { 
    var result = []; 
    for (var i = 0, len = arr.length; i < len; i++) { 
        if (Array.isArray(arr[i])) { 
            result = result.concat(flatten(arr[i])) 
        } else { 
            result.push(arr[i])
        } 
    } 
    return result;
}
// ES6 实现
function flatten(arr) { 
    while (arr.some(item => Array.isArray(item))) { 
        arr = [].concat(...arr); 
    } 
    return arr; 
}

13.解析 URL 参数为对象

function parseParam(url) {
        const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
        const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
        let paramsObj = {};
        // 将 params 存到对象中
        paramsArr.forEach(param => {
            if (/=/.test(param)) { // 处理有 value 的参数
                let [key, val] = param.split('='); // 分割 key 和 value
                val = decodeURIComponent(val); // 解码
                val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

                if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
                    paramsObj[key] = [].concat(paramsObj[key], val);
                } else { // 如果对象没有这个 key，创建 key 并设置值
                    paramsObj[key] = val;
                }
            } else { // 处理没有 value 的参数
                paramsObj[param] = true;
            }
        })

        return paramsObj;
    }

14.el-button加上防抖

// 全局定义自定义指令
import Vue from 'vue'
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-disabled')
      }, 2000)//我这里设置的是2000毫秒也就是2秒
    })
  }
})

<el-button v-no-more-click type="primary" @click="submitForm('ruleForm')">确 定</el-button>

15.出现次数最多的字符

 function maxNum1(str){
            if(typeof(str) !== 'string') str = str.toString();
            let obj = {},
                maxChar = []; // 使用数组保存出现最多次的某些字符
            str.split('').forEach( (val) => {
                if(!obj[val]){
                    let demo = obj[val] = 1;
                }else{
                    obj[val]++;
                }
            })
            let maxCount =  Math.max.apply(null, Object.values(obj))
            // forEach方法总是返回 undefined 且 没有办法中止或者跳出 forEach 循环。
            Object.entries(obj).forEach( item => {
                if(item[1] == maxCount){
                    maxChar.push(item[0])
                }
            })
            return maxChar;
        }

JS 获取数组对象中某个属性的最大值或最小值

const list = [{ id: 1, name: 'jack' },
        { id: 2, name: 'may' },
        { id: 3, name: 'shawn' },
        { id: 4, name: 'tony' }]
//1、Math方法

// 最大值 4
Math.max.apply(Math,this.list.map(item => { return item.id }))
// 最小值 1
Math.min.apply(Math,this.list.map(item => { return item.id }))
// sort排序

// 最大值 4
this.list.sort((a, b) => { return b-a })[0].id  
// 最小值 1
this.list.sort((a, b) => { return a-b })[0].id

根据url地址下载

export const download = (url) => {
    var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
    if (isChrome || isSafari) {
        var link = document.createElement('a');
        link.href = url;
        if (link.download !== undefined) {
            var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
            link.download = fileName;
        }
        if (document.createEvent) {
            var e = document.createEvent('MouseEvents');
            e.initEvent('click', true, true);
            link.dispatchEvent(e);
            return true;
        }
    }
    if (url.indexOf('?') === -1) {
        url += '?download';
    }
    window.open(url, '_self');
    return true;
}

劫持粘贴板

export const copyTextToClipboard = (value) => {
    var textArea = document.createElement("textarea");
    textArea.style.background = 'transparent';
    textArea.value = value;
    document.body.appendChild(textArea);
    textArea.select();
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
        console.log('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
}

严格的身份证校验

export const isCardID = (sId) => {
    if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
        console.log('你输入的身份证长度或格式错误')
        return false
    }

    //身份证城市

 var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
    if (!aCity[parseInt(sId.substr(0, 2))]) {
        console.log('你的身份证地区非法')
        return false
    }


    // 出生日期验证
    var sBirthday = (sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"),
        d = new Date(sBirthday)
    if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
        console.log('身份证上的出生日期非法')
        return false
    }

    // 身份证号码校验
    var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432"
    for (var i = 0; i < sId.length - 1; i++) {
        sum += sId[i] * weights[i];
    }
    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
    if (sId[sId.length - 1] != last) {
        console.log('你输入的身份证号非法')
        return false
    }

    return true
}

根据年月日判断某天属于当月第几周

//该月的1号 星期几
getMonthFirstDayWeek(year, month) {
      const d = new Date();
      d.setFullYear(year);
      d.setMonth(month);
      d.setDate(1);
      return d.getDay();
    },
    // 获取一个月的天数
  getMonthDayTotal(year, month) {
      const nextMonth = month + 1;
      const d = new Date(year, nextMonth, 0);
      return d.getDate();
    },


  
    weekNum(employTime) {
      let weekTxt = '';
      const month = parseInt(employTime.slice(5, 7), 10);
      const jsMonth = parseInt(employTime.slice(5, 7), 10) -1;
      const year = parseInt(employTime.slice(0, 4), 10);
      const day = parseInt(employTime.slice(8, 10), 10);
      const startDay = getMonthFirstDayWeek(year, jsMonth); // 该月的1号 星期几
      let monthMondy = '';
      let val = 1;
      if (startDay === 0) { // 1号是星期天
        if (day === 1 && jsMonth === 0) {
          const total2 = getMonthDayTotal(year - 1, jsMonth - 1);
          val =  Math.ceil((total2 - 1) / 7);
        } else if (day === 1 && jsMonth > 0) {
          const startDay3 = getMonthFirstDayWeek(year, jsMonth - 1);
          const total2 = getMonthDayTotal(year, jsMonth - 1);
          val =  Math.ceil((total2 - 1) / 7);
        }
      } else if (startDay === 1) { // 1号是星期一，正好从该天算起
        val = Math.ceil(day / 7);
      } else { //
        monthMondy = 7 - startDay + 2;
        if (day < monthMondy) {
          if (jsMonth === 0) {
            const total2 = getMonthDayTotal(year - 1, jsMonth - 1);
            const startDay2 = getMonthFirstDayWeek(year - 1, jsMonth - 1);
            val =  Math.ceil((total2 - startDay) / 7);
          } else {
          // 获取上一个月的第一周开始的日期
            const total2 = getMonthDayTotal(year, jsMonth - 1);
            const startDay2 = getMonthFirstDayWeek(year, jsMonth - 1);
            val =  Math.ceil((total2 - startDay) / 7);
          }
        } else {
          val = Math.ceil((day - (7 - startDay)) / 7);
        }
      }
      weekTxt = `第${val}周`;
      return weekTxt;
}

固定排序

Vue.prototype.$ArrSort = function ArrSort (arr,type,order){
    if (!order) {
        order = ["越秀", "海珠", "荔湾", "天河", "白云", "黄埔", "花都", "番禺", "南沙", "从化", "增城"];
    }
    arr.sort(function(a,b){
        return order.indexOf(a[type].replace(/区/g, "")) - order.indexOf(b[type].replace(/区/g, ""));
    });
    return arr
}

比较两个数组差异

var array1 = [ {"Num": "A "  },{"Num": "B" }];
var array2 = [ {"Num": "A ","Name": "t1 " }, {"Num": "B","Name": "t2"}, {"Num": "C " ,"Name": "t3 "}];
const result = []
      array1 .forEach(item => {
        const Num= item.Num;
        let isExist = false;
        for(var j = 0; j < array2 .length; j++){
        var aj = array2 [j];
        var n = aj.Num;
            if(n == id){
                isExist = true;
                break;
            }
        }
        if(!isExist){
            result.push(item);
        }
      })

千分位过滤器

// 千分位过滤器
export function numsed(num) {
  if (!num) {
    return 0;
  }
  let re = /\d{1,3}(?=(\d{3})+$)/g;
  let n1 = num.toString().replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$&,") + s2; });
  return n1;
}

递归获取数据，确保每个请求数据返回出去的都是数组

//  递归获取数据，确保每个请求数据返回出去的都是数组
function isObjectArray(obj) {
  let list = [];
  if (Object.prototype.toString.call(obj) == "[object Array]") {
    return obj;
  } else if (Object.prototype.toString.call(obj) == "[object Object]") {
    for (let item in obj) {
      list = isObjectArray(obj[item]);
    }
  }
  return list;
}

小方同志多个誌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js代码优化

if 多条件判断let x = 'dec'if (['avas','abc','ghi'].includes(x)) {}2.if 判断// 冗余let test: boolean;if (x > 100) {test = true;} else {test = false;}// 简洁let test = x > 10;3.Null,undenfined，空值检查// 冗余if (first !== null || first !== undefined || f.
复制链接

扫一扫