前端开发项目中常用的js数组、对象数据处理方法

于 2023-07-14 11:20:28 发布
阅读量231 收藏
点赞数
文章标签： 前端 javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50843980/article/details/131718898
版权

<------------------此贴将记录实际开发中需要的一些常用方法，后期会不断更新---------------------->

目录

1.随机字符串

2.图片url转换为file

3.递归部门列表

4.返回时间(年月日)

5.中文与数字相关 

6.GIS相关计算

7.深拷贝 

8.防抖 

1.随机字符串

// 随机字符串
  randString: length => {
    var text = ['abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '1234567890'];
    var rand = function (min, max) {
      return Math.floor(Math.max(min, Math.random() * (max + 1)));
    };
    var len = rand(length, length); // 长度
    var pw = '';
    for (let i = 0; i < len; i++) {
      var strpos = rand(0, 2);
      pw += text[strpos].charAt(rand(0, text[strpos].length - 1));
    }
    return pw;
  },

 2.图片url转换为file

// 图片url转换为file
  setInitImg: (url, callback) => {
    let img = url; //这里是淘宝上随便找的一张图片
    let _ = util;
    let imgRes;
    util.getBase64(img, dataURL => {
      imgRes = util.dataURLtoFile(dataURL);
      callback(imgRes);
    });
  },
  getBase64: (url, callback) => {
    //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
    var Img = new Image(),
      dataURL = '';
    Img.src = url + '?v=' + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
    Img.setAttribute('crossOrigin', 'Anonymous'); // 解决控制台跨域报错的问题
    Img.onload = function () {
      //要先确保图片完整获取到，这是个异步事件
      var canvas = document.createElement('canvas'), //创建canvas元素
        width = Img.width, //确保canvas的尺寸和图片一样
        height = Img.height;
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
      dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
      callback ? callback(dataURL) : null; //调用回调函数
    };
  },
  dataURLtoFile: dataurl => {
    //将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    let filename = util.randString(8) + '.' + mime.split('/')[1];
    return new File([u8arr], filename, { type: mime });
  },

 3.递归部门列表

recursionDepartmentList: data => {
    for (let i = 0; i < data.length; i++) {
      if (data[i].childList && data[i].childList.length > 0) {
        data[i].label = data[i].organName;
        data[i].value = data[i].id;

        data[i].children = data[i].childList;
        util.recursionDepartmentList(data[i].children);
      } else {
        data[i].label = data[i].organName;
        data[i].value = data[i].id;
      }
    }
  }

4.返回时间(年月日)

returnYearMonthDateTime: date => {
    let year = date.getFullYear();
    let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    let time = year + '-' + month + '-' + dd;
    return time;
  },
  // 返回时间(时分秒)
  returnHoursMinuteSecondTime: date => {
    let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    let time = hours + ':' + minute + ':' + second;
    return time;
  },
  // 返回实时时间
  returnTime: () => {
    let date = new Date();
    let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
    let hours = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
    let minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
    let seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
    return date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + hours + ':' + minutes + ':' + seconds;
  },
  // 时分秒转时间戳
  returnTimeStamp: time => {
    const date = new Date();
    date.setHours(0, 0, 0, 0);
    const timestamp = date.getTime();

    var s = 0;
    var hour = time.split(':')[0];
    var min = time.split(':')[1];
    var sec = time.split(':')[2];
    s = Number(hour * 3600000) + Number(min * 60000) + Number(sec * 1000);
    return s + timestamp;
  }

5.中文与数字相关 

CheckChinese: val => {
    var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
    return reg.test(val);
  },
  // 数字转中文
  numberToChina: index => {
    let chinaArray = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    switch (index) {
      case 1:
        return chinaArray[1];
      case 2:
        return chinaArray[2];
      case 3:
        return chinaArray[3];
      case 4:
        return chinaArray[4];
      case 5:
        return chinaArray[5];
      case 6:
        return chinaArray[6];
      case 7:
        return chinaArray[7];
      case 8:
        return chinaArray[8];
      case 9:
        return chinaArray[9];
      case 10:
        return chinaArray[10];
      default:
        return '';
    }
  },

 6.GIS相关计算

 

// 返回最大经纬度以及最小经纬度
  returnMaxMinLngMaxMinLat: data => {
    let maxLng = Math.max(...data.map(item => item.coordinate.longitude));
    let minLng = Math.min(...data.map(item => item.coordinate.longitude));
    let maxLat = Math.max(...data.map(item => item.coordinate.latitude));
    let minLat = Math.min(...data.map(item => item.coordinate.latitude));

    return { maxLng: maxLng, minLng: minLng, maxLat: maxLat, minLat: minLat };
  },
  recursionRouter: (menuMap, menuChildList) => {
    menuMap.forEach(menu => {
      menuChildList.push(menu);
      if (menu.childList) {
        util.recursionRouter(menu.childList, menuChildList);
      }
    });
  },
  // 计算两个经纬度之间的角度(0-360)
  getAngle: (lng_a, lat_a, lng_b, lat_b) => {
    var a = ((90 - lat_b) * Math.PI) / 180;
    var b = ((90 - lat_a) * Math.PI) / 180;
    var AOC_BOC = ((lng_b - lng_a) * Math.PI) / 180;
    var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
    var sinc = Math.sqrt(1 - cosc * cosc);
    var sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc;
    var A = (Math.asin(sinA) * 180) / Math.PI;
    var res = 0;
    if (lng_b > lng_a && lat_b > lat_a) res = A;
    else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
    else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
    else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
    else if (lng_b > lng_a && lat_b == lat_a) res = 90;
    else if (lng_b < lng_a && lat_b == lat_a) res = 270;
    else if (lng_b == lng_a && lat_b > lat_a) res = 0;
    else if (lng_b == lng_a && lat_b < lat_a) res = 180;
    return res;
  },
  // 通过角度算方向
  calculationDirection: (angle, comefromValue, toValue, comfromDirectionList, toDirectionList) => {
    comefromValue = '';
    toValue = '';

    if (angle > 22.5 && angle <= 67.5) {
      comefromValue = '西南';
      toValue = '东北';
    } else if (angle > 67.5 && angle <= 112.5) {
      comefromValue = '西';
      toValue = '东';
    } else if (angle > 112.5 && angle <= 157.5) {
      comefromValue = '西北';
      toValue = '东南';
    } else if (angle > 157.5 && angle <= 202.5) {
      comefromValue = '北';
      toValue = '南';
    } else if (angle > 202.5 && angle <= 247.5) {
      comefromValue = '东北';
      toValue = '西南';
    } else if (angle > 247.5 && angle <= 292.5) {
      comefromValue = '东';
      toValue = '西';
    } else if (angle > 292.5 && angle <= 337.5) {
      comefromValue = '东南';
      toValue = '西北';
    } else {
      comefromValue = '南';
      toValue = '北';
    }

    if (
      !comfromDirectionList.find(item => {
        return item.value === comefromValue;
      }) ||
      !toDirectionList.find(item => {
        return item.value === toValue;
      })
    ) {
      comefromValue = '';
      toValue = '';
    }

    return { comefromValue: comefromValue, toValue: toValue };
  },
  // 通过角度返回方向
  returnDirection: angle => {
    if (angle > 22.5 && angle <= 67.5) {
      return '东北';
    } else if (angle > 67.5 && angle <= 112.5) {
      return '东';
    } else if (angle > 112.5 && angle <= 157.5) {
      return '东南';
    } else if (angle > 157.5 && angle <= 202.5) {
      return '南';
    } else if (angle > 202.5 && angle <= 247.5) {
      return '西南';
    } else if (angle > 247.5 && angle <= 292.5) {
      return '西';
    } else if (angle > 292.5 && angle <= 337.5) {
      return '西北';
    } else {
      return '北';
    }
  },
  // 通过角度返回序号
  returnDirectionNumber: angle => {
    if (angle > 22.5 && angle <= 67.5) {
      return '1';
    } else if (angle > 67.5 && angle <= 112.5) {
      return '2';
    } else if (angle > 112.5 && angle <= 157.5) {
      return '3';
    } else if (angle > 157.5 && angle <= 202.5) {
      return '4';
    } else if (angle > 202.5 && angle <= 247.5) {
      return '5';
    } else if (angle > 247.5 && angle <= 292.5) {
      return '6';
    } else if (angle > 292.5 && angle <= 337.5) {
      return '7';
    } else {
      return '0';
    }
  },

7.深拷贝 

//深度合并-深拷贝,参数同Objec.assign
function deepMerge(obj1, obj2) {
  let key;
  for (key in obj2) {
    // 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
    // 如果obj2[key]没有值或者值不是对象，此时直接替换obj1[key]
    obj1[key] =
      obj1[key] &&
        obj1[key].toString() === "[object Object]" &&
        (obj2[key] && obj2[key].toString() === "[object Object]")
        ? deepMerge(obj1[key], obj2[key])
        : (obj1[key] = obj2[key]);
  }
  return deepClone(obj1)
}
//深拷贝
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    let key;
    for (key in obj) {
      if (Object.hasOwnProperty.call(obj, key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

8.防抖 

//防抖
function debounce(fn, delay = 1000) {
  let timeout
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.call(this, arguments);

    }, delay);
  };
}

 PS：文中所述方法如果有什么问题，或者同行伙伴们有什么好的方法和建议，都可以再评论区提出来，此贴将会持续更新和完善，让我们一起成长！

现实绑架幻想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js常用的处理数据方法之对象篇
我不要秃头的博客
01-19 599
对象的扁平化处理 var obj = { 'A': 1, 'B.A': 2, 'B.B': 3, 'CC.D.A': 4, 'CC.D.F': 5, } /** * 递归函数-处理数据 * @param {*} str 对象的key值 * @param {*} obj 已经存在的对象链 * @param {*} value 到最后一个点时候赋的值 */ var pinjie = function(str, obj,value) { if(st
js对象数据操作
超人阿狸博客
05-19 9146
1.先写最简单的js怎么创建对象    zongObj = new Object();//(就是这么简单)2.写怎么向对象中添加元素    zongObj.name="小明来了";3.写向对象中再添加一个对象（再定义一个对象）  personObj = new Object();  3.1给子对象即personObj中添加元素   personObj.age=56;   personObj.fir...
js 处理json对象数据
weixin_30449239的博客
01-16 200
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont...
JS对象、数据相关
sky08050025的专栏
03-18 256
JS是基于对象的语言，但不是直接的面向对象，因为没有类。一、对象基本定义对象：var obj=new Object(); 或var obj={name:"xiaoming",sex:"man"};var browser = { //对象是由花括号括起来的 name: "Firefox", kernel: "Gecko", ...
js——对象，JSON格式的数据
qql960621的博客
03-03 360
1.对象------三种创建对象的方式 /** * js是一门基于对象的语言 * *创建对象的三种方式： * 1.调用系统的构造函数创建对象 * var 变量名=new Object();Object是系统的构造函数 * * 2.自定义构造函数创建对象 * 自己定义一个构造函数，创建对象 * 函数和...
js数组中存对象,根据对象的属性进行去重
04-25
在进行web项目开发的时候,有时候需要把一些前端的数组进行去重处理,得到一个去重后的数据,然后在进行相关的操作
《Web前端开发从入门到精通》.pdf
10-03
本资源摘要信息涵盖了Web前端开发的所有知识点，从HTML基础课程到JavaScript高级实战，涵盖了CSS基础课程、jQuery实战、常用库和前端框架、HTML5新功能和高级机制、CSS3新特性详解、实战案例等内容。 HTML基础课程...
经典打地鼠项目，前端项目实践
11-27
在项目中，我们使用了多种变量和数据类型，包括数字、字符串、数组和对象。 5. 函数和事件处理 在项目中，我们使用了函数来封装游戏的逻辑，包括游戏的启动、游戏时间的倒计时、老鼠的出现和消失等功能。我们还...
web前端开发知识点总结.pdf
10-03
* JavaScript 变量和数据类型：JavaScript 中的变量可以存储不同的数据类型，包括数字、字符串、布尔值、数组、对象等。 * JavaScript 控制结构：JavaScript 的控制结构包括条件语句、循环语句、跳转语句等。 * ...
精选前端开发面试题(Vue部分).pdf
12-14
* 在对一些属性进行操作时，使用这种方法无法拦截，例如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。 5. MVVM、MVC、MVP 的区别 ...
JavaScript中的对象数据类型
qq_53541336的博客
08-09 322
对象的创建：字面量方式、内置构造函数即使用Object方式。定义：所谓对象其实就是一个复杂的数据类型。对象的遍历：利用for循环来进行遍历。（2）使用Object创建。
JavaScript对象数据类型、对象的基本操作（增删改查）、对象的遍历
YY的博客
10-11 471
JavaScript对象数据类型、对象的基本操作（增删改查）、对象的遍历
JavaScript对象数据类型基础
weixin_40630195的博客
12-10 1188
JavaScript对象,JavaScript内置对象,对象使用,操作对象,遍历对象,Math内置对象
前端基础(十六)_数组对象
见贤思齐焉，见不贤内自省
03-09 746
数组常用方法
常用正则表达式
chen_rong999的博客
03-29 409
1、判断字符串是否存在中文 new RegExp("[\u4E00-\u9FFF]+",“g”); reg: var reg = new RegExp("[\u4E00-\u9FFF]+",“g”); reg.test(’ '); reg.test(‘1’); reg.test(‘哈’)；/[\u4e00-\u9fa5]/g.test(‘1111发觉’) 2、js截取两个字符串之间的内容： var str = “aaabbbcccdddeeefff”; str = str.match(/aaa(\S*)
js 一些处理数据的方法
阿铭的博客
06-29 2612
关于处理数组和对象的方法
js正则密码校验
yr123456654321的博客
08-31 1147
无
前端处理数据常用的方法
m0_63304840的博客
11-17 1642
处理数据的一些方法
js 正则 判断是否有中文字符或汉字
热门推荐
zuo-yiran的博客
08-16 2万+
方法一：仅判断是否含有汉字 function isChina(s) { var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); if (reg.test(s)) { alert("包含汉字！"); } else { alert("没有包含汉字！"); } } 方法二：判断是否含有中文字符（包括汉字及中文的标点符号） function isHaveChina(str) { if (escape(str).indexOf("%u") < 0)
js 数组展开对象去重
最新发布
09-13
在JavaScript中，可以使用数组展开运算符（Spread Operator）和Set数据结构来实现数组展开对象去重。下面是实现的步骤： 1. 定义一个包含重复对象的数组。 2. 使用数组展开运算符将数组展开为一个新的数组。 3. 使用Set数据结构去除数组中的重复项。 4. 将Set转换回数组。 以下是代码示例： ```javascript let arr = [ {id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 1, name: '张三'}, {id: 3, name: '王五'} ]; let uniqueArr = [...new Set([...arr])]; console.log(uniqueArr); // 输出: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}] ``` 在上面的代码中，我们使用了数组展开运算符将原始数组展开为一个新的数组。然后，我们使用Set数据结构去除了数组中的重复项。最后，我们将Set转换回数组，并将结果赋值给`uniqueArr`变量。最终，`uniqueArr`将包含去重后的对象数组。 : 在前端开发中，数据处理是不可避免的一项任务。本文将介绍几种常见的数据处理方法，包括数组去重、数组对象去重、对象合并、数组近似率处理。 : 数组对象去重是指将数组中重复的对象去掉，只保留其中一个。在 JavaScript 中，可以使用 Array.prototype.reduce() 方法和 Map 数据结构来实现数组对象去重。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值