JavaScript 基础特性

一、变量特性

1.1 变量提升

console.log(temp); // undefined（变量提升但未初始化）
var temp = 'hello';

• 现象：var声明的变量会提升至作用域顶部，但赋值不提升

• 建议：改用 let/const 避免变量提升问题

1.2 变量泄露

for (var i = 0; i < 5; i++) { /*...*/ }
console.log(i); // 5（var无块级作用域）

• 问题：var在循环中泄露变量到外部作用域

• 解决方案：使用 let 声明循环变量

---

二、数据结构 - Map（ 核心特性）

const map = new Map();
map.set(Symbol(), '唯一键值'); // 支持任意类型键
map.forEach((v,k) => console.log(k, v)); // 迭代方法

• 优势：相比Object，支持对象/Symbol作为键、维护插入顺序、专用迭代方法

• 常用API：keys()/values()/entries()/size

---

三、对象特性

3.1 动态属性名

let dynamicKey = 'role';
let obj = {
  [dynamicKey]: 'Admin', // ES6计算属性名
  [Symbol('id')]: 123    // Symbol作为唯一键
};

3.2 Symbol特性

const sym1 = Symbol('desc');
const sym2 = Symbol('desc');
console.log(sym1 === sym2); // false（唯一性）

---

四、函数进阶

4.1 参数处理

// 默认参数（注意参数顺序）
function sum(x=0, y=x) { /*...*/ }

// Rest参数（必须最后参数）
function log(...args) { 
  args.forEach(arg => console.log(arg));
}

4.2 高阶函数

// 函数作为返回值（工厂模式）
function createMultiplier(n) {
  return (x) => x * n;
}
const triple = createMultiplier(3);

4.3 闭包实践

function counter() {
  let count = 0;
  return {
    inc: () => ++count,
    get: () => count
  };
}
const c = counter();
c.inc(); // 1（保持状态私有）

---

五、类与继承

  类基础：

class Animal {
  constructor(name) {
    this.name = name;
  }

  // 实例方法
  speak() {
    console.log(`${this.name} makes noise`);
  }

  // 静态方法
  static info() {
    return 'Animal Class';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    super.speak();
    console.log('Woof!');
  }
}

---

六、事件系统（Node.js）

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}

const emitter = new MyEmitter();
emitter.on('event', (a, b) => {
  console.log(a + b); // 30
});
emitter.emit('event', 10, 20);

---

七、模板字符串高级用法

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    `${acc}${str}<mark>${values[i] || ''}</mark>`, '');
}

const price = 99;
const html = highlight`Price: ${price} USD`;
// 输出：Price: <mark>99</mark> USD

---

八、常见陷阱与最佳实践

    变量声明：

• 始终使用 let/const

• 避免 var 的变量提升问题

1. 相等判断：

   
   0 == '0'   // true（隐式转换）
   0 === '0'  // false（严格判断）

2. 箭头函数特性：

   
   const obj = {
     value: 42,
     getValue: () => this.value // 箭头函数无自己的this
   };

3. 深拷贝方案：

   
   const deepCopy = JSON.parse(JSON.stringify(obj)); // 简易深拷贝

---

九、新特性展望（ES6+）

1. 可选链操作符：

   
   const street = user?.address?.street;

2. 空值合并：

   
   const input = null;
   const value = input ?? 'default';

3. Promise & async/await：

   
   async function fetchData() {
     try {
       const res = await fetch(url);
       return res.json();
     } catch (err) {
       console.error(err);
     }
   }