当前位置: 首页 > Web前端 > vue.js

20个Javascript技巧来改善我们的钓鱼时间!

时间:2023-04-01 01:39:25 vue.js

作者:KapilRaghuwanshi译者:前端小智来源:dev有梦想,有干货,微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。用方便好用的方法来减少代码行数,提高我们的工作效率,增加我们的钓鱼时间。在我们的日常工作中,我们需要编写函数,比如排序、查找、查找唯一值、传递参数、交换值等,所以这里分享一些我在工作中多年积累的常用技巧和方法,so每个人都可以增加他们的经验。鱼的时间。这些方法一定会对你有所帮助:减少代码行数编码竞赛增加钓鱼时间1.声明并初始化数组我们可以将数组初始化为特定的大小,或者通过指定一个值来初始化数组内容。你可能会使用一组Array,其实二维数组也可以这样做,如下所示:constarray=Array(5).fill('');//输出(5)["","","","",""]constmatrix=Array(5).fill(0).map(()=>Array(5).fill(0))//输出(5)[数组(5),数组(5),数组(5),数组(5),数组(5)]0:(5)[0,0,0,0,0]1:(5)[0,0,0,0,0]2:(5)[0,0,0,0,0]3:(5)[0,0,0,0,0]4:(5)[0,0,0,0,0]length:52.sum,minValuesandMaximums我们应该利用reduce方法快速找到基本的数学运算。常量数组=[5,4,7,8,9,2];sumarray.reduce((a,b)=>a+b);//输出:35个最大值array.reduce((a,b)=>a>b?a:b);//输出:9个最小值array.reduce((a,b)=>aa-b);//输出(6)[1,5,10,25,40,100]array.sort((a,b)=>b-a);//输出(6)[100,40,25,10,5,1]对象数组排序constobjectArr=[{first_name:'Lazslo',last_name:'Jamf'},{first_name:'Pig',last_name:'Bodine'},{first_name:'Pirate',last_name:'Prentice'}];objectArr.sort((a,b)=>a.last_name.localeCompare(b.last_name));//输出(3)[{...},{...},{...}]0:{first_name:"Pig",last_name:"Bodine"}1:{first_name:"Lazslo",last_name:"Jamf"}2:{first_name:"Pirate",last_name:"Prentice"}length:34.像0,undefined,null,false,"",''这样的假值可以通过以下技巧轻松过滤掉constarray=[3,0,6,7,'',false];array.filter(Boolean);//输出(3)[3,6,7]5.使用逻辑运算符处理需要条件判断的情况functiondoSomething(arg1){arg1=arg1||10;//如果arg1没有值,取默认值10}letfoo=10;foo===10&&doSomething();//如果foo等于10,就执行doSomething();//输出:10foo===5||doSomething();//和if(foo!=5)thendoSomething();//输出:106.去除重复值constarray=[5,4,7,8,9,2,7,5];array.filter((item,idx,arr)=>arr.indexOf(item)===idx);//orconstnonUnique=[...newSet(array)];//输出:[5,4,7,8,9,2]7。创建一个计数器对象或Map在大多数情况下,您可以通过创建一个对象或Map来统计某些特殊词的出现频率。letstring='kapilalipak';常量表={};for(letcharofstring){table[char]=table[char]+1||1;}//输出{k:2,a:3,p:2,i:2,l:2}或constcountMap=newMap();for(leti=0;i2,"a"=>3,"p"=>2,"i"=>2,"l"=>2}8.三元运算符是coolfunctionFever(temp){returntemp>97?“拜访医生!”:温度<97?'出去玩!!':温度===97?'TakeSomeRest!':'GoOutandplay!';;}//输出Fever(97):"TakeSomeRest!"发烧(100):“去看医生!”9、循环方法for和for..in的比较默认获取索引,但是可以使用arr[index]。for..in也接受非数字,所以避免使用它们。forEach,for...of直接获取元素。forEach也可以得到索引,但是for...of不能。10.合并两个对象constuser={name:'KapilRaghuwanshi',gender:'Male'};constcollege={primary:'玛尼小学',secondary:'拉斯中学'};constskills={programming:'Extreme',swimming:'Average',sleeping:'Pro'};constsummary={...user,...college,...skills};//合并多个对象gender:“男”姓名:“KapilRaghuwanshi”小学:“Mani小学”编程:“Extreme”中学:“Lass中学”睡觉:“Pro”游泳:“Average”11。箭头函数箭头函数表达式是传统函数表达式的一种替代方案,但有局限性,不能在所有情况下使用。因为它们有词法作用域(父作用域)并且没有自己的this和参数,所以它们指的是定义它们的环境。constperson={name:'Kapil',sayName(){returnthis.name;}}person.sayName();//输出“Kapil”但是这个:constperson={name:'Kapil',sayName:()=>{returnthis.name;}}person.sayName();//Output"13.Optionalchainconstuser={employee:{name:"Kapil"}};user.employee?.name;//Output:"Kapil"user.employ?.name;//Output:undefineduser.employ.name//Output:VM21616:1UncaughtTypeError:Cannotreadproperty'name'ofundefined13.使用内置的Math.random()方法打乱数组。常量列表=[1,2,3,4,5,6,7,8,9];list.sort(()=>{returnMath.random()-0.5;});//输出(9)[2,5,1,6,9,8,4,3,7]//输出(9)[4,1,7,5,3,8,2,9,6]14.双问号语法constfoo=null??'我的学校';//输出:“我的学校”constbaz=0??42;//输出:0余数和扩展语法functionmyFun(a,b,...manyMoreArgs){returnarguments.length;}myFun("one","two","three","four","five","six");//输出:6andconstparts=['shoulders','knees'];constlyrics=['head',...parts,'and','toes'];lyrics;//output:(5)["head","shoulders","knees","and","toes"]16.默认参数constsearch=(arr,low=0,high=arr.length-1)=>{returnhigh;}search([1,2,3,4,5]);//输出:417。将十进制转换为二进制或十六进制constnum=10;num.toString(2);//Output:"1010"num.toString(16);//Output:"a"num.toString(8);//output:"12"18.使用解构交换两个数字leta=5;letb=8;[a,??b]=[b,a][a,b]//输出(2)[8,5]19.单行回文校验函数checkPalindrome(str){returnstr==str.split('').reverse().join('');}checkPalindrome('naman');//输出:true20.ConvertObjectpropertytopropertyarrayconstobj={a:1,b:2,c:3};Object.entries(obj);//输出(3)[Array(2),Array(2),Array(2)]0:(2)["a",1]1:(2)["b",2]2:(2)["c",3]length:3Object.keys(obj);(3)["a","b","c"]Object.values(obj);(3)[1,2,3]~完了,我是小智,下期见!原文:https://dev.to/techygeeky/top...每周更新交流文章。微信搜索【大千世界】即可第一时间阅读,回复【福利】还有很多前端视频等着你。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录,欢迎Star