JavaScript 核心基础——（一）基础语法

Neo_Arsaka
70 阅读6分钟

1. 什么是JavaScript

JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户的各种操作。

2. JavaScript 的组成

  1. ECMAScript：定义了 JavaScript 的语法规范，描述了语言的基本语法和数据类型；
  2. BOM（Browser Object Model）：浏览器对戏那个模型。有一套成熟的可以操作浏览器的 API，例如：弹出框，浏览器跳转和获取分辨率等；
  3. DOM（Document Object Model）：文档对象模型。有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素，例如：增加 div 或给 div 换个位置等

总结：JS 就是i同u哦固定的语法区操作浏览器和标签结构来实现网上的各种效果

4. JavaScript 代码的书写位置

js 代码的书写位置分别为：行内式、内嵌式和外链式

4.1 行内式 JS 代码（不推荐）

  • href 属性
    • 在 a 标签的 herf 属性的位置写上 javascript:; 就不会跳转，并且在冒号和分号之间编写 js 代码
    • 语法：<a href="javascript:alert('hello world!');">Click here</a>
  • click 等事件属性
    • 语法：<div onclick="alert('this is an alert')">Click here</div>

4.2 内嵌式 JS 代码（不推荐）

  • 内嵌式的 JS 代码会在页面打开的时候直接触发
  • 语法： 
    <!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<sciprt type="text/javascript">
    alert("this is an alert");
</script>
  • script 标签对原则上可以书写在页面的任意位置，推荐放在 body 的末尾
  • 一个页面原则上可以书写任意多个 script 标签，会按照从上到下的顺序依次执行每一个 script 标签中的代码

4.3 外链式 JS 代码（推荐）

  • 外链式代码式书写在一个 .js 文件内
  • 语法： 
    <script src="index.js"></script>
  • 一个 script 标签当你书写了 src 属性以后, 表示你要把他当做外链式使用，此时就不能在当做内嵌式使用了, 写在标签对内的内容没有意义了

5. 变量

变量式计算机中用来存储数据的“容器”。

5.1 声明变量及赋值

语法：var varName = value;

<script>
    // 1. 声明但不赋值
    var x;
    // 2. 声明并赋值
    var y = 1;
    // 3. 一定性声明多个变量但不赋值
    var a, b, c;
    // 4. 一次性声明多个变量并赋值
    var x1 = 1, x2 = 2, x3 = 3;
    // 一次性声明多个变量, 有的赋值有的不赋值
    var y1 = 1, y2, y3 = 3;
</script>

5.2 变量的命名规则和规范

  • 命名规则：
    • 一个变量只能由 字母(a-z, A-Z) 数字(0-9) 下划线(_) 美元符($) 组成
    • 一个变量不能由 数字 开头
    • 变量严格区分大小写
  • 命名规范：
    • 小驼峰命名法

6. 基本数据类型

6.1 数值类型（Number）

包含一切数字和数值相关的内容：

  • 整数：100，234
    • JS中的数值并不是无限大的，当数值超过一定范围后会显示近似值
    • 大整数（BigInt）使用 n 结尾，例如：let a = 999999999999n
  • 浮点数：41.51，-0.456
  • 科学计数法：10e5
  • 其他进制表示
    • 二进制表示：0b100
    • 八进制：0o100
    • 十六进制：0x100
  • 无穷：Infinity
  • 非数字：NaN

6.2 字符串类型（String）

反引号（``）定义的字符串可以换行书写，并且可以在字符串内直接用 ${} 的形式解析变量，这种字符串也被称为“模板字符串”

6.3 布尔类型（Boolean）

略

6.4 Null 类型（Null）

  • null 表示有值，但是是一个空值
  • 使用时需要给变量赋值为 null，才能得到 null
  • 使用 typeof 检查一个空值时会返回 "object"
  • 使用 typeof 无法检查空值

6.5 Undefined 类型（Undefined）

  • 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined
  • 使用 typeof检查一个 Undefined 类型的值时，会返回 "undefined"

