简介:
记录JS中一些高阶用法和应用场景,方便工作中处理业务逻辑(不定期更新)
reduce函数:
reduce()函数的语法
array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 逻辑处理
}, initialValue);
参数说明：
- accumulator：累加器，每次累加的结果会被存储在accumulator中，并在下一次迭代中作为第一个参数传入。
- currentValue：当前值，是数组中当前被处理的元素。
- currentIndex：当前索引，可选，是当前元素在数组中的索引值。
- array：原数组，可选，是reduce()被调用的数组。
- initialValue：初始值，可选，作为第一次调用累加器函数时的第一个参数传入。
常见的使用场景:
1.数组求和:
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
2.数组求平均值:
const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((accumulator, currentValue, currentIndex, array) => {
accumulator += currentValue;
if (currentIndex === array.length - 1) {
return accumulator / array.length;
} else {
return accumulator;
}
}, 0);
console.log(average); // 3
3.数组去重:
const arr = [1, 2, 3, 4, 3, 2, 1];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4]
4.数组对象求和:
const arr = [
{ name: "A", score: 90 },
{ name: "B", score: 80 },
{ name: "C", score: 70 },
];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0);
console.log(sum); // 240
5.数组对象分组:
const arr = [
{ name: "A", score: 90 },
{ name: "B", score: 80 },
{ name: "C", score: 70 },
];
const groupByScore = arr.reduce((accumulator, currentValue) => {
const score = currentValue.score;
if (!accumulator[score]) {
accumulator[score] = [];
}
accumulator[score].push(currentValue);
return accumulator;
}, {});
console.log(groupByScore);
// {
// 90: [{ name: "A", score: 90 }],
// 80: [{ name: "B", score: 80 }],
// 70: [{ name: "C", score:
工作处理场景
// 接口返回数据
const data = [
{
"name": "运行状态",
"code": "code001",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "",
"isWritable": false,
"showOrder": 1,
"showType": "",
"isNumber": false,
"regName": "",
"value": "",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": 1648870911295139800,
"subList": [
{
"name": "运行",
"value": "1.00"
},
{
"name": "停止",
"value": "0.00"
},
{
"name": "测试导入",
"value": null
},
{
"name": "测试导入",
"value": null
}
]
},
{
"name": "手自动状态",
"code": "shouzidong",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "",
"isWritable": false,
"showOrder": 2,
"showType": "",
"isNumber": false,
"regName": "tagName12",
"value": "",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": 1648870911295139800,
"subList": [
{
"name": "运行",
"value": "1.00"
},
{
"name": "停止",
"value": "0.00"
},
{
"name": "测试导入",
"value": null
},
{
"name": "测试导入",
"value": null
}
]
},
{
"name": "送风温度反馈",
"code": "fankui",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "℃",
"isWritable": false,
"showOrder": 3,
"showType": "",
"isNumber": false,
"regName": "tagname2",
"value": "",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": null,
"subList": null
},
{
"name": "启停状态",
"code": "qiting",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "",
"isWritable": true,
"showOrder": 4,
"showType": "switch",
"isNumber": false,
"regName": "tagname4",
"value": "",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": 1648864822247862300,
"subList": [
{
"name": "开",
"value": "1.00"
},
{
"name": "关",
"value": "0.00"
}
]
},
{
"name": "季节转换",
"code": "jijiezhuanhuan",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "",
"isWritable": true,
"showOrder": 5,
"showType": "select",
"isNumber": false,
"regName": "tagname5",
"value": "",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": 1648865304638959600,
"subList": [
{
"name": "春",
"value": "0.00"
},
{
"name": "夏",
"value": "1.00"
},
{
"name": "秋",
"value": "2.00"
},
{
"name": "冬",
"value": "3.00"
}
]
},
{
"name": "送风温度设定",
"code": "sheding",
"deviceId": "1645689299270561794",
"deviceTypeId": "1646767246385205249",
"isTemplate": false,
"unit": "℃",
"isWritable": true,
"showOrder": 6,
"showType": "inputnumber",
"isNumber": false,
"regName": "tagname6",
"value": "11",
"saveInterval": 5,
"valueText": null,
"deviceParamDictId": null,
"subList": null
}
]
// 使用reduce处理逻辑
initDeviceParams() {
const result = {
regNames: [], // 获取所有的regName
writableArray: [], // writable 为true
notWritableArray: [], // else
deviceMapData: {}, // 处理成map 类型
};
data.reduce((acc, cur) => {
if (cur.regName !== '') {
acc.regNames.push(cur.regName);
}
if (cur.isWritable) {
acc.writableArray.push(cur);
} else {
acc.notWritableArray.push(cur);
}
if (cur.subList && cur.subList.length > 0) {
const subItem = cur.subList.find(
(item) => item.name === cur.value
);
acc.deviceMapData[cur.name] = subItem
? subItem.value
: cur.value;
} else {
acc.deviceMapData[cur.name] = cur.value;
}
return acc;
}, result);
this.regNames = result.regNames;
this.writableArray = result.writableArray;
this.notWritableArray = result.notWritableArray;
this.deviceMapData = result.deviceMapData;
this.isLoaded = true;
console.log(this.deviceMapData);
// 输出结果
//{
//"运行状态": "",
//"手自动状态": "",
//"送风温度反馈": "",
//"启停状态": "",
//"季节转换": "",
//"送风温度设定": "11"
//}
},
map函数:
- set(key, value)：将键值对添加到Map对象中，如果该键已经存在，则更新对应的值
- get(key)：获取指定键对应的值，如果键不存在，则返回undefined。
- has(key)：判断Map对象中是否存在指定键。
- delete(key)：删除Map对象中指定键及其对应的值。
- clear()：清空Map对象中所有键值对。
- size：返回Map对象中键值对的数量。
- entries()：返回一个包含Map对象中所有键值对的迭代器。
- keys()：返回一个包含Map对象中所有键的迭代器。
- values()：返回一个包含Map对象中所有值的迭代器。
例子:
const map = new Map([
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
]);
console.log(map.size); // 3
map.set("key4", "value4");
console.log(map.get("key2")); // "value2"
for (const [key, value] of map.entries()) {
console.log(`${key}: ${value}`);
}
// key1: value1
// key2: value2
// key3: value3
// key4: value4
说明:
