最简单的js代码(好玩的js代码)

最简单的js代码

在编程中，处理同一个问题一般有多种办法。这些处理计划在不同方面可能有所不同，例如长度、功能、运用的算法、可读性等。
在本文中，咱们将研究几种快速简练的单行处理计划，以处理JavaScript中经常出现的各种问题。
什么是单行代码？
在咱们开端之前，让咱们保证咱们了解是什么单行代码。
单行代码是问题的代码处理计划，运用特定编程言语中的单个句子完成，无需任何第三方实用程序。
该界说包括许多其他界说中没有的重要差异特征：
1）.“……单句……”
并非每一段只占用一行的代码都是单行代码。例如，看看这个将两个平方和相加并回来成果的办法。
constsum=(a,b)=>{consts1=a*a;consts2=b*b;returns1+s2;}
你会称之为单行代码吗？在大多数情况下，这只会作为格局过错的代码经过。Prettier之类的东西能够轻松地将这三个句子自动拆分为多行。
获得两个平方和的真正单行办法是这样的：
constsum=(a,b)=>a*a+b*b;
一个简略、简练的陈述能够相同清晰地完成相同的工作。
另一方面，此办法跨越多行代码以提高可读性，但它依然能够作为一行代码经过：
constcapitalizeWithoutSpaces=(str)=>str.split(”).filter((char)=>char.trim()).map((char)=>char.toUpperCase()).join(”);
因而，尽管名称如此，“单行”并不一定意味着是一行代码。
2）.“……特定的编程言语……”
这与每个高档言语程序在执行前都必须翻译成低级言语这一现实有关。一个十分简单的程序最终可能会占用数十或数百行汇编代码和机器代码。
例如，这儿是另一个也添加两个平方和的单行代码，这次是在C++中：
intsum(inta,intb){returna*a+b*b;}
让咱们看看编译成汇编言语后的姿态：
sum(int,int):pushrbpmovrbp,rspmovDWORDPTR[rbp-4],edimovDWORDPTR[rbp-8],esimoveax,DWORDPTR[rbp-4]imuleax,eaxmovedx,eaxmoveax,DWORDPTR[rbp-8]imuleax,eaxaddeax,edxpoprbpret
这个汇编程序显然不止一行或一行代码。想象一下等效的机器言语程序会有多少。所以这个函数能够说是仅在C++上下文中的单行函数。
3）.“……没有任何第三方实用程序”
关于单行代码，它不应该引用编程言语本身不可用的任何办法或函数，记住咱们之前看过的单行代码：
constcapitalizeWithoutSpaces=(str)=>str.split(”).filter((char)=>char.trim()).map((char)=>char.toUpperCase()).join(”);
这儿运用的一切办法都是内置的JavaScript办法。它不包括来自NPM或其他地方的第三方代码。
可是，如果咱们决议完成自己的filter()办法来替换Arrayfilter()，则该办法将不再契合单行办法的条件。
//Notaone-linerconstcapitalizeWithoutSpaces=(str)=>filter(str.split(”),(char)=>char.trim()).map((char)=>char.toUpperCase()).join(”);functionfilter(arr,callback){//Lookatalltheselinesconstresult=[];for(constitemofarr){if(callback(item)){result.push(item);}}returnresult;}
抛开界说，现在让咱们看一些聪明的JavaScript单行代码以及它们处理计划。
1.获取数组的最小元素
要获得数组中的最小项，咱们能够选用这种运用for循环和if句子的指令式办法。
constgetSmallest=(arr)=>{letsmallest=Number.POSITIVE_INFINITY;for(constnumofarr){if(num<smallest){smallest=num;}}returnsmallest;};constarr=[13,7,11,3,9,15,17];console.log(getSmallest(arr));//3
这没关系，但有一个简练且声明性的单行代替计划相同有用：
constgetSmallest=(arr)=>arr.reduce((smallest,num)=>Math.min(smallest,num));constarr=[13,7,11,3,9,15,17];console.log(getSmallest(arr));//3
2.获取数组的最大元素
这是获取数组中最大元素的可接受办法。
constgetLargest=(arr)=>{letlargest=Number.NEGATIVE_INFINITY;for(constnumofarr){if(num>largest){largest=num;}}returnlargest;};constarr=[13,7,11,3,9,15,17];console.log(getLargest(arr));//17
但就像咱们看到的获取最小数组元素一样，有一种更短、更简练的办法。
constgetLargest=(arr)=>arr.reduce((largest,num)=>Math.max(largest,num));constarr=[13,7,11,3,9,15,17];console.log(getLargest(arr));//17
您能够看到，此函数与单行getSmallest()函数之间的仅有差异是Math.min()已替换为Math.max()。
3.打乱数组
数组/列表洗牌的一个常见用处是在纸牌游戏中，其间牌组中的牌必须随机排序。
Fisher-Yates洗牌是一种闻名的洗牌算法。查看它在JavaScript中的可能完成：
constshuffleArray=(arr)=>{for(leti=arr.length-1;i>0;i–){constj=Math.floor(Math.random()*(i+1));lettemp=arr[i];arr[i]=arr[j];arr[j]=temp;}returnarr;};constarr=[1,2,3,4,5];shuffleArray(arr);//[2,3,5,1,4](varies)console.log(arr);
用一些函数式编程魔法重构它，咱们有：
constshuffleArray=(arr)=>[…Array(arr.length)].map((_,i)=>Math.floor(Math.random()*(i+1))).reduce((shuffled,r,i)=>shuffled.map((num,j)=>j===i?shuffled[r]:j===r?shuffled[i]:num),arr);//[2,4,1,3,5](varies)console.log(shuffleArray([1,2,3,4,5]));
这以O(n2)时刻复杂度（二次）运转，而且可能会导致大型数组出现功能问题，但它是一种高雅的处理计划。此外，与第一种办法不同，它不会改变原始数组。
另一种函数式办法运用Arraysort()办法的完成办法来随机摆放数组。
constshuffleArray=(arr)=>arr.sort(()=>Math.random()-0.5);constarr=[1,2,3,4,5];//[5,2,4,1,3](varies)console.log(shuffleArray(arr));
由于它运用了sort()，因而，它的运转时刻复杂度为O(nlogn)，而且比前面的办法具有更好的功能。
4.按目标特点对数组进行分组
有时咱们需要运用它们都具有的特定特点对一组目标进行分组，例如，按国家/区域对用户进行分组，按出版年份对书本进行分组，按色彩对汽车进行分组等。
在下面的示例中，咱们依据姓名的长度将人物目标分组到一个数组中。
constgroupBy=(arr,groupFn)=>{constgrouped={};for(constobjofarr){constgroupName=groupFn(obj);if(!grouped[groupName]){grouped[groupName]=[];}grouped[groupName].push(obj);}returngrouped;};constpeople=[{name:’Matt’},{name:’Sam’},{name:’John’},{name:’Mac’},];constgroupedByNameLength=groupBy(people,(person)=>person.name.length);/**{‘3′:[{name:’Sam’},{name:’Mac’}],’4′:[{name:’Matt’},{name:’John’}]}*/console.log(groupedByNameLength);
这是单行代码的处理计划：
constgroupBy=(arr,groupFn)=>arr.reduce((grouped,obj)=>({…grouped,[groupFn(obj)]:[…(grouped[groupFn(obj)]||[]),obj],}),{});constpeople=[{name:’Matt’},{name:’Sam’},{name:’John’},{name:’Mac’},];constgroupedByNameLength=groupBy(people,(person)=>person.name.length);/**{‘3′:[{name:’Sam’},{name:’Mac’}],’4′:[{name:’Matt’},{name:’John’}]}*/console.log(groupedByNameLength);
5.回转字符串
咱们能够在JavaScript中运用反向for循环来回转字符串，如下所示：
constreverseString=(str)=>{letreversed=”;for(leti=str.length-1;i>=0;i–){constch=str[i];reversed+=ch;}returnreversed;};constreverse=reverseString(‘javascript‘);console.log(reverse);//tpircsavaj
可是再一次，咱们能够运用强大的内置数组办法，如reverse()和join()来创立一个做相同工作的单行代码。
constreverseString=(str)=>str.split(”).reverse().join(”);constreverse=reverseString(‘javascript’);console.log(reverse);//tpircsavaj
6.生成随机的十六进制色彩
十六进制色彩代码是指定RGB色彩的一种办法。它们具有#RRGGBB格局，其间RR代表红色，GG代表绿色，BB代表蓝色。每种色彩的值规模从0到255，并以十六进制格局表示-0到FF。
这个单行生成一个随机的十六进制色彩并回来成果。
constrandomHexColor=()=>`#${Math.random().toString(16).slice(2,8).padEnd(6,’0′)}`;console.log(randomHexColor());//#7a10ba(varies)console.log(randomHexColor());//#65abdc(varies)
7.获取数组的平均值
这是很多问题中的另一个问题，其间触及循环的处理计划能够运用一种或多种Array办法来缩短。
因而，尽管咱们能够像这样获得数组中数字的平均值：
constgetAverage=(arr)=>{letsum=0;for(constnumofarr){sum+=num;}returnsum/arr.length;};constarr=[5,13,9,11,10,15,7];constaverage=getAverage(arr);console.log(average);//10
Arrayreduce()办法让咱们创立了这个紧凑的单行代替计划：
constgetAverage=(arr)=>arr.reduce((sum,num)=>sum+num,0)/arr.length;constarr=[5,13,9,11,10,15,7];constaverage=getAverage(arr);console.log(average);//10
8.查看两个数组是否包括相同的值
这是一个保证两个数组包括相同元素（以任何顺序）而且这些元素在两个数组中出现相同次数的问题。
运用for循环，咱们能够完成以下处理计划：
constareEqual=(arr1,arr2)=>{if(arr1.length===arr2.length){for(constnumofarr1){if(!arr2.includes(num)){returnfalse;}}returntrue;}returnfalse;};constarr1=[1,2,3,4];constarr2=[3,4,1,2];constarr3=[1,2,3];console.log(areEqual(arr1,arr2));//trueconsole.log(areEqual(arr1,arr3));//false
运用Arraysort()和join()办法，咱们能够创立这个单行代替计划：
constareEqual=(arr1,arr2)=>arr1.sort().join(‘,’)===arr2.sort().join(‘,’);constarr1=[1,2,3,4];constarr2=[3,4,1,2];constarr3=[1,2,3];console.log(areEqual(arr1,arr2));//trueconsole.log(areEqual(arr1,arr3));//false
9.从数组中删除重复项
咱们能够像这样从数组中删除重复项：
constremoveDuplicates=(arr)=>{constresult=[];for(constnumofarr){if(!result.includes(num)){result.push(num);}}returnresult;};constarr=[1,2,3,4,5,3,1,2,5];constdistinct=removeDuplicates(arr);console.log(distinct);//[1,2,3,4,5]
可是咱们能够运用Set()构造函数在短短一行中删除重复项：
constremoveDuplicates=(arr)=>[…newSet(arr)];constarr=[1,2,3,4,5,3,1,2,5];constdistinct=removeDuplicates(arr);console.log(distinct);//[1,2,3,4,5]
10.将Map转换为JSON
这个简略的函数让咱们能够快速将Map目标转换为JSON字符串而不会丢失任何信息：
constmapToJson=(map)=>JSON.stringify(Object.fromEntries(map));constmap=newMap([[‘user1′,’John’],[‘user2′,’Kate’],[‘user3′,’Peter’],]);constjson=mapToJson(map);//{“user1″:”John”,”user2″:”Kate”,”user3″:”Peter”}console.log(json);
11.将JSON转换为Map
另一个一行能够回转上面的转换。以下函数会将JSON字符串转换为Map目标。
constjsonToMap=(json)=>newMap(Object.entries(JSON.parse(json)));constjson='{“user1″:”John”,”user2″:”Kate”,”user3″:”Peter”}’;constmap=jsonToMap(json);//Kateconsole.log(map.get(‘user2’));//Map(3){‘user1’=>’John’,’user2’=>’Kate’,’user3’=>’Peter’}console.log(map);
12.将蛇形字符串转换为驼峰大小写
在蛇形字符串中，每个单词由下划线(_)分隔并以小写字母最初，例如：variable_name、bread_and_eggs等。
可是，关于驼峰式字符串，第一个单词以小写字母最初，后边的单词均以大写字母最初。单词之间没有空格或标点符号。驼峰式字符串的示例有：variableName、breadAndEggs等。
运用这个简练的函数，咱们能够将任何蛇形大小写的字符串转换为驼峰大小写。
constsnakeToCamelCase=(s)=>s.toLowerCase().replace(/(_\w)/g,(w)=>w.toUpperCase().substr(1));conststr1=’learn_javascript’;conststr2=’coding_beauty’;console.log(snakeToCamelCase(str1));//learnJavaScriptconsole.log(snakeToCamelCase(str2));//codingBeauty
13.生成随机UUID
“UUID”是大学仅有标识符的首字母缩写词。UUID是一个128位的值，可仅有标识Internet上的目标或实体。
这个单行生成一个随机UUID：
constgenerateRandomUUID=(a)=>a?(a^((Math.random()*16)>>(a/4))).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,generateRandomUUID);console.log(generateRandomUUID());//f138f635-acbd-4f78-9be5-ca3198c4cf34console.log(generateRandomUUID());//8935bb0d-6503-441f-bb25-7bc685b5b5bc
14.条件流操控
咱们能够运用嵌套的三元运算符将if…else或switch句子转换为单行句子。考虑一个回来特定规模内数字的英文单词形式的函数。
运用if…else句子，这样的函数能够这样完成：
constgetNumWord=(num)=>{if(num===1){return’one’;}elseif(num===2){return’two’;}elseif(num===3){return’three’;}elseif(num===4){return’four’;}elsereturn’unknown’;};console.log(getNumWord(1));//oneconsole.log(getNumWord(3));//threeconsole.log(getNumWord(7));//unknown
运用switch…case句子：
constgetNumWord=(num)=>{switch(num){case1:return’one’;case2:return’two’;case3:return’three’;case4:return’four’;default:return’unknown’;}};console.log(getNumWord(1));//oneconsole.log(getNumWord(3));//threeconsole.log(getNumWord(7));//unknown
现在运用嵌套的三元组来创立单行代码：
constgetNumWord=(num)=>num===1?’one’:num===2?’two’:num===3?’three’:num===4?’four’:’unknown’;console.log(getNumWord(1));//oneconsole.log(getNumWord(3));//threeconsole.log(getNumWord(7));//unknown
咱们现已了解了针对常见JavaScript编程问题的简明处理计划。咱们看到许多实例，其间包括多个句子的指令式处理计划被转换为运用各种内置办法和言语结构的声明式单行代码。
这些紧凑的处理计划有时功能和可读性较低，但运用它们能够证明您的编程才能和对言语的掌握程度。运用任何一种办法，咱们都是需要依据详细的情况来运用。

