JavaScript简短开发与if优化

文章目录

- [1. 删除|过滤对象中部分属性](#1. 删除|过滤对象中部分属性)
- [2. 重数组对象中取出key和value组成新的对象](#2. 重数组对象中取出key和value组成新的对象)
- [3. 开关简化调用函数](#3. 开关简化调用函数)
- [4 简化if判断](#4 简化if判断)
- - [4.1 基本简化一（一元判断）](#4.1 基本简化一（一元判断）)
  - [4.2 简化二（多元判断）](#4.2 简化二（多元判断）)
  - [4.3 二维数组简化](#4.3 二维数组简化)
- 有条件地为对象添加属性
- 使用对象中的动态属性
- 对象中的参数替换

1. 删除|过滤对象中部分属性

javascript 复制代码

let className={
	age:'18',
	name:'zhansan',
	sex:'nan'
}
// first
delete className.age
console.log(className); //{ name: 'zhansan', sex: 'nan' }
// second
const params=(({name,sex})=>({name,sex}))(className)
console.log(params);  // {name:'zhansan',sex:'nan'}

// thord
let {age,...param}=className
console.log(param); // // {name:'zhansan',sex:'nan'}

2. 重数组对象中取出key和value组成新的对象

javascript 复制代码

	const datalist = [
			{ key: 'TimeWeiDu', value: '时间维度' },
			{ key: 'TranType', value: '交易类型' },
			{ key: 'OrderType', value: '订单类型' },
			{ key: 'OrgId', value: '机构' },
		]
		// first
		const a = {}
		const dataa = datalist.map(item =>
			a[item.key] = item.value
		)
		console.log(a);  // {TimeweiDu:时间维度...}
		// second
		const b = {}
		datalist.forEach(v => {
			b[v.key] = v.value
		})
		console.log(b); // {TimeweiDu:时间维度...}
		// third
		const c = {}
		for (const key in datalist) {

			c[datalist[key].key] = datalist[key].value
		}
		console.log(c); // {TimeweiDu:时间维度...}

		// reduce
		// ite 先前元素的值 , v当前元素的值 ，i索引
		const d = datalist.reduce((ite, v, i) => {
			console.log(ite);
			console.log(v);
			ite[v.key] = v.value
			return ite
		}, {})
		console.log(d);  // {TimeweiDu:时间维度...}

3. 开关简化调用函数

java 复制代码

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 基本简化一（一元判断）

java 复制代码

/**
 * 按钮点击事件  根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
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')
	}
}

/**
* @description:
* @param {type} 简化写法一
* @return: 
*/

const actions = {
	'1': ['processing', 'IndexPage'],
	'2': ['fail', 'FailPage'],
	'3': ['fail', 'FailPage'],
	'4': ['success', 'SuccessPage'],
	'5': ['cancel', 'CancelPage'],
	'default': ['other', 'Index'],
}
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
let onButtonClickoptimize = (status) => {
	let action = actions[status] || actions['default'],
		logName = action[0],
		pageName = action[1]
	sendLog(logName)
	jumpTo(pageName)
}


/**
* @description: 优化方案3
* @param {type}  一个对象的键只能是字符串或者Symbols，但一个Map的键可以是任意值。
可以通过size属性很容易地得到一个Map的键值对个数，而对象的键值对个数只能手动确认。
* @return: 
*/

const actionsThree= new Map([
	[1, ['processing', 'IndexPage']],
	[2, ['fail', 'FailPage']],
	[3, ['fail', 'FailPage']],
	[4, ['success', 'SuccessPage']],
	[5, ['cancel', 'CancelPage']],
	['default', ['other', 'Index']]
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClickThree = (status) => {
	let action = actionsThree.get(status) || actionsThree.get('default')
	sendLog(action[0])
	jumpTo(action[1])
}

4.2 简化二（多元判断）

javascript 复制代码

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 * @param {string} identity 身份标识：guest客态 master主态
 */
const onButtonClick = (status, identity) => {
	if (identity == 'guest') {
		if (status == 1) {
			//do sth
		} else if (status == 2) {
			//do sth
		} else if (status == 3) {
			//do sth
		} else if (status == 4) {
			//do sth
		} else if (status == 5) {
			//do sth
		} else {
			//do sth
		}
	} else if (identity == 'master') {
		if (status == 1) {
			//do sth
		} else if (status == 2) {
			//do sth
		} else if (status == 3) {
			//do sth
		} else if (status == 4) {
			//do sth
		} else if (status == 5) {
			//do sth
		} else {
			//do sth
		}
	}
}


/** 优化
* @description:把两个条件拼接成字符串，并通过以条件拼接字符串作为键，
以处理函数作为值的Map对象进行查找并执行，这种写法在多元条件判断时候尤其好用。
* @param {type} 
* @return: 
*/

const actions = new Map([
	['guest_1', () => {/*do sth*/ }],
	['guest_2', () => {/*do sth*/ }],
	['guest_3', () => {/*do sth*/ }],
	['guest_4', () => {/*do sth*/ }],
	['guest_5', () => {/*do sth*/ }],
	['master_1', () => {/*do sth*/ }],
	['master_2', () => {/*do sth*/ }],
	['master_3', () => {/*do sth*/ }],
	['master_4', () => {/*do sth*/ }],
	['master_5', () => {/*do sth*/ }],
	['default', () => {/*do sth*/ }],
])

/**
 * 按钮点击事件
 * @param {string} identity 身份标识：guest客态 master主态
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 */
const onButtonClickSecond = (identity, status) => {
	let action = actions.get(`${identity}_${status}`) || actions.get('default')
	action.call(this)
}

4.3 二维数组简化

javascript 复制代码

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("此人比较神秘！");
	}
}


/**
* @description:这些判断条件作为一个属性写到对象describeForNameMap 中去，这些属性对应的值就是条件成立后的处理函数。
只需通过getUserDescribe函数接收到的参数去获取describeForNameMap对象中对应的值，
如果该值存在就运行该值（因为值是一个函数）。
* @param {type} 
* @return: 
*/

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("此人比较神秘！");
	}
}

/**
* @description:二维数组优化
* @param {type} 定义了一个describeForNameMap数组，数组内的每一个元素代表一个判断条件与其执行函数的集合（也是一个数组），
之后通过数组的find方法查找describeForNameMap数组中符合判断条件的子数组即可。
* @return: 
*/
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("此人比较神秘！");
}

参考一元与二元简化
 八种简短开发

有条件地为对象添加属性

javascript 复制代码

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);

使用对象中的动态属性

javascript 复制代码

// nooby
let propertyName = "body";
let paragraph = {
    id: 1,
};
paragraph[propertyName] = "other stringy";
// { id: 1, body: 'other stringy' }
console.log(paragraph)

// pro
let propertyName = "body";
let paragraph = {
    id: 1,
    [propertyName] : "other stringy"
};
// { id: 1, body: 'other stringy' }
console.log(paragraph)

对象中的参数替换

javascript 复制代码

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);