博学谷学习记录 | 学习总结，用心分享 | 前端学习之JS（一）

最新推荐文章于 2024-07-25 09:24:40 发布

程序二次猿

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量55

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/m0_47321226/article/details/128491887

版权

1 简介

JavaScript是一种运行在客户端浏览器的编程语言，它是由ECMAScript( 基础语法 )、web APIs （DOM、BOM）组成的。它的主要用途是让网页“动起来”，使网页在人机交互时的拥有动态效果。既然JavaScript是对网页的修饰，那么就需要和HTML、CSS一起使用，在引入.js文件时，有三种方式----行内引入、内部引入和外部引入。

<body>

  <button onclick="alert('你干嘛点我')">点击我</button>

</body>

行内引入即在标签内引入，会在Vue框架中频繁使用。

<body>

  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>

  <script>
    alert("Hello World")
  </script>
</body>

内部引入就是在<script></script>标签中直接写内容，但要注意的是需要把<script></script>标签写在HTML文件底部，因为浏览器是按照从上到下的顺序来加载HTML的，如果先加载的js代码需要修改下方的HTML，那么它可能由于HTML尚未被加载而修改失败。

<body>

  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>
  <div>内容</div>


  <script src="./my.js"></script>
</body>

外部引入就是在<script></script>标签内写上需要引入的js文件的路径，如果使用了外部引入的方式，那么<script></script>标签里就不需要写代码了，否则会被忽略。

2 变量/常量

变量和常量都是用来存储数据的“容器”（空间），而并非数据本身，它们的区别在于“变”和“常”，变量里的数据可以在定义过后再次修改，而常量里的数据一旦定义就无法二次修改，因此在定义变量和常量时会有一些区别：

（1）定义变量的关键字是let，定义常量的关键字是const。

（2）定义变量是既可赋值也可不用赋值，而定义常量时则必须赋值

（3）变量定义过后可再次修改，而常量则不可以再次修改（除非修改第一次定义时候的值）

命名规则与规范

在说明命名规则与规范之前，需要先对“规则”与“规范”进行定义。

“规则”即必须遵守的条文，若不遵守程序就会在运行过程中报错；而“规范”则是一种建议，不遵守并不会使程序运行出错，但却不符合业内通识。

明确了定义后，就可以详细地说明变量与常量的命名规则与规范了。
（1）规则：
        ①不能用关键字关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、 var、if、for等
        ②只能用下划线、字母、数字、$组成，且数字不能开头
        ③字母严格区分大小写，如 Age 和 age 是不同的变量
（2）规范：
        ① 起名要有意义
        ②遵守小驼峰命名法
        ③第一个单词首字母小写，后面每个单词首字母大写。例：userName

赋值运算符

在对变量和常量定义时除了要使用let和const关键字外，还需要赋值运算符----“=”，它的作用是将右侧的数据赋给左侧的变量/常量，通俗一点讲就是将右侧的数据装进左侧变量/常量这个容器（空间）中去，形成一一对应的关系。

  <script>
    let a = 12
    const b = 12
  </script>

3 数据类型

JavaScript将数据类型整体分为两大类，一类是基本数据类型，另一类是引用数据类型。基本数据类型中包含数字型（number）、字符串型（string）、布尔型（boolean）、未定义型（undefined）、空类型（null），引用数据类型则包含对象（object）。

3.1 数字类型

数字类型包含整数、小数、正数、负数，它们有着和数学中一样的运算法则，使用加+、减-、乘*、除/、取余% 等算数运算符对数字类型的数据进行计算。

  <script>

    // 正数、整数
    let a = 5
    // 小数
    let b = 5.1
    // 负数
    let c = -5
    let d = -5.1

  </script>

  <script>
    // 加法 结果为7
    let a = 5 + 2
    // 减法 结果为3
    let b = 5 - 2 
    // 乘法 结果为10
    let c = 5 * 2
    // 除法 结果取整，为2
    let d = 5 / 2
    // 取余 结果为1
    let e = 5 % 2 
  </script>

NaN

NaN全称Not a Number，即非数字类型，只有在一些非常“奇怪”的情况下才会出现，例如

3.2 字符串类型

