- 变量声明和赋值 JavaScript中使用var、let、或const关键字来声明变量:
var age = 25; // 变量声明并赋值
let name; // 变量声明,但未赋值
const PI = 3.14159; // 常量声明并赋值,无法被修改
- 数据类型: JavaScript中有5种原始数据类型:字符串、数字、布尔、空值(null),以及未定义(undefined)。还有3种引用数据类型:对象、数组、函数。
字符串:
let str = 'Hello World';
let str2 = "Hello World";
let str3 = `Hello World`; // 模板字符串
数字:
let num1 = 10;
let num2 = 3.14;
let num3 = 0b1010; // 二进制
let num4 = 0o755; // 八进制
let num5 = 0xAF; // 十六进制
布尔:
let isTrue = true;
let isFalse = false;
空值和未定义:
let empty = null; // 空值
let undef = undefined;
对象:
let obj = {
name: 'Alice',
age: 20,
gender: 'female'
};
数组:
let arr = ['apple', 'orange', 'banana'];
函数:
function add(a, b) {
return a + b;
}
-
运算符: JavaScript中包括算术运算符(+、-、、/等)、比较运算符(==、!=、===、!==、>、<、>=、<=等)、逻辑运算符(&&、||、!等)、赋值运算符(=、+=、-=、=、/=等)等多种运算符。
-
注释: JavaScript支持单行注释(//)和多行注释(/.../)。
// 这是一行注释
/*
这是一个
多行注释
*/
- 控制流程: 条件语句if、else if、else、switch:
let score = 80;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
switch (score) {
case 90:
console.log('优秀');
break;
case 80:
console.log('良好');
break;
case 60:
console.log('及格');
break;
default:
console.log('不及格');
break;
}
循环语句for、while、do-while、for...in、for...of:
for (let i = 0; i < 10; i++) {
console.log(i);
}
let j = 0;
while (j < 10) {
console.log(j);
j++;
}
let k = 0;
do {
console.log(k);
k++;
} while (k < 10);
let fruits = ['apple', 'orange', 'banana'];
for (let index in fruits) {
console.log(index); // 输出数组索引
console.log(fruits[index]); // 输出元素值
}
for (let fruit of fruits) {
console.log(fruit);
}
- 函数: 声明函数:
function add(a, b) {
return a + b;
}
匿名函数和箭头函数:
let add = function(a, b) {
return a + b;
};
let add = (a, b) => {
return a + b;
};
参数传递和返回值:
function add(a, b) {
return a + b;
}
let sum = add(1, 2); // 传递参数,返回值赋值给变量
console.log(sum); // 3
作用域和闭包:
let a = 1; // 全局变量
function test() {
let b = 2; // 局部变量
console.log(a); // 可以访问全局变量
console.log(b); // 可以访问局部变量
}
test(); // 输出1和2
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
let counter = createCounter();
counter(); // 输出1
counter(); // 输出2
- 对象: 创建对象:
let person = {
name: 'Alice',
age: 20,
gender: 'female'
};
let person2 = new Object();
person2.name = 'Bob';
person2.age = 30;
person2.gender = 'male';
let person3 = Object.create(null);
person3.name = 'Charlie';
person3.age = 40;
person3.gender = 'male';
属性和方法:
let person = {
name: 'Alice',
age: 20,
gender: 'female',
sayHello: function() {
console.log(`Hello, my name is ${this.name}.`);
}
};
console.log(person.name); // 访问属性
person.age = 25; // 修改属性
person.sayHello(); // 调用方法
原型和原型链:
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
};
let person = new Person('Alice', 20, 'female');
console.log(person.name); // 访问属性
person.sayHello(); // 调用方法
console.log(person.__proto__); // Person原型
console.log(Person.prototype.__proto__); // Object原型
console.log(Object.prototype.__proto__); // null
- 数组: 创建数组:
let fruits = ['apple', 'orange', 'banana'];
访问和修改元素:
console.log(fruits[0]); // 访问单个元素
fruits[1] = 'pear'; // 修改元素
console.log(fruits); // 输出整个数组
数组方法:
fruits.push('grape'); // 添加元素到数组末尾
fruits.pop(); // 删除数组末尾的元素
fruits.shift(); // 删除数组第一个元素
fruits.unshift('kiwi'); // 添加元素到数组第一个位置
fruits.slice(1, 3); // 返回从第1个元素到第3个元素之前的子数组
fruits.splice(1, 2, 'pear', 'grape'); // 从第1个元素开始删除2个元素,并添加pear和grape
fruits.forEach(function(fruit) { // 遍历数组
console.log(fruit);
});
let newFruits = fruits.map(function(fruit) { // 返回新数组
return fruit + 's';
});
let filteredFruits = fruits.filter(function(fruit) { // 返回新数组
return fruit.length > 5;
});
- 字符串操作: 字符串连接和拆分:
let str1 = 'Hello';
let str2 = 'World';
let str3 = str1 + ' ' + str2; // 字符串连接
console.log(str3);
let arr = str3.split(' '); // 字符串拆分成数组
console.log(arr[0]); // Hello
字符串方法:
let str = 'Hello World';
console.log(str.length); // 返回字符串长度
console.log(str.charAt(0)); // 返回指定位置的字符
console.log(str.substring(1, 3)); // 返回指定位置之间的子串
console.log(str.indexOf('W')); // 返回指定字符的位置
console.log(str.replace('World', 'JavaScript')); // 替换子串
正则表达式:
let str = 'Hello World';
let pattern = /l+/g; // 匹配一个或多个l字符
let matches = str.match(pattern); // 返回匹配结果
console.log(matches); // ['ll', 'l']
- 异步编程: 回调函数:
function fetchData(callback) {
setTimeout(function() {
let data = [1, 2, 3];
callback(data);
}, 1000);
}
function processData(data) {
console.log(data);
}
fetchData(processData); // 输出[1, 2, 3]
- 变量声明和赋值
变量声明使用关键字 var、let 或 const。var 声明的变量作用域为当前函数或全局范围,let 和 const 声明的变量作用域为当前块级作用域。
示例:
var x = 10;
let y = "hello";
const z = true;
- 原始类型和引用类型
原始类型包括字符串、数字、布尔、空值和未定义,它们是不可变的。
引用类型包括对象、数组和函数。它们是可变的,可以通过修改其属性或元素来改变其状态。
示例:
let str = "hello";
let num = 123;
let bool = true;
let nullValue = null;
let undefinedValue = undefined;
let obj = { name: "John", age: 30 };
let arr = [1, 2, 3];
let func = function() { console.log("hello"); };
- 运算符
常见的运算符包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。
示例:
let x = 5;
let y = 10;
let z = x + y; // 算术运算符
let a = x < y; // 比较运算符
let b = x > 2 && y < 15; // 逻辑运算符
let c = "hello";
let d = c + "world"; // 字符串拼接
x += 2; // 赋值运算符
- 注释
单行注释使用 // 符号,多行注释使用 /* */ 符号。
示例:
// 这是一个单行注释
/*
这是一个
多行注释
*/
- 条件语句
常见的条件语句有 if、else if、else、switch。
示例:
let x = 10;
if (x > 5) {
console.log("x 大于 5");
} else if (x < 5) {
console.log("x 小于 5");
} else {
console.log("x 等于 5");
}
switch (x) {
case 5:
console.log("x 等于 5");
break;
case 10:
console.log("x 等于 10");
break;
default:
console.log("x 不等于 5 或 10");
break;
}
- 循环语句
常见的循环语句有 for、while、do-while、for...in、for...of。
示例:
for (let i = 0; i < 5; i++) {
console.log(i);
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
i = 0;
do {
console.log(i);
i++;
} while (i < 5);
let arr = [1, 2, 3];
for (let item in arr) {
console.log(item);
}
for (let item of arr) {
console.log(item);
}
- 函数
声明函数使用关键字 function。
示例:
function sayHello() {
console.log("hello");
}
sayHello();
function sum(x, y) {
return x + y;
}
let result = sum(5, 10);
console.log(result);
let func = function() {
console.log("hello");
};
func();
- 作用域和闭包
作用域分为全局作用域和局部作用域,局部作用域又分为函数作用域和块级作用域。
闭包是指一个函数可以访问其外部作用域中的变量,即使该外部作用域已经执行完毕。
示例:
let x = 5; // 全局作用域
function sum(y) { // 函数作用域
let x = 10; // 局部作用域
return x + y;
}
for (let i = 0; i < 5; i++) { // 块级作用域
console.log(i);
}
function outer() {
let x = 10;
function inner() {
console.log(x); // 可以访问 outer 函数中的 x 变量
}
return inner;
}
let func = outer();
func();
- 对象
创建对象可以使用字面量、构造函数、Object.create() 等方式。
示例:
let obj1 = { name: "John", age: 30 };
let obj2 = new Object();
obj2.name = "Mary";
obj2.age = 25;
let obj3 = Object.create(obj1);
obj3.gender = "female";
- 属性和方法
访问对象的属性和方法可以使用点号或方括号运算符。调用方法使用圆括号。
示例:
let obj = {
name: "John",
age: 30,
sayHello: function() {
console.log("hello");
}
};
console.log(obj.name);
console.log(obj["age"]);
obj.sayHello();
- 原型和原型链
每个对象都有一个原型对象,原型对象拥有一些共享的属性和方法,可以通过对象的 proto 属性访问。如果对象调用某个属性或方法时不存在,它会去原型对象中查找,直到找到为止,这种机制就是原型链。
示例:
let parent = {
sayHello: function() {
console.log("hello");
}
};
let child = Object.create(parent);
child.name = "John";
child.sayHello(); // 继承了 parent 的 sayHello 方法
- 数组
创建数组使用方括号。访问和修改元素使用方括号运算符,遍历数组可以使用 for 循环、forEach、map、filter 等方法。
示例:
let arr = [1, 2, 3];
console.log(arr[0]);
arr[1] = 10;
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
arr.forEach(function(item) {
console.log(item);
});
let newArr = arr.map(function(item) {
return item * 2;
});
let filteredArr = arr.filter(function(item) {
return item > 1;
});
- 字符串操作
字符串连接可以使用加号运算符或模板字符串(使用反引号包裹),字符串拆分可以使用 split 方法或正则表达式。
示例:
let str1 = "hello";
let str2 = "world";
let str3 = `${str1} ${str2}`;
let arr = str1.split("");
let arr2 = str2.split("o");
let index = str1.indexOf("e");
let replacedStr = str1.replace("h", "H");
- 正则表达式
正则表达式是用来匹配、替换、提取等操作的工具。可以使用 RegExp 构造函数或正则表达式字面量来创建正则表达式对象。
示例:
let str = "hello world";
let pattern = /l/;
let result = pattern.test(str); // 匹配 l 字符
console.log(result);
let replacedStr = str.replace(/o/g, "O"); // 全局替换 o 字符
console.log(replacedStr);
let numStr = "123abc";
let numPattern = /\d+/g;
let nums = numStr.match(numPattern); // 提取数字
console.log(nums);
- 异步编程
异步编程是指某些操作需要在后台执行,执行完毕后再回调处理结果。常见的异步编程方式有回调函数、Promise 对象和 async/await。
示例:
使用回调函数:
function getData(callback) {
setTimeout(function() {
let data = [1, 2, 3];
callback(data);
}, 1000);
}
getData(function(data) {
console.log(data);
});
使用 Promise:
function getData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
let data = [1, 2, 3];
resolve(data);
}, 1000);
});
}
getData()
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(error);
});
使用 async/await:
async function getData() {
let data = await fetch(url);
let result