JavaScript 基础

🤖AI 摘要

文章介绍 JavaScript 基础：

简介：是轻量级、跨平台语言，用于网页开发。数据类型分原始（如 String、Number 等）和引用（如 Object、Array 等）。变量声明有var（不推荐）、let（块级作用域可重赋值）、const（块级作用域常量）。
运算符与表达式：包括算术（如+ -等）、比较（如== ===等）、逻辑（如&& ||等）运算符及条件（三元）运算符。
控制结构：条件语句有if - else和switch - case；循环语句有for、while、do - while。
函数：可通过函数声明、表达式、箭头函数定义，能有返回值。
数组与对象：数组可创建并使用push等方法；对象可创建并访问其属性。
异常处理：用try - catch捕获处理错误。
ES6 新特性：含模板字面量、解构赋值（数组和对象）、默认参数值。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

1 JavaScript 简介#

JavaScript 是一种轻量级、跨平台的编程语言，广泛用于网页开发，能够实现动态内容的生成、事件的处理和用户交互。它是 Web 开发的三大基础技术之一，与 HTML 和 CSS 一同构成网页内容和外观的基础。

1.1 数据类型#

JavaScript 数据类型分为两类：原始数据类型和引用数据类型。

原始数据类型#

原始数据类型的值是不可变的，即每次赋值都会创建新的值。包括：

String：表示文本的数据类型。

1
let greeting = "你好，Keke!";

Number：表示整数和浮动数的数字类型。

1
let price = 9.99;

Boolean：表示真或假的值。

1
let isActive = true;

Undefined：表示变量声明了但没有赋值，值为 undefined。

1
let a;
2
console.log(a); // undefined

Null：表示空值，通常用作变量没有值的标记。

1
let noValue = null;

Symbol：ES6 新增的原始数据类型，用于创建唯一值，常用于对象属性的键。

1
let sym = Symbol("id");

BigInt：用于表示大于 Number 最大值的整数。

1
let bigNumber = 1234567890123456789012345678901234567890n;

引用数据类型#

引用数据类型是对象，存储的是对实际值的引用。包括：

Object：对象，用于存储多个值。

1
let person = {
2
  name: "John",
3
  age: 30,
4
};

Array：数组，用于存储多个有序的值。

1
let colors = ["red", "green", "blue"];

Function：函数也是对象，在 JavaScript 中，函数是一种特殊的对象。

1
function greet() {
2
  console.log("Hello, world!");
3
}

Date：用于处理日期和时间。

1
let today = new Date();

1.2 变量声明#

JavaScript 中的变量声明方式有 var、let 和 const。

var：var 声明的变量会被提升到函数或全局作用域顶部，并且存在作用域问题。ES6 以后不推荐使用。

1
var age = 25;

let：let 声明的是块级作用域变量，可以重新赋值。

1
let height = 175;

const：const 声明的是常量，一旦赋值后不能再改变。const 也是块级作用域。

1
const PI = 3.14;

2. 运算符与表达式#

2.1 算术运算符#

加法 +：用于两个数相加，或者连接两个字符串。

1
let x = 5;
2
let y = 3;
3
console.log(x + y); // 8
4
console.log("Hello, " + "World!"); // "Hello, World!"

减法 -：两个数相减。

1
console.log(x - y); // 2

乘法 *：两个数相乘。

1
console.log(x * y); // 15

除法 /：两个数相除。

1
console.log(x / y); // 1.666...

取余 %：获取两个数相除的余数。

1
console.log(x % y); // 2

自增 ++：将变量的值增加 1。

1
x++; // 6

自减 --：将变量的值减少 1。

1
y--; // 2

2.2 比较运算符#

相等 ==：比较两个值是否相等，不考虑类型转换。

1
console.log(5 == "5"); // true

严格相等 ===：比较两个值是否相等，且类型相同。

1
console.log(5 === "5"); // false

不等 !=：判断两个值是否不相等。

1
console.log(5 != 3); // true

严格不等 !==：判断两个值是否不相等或类型不同。

1
console.log(5 !== "5"); // true