使用单引号（' '）、双引号（" "）或反引号( ` `) 包裹的数据都叫字符串，单引号、双引号本质上没有区别，但反引号却和前两者有着不同的使用场景。

  <script>
    //单引号定义
    let a = 'abc'
    //双引号定义
    let b = "abc"
    //反引号定义
    let c = `c`
  </script>

字符串的拼接

使用 +运算符可以实现多个字符串的拼接。

  <script>
    let userName = '张三'
    let nickName = '李四'

    console.log(userName + '的外号叫' + nickName);
  </script>

模板字符串

有时候我们需要将变量放入字符串中，这时就需要使用到模板字符串，模板字符串有两种方式，一种是使用 +运算符将变量/常量和字符串拼接起来，另一种则是使用反引号（``）和${变量名/常量名} 将字符串与变量/常量放在一起。

    <script>
      let userName = "张三";
      let nickName = "李四";


      // +运算符拼接法字符串模板
      console.log("大家好，我的名字叫" + userName + "，" +  "我的的外号叫" + nickName + "。");

      // 反引号+${}法字符串模板
      console.log(`大家好，我的名字叫${userName}，我的外号叫${nickName}。`);
    </script>

3.3 布尔类型

这个类型比较简单，只有两个固定的值----true 和 false。

在某些情况下，非0和非空字符串也能被当做true来看待，0和空字符串也能被当做false来看待。

3.4 未定义类型

未定义类型是一个比较特殊的类型，只有一个值----undefined。这个值只有在只声明变量，但却不赋值的情况下才会出现，一般很少会为某个变量赋值undefined。

如果给变量赋值undefined的话，

    <script>
      let a = undefined

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

3.5 空类型

空类型的写法为null，仅仅代表“无”、“空”或“值未知”。官方解释为“把null作为尚未创建的对象”。它与undefined的区别是undefined表示没有赋值，null表示赋值了，但内容为空。

3.6 检测数据类型

我们在判断数据类型时除了靠我们眼睛看、脑子想之外，还能把这个任务交给计算机来做，使用 typeof 关键字让计算机告诉我们被检测的数据是什么类型。它支持两种语法形式：

（1）作为运算符 typeof x （常用的写法）
（2）函数形式： typeof(x)

    <script>
      let a = 123
      let b = 'abc'
      let c = true


      console.log(typeof a);
      console.log(typeof b);
      console.log(typeof(c));
    </script>

4 运算符

4.1 赋值运算符

赋值运算符的作用就是将等号右边的值赋予等号左边的变量或者常量，最常见的赋值运算符为 = 号，除此之外还有 += 、-= 、*= 、/= 、 %= ，

  <script>
    let a = 10 //= 号赋值符

    a += 1 //等效于 a = a + 1
    a -= 1 //等效于 a = a - 1
    a *= 2 //等效于 a = a * 2
    a /= 2 //等效于 a = a / 2
    a %= 3 //等效于 a = a % 3
  </script>

4.2 算数运算符

算数运算符就是数学中最常见的加、减、乘、除、取余的运算，无需过多赘述。

4.3 自增/自减运算符

自增/自减运算符写作++ / -- ，它们的作用就是使变量的值增加1或者减少1，

    <script>
      let a = 10;

      a++ //先使用a的值10然后再让a加1变成11
      ++a //先让a加1变成11然后再使用a的值11
      a-- //先使用a的值10然后再让a减1变成9
      --a //先让a减1变成9然后再使用a的值9
    </script>

4.4 比较运算符

比较运算符中的大多数符号与数学中的完全一致，

不过也有个别例外情况，

使用比较运算符时得到的结果为布尔类型（boolean）的值，即 true 或 false。

我们在使用比较运算符时需要注意 == 和 === 之间的区别，== 仅判断等式左右两边的值是否相等，而 === 不仅会判断值是否相当，还会判断类型是否相等，

  <script>
    let a = 10 
    let b = '10'

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

除了 == 和 === 之外，还有一些需要注意的地方：

①字符串比较时遵循从左往右依次比较字符ASCII码大小的规则，先比第一个字符的ASCII码大小，如果一样大就比较第二位，以此类推。比如比较 'green' 和 'grean' 的大小，先从第一个字母 g 开始，g 相同就比较字母 r ，r相同就比较字母 e ，e 也相同就再比较下一个字母，第四个位置上的字母 e 的ASCII码值大于字母 a 的ASCII码值，因此 ‘green’ > 'grean' 的结果是 true。

