-
JavaScript的组成:
1.数据类型：JavaScript有8种基本数据类型，包括Undefined、Null、Boolean、Number、String、BigInt、Symbol和Object。
-
变量：在JavaScript中，可以使用var、let或const关键字声明变量。
-
函数：JavaScript中的函数是一种可重用的代码块，可以使用function关键字定义。
-
对象：JavaScript中的对象是一种键值对的集合，可以使用{}表示。
-
数组：JavaScript中的数组是一种有序的数据集合，可以使用[]表示。
-
控制结构：JavaScript中有if、else if、else、switch、for、while等控制结构。
-
循环结构：JavaScript中有for循环、while循环和do...while循环。
-
事件处理：JavaScript中可以使用addEventListener方法为元素添加事件监听器。
-
内置对象：JavaScript中有很多内置对象，如Math、Date、Array、String等。
-
原型链：JavaScript中的对象是通过原型链实现继承的。
2.JavaScript的特点：
-
动态类型语言：JavaScript是一种动态类型的语言，这意味着变量的类型可以在运行时改变。
-
解释型语言：JavaScript是一种解释型语言，它不需要编译成二进制代码就可以运行。
-
面向对象编程：虽然JavaScript不是纯粹的面向对象编程语言，但它支持面向对象编程的概念，如类、对象和继承。
-
事件驱动：JavaScript是事件驱动的，这意味着程序中的事件（如用户点击按钮或键盘输入）会触发相应的函数执行。
-
异步编程：JavaScript支持异步编程，可以使用回调函数、Promises和async/await等技术处理异步操作。
-
跨平台：JavaScript可以在多种浏览器和操作系统上运行，具有很好的跨平台兼容性。
-
交互性强：JavaScript可以与HTML和CSS结合使用，实现丰富的网页交互效果。
3.常量变量
- 变量声明：在JavaScript中，可以使用
var、let或const关键字来声明变量。
var a = 10; // 使用var声明变量
let b = 20; // 使用let声明变量
const c = 30; // 使用const声明常量
- 数据类型：JavaScript有以下几种基本数据类型：
- Number：数字类型，包括整数和浮点数。
- String：字符串类型，用双引号或单引号包围的文本。
- Boolean：布尔类型，表示真或假。
- Undefined：未定义类型，表示变量未赋值。
- Null：空类型，表示变量没有值。
let num = 42; // Number类型
let str = "Hello, World!"; // String类型
let bool = true; // Boolean类型
let undef; // Undefined类型
let nullValue = null; // Null类型
- 运算符：JavaScript支持以下运算符：
- 算术运算符：+、-、*、/、%（取模）、++（自增）、--（自减）。
- 比较运算符：==（等于）、！=（不等于）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）。
- 逻辑运算符：&&（与）、||（或）、！（非）。
- 位运算符：&（按位与）、|（按位或）、^（按位异或）、~（按位取反）、<<（左移）、>>（右移）。
let a = 5;
let b = 10;
console.log(a + b); // 加法
console.log(a - b); // 减法
console.log(a * b); // 乘法
console.log(a / b); // 除法
console.log(a % b); // 取模
console.log(a++); // 自增
console.log(b--); // 自减
- 控制结构：JavaScript支持if语句、for循环、while循环等控制结构。
// if语句
if (a > b) {
console.log("a大于b");
} else if (a < b) {
console.log("a小于b");
} else {
console.log("a等于b");
}
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while循环
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
- 函数：在JavaScript中，可以使用function关键字来定义函数。
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 调用函数并输出结果
4.在JavaScript中，变量分为全局变量和局部变量。全局变量在整个程序范围内都可以访问，而局部变量只能在其所在的函数内部访问。
全局变量的声明方式是在函数外部使用var、let或const关键字定义的变量。例如：
var globalVar = "我是全局变量";function exampleFunction() {
console.log(globalVar); // 可以访问全局变量
}
exampleFunction();
局部变量的声明方式是在函数内部使用var、let或const关键字定义的变量。例如：
function exampleFunction() {
var localVar = "我是局部变量";
console.log(localVar); // 只能访问局部变量
}
exampleFunction();
console.log(localVar); // 无法访问局部变量
- 条件语句（if...else）：用于根据条件执行不同的代码块。
if (条件) {
// 如果条件为真，执行这里的代码
} else {
// 如果条件为假，执行这里的代码
}
- 循环语句（for、while）：用于重复执行一段代码。
- for循环：
for (初始化； 条件； 更新) {
// 当条件为真时，执行这里的代码
}
- while循环：
while (条件) {
// 当条件为真时，执行这里的代码
}
- 跳转语句（break、continue、return）：用于在循环或条件语句中提前结束执行。
- break：跳出当前循环或switch语句。
if (条件) {
break;
}
- continue：跳过当前循环的剩余部分，直接进入下一次循环。
for (初始化； 条件； 更新) {
if (条件) {
continue;
}
// 当条件为假时，执行这里的代码
}
- return：从函数中返回一个值，并终止函数的执行。
function example() {
if (条件) {
return 值；
}
// 当条件为假时，执行这里的代码
}
例如，创建一个空数组：
var arr = [];
通过索引访问数组元素：
var firstElement = arr[0];
向数组中添加新元素：
arr.push(1); // 在数组末尾添加元素1
arr.push("hello"); // 在数组末尾添加字符串"hello"
删除数组中的元素：
arr.pop(); // 删除数组末尾的元素
arr.shift(); // 删除数组开头的元素
获取数组的长度：
var length = arr.length;
遍历数组：
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
10.在JavaScript中，对象是一种无序的数据集合，以键值对的形式存储数据。对象的属性和方法可以通过点号或方括号访问。
例如，创建一个空对象：
var obj = {};
通过点号访问对象属性：
var name = obj.name;
通过方括号访问对象属性：
var age = obj['age'];
添加对象属性：
obj.name = '张三';
obj['age'] = 25;
删除对象属性：
delete obj.name;
检查对象是否具有某个属性：
if ('name' in obj) {
console.log('对象有name属性');
}在JavaScript中，可以使用addEventListener方法为元素添加事件监听器。这个方法接受两个参数：事件类型（如"click"、"mouseover"等）和要执行的回调函数。当指定的事件发生时，回调函数将被调用。
以下是一个简单的示例，演示如何使用addEventListener方法为按钮添加点击事件监听器：
// 获取按钮元素
var button = document.getElementById("myButton");
// 定义点击事件的回调函数
function handleClick() {
alert("按钮被点击了！");
}
// 为按钮添加点击事件监听器
button.addEventListener("click", handleClick);在JavaScript中，异步编程是一种处理程序执行顺序的方式，它允许程序在等待某个操作完成时继续执行其他任务。这可以提高程序的性能，特别是在处理大量数据或进行网络请求时。
- 回调函数：回调函数是一种常见的异步编程方式，它将一个函数作为参数传递给另一个函数，当异步操作完成时，调用这个函数。
function asyncFunction(callback) {
// 异步操作
setTimeout(function() {
callback('异步操作完成');
}, 1000);
}
asyncFunction(function(result) {
console.log(result); // 输出 "异步操作完成"
});
- Promises：Promises是ES6引入的一种用于处理异步操作的对象。它有三种状态：pending（待定）、fulfilled（已成功）和rejected（已失败）。Promises提供了then方法来处理异步操作的结果，以及catch方法来处理错误。
function asyncFunction() {
return new Promise(function(resolve, reject) {
// 异步操作
setTimeout(function() {
resolve('异步操作完成');
}, 1000);
});
}
asyncFunction().then(function(result) {
console.log(result); // 输出 "异步操作完成"
}).catch(function(error) {
console.error(error);
});
- async/await：async/await是ES7引入的一种更简洁的异步编程方式。它使用async关键字定义一个异步函数，然后使用await关键字等待异步操作的结果。
async function asyncFunction() {
// 异步操作
const result = await new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('异步操作完成');
}, 1000);
});
console.log(result); // 输出 "异步操作完成"
}
asyncFunction();在JavaScript中，原型链是通过原型对象实现的。每个对象都有一个指向其原型对象的指针，通过这个指针可以访问到该对象的所有属性和方法。原型链的创建过程如下：
- 创建一个构造函数，用于定义对象的结构。
- 在构造函数的原型上添加属性和方法。
- 使用构造函数创建新的对象实例。
- 新创建的对象实例会继承构造函数原型上的属性和方法。
下面是一个简单的示例：
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在构造函数的原型上添加方法
Person.prototype.sayHello = function() {
console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};
// 使用构造函数创建对象实例
var person1 = new Person("Alice", 30);
var person2 = new Person("Bob", 25);
// 调用对象实例的方法
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 输出 "Hello, my name is Bob and I am 25 years old."
在这个示例中，Person是一个构造函数，它接受两个参数name和age。我们在Person的原型上添加了一个名为sayHello的方法。当我们使用new Person()创建新的对象实例时，这些实例会自动继承Person原型上的sayHello方法。
14.在JavaScript中，this关键字表示当前执行上下文的对象。在不同的上下文中，this的值可能会有所不同。例如，在全局作用域中，this指向全局对象；在函数内部，this指向调用该函数的对象。
- 在全局作用域中，this指向全局对象（在浏览器中是window对象）。
function test() {
console.log(this); // 输出全局对象（在浏览器中是window对象）
}
test();
- 在函数内部，this指向调用该函数的对象。
function Person(name) {
this.name = name;
}
var person1 = new Person("张三");
console.log(person1.name); // 输出 "张三"
function test() {
console.log(this.name);
}
var person2 = new Person("李四");
test.call(person2); // 输出 "李四"
- 在事件处理程序中，this指向触发事件的元素。
<button id="btn">点击我</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
console.log(this); // 输出触发事件的元素（按钮元素）
});
</script>
- 在箭头函数中，this指向定义时所在的上下文。
function Person(name) {
this.name = name;
}
var person1 = new Person("张三");
var person2 = new Person("李四");
var getPersonName = () => {
console.log(this.name);
};
getPersonName.call(person1); // 输出 "张三"
getPersonName.call(person2); // 输出 "李四"15.在JavaScript中，使用new操作符创建对象时，需要遵循以下步骤：
- 定义一个构造函数，该构造函数包含用于初始化对象的属性和方法。
- 使用new关键字调用构造函数，并将返回的对象赋值给一个变量。
- 如果构造函数没有显式地返回一个对象，那么new操作符会自动将返回值设置为新创建的对象实例。
示例代码：
function Person(name, age) { this.name = name;
this.age = age;
}
// 使用new关键字调用构造函数
var person1 = new Person("张三", 30);
// 输出person1的属性
console.log(person1.name); // 输出 "张三"
console.log(person1.age); // 输出 30例如，以下代码展示了如何使用模板字符串拼接字符串：
const name = "张三";
const age = 25;
const message = `我的名字是${name}，我今年${age}岁。`;
console.log(message); // 输出 "我的名字是张三，我今年25岁。"-
创建正则表达式：
- 使用RegExp对象：
const regex = new RegExp('pattern', 'flags'); - 使用字面量语法：
const regex = /pattern/flags;
- 使用RegExp对象：
-
匹配字符串：
match()方法：str.match(regex)，返回一个数组，包含匹配到的结果。如果没有匹配到任何结果，返回null。exec()方法：regex.exec(str)，在字符串中查找匹配项，返回一个数组，包含匹配到的结果。如果没有匹配到任何结果，返回null。
-
搜索字符串：
search()方法：str.search(regex)，返回匹配到的第一个结果的索引，如果没有匹配到任何结果，返回-1。
-
替换字符串：
replace()方法：str.replace(regex, 'replacement')，将匹配到的所有结果替换为指定的字符串，并返回替换后的字符串。
示例代码：
// 创建正则表达式
const regex = /hello/i;
// 匹配字符串
const str1 = 'Hello, world!';
const result1 = str1.match(regex); // ['Hello']
const result2 = regex.exec(str1); // ['Hello']
// 搜索字符串
const result3 = str1.search(regex); // 0
// 替换字符串
const result4 = str1.replace(regex, 'Hi'); // 'Hi, world!'-
创建Date对象：
可以使用构造函数创建Date对象，如下所示：const date = new Date();这将创建一个表示当前日期和时间的Date对象。
-
获取日期和时间的各个部分：
可以使用getter方法获取日期和时间的各个部分，如下所示：const year = date.getFullYear(); // 获取年份 const month = date.getMonth() + 1; // 获取月份（注意：月份是从0开始的，所以需要加1） const day = date.getDate(); // 获取日期 const hours = date.getHours(); // 获取小时 const minutes = date.getMinutes(); // 获取分钟 const seconds = date.getSeconds(); // 获取秒数 -
设置日期和时间的各个部分：
可以使用setter方法设置日期和时间的各个部分，如下所示：date.setFullYear(year); // 设置年份 date.setMonth(month - 1); // 设置月份（注意：月份是从0开始的，所以需要减1） date.setDate(day); // 设置日期 date.setHours(hours); // 设置小时 date.setMinutes(minutes); // 设置分钟 date.setSeconds(seconds); // 设置秒数 -
格式化日期和时间：
可以使用toLocaleString、toDateString等方法将Date对象格式化为字符串，如下所示：const formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串 const formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
-
Math对象提供的一些数学常数：
- PI：圆周率π，约等于3.141592653589793
- E：自然对数的底数，约等于2.718281828459045
- LN2：自然对数2的值，约等于0.6931471805599453
- LN10：自然对数10的值，约等于2.302585092994046
-
Math对象提供的一些数学函数：
- sqrt(x)：返回x的平方根
- pow(x, y)：返回x的y次方
- abs(x)：返回x的绝对值
- max(a, b, c, ...)：返回a、b、c等中的最大值
- min(a, b, c, ...)：返回a、b、c等中的最小值
-
Math对象提供的一些数学计算方法：
- Math.floor(x)：返回小于或等于x的最大整数
- Math.ceil(x)：返回大于或等于x的最小整数
- Math.round(x)：返回四舍五入后的整数
- Math.random()：返回一个0到1之间的随机数（包括0，不包括1）
JSON是一种数据格式，它使用键值对来表示数据。在JavaScript中，可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，使用JSON.parse()方法将JSON字符串转换为JavaScript对象。
以下是一个简单的示例代码：
// 创建一个JavaScript对象
var obj = {
"name": "John",
"age": 30,
"city": "New York"
};
// 将JavaScript对象转换为JSON字符串
var jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出：{"name":"John","age":30,"city":"New York"}
// 将JSON字符串转换为JavaScript对象
var parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // 输出：{ name: 'John', age: 30, city: 'New York' }
在上面的示例中，我们首先创建了一个JavaScript对象obj，然后使用JSON.stringify()方法将其转换为JSON字符串jsonString。接着，我们使用JSON.parse()方法将JSON字符串转换回JavaScript对象parsedObj。