JavaScript基础-简单易懂总结

JavaScript基础主要包括数据类型、变量和常量、运算符、条件语句、循环语句、函数、对象和面向对象编程、数组、DOM操作以及异步编程等。

1. 数据类型：
   JavaScript有基本数据类型和引用数据类型。基本数据类型包括数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）、未定义（Undefined）和符号（Symbol）。引用数据类型包括对象（Object）和数组（Array）。

2. 变量和常量：
   使用var、let或const关键字声明变量和常量。var是ES5的声明变量的方式，let和const是ES6新增的块级作用域声明变量和常量的方式。

var x = 5; // 声明一个变量x并赋值为5
let y = 10; // 声明一个块级作用域的变量y并赋值为10
const z = 15; // 声明一个块级作用域的常量z并赋值为15
1
2
3

3. 运算符：
   JavaScript支持各种运算符，包括算术运算符（+、-、、/、%）、赋值运算符（=、+=、-=、=、/=）、比较运算符（、=、!=、!==、>、<、>=、<=）、逻辑运算符（&&、||、!）等。

4. 条件语句：
   使用if语句、switch语句等进行条件判断和分支控制。

let num = 5;
if (num > 0) {
  console.log("Positive");
} else if (num < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

switch (num) {
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break;
  default:
    console.log("Other");
    break;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5. 循环语句：
   使用for循环、while循环、do-while循环等进行循环控制。

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

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

let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6. 函数：
   函数是JavaScript中的重要概念，可以封装可重用的代码块。可以使用function关键字定义函数，也可以使用箭头函数（ES6新增）。

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

const multiply = (a, b) => a * b;
1
2
3
4
5

7. 对象和面向对象编程：
   JavaScript是一种面向对象的编程语言，可以使用对象和类进行面向对象编程。对象是由属性和方法组成的，可以使用对象字面量或构造函数创建对象。

const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

8. 数组：
   JavaScript中的数组是一种特殊的对象，可以存储多个值，并提供了一些常用的数组方法，如push、pop、shift、unshift等。

const numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加一个元素
numbers.pop(); // 删除数组末尾的一个元素
numbers.shift(); // 删除数组开头的一个元素
numbers.unshift(0); // 在数组开头添加一个元素
1
2
3
4
5

9. DOM操作：
   JavaScript可以通过操作文档对象模型（DOM）来实现对网页的动态操作，包括元素的创建、删除、修改、事件绑定等。

const element = document.createElement("div"); // 创建一个div元素
element.textContent = "Hello, World!"; // 设置元素的文本内容
document.body.appendChild(element); // 将元素添加到文档中

const button = document.getElementById("myButton"); // 获取id为myButton的按钮元素
button.addEventListener("click", function() {
  console.log("Button clicked");
});
1
2
3
4
5
6
7
8

10. 异步编程：
    JavaScript是一门单线程语言，但是在处理一些耗时的操作（如网络请求、文件读写等）时，如果使用同步的方式会导致程序阻塞。为了解决这个问题，JavaScript引入了异步编程的概念。

常见的异步编程方式有回调函数、Promise和async/await。

• 回调函数：可以通过将一个函数作为参数传递给另一个函数，在适当的时候调用该函数来处理异步操作的结果。

function fetchData(callback) {
  setTimeout(() => {
    const data = "Hello, World!";
    callback(data); // 异步操作完成后调用回调函数
  }, 1000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData); // 输出：Hello, World!
1
2
3
4
5
6
7
8
9
10
11
12

• Promise：Promise是一种用于处理异步操作的对象，它可以表示一个异步操作的最终完成或失败，并可以链式调用多个异步操作。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Hello, World!";
      resolve(data); // 异步操作成功时调用resolve
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 输出：Hello, World!
  })
  .catch(error => {
    console.error(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• async/await：async/await是一种基于Promise的异步编程方式，它使用async函数来定义异步操作，使用await关键字来等待一个Promise的完成。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Hello, World!";
      resolve(data); // 异步操作成功时调用resolve
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data); // 输出：Hello, World!
  } catch (error) {
    console.error(error);
  }
}

processData();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

11. 错误处理：
    JavaScript中可以使用try-catch语句捕获和处理错误。可以在try块中编写可能引发错误的代码，然后在catch块中处理错误。

try {
  // 可能引发错误的代码
} catch (error) {
  // 处理错误的代码
}
1
2
3
4
5

12. JSON：
    JavaScript Object Notation（JSON）是一种常用的数据格式，用于存储和交换数据。可以使用JSON.stringify()将JavaScript对象转换为JSON字符串，使用JSON.parse()将JSON字符串转换为JavaScript对象。

const person = {
  name: "John",
  age: 30
};

const jsonStr = JSON.stringify(person); // 将对象转换为JSON字符串
console.log(jsonStr); // 输出：{"name":"John","age":30}

const jsonObj = JSON.parse(jsonStr); // 将JSON字符串转换为对象
console.log(jsonObj); // 输出：{ name: "John", age: 30 }
1
2
3
4
5
6
7
8
9
10

13. 模块化：
    JavaScript中的模块化可以将代码分割为多个模块，每个模块有自己的作用域，并可以通过导入和导出来共享代码。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from "./math.js";

console.log(add(5, 3)); // 输出：8
console.log(subtract(5, 3)); // 输出：2
1
2
3
4
5
6
7
8
9

14. AJAX：
    JavaScript中的Asynchronous JavaScript And XML（AJAX）可以通过XMLHttpRequest对象发送异步请求，与服务器进行数据交互。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // 发送GET请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();
1
2
3
4
5
6
7
8
9

15. ES6+特性：
    ES6及其后续版本引入了许多新的特性和语法糖，如箭头函数、模板字符串、解构赋值、默认参数、展开运算符等。

const greet = name => `Hello, ${name}!`; // 箭头函数
console.log(greet("John")); // 输出：Hello, John!

const person = {
  name: "John",
  age: 30
};

const { name, age } = person; // 解构赋值
console.log(name); // 输出：John
console.log(age); // 输出：30

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5)); // 输出：5
console.log(multiply(5, 3)); // 输出：15

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // 展开运算符
console.log(newNumbers); // 输出：[1, 2, 3, 4, 5]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22