初识javascript
1. JavaScript 基础语法
(1) 变量声明
JavaScript支持三种声明变量的方式：
-
var：传统的变量声明方式，存在作用域问题（函数作用域）。 -
let：块级作用域变量声明方式，避免了var的作用域问题。 -
const：常量声明，声明后不能修改其值，具备块级作用域。
var name = "John"; // 使用 var 声明
let age = 25; // 使用 let 声明
const isStudent = true; // 使用 const 声明
(2) 数据类型
JavaScript有6种基本数据类型：
-
Primitive Types：
string、number、boolean、undefined、null、symbol（ES6新增） -
Reference Types：
Object、Array、Function、Date等
let name = "John"; // string
let age = 25; // number
let isStudent = true; // boolean
let person = { name: "John", age: 25 }; // object
let numbers = [1, 2, 3]; // array
(3) 类型转换
JavaScript会进行隐式或显式的类型转换。
-
隐式转换：例如
"" + 1会返回"1"，即数字1被转换成字符串。 -
显式转换：使用
String()、Number()、Boolean()等函数进行类型转换。
let num = 5;
let str = String(num); // 转换为字符串 "5"
let bool = Boolean(num); // 转换为布尔值 true
2. 控制流
(1) 条件语句
JavaScript支持常见的条件语句：
-
if、else、else if -
switch：用于多个条件判断时更简洁。
let age = 18;
if (age >= 18) {console.log("Adult");
} else {console.log("Minor");
}let color = "red";
switch(color) {case "red":console.log("Red color");break;case "blue":console.log("Blue color");break;default:console.log("Unknown color");
}
(2) 循环语句
JavaScript提供几种循环方式来处理重复执行的任务：
-
for：用于知道循环次数时。 -
while：在循环条件满足时继续执行。 -
do...while：至少执行一次循环体。
// for 循环
for (let i = 0; i < 5; i++) {console.log(i); // 输出 0 到 4
}// while 循环
let i = 0;
while (i < 5) {console.log(i);i++;
}// do...while 循环
let j = 0;
do {console.log(j);j++;
} while (j < 5);
3. 函数
(1) 函数声明
JavaScript中的函数声明语法如下：
function greet(name) {return "Hello, " + name;
}
console.log(greet("John")); // 输出 "Hello, John"
(2) 匿名函数
可以创建没有名称的函数，通常与变量一起使用，或者作为回调传递：
let add = function(a, b) {return a + b;
};
console.log(add(5, 10)); // 输出 15
(3) 箭头函数 (Arrow Functions)
ES6新增的语法，使得函数写法更加简洁，同时保留了外部this的上下文。
const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 输出 12
(4) 高阶函数
函数可以作为参数传递给另一个函数，或者作为返回值返回。JavaScript中的许多内建函数如map()、filter()、reduce()等都属于高阶函数。
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2); // 高阶函数的例子
console.log(doubled); // 输出 [2, 4, 6, 8]
4. 对象和数组
(1) 对象 (Object)
对象是JavaScript中最常用的数据结构之一，用于存储键值对。
let person = {name: "John",age: 30,greet: function() {return "Hello " + this.name;}
};
console.log(person.name); // 输出 "John"
console.log(person.greet()); // 输出 "Hello John"
(2) 数组 (Array)
数组是一个有序的元素集合，可以是任意类型的数据。
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出 "apple"
fruits.push("orange"); // 向数组添加元素
console.log(fruits); // 输出 ["apple", "banana", "cherry", "orange"]
5. 事件处理
JavaScript允许开发者监听和处理用户的交互事件（如点击、键盘输入、鼠标移动等）。
<button id="clickBtn">Click Me</button>
<script>
document.getElementById("clickBtn").addEventListener("click", function() {alert("Button clicked!");
});
</script>
-
addEventListener()用于绑定事件处理器。 -
removeEventListener()用于移除事件处理器。
6. 异步编程
JavaScript是单线程的，这意味着它一次只能做一件事。不过，可以通过异步编程实现并发行为。
(1) 回调函数
回调函数是异步操作完成时调用的函数。
function fetchData(callback) {setTimeout(() => {console.log("Data fetched");callback();}, 1000);
}fetchData(() => {console.log("Callback executed");
});
(2) Promise
Promise 是JavaScript中用于处理异步操作的标准化方式。
let promise = new Promise((resolve, reject) => {let success = true;if (success) {resolve("Success!");} else {reject("Failed!");}
});promise.then(result => {console.log(result); // 输出 "Success!"
}).catch(error => {console.log(error); // 输出 "Failed!"
});
(3) async/await
async/await 是基于 Promise 的语法糖，它让异步代码看起来像同步代码。
async function fetchData() {let result = await new Promise((resolve, reject) => {setTimeout(() => resolve("Data fetched"), 1000);});console.log(result); // 输出 "Data fetched"
}fetchData();
7. DOM操作
JavaScript可以通过DOM（文档对象模型）操作HTML文档内容、结构和样式。
(1) 选择元素
let element = document.getElementById("myElement"); // 通过ID选择
let elements = document.getElementsByClassName("myClass"); // 通过类名选择
let allDivs = document.querySelectorAll("div"); // 通过CSS选择器选择
(2) 修改元素
element.innerHTML = "New Content"; // 修改内容
element.style.color = "blue"; // 修改样式
(3) 创建元素
let newDiv = document.createElement("div");
newDiv.textContent = "This is a new div!";
document.body.appendChild(newDiv); // 将新元素添加到页面
8. ES6新特性
(1) 解构赋值
let person = { name: "John", age: 30 };
let { name, age } = person; // 解构赋值
console.log(name); // 输出 "John"
console.log(age); // 输出 30
(2) 模块化
ES6支持模块化，可以使用export和import来导出和导入模块。
// math.js
export function add(x, y) {return x + y;
}// main.js
import { add } from './math.js';