免费行情网站大全搜狐网,衡阳的房地产网站建设,网页设计学习心得,电子商务网站前台建设常用的技术一、|| 运算符 plain this.ctx.body { type: type || 0, // ||在此处用法用于默认值填充#xff0c;判断是否传参或该值是否存在#xff0c;如果不存在就使用||后买你的值作为默认值 code: code || 0, msg: msg || SUCCESS, data: data || {}, ...others };
二、trim() 方…一、|| 运算符 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六、cbcb(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).
另外这样用的好处 之前第98行的drawFeature方法执行后的feature是用new promise对象里的reslolve进行抛出进行值的获取的需要在90行里通过then进行接收上面这种方式和之前处理方式有些区别直接在drawFeature的callback函数里调用drawCallBackboxQuery里处理后可以保证调用空间搜索的时候已经获取到了wkt等数据
