Starting again-02 - 技术栈

1.ts与js区别

1.1类型检查

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

TypeScript 复制代码

// 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.

javascript 复制代码

// 初始状态为 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.引入箭头函数。

javascript 复制代码

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数等价写法
const add = (a, b) => a + b;

3.添加模板字符串。

javascript 复制代码

// 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.引入解构赋值(从函数或数组中提取值赋给变量)。

数组解构

javascript 复制代码

// 基本用法
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（使用默认值）

函数解构

javascript 复制代码

// 基本用法
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指向。

javascript 复制代码

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

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

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

javascript 复制代码

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