ES6 新增特性

变量与常量

let 声明变量

• 块级作用域：仅在 {} 代码块内有效
• 不可重复声明：同一作用域内不能重复声明同一变量
• 无声明前置：不存在变量提升，声明前使用会报错（暂时性死区）
• 示例：

  javascript

  运行

  if (true) {let a = 10;console.log(a); // 10
  }
  console.log(a); // 报错，a未定义
  

const 声明常量

• 必须初始化：声明时必须赋值
• 不可重新赋值：常量的值不能被修改
• 块级作用域：同 let 一样具有块级作用域
• 引用类型特殊性：如果常量保存的是对象 / 数组的引用，引用本身不可改，但内容可以改

  javascript

  运行

  const PI = 3.14;
  // PI = 3.1415; // 报错const arr = [1, 2, 3];
  arr.push(4); // 允许，数组内容可改
  // arr = [1, 2, 3, 4]; // 报错，引用不可改
  

let、const、var 的区别

特性	let	const	var
作用域	块级	块级	函数级
变量提升	无	无	有
重复声明	不允许	不允许	允许
重新赋值	允许	不允许	允许

块级作用域

• 由 {} 界定的范围，如 if(){}, for(){}, {}, 函数体等
• 解决了 ES5 中变量作用域混乱的问题
• 典型应用：循环中的事件绑定

  javascript

  运行

  // 使用var的问题
  for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i), 100); // 输出 3, 3, 3
  }// 使用let解决
  for (let i = 0; i < 3; i++) {setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
  }
  

解构赋值

按照模式匹配从数组或对象中提取值并赋值给变量

数组解构

javascript

运行

let [a, b, c] = [1, 2, 3];
let [x, , y] = [10, 20, 30]; // x=10, y=30
let [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]

对象解构

javascript

运行

let { name, age } = { name: "张三", age: 20 };
let { name: userName, age: userAge } = { name: "张三", age: 20 }; // 变量名与属性名不同

解构赋值的用途

1. 交换变量值：[a, b] = [b, a]
2. 提取函数返回的多个值
3. 快速获取对象属性和方法：let { log, sin, cos } = Math;
4. 函数参数默认值

箭头函数

简化函数定义的语法：() => {}

基本用法

javascript

运行

// 无参数
let fn = () => console.log("Hello");// 单个参数（可省略括号）
let double = num => num * 2;// 多个参数
let sum = (a, b) => a + b;// 函数体多行（需用大括号）
let multiply = (a, b) => {let result = a * b;return result;
};

注意事项

1. this 指向固定：箭头函数没有自己的 this，其 this 指向定义时所在的上下文
2. 无 arguments 对象：需使用 rest 参数 ...args
3. 不能用作构造函数：不能用 new 调用
4. 没有 prototype 属性
5. 不能使用 call/apply/bind 改变 this 指向

箭头函数与普通函数的 this 区别

javascript

运行

const obj = {name: "对象",normalFunc: function() {console.log(this); // 指向 obj},arrowFunc: () => {console.log(this); // 指向全局对象（非严格模式下是window）}
};

函数扩展特性

参数默认值

javascript

运行

function greet(name = "Guest") {console.log(`Hello, ${name}`);
}

rest 参数

获取函数的剩余参数，返回真数组

javascript

运行

function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 10

函数属性

• length：返回没有指定默认值的参数个数
• name：返回函数名

展开运算符 (...)

展开运算符（...）有两种主要用途：展开（spread）和剩余（rest），根据上下文决定其作用。

主要应用场景

1. 数组深拷贝（单层）

   javascript

   运行

   let arr1 = [1, 2, 3];
   let arr2 = [...arr1]; // 拷贝数组
   arr2[0] = 100;
   console.log(arr1); // [1, 2, 3] 不受影响
   

2. 函数参数传递

   javascript

   运行

   let numbers = [10, 20, 30];
   function sum(a, b, c) {return a + b + c;
   }
   console.log(sum(...numbers)); // 60
   

3. 数组合并

   javascript

   运行

   let arr1 = [1, 2, 3];
   let arr2 = [4, 5, 6];
   let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
   

4. 伪数组转换为真数组

   javascript

   运行

   let divs = document.querySelectorAll('div');
   let divArray = [...divs]; // 转换为数组
   

5. 与解构赋值结合使用

   javascript

   运行

   let [first, ...rest] = [1, 2, 3, 4];
   console.log(first); // 1
   console.log(rest);  // [2, 3, 4]
   

6. 对象操作

   javascript

   运行

   let person = { name: 'Jack', age: 18 };
   let newPerson = { ...person, gender: 'male' }; // 复制并添加属性
   

7. 获取数组最值

   javascript

   运行

   let numbers = [10, 5, 25, 3];
   console.log(Math.max(...numbers)); // 25
   console.log(Math.min(...numbers)); // 3
   

字符串扩展方法

1. 模板字符串使用反引号（）和${}` 插入变量，支持多行

   javascript

   运行

   let name = "小明";
   let age = 20;
   console.log(`${name}今年${age}岁`);// 多行字符串
   let html = `<div><p>${name}</p></div>
   `;
   

2. 字符串检查方法

   • includes(str[, index])：判断是否包含指定字符串
   • startsWith(str[, index])：判断是否以指定字符串开头
   • endsWith(str[, index])：判断是否以指定字符串结尾

3. 其他实用方法

   • repeat(n)：重复字符串 n 次
   • padStart(num[, str])：在字符串前填充指定字符至指定长度
   • padEnd(num[, str])：在字符串后填充指定字符至指定长度
   • trimStart() / trimEnd()：去除开头 / 结尾空白
   • trim()：去除两端空白

ES5 数组方法

方法	功能	返回值	回调要求
forEach	遍历数组	无	无 return 要求
map	映射处理	新数组	需要 return 处理后的值
filter	筛选元素	符合条件的新数组	return 布尔值，true 保留
reduce	汇总计算	最终计算结果	return 累计值
some	检查是否有符合条件的元素	布尔值	return 布尔值，有一个 true 即返回 true
every	检查是否所有元素都符合条件	布尔值	return 布尔值，所有 true 才返回 true

示例用法

1. forEach - 简单遍历

   javascript

   运行

   [1, 2, 3].forEach((item, index) => {console.log(`索引${index}的值是${item}`);
   });
   

2. map - 数据转换

   javascript

   运行

   let prices = [100, 200, 300];
   let discounted = prices.map(price => price * 0.8); // 打8折
   

3. filter - 数据筛选

   javascript

   运行

   let products = [{price: 50}, {price: 150}, {price: 250}];
   let expensive = products.filter(p => p.price > 100);
   

4. reduce - 数据汇总

   javascript

   运行

   let numbers = [1, 2, 3, 4];
   let total = numbers.reduce((sum, num) => sum + num, 0); // 初始值0
   

5. some 与 every - 条件检查

   javascript

   运行

   let ages = [15, 20, 25];
   let hasAdult = ages.some(age => age >= 18); // true
   let allAdults = ages.every(age => age >= 18); // false
   

对象字面量简写

ES6 简化了对象字面量的写法：

1. 属性简写：当属性名与变量名相同时，可省略冒号和值
2. 方法简写：方法定义可省略 function 关键字

javascript

运行

let name = "Alice";
let age = 30;// ES5写法
let personES5 = {name: name,age: age,sayHello: function() {console.log("Hello");}
};// ES6简写
let personES6 = {name,  // 等同于 name: nameage,   // 等同于 age: agesayHello() {  // 等同于 sayHello: function()console.log("Hello");}
};

1