好玩的js代码

许多人认为编程言语仅仅用于工作，没有什么乐趣，其实，只要咱们发挥奇思妙想，再呆板的东西也有风趣的一面。这篇文章告诉大家：使用JavaScript，能够做许多许多风趣的工作。以下代码拷贝到地址栏回车即可运转，赶紧试试吧。
1.网页射击游戏
这个游戏能够在任何网页里面玩，把下面代码粘贴到地址栏回车，按空格键进行射击，W键可前进，A、D键或者方向键可改动射击方向。
javascript:var%20s%20=%20document.createElement(‘script’);s.type=’text/javascript’;document.body.appendChild(s);s.src=’http://erkie.github.com/asteroids.min.js’;void(0);
2.让图片飞起来
只要把下面的代码贴到浏览器的地址栏里然后按Enter键，当时网页的所有图片都将动起来。
javascript:R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;varDI=document.getElementsByTagName(“img”);DIL=DI.length;functionA(){for(i=0;i
3.让网页可修正
此JavaScript代码，能够让你实时修正任何的网页，在Firefox中，你乃至能够把修正的网页保存到起来，关于网页设计者来说，这个功能能够辅助完善页面作用。
javascript:document.body.contentEditable=’true’;document.designMode=’on’;void(0);
4.让浏览器抖起来
改动浏览器窗口尺度到普通模式，可能半屏的作用是最好的。把下面的代码贴到地址栏，按Enter键（形似只要IE有作用）。
javascript:functionShw(n){if(self.moveBy){for(i=35;i>0;i–){for(j=n;j>0;j–){self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0);}}}}Shw(6);
5.地址栏计算器
哈哈，这个以前还真不会想到，地址栏便是个计算器嘛。
javascript:alert(4+5+6+7+(3*10));