JS 驼峰命名的转换

// 下划线转换驼峰

function toHump(name) {
return name.replace(/\_(\w)/g, function(all, letter){
return letter.toUpperCase();
});
}

// 驼峰转换下划线

function toLine(name) {
return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}

JS 数组操作

获得数组中的最大/小值

// 获得最小值
let getArrMin =(arr)=> {
return Math.min(...arr)
}
使用：
getArrMin([1,222,3]) // return 1
// 获得最大值
let getArrMax =(arr)=> {
return Math.max(...arr)
}
使用：
getArrMax([1,222,3]) // return 222

sort 排序

// 从小到大
let sortArr = (arr) => {
    return arr.sort((a, b) => {
      return a - b
    })
 }
 // 从大到小
 let sortArr = (arr) => {
    return arr.sort((a, b) => {
      return b-a
    })
 }
 // 冒泡排序
 let sortArr = (arr) => {
    let temp = null;
    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;
        }
      }
    }
    return arr;
  }

判断某个值是否在一个数组中

arr.indexof(value) === -1?不在:在返回值所在的下标

取得制定字符前后的值

例如：list_user 获得下划线前后的值
list_user.split('_')[0] -----> list
list_user.split('_')[1] -----> user

数组对象中数据操作

存在替换，不存在新增

const arr1 = [{'id':12,'name':'zhang'},{'id':13,'name':'xin'}]
const obj1 = {'id':12,'name':'qiao'}

解决方法一、

// 设置一个判断标志
objExists(){
  const flag = false
  const index
  for(var i=0;i<arr1.length;i++){
    if(obj1.id == arr1[i].id){
      flag = true
      index = i
    }
  }
  //如果有就替换  没有就插入
  if( flag ) {
    arr1.splice(index,1,obj1)
  } else {
    arr1.push(obj1)
  }
}

方法二、

objExists(){
  const flag = false
  const index
  for(var i=0;i<arr1.length;i++){
    if(obj1.id == arr1[i].id){
      arr1[i] = {}
      arr1[i] = obj1
      return arr1
    }
    arr1.push(obj1)
  }
  //如果有就替换  没有就插入
  if( flag ) {
    arr1.splice(index,1,obj1)
  } else {
    arr1.push(obj1)
  }
}

对象数据合并

const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k) ? [].concat(acc[k]).concat(obj[k]) : obj[k];
        return acc;
      }, {}),
    {}
  );
// EXAMPLES
const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: 'foo'
};
merge(object, other); // { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

二维数组转为一维数组

const arr = [].concat.apply([], arr1.filter(item => item))

数组取交集

// 方案一：只支持2个数据
const arr = arr1.filter(item => arr2.indexOf(item) > -1)
// 方案二：只支持2个数据
[...a].filter(x => [...b].some(y => y.categoryId === x.categoryId))
//或者：只支持2个数据
Array.from(a).filter(x => Array.from(b).some(y => y.categoryId === x.categoryId))
// 方案三: 可支持多个数组
const listChunk = (list, size = 1, cacheList = [])=>{
  const tmp = [...list];
  if (size <= 0) {
    return cacheList;
  }
  while (tmp.length) {
    cacheList.push(tmp.splice(0, size));
  }
  return cacheList;
}

数组取差集

[...a].filter(x => [...b].every(y => y.categoryId !== x.categoryId))

数组去重

数组去重

// 方案 定义一个临时数组,遍历原来的数组
uniq (data) {
   var temp = [] // 一个新的临时数组
   for (var i = 0; i < data.length; i++) {
     if (temp.indexOf(data[i]) === -1) {
       temp.push(data[i])
     }
    }
   return temp
}
// 方案 二
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

数组对象去重

arrObjRemoveRepeat(data) {
    let result = []
    for (let i = 0; i < data.length; i++) {
        let flag = true
        let temp = data[i]
        for (let j = 0; j < result.length; j++) {
            // 普通数组 (temp === result[j])
            if (temp !== undefined) {
                if (temp.n === result[j].n) {
                    flag = false
                    break
                }
            }
        }
        if (flag) {
            result.push(temp)
        }
    }
    return result
}

JS 数组分组排序

数组过滤

去掉空数组空字符串、undefined、null

var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)
>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)

过滤不符合项

var arr = ['10','12','23','44','42']
var newArr = arr.filter(item => item.indexOf('2')<0) 
console.log(newArr)

文章摘自[https://www.cnblogs.com/lizhao123/p/9528124.html]

数组分组

const chunkArr = (arr, size) =>
        Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
          arr.slice(i * size, i * size + size)
        )
chunkArr(arr, 4)

JS 对象操作

判断对象是否为空