大于 >

1
console.log(5 > 3); // true

小于 <

1
console.log(5 < 3); // false

大于等于 >=

1
console.log(5 >= 5); // true

小于等于 <=

1
console.log(5 <= 8); // true

2.3 逻辑运算符#

与 &&：当两个操作数都为 true 时，返回 true。

1
console.log(true && false); // false

或 ||：当其中一个操作数为 true 时，返回 true。

1
console.log(true || false); // true

非 !：对布尔值进行取反操作。

1
console.log(!true); // false

2.4 条件（三元）运算符#

1
let age = 20;
2
let status = age >= 18 ? "Adult" : "Minor";
3
console.log(status); // "Adult"

3. 控制结构#

3.1 条件语句#

if-else#

1
let age = 18;
2
if (age >= 18) {
3
  console.log("Adult");
4
} else {
5
  console.log("Minor");
6
}

switch-case#

1
let day = 2;
2
switch (day) {
3
  case 1:
4
    console.log("Monday");
5
    break;
6
  case 2:
7
    console.log("Tuesday");
8
    break;
9
  default:
10
    console.log("Other day");
11
}

3.2 循环语句#

for#

1
for (let i = 0; i < 5; i++) {
2
  console.log(i); // 0 1 2 3 4
3
}

while#

1
let i = 0;
2
while (i < 5) {
3
  console.log(i); // 0 1 2 3 4
4
  i++;
5
}

do-while#

1
let i = 0;
2
do {
3
  console.log(i); // 0 1 2 3 4
4
  i++;
5
} while (i < 5);

4. 函数#

4.1 函数声明与调用#

1
function greet(name) {
2
  console.log("Hello, " + name);
3
}
4
greet("Alice"); // "Hello, Alice"

4.2 函数表达式#

1
const greet = function(name) {
2
  console.log("Hello, " + name);
3
};
4
greet("Bob"); // "Hello, Bob"

4.3 箭头函数#

ES6 引入的简洁函数表达式，适用于匿名函数。

1
const greet = (name) => {
2
  console.log("Hello, " + name);
3
};
4
greet("Charlie"); // "Hello, Charlie"

4.4 返回值#

1
function add(a, b) {
2
  return a + b;
3
}
4
console.log(add(5, 3)); // 8

5. 数组与对象#

5.1 数组#

创建数组#

1
let fruits = ["Apple", "Banana", "Cherry"];

数组方法#

push()：添加元素到数组末尾。
pop()：删除数组末尾的元素。
shift()：删除数组开头的元素。
unshift()：在数组开头添加元素。
splice()：从数组中添加或删除元素。
forEach()：遍历数组并执行回调。
map()：返回一个新数组，数组中的每个元素经过函数处理。
filter()：返回一个新数组，包含符合条件的元素。
reduce()：用于累加、处理数组中的所有元素。

1
let numbers = [1, 2, 3];
2
let doubled = numbers.map(n => n * 2); // [2, 4, 6]

5.2 对象#

创建对象#

1
let person = {
2
  name: "John",
3
  age: 30,
4
  greet: function() {
5
    console.log("Hello, " + this.name);
6
  }
7
};
8
person.greet(); // "Hello, John"

访问对象属性#

1
console.log(person.name); // "John"

6. 异常处理#

6.1 try-catch#

1
try {
2
  let result = 10 / 0;
3
  console.log(result);
4
} catch (error) {
5
  console.log("Error: " + error.message); // 处理错误
6
}

7. ES6 新特性#

7.1 模板字面量#

1
let name = "Alice";
2
let greeting = `Hello, ${name}!`;
3
console.log(greeting); // "Hello, Alice!"

7.2 解构赋值#

数组解构#

1
let [a, b] = [1, 2];
2
console.log(a, b); // 1 2

对象解构#

1
let person = { name: "Alice", age: 25 };
2
let { name, age } = person;
3
console.log(name, age); // "Alice" 25

7.3 默认参数值#

1
function greet(name = "Guest") {
2
  console.log("Hello, " + name);
3
}
4
greet(); // "Hello, Guest"