6.5 Symbol

  • 用来创建唯一标识
  • 使用 typeof 检查符号时会返回 "symbol"
  • 语法： 
    <script>
    let c = Symbol(); // 调用 Symbol 函数创建一个符号
    console.log(typeof c);
</script>

6.5 复杂数据类型

  • 对象类型（Object）
  • 函数类型（Function）

7. 检测数据类型

7.1 typeof

  • 语法：typeof 变量 或 typeof(变量)
  • 返回值：返回一个字符串
  • 当你需要检测两个内容的运算结果的时候, 必须要使用 () 包裹 
    <script>
console.log(typeof 100 + 200); // number200
console.log(typeof(100 + 200)); // number
</script>

7.2 isNaN()

  • 语法：isNaN(要检测的数据)
  • 返回值：布尔值
console.log(isNaN(100)); // false
console.log(isNaN("Jack")); // true
console.log(isNaN("123")); // false

7.3 Number.isNaN()

略

8. 数据类型转换

8.1 其他类型转成数值

  • 方式一：Number(变量)
    • 转换规则：
      • 如果整体可以转换为一个合法数字，那么就是这个数字
      • 如果整体不可以转换为合法数字，返回 NaN
    • 注意：
      • true 会转换为 1，false 会转换为 0
      • 如果字符串是空串或纯空格的字符串，则转换为 0
    Number('123'); // 123
Number('abc'); // NaN
Number('3.1415926'); // 3.1415926
Number('11px'); // NaN
Number(''); // 0
Number(' '); // 0
  • 方式二：parseInt(字符串) 和 parseFloat(字符串)
    • 转换规则：解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的整数
    • 注意：
      • 只能用于字符串转换为数值
      • 如果传入数值，则会转换整数或浮点数
      • 如果传入其他类型的数据，则返回 NaN
    parseInt('123px'); // 123
parseInt('a123'); // NaN
parseInt('456.123'); // 456
parseInt(true); // NaN
parseInt(123); // 123
parseInt(123.41); // 123
  • 方式三：除了加法以外的数学运算
    • 转换规则：
      • 和 Number() 的规则一样
      • 运算符两边都是可运算数字才行，如果运算符任何一边不是一个可运算数字，那么就会返回 NaN
    • 举例：
      • num - 0
      • num * 1
      • ...

8.2 其他类型转成字符串

  • 方式一：toString()

    • 语法：数据.toString()
    • 注意：
      • 除了 null 和 undefined 以外都行
      • 无法通过字面量调用 toString()
    let x;
x = 10;
console.log(x.toString()); // '10' 
x = null;
console.log(x.toString()); // null
x = undefined;
console.log(x.toString()); // undefined

console.log(123.toString()); // error!!

  • 方式二：String(数据)

    • 语法：String(数据)
    • 注意：
      • 所有数据都能转换
      • 可以传入字面量
    console.log(String(123)); // '123'
console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'

  • 方式三：使用加法运算

    • 语法：要转换的数据 + ''
    • 实际上使用的是字符串拼接语法

8.3 其他数据类型转成布尔

  • 方式：Boolean(数据)
    • 语法：Boolean(数据)
    • 注意：在 js 中，只有 ''、0、null、undefined和NaN，转成布尔会返回 false，其余都是 true

9. 运算符

运算符不只是数学运算，数学运算只是诸多运算符的一种

9.1 +

  • 只有符号两边都是数字或者布尔值的时候才会进行加法运算
  • 只要符号任意一边是字符串类型，就会进行字符串拼接
console.log(true + true); // 2

9.2 -、*、/、%、

会自动把两边的都转成数字进行运算（相当于先调用 Number() 函数）

9.3 关系运算符

== 比较符号两边的值是否相等，不管数据类型

=== 比较符号两边的值和数据类型是否都相等（推荐使用）

9.4 赋值运算符、+= 等运算符、逻辑运算符、自增自减运算符

略

10. 条件分支语句

  • if 条件分支
  • switch 条件分支结构
  • 三元运算符

语法和 Java 一样

11. 循环控制语句

  • while 循环
  • do...while 循环
  • for(let i = 0; i < length; i++) 循环

语法和 Java 一样

avatar
文章
阅读
粉丝