（第三节学习当天有点忙就没发文章了）

JavaScript

各司其责：让HTML、CSS和JavaScript职能分离
应当避免不必要的由JavaScript直接操作样式可以用class来表示状态
纯展示类交互寻求零JavaScript方案
组件封装：好的UI组件具备正确性、扩展性、复用性
过程抽象：应用函数式编程思想

基本语法

JavaScript的基本语法，包括变量声明、数据类型、运算符、条件语句（if、else）、循环语句（for、while）、函数等。

let name = 'John';
let age = 25;
let isStudent = true;
console.log(name); // 输出：John
console.log(age); // 输出：25
console.log(isStudent);// 输出：true

数据类型与类型转换

掌握JavaScript的基本数据类型，如字符串、数字、布尔值、数组、对象等，并了解类型转换的规则。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

函数与作用域

理解函数的概念，学习如何声明函数、传递参数、返回值，并了解作用域和闭包的概念。

// 函数与作用域
function greet(name) {
let message = 'Hello, ' + name;
return message;
}

let greeting = greet('Alice');
console.log(greeting); // 输出：Hello, Alice

对象与面向对象编程

熟悉JavaScript的对象及属性操作，学习如何创建和使用对象，并了解面向对象编程的基本概念。

// 对象与面向对象编程
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayHello() {
console.log('Hello, my name is ' + this.name);
}
}

let person1 = new Person('Alice', 30);
person1.sayHello(); // 输出：Hello, my name is Alice

数组与数组方法

掌握数组的基本操作，如添加、删除、遍历等，并学习数组的常用方法，如map、filter、reduce等。

// 数组与数组方法
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出：15

let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]

DOM操作和事件处理

了解DOM（文档对象模型）的概念，学习如何通过JavaScript操作HTML文档中的元素，实现动态页面效果。
学习如何处理用户交互事件，如点击、输入等，并通过事件处理函数实现交互效果。
HTML部分


<button id="btn">点击我</button>
<div id="output"></div>

JavaScript部分

// DOM操作与事件处理
let btnElement = document.getElementById('btn');
let outputElement = document.getElementById('output');

btnElement.addEventListener('click', () => {
outputElement.textContent = '按钮被点击了！';
});

异步编程

理解JavaScript的异步编程概念，包括回调函数、Promise、async/await等，以处理网络请求、定时器等异步操作。

// 异步编程与Promise
function fetchUserData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let userData = { name: 'John', age: 25 };
resolve(userData);
}, 2000);
});
}

fetchUserData().then(userData => {
console.log(userData); // 输出：{ name: 'John', age: 25 }
});

错误处理与调试

学会如何处理JavaScript中的错误，并掌握调试技巧，如使用浏览器的开发者工具进行调试。

ES6+特性

熟悉ES6及其后续版本的新特性，如箭头函数、解构赋值、模板字符串、类等，以提高代码的可读性和简洁性。

// ES6+特性
const greeting = (name) => {
returnHello, ${name};
};

console.log(greeting('Alice')); // 输出：Hello, Alice

代码组织与模块化

学习如何组织大型JavaScript项目，使用模块化的方式管理代码，提高可维护性和复用性。

// 模块1（module1.js）
export const multiply = (a, b) => {
return a * b;
};

// 模块2（module2.js）
import { multiply } from './module1.js';

const result = multiply(3, 5);
console.log(result); // 输出：15

Web API

了解浏览器提供的Web API，如Fetch API、localStorage等，以实现更丰富的Web应用功能。语言工具与框架：熟悉常用的JavaScript工具和框架，如npm、Webpack、React、Vue等，以便更高效地开发应用。

第四节的学习笔记｜ 青训营