【JavaScript】——基础语法基础介绍（超级详细）

CAFE～BABE

已于 2022-06-12 20:04:45 修改

阅读量597

点赞数 14

分类专栏：前端文章标签： javascript 前端 html

于 2022-06-12 20:04:05 首次发布

本文链接：https://blog.csdn.net/weixin_51574797/article/details/125243978

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

js的执行过程

java的运行是将.class文件(也就是字节码文件)加载到jvm中,jvm负责编译成CPU指令被执行
但是到了JavaScript中,是这样被运行的

浏览器先加载html,然后通过网格的方式将html中的JavaScript代码加载到浏览器内核V8中,然后就被编译运行了

js的组成

ECMAscript 就是JavaScript的基本语法
DOM 浏览器提供了一些api可以让js对网页的对象进行操作
BOM 浏览器提供了一些api可以让js对浏览器的窗口进行操作

但是入股不是用来开发浏览器的,就不再需要使用DOM和BOM这样针对浏览器的api了,而是有一种新的api

js的第一个代码

行内式

将js代码写到html的属性中去
就像这样：

    <div class="picture" onclick="alert('这是一个图片')">逆光之影</div>

使用onclick属性,表示一点击这个div就会触发打印这是一个图片
另外,JavaScript不区分字符串还是字符,因为外部使用了双引号,内部就使用了单引号,一样的效果
html中推荐使用双引号,JavaScript中推荐使用单引号

内嵌式

就是在html中添加一个script标签,然后再标签中填写内容,就是内嵌式

 <script>
        alert("欢迎来到我的博客")
 </script>

外部式

就是将JavaScript代码写在外面,然后在主html中引入.适合代码多的情况

html中代码,通过src来引入js文件,但是script内部不可以再写内容了
<script src="hello.js"></script>
js中代码,直接写语句就可以
alert('欢迎来到我的博客')

如果这些网页都是部署在服务器上的时候,这个操作就会触发一个服务器请求,从服务器中将找到src中的js文件,找到这个文件之后就继续执行
有了外部的JavaScript标签之后,我们当前script标签中就不可以写内容了,写了也不会生效的

注释

JavaScript的注释就和常见的一些语言一样了,都是//和/* */,但是第二种不可以嵌套使用

输入输出

输入prompt

使用关键字prompt就可以弹出一个输入框

prompt('欢迎来到我的blog 写下一句话吧：')

输出

alert

直接弹出一个警示框:
我们前面已经介绍过

console.log

控制台输出日志

    <script>console.log('hello  world')</script>

下面这个会显示在控制台中,不会在表面实现

变量的定义let和var

JavaScript中定义变量是很不一般的,所有类型的变量,无论是什么类型,不管是数字类型,字符类型,布尔类型,都是使用同一个关键字来进行定义

最常用的两个关键字就是let和var
这里我们最推荐使用let,因为let修改了var的一些漏洞,所以最好还是使用let

    <script>
        let a=10;
        let b='hhhhh'
        let c=true
        console.log(a +' '+typeof(a));
        console.log(b+' '+typeof(b));
        console.log(c+' '+typeof(c));
    </script>

上面就显示了各种类型的变量都是可以通过一个关键字来进行定义的

动态语言

和之前我们学过的语言不一样,JavaScript是动态语言,也就是在程序的执行的过程中,可以更改变量的类型.
而像我们之前学的c,c++都是可以静态语言,如果一个变量时是int类型的,就不可以变成double类型的.

    <script>
        let a=10;
        console.log(a +' '+typeof(a));
        a=true;
        console.log(a+' '+typeof(b));
    </script>

在运行的过程中可以随便的更改类型,这样就是动态语言

变量的类型

下面我们就来看一下,JavaScript中到底都有哪些类型

number

数字类型,不管是整数还是浮点数都是number类型

整数和整数相除

下面这个是比较特殊的,在以往的语言中,整数和整数像除还是整数类型,因为是静态语言.
但是到了JavaScript中,是动态语言的原因,所以就会显示小数

NaN

