Desarrollo breve de JavaScript y si optimización.

1. Eliminar | filtrar algunos atributos en el objeto

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. Saque la clave y el valor del objeto de matriz para formar un nuevo objeto.

	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. Switch simplifica las funciones de llamada

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 Simplifique el juicio

4.1 Simplificación básica (juicio univariado)

/**
 * 按钮点击事件  根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面
 * @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 Simplificación 2 (Múltiples Sentencias)

/**
 * 按钮点击事件
 * @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 Simplificación de matrices bidimensionales

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

Ocho breves desarrollos con referencia a simplificaciones unarias y binarias

Agregar propiedades condicionalmente a los objetos

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

Usar propiedades dinámicas en objetos

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

Sustitución de parámetros en objetos.

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