Introduktion til mønstre i JavaScript

Mønstre er et af de almindelige Java-mønsterprogrammer, der er vidt brugt til at forbedre logisk tænkning og forbedre viden om flowkontrol. Mønstre er objektets genanvendelige modeller og interaktioner. Hvert mønster har et navn, og når man diskuterer komplicerede designalternativer, bliver det en del af et ordforråd. Hver udvikler har ambitioner om at skrive håndterbar, læsbar og genanvendelig kode. Struktureringskode bliver mere vigtig med større applikationer. Designmønstre er vigtige for at løse denne udfordring - tilvejebringelse af en organisationsstruktur for almindelige problemer i en bestemt situation. I denne artikel vil vi diskutere mønstre i JavaScript.

Webudviklere af JavaScript kommunikerer ofte med designmønstre, når de producerer applikationer, selv uden at vide det. Selvom der bruges forskellige designmønstre i nogle situationer, har designere af JavaScript en tendens til at bruge nogle mønstre mere end andre. Et designmønster er en genanvendelig løsning til almindelige softwaredesignproblemer. Designmønstre er den bedste praksis, som erfarne udviklere af softwarebrug. Et mønster af design kan betragtes som en skabelon til scripting.

Hvorfor bruge mønstre?

Mange programmører mener mønstre er spild af tid, eller de ved ikke, hvordan de skal anvendes korrekt. Men ved hjælp af et passende designmønster kan du hjælpe dig med at skrive en bedre og mere forståelig kode, og fordi den er lettere at forstå, kan koden let bevares. Det vigtigste er, at mønstre giver et udbredt ordforråd for software-designere at tale om. De demonstrerer straks nogen, der lærer koden til formålet med din kode.

Mønstre i JavaScript (Antal mønstre, Stjermønstre, tegnmønstre)

Lad os diskutere mønstre i JavaScript i detaljer.

1. Antal mønstre

Program 1


