1. 删除|过滤对象中部分属性
let className={
age:'18',
name:'zhansan',
sex:'nan'
}
delete className.age
console.log(className);
const params=(({
name,sex})=>({
name,sex}))(className)
console.log(params);
let {
age,...param}=className
console.log(param);
2. 重数组对象中取出key和value组成新的对象
const datalist = [
{
key: 'TimeWeiDu', value: '时间维度' },
{
key: 'TranType', value: '交易类型' },
{
key: 'OrderType', value: '订单类型' },
{
key: 'OrgId', value: '机构' },
]
const a = {
}
const dataa = datalist.map(item =>
a[item.key] = item.value
)
console.log(a);
const b = {
}
datalist.forEach(v => {
b[v.key] = v.value
})
console.log(b);
const c = {
}
for (const key in datalist) {
c[datalist[key].key] = datalist[key].value
}
console.log(c);
const d = datalist.reduce((ite, v, i) => {
console.log(ite);
console.log(v);
ite[v.key] = v.value
return ite
}, {
})
console.log(d);
3. 开关简化调用函数
switch (data) {
case 1: test1()
break;
case 2:test2()
break;
case 3: test3()
break;
}
var data={
1:test1,
2:test2,
3:test3
}
data[Type]&&data[Type]()
4 简化if判断
4.1 基本简化一(一元判断)
let onButtonClick = (status) => {
if (status == 1) {
sendLog('processing')
jumpTo('IndexPage')
} else if (status == 2) {
sendLog('fail')
jumpTo('FailPage')
} else if (status == 3) {
sendLog('fail')
jumpTo('FailPage')
} else if (status == 4) {
sendLog('success')
jumpTo('SuccessPage')
} else if (status == 5) {
sendLog('cancel')
jumpTo('CancelPage')
} else {
sendLog('other')
jumpTo('Index')
}
}
const actions = {
'1': ['processing', 'IndexPage'],
'2': ['fail', 'FailPage'],
'3': ['fail', 'FailPage'],
'4': ['success', 'SuccessPage'],
'5': ['cancel', 'CancelPage'],
'default': ['other', 'Index'],
}
let onButtonClickoptimize = (status) => {
let action = actions[status] || actions['default'],
logName = action[0],
pageName = action[1]
sendLog(logName)
jumpTo(pageName)
}
const actionsThree= new Map([
[1, ['processing', 'IndexPage']],
[2, ['fail', 'FailPage']],
[3, ['fail', 'FailPage']],
[4, ['success', 'SuccessPage']],
[5, ['cancel', 'CancelPage']],
['default', ['other', 'Index']]
])
const onButtonClickThree = (status) => {
let action = actionsThree.get(status) || actionsThree.get('default')
sendLog(action[0])
jumpTo(action[1])
}
4.2 简化二(多元判断)
const onButtonClick = (status, identity) => {
if (identity == 'guest') {
if (status == 1) {
} else if (status == 2) {
} else if (status == 3) {
} else if (status == 4) {
} else if (status == 5) {
} else {
}
} else if (identity == 'master') {
if (status == 1) {
} else if (status == 2) {
} else if (status == 3) {
} else if (status == 4) {
} else if (status == 5) {
} else {
}
}
}
const actions = new Map([
['guest_1', () => {
}],
['guest_2', () => {
}],
['guest_3', () => {
}],
['guest_4', () => {
}],
['guest_5', () => {
}],
['master_1', () => {
}],
['master_2', () => {
}],
['master_3', () => {
}],
['master_4', () => {
}],
['master_5', () => {
}],
['default', () => {
}],
])
const onButtonClickSecond = (identity, status) => {
let action = actions.get(`${
identity}_${
status}`) || actions.get('default')
action.call(this)
}
4.3 二维数组简化
function getUserDescribe(name) {
if (name === "小刘") {
console.log("刘哥哥");
} else if (name === "小红") {
console.log("小红妹妹");
} else if (name === "陈龙") {
console.log("大师");
} else if (name === "李龙") {
console.log("师傅");
} else if (name === "大鹏") {
console.log("恶人");
} else {
console.log("此人比较神秘!");
}
}
function getUserDescribe(name) {
const describeForNameMap = {
小刘: () => console.log("刘哥哥"),
小红: () => console.log("小红妹妹"),
陈龙: () => console.log("大师"),
李龙: () => console.log("师傅"),
大鹏: () => console.log("恶人"),
};
describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");
}
getUserDescribe('小红')
function getUserDescribe(name) {
if (name.length > 3) {
console.log("名字太长");
} else if (name.length < 2) {
console.log("名字太短");
} else if (name[0] === "陈") {
console.log("小陈");
} else if (name[0] === "李" && name !== "李鹏") {
console.log("小李");
} else if (name === "李鹏") {
console.log("管理员");
} else {
console.log("此人比较神秘!");
}
}
function getUserDescribe(name) {
const describeForNameMap = [
[
(name) => name.length > 3,
() => console.log("名字太长")
],
[
(name) => name.length < 2,
() => console.log("名字太短")
],
[
(name) => name[0] === "陈",
() => console.log("小陈")
],
[
(name) => name === "大鹏",
() => console.log("管理员")
],
[
(name) => name[0] === "李" && name !== "李鹏",
() => console.log("小李"),
],
];
const getDescribe = describeForNameMap.find((item) => item[0](name));
getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");
}
getUserDescribe('大鹏')
const describeForNameMap = {
小刘: () => console.log("刘哥哥"),
小红: () => console.log("小红妹妹"),
陈龙: () => console.log("大师"),
李龙: () => console.log("师傅"),
大鹏: () => console.log("恶人"),
};
function getUserDescribe(name) {
describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");
}
const describeForNameMap = [
[
(name) => name.length > 3,
() => console.log("名字太长")
],
[
(name) => name.length < 2,
() => console.log("名字太短")
],
[
(name) => name[0] === "陈",
() => console.log("小陈")
],
[
(name) => name === "大鹏",
() => console.log("管理员")
],
[
(name) => name[0] === "李" && name !== "李鹏",
() => console.log("小李"),
],
];
function getUserDescribe(name) {
const getDescribe = describeForNameMap.find((item) => item[0](name));
getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");
}
参考 一元与二元简化
八种简短开发
有条件地为对象添加属性
const isSalary = true
const bankEmployee = {
id: 1,
name: 'Ikun'
}
if (isSalary) {
bankEmployee.salary = 3000
}
console.log(bankEmployee);
const bankEmployeeList = {
id: 1,
name: 'Ikun',
...( isSalary && {
salary: 5000}
)}
console.log(bankEmployeeList);
console.log(bankEmployeeList.name);
使用对象中的动态属性
let propertyName = "body";
let paragraph = {
id: 1,
};
paragraph[propertyName] = "other stringy";
console.log(paragraph)
let propertyName = "body";
let paragraph = {
id: 1,
[propertyName] : "other stringy"
};
console.log(paragraph)
对象中的参数替换
const employee = {
id: 1,
name: 'Raj',
salary: 3000
}
const doubleSalary = (key, value) => key === 'salary' ? value * 2 : value
const Result =JSON.parse( JSON.stringify(employee, doubleSalary));
console.log(Result.name);
console.log(typeof Result);