特殊的类型NaN,not a number
说明计算出来的结果不是一个数字:

    <script>
        let a=10;
        console.log(a-'pp');
    </script>

字符串和数字进行相减,结果的就是不是一个数字

Infinity

表示是一个正无穷大的数字

    <script>
        let a=10;
        console.log(a/0);
    </script>

-Infinity

表示是一个负无穷大的数字

    <script>
        let a=-10;
        console.log(a/0);
    </script>

字符串类型

JavaScript中字符串可以使用单引号也可以使用双引号

字符串求长度

直接,length即可,直接去调用属性就可以了

        console.log('hello'.length);

答案就是5

字符串拼接

字符串可以和数字,字符串和字符串之间都是可以来进行拼接的
拼接字符串和数字的时候,就是将数字转化为一个字符串,然后进行拼接的

    <script>
        console.log('hello'+10);
        console.log('hello'+'fdfsfs');
    </script>

Boolean类型

JavaScript中的Boolean类型的true被视为1,false被视为0
所以Boolean类型就可以和整数之间做运算了,和字符串进行拼接也是可以的

        console.log(true+'dsds');
        //truedsds

和数字进行运算

        console.log(true+1);//2

undefined

定义了一个变量但是并没有给它进行赋值,所以就是undefined

    <script>
        let a;
        console.log(a);
    </script>

null

定义了一个变量同时将它的值置为null

    <script>
        let a=null;
        console.log(a);
    </script>

运算符

JavaScript中的运算符和正常的java中的运算符大概都是一样的。

== ===

== !=
只不过注意一下== ===
==不会考虑比较类型,会进行隐式的类型转换

    <script>
        let a=10
        console.log(a=='10');//true
    </script>

=== 会考虑比较类型,如果类型不一样,不会进行类型转化,只能比较相同类型的变量

    <script>
        let a=10
        console.log(a==='10');//false
    </script>

| |

JavaScript中的逻辑或是特别的不同一般的,

a| | b
如果a的值是true,就返回a的值
如果a的值是false,就返回b的值

    <script>
        let b
        let a=b||0;//如果b是true就返回b，如果b是undefined和null为false 就返回0
        let c=10;
        let d=c||0;
        console.log(a);
        console.log(d);
    </script>

所以,这里得到的结果不是一个布尔值,而是| |运算符两侧的值

&&

a=b&&c
如果b是假的，那么a直接等于b的值
如果b是真的，那么a直接等于c的值

数组

创建数组

使用new来创建数组

    <script>
        let arr=new Array();
        console.log(arr);//[]
    </script>

要记住此时的Array要大写,然后后面是一个括号

直接创建

直接使用[],来表示数组就可以创建一个数组了

    <script>
        let arr=[]
        let arr2=[1,2,'hhhh',true,undefined,null]
        console.log(arr);
        console.log(arr2);
    </script>

访问数组元素

直接使用[下标]就可以了

    <script>
        let arr=[1,2,3,4]
        console.log(arr[0]);
        arr[0]=5;
        console.log(arr[0]);
    </script>

越界访问数组下标

如果访问没有被赋值的数组的元素,就会显示该元素的值是undefined

    <script>
        let arr=[1,2,3,4]
        console.log(arr[-1]);//undefined
        console.log(arr[9]);//undefined
    </script>

给超出数组下标的进行赋值

另外,JavaScript有一个特别特殊的点,就是数组是没有大小边界的.
上面的数组,只是数组的长度是4,但是数组的大小是无限的,所以可以进行任意下标的访问

    <script>
        let arr=[1,2,3,4]
        arr[9]=10;
        console.log(arr);
    </script>

我们可以看到,在原来的数组的9下标赋值之后,我们就会发现数组的长度变为了10,中间没有被赋值的就是空属性undefined

数组的访问下标可以是字符串

有没有想象过在本该填入下标的地方填入字符串,现在动态语言就满足了你的愿望.
看下面的代码,:

    <script>
        let arr=[1,2,3];
        arr['name']='lxy'
        console.log(arr);
    </script>

很神奇是不是:
看一下运行的效果:

