当前位置：首页 > wzjs >正文

中石化第五建设有限公司官方网站建设网站设计

wzjs 2025/9/15 12:44:42

中石化第五建设有限公司官方网站,建设网站设计,安阳市建设安全监督站网站,重庆招考网1. 变量与数据类型变量声明 JavaScript 提供了三种方式来声明变量： var（全局或函数作用域，不推荐）let（块级作用域，推荐）const（常量，块级作用域，推荐&…

1. 变量与数据类型

变量声明

JavaScript 提供了三种方式来声明变量：

var（全局或函数作用域，不推荐）
let（块级作用域，推荐）
const（常量，块级作用域，推荐）

var a = 10;  // 可重新赋值，函数作用域
let b = 20;  // 可重新赋值，块级作用域
const c = 30; // 不能重新赋值，块级作用域

数据类型

基本数据类型（值类型）：
- Number（数字）
- String（字符串）
- Boolean（布尔值）
- Undefined（未定义）
- Null（空值）
- Symbol（独特值）
- BigInt（大整数）

let num = 42; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let notDefined; // Undefined
let emptyValue = null; // Null
let uniqueKey = Symbol("key"); // Symbol
let bigIntNum = 9007199254740991n; // BigInt

引用数据类型：
- Object（对象）
- Array（数组）
- Function（函数）

let obj = { name: "Alice", age: 25 };
let arr = [1, 2, 3, 4, 5];
let func = function() { return "Hello"; };

2. 运算符

JavaScript 提供了多种运算符：

算术运算符（+, -, *, /, %, ++, --）
赋值运算符（=, +=, -=, *=, /=）
比较运算符（==, ===, !=, !==, >, <, >=, <=）
逻辑运算符（&&, ||, !）
三元运算符（条件 ? 值1 : 值2）

let x = 10;
let y = 5;console.log(x + y);  // 15
console.log(x > y);  // true
console.log(x === "10"); // false（严格相等）
console.log(x == "10"); // true（类型转换后相等）
console.log(x > 0 && y > 0); // true

3. 条件语句

let age = 18;if (age >= 18) {console.log("Adult");
} else if (age >= 13) {console.log("Teenager");
} else {console.log("Child");
}

switch 语句：

let fruit = "apple";switch (fruit) {case "apple":console.log("Apple selected");break;case "banana":console.log("Banana selected");break;default:console.log("Unknown fruit");
}

4. 循环

// for 循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while 循环
let i = 0;
while (i < 5) {console.log(i);i++;
}// do-while 循环
let j = 0;
do {console.log(j);j++;
} while (j < 5);

5. 函数

// 普通函数
function add(a, b) {return a + b;
}// 箭头函数
const multiply = (a, b) => a * b;console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

6. 数组操作

let arr = [1, 2, 3, 4, 5];// 添加元素
arr.push(6);  // [1, 2, 3, 4, 5, 6]// 删除最后一个元素
arr.pop();  // [1, 2, 3, 4, 5]// 遍历数组
arr.forEach((num) => console.log(num));// 映射数组（每个元素乘以 2）
let newArr = arr.map(num => num * 2);
console.log(newArr); // [2, 4, 6, 8, 10]

7. 对象

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};console.log(person.name); // Alice
person.greet(); // Hello, Alice

8. 作用域与闭包

function outer() {let count = 0;return function inner() {count++;console.log(count);};
}const counter = outer();
counter(); // 1
counter(); // 2

闭包允许内部函数访问外部函数的变量，即使外部函数已经执行完毕。

9. 异步编程

Promise

function fetchData() {return new Promise((resolve) => {setTimeout(() => resolve("Data loaded"), 2000);});
}fetchData().then((data) => console.log(data)); // 2秒后输出 "Data loaded"

async/await

async function getData() {let result = await fetchData();console.log(result);
}
getData();

10. ES6+ 语法

解构赋值

let [a, b] = [1, 2];
console.log(a, b); // 1 2let { name, age } = { name: "Alice", age: 25 };
console.log(name, age); // Alice 25

展开运算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // {a: 1, b: 2, c: 3}

11. DOM 操作

document.getElementById("btn").addEventListener("click", function () {alert("Button clicked!");
});

12. 模块化

在现代 JavaScript 中，import 和 export 用于模块化：

// 导出
export function greet() {return "Hello!";
}// 导入
import { greet } from "./module.js";
console.log(greet()); // Hello!

总结

概念	关键点
变量	`var`、`let`、`const`
数据类型	数值、字符串、对象、数组
运算符	`+`, `-`, `*`, `/`, `===`, `&&`
条件语句	`if-else`, `switch`
循环	`for`, `while`, `do-while`
函数	普通函数、箭头函数
数组	`push()`, `pop()`, `map()`, `forEach()`
对象	`this` 关键字、方法调用
作用域	块级作用域、闭包
异步	`Promise`、`async/await`
ES6+	解构、展开运算符
DOM 操作	`document.getElementById`