xxx科技-前端开发工程师

// this 绑定
const obj = {
  name: 'obj',
  arrowFunc: () => {
    console.log(this.name); // undefined（this 是全局对象或 undefined）
  },
  normalFunc() {
    console.log(this.name); // 'obj'
  }
};
 
obj.arrowFunc();  
obj.normalFunc(); 
 
// arguments
const arrowFn = (...args) => {
  // console.log(arguments); // ❌ ReferenceError
  console.log(args);         // ✅ [1, 2, 3]
};
 
function normalFn() {
  console.log(arguments);     // [1, 2, 3]
}
 
// 不能作为构造函数
// new (() => {});           // ❌ TypeError
// new function() {};         // ✅ 可以
 
// 为什么不能？
// 1. 没有 prototype 属性
// 2. this 已绑定
// 3. ES6 设计目的：箭头函数用于短函数、不需要构造对象

// class 写法
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}`;
  }
}
 
// 等价于：
function Animal(name) {
  this.name = name;
}
Animal.prototype.greet = function() {
  return `Hello, ${this.name}`;
};
 
// 验证：class 仍使用原型
console.log(typeof Animal);           // function
console.log(Animal.prototype);        // { greet: ... }

class Parent {
  constructor() {
    this.x = 1;
  }
}
 
class Child extends Parent {
  constructor() {
    super();
    this.y = 2;
  }
}
 
const child = new Child();
console.log(Object.getPrototypeOf(Child) === Parent); // true
console.log(child instanceof Child);                    // true
console.log(child instanceof Parent);                   // true

const nums = [1, 2, 3, 4, 5];
 
nums.forEach(n => console.log(n));           // 1 2 3 4 5
nums.map(n => n * 2);                        // [2, 4, 6, 8, 10]
nums.filter(n => n > 2);                     // [3, 4, 5]
nums.reduce((acc, n) => acc + n);            // 15
nums.find(n => n > 3);                       // 4
nums.findIndex(n => n > 3);                  // 3
nums.some(n => n > 4);                       // true
nums.every(n => n > 0);                      // true

const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, currentValue, index, array) => {
  return accumulator + currentValue;
}, 0); // 初始值为 0
 
console.log(sum); // 15
 
// accumulator: 累加器（初始值为 0）
// currentValue: 当前元素
// index: 当前索引
// array: 原数组

// 求和
[1, 2, 3].reduce((a, b) => a + b, 0); // 6
 
// 求平均
const avg = [1, 2, 3].reduce((a, b) => a + b) / 3; // 2
 
// 计数
['a', 'b', 'a'].reduce((acc, item) => {
  acc[item] = (acc[item] || 0) + 1;
  return acc;
}, {}); // { a: 2, b: 1 }
 
// 展平数组
[[1, 2], [3, 4]].reduce((acc, arr) => acc.concat(arr), []); // [1, 2, 3, 4]
 
// 反转数组
[1, 2, 3].reduce((acc, item) => [item, ...acc], []); // [3, 2, 1]

const nums = [1, 2, 3];
 
// forEach：执行副作用，无返回值
const result1 = nums.forEach(n => {
  console.log(n * 2);
});
console.log(result1); // undefined
 
// map：将数组转换为新数组
const result2 = nums.map(n => n * 2);
console.log(result2); // [2, 4, 6]
 
// 链式调用
nums
  .map(n => n * 2)
  .filter(n => n > 3)
  .forEach(n => console.log(n)); // 4 6

// 全局作用域
let global = 'global';
 
{
  // 块级作用域
  let block = 'block';  // 仅在此块内可访问
  console.log(global);  // 'global'
  console.log(block);   // 'block'
}
 
// console.log(block);  // ❌ ReferenceError
 
// if、for、try-catch 等都会创建块级作用域
if (true) {
  let x = 1;
}
// console.log(x);     // ❌ ReferenceError
 
function test() {
  let fn = 'function scope';
}
// console.log(fn);    // ❌ ReferenceError

// var：函数作用域或全局作用域
if (true) {
  var x = 1;
}
console.log(x); // 1（泄漏到全局）
 
// let/const：块级作用域
if (true) {
  let y = 1;
}
// console.log(y); // ❌ ReferenceError

let x = 1;  // 不在 window 或 global 上
var y = 1;  // 在 window 或 global 上

const obj = { name: 'John', age: 30 };
 
// ❌ 不能重新赋值
// obj = {};  // TypeError
 
// ✅ 可以修改属性值
obj.name = 'Jane';
obj.age = 25;
console.log(obj); // { name: 'Jane', age: 25 }
 
// ✅ 可以添加新属性
obj.email = 'jane@example.com';
 
// ⚠️ Object.freeze() 可以完全冻结
const frozenObj = { name: 'John' };
Object.freeze(frozenObj);
// frozenObj.name = 'Jane'; // ❌ 无法修改

// resolve/reject
Promise.resolve(10).then(v => console.log(v)); // 10
Promise.reject(new Error('error')).catch(e => console.log(e));
 
// all：全部成功才返回
Promise.all([
  Promise.resolve(1),
  Promise.resolve(2)
]).then(values => console.log(values)); // [1, 2]
 
// race：首个完成
Promise.race([
  new Promise(r => setTimeout(() => r(1), 100)),
  new Promise(r => setTimeout(() => r(2), 50))
]).then(v => console.log(v)); // 2
 
// allSettled：不关心成功失败
Promise.allSettled([
  Promise.resolve(1),
  Promise.reject('error')
]).then(results => console.log(results));
// [{ status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'error' }]
 
// any：首个成功
Promise.any([
  Promise.reject('e1'),
  Promise.resolve(2)
]).then(v => console.log(v)); // 2

console.log('1');
 
const p = new Promise((resolve) => {
  console.log('2 - 同步执行（在 Promise 构造函数中）');
  resolve('result');
});
 
console.log('3');
 
p.then((result) => {
  console.log('4 - 异步执行（微任务）');
});
 
console.log('5');
 
// 输出顺序：
// 1
// 2 - 同步执行（在 Promise 构造函数中）
// 3
// 5
// 4 - 异步执行（微任务）

// 输入（ES6 代码）
const arr = [1, 2, 3];
const [a, b, c] = arr;
 
// Babel 转换后（ES5 代码）
var arr = [1, 2, 3];
var a = arr[0],
    b = arr[1],
    c = arr[2];

{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

// 微前端框架：qiankun
import { registerMicroApps, start } from 'qiankun';
 
registerMicroApps([
  {
    name: '@app/home',
    entry: 'http://localhost:3001',
    container: '#home',
    activeRule: '/'
  },
  {
    name: '@app/about', 
    entry: 'http://localhost:3002',
    container: '#about',
    activeRule: '/about'
  }
]);
 
start();

// Express 服务器
const express = require('express');
const app = express();
 
app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'John' }]);
});
 
app.listen(3000, () => {
  console.log('Server running on port 3000');
});