JavaScript基础主要包括数据类型、变量和常量、运算符、条件语句、循环语句、函数、对象和面向对象编程、数组、DOM操作以及异步编程等。
-
数据类型:
JavaScript有基本数据类型和引用数据类型。基本数据类型包括数字(Number)、字符串(String)、布尔值(Boolean)、空值(Null)、未定义(Undefined)和符号(Symbol)。引用数据类型包括对象(Object)和数组(Array)。 -
变量和常量:
使用var、let或const关键字声明变量和常量。var是ES5的声明变量的方式,let和const是ES6新增的块级作用域声明变量和常量的方式。
var x = 5; // 声明一个变量x并赋值为5
let y = 10; // 声明一个块级作用域的变量y并赋值为10
const z = 15; // 声明一个块级作用域的常量z并赋值为15
-
运算符:
JavaScript支持各种运算符,包括算术运算符(+、-、、/、%)、赋值运算符(=、+=、-=、=、/=)、比较运算符(、=、!=、!==、>、<、>=、<=)、逻辑运算符(&&、||、!)等。 -
条件语句:
使用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;
}
- 循环语句:
使用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);
- 函数:
函数是JavaScript中的重要概念,可以封装可重用的代码块。可以使用function关键字定义函数,也可以使用箭头函数(ES6新增)。
function add(a, b) {
return a + b;
}
const multiply = (a, b) => a * b;
- 对象和面向对象编程:
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;
}
}
- 数组:
JavaScript中的数组是一种特殊的对象,可以存储多个值,并提供了一些常用的数组方法,如push、pop、shift、unshift等。
const numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加一个元素
numbers.pop(); // 删除数组末尾的一个元素
numbers.shift(); // 删除数组开头的一个元素
numbers.unshift(0); // 在数组开头添加一个元素
- 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");
});
- 异步编程:
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!
- 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);
});
- 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();
- 错误处理:
JavaScript中可以使用try-catch语句捕获和处理错误。可以在try块中编写可能引发错误的代码,然后在catch块中处理错误。
try {
// 可能引发错误的代码
} catch (error) {
// 处理错误的代码
}
- 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 }
- 模块化:
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
- 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();
- 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]