JavaScript基础

梨花香务实的毛肚

已于 2024-04-01 23:31:00 修改

阅读量1.4k

点赞数 25

文章标签： javascript 前端 html

于 2024-04-01 22:38:56 首次发布

本文链接：https://blog.csdn.net/qq_44613976/article/details/137247020

版权

一、什么是js

用于实现网页特效&交互。

JavaScript（简称“JS”）是一种具有函数优先的轻量级、弱类型，解释型或即时编译型的编程语言。

二、js组成

EMCA	BOM	DOM
标准、规则规定JS基础语法和规则	浏览器对象模型，描述处理浏览器方法和接口	文档对象模型，描述与网页元素内容交互的方法和接口

三、js的引用

js引用包括内联、内部、外部。（不建议使用内联）

1.内部

<body>
    <script>
        alert("会弹出一个警告！");
    </script>
</body>

2.外部

<script src="./js/test.js">

</script>

3.内联（一般不会使用）

 <div id="box" onclick="alert('点击了')"> </div>
    <a href="javascript:alert('aaa')">abiaoqian </a>

四、JS常用的输出语法

1.alert 警告框


alert("弹出一个警告框");

2.document.write()网页中写入内容

document,write("写入的内容")；
document,write("可以解析标签，<b>加粗</b>“);

3.console 控制台日志打印

console.log("hello world!!")

4.prompt 输入框

prompt();
prompt(“请输入你的手机号码");

五、变量

通俗来讲变量指的是在程序中保存数据的一个容器。
在程序运行过程中其值可以改变的量，是一个数据存储空间的表示，即给内存空间起别名
将数据通过变量进行存储，以便程序随时使用，通俗点来说，变量就是用来存储数据的
所谓变量，就是特定时间用于保存特定值的一个名字而已，并且初始化后可以再次改变的量
ECMAScript的变量是松散（弱）类型的，所谓松散类型就是可以用来保存任何类型的数据。

1.变量的声明

var 变量名=值；

2.变量命名的规范

变量名也叫：标识符

只能由数字、字母、下划线和$符号组成，但是不能以数字开头

不可以使用JS中的关键字和保留字
关键字：被JS语言赋予了特殊含义的单词
保留字：现在还没有被JS使用，但是将来可能会被使用的单词
https://www.runoob.com/js/js-reserved.html

top、new、this、delete关键字需要记住

使用驼峰式和下划线式命名法
驼峰：myDemoLIst
下划线：my_demo_list

六、数据类型（*）**

据类型分为基本数据类型（简单数据类型）和引用数据类型（复杂数据类型）

基本数据类型
number	数字/数值	表达整数或浮点数
string	字符串
boolean	布尔类型
undefined	未定义	变量声明但未赋值的一种状态
null	空	什么都没有

检测变量存储的数据的类型 typeof typeof返回类型是String类型

typeof(变量); typeof后面跟圆括号，此时是一个函数，
typeof 变量；运算符方式

七、运算符

1.算术运算符

（1）加法 +

加号除了在数字中具有加法的作用，在非数字的值之间也具有连接字符串的作用，得到的结构都是字符串

        var num1 = 100;
        var num2 = 121;
        var num3 = num1 + num2;
        console.log(num3); //221
        var n = "124";
        var num4 = n + num1;
        console.log(num4); //124100
        var num6 = num1 + num2 + n;
        console.log(num6); //221124
        var num6 = num1 + (num2 + n);
        console.log(num6); //221124

（2）减法 -

        console.log(55-22);
        console.log(4-22);
        var num7=19;
        var sum=num7-n;
        console.log(sum); //19
        var s='abc';
        var sum2=num7-s;
        console.log(sum2); //NaN  (Not a Number)
        console.log(typeof sum2); //number

（3）乘法 *

        console.log(55*22); //1220
        console.log(4*22); //88
        console.log(num7*n); //NaN

（4）除法 /

        console.log(55/22); //2.5
        console.log(66/2); //33
        console.log(num7/n); //NaN 
        console.log(num7/s); //NaN 
        console.log(num7/n); //NaN 
        console.log(num7/s); //NaN 
        console.log(num7/s);//NaN

（5）取余 %

        console.log(55%22); //11
        console.log(66%2); //0
        console.log(65%2); //1
        console.log(num7%n); //NaN

NaN数据类型为number

在JS语言中NN表示的是数字的一种不正常状态，一般会在计算出错时出现

NaN 是一个特殊的值，表示一个无效的数值，在计算中，如果结果不是数字，就会返回NaN

NaN 是一个全局变量，可以给它赋值，也可以直接使用

通过isNaN()函数来判断一个值是否为NaN 返回结果为true/false

        var num8=NaN;
        console.log(num8); //NaN
        console.log(typeof num8); //number
        console.log(isNaN(num8)); //true
        console.log(isNaN(num7)); //false
        console.log(isNaN(s)); //true
        console.log(isNaN(n)); //false

2.赋值运算符

= += -= *= /= %=

算术运算符优先级大于赋值运算符

3.比较运算符

**> 、< 、>= 、<= 、== 、=== 、!= 、!==**

由比较运算符组成的表达式为：**比较表达式**。比较表达式返回的结果为**boolean**，也就是说程序只要执行了比较操作得到结果只能是true / false。

   10>5; // true

    10<5; // false

    10>=5; // true

    10>=10; // true

    10<=5; // false

    10<=10; // true

    10==10; // true

    10=='10'; // true 等值判断，只判断值，不判断数据类型

    10==='10'; // false 全等判断，值和数据类型都会判断

    10!='10'; // false 不等值判断

    10!=='10'; // true 不全等判断

4.逻辑运算符

&& 、|| 、!

&&运算符优先级大于||

逻辑表达式的结果为boolean

&& （与）同时判断多个表达式，必须是所有的表达式结果都是true才会得到true，否则结果为false

      10>5 && 10<20; // true


      10>5 && 10<5; // false


      10<=5 && 10<5; // false

||（或）同时判断多个表达式，只要至少有一个表达式的结果都是true得到的结果就为true，否则结果为false。

    10<5 || 10>20; // false

    10>5 || 10<5; // true

    10>5 || 2<5; // true

!（非）逻辑非表示对结果的否定，进行取反的操作，本身是true的会变成false，本身是false的会变成true

5.一元运算符（自增自减运算符）

i++ 、++i 、i-- 、--i

程序在运行过程中我们需要执行一些记录次数的操作，这时候我们就可以使用自增/自减运算符。

num++/++num的区别？

num++：先执行，再计算

++num：先计算，再执行

6.三元运算符（三目运算符）

语法：条件？表达式1（条件成立时执行）：表达式2（条件不成立时执行）

八、数据类型转换

1.强制类型转换——显式转换

（1）转换为：string

（2）转换为：number

（3）转换为：boolean

2.自动类型转换——隐式转换

（1）转换为：string

任何数据是字符串相加都是字符串的拼接操作，得到的结果也都是字符串

（2）转换为：number

对数字类型的自动转换我们可以使用：

直接在要转换的内容前加上”+”;

可以使用-、*、/、%、>、<等将字符串转换成number

（3）转换为：boolean

逻辑运算符 ! 的操作

九、流程控制语句

顺序、分支、循环

if条件分支结构

1.if语句（单分支）

if（条件表达式）{

//条件表达式结果为true时执行代码块

}

2.if...else语句（双分支）

if（条件表达式）{

//条件表达式结果为true时执行代码块

}else{

//条件表达式结果为false时执行代码块

}

//判断一个年份，判断闰年还是平年
     var year = prompt("请输入一个年份");
     if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
        alert(year + "是闰年");
     }else{
        alert(year + "是平年");
     }

3.if...else if语句（多分支）

if(条件表达式){

// 条件表达式结果为true时执行代码块

}else if(条件表达式){

// 条件表达式结果为true时执行代码块

}else{

// 条件表达式结果为false时执行代码块

}

 //判断一个数字，是偶数还是奇数
        var num = prompt("请输入一个数字");
        if (num == "" || num==null || isNaN(num)) {
            alert("请输入一个正确的数字")

        } else if (num % 2 == 0) {
            alert(num + "是一个偶数")

        } else {
            alert(num + "是一个奇数")
        }

switch条件分支结构

适合做等值判断

switch的匹配是全等匹配

结构：

switch(变量:判断的值){

case 值1:

//如果变量的值和case的值1全等，则会执行此处的代码

break;

case 值2:

//如果变量的值和case的值2全等，则会执行此处的代码

break;

case 值3:

//如果变量的值和case的值3全等，则会执行此处的代码

break;

default:

//如果变量的值和case的值都不全等，则会执行此处的代码

break;

}

        //根据用户输入的数字判断今天星期几
        var num = prompt("请输入一个数字");
        switch(num){
            case 1:
                alert("星期一");
                break;
            case 2:
                alert("星期二");
                break;
            case 3:
                alert("星期三");
                break;
            case 4:
                alert("星期四");
                break;
            case 5:
                alert("星期五");
                break;
            case 6:
                alert("星期六");
                break;
            case 7:
                alert("星期日");
                break;
            default:
                alert("输入有误，请输入1-7的数字");
                break;
        }

switch语句中break是必须的，如果缺失break会发生switch穿透（case穿透）。

break语句作用是为了跳出switch。

switch穿透（case穿透）

在 switch 语句中，"case 穿透"是指当一个 case 分支中的代码执行完毕后没有遇到 break 语句而是继续执行下一个 case 分支的代码的情况。这种现象可能会导致意想不到的结果，因为即使后续的 case 条件不匹配，其对应的代码仍然会被执行。

当缺失了 break 语句时，程序会顺序执行匹配到的 case 分支，并继续执行后续的 case 分支，直到遇到 break 或者 switch 结束。这种情况下，程序的执行路径会穿透多个 case 分支，可能与我们预期的逻辑不符。

为了避免 case 穿透问题，通常建议在每个 case 分支的末尾添加 break 语句，以确保在执行完相应的分支代码后跳出 switch 语句，避免程序继续向下执行其他 case 分支的代码。

总之，case 穿透是指在 switch 语句中由于缺少 break 语句而导致程序从一个 case 分支顺序执行到下一个 case 分支的情况，这可能会引起逻辑错误和程序行为异常。

if分支语句和switch分支语句区别

if分支语句适合做区间判断和等值判断

switch分支语句做等值判断，不推荐做区间判断

互换两个变量的值

1.通过第三方变量实现

针对任何类型的数据

        var c = a;
        a = b;
        b = c;
        console.log(a);
        console.log(b);

2.通过运算符的方式来实现

仅针对number类型的值可以实现值互换

        x = x + y;
        // 22+33
        y = x - y;
        // 55-33
        x = x - y;
        // 55-22
        console.log(x);
        console.log(y);

循环结构

1.while()循环

while (循环的停止条件) {

// 循环体

// 更新变量

}

2.死循环

我们在编写循环程序的时候一定要注意给循环结构留出一个出口，也就是说循环程序运行到一定的程度必须要结束，否则程序就会进入死循环。

死循环是指程序一直停留在某一阶段重复执行某一些操作而不会继续执行后面的代码。这种现象对内存资源的消耗是非常巨大的，正常的情况就是内存溢出。

内存溢出(out of memory)

内存溢出(out of memory)通俗理解就是内存不够，通常在运行大型软件或游戏时，软件或游戏所需要的内存远远超出了你主机内安装的内存所承受大小，就叫内存溢出。

3.do...while()循环

        var num = 1; //1.初始化循环变量

        do{

            //3.循环体

            document.write("hello world");

            //4.更新循环变量

            num++;

        }while(num<=10) //2.判断循环条件，结果为true进入循环体，结果为false跳出循环

执行步骤：1》3》4》2》3》4》2....