var data = {};
var arr = Object.keys(data);
console.log(arr.length === 0);//true

数组中的多个对象合并为一个对象

## ES6
Object.assign(...arr)
## 普通
 const obj = config.reduce((pre, cur, index) => {
         Object.keys(cur).forEach(key => pre[`${key}${index + 1}`] = cur[key])
         return pre
 }, {})

去除对象中为空或未指定值

/**
 * null => ''
 * @param {*} data 要处理的数据
 */
function null2str(data) {
  for (let x in data) {
    if (data[x] === null) { // 如果是null 把直接内容转为 ''
      data[x] = '';
    } else {
      if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
        data[x] = data[x].map(z => {
          return null2str(z);
        });
      }
      if(typeof(data[x]) === 'object'){ // 是json 递归继续处理
        data[x] = null2str(data[x])
      }
    }
  }
  return data;
}
let data = {id:1,name:null}
console.log(null2str(data))
for(attr in data){        //在遍历对象判断是null并且设置为想要的值
    if(data[attr]==="null")data[attr]='未记录'
}
console.log(data)

JS 字符串操作

去除字符串空格

正则匹配

去除字符串内所有的空格：str = str.replace(/\s*/g,"");
去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");
去除字符串内左侧的空格：str = str.replace(/^\s*/,"");
去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");

str.trim()方法 | trim()方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。
缺陷：只能去除字符串两端的空格，不能去除中间的空格

单独去除左侧空格则使用 str.trimLeft(); //var str_1 = str.trimLeft();
单独去除右侧空格则使用 str.trimRight();//var str_1 = str.trimRight(); | | —- |

文章摘自[https://www.cnblogs.com/a-cat/p/8872498.html]

对象操作

对象合并

Object.assign({}, {})
// 或者复制对象
Object.assign({},obj)

判断对象是否为空

Object.keys(obj).length ===0 true

Input 输入限制

oninput="if( value < 0 ){alert('非法输入！');value = ''}"

获取鼠标的位置

 function forward(event) {
            var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;
            alert(x + "," + y); //相对于浏览器
        }
        document.onclick = forward;


var JPos = {};
        (function($) {
            $.$getAbsPos = function(p) {
                var _x = 0;
                var _y = 0;
                while (p.offsetParent) {
                    _x += p.offsetLeft;
                    _y += p.offsetTop;
                    p = p.offsetParent;
                }

                _x += p.offsetLeft;
                _y += p.offsetTop;

                return {
                    x: _x,
                    y: _y
                };
            };

            $.$getMousePos = function(evt) {
                var _x, _y;
                evt = evt || window.event;
                if (evt.pageX || evt.pageY) {
                    _x = evt.pageX;
                    _y = evt.pageY;
                } else if (evt.clientX || evt.clientY) {
                    _x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
                    _y = evt.clientY + document.body.scrollTop - document.body.clientTop;
                } else {
                    return $.$getAbsPos(evt.target);
                }
                return {
                    x: _x,
                    y: _y
                };
            }
        })(JPos);

原生JSalert 弹出去掉默认携带的域名和地址：

window.alert = function(name){

        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    };


window.confirm = function (message) {
            var iframe = document.createElement("IFRAME");
            iframe.style.display = "none";
            iframe.setAttribute("src", 'data:text/plain,');
            document.documentElement.appendChild(iframe);
            var alertFrame = window.frames[0];
            var result = alertFrame.window.confirm(message);
            iframe.parentNode.removeChild(iframe);
            return result;
    };

学习网站 :https://www.html.cn/30-seconds-of-code/#chunk

小数位不够，用0补足位数

function dealWithFun(num,bit) {
  const fixNum = parseFloat(num)
  if(isNaN(fixNum) {
     return 0
  }
  const str_x = num.toString()// 为了后面值的拼接
  const point_decimal = fixNum.indexOf('.') // 取得小数点的下标key
  // 位数不足补0
  while(fixNum.length <= point_decimal.length + bit) {
        str_x +='0'
  }
  return str_x
}

下载图片

var x = new XMLHttpRequest();
      x.open("GET", "url", true);
      x.responseType = 'blob';
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = ''
        a.click()
      }
      x.send();

前端开发

javascript

JS 驼峰命名的转换

JS 数组操作

获得数组中的最大/小值

sort 排序

判断某个值是否在一个数组中

取得制定字符前后的值

数组对象中数据操作

对象数据合并

二维数组转为一维数组

数组取交集

数组取差集

数组去重

JS 数组分组排序

数组过滤

数组分组

JS 对象操作

JS 字符串操作

去除字符串空格

对象操作

对象合并

判断对象是否为空

小数位不够，用0补足位数