我们可以看到,虽然我们又添加了一个元素’lxy’,但是arr的长度却没有任何的变化,这是因为什么呢?
难道没有加入上去吗
实际上,在JavaScript中数组是一个动态的对象,是一个在运行的过程中可以改变的对象.
我们加入了一个字符串下标的值,实际上不是添加元素,而是在添加一个属性
添加了name属性,值是lxy
实际上,上述代码就等价于:

    <script>
        let arr=[1,2,3];
        arr.name='lxy;//等价于arr['name']='lxy'
        console.log(arr.name);
        console.log(arr['name']);
        console.log(arr);
    </script>

所以,当我们对数组的下标是一个字符串的时候,实际上就是给这个数组添加一个属性,而不是将这个字符串作为一个元素
这里也同样可以是一个负数，也是和字符串一样都是表示一个属性，而不是元素了

arr[-1]=10;

相当于属性就是-1：10

数组的方法

我们之前说过,数组也是一个对象,数组中可以有属性和方法
下面介绍几个数组的方法:

插入方法push

就是在数组中插入数据

    <script>
        let arr=[];
        for(let i=0;i<10;i++)
            arr.push(i+1);
        console.log(arr);
    </script>

删除替换方法splice

    <script>
        let arr=[];
        for(let i=0;i<10;i++)
            arr.push(i+1);    
        console.log(arr);
        arr.splice(4,2);
        console.log(arr);
    </script>

splice函数第一个参数是开始删除的元素的下标,第二个参数是需要删除的元素的个数

这个splice函数还可以进行替换，如果再加上一些参数的话；

let arr=[1,2,3,4,5,6]
arr.splice(2,3,300,400,500,600);

就是将arr数组的第二个下标开始的3个数字，分别替换为300，400，500
所以，最后arr是1，2，300，400，500，6

函数

定义函数的格式

    <script>
        function add(a,b){
            return a+b;
        }
        console.log(add(1,2));//3
    </script>

以上面的函数为例:

function 函数名(参数名1,参数2){
  ...
}

function是表示下面的代码是一个函数
不管是不是有返回值,都不需要返回值
参数里面只填写参数名就可以,不用写参数的类型

函数的位置

在JavaScript中,**函数的调用不需要在函数的定义的后面,在任意的地方都可以.**因为浏览器在编译的时候,就会把所有的函数定义都移到前面.

    <script>
        console.log(add(1,2));
        function add(a,b){
            return a+b;
        }
    </script>

函数的参数个数和类型

因为JavaScript是一个弱类型的语言,所以可能就不会像别的强类型的语言明确要插入什么类型的变量,什么数量的参数.如果想要有不同的版本就需要进行重载
但是JavaScript中的函数就完全不需要有这方面的顾虑,没有发现我们的函数的参数列表都没有参数的类型吗?
所以,我们就可以插入任意类型

    <script>
        console.log(add('hello ','world'));
        function add(a,b){
            return a+b;
        }
    </script>

那么对于函数的个数,会有什么样的变换呢?
少于形参数量

    <script>
        console.log(add('hello '));//hello undefined
        function add(a,b){
            return a+b;
        }
    </script>

如果我们只传入一个参数,那么未传入的类型就是undefined
多于形参数量

    <script>
        console.log(add('hello ','my ','world'));//hello my
        function add(a,b){
            return a+b;
        }
    </script>

如果传入了3个变量,那么就只会剩余的那个参数就不会传入进来

    <script>
        
        function func (a,b,c,d){
            a=a||0;
            b=b||0;
            c=c||0;
            d=d||0;
            return a+b+c+d;
        }
        console.log(func(10));
        console.log(func(10,20));
        console.log(func(10,20,30));
        console.log(func(10,20,30,40));
    </script>

另外,我们就可以通过| |运算符来进行不同参数的计算
如果少上传了一些参数的个数，那么没有实参匹配的形参就是undefined，返回的结果就是nan

function add(a,b,c){
    return a+b+c;
} 
console.log(add(1,2));

函数表达式

