数组 对象 字符串高级API

一. 改变对象的属性名

let jsonObj = [ {
            "_id": "123456",
            "name": "alex",
            "age": "18",
            "sex": "male",
            "other": "其他"
        }, {
            "_id": "123457",
            "name": "li",
            "age": "19",
            "sex": "male",
            "other": "其他1"
        }]

let obj = {
    "_id": "123457",
    "name": "li",
    "age": "19",
    "sex": "male",
    "other": "其他1"
}

//改变对象的属性名的函数
/*
 * 传入参数 对应规则的对象
 * 
 *
*/
let rule = [
    { "_id": "idStr" }, 
    { "name": "firstName" },
    { "age": "old" },
    { "sex": "sex_male" }
]

function changePropertyName(data,rule) {
    
    let tempObj = {} // 临时对象
    let tempArr = [] // 临时数组
    if(data instanceof Array) {
        //如果是数组的操作  
        let eleObj = {}
        data.forEach(ele => {
            //这里也是一个数组中包含对象
            rule.forEach(val => {
                for (const oldKey in val) {
                    //获取新的键名
                    let newKey = val[oldKey]
                    //用老键名的值去赋值新的属性名
                    tempObj[newKey] = ele[oldKey]
                    //删除老的键值对 
                    delete ele[oldKey]
                }  
            })
            //将老键值对里没有替换属性名的键值,取出来赋值给新对象
            eleObj = Object.assign({},tempObj,ele)
            //将修改后数据重新装回数组
            tempArr.push(eleObj)
        })
        return tempArr 
    }else {
        {
            //如果是对象的操作
            rule.forEach(val => {
                for (const oldKey in val) {
                    let newKey = val[oldKey]
                    tempObj[newKey] = data[oldKey] 
                    delete data[oldKey]
                }  
            })

            return Object.assign(tempObj,data)
        }
    }
}

console.log(changePropertyName(jsonObj,rule))
console.log(changePropertyName(obj,rule))

当我们定义好视图层的渲染数据时,后台返回的JSON数据格式与我们的视图层不一致,可以使用这种办法改变JSON对象里的属性名.

二. 查询对象的属性值

按给出的路径计算对象的值

let obj = {
     a: 10,
      b: {
          c: {
              d: 20
          },
          e: 30
      }
  }

  /*
   * 按给出的路径计算对象的值
   * obj: 指定对象
   * path: 指定的路径  
   * separator: 分割符号,默认为成员运算符
   *
  */
  function evalPath(obj,path,separator=".") {
      return typeof path == "string" ?
              path.trim()
                  .split(separator)
                  .reduce((s,p) => (s ? s[p] :undefined),obj): obj;
                          
  }

  console.log(evalPath(obj,"b.c.d")) //20

三.filter筛选数据

let students = [
     {name: '张三', score: 84},
     {name: '李四', score: 58},
     {name: '王五', score: 99},
     {name: '赵六', score: 69}
 ];

 // function grade(arr,score) {
 //     return arr.filter(val => {
 //         return val.score > 80
 //     });
 // }

 // console.log(grade(students,80))

 function groundBy(arr) {
     let gradeA = grade(arr,100,80)
     let gradeB = grade(arr,80,60)
     let gradeC = grade(arr,60,0)

     // console.log(gradeA,gradeB,gradeC)

     return {
         "A": gradeA,
         "B": gradeB,
         "C": gradeC
     }

     function grade(arr,highScore,lowSocre) {
         return arr.filter(val => {
             return val.score > lowSocre && val.score <= highScore
         });
     }
 }

 console.log(groundBy(students))

筛选出的数据格式:

{
'A': [
	{name: '王五', score: 99},
	{name: '张三', score: 84}
],
'B': [{name: '赵六', score: 69}],
'C': [{name: '李四', score: 58}]
}

四 时间排序

在表格的排序里面,经常遇见两个时间的排序:

let arr = [{
       createdDate: "2009-06-15T13:45:30"
   }, {
       createdDate: "2010-06-15T13:45:30"
   }, {
       createdDate: "2010-06-15T14:45:30"
   }, {
       createdDate: "2010-06-15T13:45:50"
   }]
//利用排序的api sort数组
arr.sort((a, b) => {
       return new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime()
   })

   console.log(arr)

五 数组合并与踢重

