一. 改变对象的属性名
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()方法可以用于数组去重,不论是常规的数字数组,字符串数组,抑或是对象数组,
该方法必须提供:
- src参数,用于去重的数组
- key参数, 支持 点语法(成员运算符)来索引多级子对象(不限级别),键名可以是多个,用多号隔开;支持索引多级子对象,如:
unique(src,“adress.code”) - preserve参数:为true的时候表示操作的是原数组
- 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'}
]
]
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
