JavaScript基础大总结（一）【必看】

易点互联

已于 2024-06-18 14:20:57 修改

阅读量1.2k

点赞数 38

文章标签： javascript 开发语言 ecmascript

于 2024-06-18 11:09:46 首次发布

本文链接：https://blog.youkuaiyun.com/libol/article/details/139764902

版权

JavaScript，一种广泛使用的脚本语言，它赋予网页以动态性和交互性。作为Web开发不可或缺的一部分，JavaScript对于前端开发者来说是一门必须掌握的语言。本文将对JavaScript的基础知识进行总结，帮助初学者快速入门。

JavaScript简介

JavaScript是一种轻量级，解释型或即时编译型的编程语言，通常用于网页上实现客户端脚本编程。

JavaScript的基本语法

语句：JavaScript使用分号;来结束语句。
代码块：使用大括号{}来创建代码块，通常用于函数体和条件语句。

变量声明

var：传统的变量声明方式，具有函数作用域。
```
var message = "Hello, JavaScript!";
```
let：ES6引入，用于声明块级作用域的变量。
```
let index = 0;
```
const：ES6引入，用于声明块级作用域的常量，一旦赋值不可更改。
```
const PI = 3.14;
```

数据类型

JavaScript是动态类型语言，主要数据类型包括：

原始数据类型：
- Undefined：未定义，typeof返回"undefined"。
- Null：空值，typeof返回"object"（这是一个历史错误）。
- Boolean：逻辑实体，true或false。
- Number：数值类型，包括整数和浮点数。
- BigInt：处理大整数。
- String：文本数据，由双引号"或单引号'包围。
- Symbol：ES6引入，唯一的、不可变的数据类型。
复合数据类型：
- Object：包含属性的对象，属性可以是基本数据类型或其他对象。
- Array：有序的数据集合。

运算符

算术运算符：+、-、*、/、%（取余）、**（指数）。
赋值运算符：=、+=、-=等。
比较运算符：==、===、!=、!==、>、<、>=、<=。
逻辑运算符：&&（逻辑与）、||（逻辑或）、!（逻辑非）。
位运算符：&、|、^（异或）、~（取反）、<<、>>（位移）。
条件（三元）运算符：condition ? expr1 : expr2。

类型转换

字符串转换：使用String(value)或字符串连接操作。
数字转换：使用Number(value)或算术运算符。
布尔值转换：使用Boolean(value)。

特殊值

NaN：非数值（Not-a-Number），如0/0。
Infinity 或 -Infinity：表示无限大或无限小。

控制结构

if...else 语句

用于基于条件执行不同的代码块。

let score = 75;
if (score > 70) {
    console.log("Pass");
} else {
    console.log("Fail");
}

switch 语句

用于基于不同的情况执行不同的代码块。

let grade = 'B';
switch (grade) {
    case 'A':
        console.log("Excellent");
        break;
    case 'B':
        console.log("Good");
        break;
    default:
        console.log("Need improvement");
}

loops 循环

包括for、while和do...while循环，用于重复执行代码块。

for 循环

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

while 循环

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

do...while 循环

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

for...in 循环

用于遍历对象的属性。

let person = { name: "Alice", age: 30 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

for...of 循环

用于遍历可迭代对象（如数组、字符串等）。

let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
    console.log(number);
}

函数

函数的定义

使用function关键字或箭头函数定义函数。

function greet(name) {
    console.log("Hello, " + name);
}

const sayHello = (name) => console.log("Hello, " + name);

参数和返回值

函数可以接收参数，并使用return语句返回值。

function sum(a, b) {
    return a + b;
}

let result = sum(5, 10);
console.log(result); // 输出 15

作用域
- 函数有自己的作用域，变量在函数外部不可见。
闭包
- 函数可以访问其创建时的作用域中的变量，即使函数在其作用域之外被调用。

递归

函数可以调用自身，实现递归操作。

function factorial(n) {
    if (n === 0) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 输出 120

数组操作方法

创建数组
```
let numbers = [1, 2, 3, 4, 5];
```

访问数组元素

let firstElement = numbers[0]; // 获取第一个元素

修改数组元素

numbers[0] = 10; // 修改第一个元素

数组长度

let length = numbers.length; // 获取数组长度

添加元素
- 使用push()在数组末尾添加元素。
- 使用unshift()在数组开头添加元素。
```
numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.unshift(0); // [0, 1, 2, 3, 4, 5, 6]
```
删除元素
- 使用pop()删除数组末尾的元素。
- 使用shift()删除数组开头的元素。
```
numbers.pop(); // 删除6
numbers.shift(); // 删除0
```

数组遍历

使用for循环或for...of循环遍历数组。

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

for (let number of numbers) {
    console.log(number);
}

数组方法
- map()、filter()、reduce()、find()、some()、every()等。

对象的属性与方法

创建对象

使用对象字面量或构造函数。

let person = {
    name: "Alice",
    age: 30
};

function Person(name, age) {
    this.name = name;
    this.age = age;
}

访问对象属性
```
let name = person.name; // "Alice"
```
修改对象属性
```
person.name = "Bob"; // 修改属性
```

添加属性

person.gender = "Female"; // 添加新属性

删除属性
```
delete person.age; // 删除属性
```

对象方法

对象可以拥有方法，即具有函数属性。

person.greet = function() {
    console.log("Hello, my name is " + this.name);
};

遍历对象属性

使用for...in循环遍历对象的属性。

for (let key in person) {
    console.log(key + ": " + person[key]);
}

获取对象属性的键和值

let keys = Object.keys(person); // ["name", "gender"]
let values = Object.values(person); // ["Alice", "Female"]
let entries = Object.entries(person); // [["name", "Alice"], ["gender", "Female"]]