js 实用宝典(各种改变数据,检查数据)

1. 替换object对象的键名:

答: JSON.parse(JSON.stringify(data).replace(/keyName/g, 'name'))
注:data为数组,keyName为修改前的键名,name为修改后的键名
1、JSON.stringify()把json对象转成json字符串;
2、使用正则的replace()方法替换属性名;
3、JSON.parse()把json字符串又转成json对象。

2. 时间匹配:

例: 2021-01-21 11:17:33 正则匹配成只要 2021-01-21 11:17
答: '2021-01-21 11:17:33'.replace(/:\d+$/, '')

例: 0:0:15 替换成 0时0分15秒

方法一: '0:0:15'.replace(/(\d+):(\d+):(\d+)/, '$1时$2分$3秒')  

方法二: '0:0:15'.split(':').map((x, i) => `${x}${['时', '分', '秒'][i]}`).join('')
年月同理,' 2021-06'..split('-').map((x, i) => `${x}${['年', '月'][i]}`).join(''))   //2021年06月

3. 截取想要字符:

如果数据格式不会更改可以用substring()
例: 2021-01-21 11:17:33 匹配 2021年01月

let time= '2021-01-21 11:17:33'
let newTime= `${ time.substring(0,4)} 年${time.substring(5,7)}月`   //2021年01月

答: 2021-01-21 11:17:33.substring(0,4)年2021-01-21 11:17:33.substring(5,7)月

  1. 将数据相同的分类为一个object,如以月为一类,月里面有很多小数据
