JavaScript入门基础知识

JavaScript（简称JS）是前端开发中最常用的编程语言之一。它可以用来实现网页的交互效果，控制浏览器行为，以及与用户进行交互。对于初学者来说，了解一些常用的基础语法是入门的关键。本文将介绍一些JavaScript入门时常用的语法内容。

1. 变量声明

在JavaScript中，变量用于存储数据。可以通过以下三种方式来声明变量：

• var: 这是JavaScript中最早用来声明变量的关键字。var声明的变量是有函数作用域的，但它并不受块级作用域的限制，这可能会导致变量提升（Hoisting）的问题。

  javascript

  复制代码

  var name = "John";

• let: ES6引入了let关键字，它的作用域是块级的，这意味着在块外无法访问在块内用let声明的变量，避免了var可能带来的问题。

  javascript

  复制代码

  let age = 30;

• const: const用于声明常量，一旦赋值就不能再更改。它同样具有块级作用域。

  javascript

  复制代码

  const PI = 3.14159;


2. 数据类型

JavaScript中的数据类型可以分为两大类：原始类型和对象类型。

• 原始类型：
  • String: 用于表示文本，如 "Hello"
  • Number: 表示数值类型，如 42
  • Boolean: 表示布尔值，只有 true 和 false
  • Null: 表示空值，即不存在的引用
  • Undefined: 表示未定义
  • Symbol: ES6引入的唯一值类型
  • BigInt: ES2020引入的任意精度整数

  javascript

  复制代码

  let isActive = true; // Boolean
let score = 100; // Number
let name = "Alice"; // String

• 对象类型：
  • Object: 一种复杂的数据结构，可以存储键值对
  • Array: 有序的集合，用于存储多个值
  • Function: JavaScript中的函数也是一种对象

  javascript

  复制代码

  let person = {name: "Alice", age: 25}; // Object
let numbers = [1, 2, 3, 4, 5]; // Array


3. 操作符

JavaScript中有多种操作符，用于执行不同的操作。

• 算术操作符：+, -, *, /, %, **

  javascript

  复制代码

  let sum = 10 + 5; // 15
let power = 2 ** 3; // 8

• 比较操作符：==, ===, !=, !==, >, <, >=, <=

  javascript

  复制代码

  let isEqual = (10 == "10"); // true, 因为==只比较值
let isStrictEqual = (10 === "10"); // false, 因为===同时比较值和类型

• 逻辑操作符：&&, ||, !

  javascript

  复制代码

  let isTrue = (true && false); // false
let isFalse = !true; // false

• 赋值操作符：=, +=, -=, *=, /=

  javascript

  复制代码

  let x = 10;
x += 5; // x 现在是 15


4. 条件语句

条件语句用于根据不同的条件执行不同的代码。

• if...else 语句

  javascript

  复制代码

  let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

• switch 语句

  javascript

  复制代码

  let color = "red";
switch(color) {
case "red":
console.log("Red color");
break;
case "blue":
console.log("Blue color");
break;
default:
console.log("Unknown color");
}


5. 循环语句

循环语句用于多次执行相同的代码。

• for 循环

  javascript

  复制代码

  for (let i = 0; i < 5; i++) {
console.log(i);
}

• while 循环

  javascript

  复制代码

  let i = 0;
while (i < 5) {
console.log(i);
i++;
}

• do...while 循环

  javascript

  复制代码

  let i = 0;
do {
console.log(i);
i++;
} while (i < 5);


6. 函数

函数是JavaScript中用于封装可重用代码的基础结构。

• 函数声明：

  javascript

  复制代码

  function greet(name) {
return "Hello, " + name;
}console.log(greet("Alice"));
• 匿名函数（函数表达式）：

  javascript

  复制代码

  const greet = function(name) {
return "Hello, " + name;
}console.log(greet("Alice"));
• 箭头函数（ES6）：

  javascript

  复制代码

  const greet = (name) => {
return "Hello, " + name;
}console.log(greet("Alice"));

7. 数组与对象的操作

JavaScript中的数组与对象提供了多种方法来进行操作。

• 数组操作：

  javascript

  复制代码

  let numbers = [1, 2, 3];
numbers.push(4); // 添加元素到末尾
numbers.pop(); // 移除末尾的元素
numbers.shift(); // 移除开头的元素
numbers.unshift(0); // 添加元素到开头

• 对象操作：

  javascript

  复制代码

  let person = {name: "Alice", age: 25};
person.name = "Bob"; // 修改属性
delete person.age; // 删除属性