JS一些小知识点

一、|| 运算符

```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).

另外这样用的好处

之前第98行的drawFeature方法执行后的feature是用new promise对象里的reslolve进行抛出进行值的获取的，需要在90行里通过then进行接收，上面这种方式和之前处理方式有些区别，直接在drawFeature的callback函数里调用drawCallBack，boxQuery里处理后可以保证调用空间搜索的时候已经获取到了wkt等数据