在JavaScript中,函数是一个一等公民,可以将函数赋值给一个变量,所以这个函数就可以成为别的函数的参数，返回值，和正常的变量就没有任何的区别了

    <script>
        
        let func=function add(a,b,c,d){
            a=a||0;
            b=b||0;
            c=c||0;
            d=d||0;
            return a+b+c+d;
        }
        console.log(func(10));
        console.log(func(10,20));
        console.log(func(10,20,30));
        console.log(func(10,20,30,40));
    </script>

在将函数赋给func之后,我们就可以之际使用func来进行调用函数了
再进一步,我们还可以直接就将函数名省略,这样就构成了匿名函数,也叫做函数表达式,也是lamda表达式

    <script>
        
        let func=function (a,b,c,d){
            a=a||0;
            b=b||0;
            c=c||0;
            d=d||0;
            return a+b+c+d;
        }
        console.log(func(10));
        console.log(func(10,20));
        console.log(func(10,20,30));
        console.log(func(10,20,30,40));
    </script>

作用域

var,let

var定义的变量和let定义的变量是不一样的,**var在出了大括号之后还是可以被访问到,但是let出了大括号之后就不会被访问到了,所以我们一般是推荐使用let,因为和我们之前学习的语言是一样的.**另外,不加任何修饰符,表示是全局变量,在任意地方都可以被访问到.

    <script>
        {
             a=100;
        }
        console.log(a);//100,全局变量可以被访问到
    </script>

    <script>
        {
             var a=100;
        }
        console.log(a);//100,var修饰的变量在出了大括号之后也可以被访问到
    </script>

    <script>
        {
             let a=100;
        }
        console.log(a);//let修饰的变量出了括号之后不可以访问到
    </script>

作用域链

在JavaScript中,函数内部可以定义函数
所以,当多个函数进行嵌套的时候,最外层到最里层的函数的变量,就是构成了一个作用域链.

    <script>
        function func1(){
            num=10;
            function func2(){
                let num=20;
                function func3(){
                    console.log(num);
                }
                func3();
            }
            func2();
        }
        func1();
    </script>

比如说上面的这个函数,func3中想要调用num,func3中没有就会一层一层的向外侧的函数中寻找,直到找到或者结束为止.
如果想要直接访问最外层的num，可以使用window.num

num=10;
{let num=20;
 console.log(window.num);} //10

对象

直接常量定义对象

直接是定义一个字面层面的对象

    <script>
        let student={
            name:'lxy',
            age:19,
            score:100,
            func:function(){
                console.log("hhhhhhhhh");
            }
        }
        console.log(student);
        student.fun();
    </script>

定义对象的特点:

直接使用{ }来定义对象**,大括号括起来就是一个对象了**
对象中的属性都是采用键值对,键值对之间使用逗号进行连接
键值对的键和值是使用 **: **来表示
调用对象中的元素的时候,直接使用.属性可以,也可以采用[‘属性’]的方式
对象中还可以定义函数,采用匿名函数

使用new来创建对象

上面是我们直接写的常量,我们还可以使用new来定义对象和数组的new Array()一样

    <script>
        let student=new Object();
        student.name='lxy'
        student.age=19;
        student.score=300
        student.fun=function(){
            console.log("jjjjjjjjjjj");
        }
        console.log(student);
        student.fun();
    </script>

使用Object来进行对象的创建
然后使用对象.属性=来进行赋值或者是修改.

如果没有这个属性,就创建这个属性
如果已经存在这个属性,就修改这个属性

使用构造函数来创建对象

有的时候,如果对多个变量都进行创建对象的时候,像前两种,都需要手动的对键值对进行赋值,比较麻烦.所以我们就为了方便采用构造函数来帮助我们创建对象

    <script>
        let Cat=function(name,type,sound){
            this.name=name;
            this.type=type;
            this.fun=function(){
                console.log(sound);
            }
        }
        //这里是使用构造函数名来进行创建对象的
        let cat1=new Cat('小喵喵','圆脸','miaomiaomiao~')
        console.log(cat1);
        cat1.fun();
        let cat2=new Cat('小咪咪','尖脸','mimimi~')
        console.log(cat2);
        cat2.fun();
    </script>