1 数组和对象的 判断
一般我们用type of 去判断类型
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object // null是一个空对象
所有type of 是判断不了数组和对象的
那么我们一般用什么去做判断哪 还有一种方法 但是有缺陷
我们有时也会用 instance of 判断
instanceof 我们用来判断要检测对象的原型链上是否有某个函数的protoType 属性
console.log(a instanceof Array); // true []
console.log(a instanceof Object); // true 数组也是对象 {}
但是它只有一个 全局的作用域 如果在网页中有多个 iframe 我们就会有多个Array的构造函数 这样判断返回 false
我们也会在代码里也会遇到这样的情况
console.log(a.constructor === Array); // true 只有数组的constructor是Array
console.log(b.constructor === Object); // 只有对象的constructor是 Object
这种方法时可用的
我们也经常会用 Array.isArray 来判断数组
console.log(Array.isArray([])); // true
再也一种方法 那就是
Object.prototype.toString.call(name) 这种方法是可以区分数组和对象，并且不会对你有什么后顾之忧
console.log(Object.prototype.toString.call([])==='[object Array]') //true
console.log(Object.prototype.toString.call({})==='[object Object]') // true
综上所述 我们常用
数组：Array.isArray() Object.prototype.toString.call([])
对象 Object.contructor = Object
Object.prototype.toString.call({}) 去判断数组和对象
学会 数组和对象的类型判断了 我们学会第一步了
2 优雅的代码的编写
我们在实际业务中 免不了对数组和对象进行处理，我们要学会利用简单的办法 抽象出来方法来。我们可能在代码中会写很多 if else switch case 这些复杂的判断 这个时候我们大多用对象枚举的方式和map 的方式去优化他们，（这个我会专门写一篇去告诉大家如何优化），特别是一些 status 状态的判断，订单类型（购买中，已完成，已退款），交通（自行车，汽车，地铁）等等，我们都可以把它们作为枚举对象，用的时候直接枚举取值就行了。这样我们项目里就会有很多枚举的对象，那么我们代码既可以抽象出来一个方法共同调用
举个例子说明一下 我们获取 sendStatus 需要在页面上显示出来汉字，
我们一般用 if else 和switch case 处理
switch (sendStatus) {
case 0:
item.statusText = '待审批';
break;
case 1:
item.statusText = '已审批';
break;
case 2:
item.statusText = '已拒绝';
break;
default:
item.activationStatusText = '';
break;
}
此时页面中肯定有很多类似的处理，代理会非常臃肿，优雅的写法那么我们可以做一个enum的js
统一把它们做成枚举值进行处理
static sendStatus = {
0: '待审批',
1: '已审批',
2: '已拒绝',
3: '发券完成',
4: '发券异常',
}
static supply = {
supInfo0: '0',
supInfo1: '1',
supInfo2: '2',
supInfo3: '3'
}
我们取值的时候直接用 sendStatus[key] supply[key] 这样去处理
但是这个时候我们是不是可以更高级一点 把 我们的枚举对象和 key 都传进一个方法里，让方法去处理哪，我们想一下是可以的
* 从枚举对象中获取展示文本
* @param {Object} enumItem 枚举对象
* @param {String|Array<String>} values 值或值集合
* @param {String} delimiter 分隔符
* @param {String} defaultValue 如果值是null，则显示该默认值
* @returns {String} 返回展示的文本
*/
getText(enumItem = {}, values = '', delimiter = ', ', defaultValue = '') {
if (!Array.isArray(values)) {
values = [values];
}
// 是否是Object，因为enumItem有默认值，不会出现undefined
if (enumItem.constructor !== Object) {
return values.join(delimiter);
}
return values
.map(key => {
return enumItem[key] || ç || key;
})
.join(delimiter);
}
上面这个方法 我们支持 传入values 值或值集合，如果我们传入字符串， values = [values];我们把它转化成数组，分隔符让我们最后 组装数据用的分隔符，defaultValue使我们的默认值，这样在我们的项目中统一管理我们的状态，代码是否一下子清晰了许多了哪
3 处理数组对象的去重组装
这是下面一个业务我需要判端我当前的数组对象中没有和勾选的列表的数据一致的数据我才可以添加数据
直接看代码
const arr = []
selectOnClick(selectedRows = []) {
selectedRows.forEach((a, index) => {
const isInclude = arr.some(b => a.vCode === b.vCode);
if (!isInclude) {
arr.push(selectedRows[index]);
}
});
}
这样我们就很好地处理了业务耦合关系
网友评论