②NaN不等于任何值，包含它自身，任何与NaN的比较结果都为false。

③尽量不要比较小数，因为小数有精度问题
④不同类型之间比较会发生隐式转换，最终把数据隐式转换转成number类型再比较，所以开发中更推荐使用 === 和 !== 。

4.5 逻辑运算符

最常见的逻辑运算符有三个，与（&&）、或（||）、非（!），它们的介绍如下，

它们的格式写作：

①与（&&）：表达式1 && 表达式2

②或（||）：表达式1 || 表达式2

③非（!）： !表达式1

与比较运算符不同的是，逻辑运算符返回的结果并不是布尔类型的值，而是返回表达式1或者是表达式2。

逻辑中断

对于与（&&）和或（||）来说，能够通过左边得到整个式子的结果，就没必要再判断右边，即存在着逻辑中断，也被称作逻辑短路。

对于表达式1 && 表达式2 ，

如果表达式1 为假，则整个逻辑表达式必然为假，因此就没有必要再判断表达式2 是否为真，因此整个逻辑表达式就停在了表达式1 处，整个逻辑表达式的结果就为表达式1，

如果表达式1 为真，则会判断表达式2 是否为真，若表达式2 为真，则整个逻辑表达式为真，否则整个逻辑表达式为假，但整个逻辑表达式的结果为表达式2 ；

  <script>
    console.log(0 && 1);
    console.log(false && 1);
    console.log(-1 && 1);
    console.log(-1 && false);
  </script>

对于表达式1 || 表达式2 ，

如果表达式1 为真，则整个逻辑表达式必然为真，因此就没有必要再判断表达式2 是否为真，因此整个逻辑表达式就停在了表达式1 处，整个逻辑表达式的结果为表达式1，

如果表达式1 为假，则会判断表达式2 是否为真，若表达式2 为真，则整个逻辑表达式为真，否则整个逻辑表达式为假，整个逻辑表达式的结果为表达式2 。

  <script>
    console.log(true || 0);
    console.log(1 || 0);
    console.log(false || 0);
    console.log(0 || 1);
  </script>

总结，无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值。

4.6 运算符优先级表

5 类型转换

试想一个场景：你需要帮助用户计算他所输入的两个数字之和，但用户使用输入框输入的数字又是字符串类型，如果直接使用+运算符的话只能做到将两个“数”拼接在一起，

    <script>
      let num1 = prompt("请输入第一个数") //输入1
      let num2 = prompt("请输入第二个数") //输入2

      
      console.log(num1 + num2); //输出12
    </script>

因此，我们需要一种方式，将用户输入的字符串类型（string）转换成我们需要的数字类型（number）。

5.1 隐式转换

1. 算数运算符

①+ 号作为一元运算符时可以将数字字符串转换成数字类型的数据

②+ 号作为二元运算符时，如果+号的一侧是字符串，则无论另一侧无论是什么类型，其结果都是字符串。

③除+号以外的算数运算符，都会把数字字符串转换成数字类型数据。

2. 逻辑运算符

逻辑运算符在做比较时，也会把数字字符串转换成数字类型的数据并与另一侧的数字类型的数作比较。

    <script>
      console.log(100 > '99');
    </script>

5.2 显示转换

1.转换为数字类型

① Number() 转换可以将数字字符串转换成数字类型，如果字符串里有非数字，则会转换失败，输出为NaN（Not a Number），即不是一个数字（NaN也是Number类型，表示非数字）

    <script>
      let num = '123'

      console.log(Number(num));
    </script>

    <script>
      let num = '123abc'

      console.log(Number(num));
    </script>

② parseInt() 向下保留整数

  <script>
    console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12.94px'))
    console.log(parseInt('abc12.94px'))

  </script>

③ parseFloat() 可以保留小数

  <script>
    console.log(parseFloat('12px')) 
    console.log(parseFloat('12.34px')) 
    console.log(parseFloat('12.94px'))
    console.log(parseFloat('abc12.94px')) 
  </script>