企业官网建设流程全解析

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
在学习完这篇博客后，铁汁们会发现JS的语法是非常宽松的，这部分也并不难，函数部分跟Java部分差异还是比较大的，但是要比Java简单很多🐵
🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，运算符

JS里面的运算符其实跟Java里面差不多，一样的铁汁们一看就懂
只有一个不一样，那就是比较相等的运算符，在Java中，比较数字相等就是用“==”，在JS中，再看下双等号的效果：

在Java中，字符串跟数字这样比较就会报错，但是我们上篇说了，JS是弱语言类型，这里不仅可以比较，而且比较的结果还是true。

<script>leta=10;letb="10";console.log(a==b);</script>

在JS中，双等号只能比较内容一样不一样，不能看数据类型，那么如果我们想要比较的精准一些，只有比较对象数据类型和数据内容都相同时，才为true，那就要用“===”.

再用三等号试一次：

<script>leta=10;letb="10";console.log(a===b);</script>

那这时候结果就变成false了（想要比较的更精准一些，就使用三等号）

2，if语句

可以将JS跟我们学的条件语句结合起来，在浏览器页面上进行一些逻辑判断
再学习JS中的一个内置函数prompt，它会在页面上显示出一个包含输入框的对话框（对话框中显示在调用函数时在括号中输入的文本），输入并点击确定后，这个函数返回我们在对话框的输入，这里我们无论输入什么，都会转化为字符串类型来返回
如下所示：

<script>letnum=prompt("请输入一个数字:");if(num%2==0){alert("这个数字是偶数");}elseif(num%2==1){alert("这个数字是奇数");}else{alert("非法输入");}</script>

这里输入一个偶数，再点击确定后，就会有相应的判断（如下图）

接下来验证一下，prompt函数是不是无论输入什么，都转成字符串类型来返回的，
这里我们输入完点击确认后到工作台看一下：

<script>letnum=prompt("请输入一个数字:");console.log(typeof(num));</script>

不只是条件语句，还有我们学过的三元表达式，在这里也可以使用：

<script>alert(1==1?true:false);</script>

3，switch语句（调试技巧）

switch语句跟Java的用法也是基本上相似。
这里使用switch语句写个用户输入数字，然后网页展示文字星期几的代码

<script>letnum=prompt("请用数字输入今天是星期几:");num=parseInt(num);switch(num){case1:alert("星期一");break;case2:alert("星期二");break;case3:alert("星期三");break;case4:alert("星期四");break;case5:alert("星期五");break;case6:alert("星期六");break;case7:alert("星期日");break;default:alert("您的输入不符合要求");}</script>

在前面if语句已经讲了这个prompt内置函数，无论我们输入什么，它都返回的是字符串
但是在switch判断中是以数字来判断的，因此就要将字符串转为数字。
这里的parseInt就跟Java中的不同，它是一个全局函数，而不是一个类方法，因此不需要像Java中那样通过Integer内置类来调用

在Java中，可以通过调试来找出哪里出错了，虽说调试没有直接粘给AI来的快，但是它可以锻炼我们查找问题的能力，那在JS中可不可以调试呢？

当然是可以的，调试是在网页页面进行的，以刚刚写的switch语句判断星期几为例，在网页中运行，右键鼠标，点击检查，再点击进入源代码：

调试的一个核心就是打断点，点击数字打上一个断点，然后刷新一下网页（可以点网页左上角的循环图标来刷新，也可以使用快捷键ctrl + shift + r刷新网页），程序就运行到了我们打断点的地方。

这时候在网页中也会出来这样一个图标，我们点击左面的三角，就是不进行调试，程序直接运行，我们点击右面的箭头，就是直接跳转到下个断点处或者逻辑结束处（此处也可以直接使用快捷键f11）

4，循环语句

在JS中，也可以使用while，for这些循环，代码跟Java里面几乎是一样的。
这里写个for循环，判断100–200之间的第一个3的倍数。

<script>for(i=100;i<=200;i++){if(i%3==0){break;}}alert("100——200之间第一个能被3整除的数字是"+i);</script>

代码非常简单，但是有的细心的铁汁可能会感觉很奇怪，那就是这个在网页中运行时为什么没有报错呢？
首先就是i这个变量根本就没有定义，其次，这个i出了for循环就应该被销毁了呀，为什么在alert语句中还能继续用呢

在JS中，其实语法规则是这样的，不定义变量，直接写，就像我们这道题里面的i，那么这个变量就是全局变量，我们在写的时候定义了，那这个变量就成了局部变量，这样的定义大家刚开始会觉得很奇怪，但是接触一段时间，就可以适应了。

