{"id":92135,"date":"2022-10-12T16:18:26","date_gmt":"2022-10-12T21:18:26","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/11-javascript-one-liners-du-bor-kanna-till\/"},"modified":"2022-10-12T16:18:26","modified_gmt":"2022-10-12T21:18:26","slug":"11-javascript-one-liners-du-bor-kanna-till","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/11-javascript-one-liners-du-bor-kanna-till\/","title":{"rendered":"11 JavaScript One-liners du b\u00f6r k\u00e4nna till"},"content":{"rendered":"
\n

JavaScript \u00e4r ett av de mest popul\u00e4ra programmeringsspr\u00e5ken. Det anv\u00e4nds f\u00f6r att utveckla webbplatser, webbapplikationer, webbservrar, spel, mobilappar och mer.<\/p>\n

JavaScripts syntax, s\u00e4rskilt dess anonyma funktioner och pilfunktioner, till\u00e5ter kortfattad kod. Du kan uppn\u00e5 mycket med bara en rad kod.<\/p>\n

I den h\u00e4r artikeln f\u00e5r du l\u00e4ra dig om 11 JavaScript-one-liners som hj\u00e4lper dig att koda som ett proffs.<\/p>\n

<\/span> 1. Hur man konverterar en str\u00e4ng fr\u00e5n snake_case till camelCase<\/span><\/h2>\n

En str\u00e4ng i snake_case anv\u00e4nder understreckstecknet f\u00f6r att separera varje ord. Varje ord i en snake_case-str\u00e4ng b\u00f6rjar vanligtvis med en liten bokstav, \u00e4ven om varianter finns. En camelCase-str\u00e4ng b\u00f6rjar med en liten bokstav, varje efterf\u00f6ljande ord b\u00f6rjar med en stor bokstav. Det finns inga mellanslag eller skiljetecken i en camelCase-str\u00e4ng.<\/p>\n

Programmeringsspr\u00e5k \u2013 och programmerare \u2013 anv\u00e4nder olika skiftl\u00e4gesscheman f\u00f6r variabel- och metodnamn.<\/p>\n

Exempel p\u00e5 snake_case-str\u00e4ngar<\/strong>: hello_world, this_is_en_variable, SCREAMING_SNAKE_CASE<\/p>\n

Exempel p\u00e5 camelCase-str\u00e4ngar<\/strong>: helloWorld, thisIsVariable, makeUseOf<\/p>\n

Du kan konvertera en snake_case-str\u00e4ng till camelCase med f\u00f6ljande kod:<\/p>\n

const convertSnakeToCamel = (s) => s.toLowerCase().replace(\/(_w)\/g, (w) => w.toUpperCase().substr(1));
let s1 = \"hello_world\";console.log(convertSnakeToCamel(s1));<\/p>
let s2 = \"make_use_of\";console.log(convertSnakeToCamel(s2));<\/p>
let s3 = \"this_is_a_variable\";console.log(convertSnakeToCamel(s3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
helloWorldmakeUseOfthisIsAVariable<\/pre>\n
<\/span>  2. Hur man blandar en JavaScript-array<\/span><\/h2>\n
Att blanda en array inneb\u00e4r att slumpm\u00e4ssigt omarrangera dess element.  Du kan blanda en JavaScript-array med f\u00f6ljande kod:<\/p>\n
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
let arr1 = [1, 2, 3, 4, 5];console.log(shuffleArray(arr1));<\/p>
let arr2 = [12, 34, 45, 43];console.log(shuffleArray(arr2));<\/p>
let arr3 = [2, 4, 6, 8, 10];console.log(shuffleArray(arr3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
[ 3, 5, 1, 4, 2 ][ 45, 34, 12, 43 ][ 4, 10, 2, 6, 8 ]<\/pre>\n
Du f\u00e5r varierande utdata \u00f6ver separata k\u00f6rningar av den h\u00e4r koden.<\/p>\n
<\/span>  3. Hur man hittar medelv\u00e4rdet f\u00f6r en matris<\/span><\/h2>\n
Medelmedelv\u00e4rdet \u00e4r summan av elementen i arrayen dividerat med antalet element.  Du kan hitta genomsnittet f\u00f6r en array i JavaScript med hj\u00e4lp av f\u00f6ljande kod:<\/p>\n
const calculateAverage = (arr) => arr.reduce((a, b) => a + b, 0) \/ arr.length;
let arr1 = [1, 2, 3, 4, 5];console.log(calculateAverage(arr1));<\/p>
let arr2 = [12, 34, 45, 43];console.log(calculateAverage(arr2));<\/p>
let arr3 = [2, 4, 6, 8, 10];console.log(calculateAverage(arr3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
333.56<\/pre>\n
<\/span>  4. Hur man uppt\u00e4cker m\u00f6rkt l\u00e4ge med JavaScript<\/span><\/h2>\n
Med kod som k\u00f6rs i en webbl\u00e4sare kan du uppt\u00e4cka m\u00f6rkt l\u00e4ge med hj\u00e4lp av f\u00f6ljande one-liner:<\/p>\n
const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;console.log(darkMode);<\/pre>\n
Uttalandet \u00e5terkommer Sann<\/strong> om m\u00f6rkt l\u00e4ge k\u00f6rs, annars kommer det tillbaka falsk<\/strong>.<\/p>\n
<\/span>  5. Hur man uppt\u00e4cker en Apple-webbl\u00e4sare med JavaScript<\/span><\/h2>\n
Du kan kontrollera om webbl\u00e4saren k\u00f6rs p\u00e5 en Apple-dator med denna enkla matchning av regulj\u00e4ra uttryck:<\/p>\n
const appleBrowser = \/Mac|iPod|iPhone|iPad\/.test(navigator.platform);console.log(appleBrowser);<\/pre>\n
Uttalandet \u00e5terkommer Sann <\/strong>om din webbl\u00e4sare k\u00f6rs p\u00e5 en Apple-enhet, annars kommer den tillbaka falsk<\/strong>.<\/p>\n
<\/span>  6. Hur man kontrollerar om en array \u00e4r tom<\/span><\/h2>\n
En array \u00e4r tom om det inte finns n\u00e5gra element i den.  Du kan kontrollera om en array \u00e4r tom med f\u00f6ljande kod:<\/p>\n
const checkEmptyArray = (arr) => !Array.isArray(arr) || arr.length === 0;
let arr1 = [1, 2, 3, 4, 5];console.log(checkEmptyArray(arr1));<\/p>
let arr2 = [];console.log(checkEmptyArray(arr2));<\/p>
let arr3 = [\"\"];console.log(checkEmptyArray(arr3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
falsetruefalse<\/pre>\n
<\/span>  7. Hur man hittar unika v\u00e4rden i en matris<\/span><\/h2>\n
F\u00f6ljande one-liner tar bort upprepade v\u00e4rden fr\u00e5n en array och l\u00e4mnar bara v\u00e4rden som intr\u00e4ffar en enda g\u00e5ng.<\/p>\n
const findUniquesInArray = (arr) => arr.filter((i) => arr.indexOf(i) === arr.lastIndexOf(i));
let arr1 = [1, 2, 3, 4, 5, 1, 2, 3];console.log(findUniquesInArray(arr1));<\/p>
let arr2 = ['W', 'E', 'L', 'C', 'O', 'M', 'E', 'T', 'O', 'M', 'U', 'O'];console.log(findUniquesInArray(arr2));<\/p>
let arr3 = [5, 5, 5, 3, 3, 4, 5, 8, 2, 8];console.log(findUniquesInArray(arr3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
[ 4, 5 ][ 'W', 'L', 'C', 'T', 'U' ][ 4, 2 ]<\/pre>\n
<\/span>  8. Hur man genererar en slumpm\u00e4ssig hex-f\u00e4rg<\/span><\/h2>\n
Hexf\u00e4rger \u00e4r ett s\u00e4tt att representera f\u00e4rger genom hexadecimala v\u00e4rden.  De f\u00f6ljer formatet #RRGGBB<\/strong>, var RR<\/strong> \u00e4r r\u00f6d, GG<\/strong> \u00e4r gr\u00f6n, och BB<\/strong> \u00e4r bl\u00e5.  V\u00e4rdena f\u00f6r hexadecimala f\u00e4rger ligger i intervallet fr\u00e5n 00 till FF, vilket anger intensiteten f\u00f6r komponenten.  Du kan generera slumpm\u00e4ssiga hex-f\u00e4rger med hj\u00e4lp av f\u00f6ljande JavaScript-kod:<\/p>\n
const randomHexColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;console.log(randomHexColor());<\/pre>\n
Produktion<\/strong>:<\/p>\n
#ff7ea1<\/pre>\n
Varje g\u00e5ng du k\u00f6r koden f\u00e5r du en slumpm\u00e4ssig hex-f\u00e4rg.<\/p>\n
<\/span>  9. Hur man konverterar grader till radianer och vice versa<\/span><\/h2>\n
Grader och radianer representerar m\u00e5ttet p\u00e5 en vinkel i geometri.  Du kan enkelt konvertera en vinkel i radianer till grader och vice versa med hj\u00e4lp av f\u00f6ljande matematiska formler:<\/p>\n
Radians = Degrees \u00d7 \u03c0\/180Degrees = Radians \u00d7 180\/\u03c0<\/pre>\n
<\/span>Konvertera grader till radianer<\/span><\/h3>\n
Du kan konvertera en vinkel i grader till radianer med hj\u00e4lp av f\u00f6ljande kod:<\/p>\n
const degreesToRadians = (deg) => (deg * Math.PI) \/ 180.0;
let temp1 = 360;console.log(degreesToRadians(temp1));<\/p>
let temp2 = 180;console.log(degreesToRadians(temp2));<\/p>
let temp3 = 120;console.log(degreesToRadians(temp3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
6.2831853071795863.1415926535897932.0943951023931953<\/pre>\n
<\/span>Konvertera radianer till grader<\/span><\/h3>\n
Du kan konvertera en vinkel i radianer till grader med hj\u00e4lp av f\u00f6ljande kod:<\/p>\n
const radiansToDegrees = (rad) => (rad * 180) \/ Math.PI;
let temp1 = 6.283185307179586;console.log(radiansToDegrees(temp1));<\/p>
let temp2 = 3.141592653589793;console.log(radiansToDegrees(temp2));<\/p>
let temp3 = 2.0943951023931953;console.log(radiansToDegrees(temp3));<\/p><\/pre>\n
Produktion<\/strong>:<\/p>\n
360180119.99999999999999<\/pre>\n
<\/span>  10. Hur man kontrollerar om koden k\u00f6rs i en webbl\u00e4sare<\/span><\/h2>\n
Du kan kontrollera om din kod k\u00f6rs i en webbl\u00e4sare med f\u00f6ljande:<\/p>\n
const isRunningInBrowser = typeof window === 'object' && typeof document === 'object';console.log(isRunningInBrowser);<\/pre>\n
Ovanst\u00e5ende kod, som k\u00f6rs i en webbl\u00e4sare, skrivs ut Sann<\/strong>.  K\u00f6rs via en kommandoradstolk, kommer den att skrivas ut falsk<\/strong>.<\/p>\n
<\/span>  11. Hur man genererar ett slumpm\u00e4ssigt UUID<\/span><\/h2>\n
UUID st\u00e5r f\u00f6r Universally Unique Identifier.  Det \u00e4r ett 128-bitars v\u00e4rde som anv\u00e4nds f\u00f6r att unikt identifiera ett objekt eller entitet p\u00e5 internet.  Anv\u00e4nd f\u00f6ljande kod f\u00f6r att generera ett slumpm\u00e4ssigt UUID:<\/p>\n
const generateRandomUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a \/ 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(\/[018]\/g, generateRandomUUID));console.log(generateRandomUUID());<\/pre>\n
Produktion<\/strong>:<\/p>\n
209b53dd-91cf-45a6-99a7-554e786f87d3<\/pre>\n
Varje g\u00e5ng du k\u00f6r koden genererar den ett slumpm\u00e4ssigt UUID.<\/p>\n
Om du vill ta en titt p\u00e5 den fullst\u00e4ndiga k\u00e4llkoden som anv\u00e4nds i den h\u00e4r artikeln, h\u00e4r \u00e4r GitHub-f\u00f6rvaret.<\/p>\n
<\/span>  F\u00e5 praktisk JavaScript-kunskap genom att bygga projekt<\/span><\/h2>\n
Det b\u00e4sta s\u00e4ttet att beh\u00e4rska alla programmeringsspr\u00e5k \u00e4r genom att bygga projekt.  Du kan anv\u00e4nda de korta knep som beskrivs i den h\u00e4r artikeln n\u00e4r du utvecklar JavaScript-projekt.  Om du \u00e4r nyb\u00f6rjare och letar efter n\u00e5gra projektid\u00e9er, b\u00f6rja med att bygga ett enkelt projekt som en Att g\u00f6ra-app, webbr\u00e4knare eller webbl\u00e4sartill\u00e4gg.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Yuvraj Chandra (80 artiklar publicerade)
<\/strong><\/p>\n
Yuvraj \u00e4r en datavetenskapsstudent vid University of Delhi, Indien.  Han brinner f\u00f6r Full Stack Web Development.  N\u00e4r han inte skriver unders\u00f6ker han djupet i olika teknologier.<\/p>\n
                            Mer fr\u00e5n Yuvraj Chandra<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n