别再写低级JS了高手都在用的那些骚操作有些代码不是不会写是写了之后连自己都嫌弃一、开头我当年写的 JS自己都不敢看说个真实经历。我刚入行那会儿写 JS 就一个原则能跑就行。if(aa.ba.b.ca.b.c.d){console.log(a.b.c.d);}当时还觉得挺严谨后来回头看……这不就是“防御性编程的灾难现场”吗再比如vararr[];for(vari0;idata.length;i){arr.push(data[i].name);}写得很认真但就是——low。后来接触多了才发现高手写 JS是真的“骚”而且不是炫技是优雅 可维护 少 bug。今天就聊点我踩坑之后才学会的“高级写法”。二、可选链 空值合并告别 if 地狱为什么要用你写一堆本质是怕对象为空。但 JS 已经给你准备好了更优雅的方式正确姿势constvaluea?.b?.c?.d??默认值;原理简单说?.遇到null/undefined就直接返回undefined??只在null/undefined时才给默认值不像||那么“暴力”对比一下// ❌ 老写法constvalaa.ba.b.c||default;// ✅ 新写法constvala?.b?.c??default;一句话总结少写判断多用语言特性三、解构赋值别再点来点去了低级写法constnameuser.name;constageuser.age;高级一点const{name,age}user;更骚一点带默认值 重命名const{name:userName匿名,age18}user;为什么重要少写重复代码结构更清晰对接口数据处理特别爽尤其 WebGIS 返回数据四、数组处理map / filter / reduce 才是王道经典“新手三连”constresult[];for(leti0;ilist.length;i){if(list[i].age18){result.push(list[i].name);}}高手写法constresultlist.filter(itemitem.age18).map(itemitem.name);原理函数式编程思想filter筛选map转换reduce聚合一个 GIS 场景真实用假设你从接口拿到一堆要素constfeaturesgeojson.features;你要提取所有名称constnamesfeatures.map(ff.properties.name);比你写 for 循环干净太多。五、Set / Map别再用 Object 硬撑了去重别再这样写了constuniquearr.filter((item,index)arr.indexOf(item)index);直接上constunique[...newSet(arr)];Map 用法比 Object 强在哪constmapnewMap();map.set(key,123);console.log(map.get(key));优势key 可以是对象不会有原型链污染问题更语义化六、函数参数默认值 解构才是王炸低级写法functioninit(options){optionsoptions||{};constzoomoptions.zoom||10;}高级写法functioninit({zoom10,center[0,0]}{}){console.log(zoom,center);}WebGIS 场景OpenLayersfunctioncreateMap({targetmap,zoom10,center[0,0]}{}){returnnewol.Map({target,view:newol.View({zoom,center})});}一句话函数一进来配置就干净了七、Promise async/await别再回调地狱了回调地狱看着就烦getData(function(res){getMore(res,function(data){getFinal(data,function(final){console.log(final);});});});现代写法asyncfunctionload(){constresawaitgetData();constdataawaitgetMore(res);constfinalawaitgetFinal(data);console.log(final);}为什么更好可读性强错误处理简单try{awaitload();}catch(e){console.error(e);}八、实战Mapbox 里优雅处理数据假设你用 Mapbox 加载点数据map.on(load,async(){constresawaitfetch(/data.geojson);constgeojsonawaitres.json();constfeaturesgeojson.features.filter(ff.geometry).map(f({type:Feature,geometry:f.geometry,properties:{name:f.properties?.name??未知}}));map.addSource(points,{type:geojson,data:{type:FeatureCollection,features}});});这段代码的核心点async/awaitmap filter?.防空数据结构清洗一句话总结写 JS其实就是在“整理数据”九、那些年我踩过的坑真的会踩1、||和??用错constval0||10;// 结果是 10 ❌constval0??10;// 结果是 0 ✅ 0、‘’、false 都会被||干掉2、解构 undefined 直接炸const{a}undefined;// 报错解决const{a}obj||{};3、async 忘记 awaitconstdatafetch(/api);// 你以为是数据其实是 Promise4、Set 去重对象失效newSet([{a:1},{a:1}]);// 不会去重 因为引用不同这个坑我当年踩了半天怀疑人生十、结尾JS 真不难难的是“写得像人”说实话JS 本身不复杂。复杂的是你写的是不是别人能看懂你是不是在重复造轮子你有没有利用好语言本身的能力我现在写代码有个原则能用一行优雅解决的绝不用三行凑合当然也别走极端搞“炫技代码”那种写法同事看了只会想打你。最后送一句我自己总结的话算个小彩蛋代码不在多优雅就行逻辑不在骚清晰为王。如果这篇文章对你有帮助欢迎点赞 收藏 ⭐ 关注 完结撒花✿✿ヽ(°▽°)ノ✿