可以试下在for循环中把i定义为局部变量会怎么样，我们在网页中会发现无论怎样刷新都弹不出来对话框，到工作台检查一下，就会发现代码运行出错了，这里因为i是局部变量，出了for循环就被销毁了，因此再使用就会报错

for(let i = 100;i <= 200;i++)

5，数组

JS中的数组部分跟Java中的差异还是比较大的，这部分是一个重点内容

1，数组的创建

publicstaticvoidmain(String[]args){int[]array1=newint[3];int[]array2=newint[]{1,2,3};int[]array3={1,2,3};}

在Java中，创建数组无非就是上面几种方法，但是在JS中数组的创建，会显得更加随便一些。

<script>let array1=[];let array2=newArray();let array=[1,2,"hello world",true];</script>

首先就是我们可以直接定义一个空数组，里面什么都不放，包括这个数组的长度也不定义；而且，在JS中，数组的元素不写在大括号，而是写在方括号中；最后，我们前面说了，JS是弱语言类型，因此一个数组中是可以存各种类型的元素的。

那可能就有铁汁会问，这个数组是什么数据类型呢？？？
写代码试一下即可：

<script>letarray=[1,2,3,4];console.log(typeof(array));</script>

因此，这里的数组就是一个对象。

2，元素的获取

元素的获取，跟Java中差的也不多，但是规则就随便多了

<script>letarray=[1,2,3,4];console.log(array);console.log(array[2]);</script>

当直接在工作台上输出数组名时，工作台就会输出数组的所有信息（元素，长度）

在JS中是否有数组下标越界异常呢？同样写代码来试一下：

<script>letarray=[1,2,3,4];console.log(array[10]);console.log(array[-10]);</script>

这里无论怎么越界，就算是写负数，都不会报错，而是在工作台上显示未定义的。

接下来再来看一段代码：

<script>letarray=[1,2,3,4];array="hello JS";console.log(array);console.log(typeof(array));</script>

这里再把一个字符串赋值给数组，看看会怎么样：

这里就会发现，这个数组转为了一个字符串，也就是string类型，而原来数组里面的元素，因为数组转为了字符串，因此也都不存在了。

这个其实就是因为JS是动态语言，我们定义了一个变量，可以随意的转变数据类型，关于动态语言的概念我们在上篇博客中讲过，大家可以回去复习一下。

另外，大家在JS中一定不要随便用数字或者字符串给数组赋值，这样原来数组里面的元素就都会被覆盖，可能就会丢失！！！

3，新增数组元素

1，修改length

在Java中，如果一个数组满了，想在里面新增元素，那通常就是再创建一个大的数组，然后把这个数组给替换掉，但是在JS中新增数组元素就非常的简单

再看这样一段代码：

<script>letarray=[1,2,3,4];array.length=10;array[7]=5;console.log(array);</script>

这里我们想添加元素，可以直接给数组进行扩容，就非常的方便

在Java中，写一个整数类型的数组时，如果没有给数组元素赋值，那么就会默认被赋值为0，那在JS中是怎样的呢？
我们刚刚看打印，就会发现没有赋值的地方在工作台上没有显示，那里是什么呢，再写代码来看下：

<script>letarray=[1,2,3,4];array.length=10;array[7]=5;console.log(array);console.log(array[5]);</script>

其实没被赋值的地方就是undefined（未定义的）

2，通过下标新增

在前面说过，JS中的数组给人一种很随便的感觉，能直接修改length相比Java就很随便了
但是看完这里通过下标来新增，绝对会认为刚刚的通过length来新增都是麻烦的😄

是的，这里只写个这个数组的长度就直接从4扩到了101，是不是非常随便。

<script>letarray=[1,2,3,4];array[100]=10;console.log(array);</script>

因此，在JS中写数组正常想写出来报错，其实是非常难的😅

3，通过push新增

这样写的一个好处就是有几个元素就占多少空间，对比其他方法，是一个空间效率很优的选择

<script>letarray=[];array.push(1);array.push(2);console.log(array);</script>

4，元素的删除

数组的删除使用的是splice函数，第一个参数指的是从数组的几号下标开始删除，第二个参数指的是从这个下标开始删除几个元素。在删除元素之后，数组的长度会减少，删除位置后面的元素也会超前补
这里写段代码演示一下：

<script>letarray=[1,2,3,4];console.log(array);array.splice(0,1);console.log(array);</script>

这里的运行结果大家看了可能会比较懵逼：那就是刚上来还没有删除的时候，我们在控制台上显示数组，这时候数组元素就已经被删除了，那这是为什么呢？？？

这是因为数组是 “引用类型”（存储的是内存地址，而非值本身）

当使用console.log输出引用类型时，控制台默认不会立即显示 “当前时刻的快照”，而是存储一个对该数组的引用。当你后续在控制台中展开这个数组查看详情时，控制台会实时读取该数组的最新状态—— 此时数组已经被splice修改过了，所以你看到的就是删除后的结果