JavaScript Number Patterns
var num;
var no=prompt("Please provide a number for the no of rows to be print in a pattern…");
for(var m=1;m<=no;m++)
(
for(var n=1;n<=m;n++)
(
document.write("0"+n+" ");
)
document.write("
");
)

Gem filnavnet med dit valg, og dobbeltklik på den fil. Det åbnes i den JavaScript-aktiverede browser og viser output som vist nedenfor:

Program 2


JavaScript Number Patterns
for(m=1; m <= 5; m++)
(
for(n=1; n<=m; n++)
(
document.write(n);
if(n == m)
continue;
else
document.write(' ');
)
document.write('
');
)

Kør programmet i browseren, så ser du nedenstående output:

Program 3


JavaScript Star Patterns
var m, n;
for(m=1;m<=5;m++)
(
for(n=m;n<=5;n++)
(
document.write(""+n+" ");
)
document.write('
');
)

Kør programmet i browseren, så ser du nedenstående output:

Program 4


JavaScript Number Patterns
var m, n, count = 5;
for (m = 1; m <= count; m++) (
for (n = 1; n <= m; n++) (
document.write(""+m+" ");
)
document.write('
');
)

Kør programmet i browseren, så ser du nedenstående output:

Program 5


JavaScript Number Patterns
var num = 5;
var m, n;
for (m = 1; m < num; m++) (
for (n = 1; n <= m; n++)
document.write(""+n+" ");
document.write('
');
)
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write(""+n+" ");
document.write('
');
)
document.write('
');

Kør programmet i browseren, så ser du nedenstående output:

Program 6


JavaScript Number Patterns
var num = 5;
var m, n;
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write(""+n+" ");
document.write('
');
)
for (m = 1; m <= num; m++) (
for (n = 1; n <= m; n++)
document.write(""+n+" ");
document.write('
');
)
document.write('
');

Kør programmet i browseren, så ser du nedenstående output:

Program 7


JavaScript Number Patterns
var num, p, q, m, n;
num = 5;
for (m = 1; m <= num; m++) (
if (m % 2 == 0) (
p = 1;
q = 0;
) else (
p = 0;
q = 1;
)
for (n = 1; n <= m; n++)
if (n % 2 == 0)
document.write(""+p+" ");
else
document.write(""+q+" ");
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 8


JavaScript Number Patterns
var rows, m, n, num = 1;
rows = 5;
for (m = 1; m <= rows; m++) (
for (n = 1; n <= m; n++)
document.write(num++);
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 9


JavaScript Number Patterns
var i = 5;
while (i >= 1) (
var j = 5;
while (j >= i) (
document.write(""+j+" ");
j--;
)
i--;
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 10


JavaScript Number Patterns
var m, n, k;
for(m=1;m<=4;m++)
(
for(n=4;n>=(m-1)*2-1;n--)
document.write(" ");
document.write(m);
for(n=2;n<=(m-1)*4;n++)
document.write(" ");
if(m>1)
document.write(m);
document.write("
");
)
for(m=3;m>=1;m--)
(
for(n=4;n>=(m-1)*2-1;n--)
document.write(" ");
document.write(m);
for(n=2;n<=(m-1)*4;n++)
document.write(" ");
if(m>1)
document.write(m);
document.write("
");
)

Kør programmet, så får du nedenstående output:

Program 11


JavaScript Number Patterns
var m, n;
for(m=1;m<=5;m++)
(
for(n=5;n>=m;n--)
(
document.write(i);
)
document.write("
");
)

Kør programmet, så får du nedenstående output:

Program 12


JavaScript Number Patterns
var m, n, k;
for(m=4;m>=1;m--)
(
for(n=1;n<=4;n++)
(
if(n<=m)
document.write(n);
else
document.write(" ");
)
for(n=4;n>=1;n--)
(
if(n<=m)
document.write(n);
else
document.write(" ");
)
document.write("
");
)

Kør programmet, så får du nedenstående output:

Programmer 13


JavaScript Number Patterns
var m, n, k;
k=1;
for(m=1;m<=5;m+=2)
(
for(n=5;n>=1;n--)
(
if(n>m)
document.write(" ");
else
document.write(k++);
)
document.write("
");
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 14


JavaScript Number Patterns
var i, j;
for(i=1;i<=4;i++)
(
for(j=1;j<=i;j++)
document.write(j);
for(j=i-1;j>=1;j--)
document.write(j);
document.write("
");
)

Kør programmet, så får du nedenstående output:

Program 15


JavaScript Number Patterns
var i, j, k;
for(i=1;i<=5;i++)
(
for(j=1;j<=5;j++)
(
if(j<=i)
document.write(j);
else
document.write(" ");
)
for(j=5;j>=1;j--)
(
if(j<=i)
document.write(j);
else
document.write(" ");
)
document.write("
");
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 16


JavaScript Number Patterns
var m, n, k;
for (m=1;m<=5;m++)
(
for(k=m;k>1;k--)
document.write(k);
for(n=1;n<=6-m;n++)
document.write(n);
document.write(" ");
)



JavaScript Number Patterns
var m, n, k;
for (m=1;m<=5;m++)
(
for(k=m;k>1;k--)
document.write(k);
for(n=1;n<=6-m;n++)
document.write(n);
document.write(" ");
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 17


JavaScript Number Patterns
var i, j;
for(i=1;i<=10;i++)
(
for(j=1;j<=i;j++)
(
document.write(i*j);
)
document.write("
");
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 18


JavaScript Number Patterns
var m, n, num=5;
for(m=num; m>1; m--)
(
for(n=num;n>=1;n--)
(
if(n>m) document.write(n);
else document.write(m);
)
for(n=2;n<=num;n++)
(
if(n>m) document.write(n);
else document.write(m);
)
document.write("
");
)
for(m=1; m<=num; m++)
(
for(n=num;n>=1;n--)
(
if(n>m) document.write(n);
else document.write(m);
)
for(n=2;n<=num;n++)
(
if(n>m) document.write(n);
else document.write(m);
)
document.write("
");
)

Udfør ovenstående kode, så får du output som vist nedenfor:

2. Stjernemønstre

Program 1


JavaScript Star Patterns
var m, n;
for(m=1; m <= 5; m++)
(
for(n=1; n<=m; n++)
(
document.write('*');
)
document.write('
');
)

Kør programmet, så får du nedenstående output:

Program 2


JavaScript Star Patterns
var m, n;
for(m=5;m>=1;m--)
(
for(n=1;n<=m;n++)
(
document.write('*');
)
document.write('
');
)

Kør programmet, så får du nedenstående output:

Program 3


JavaScript Number Patterns
var num = 5;
var m, n;
for (m = 1; m < num; m++) (
for (n = 1; n <= m; n++)
document.write(" * ");
document.write('
');
)
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write(" * ");
document.write('
');
)
document.write('
');

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 4


JavaScript Star Patterns
var num = 5;
var m, n;
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write(" * ");
document.write('
');
)
for (m = 1; m <= num; m++) (
for (n = 1; n <= m; n++)
document.write(" * ");
document.write('
');
)
document.write('
');

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 5


JavaScript Star Patterns
var i, j, k;
var n = 5;
for (i = 1; i <= n; i++) (
for (j = 1; j <= i; ++j)
document.write(j);
for (k = n - i; k >= 1; k--)
document.write("*");
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 6


JavaScript Star Patterns
function pyramid(n) (
for(var i=1; i<= n; i++)(
var myval = ' '.repeat(ni);
var myval1 = '*'. repeat(i*2 -1)
console.log(myval + myval1 + myval);
)
)
pyramid(5);

Udfør ovenstående kode, så får du output i konsollen som vist på billedet herunder:

3. Karaktermønstre

Program 1


JavaScript Character Patterns
var m, n;
for(m=1; m <= 5; m++)
(
for(n=1; n<=m; n++)
(
document.write('A');
)
document.write('
');
)

Kør programmet, så får du nedenstående output:

Program 2


JavaScript Character Patterns
var m, n;
for(m=5;m>=1;m--)
(
for(n=1;n<=m;n++)
(
document.write('A');
)
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 3


JavaScript Character Patterns
var num = 5;
var m, n;
for (m = 1; m < num; m++) (
for (n = 1; n <= m; n++)
document.write(" # ");
document.write('
');
)
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write(" & ");
document.write('
');
)
document.write('
');

Kør programmet, så får du nedenstående output:

Program 4


JavaScript Character Patterns
var num = 5;
var m, n;
for (m = 1; m < num; m++) (
for (n = 1; n <= m; n++)
document.write("$");
document.write('
');
)
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write("#");
document.write('
');
)
document.write('
');

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 5


JavaScript Character Patterns
var num = 5;
var m, n;
for (m = num; m >= 0; m--) (
for (n = 1; n <= m; n++)
document.write("A");
document.write('
');
)
for (m = 1; m <= num; m++) (
for (n = 1; n <= m; n++)
document.write("B");
document.write('
');
)
document.write('
');

Udfør ovenstående kode, så får du output som vist nedenfor:

Program 6


JavaScript Character Patterns
var i, j, k;
var n = 5;
for (i = 1; i <= n; i++) (
for (j = 1; j <= i; ++j)
document.write(j);
for (k = n - i; k >= 1; k--)
document.write("$");
document.write('
');
)

Udfør ovenstående kode, så får du output som vist nedenfor:

Konklusion - Mønstre i JavaScript

I denne artikel har vi set forskellige typer mønstre såsom antal, stjerne og karaktermønstre. Mønsteret er et ord, der bruges i software engineering til at løse et bestemt genanvendeligt software design problem. Til flere formål er designmønstre nyttige. De er demonstreret løsninger, der er forsøgt og testet af brancheveteraner. Det er stærke metoder, der løser problemer på en almindeligt accepteret måde og afspejler den branche-førende udvikler erfaring og ideer, der hjalp med at definere dem. Mønstre øger også genbrugbarheden og læsbarheden af ​​din software, mens den accelererer udviklingsprocessen markant. Mønstre er interessante at udforske på ethvert programmeringssprog såvel som et overbevisende emne.

Anbefalede artikler

Dette er en guide til mønstre i JavaScript. Her diskuterer vi forskellige typer mønstre i JavaScript med prøvekode i detaljer. Du kan også gennemgå vores andre foreslåede artikler -

  1. Mønstre i C ++
  2. Stjernemønstre i C.
  3. Mønstre i C-programmering
  4. Mønstre i Java
  5. Top 3 typer mønstre i C #
  6. Arbejde med C-programmering af matrixmultiplikation
  7. Omfattende guide til nummermønstre i Java

Kategori: