JavaScript的基本语法

​目录

1、什么是JavaScript

2、基本语法

1）变量

1.1）使用var声明变量（variable 的缩写）

1.2）使用let声明变量

1.3）使用const声明变量

2）数据类型

2.1）基本类型

2.2）引用类型

3）运算符

类型转换

4）流程控制语句（同Java）

5）函数

箭头函数

---

1、什么是JavaScript

JavaScript在Web中起着至关重要的作用，它用于创建交互式网页和动态网页。通过JavaScript，可以实现表单验证、动画效果、弹出窗口、动态内容等功能，极大提升用户体验。它与HTML和CSS紧密集成，并且易于部署和分享。

• 解释执行：JavaScript是一种解释型语言，这意味着它不需要预先编译成机器代码就可以运行。在浏览器中运行JavaScript代码时，JavaScript引擎会逐行读取代码并立即执行它。这与编译型语言（如C++或Java）不同，后者需要先编译成机器代码才能执行。

• 动态类型：JavaScript是一种动态类型语言，不需要在声明变量时指定其类型。变量的类型会根据赋给它的值自动确定。例如，可以将一个数字赋给一个变量，稍后又可以将一个字符串赋给同一个变量。这种灵活性使得JavaScript在编程时更加灵活和便捷。

• 可以直接嵌入HTML页面：JavaScript代码可以直接嵌入到HTML页面中，通常放在<script>标签内，能够直接与HTML元素和CSS样式交互，创建动态和交互式的网页。可以使用JavaScript修改页面内容、响应用户操作、发送网络请求等。

• 通过浏览器进行解释执行：在浏览器中打开一个包含JavaScript代码的HTML页面时，浏览器内置的JavaScript引擎（如Google Chrome的V8引擎）解析和执行这些代码。不需要安装任何额外的运行环境或编译器，浏览器上都可以运行。

2、基本语法

1）变量

1.1）使用var声明变量（variable 的缩写）

• var 变量名 = 数据值;
• 可以存放不同类型的值：

var genius = 11;
genius = "Sheldon";

• 变量名由字母、数字、下划线或美元符号组成，不能以数字开头，使用驼峰命名
• 是全局变量（在代码块中定义的变量，在代码块外边还可以使用）
• 可以重复声明（后一个值会覆盖前一个）

1.2）使用let声明变量

• 例如 let age = 20;
• 只在 let关键字所在的代码块内有效
• 不允许重复声明

1.3）使用const声明变量

• 声明一个只读的常量，例如：const PI = 3.14;
• 声明之后不能被重新赋值
• const声明的并不是传统意义上的“常量”。使用const声明的变量实际上是指向某个值的引用，这个引用本身是不可变的，即不能再指向另一个值。
• 对于基本类型，const确实提供了“常量”的效果，因为基本类型的值是不可变的。但对于引用类型，const只保证引用本身不变，仍然可以修改这个对象或数组的内部状态。

2）数据类型

JavaScript是一种动态类型语言，意味着不需要在声明变量时指定其数据类型。它会自动根据赋值确定变量的类型。

• typeof 是一个一元运算符，用于获取数据类型，如：

let m = true;  
console.log(typeof m); // 输出boolean
// console对象是JavaScript中的一个全局对象，
// 主要用于在浏览器的控制台窗口中输出调试信息、警告和错误消息。

2.1）基本类型

1. Number：数字：整数、小数、NaN(Not a Number)。
2. String：字符、字符串，单双引号皆可。
3. Boolean：true或false。
4. Null：空值，对象为空。
5. Undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
6. Symbol：表示唯一的、不可变的原始值，通常用作对象的属性键。

2.2）引用类型

1. Object：JavaScript中所有非原始类型的基类。可以使用它创建自定义对象，或者使用它的内置子类型，如 Array、Function、Date 等。
2. Array：数组，是有序的元素集合，可以通过索引访问或修改其元素。
3. Function：可执行的代码块，可以调用以执行某些操作。在JavaScript中，函数可以作为参数传递，也可以作为其他函数的返回值。
4. Date：表示特定的瞬间，精确到毫秒。
5. RegExp：正则表达式，用于匹配字符串中的字符组合。
6. 其他内置对象：如 Math（用于数学运算）、Global（全局对象，在浏览器环境中通常是 window）等。

由于引用类型的数据存储的是对实际对象的引用，因此当把一个引用类型的变量赋值给另一个变量时，实际上复制的是引用，而不是对象本身。这意味着两个变量现在指向内存中的同一个对象，对其中一个变量的修改也会影响到另一个变量，在对象的传递和赋值时需要注意。

3）运算符

大部分和Java语言一样，区别是JS中的 == 和 === 。

• 一元运算符：++  --
• 算术运算符：+  -  *   /   %
• 赋值运算符：=   +=  -=
• 关系运算符：>  <  >=   <=   !=   ==   ===
• 逻辑运算符：&&   ||   !
• 三元运算符：条件表达式 ? true_value : false_value

var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true 判断类型是否一样，如不一样，进行类型转换，再比较值
alert(age1 === age2);// false 全等于：先判断类型是否一样，如不一样，直接返回false，再比较值

类型转换

• String 转换为 Number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN：
  • 使用  +  正号运算符： var str = +"20";
  • parseInt() 函数(方法)：var str = "20";   推荐使用
• Boolean 转换为 Number 类型：
  • true 转为1，false转为0   
• 其他类型转换为 Boolean类型：
  • Number转换为Boolean：0和NaN转为false，其他的数字转为true
  • String 类型转换为 Boolean：空字符串转为false，其他的字符串转为true
  • Null类型转换为 Boolean：false
  • Undefined 转换为 Boolean：false

4）流程控制语句（同Java）

• 条件语句：
  • 根据条件执行不同的代码块
  • if...else
  • switch

举例：

var count = 3;
if (count == 3) {
    alert(count);
}

• 循环语句：
  • 重复执行一段代码，直到满足某个条件为止
  • for循环
  • while循环
  • do...while循环

举例：

var sum = 0;
for (let i = 1; i <= 100; i++) { //for循环小括号中定义的变量推荐使用let
    sum += i;
}
alert(sum);

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

5）函数

• 执行特定任务的代码块(就是Java中的方法)

  • 使用function关键字定义函数：
  • 可以接收参数（输入）并返回值（输出）
  • 函数调用：方法名称(实际参数列表);   可以传递任意个数参数
  • 形式参数、返回值不需要类型

function greet(name) {  
// 或者 var greet = function(name) { 
    return "Hello, " + name + "!";  
}  
const greeting = greet("Sheldon"); // greeting现在是"Hello, Sheldon!"

• 箭头函数

箭头函数在JavaScript中非常常用。它提供了一种更简洁、更直观的方式来编写函数，特别是在需要回调函数或者需要保持this上下文不变的场合。

• 使用示例：

  • 简单的箭头函数：

    当箭头函数体只有一条语句时，可以省略大括号和return关键字。

    const add = (a, b) => a + b;  
    console.log(add(1, 2)); // 输出 3

  • 没有参数的箭头函数：

    const sayHello = () => console.log('Hello, world!');  
    sayHello(); // 输出 "Hello, world!"

  • 只有一个参数的箭头函数：

    const double = x => x * 2;  
    console.log(double(5)); // 输出 10
    // 当箭头函数只有一个参数时，圆括号是可选的

  • 带有函数体的箭头函数：

    const greet = name => {  
      const message = `Hello, ${name}!`;  
      console.log(message);  
      return message;  
    };  
      
    console.log(greet('Sheldon')); // 输出 "Hello, Sheldon!" 并返回该字符串

  • 返回对象字面量的箭头函数：

    const getPerson = () => ({  
      name: 'Bob',  
      age: 30  
    });  
      
    const person = getPerson();  
    console.log(person.name); // 输出 "Bob"
    //注意:如果函数体直接返回一个对象字面量，则需要将对象字面量包裹在圆括号中，
    //以避免与函数体的花括号混淆。

• 应用场景举例：

1. 回调函数：箭头函数经常用作回调函数，特别是在处理异步操作、事件监听器、数组方法（如map、filter、reduce等）时，箭头函数可以使得代码更加清晰。

   const array = [1, 2, 3, 4, 5];  
     
   // 使用箭头函数作为数组的map方法的回调  
   const doubledArray = array.map(num => num * 2);  
   console.log(doubledArray); // 输出 [2, 4, 6, 8, 10]  
     
   // 使用箭头函数作为setTimeout的回调  
   setTimeout(() => {  
     console.log('This will run after 1 second.');  
   }, 1000);

2. 保持this上下文：在普通函数中，this的指向取决于函数的调用方式，这常常导致this指向问题。而箭头函数不绑定自己的this，它会捕获其所在上下文的this值，这使得在处理this时更加直观和可靠。

   function MyObject() {  
     this.value = 5;  
     this.increment = () => {  
       this.value++;  
     };  
   }  
     
   const obj = new MyObject();  
   obj.increment();  
   console.log(obj.value); // 输出 6，因为increment箭头函数中的this指向了MyObject的实例

​