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等数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/982724.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【孟德尔随机化】PhenoScanner不能用的,替代方法

https://ldlink.nih.gov/?tabldtrait 目前PhenoScanner数据库限制使用,可选择LDlink数据库替代。 可以在网页下载变异数据 还有就是library(gwasrapidd)包提取 # remotes::install_github("ramiromagno/gwasrapidd") library(gwasrapidd)# 官方文档写单…

ALG(Alloy+Loki+Grafana)轻量级日志系统

ALG(AlloyLokiGrafana)轻量级日志系统 前提要求 GrafanaMinioNginxPrometheus Grafana日志收集系统旧版是PLG(ProtailLokiGrafana), Protail收集日志, Loki存储, Grafana展示, 后续的Protail不维护了, Grafana推出了Alloy代替Pritial, 除了收集日志外, 还集成管理Prometheus各种…

捣鼓180天,我写了一个相册小程序

🙋为什么要做土著相册这样一个产品? ➡️在高压工作之余,我喜欢浏览B站上的熊猫幼崽视频来放松心情。有天在家族群里看到了大嫂分享的侄女卖萌照片,同样感到非常解压。于是开始翻阅过去的聊天记录,却发现部分图片和视…

JDK ZOOKEEPER KAFKA安装

JDK17下载安装 mkdir -p /usr/local/develop cd /usr/local/develop 将下载的包上传服务器指定路径 解压文件 tar -zxvf jdk-17.0.14_linux-x64_bin.tar.gz -C /usr/local/develop/ 修改文件夹名 mv /usr/local/develop/jdk-17.0.14 /usr/local/develop/java17 配置环境变量…

5c/c++内存管理

1. C/C内存分布 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof(int) * 4);i…

Tomcat-web服务器介绍以及安装部署

一、Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Tomcat服务器是一个免费的开放源代码的Web应用服务器,属于轻量级应用…

国产编辑器EverEdit - 超多样式设置

1 设置-编辑-样式 1.1 设置说明 1.1.1 折叠样式 默认为箭头,折叠样式选项如下: 箭头: 矩形和线条 五边形 圆形图标 1.1.2 光标样式 光标用于指示当前用户输入位置,光标样式选项如下: 默认 纤细 字宽 …

【DeepSeek】5分钟快速实现本地化部署教程

一、快捷部署 (1)下载ds大模型安装助手,下载后直接点击快速安装即可。 https://file-cdn-deepseek.fanqiesoft.cn/deepseek/deepseek_28348_st.exe (2)打开软件,点击立即激活 (3)选…

2025系统架构师(一考就过):(2016-2017)案例+论文历年真题及解析系列二

24、管道-过滤器风格 和 数据仓库风格 对比(2016真题) 比较因素管道-过滤器风格数据仓储风格交互方式顺序结构或有限的循环结构星型数据结构数据流文件或模型控制结构数据流驱动业务功能驱动扩展方法接口适配模型适配25、用例及其关系、类及其关系(2016真题) 用例是对系统…

Artec Leo+Ray II 三维扫描仪成功为VR展数字化30吨重设备-沪敖3D

挑战:在贸易展上展示重达30吨的机械设备,同时克服设备搬运和展示的难题,减轻物流负担。。 解决方案:Artec Leo、Artec Ray II、Artec Studio、Blender、Unity、Microsoft HoloLens、HTC VIVE PRO 效果:在虚拟展厅中&am…

Flink深入浅出之01:应用场景、基本架构、部署模式

Flink 1️⃣ 一 、知识要点 📖 1. Flink简介 Apache Flink — Stateful Computations over Data StreamsApache Flink 是一个分布式大数据处理引擎,可对有界数据流和无界数据流进行有状态的计算。Flink 能在所有常见集群环境中运行,并能以…

Docker新手入门(持续更新中)

一、定义 快速构建、运行、管理应用的工具。 Docker可以帮助我们下载应用镜像,创建并运行镜像的容器,从而快速部署应用。 所谓镜像,就是将应用所需的函数库、依赖、配置等应用一起打包得到的。 所谓容器,为每个镜像的应用进程创建…

DeepSeek R1学习入门

一、什么是 DeepSeek R1 2025.01.20 DeepSeek-R1 发布,DeepSeek R1 是 DeepSeek AI 开发的第一代推理模型,擅长复杂的推理任务,官方对标OpenAI o1正式版。适用于多种复杂任务,如数学推理、代码生成和逻辑推理等。 根据官方信息D…

[数据库笔记(二)]表的增删改查(基础)

目录 前言 CRUD 新增 单行数据全列插入 ​编辑 多行数据指定列插入 查询 全列查询 指定列查询 查询字段为表达式 别名&#xff1a;AS 别名去重&#xff1a;distinct 排序&#xff1a;order by 条件查询&#xff1a;where 运算符 和 <>的区别 between...…

Redis——缓存穿透、击穿、雪崩

缓存穿透 什么是缓存穿透 缓存穿透说简单点就是大量请求的 key 根本不存在于缓存中&#xff0c;导致请求直接到了数据库上&#xff0c;根本没有经过缓存这一层。举个例子&#xff1a;某个黑客故意制造我们缓存中不存在的 key 发起大量请求&#xff0c;导致大量请求落到数据库…

网络安全ctf试题 ctf网络安全大赛真题

MISC 1 签到 难度 签到 复制给出的flag输入即可 2 range_download 难度 中等 flag{6095B134-5437-4B21-BE52-EDC46A276297} 0x01 分析dns流量&#xff0c;发现dns && ip.addr1.1.1.1存在dns隧道数据&#xff0c;整理后得到base64: cGFzc3dvcmQ6IG5zc195eWRzIQ 解…

蓝桥备赛(11)- 数据结构、算法与STL

一、数据结构 1.1 什么是数据结构&#xff1f; 在计算机科学中&#xff0c;数据结构是一种 数据组织、管理和存储的格式。它是相互之间存在一种 或多种特定关系的数据元素的集合。 ---> 通俗点&#xff0c;数据结构就是数据的组织形式 &#xff0c; 研究数据是用什么方…

VsCode + EIDE + OpenOCD + STM32(野火DAP) 开发环境配置

VsCode EIDE OpenOCD STM32(野火DAP) 开发环境配置 接受了新时代编辑器的我&#xff0c;实在受不了Keil的上古编辑页面&#xff0c;周树人说过&#xff1a;由奢入俭难&#xff0c;下面我们一起折腾一下开源软件Vscode&#xff0c; 用以开发51和STM32&#xff0c;有错误之处&…

esp32驱动带字库芯片TFT屏幕

前言 学习esp32单片机开发&#xff0c;前段时间在网上买了一块2.0寸TFT屏幕。 长这个样子&#xff0c;这个屏幕带汉字字库的硬件模块。我仔细看了一下这个字库模块上面写的字是25Q32FVSIG 1336 文档 卖家也发来了开发文档&#xff0c;是个doc文档&#xff0c;张这个样子。 开…

短分享-Flink图构建

一、背景 通过简单的书写map、union、keyby等代码&#xff0c;Flink便能构建起一个庞大的分布式计算任务&#xff0c;Flink如何实现的这个酷炫功能呢&#xff1f;我们本次分享Flink做的第一步&#xff0c;将代码解析构建成图 源码基于Flink 2.10&#xff0c;书籍参考《Flink核…