一、|| 運(yùn)算符

```plain this.ctx.body = { type: type || 0, // ||在此處用法用于默認(rèn)值填充，判斷是否傳參或該值是否存在，如果不存在就使用||后買你的值作為默認(rèn)值 code: code || '0', msg: msg || 'SUCCESS', data: data || {}, ...others }; ```

二、trim() 方法

作用：去除字符串的頭尾空格:

var str = "       Runoob        ";
console.log(str.trim()); // Runoob

三、Object.keys()

1、語(yǔ)法

Object.keys(obj)

參數(shù)：要返回其枚舉自身屬性的對(duì)象

返回值：一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組

2、處理對(duì)象，返回可枚舉的屬性數(shù)組

let person = {name:"張三",age:25,address:"深圳",getName:function(){}}

Object.keys(person) // [“name”, “age”, “address”,“getName”]

3、處理數(shù)組，返回索引值數(shù)組

let arr = [1,2,3,4,5,6]

Object.keys(arr) //?[“0”, “1”, “2”, “3”, “4”, “5”]

4、處理字符串，返回索引值數(shù)組

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] // 獲取到屬性對(duì)應(yīng)的值，做一些處理

})

6、Object.values()和Object.keys()是相反的操作，把一個(gè)對(duì)象的值轉(zhuǎn)換為數(shù)組

四、判斷對(duì)象是否包含某個(gè)屬性的幾種方法

1、最簡(jiǎn)單的方法，就是使用“!==”進(jìn)行判斷，這種方法在工作中很常見，可以看出該方法可以判斷繼承來(lái)的屬性。

```plain 1. let obj = { x: 1 }; 2. obj.x !== undefined; // true 有x屬性 3. obj.y !== undefined; // false 無(wú)y屬性 4. obj.toString !== undefined; // true 從Object繼承toString屬性 ```

2、使用 in 運(yùn)算符，in 的語(yǔ)法是： attr in obj?， 同樣，該表達(dá)式也返回一個(gè)布爾值。

```plain 1. let obj = { x: 1 }; 2. 'x' in obj; // true 3. 'y' in obj; // false 4. 'toString' in obj; // true ```

in運(yùn)算符語(yǔ)法很簡(jiǎn)單，效果跟undefined是相同的，與undefined不同的是，in可以區(qū)分存在但值為undefined的屬性。話不多說(shuō)，看代碼：

1. let obj = { x: undefined };
2. obj.x !== undefined;            // false
3. 'x' in obj;                     // true

可以看出如果屬性的值為undefined的時(shí)候，使用 !== 的方法就不奏效了，所以在工作中需要注意一下這一塊。

3、對(duì)象的 hasOwnProperty() 方法也可以檢測(cè)指定屬性名是否在對(duì)象內(nèi)，同樣返回是布爾值， 當(dāng)檢測(cè)屬性為自有屬性(非繼承)的時(shí)候返回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 運(yùn)算符和 hasOwnProperty() 的區(qū)別就在于 in 運(yùn)算符可以判斷來(lái)自繼承的屬性，而hasOwnProperty() 不能。針對(duì)這一點(diǎn)在工作中加以運(yùn)用還是很有幫助的。

4、propertyIsEnumerable() 是hasOwnProperty() 的增強(qiáng)版，這個(gè)方法的用法與hasOwnProperty()相同，但當(dāng)檢測(cè)屬性是自有屬性(非繼承)且這個(gè)屬性是可枚舉的，才會(huì)返回true。

那么什么是可枚舉屬性？通俗的講就是可以通過(guò)for...in遍歷出來(lái)的屬性就是可枚舉屬性。通常由JS代碼創(chuàng)建出來(lái)的屬性都是可枚舉的。看一下代碼也許更方便理解：

1. let obj = Object.create({x: 1});                   // 通過(guò)create()創(chuàng)建一個(gè)繼承了X屬性的對(duì)象obj
2. obj.propertyIsEnumerable('x');                     // false x是繼承屬性
3. obj.y = 1;                                         // 給obj添加一個(gè)自有可枚舉屬性y
4. obj.propertyIsEnumerable('y');                     // true
5. Object.prototype.propertyIsEnumerable('toString'); // false 不可枚舉

五、startsWith()

startsWith() 方法用于檢測(cè)字符串是否以指定的子字符串開始。如果是以指定的子字符串開頭返回 true，否則 false。該方法對(duì)大小寫敏感

語(yǔ)法

string . startsWith ( searchvalue , start )

參數(shù)值

| 參數(shù) | 描述 | | :--- | :--- | | _searchvalue_ | 必需，要查找的字符串。 | | _start_ | 可選，查找的開始位置，默認(rèn)為 0。 |

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6); // 輸出結(jié)果 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, //緩沖區(qū)半徑 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: "框選區(qū)域沒有檢測(cè)到點(diǎn)位！", }).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); }, },

// 頁(yè)面調(diào)用地方
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, // 緩沖區(qū)半徑
// 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行這里是一個(gè)箭頭函數(shù)，res是boxQuery的async函數(shù)返回的數(shù)據(jù)，然后作為參數(shù)傳到箭頭函數(shù)里，cb && cb(res);相當(dāng)于if（?cb ）{?cb(res);}cb && cb(time)是為了判斷cb是否存在, 避免出現(xiàn)function undefined error. 假設(shè)代碼為:```plain
function delay(time, cb) {setTimeout(function() {cb(time)}, time)
}

如果執(zhí)行delay(time), 此時(shí)函數(shù)的parameter沒有cd這個(gè)function, 那么將會(huì)出現(xiàn) (因?yàn)閏b這個(gè)function不存在):

TypeError: undefined is not a function

但是如果第四行為:

cb && cb(time);

那么函數(shù)先會(huì)判斷cb這個(gè)function到底存不存在, 如果存在則執(zhí)行cb(time), 此時(shí), 即使我們不定義cb這個(gè)function, 運(yùn)行delay(time), 也不會(huì)有error產(chǎn)生, 當(dāng)然也不會(huì)運(yùn)行cb(time).

另外這樣用的好處

之前第98行的drawFeature方法執(zhí)行后的feature是用new promise對(duì)象里的reslolve進(jìn)行拋出進(jìn)行值的獲取的，需要在90行里通過(guò)then進(jìn)行接收，上面這種方式和之前處理方式有些區(qū)別，直接在drawFeature的callback函數(shù)里調(diào)用drawCallBack，boxQuery里處理后可以保證調(diào)用空間搜索的時(shí)候已經(jīng)獲取到了wkt等數(shù)據(jù)