用toString()方法，这里看到的就不是实时读取的。

<script>letarray=[1,2,3,4];console.log(array.toString());array.splice(0,1);console.log(array.toString());</script>

6，函数

1，函数的书写格式

在JS中的函数跟Java中差别还是比较大的，示例如下：

<script>functionhello(){console.log('hello world');}hello();</script>

在JS中，函数统一使用function + 函数名来定义

像Java中那样定义是public还是private，是void无返回值类型，还是有返回值类型，写不写return语句都可以

当然也可以写有参数的，这里在传入参数时不用写参数类型let，写了反而会报错。

<script>functionhello(name){console.log('hello'+name);}hello('xiaoming');</script>

除此之外，有参数的函数在调用时实参个数和形参个数也不需要相等。

<script>functionhello(name){console.log('hello'+name);}hello();hello('mark',1,2,true,'hello world');</script>

大家看下这段代码，对于hello这个函数，无论是否传参数去调用，还是说多传一大堆乱七八糟的参数，都不会报错（这些东西在之前学的C或者Java中是不可能的😄）

大家看一下，第一个没传参数，后面就直接打印undefined，那第二个多传了一堆乱七八糟的参数，对运行照样也没有影响，因此，在JS中，形参和实参是不需要对应的。

但是语法上松散，不代表我们能乱写，写的时候还是要把形参和实参对应上🐵

2，函数表达式

1，命名函数表达式

函数表达式的语法跟Java中的函数区别还是比较大的。
核心就是将函数作为值赋值给变量，后面可以直接通过这个变量来调用函数。

示例如下：

<script>let result=functionfac(){ num=1;for(i=1;i<=5;i++){ num*=i;}returnnum;} console.log(result());</script>

这里就是把函数赋值给变量，后续通过变量名加括号，来调用函数（是不是很新颖🐵）

2，匿名函数表达式

再看一段代码，可能刚看这段代码大家会觉得风格特别奇怪：

<script>letb=function(){console.log(arguments);}b();b(1,2,3);</script>

首先就是这个函数没有名字，直接赋值给了变量b，这就是匿名函数

这里函数的意思就是在网页工作台上输出显示一个叫做arguements的东西，它是一个类数组对象，它会自动收集函数被调用时传入的所有参数，无论函数定义时是否声明了形参。

这里试一下，这个函数没有定义形参，先什么参数都不传调用，再传入3个数字来调用，看看在工作台中的效果：

'可以看到，arguements就是收集了传入的参数，是一个很类似数组的东西，什么参数都不传，length就是0，随便传入三个参数，length就是3

3，函数作用域

首先补充个东西，这个在前面也提到过，这里就可以正常显示

<script>for(i=0;i<=100;i++){}console.log(i);</script>

但是这样写，就会报错

<script>for(leti=0;i<=100;i++){}console.log(i);</script>

原因是在for循环中，如果直接写i，那么i就是全局变量，跳出for循环后不会被销毁，如果定义了下i，那么i就成了局部变量，外面调用就会报错
这里for循环跟函数销毁的规则不太一样，大家要注意一下

接着说函数，看下面这段报错的代码：这里num一出函数就会直接被销毁掉，那后面再去调用就肯定不行了，这点跟Java中是一样的。

<script>functiontest(){letnum=200;}console.log(num);</script>

当函数内外都定义了变量，那在函数中使用时函数中写的变量优先级更高，这个也是老生常谈了。

<script>letnum=100;functiontest(){letnum=200;console.log(num);}test();</script>

下面这段代码是函数包函数，铁汁们肯定一眼就能看出来在工作台中的效果，这里num的使用就体现了函数的作用域链。

<script>letnum=10;functiontest1(){letnum=20;console.log(num);functiontest2(){letnum=30;console.log(num);}test2();}test1();</script>

test2 的作用域链为：test2 局部作用域 → test1 作用域 → 全局作用域。
也就是说当执行test2函数，里面有个需要使用到num中的语句，那么num到哪里找呢，就沿着作用域链来找，先在test2这个函数中找，找到了就使用，找不到就到上一级test1中去找，如果还是找不到就在这个script语句中找。

这里把test2中的对于num的定义给删了，看下结果，那么test2中使用num就会使用test1中的num。

<script>letnum=10;functiontest1(){letnum=20;console.log(num);functiontest2(){console.log(num);}test2();}test1();</script>

结语💕💕

这部分内容还是比较基础的，并没有什么比较难的知识点，铁汁们一些东西如果记得不是很清楚的话，用到的时候再查也行，不用死记硬背，写的多了，慢慢就记住了🐵
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