关于es7:ES使用

查数据有三种类型,准确查找,全文搜寻,聚合查找。 惯例应用:https://zhuanlan.zhihu.com/p/...

February 23, 2023 · 1 min · jiezi

关于es7:Elasticsearch的Mapping使用分析es7官方文档解读

@TOC 参考ES 7版本官网文档官网7.17文档 挑了一些我感觉重要的点总结如有舛误,欢送斧正 mapping是什么在ES里创立一个索引 PUT demo_index{ "mappings": { "dynamic": false "properties": { "demo_id": { "type": "text" } } }}下面的properties里定义了字段demo_id,它的类型是text。dynamic抉择了false阐明mapping不须要动静规定来匹配,这种状况下进行搜寻时和一般的关系型数据库搜寻十分相似。 mapping相似于数据库中的表构造定义,定义以下这些内容 定义字段名称定义字段数据类型字段、倒排索引的相干配置然而和比方mysql这样的数据相比还是有很多不同之处,搜寻的字段类型能够提前定义好,也能够不定义让ES来揣测,也可在搜寻的时候动静退出新字段。 GET /demo_index/_mapping查看mapping动静mapping如果你想应用动静mapping就将下面提到的dynamic字段设置为true或者runtime 默认动静mappingES容许直接插入文档,不须要提前定义类型、字段 ,当你查问的时候会主动揣测匹配显示进去。 curl -X PUT "localhost:9200/data/_doc/1?pretty" -H 'Content-Type: application/json' -d'{ "count": 5 }应用kibana的话间接PUT data/_doc/1 ... 就行自动检测类型和增加字段就是动静mapping,ES有默认的检测规定,咱们本人也能够定义本人的规定。 设计本人的mapping检测模板这一块比较复杂 match_mapping_type这个能够了解为依据字段默认检测进去的类型进行匹配 用的官网文档的案例:能够看到当默认检测进去的字段类型为integer时,将替换为long类型;如果检测进去的类型为text或者keyword类型,将会替换为string类型。 PUT demo_index{ "mappings": { "dynamic_templates": [ { "integers": { "match_mapping_type": "long", "mapping": { "type": "integer" } } }, { "strings": { "match_mapping_type": "string", "mapping": { "type": "text", "fields": { "raw": { "type": "keyword", "ignore_above": 256 } } } } } ] }}这张图是在默认检测下,从Json解析进去的数据类型和ES里的数据的对应关系。须要留神的是dynamic字段设置为true和runtime的对应关系是略有不同的。 ...

January 18, 2023 · 2 min · jiezi

关于es7:es常用命令

es数据结构的迁徙 1.命令cmd执行导mapping:./elasticdump --input=http://原服务器地址/索引 --output=http://新服务器地址/索引 --type=mapping 2.导数据导数据:./elasticdump --input=http://原服务器地址/索引 --output=http://新服务器地址/索引 --type=data3.备份索引数据./elasticdump --input=http://备份的服务器地址/索引 --output=C:\Users\clyyy\Desktop\北京云es\activities_mapping.json(备份的地址以及名称) --type=mappinges查用命令 (curl命令和控制面板殊途同归) -X :指定http的申请形式,有HEAD、GET、POST、PUT、DELETE -d :指定要传输的数据 -H :指定http的申请头信息 -u :用户名1.依据id查问文章详情 curl -XGET 'http://es地址/索引/索引/_search?pretty' -u elastic:用户名 -H "Content-Type:application/json" -d '{"query": {"match": {"id":"id值"}},"size": 20}'2.新建字段 curl -XGET 'http://地址/索引/索引/_mapping?pretty' -u elastic:用户名 -H "Content-Type:application/json" -d ' {"properties":{"字段名称":{"type":"类型"}}}3.依据id删除数据curl -POST 'http://地址/索引/_delete_by_query?pretty' -u elastic:用户名 -H "Content-Type:application/json" -d '{"query":{"term":{"_id":"id值"} }}'4.删除某个索引下的所有数据(不删除索引构造)curl -POST 'http://地址/索引/_delete_by_query?pretty' -u elastic:用户名 -H "Content-Type:application/json" -d '{"query": {"match_all": {} }}'

January 16, 2023 · 1 min · jiezi

关于es7:elasticsearch中的索引模版修改字段类型

索引模板是一种通知Elasticsearch在创立索引时如何配置索引的办法。在创立索引之前能够先配置模板,这样在创立索引(手动创立索引或通过对文档建设索引)时,模板设置将用作创立索引的根底。模板类型 模板有两种类型:索引模板和组件模板。组件模板是可重用的构建块,用于配置映射,设置和别名;它们不会间接利用于一组索引。索引模板能够蕴含组件模板的汇合,也能够间接指定设置,映射和别名。索引模板中的优先级可组合模板优先于旧模板。如果没有可组合模板匹配给定索引,则旧版模板可能仍匹配并被利用。如果应用显式设置创立索引并且该索引也与索引模板匹配,则创立索引申请中的设置将优先于索引模板及其组件模板中指定的设置。如果新数据流或索引与多个索引模板匹配,则应用优先级最高的索引模板。内置索引模板Elasticsearch具备内置索引模板,每个索引模板的优先级为100,实用于以下索引模式:logs-*-*metrics-*-*synthetics-*-*理论需要在logstash中的filter模块应用了uuid这个插件生成了一个随机的uuid,logstash再将日志发往elasticsearch,因为开发须要将uuid参加到elasticsearch的聚合中,这里补充elasticsearch中的text和keyword相干内容 text : 当一个字段是要被全文搜寻的,比方Email内容、产品描述,应该应用text类型。设置text类型当前,字段内容会被剖析,在生成倒排索引以前,字符串会被分析器分成一个一个词项。text类型的字段不用于排序,很少用于聚合。 keyword: keyword类型实用于索引结构化的字段,比方email地址、主机名、状态码和标签。如果字段须要进行过滤(比方查找已公布博客中status属性为published的文章)、排序、聚合。keyword类型的字段只能通过准确值搜寻到。 目标:须要将uuid的类型指定成keyword查到索引用的是哪个索引模板,或者新建一个索引模版制订用于哪个索引,增加映射,将uuid指定为keyword,即为关键字。 在kibana的开发工具界面执行 GET _cat/templates?pretty查问所有的模版 GET _mapping?pretty查问所有的mapping GET _template/logstash?pretty查问指定的模版假如返回为 { "logstash" : { "order" : 0, "version" : 60001, "index_patterns" : [ "logstash-*", "message*" ], "settings" : { "index" : { "number_of_shards" : "1", "refresh_interval" : "5s" } }, "mappings" : { "dynamic_templates" : [ { "message_field" : { "path_match" : "message", "mapping" : { "norms" : false, "type" : "text" }, "match_mapping_type" : "string" } }, { "string_fields" : { "mapping" : { "norms" : false, "type" : "text", "fields" : { "keyword" : { "ignore_above" : 256, "type" : "keyword" } } }, "match_mapping_type" : "string", "match" : "*" } } ], "properties" : { "uuid2" : { "type" : "keyword" }, "@timestamp" : { "type" : "date" }, "geoip" : { "dynamic" : true, "type" : "object", "properties" : { "ip" : { "type" : "ip" }, "latitude" : { "type" : "half_float" }, "location" : { "type" : "geo_point" }, "longitude" : { "type" : "half_float" } } }, "@version" : { "type" : "keyword" } } }, "aliases" : { } }}将其中的某个字段的类型,改为想要的,而后POST进来即可。 ...

January 9, 2023 · 1 min · jiezi

关于es7:ik分词器-自定义字典无效问题以及解决

对于kaibana自定义字典不失效的问题kibana 自定义字典不失效的解决: 1确认ik分词器在ES启动时失效了(ES启动时能够再日志中看那些插件启动了) 2确认自定义字典的编码是否正确(个别应用utf-8),字典不失效90%都是编码不正确

June 21, 2021 · 1 min · jiezi

关于es7:elasticsearchhead-无法连接-elasticsearch问题的原因及解决

起因:elasticsearch开启胜利的前提下,elasticsearch的默认端口是9200 elasticsearch-head的端口是9100,会波及到跨域问题所有无奈间接连贯 解决办法:装置门路\elasticsearch\elasticsearch-7.6.1\config 中有个elasticsearch.yml文件,这是elasticsearch的配置文件 外面增加: http.cors.enabled: truehttp.cors.allow-origin: "*"http.cors.enabled: true 是指:开启跨域http.cors.allow-origin: "" http.cors.allow-origin指反对哪些域名 指所有域名这样就胜利连贯了

June 17, 2021 · 1 min · jiezi

你可能错过的现代-JavaScript-特性

作者:Jimmy Breck-McKye翻译:疯狂的技术宅 原文:http://www.breck-mckye.com/bl... 未经允许严禁转载 尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现,因为总有一些东西需要学习。 所以在本文中,我收集了一些现代 JavaScript 特性,这些特性在首次发布时并没有带来太多的关注。其中一些只是编码质量的提高,而另外一些确实很方便,可以减少很多代码量。以下是你可能会错过的一些信息: ES2015二进制和八进制在 JavaScript 中,二进制操作并不常见,但有时也会遇到,否则无法切实解决你的问题。你可能正在为低功耗设备编写高性能代码,将位压缩到本地存储中,在浏览器中进行像素 RGB 操作,或者必须处理紧密打包的二进制数据格式。 这可能意味着有很多工作需要对二进制数字进行处理,我一直觉得用十进制也能做这些事。好吧,ES6 为此添加了一个二进制数字格式:0b const binaryZero = 0b0;const binaryOne = 0b1;const binary255 = 0b11111111;const binaryLong = 0b111101011101101;这使得处理二进制标志非常容易: // Pizza toppingsconst olives = 0b0001;const ham = 0b0010;const pineapple = 0b0100;const artechoke = 0b1000;const pizza_ham_pineapple = pineapple | ham;const pizza_four_seasons = olives | ham | artechoke;对于八进制数也是如此。在 JS 世界中,这些领域有点小众,但在网络和某些文件格式中却很常见。现在你可以用语法 0o 处理八进制。 ...

November 5, 2019 · 2 min · jiezi

前端面试每日-31-第182天

今天的知识点 (2019.10.15) —— 第182天[html] 举例说明HTML5的标签meter的用法[css] 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢?[js] 为什么说js是弱类型语言,它的优缺点分别是什么?[软技能] 你知道什么是ECMAScript吗?《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受!相信 坚持 的力量!!!欢迎在 Issues 和朋友们一同讨论学习! 项目地址:前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端,系统整理前端知识,目前正在折腾 LeetCode,打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号,并加入 “前端学习每日3+1” 微信群相互交流(点击公众号的菜单:进群交流)。 学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布面试题(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!(不忘初心,html、css、javascript才是基石!)欢迎大家到Issues交流,鼓励PR,感谢Star,大家有啥好的建议可以加我微信一起交流讨论!希望大家每日去学习与思考,这才达到来这里的目的!!!(不要为了谁而来,要为自己而来!)交流讨论欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个[Star] https://github.com/haizlin/fe...

October 15, 2019 · 1 min · jiezi

工作中常用es6特性

结合工作中使用情况,简单对es6进行一些复习总结,包括常用的语法,api等,以及短时间内要上手需要重点学习的知识点(不同工作环境可能有一些差别),主要参考链接是阮一峰的博客以及外文博客(阮老师大部分文章是直接翻译的这个博客) http://2ality.com/p/about.html 1.简介先说一下ECMAScript,ECMA是一个标准化组织,他们制定了JavaScript的语言标准,所以之后一直称为ECMAScript,广泛的讲,Javascript是其一种标准实现,包括ECMAScript,dom,bom等 ECMA组织每年都会有新标准发布,标准名为ES+年份,所以我们会听到ES2015,ES2016,ES2017等,ES6其实就是ES2015,表示在15年发布的最新版本,相应的ES2016,ES2017分别称为ES7和ES8,依次往后对应。 现在大部分博客,文章,分享中提到的ES6其实也可以理解为ES6+,只不过因为2015年之前,ECMAScript有很多年没有发版(也有历史原因:ES4的夭折),积累了大量的新语法,api,所以在2015年一次性加在了ES6版本中发布,之后每年都只有很少的一些新增,比如: ES7: http://2ality.com/2016/01/ecm... (只有很少的两个属性)ES8:http://2ality.com/2016/02/ecm...…语法提案关于语法提案的流程,简单了解一下:一个新的语法从提案到成为标准需要经过五个阶段,每个阶段都需要标准委员会TC39定时开会进行批准 流程见链接:http://exploringjs.com/es2016... 需要注意的一点,所有的标准都是基于实现的,几大厂商浏览器对提案的实现必须先于标准才会进入定稿阶段,包括Babel 我们常用的async和await,就是因为16年开会的时候没有达到可定案的标准,而没有进入ES2016标准,最后添加在2017标准中 可参考该链接,有每年发布标准中新增的特性:http://2ality.com/2017/02/ecm... 2.简单知识点介绍下面主要就是结合平时工作,简单介绍最常用的语法,类方法以及实例方法等,下面主要是一些列举,大部分知识点想深入学习的话,还是得到阮老师博客或者外文博客上学习 不过我标注了实际工程中的使用频率,可以参考,针对性的学习,快速上手 提示:实际开发中结合eslint可以帮助自己写出更规范的代码使用频率极高(为方便一起介绍,会将一些不常用的语法也列出来,标题括号中也为大量使用): 2.1 let与const这是最基础的两个命令,都是声明变量,要强制所有的声明都使用他们两个 与var的区别: 作用域 var作用域在全局let与const作用域为代码块变量提升 (https://www.jianshu.com/p/68a...)暂时性死区,表示在一个块级作用域内,只要使用let声明一个变量,声明前将不能使用该变量不允许重复声明与顶层对象window或者global的关系,var声明的全局变量与顶层变量挂钩,而let const声明的全局变量不挂钩const与let区别: const定义一个只读的常量,一旦声明不可改变,但需要注意的是,不可改变的是变量指向的那个内存地址,如果使用const声明一个对象,对象内部是可以改变的,如果要强制一个对象不可改变,那么可以使用Object.freeze来冻结(该方法只冻结该对象,不会冻结其属性,所以可考虑递归)2.2 默认值设置我们可以直接在通过 param = 1 的形式设置默认值包括为函数参数设置,为解构设置(见下面介绍)避免了以前的这种写法: function test(data) { data = data || {}; ...}// 可以直接写为function test(data = {}) { ...}需要注意的是:默认值生效的条件是,严格等于 undefined,如果值为null,不会使用默认值2.3 解构赋值与rest操作符解构解构赋值其实就是为了更方便的从数组或者对象中通过属性名取数据,熟练使用之后,配合默认值,rest操作符可以很大程度提高效率,简化代码 下面是一些简单的使用对比 var a = 1, b = 2, c = 3;// 或者var param = { a: 1, b: 2, c: 3 };var a = param.a || 1; // 默认值var b = param.b;var c = param.c;// 或者function add(param) { param = param || {}; var v1 = param.v1 || 0; var v2 = param.v2 || 0; return v1 + v2;}可以看出来,如果参数比较多的话,代码很臃肿如果用解构赋值,我们可以写成这样,很简洁 ...

July 13, 2019 · 2 min · jiezi

Promise入门之基本用法

Promise入门之基本用法背景在我们使用异步函数比如ajax进行编写代码,如果我们需要很多个ajax请求不同的接口,而下一个接口需要依赖上一个接口的返回值,这样,我们的代码则需要在各种回调函数中嵌套,这样一层一层地下去,就形成了回调地狱。 但是promise的出现则不需要嵌套就能解决这个问题。什么是promise?promise本质其实是一个对象,用于传递异步操作的信息。并且promise这个对象提供了相对应的API,满足我们的需求开发。创建promise对象let pro = new Promise(function(resolve, reject){ // 异步处理逻辑 // 处理完毕之后调用resolve或者reject})promise对象跟其他普通对象的创建方法一样,只需要new一个新的对象即可,接受一个函数作为参数,并且该函数中的参数分别为两个回调函数,用于进行不同的逻辑处理。 在定完一个promise对象之后,我们可以通过调用then方法来执行其对应的逻辑pro.then(function(res){ // 如果promise对象调用了resolve方法,则进入该函数逻辑}, function(err){ // 如果promise对象调用了reject方法,则进入该函数逻辑})promise的状态promise的实例主要有以下三种状态:①pending: 处理中②fulfilled: 成功③rejected: 失败pending状态的promise可以转化为fulfilled状态或者rejected状态,该转化不可逆且只能转化一次。同时,fulfilled状态和rejected状态只能由pending状态转化,相互不能转化。如图pending状态下的promise在处理完业务逻辑,且能正常退出时便可以执行resolve方法,从而进入fulfilled状态; 若pending状态下的promise在处理业务逻辑的过程中出现异常错误,或者主动调用reject方法,则进入rejected状态。let pro = new Promise(function(resolve, reject){ if(// 逻辑处理完毕且能正常退出){ resolve() } else{ // 异常错误抛出 reject() }})pro.then(function(res){ // 如果promise对象调用了resolve方法,则进入该函数逻辑}, function(err){ // 如果promise对象调用了reject方法,则进入该函数逻辑})链式调用因为promise对象中的then方法的返回值是一个新的promise对象,因此可以实现链式调用。但后一个then方法的执行必须等待前一个then方法返回的promise对象状态转为fulfilled或者rejected,若promise对象处于pending状态下,则后一个then方法只能等待。pro.then(function(res){ // 第一个promise对象逻辑执行 return newPro;// 返回一个新promise}).then(function(res){ // 对newPro这个对象进行处理})// …可以一直链式调用下去异常捕捉promise中的catch方法其实就是pro.then(null, rejection),用户捕捉代码运行中的错误异常。pro.then(function(res){ // 逻辑处理,但存在异常}).catch(function(err){ // 捕捉上一个then函数中所出现的异常错误})此外,catch方法的所捕捉的异常不仅仅局限于上一个then方法内,而是可以把错误一直传递下来,直至遇到的第一个catch,然后被捕捉。如链式调用中:pro.then(function(res){ // 逻辑处理,但存在异常}).then({ // 逻辑处理}).catch(function(err){ // 捕捉上面第一个出现异常的then函数中所出现的错误})promise.allpromise.all方法可以接受一个由promise组成的数组作为参数,包装成一个新的promise对象,并且按照数组中promise的顺序进行异步执行。如:let pro1 = new Promise(function(resolve, reject){});let pro2 = new Promise(function(resolve, reject){});let pro3 = new Promise(function(resolve, reject){});let proAll = promise.all([pro1, pro2, pro3]);proAll的状态由pro1,pro2,pro3三者共同决定:①pending: 处理中,pro1,pro2,pro3中无rejected且存在pending状态。②rejected: pro1,pro2,pro3中存在一个rejected。③fulfilled:pro1,pro2,pro3三者均为fulfilled。当proAll的状态为fulfilled时,会返回一个数组,该数组中的元素则是上面由promise组成的数组相对应执行后的结果。promise.racepromise.race所接受的参数与promise.all一致,但promise.race的返回值则是由pro1,pro2,pro3三者中最先完成的promise对象决定,并且返回值为该最早完成的promise对象的返回值。let proAll = promise.race([pro1, pro2, pro3]);promise.resolvepromise.resolve方法能将一个对象转换成promise对象let newPro = promise.resolve(obj);①若obj不具有then方法,则newPro直接变为fulfilled状态let newPro = promise.resolve(‘i am not a promise’);newPro.then(function(str){ console.log(str) // 输出 i am not a promise})②如果obj本就是一个Promise对象,则promise.resolve会将obj直接返回。promise.rejectpromise.reject方法与promise.resolve一样,能将一个对象转换成promise对象,但返回的promise对象的状态为rejected。async/awaitasync是关键词,在一个函数名之前加上该关键词,表明该函数内部有异步操作,而这异步操作应该返回一个promise对象,并且在这异步操作之前添加await关键词。当函数执行的时候,遇到await则会先进行Promise的逻辑处理,带promise的状态不再为pending时再执行该函数后面的语句。let pro = new Promise(function(resolve, reject){ // 异步处理逻辑 resolve();})async function asyncFunc(){ // 正常执行的语句 await pro; // 等待promise处理完之后再执行的语句}asyncFunc();总结promise的出现,为我们编写异步函数定下不少规则,在优化我们代码的同时也能减少代码量,并增强可读性,但也需严格遵守promise/A+的规范进行promise的开发。 ...

March 28, 2019 · 1 min · jiezi

asnyc/await的并行

一直以为es7里面的async和await可以用来简化串行异步代码,而没有想到还能并行。说到底,这俩货不过是promise的语法糖,await的作用只是串行解析promise。通常我们这样写:function asyncAwaitFn(str) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const parallel = async () => { //并行执行 console.time(‘parallel’) const parallelOne = await asyncAwaitFn(‘1’); const parallelTwo = await asyncAwaitFn(‘2’) console.log(parallelOne) //1 console.log(parallelTwo) //2 console.timeEnd(‘parallel’) //2003.509033203125ms}parallel()这是串行,显然最后的执行时间应该大于2000ms。但如果换一种写法:function asyncAwaitFn(str) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); })}const parallel = async () => { //并行执行 console.time(‘parallel’) const parallelOne = asyncAwaitFn(‘1’); const parallelTwo = asyncAwaitFn(‘2’) console.log(await parallelOne) //1 console.log(await parallelTwo) //2 console.timeEnd(‘parallel’) //1001.87255859375ms}parallel()最后执行时间只要1000ms,显然是并行了。不过严谨来说,这依然是promise本身的并行罢了。 ...

January 24, 2019 · 1 min · jiezi

记一次小程序开发中如何使用async-await并封装公共异步请求

前言在平常的项目开发中肯定会遇到同步异步执行的问题,还有的就是当执行某一个操作依赖上一个执行所返回的结果,那么这个时候你会如何解决这个问题呢;1.是用settimeout让它异步执行,显然这只是让它加入异步任务队列中去执行,但并不能保证等待其返回结果再去执行另一个操作。2.还是自己封装callback函数?那样就会陷入所谓的回调地狱,代码层层嵌套,环环相扣,逻辑稍微复杂就会很难去维护。3.当然es6中的promise倒是很好的解决了这样的问题,再配合es7的async和await就更完美了,await返回的也是一个promise对象,这个关于promise和async,await的使用方法就不说了。实现方案首先小程序目前还是不支持es7的async和await的,那么如何让它支持呢1、下载[regenerator][1]并把下载好的runtime.js文件夹放到自己小程序的utils目录下,包总共才20kb多,体积很小的。![图片描述][2]2、在需要调的地方引入 import regeneratorRuntime from ‘../../utils/runtime.js'3、如何封装并使用封装:const postData = async function(url, data) { wx.showLoading({ title: ‘加载中’, }) let promiseP = await new Promise(function(resolve, reject) { wx.request({ url: baseUrl + url, data: data, method: ‘POST’, header: { ‘content-type’: ‘application/json’, ‘access-token’: wx.getStorageSync(’token’) }, success: function(res) { wx.hideLoading(); if (res.statusCode === 200) { resolve(res) } else { reject(res.data) } }, fail: function(err) { wx.hideLoading(); reject(err) if (err.code === 401) {} } }) }) return promiseP}module.exports = { postData}使用:import regeneratorRuntime from ‘../../utils/runtime.js’;const app = getApp(), postData = require(’../../service/koalaApi.js’);async demo() { await postData(app.globalData.baseUrl + ‘/test’,{ data: {} }).then((res) => { console.log(res) })}下面进行了更完善的一个封装,包括各种错误判断的处理和简化,通过传参的方式,来灵活调用// 当前hostconst url_host = require(‘API.js’).host // 当前版本const currentVersion = require(‘util.js’).currentVersion // 当前路径import { currentPagePath } from ‘util.js’ // 调用fetch方法,然后依次链式传入// url, method, header, data, loading(是否显示loading) function fetch(url, method, header, data, loading) { // 判断给服务端传递undefined的问题 let fetchP = new Promise(function (resolve, reject) { if (loading) { wx.showLoading({ icon: ’loading’ }) } if(data && data.unionId && typeof data.unionId === “undefined”){ wx.hideLoading() return reject({ ok:false, error: ‘unionId -> ’ + typeof data.unionId }); } wx.request({ url: url_host + url, method: method ? method : ‘GET’, header: { ‘content-type’: ‘application/json’, // 默认值 ‘version’: currentVersion, ‘pagePath’: currentPagePath() }, data: data, success: function (res) { if (res.statusCode < 500) { resolve(res.data) } else { showError() reject(res.data) } }, fail: function (err) { showError() reject(err) }, complete: function (comp) { if (loading) { wx.hideLoading() } } }) }) return fetchP}// 服务器开小差了function showError () { wx.hideLoading() // 获取头文件路径 wx.navigateTo({ url: ‘/pages/serverError/serverError’, })}module.exports = { fetch}思考1、为什么引入regeneratorRuntime,就能够使用async/await?不需要配合babel吗?2、regeneratorRuntime都做了什么?总结1、首先先明白babel和polyfill分别干啥的;Babel 是一个广泛使用的转码器,Babel 默认只转换新的 JavaScript 句法,而不转换新的 API。例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。如果想使用这些新的对象和方法,必须使用 babel-polyfill,为当前环境提供一个垫片。2、Polyfill用于实现浏览器并不支持的原生API的代码。3、在明白上面的意思之后,还需要明白的是,babel-polyfill是一股脑把全部都给你添加到js文件中,而现在的runtime将会判断你哪些需要加载的,有选择性的进行加载,并且后者也不会污染全局变量。在这里regeneratorRuntime最终转化成es6的generator来用的。具体的可以自己去下babel官网,输入相关代码可以看下最终转换后的代码。 ...

January 19, 2019 · 2 min · jiezi

即将到来 Javascript 三个改变, 你会很喜欢它们的,因为确实是方便了很多!

让我们看看JavaScript中一些有用的即将出现的特性。你将看到它们的语法、时时关注它们的进展与更新。在此,我们将编写一个小测试案例来展示如何从今天开始使用这些特性!如果您已经熟悉Ecma TC39委员会如何决定和处理JavaScript语言的更改,请跳过这一部分。JavaScript是 ECMAScript 的语言标准的实现,ECMAScript 是在web浏览器的早期发展过程中为规范标准化语言的实现而诞生的。ECMAScript标准有8个版本,7个发布(第4个版本被放弃了)。JavaScript引擎在每次发布后开始实行指定的特性升级。这个图表说明并不是每个引擎都能实现了新出的每个特性,而且一些引擎实现这些特性的时间要比其他引擎长。这似乎不是最理想的,但我相信这总比没有标准要好。起草每个ECMAScript版本都要经过一个审核起稿的过程。如果一个起草建议被认为是有用的和向后兼容的,它将被包含在下一版中。这个地址 概述了提案的五个阶段。每一个提案都是从一个“strawman”或最初提出的 stage-0 开始的。在这一级,它们要么尚未提交给技术委员会,要么尚未被拒绝,但仍未达到进入下一阶段的标准。下面所示的草建议没有一项处于stage-0。作为个人推荐,我建议读者在生产应用程序中避免使用stage-0建议,直到它们处于稳定的阶段。此建议的目的只是避免在起草建议被放弃或发生重大带来的麻烦。好了,背景就啰嗦到这里了,需要使用这些新出来的特性,还需要如下步骤:始化项目、安装依赖(前提需要安装node.js,nmp)npm init -f && npm i ava@1.0.0-beta.3 @babel/preset-env@7.0.0-beta.42 @babel/preset-stage-0@7.0.0-beta.42 @babel/register@7.0.0-beta.42 @babel/polyfill@7.0.0-beta.46 @babel/plugin-proposal-pipeline-operator@babel/plugin-transform-runtime@7.0.0-beta.42 @babel/runtime@7.0.0-beta.42 –save-dev在 package.json 文件中添加以下代码:“scripts”: { “test”: “ava”},“ava”: { “require”: [ “@babel/register”, “@babel/polyfill” ] }在根目录新建 .babelrc 文件,内容如下: { “presets”: [ [ “@babel/preset-env”, { “targets”: { “node”: “current” } } ], [ “@babel/preset-stage-0”, { “decoratorsLegacy”: true, “pipelineProposal”: “minimal” } ] ], “plugins”: [ “@babel/plugin-transform-runtime”, [ “@babel/plugin-proposal-optional-chaining”, { “loose”: false } ], [ “@babel/plugin-proposal-decorators”, { “decoratorsBeforeExport”: false } ], [ “@babel/plugin-proposal-class-properties” ], [ “@babel/plugin-proposal-pipeline-operator”, { “proposal”: “minimal” } ] ]}接下,我们写个粟子把即将出来 JavaSrcipt 特性用起来吧!自判断链接(Optional Chaining)Optional Chaining 能检查一个对象上面是否存在某属性,我们项目中,如果有一个用户对象有如下结构:const data = { user: { name: ‘小智’, address: { street: ‘小智测试地址’, }, },};但实际项目中,我们 user 里面数据是请求获取,然后我们在赋值给 user,所以实际项目中我们一般会这么写:const data = { user: {},};假设我们在程序要读取 user中的 street, 我们会这样写 data.user.address.street,恩,这时我们在控制台就会收到来自谷歌的红色问候:console.log(data.user.address.street); // Uncaught TypeError: Cannot read property ‘street’ of undefined为了避免出错,我们会这样写:const street = data && data.user && data.user.address && data.user.address.street;console.log(street); // undefined我的感受,这种写法:1)丑陋2)繁琐冗长3)狗屎即将出现的特性中,我们可以这样写:console.log(data.user?.address?.street); // undefined这样是不是更加简洁方便呢?既然我们看到了这个特性的有用性,我们就可以继续深入研究了!写个粟子(test.js):// test.jsimport test from ‘ava’;const valid = { user: { address: { street: ‘main street’, }, },};function getAddress(data) { return data?.user?.address?.street;}test(‘Optional Chaining returns real values’, (t) => { const result = getAddress(valid); t.is(result, ‘main street’);});测试:npm test现在我们看到自判断链接维护了点标记的先前功能。接下测试一下,一连串的 .属性 操作:test(‘Optional chaining returns undefined for nullish properties.’, (t) => { t.is(getAddress(), undefined); t.is(getAddress(null), undefined); t.is(getAddress({}), undefined);});下面是自判断链接如何用于数组属性访问:const valid = { user: { address: { street: ‘main street’, neighbors: [ ‘john doe’, ‘jane doe’, ], }, },};function getNeighbor(data, number) { return data?.user?.address?.neighbors?.[number];}test(‘Optional chaining works for array properties’, (t) => { t.is(getNeighbor(valid, 0), ‘john doe’);});test(‘Optional chaining returns undefined for invalid array properties’, (t) => { t.is(getNeighbor({}, 0), undefined);});有时我们不知道函数是否在对象中实现,一个常见的例子是在使用web浏览器时。一些较老的浏览器可能没有某些功能。幸运的是,我们可以使用自判断链接来检测函数是否实现了!const data = { user: { address: { street: ‘main street’, neighbors: [ ‘john doe’, ‘jane doe’, ], }, getNeighbors() { return data.user.address.neighbors; } },};function getNeighbors(data) { return data?.user?.getNeighbors?.();} test(‘Optional chaining also works with functions’, (t) => { const neighbors = getNeighbors(data); t.is(neighbors.length, 2); t.is(neighbors[0], ‘john doe’);});test(‘Optional chaining returns undefined if a function does not exist’, (t) => { const neighbors = getNeighbors({}); t.is(neighbors, undefined);});如果链不完整,表达式将不执行。在JavaScript引擎下,表达式粗略地转换成这个:value == null ? value[some expression here]: undefined;在“自判断链接” ?之后,如果值未定义或为空,则执行。我们可以在下面的测试中看到该规则的作用:let neighborCount = 0;function getNextNeighbor(neighbors) { return neighbors?.[++neighborCount];}test(‘It short circuits expressions’, (t) => { const neighbors = getNeighbors(data); t.is(getNextNeighbor(neighbors), ‘jane doe’); t.is(getNextNeighbor(undefined), undefined); t.is(neighborCount, 1);});所以“自判断链接”减少了对if语句、导入库(如lodash)和&&操作符号的需要。您可能会注意到,使用这个“自判断链接”具有最小的开销。你检查的每一级”?“必须隐藏在某种条件逻辑中。如果使用过度,将导致性能下降。下面是我们在JavaScript中看到的一些常见操作:检查null或者undefined的值设置默认值判断值是否为 0,null, ‘‘你可能见过这样做的:value != null ? value : ‘default value’;或者你可能见过这种不恰当的做法:value || ‘default value’问题是对于这两个实现,我们的三目运算符条件没有满足。在这个场景中,数字0、false和空字符串都被认为是假的。这就是为什么我们必须检查null和 undefined。value != null与之相同的是:value !== null && value !== undefined这个就是 Nullish 合并出现原因,我们可以这样做:value ?? ‘default value’;这就可以防止默认那些不可靠的值(null,undefined),代替三目运算和 !=null 的操作;写个测试粟子:import test from ‘ava’;test(‘Nullish coalescing defaults null’, (t) => { t.is(null ?? ‘default’, ‘default’);});test(‘Nullish coalescing defaults undefined’, (t) => { t.is(undefined ?? ‘default’, ‘default’);});test(‘Nullish coalescing defaults void 0’, (t) => { t.is(void 0 ?? ‘default’, ‘default’);});test(‘Nullish coalescing does not default 0’, (t) => { t.is(0 ?? ‘default’, 0);});test(‘Nullish coalescing does not default empty strings’, (t) => { t.is(’’ ?? ‘default’, ‘’);});test(‘Nullish coalescing does not default false’, (t) => { t.is(false ?? ‘default’, false);});您可以在测试中看到,默认值为null、undefined和void 0,结果为undefined。它不会默认false值,如0、“和false.管道操作符在函数式编程中,我们有一个术语“组合”,它是将多个函数调用链接在一起的行为。每个函数接收前一个函数的输出作为输入。下面是我们用普通JavaScript讨论的一个例子:function doubleSay (str) { return str + “, " + str;}function capitalize (str) { return str[0].toUpperCase() + str.substring(1);}function exclaim (str) { return str + ‘!’;}let result = exclaim(capitalize(doubleSay(“hello”)));result //=> “Hello, hello!“这种串接非常常见,以至于组合函数出现在大多数函数库中,比如lodash和ramda。使用新的管道操作符,您可以跳过第三方库,像这样编写上面的代码:let result = “hello” |> doubleSay |> capitalize |> exclaim;result //=> “Hello, hello!“这样做的目的是为了提高链的可读性。它也将在未来与部分应用程序很好地工作,或目前它可以实现如下:let result = 1 |> (_ => Math.max(0, ));result //=> 1let result = -5 |> ( => Math.max(0, ));result //=> 0现在我们看到了语法,可以开始编写测试了!import test from ‘ava’;function doubleSay (str) { return str + “, " + str;}function capitalize (str) { return str[0].toUpperCase() + str.substring(1);}function exclaim (str) { return str + ‘!’;}test(‘Simple pipeline usage’, (t) => { let result = “hello” |> doubleSay |> capitalize |> exclaim; t.is(result, ‘Hello, hello!’);});test(‘Partial application pipeline’, (t) => { let result = -5 |> ( => Math.max(0, _)); t.is(result, 0);});test(‘Async pipeline’, async (t) => { const asyncAdd = (number) => Promise.resolve(number + 5); const subtractOne = (num1) => num1 - 1; const result = 10 |> asyncAdd |> (async (num) => subtractOne(await num)); t.is(await result, 14);});好了,现在您已经看到了这些新特性的实际应用,希望不久的你可以熟练的尝试它!你的点赞,是我持续分享好东西的动力,欢迎点赞!一个笨笨的码,我的世界只能终身学习! ...

November 25, 2018 · 3 min · jiezi

ECMAScript正则表达式6个最新特性

译者按: 还没学好ES6?ECMAScript 2018已经到来啦!原文:ECMAScript regular expressions are getting better!作者: Mathias Bynens: Google V8引擎开发者译者:Fundebug为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。1999年,ECMAScript 3添加了对正则表达式的支持。16年之后,ECMAScript 6(即ECMAScript 2015或者ES6)引入了Unicode模式(u选项), sticky模式(y选项)以及RegExp.prototype.flags的getter方法。这篇博客将介绍ECMAScript正则表达式的最新特性:dotAll模式(s选项)Lookbehind断言Named capture groupsUnicode property escapesString.prototype.matchAll规范RegExp遗留特性1. dotAll模式(s选项)这个特性已经在ECMAScript 2018正式发布了。默认情况下,.可以匹配任意字符,除了换行符:/foo.bar/u.test(‘foonbar’); // false另外,.不能匹配Unicode字符,需要使用u选项启用Unicode模式才行。ES2018引入了dotAll模式,通过s选项可以启用,这样,.就可以匹配换行符了。/foo.bar/su.test(‘foonbar’); // true2. Lookbehind断言这个特性已经在ECMAScript 2018正式发布了。ECMAScript目前仅支持lookahead断言。下面示例是Positive lookahead,匹配字符串“42 dollars”中紧跟着是"dollars"的数字:const pattern = /d+(?= dollars)/u;const result = pattern.exec(‘42 dollars’);console.log(result[0]); // 打印42下面示例是Negative lookahead,匹配字符串“42 pesos”中紧跟着的不是"dollars"的数字:const pattern = /d+(?! dollars)/u;const result = pattern.exec(‘42 pesos’);console.log(result[0]); // 打印42ES2018添加了lookbehind断言。下面示例是Positive lookbehind,匹配字符串“$42”中前面是"$“的数字:const pattern = /(?<=$)d+/u;const result = pattern.exec(’$42’);console.log(result[0]); // 打印42下面示例是Negative lookbehind,匹配字符串“$42”中前面不是是”$“的数字:const pattern = /(?<!$)d+/u;const result = pattern.exec(‘42’);console.log(result[0]); // 打印42Fundebug专注于网页、微信小程序、微信小游戏,支付宝小程序,React Native,Node.js和Java线上BUG实时监控,欢迎免费试用3. Named capture groups这个特性已经在ECMAScript 2018正式发布了。目前,正则表达式中小括号匹配的分组是通过数字编号的:const pattern = /(d{4})-(d{2})-(d{2})/u;const result = pattern.exec(‘2017-01-25’);console.log(result[0]); // 打印"2017-01-25"console.log(result[1]); // 打印"2017"console.log(result[2]); // 打印"01"console.log(result[3]); // 打印"25"这样很方便,但是可读性很差,且不易维护。一旦正则表达式中小括号的顺序有变化时,我们就需要更新对应的数字编号。ES2018添加named capture groups, 可以指定小括号中匹配内容的名称,这样可以提高代码的可读性,也便于维护。const pattern = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/u;const result = pattern.exec(‘2017-01-25’);console.log(result.groups.year); // 打印"2017"console.log(result.groups.month); // 打印"01"console.log(result.groups.day); // 打印"25"4. Unicode property escapes这个特性已经在ECMAScript 2018正式发布了。Unicode标准为每一个字符分配了多个属性。比如,当你要匹配希腊语字符时,则可以搜索Script_Extensions属性为Greek的字符。Unicode property escapes使得我们可以使用ECMAScript正则表达式直接匹配Unicode字符的属性:const regexGreekSymbol = /p{Script_Extensions=Greek}/u;console.log(regexGreekSymbol.test(’’)); // 打印true5. String.prototype.matchAll这个特性还处在Stage 3 Draftg和y选项通常用于匹配一个字符串,然后遍历所有匹配的子串,包括小括号匹配的分组。String.prototype.matchAll让这个操作变得更加简单了。const string = ‘Magic hex numbers: DEADBEEF CAFE 8BADF00D’;const regex = /b[0-9a-fA-F]+b/g;for (const match of string.matchAll(regex)) { console.log(match);}每一个迭代所返回的match对象与regex.exec(string)所返回的结果相同:// Iteration 1:[ ‘DEADBEEF’, index: 19, input: ‘Magic hex numbers: DEADBEEF CAFE 8BADF00D’]// Iteration 2:[ ‘CAFE’, index: 28, input: ‘Magic hex numbers: DEADBEEF CAFE 8BADF00D’]// Iteration 3:[ ‘8BADF00D’, index: 33, input: ‘Magic hex numbers: DEADBEEF CAFE 8BADF00D’]注意,这个特性还处在Stage 3 Draft,因此还存在变化的可能性,示例代码是根据最新的提案写的。另外,浏览器也还没有支持这个特性。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。6. 规范RegExp遗留特性这个提案还处在Stage 3 Draft这个提案规范了RegExp的遗留特性,比如RegExp.prototype.compile方法以及它的静态属性从RegExp.&dollar;1到RegExp.&dollar;9。虽然这些特性已经弃用(deprecated)了,但是为了兼容性我们不能将他们去。因此,规范这些RegExp遗留特性是最好的方法。因此,这个提案有助于保证兼容性。参考阮一峰 - ECMAScript 6 入门Fundebug博客 - JavaScript正则表达式进阶指南ECMAScript 2018: the final feature set关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!版权声明:转载时请注明作者Fundebug以及本文地址:https://blog.fundebug.com/201… ...

August 30, 2018 · 1 min · jiezi