一、变量声明：let /const
在 ES6 之前，JS 只有var声明变量，存在变量提升、没有块级作用域、可以重复声明等问题。ES6 新增let与const。
1. 核心特性
-
块级 作用域 ：
{}包裹的代码块内生效，if、for 循环大括号内部无法在外部访问。 -
暂时性死区：在当前作用域，变量声明之前不能访问，不存在变量提升。
-
不允许重复声明：同一个作用域内，不能重复定义同名变量。
-
let：声明可变变量，后续可以重新赋值； -
const：声明常量，一旦赋值，不能修改内存地址。
重点：const 声明对象 / 数组，不能直接覆盖变量，但对象内部属性、数组元素可以修改。
// let 示例 let count = 10; count = 20; // ✅ 可以重新赋值 // const 示例 const PI = 3.14; // PI = 3.15; // ❌ 报错，常量不能重新赋值 const arr = [1,2,3]; arr.push(4); console.log(arr); // [1,2,3,4] ✅ 数组内容可以修改 const obj = {name:'小明'}; obj.name = '小红'; console.log(obj.name); //小红 ✅ 对象属性可以修改
✅ 工程规范：优先使用const；只有确定变量需要修改时，才使用let；禁止使用 var。
二、解构赋值
快速从数组、对象中提取数据，赋值给变量，减少重复代码，分为对象解构 和数组解构。
1. 对象解构（开发最常用）
从对象按属性名取值，属性名必须匹配。可以设置默认值。
const user = { name: "张三", age: 20, gender: "男" }; // 对象解构 const { name, age } = user; console.log(name, age); // 张三 20 // 设置默认值，属性不存在时生效 const { address = "未知地址" } = user; console.log(address); //未知地址
2. 数组解构
按顺序提取数组元素，变量顺序对应数组下标。
const list = [100, 200, 300]; const [a, b, c] = list; console.log(a,b,c); //100 200 300 // 剩余项收集 const [first, ...rest] = list; console.log(rest); // [200,300]
✅ 使用场景：接口返回数据提取、函数参数接收。
三、展开运算符 ...
展开运算符...，可以把数组、对象进行拆分成独立项；分为对象展开、数组展开。
1. 数组展开
const arr1 = [1,2,3]; const arr2 = [...arr1, 4,5]; console.log(arr2); // [1,2,3,4,5] // 数组浅拷贝 const arrCopy = [...arr1];
2. 对象展开（合并对象）
const info = {name:"李四",age:18}; const userInfo = {...info, gender:"男"}; console.log(userInfo); // {name:"李四",age:18,gender:"男"}
注意：展开运算符是浅拷贝，只复制第一层属性；嵌套对象不会深度复制。
四、箭头函数
简化函数写法，ES6 高频语法。 语法：(参数) => {函数体}
-
参数只有一个，括号可以省略；
-
函数体只有一行 return 语句，大括号与 return 关键字可以省略。
// 普通函数 const fn = function(a,b){ return a + b; } // 箭头函数简写 const fn = (a,b) => a + b; // 单个参数 const double = num => num *2;
⚠️ 箭头函数重要特性 & 坑点
-
没有自己的 this，继承外层作用域 this；
-
不能用作构造函数，不能 new；
-
没有 arguments 对象；
-
不适合用作对象方法。
const obj = { name:"测试", say: ()=>{ console.log(this.name); // this不是obj，不要这么写 } }
✅ 使用场景：数组高阶方法回调 (map/filter/reduce)
五、模板字符串 \\ 反引号
ES6 新增字符串写法，使用反引号包裹，支持换行 、变量插值 ${变量}，告别字符串拼接。
const name = "小明"; // 旧写法 const str = "你好，"+name; // 模板字符串 const str2 = `你好，${name}`; // 支持直接换行 const html = ` <div> <p>${name}</p> </div> `;
六、其余常用小特性
1. 剩余参数 ...rest
收集函数剩余参数，返回数组，替代 arguments
function sum(a,...rest){ console.log(rest); } sum(1,2,3,4); // [2,3,4]
2. 字符串新增方法
-
startsWith()判断字符串是否以指定内容开头 -
endsWith()判断字符串是否以指定内容结尾
const msg = "hello world"; console.log(msg.startsWith("hello")); // true
七、工程选型规范
-
变量声明：优先 const，其次 let，废弃 var；
-
对象取值优先解构，减少重复
obj.xxx书写； -
合并数组 / 对象优先使用展开运算符
...； -
回调函数（数组方法）优先箭头函数，普通对象方法不要使用箭头函数；
-
拼接 HTML、拼接字符串一律使用模板字符串。
八、高频避坑总结
-
const 不是绝对不可修改，只是不能覆盖引用地址，对象数组内部数据可改；
-
解构默认值，只有属性严格等于 undefined 才生效；null 不会触发默认值；
-
展开运算符仅浅拷贝，多层嵌套对象不能直接用... 做深拷贝；
-
箭头函数 this 固定继承外层，不要在需要动态 this 场景使用（DOM 事件、对象方法）；
-
箭头函数没有 arguments，需要收集参数使用剩余参数
...rest。