let arr1 = [1,2,3,4]
let arr2 = [2,3,4]

//数组合并,踢重
let arr = []
arr =  Array.from(new Set(arr1.concat(arr2)))
arr = [...new Set(arr.concat(arr1))]
console.log(arr)

六 将ISO时间格式的字符串转化为本地时间

将ISO标准时间转成本地时间

//国际标准ISO时间
let str = "2019-01-17T06:03:48.905Z"

//转换为本地时间
let time = new Date(str).toLocaleString("chinese",{hour12: false})

七 过滤复杂数组中的元素

//现在给出一个数组
let arr = [
	{a:1,b:2},
	{a:3,b:6},
	{a:4,b:5,c:7}
]
//现在过滤出对象里有 c 这个属性的数组元素
let arr = [
	{a:1,b:2},
	{a:3,b:6},
	{a:4,b:5,c:7}
  ]

  let newArr = arr.filter(val => {
      if(val.c) {
          return val
      }
  })

  console.log(newArr) //[{a:4,b:5,c:7}]
  console.log(newArr[0]) //{a:4,b:5,c:7}

八 字符串的截取

现在有一个需求,要匹配字符串里的所有a标签,并且修改a标签的链接为正常链接,这种情况常常出现在富文本里.

let str = `<p>这是测试文字
	             <a href="localhost://8080/www.baidu.com"><em>百度</em></a>    
	               <h1>这里是分割线</h1>
	               <a href="localhost://8080/www.taobao.com"><em>淘宝</em></a>
	               <span>最后一个啦</span>
	               <a href="localhost://8080/www.jidong.com"><em>京东</em></a>
	          </p>`;
                   
        changeHref(str,"localhost://8080/")

        function changeHref (str,sliceStr) {
            let reg = /<a([\s]+|[\s]+[^<>]+[\s]+)href=(\"([^<>"\']*)\"|\'([^<>"\']*)\')[^<>]*>/gi;
            //找到所有的a标签
            let alink = str.toLowerCase().match(reg);
            //深拷贝
            let temp = [...alink];

            for(let i= 0; i<alink.length; i++) { 
                let temp = alink[i].toLowerCase().match(reg);
                //找到旧的标签
                let href = RegExp.$3+RegExp.$4
                
                //如果没有截取这一步可以不要
                //1.先去除href前面的"localhost://8080/"
                let hreftemp = href.replace(sliceStr,"") 
                //截取步骤
                alink[i] = alink[i].replace(href,hreftemp) //<a href="www.baidu.com"></a>


                //2. 给这个字符串加上http://
                let newHref = `http://${hreftemp}`

                //3. 用这个href代替原来的href
                alink[i] = alink[i].replace(hreftemp,newHref) //<a href="http://www.baidu.com">
            }
   
            //用新的href代替原来的a标签中的href
            for(let i=0;i<temp.length;i++){
                str = str.replace(temp[i],alink[i])
            }

            // console.log(str)
            return str 
        }
        

截取出来的结果:
在这里插入图片描述
这样就可以将a标签里原来的href: localhost://8080/www.baidu.com 改为正常可以使用的 http://www.baidu.com了

九 在vue里面实现操作DOM的css的方法

function css(dom,obj) {
	for(let i in obj) {
		dom.style[i] = obj[i]
	}
}

十 使数组元素保持唯一性

使用unique()方法可以用于数组去重,不论是常规的数字数组,字符串数组,抑或是对象数组,

该方法必须提供:

  1. src参数,用于去重的数组
  2. key参数, 支持 点语法(成员运算符)来索引多级子对象(不限级别),键名可以是多个,用多号隔开;支持索引多级子对象,如:
    unique(src,“adress.code”)
  3. preserve参数:为true的时候表示操作的是原数组
  4. drop参数: 提供一个函数回调,被丢弃的元素的集合将传递到这个回调中
let src = [
    {age: 32, name: 'yq'},
    {age: 18, name: 'lyp'},
    {age: 30, name: 'lyp'},
    {age: 17, name: 'lr'}
 ]

 console.log(unique(src,"name"))

 function unique (src,key,preserve = false,drop = null) {
     if(!Array.isArray(src)) {
         throw new TypeError("parameter 'src' must be an array")
     }

     if(typeof key == "function") {
         drop = key
         key = ""
     }

     if(typeof preserve == "function") {
         drop = preserve
         preserve = false
     }

     let set = []
     let expecctDrop = typeof drop == 'function'
     let hasKey = !!key && typeof key == 'string'
     let keys = hasKey ? key.split(",") : ""

     let result = src.reduce((_src,item,index) => {
         let _key = hasKey ? keys.reduce((s,k) => s += evalPath(item,k),"") : item

         let exist = _key in _src

         if(exist) {
             if(preserve || expecctDrop) {
                 set.push(index)
             }
         }else {
             _src[_key] = item
         }

         return _src
     },{})
     
     if(expecctDrop) {
         drop(set.map(index => src[index]))
     }

     return preserve ? set.reverse().reduce((s,i) => (s.splice(i,1),s),src) : values(result)
 } 


 /*
     获取指定对象的值的集合
 */
 function values(obj) {
     return typeof Object.values == "function" ? Object.values(obj) 
         : Object.keys(obj).map(key => obj[key])
 }

 function evalPath(obj,path,separator=".") {
     return typeof path == "string" ?
         path.trim()
             .split(separator)
             .reduce((s,p) => (s ? s[p] :undefined),obj): obj;
                 
 }

得到的结果:
在这里插入图片描述
十一 两个数组相互筛选数据

现在有两个数组,一个数组根据另外一个数组的数据筛选自身数组的数据.

let arr1 = [
     {id: 1234, name: "lyp"},
      {id: 1235, name: "lyp1"},
      {id: 1236, name: "lyp2"},
      {id: 1237, name: "lyp3"},
  ] 

  let arr2 = [
      {id: 1234, age: 18},
      {id: 1235, age: 28},
      {id: 12, age: 38},
      {id: 1, age: 48},
      {id: 123478, age: 58},
  ]

  //筛选出arr1与arr2这两个数组中id相同的arr1的数据
  let newArr = arr1.filter(_val => {
      return arr2.some(_data => {
          return _data.id === _val.id
      })
  })

//输出的结果
 console.log(newArr)

筛选出的结果:
在这里插入图片描述

十二 数组扁平化并去重,得到升序

let arr = [[1,2,3],[3,4,5,5],[6,7,8,9,[11,12]]]

//数组扁平化同时去重升序排布

let newArr = Array.from(new Set(arr.flat(Infinity))).sort((a,b) => {return a-b})

console.log(newArr)
//最终的数组
[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12]

十三 数组 reduce方法

1. 简单的求和运算

let a = [1,2,3];
let total = 0;
total = a.reduce(function(acc,curr) {
    acc += curr;
    return acc;
}, 0);
// 6

2. 累加器

function sum(arr) {
    if (!(arr instanceof Array)) {
        return 0;
    }
    return arr.reduce((acc, curr) => {
        return acc + curr;
    }, 0);
}

3. 数组元素分组

let num = ['one', 'two', 'three'];
const obj = num.reduce(function(acc, curr) {
    let arr = acc[curr.length] || [];
    acc[curr.length] = arr.concat(curr);
    return acc;
}, {});
// 返回数据为:  { 3: ['one', 'two'], 5: ['three']}

另外一种实现方式:

let num = ['one', 'two', 'three'];
const obj = num.reduce(function(acc, curr) {
    if (!acc.hasOwnProperty(curr.length)) {
        acc[curr.length] = [];
    }
    acc[curr.length].push(curr);
    return acc;
}, {});

4. 合并数据

let arr = [
    { name: 'l'},
    { name: 'z'},
]
let obj = {
    l: 750,
    z: 300
}

arr.reduce(function(acc, curr) {
    curr.point = obj[curr.name];
    acc.push(curr);
    return acc;
}, [])
// [
	 { name: 'l', point: 750 },
	 { name: 'z', point: 300 },
]

4. 一维数组变二位数组

let arr = [
    { name: '1'},
    { name: '2'},
    { name: '3'},
    { name: '4'},
]

// 二维数组
const arr2 = arr.reduce((acc, cur, index, arr) => {
   index % 2 === 0 && acc.push(arr.slice(index, index + 2));
   return acc;
}, []);

// [
    [
    	{ name: '1'},
    	{ name: '2'}
    ],
    [
		{ name: '3'},
    	{ name: '4'}		
	]
]
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值