原数据:
arr:[
  { month: "2020年5月",  date: "06日", name: "分享1:"},
  {month: "2020年5月",  date: "26日", name: "分享2:"},
  {month: "2020年5月",  date: "28日", name: "分享3:"},
  {month: "2020年4月",  date: "06日", name: "分享4:"},
  {month: "2020年4月",  date: "26日", name: "分享5:"},
  {month: "2020年4月",  date: "27日", name: "分享6:"}
]

 /**处理后的数据
 record_arr: [{
    month: "2020年5月",
    date_arr: [{  date: "06日", name: "分享1:" }, {date: "26日",name: "分享2:"},{date: "28日", name: "分享3:"}]
  },
  {
    month: "2020年4月",
    date_arr: [{ date: "06日",name: "分享4:"},{date: "26日",name: "分享5:"}, { date: "28日", name: "分享6:"}]
  }
]
 //处理返回的数据成二维数组
 const groupBy=(list, key = 'id')=> {
    if (!list) return [];
    const recordMap = new Map();
    list.forEach(x => {
      if (recordMap.has(x[key])) {
        recordMap.set(x[key], [...recordMap.get(x[key]), x]);
      } else {
        recordMap.set(x[key], [x]);
      }
    });
    return [...recordMap.values()];
  },

  this.groupBy(beforeData, 'month').map(list => {
//beforeData是你要处理的数组
    return {
      month: list[0].month,
      date_arr: list,
    }
  })

5 数字转换成数组

// 最简单的方式是先将数字转换成字符串,再分割成数组
//方法一:
let num= 13452
num.toString().split('')

//方法二:
   function numberToArray(num) {
        const arr = [];
        while (num !== 0) {
            const digit = num % 10;
            num = Math.floor(num / 10);
            arr.unshift(digit);
        }
        return arr;
    }

  console.log(  numberToArray(156)) //[1,5,6]

6 判断电话号码格式是否匹配的正则:

!/^1[3456789]\d{9}$/.test(phone)
//身份证正则
function isIdCard(str) {
  return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(str);
}
//是否为合法域名http https
function isHttpUrl(str) {
    return /^(http|https):\/\/[^\s]+$/.test(str);
}


7 时间转换成时间戳

let date = new Date('2021-01-01'); //时间对象,时间须是"xxxx-xx-xx"格式
 let str = date.getTime() / 1000; //转换成时间戳 ,getTime()会精确到毫秒,所以需要除以1000,再传给后端
  console.log(str,"时间戳-------")

8 时间戳转时间

//方法一: (可能出现有些浏览器格式不相同问题,用uniapp小程序开发者工具预览和手机预览出现不同显示方式)
let date= new Date(1609430400);//直接用 new Date(时间戳) 格式转化获得当前时间

console.log(date);

console.log(date.toLocaleDateString().replace(/\//g, "-") + " " + date.toTimeString().substr(0, 8)); //再利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式

//方法二
      getdate(time, type) {
              //time参数:时间戳  
        let now = new Date(time),
          y = now.getFullYear(),
          m = now.getMonth() + 1,
          d = now.getDate();
        if (type === 'birthday') {
          return `${y}-${(m < 10 ? "0" + m : m)}-${(d < 10 ? "0" + d : d)}`
               //返回的是 'yyyy-mm-dd' 格式
        } else {
               //返回的是 'yyyy-mm-dd hh-ss' 格式
          return `${y}-${(m < 10 ? "0" + m : m)}-${(d < 10 ? "0" + d : d)} ${ now.toTimeString().substr(0, 5)}`
        }
      },

9 电话号码加密,中间四位加星号

"19919203800".replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

10 获取字符串中的参数值
在做项目时,可能会遇见值为"storeid%3D1%26tablesid%3D1%26type%3D1"这种,url通过UTF-8编码的转义后的值,首先url要解析成正常字符串,然后再获取参数值

let str="storeid%3D1%26tablesid%3D1%26type%3D1"
let newStr=decodeURIComponent(str)  //解析成正常字符串
console.log(newStr)  // storeid=1&tablesid=1&type=1
//方法一:
let obj=newStr.reduce( (res, keyvalue) => {
  const [key, value] = keyvalue.split('=')
  return {
    ...res,
    [key]: value
 }

}, {} )
console.log(obj)  // {storeid: "1", tablesid: "1", type: "1"}  这样我们就拿到对象值啦
// 方法二: 通过API URLSearchParams 


URLSearchParams

URLSearchParams

11 二维数组,根据数据内部的某条数据来进行分类,外层数据不重复

//源数据
goods=[
{
title:"短发",
goods:[{sex:0,name:'短发一'},{sex:1,name:'短发二'},{sex:1,name:'短发三'}]
},
{title:"中长发"},
{
title:"长发",
goods:[{sex:0,name:长发一'},{sex:1,name:'长发二'},{sex:1,name:'长发三'}]
},
]
//处理后的数据
manList=[
{title:'短发',goods:[{sex:0,name:'短发一'},]},
{title:'长发',goods:[{sex:0,name:长发一'},]},
]
womanList:=[
{title:'短发',goods:[{sex:1,name:'短发二'},{sex:1,name:'短发三'}]},
{title:'长发',goods:[{sex:1,name:'长发二'},{sex:1,name:'长发三'}]},
]
  const isEmptyArray = x => !(Array.isArray(x) && x.length > 0) //判断数据是否为空
    const deepClone = x => JSON.parse(JSON.stringify(x)); //深克隆数据
    const getSexGoods = (classify) => {
      const m = [];
      const wm = [];
      classify.goods.forEach(good => (String(good.sex) === '0' ? m : wm).push(good));
      return [{
        ...deepClone(classify),
        goods: m,
      }, {
        ...deepClone(classify),
        goods: wm,
      }];
    };
    const [manList, womanList] = data.goods.reduce(([m, wm], classify) => {
      if (!classify.goods) return [m, wm]; //跳过没有goods的数据
      const [mItem, wmItem] = getSexGoods(classify)
      return [
          m.concat(isEmptyArray(mItem.goods) ? [] : mItem),
          wm.concat(isEmptyArray(wmItem.goods) ? [] : wmItem),
      ]
    }, [[], []]);
    console.log({manList, womanList})

12 js获取页面url,获取想要的参数值

 const url = window.location.href;// 获取当前页面的url
例:url='https://www.service_muban/edit?id=21&ref=addtabs'
  getQueryData(arg) {
                let query = window.location.search.substring(1);//获取当前url的参数值,就是?后面的传参
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let arr= vars[i].split("=");
                    if (arr[0] === arg) {
                        return arr[1];
                    }
                }
                return false;
            },
 let id= this.getQueryData("id");  //21

13 字符串拼接,前面加特殊符号,第一位不添加

str = str=== ' ' ? str + item.name : str + ' , ' + item.name

14 获取对象下某个键的键值

const objs={'name':'张三',''age': 24}
console.log(objs[Object.keys(objs)[0]]) //'张三'

15 字符串转obj
当后端返回数据有时成了字符串,我们可以这样转换

方法一:
res={errMsg: 'uploadFile:ok', statusCode: 200, data: '{"code":1,"msg":"上传成功","time":"1649390547","data":…20220408\\/2bc2e0ac4f89cea7f0c88dc40642e253.jpg"}}'}
eval('('+res.data+')')

方法二:
 JSON.parse(res.data);

16 去除字符串中的html

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

17 正则提取/地址中的省、市、区、县等信息

const address='四川省成都市金牛区树蓓街99号'
let  reg = /.+?(省|市|自治区|自治州|县|区)/g;
console.log(address.match(reg))  //['四川省', '成都市', '金牛区']


18 判断图片是否有拼接域名

export function estimateIngredients(image) {
    const BASE_URL = getApp().globalData.BASE_URL //这是域名,看你自己的域名是怎么写的
    return new Promise(async (resolve) => {
        let str = new RegExp("http");
        let res = str.test(image)
        res ? resolve(image) : resolve(`${BASE_URL}${image}`)
    })
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,331评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,372评论 3 398
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,755评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,528评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,526评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,166评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,768评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,664评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,205评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,290评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,435评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,126评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,804评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,276评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,393评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,818评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,442评论 2 359

推荐阅读更多精彩内容