一、|| 运算符
```plain this.ctx.body = { type: type || 0, // ||在此处用法用于默认值填充,判断是否传参或该值是否存在,如果不存在就使用||后买你的值作为默认值 code: code || '0', msg: msg || 'SUCCESS', data: data || {}, ...others }; ```二、trim() 方法
作用:去除字符串的头尾空格:var str = " Runoob ";
console.log(str.trim()); // Runoob
三、Object.keys()
1、语法
Object.keys(obj)参数:要返回其枚举自身属性的对象
返回值:一个表示给定对象的所有可枚举属性的字符串数组
2、处理对象,返回可枚举的属性数组
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}Object.keys(person) // [“name”, “age”, “address”,“getName”]
3、处理数组,返回索引值数组
let arr = [1,2,3,4,5,6]Object.keys(arr) // [“0”, “1”, “2”, “3”, “4”, “5”]
4、处理字符串,返回索引值数组
let str = "saasd字符串"Object.keys(str) // [“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”]
5、常用技巧
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}Object.keys(person).map((key)=>{
person[key] // 获取到属性对应的值,做一些处理
})
6、Object.values()和Object.keys()是相反的操作,把一个对象的值转换为数组
四、判断对象是否包含某个属性的几种方法
1、最简单的方法,就是使用“!==”进行判断,这种方法在工作中很常见,可以看出该方法可以判断继承来的属性。
```plain 1. let obj = { x: 1 }; 2. obj.x !== undefined; // true 有x属性 3. obj.y !== undefined; // false 无y属性 4. obj.toString !== undefined; // true 从Object继承toString属性 ```2、使用 in 运算符,in 的语法是: attr in obj , 同样,该表达式也返回一个布尔值。
```plain 1. let obj = { x: 1 }; 2. 'x' in obj; // true 3. 'y' in obj; // false 4. 'toString' in obj; // true ```in运算符语法很简单,效果跟undefined是相同的,与undefined不同的是,in可以区分存在但值为undefined的属性。话不多说,看代码:
1. let obj = { x: undefined };
2. obj.x !== undefined; // false
3. 'x' in obj; // true
可以看出如果属性的值为undefined的时候,使用 !== 的方法就不奏效了,所以在工作中需要注意一下这一块。
3、对象的 hasOwnProperty() 方法也可以检测指定属性名是否在对象内,同样返回是布尔值, 当检测属性为自有属性(非继承)的时候返回true。
```plain 1. let obj = { x: 1, abc: 2 }; 2. let a = 'a'; 3. let b = 'bc'; 4. obj.hasOwnProperty('x'); // true 包含 5. obj.hasOwnProperty('y'); // false 不包含 6. obj.hasOwnProperty('toString'); // false 继承属性 7. obj.hasOwnProperty(a + b); // true 判断的是属性abc ```in 运算符和 hasOwnProperty() 的区别就在于 in 运算符可以判断来自继承的属性,而hasOwnProperty() 不能。针对这一点在工作中加以运用还是很有帮助的。
4、propertyIsEnumerable() 是hasOwnProperty() 的增强版,这个方法的用法与hasOwnProperty()相同,但当检测属性是自有属性(非继承)且这个属性是可枚举的,才会返回true。
那么什么是可枚举属性?通俗的讲就是可以通过for...in遍历出来的属性就是可枚举属性。通常由JS代码创建出来的属性都是可枚举的。看一下代码也许更方便理解:1. let obj = Object.create({x: 1}); // 通过create()创建一个继承了X属性的对象obj
2. obj.propertyIsEnumerable('x'); // false x是继承属性
3. obj.y = 1; // 给obj添加一个自有可枚举属性y
4. obj.propertyIsEnumerable('y'); // true
5. Object.prototype.propertyIsEnumerable('toString'); // false 不可枚举
五、startsWith()
startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。该方法对大小写敏感语法
string . startsWith ( searchvalue , start )参数值
| 参数 | 描述 | | :--- | :--- | | _searchvalue_ | 必需,要查找的字符串。 | | _start_ | 可选,查找的开始位置,默认为 0。 |var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6); // 输出结果 true
六、cb&&cb(res)
```plain // mixin方法 drawHandle(type) { this.mapApi.closeInfoWindow(); this.mapApi.drawFeature({ editable: false, layerId: "resSpaceLayer", isSingle: true, type, style: { fillColor: "brand", fillOpacity: 0.3, strokeColor: "brand", strokeWidth: 3, strokeOpacity: 0.8, }, buffer: 1000, //缓冲区半径 radius: 100, //辐射范围 callback: async (feature, center, radius) => { this.bbox = feature.bbox; this.wkt = feature.wkt; console.log("change.."); this.drawCallBack(); }, cancelback: () => { //取消绘制 }, }); }, async boxQuery(cb) { const params = { treeCode: 0, extraParamStr: "", authSearch: "CAMERA,CROSS", resourceType: "CAMERA,CROSS", bbox: this.bbox, cluster: false, width: 1920, height: document.body.offsetHeight, geometryType: "Polygon", page: true, start: 0, limit: 20000, wkt: this.wkt, }; const res = await querySpace(params); if (res && res.code === "0") { if (!res.data.CAMERA.items.length && !res.data.CROSS.items.length) { this.$msgbox({ title: "提示", type: "warning", message: "框选区域没有检测到点位!", }).then(() => { this.clear(); }); return; } if (res.data.CAMERA) { this.tableData = res.data.CAMERA.items; res.data.CAMERA.items.forEach((item) => { if ( !this.tableData.find( (camera) => camera.indexCode === item.indexCode ) ) { this.midData.push(item); } }); } if (res.data.CROSS) { this.tableDataCross = res.data.CROSS.items; res.data.CROSS.items.forEach((item) => { if ( !this.tableDataCross.find( (cross) => cross.indexCode === item.indexCode ) ) { this.midDataCross.push(item); } }); } } cb && cb(res); }, },// 页面调用地方
spaceSearch(type) {
this.showcheckpolyline(type);
this.drawHandle(type);
// this.drawHandle(type).then(feature => {
// this.bbox = feature.bbox;
// this.wkt = feature.wkt;
// this.querySpace();
// });
},
// drawHandle(type) {
// return new Promise(resolve => {
// this.mapApi.drawFeature({
// layerId: ‘myFeatures’,
// editable: false,
// isSingle: true,
// type,
// buffer: 1000, // 缓冲区半径
// radius: 100, // 辐射范围
// callback: feature => {
// resolve(feature);
// // console.log(feature, 222);
// // // 绘制完成
// // this.addInfoWindow(feature.lonlat);
// },
// click: feature => {
// // this.addInfoWindow(feature.lonlat);
// }
// });
// });
// },
drawCallBack() {
this.boxQuery(res => {
if (this.isResValid(res)) {
this.data = res.data;
this.dialogVisible = true;
this.cameraName = ‘’;
} else {
this.dialogVisible = false;
this.cameraName = ‘’;
}
});
},
第60行这里是一个箭头函数,res是boxQuery的async函数返回的数据,然后作为参数传到箭头函数里,
cb && cb(res);相当于if( cb ){ cb(res);}
cb && cb(time)是为了判断cb是否存在, 避免出现function undefined error. 假设代码为:
```plain
function delay(time, cb) {
setTimeout(function() {
cb(time)
}, time)
}
如果执行delay(time), 此时函数的parameter没有cd这个function, 那么将会出现 (因为cb这个function不存在):
TypeError: undefined is not a function
但是如果第四行为:
cb && cb(time);
那么函数先会判断cb这个function到底存不存在, 如果存在则执行cb(time), 此时, 即使我们不定义cb这个function, 运行delay(time), 也不会有error产生, 当然也不会运行cb(time).