ecmascript有哪些常见误区

下面按常见程度 + 易踩坑点总结 ECMAScript（主要是 ES5/ES6+ 日常开发中）的典型误区，很多即使写了几年 JS 的人也会中招。

一、变量与作用域误区

1. var 有函数作用域，不是块级作用域

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 输出：3 3 3

✅ 正确做法：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

2. let / const 有“暂时性死区（TDZ）”

console.log(a); // ReferenceError
let a = 1;

二、类型与比较误区

3. == 会做隐式类型转换

0 == ''        // true
null == undefined // true
[] == false    // true

✅ 建议：永远用 ===

4. typeof null === 'object'

typeof null // "object"（历史 bug）

5. NaN !== NaN

NaN === NaN // false

✅ 判断 NaN：

Number.isNaN(x)

三、函数与 this 误区

6. this 不是“函数属于谁”

const obj = {
  name: 'a',
  fn() { return this.name }
}
const f = obj.fn
f() // undefined

7. 箭头函数没有自己的 this

const obj = {
  name: 'a',
  fn: () => this.name
}

❌ 不适合做方法

四、数组与对象误区

8. for...in 遍历数组是错的

for (const k in [1,2,3]) {} // 会遍历原型链

✅ 用：

• for...of
• forEach
• map

9. 数组方法不改变原数组的误解

[1,2,3].map(x => x*2) // 新数组
[1,2,3].sort()        // 原地修改

10. 对象 key 一定是字符串

const o = {}
o[{}] = 1
// key 变成 "[object Object]"

五、异步误区

11. setTimeout(fn, 0) 不是立即执行

setTimeout(() => console.log(1), 0)
console.log(2)
// 2 1

12. Promise 一旦 resolve 不可取消

const p = new Promise(...)
// 无法 abort

13. async/await 不是“多线程”

await 只是语法糖
底层仍是事件循环

六、ES6+ 常见误解

14. const 不是“不可变”

const o = { a: 1 }
o.a = 2 // ✅ 可以

15. 解构赋值的默认值陷阱

const { x = 1 } = {}
// x = 1

const { x = 1 } = { x: undefined }
// x = 1

const { x = 1 } = { x: null }
// x = null

七、其他高频误区

16. JSON 不等于 JS 对象

• 不允许函数
• key 必须双引号
• 不支持 undefined

17. class 只是语法糖

class A {}
// 本质是构造函数 + 原型

18. import 是静态的

if (x) import('./a') // ❌
// 必须：
import('./a').then(...)

总结一句话

ECMAScript 的坑，大多来自“看起来像别的语言，实际不是”。

如果你是：

• 面试准备
• 新手避坑
• 团队规范制定

我可以给你一份 「ES 常见误区 Checklist」 或 按 ES 版本（ES5 / ES6 / ES2020+）分类版。