Starting again-02

1.ts与js区别

        1.1类型检查

                ts:静态类型编程语言，代码在编译时期就进行类型检查。开发在编写代码的时候就必须确认变量与函数返回类型。静态类型检查可以在代码运行前检查避免错误。

// TypeScript 中的类型注解
let count: number = 10;
let name: string = "TypeScript";
let isActive: boolean = true;

                js:动态类型脚本语言，变量类型在代码运行时自动确认。不需要在代码中显示申明。

        1.2编译

                ts:不能直接运行,需要编译成js在浏览器或者node环境中运行。

                js:能直接运行作为解释性语言，不需要编译可直接运行。

        1.3语言特性

                ts:包含js的所有特性，同时添加了（类型注解与接口等）。

                js:不支持类型注解与接口，使用原型继承而非传统类继承。

2.vue通信分类

       父子组件：数据传递首选用props与$emit进行传递，也可以用ref。

       兄弟组件：首选使用Eventbus,其次选用$parent进行传递。

       祖先与后代组件：可选用attrs与listeners或Provide与Inject。

        复杂组件间：通过vuex存放共享的变量来实现数据传递。

3.闭包

        定义： 闭包就是指引用了另外一个函数作用域中变量的函数，通常在嵌套函数中实现。

        作用：可以保留其被定义的作用域，意味闭包内部可以访问外部函数的局部变量，即使外部函数已经执行完毕。这种特性使得闭包可以在后续调用中使用这些变量。

        注意：闭包会让函数变量在函数执行后仍然存在内存中，直到没有任何引用指向闭包。管理不当可能会导致内存泄漏问题。

4.promise状态

        定义：promise是js中处理异步操作的一种模型和对象，处理异步代码以及回调地狱问题。

        状态：三种状态

        pending(进行中)，promise初始状态，异步操作尚未完成。

        fulfilled(已完成)，异步操作完成，结果值可用，触发.then方法中的回调函数。

        rejected(已失败)，异步操作失败，包含失败原因，触发.catch方法或.then第二个回调函数。

        注意：成功调用resolve,失败调用reject.

// 初始状态为 pending
const promise = new Promise((resolve, reject) => {// 异步操作setTimeout(() => {if (Math.random() > 0.5) {resolve("成功"); // 状态变为 fulfilled} else {reject("失败"); // 状态变为 rejected}}, 1000);
});

5.es6引进的内容

        1.引入let与const关键字，用于声明块级作用域的变量。

        2.引入箭头函数。

// 传统函数
function add(a, b) {return a + b;
}// 箭头函数等价写法
const add = (a, b) => a + b;

        3.添加模板字符串。

// 1. 多行字符串（无需使用 \n 换行）
const multiLine = `这是第一行
这是第二行
这是第三行`;// 2. 变量插值（使用 ${} 嵌入变量或表达式）
const name = "张三";
const age = 25;// 使用模板字符串拼接
const info = `姓名：${name}，年龄：${age}岁`;
console.log(info); // 输出：姓名：张三，年龄：25岁// 3. 嵌入表达式
const a = 10;
const b = 20;
const result = `${a} + ${b} = ${a + b}`;
console.log(result); // 输出：10 + 20 = 30// 4. 在函数中使用
function greet(user) {return `Hello, ${user.name}! 你有 ${user.messages.length} 条新消息`;
}const user = {name: "李四",messages: ["消息1", "消息2"]
};
console.log(greet(user)); // 输出：Hello, 李四! 你有 2 条新消息

        4.引入解构赋值(从函数或数组中提取值赋给变量)。

        数组解构

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3// 跳过元素
const [x, , y] = [10, 20, 30];
console.log(x); // 10
console.log(y); // 30// 剩余元素
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]// 默认值
const [p = 0, q = 0] = [5];
console.log(p); // 5
console.log(q); // 0（使用默认值）

        函数解构

// 基本用法
const user = { name: "张三", age: 25, gender: "男" };
const { name, age } = user;
console.log(name); // "张三"
console.log(age);  // 25// 重命名变量
const { name: userName, age: userAge } = user;
console.log(userName); // "张三"
console.log(userAge);  // 25// 默认值
const { city = "北京", age: uAge = 18 } = user;
console.log(city); // "北京"（使用默认值）
console.log(uAge); // 25（使用对象中的值）// 嵌套对象解构
const person = {info: { height: 180, weight: 70 },hobbies: ["篮球", "音乐"]
};
const { info: { height } } = person;
console.log(height); // 180

        5.引入类和模块

        类：类是面向对象编程（OOP）的核心概念，用于创建具有相同属性和方法的对象模板。ES6 引入 class 语法，让 JavaScript 的面向对象编程更规范。

        模块：模块是将代码拆分为独立文件的方式，每个文件就是一个模块，通过 export 暴露内容，import 引入其他模块的内容，解决了全局变量污染和代码组织问题。

类别	作用	核心语法	典型场景
类	定义对象的结构和行为	class、extends	创建实例、实现继承、OOP 设计
模块	拆分代码、管理依赖	export、import	代码复用、避免全局污染

6.箭头函数与普通函数的区别

        核心区别（this指向问题）

        6.1普通函数(可以作为构造函数)

        this指向动态变化，取决于调用方式。        

        作为对象方法调用时，this指向该对象。

        单独调用时（非严格模式），this指向全局对象（浏览器中windows）（node.js中指向的是global）

        用new调用时，this指向新调用的实例。

        可以使用call/apply/bind改变this指向。

const obj = {name: "测试",normalFunc: function() {console.log(this.name); // "测试"（this指向obj）}
};
obj.normalFunc();

        6.2箭头函数（不可作为构造函数）

        this继承自外层作用域，且无法改变，与调用方式无关。箭头函数不绑定自己的this，会捕获上下文的this值作为自己的this值。

const obj = {name: "测试",arrowFunc: () => {console.log(this.name); // undefined（this继承自外层，非obj）}
};
obj.arrowFunc();