当前位置：首页 > news >正文

es6新特性功能介绍（二）

news 2026/6/4 22:36:04

ES6 进阶核心特性：对象函数简化 + 箭头函数 + 参数默认值 + rest 参数实战全解

摘要

本文深度讲解 ES6 四大进阶高频特性：对象与函数简化写法、箭头函数、函数参数默认值、rest 剩余参数，从语法规则、核心特性、代码实战、避坑指南四大维度全面解析，配套可直接运行的示例代码，覆盖前端开发 90% 常用场景，帮助开发者快速落地 ES6 进阶语法，写出简洁、高效、规范的现代 JavaScript 代码。

一、ES6 对象与函数简化写法

1.1 核心语法

ES6 允许在对象大括号{}内，直接写入变量名作为对象属性、直接书写函数作为对象方法，省略冗余的属性名:属性值和function关键字，代码更简洁直观。

1.2 代码实战演示

javascript

运行

// 定义独立变量和函数 let name = "大喇叭"; let change = function () { console.log("活着就是为了改变世界！"); }; // 创建对象（ES6简化写法） const school = { // 变量直接作为属性：等价于 name: name name, // 函数直接作为方法：等价于 change: change change, // 对象方法简化：省略 function 关键字 say() { console.log("言行一致！"); }, }; // 调用测试 school.change(); // 活着就是为了改变世界！ school.say(); // 言行一致！

1.3 核心优势

省略重复的属性名和值，减少代码冗余；
对象方法书写更简洁，符合现代开发习惯；
不改变原有功能，纯语法糖，兼容性与可读性拉满。

1.4 应用场景

定义对象、封装模块、组件配置项时优先使用，是前端开发必备简化语法。

二、箭头函数：ES6 最常用函数语法糖

2.1 核心概念

箭头函数() => {}是 ES6 提供的简洁函数定义方式，主要用于匿名函数，大幅简化函数书写，同时具备固定的this指向规则。

2.2 核心特性（必背）

应用场景：

注意：这些特性使得箭头函数特别适合非方法的函数，但不适合需要动态 this 或作为构造函数的方法定义。

箭头函数是 ES6 引入的一种简洁的函数语法，具有以下重要特性：
形参省略规则：
- 当只有一个形参时，可以省略参数的小括号
- 示例：x => x * 2等同于(x) => { return x * 2 }
- 无参数或多个参数时仍需保留小括号，如() => console.log('hi')或(a,b) => a + b
函数体简写：
- 当函数体只有一条语句时，可以省略花括号
- 该语句会被自动作为返回值，无需写 return
- 示例：numbers.map(n => n * 2)
- 若要返回对象字面量，需用括号包裹：() => ({ name: 'John' })
this 绑定特性：
- 箭头函数的 this 是词法作用域的 this（定义时的 this）
- 不会因调用方式改变，call/apply/bind 也无法修改
- 示例：
```
const obj = { value: 1, regular: function() { console.log(this.value) }, // 动态 this arrow: () => console.log(this.value) // 静态 this（指向外层） }
```
构造限制：
- 不能用作构造函数，使用 new 调用会抛出错误
- 示例：const Foo = () => {}; new Foo()会报错
- 因为没有自己的 prototype 属性
arguments 对象：
- 没有自己的 arguments 对象
- 会继承外层函数的 arguments（如果存在）
- 替代方案：使用剩余参数语法(...args) => console.log(args)
数组方法回调：[1,2,3].map(x => x * 2)
需要保持 this 一致的场景（如事件处理函数）
简单的单行函数逻辑

2.3 基础语法对比（传统 vs 箭头函数）

javascript

运行

// 1. 无参数 let speak = () => console.log("hello 哈哈！"); speak(); // 2. 一个参数（小括号可省略） let hi = name => "hi " + name; console.log(hi("大喇叭")); // 3. 多个参数 let he = (a, b, c) => a + b + c; console.log(he(1, 2, 3)); // 6

2.4 this 指向特性（重点）

箭头函数的this是静态的，声明后永久不变，不受call/apply/bind影响：

javascript

运行

const school = { name: "大哥" }; window.name = "大喇叭"; // 普通函数：this会变 function getName() { console.log("getName：" + this.name); } // 箭头函数：this永远指向声明时的作用域（这里是window） let getName1 = () => console.log("getName1：" + this.name); // 直接调用 getName(); // 大喇叭 getName1(); // 大喇叭 // call修改this getName.call(school); // 大哥（生效） getName1.call(school); // 大喇叭（不生效！）

2.5 两大禁用场景

javascript

运行

// 1. 不能作为构造函数（报错：不是构造器） // let Person = (name) => { this.name = name }; // new Person("测试"); // 2. 不能使用 arguments（报错：未定义） // let fn = () => console.log(arguments); // fn(1,2,3);

2.6 应用场景

定时器、数组遍历方法、回调函数优先使用箭头函数；需要动态this时用普通函数。

三、ES6 函数参数默认值

3.1 核心语法

ES6 允许直接给函数形参赋初始值，调用时不传参自动使用默认值，替代传统||赋值写法。

3.2 语法规则

直接写：function fn(a = 10){}
带默认值的参数建议放在参数列表最后（行业潜规则）；
支持与对象解构赋值结合使用。

3.3 代码实战演示

javascript

运行

// 1. 基础默认值写法 function add2(a, b, c = 10) { return a + b + c; } console.log(add2(1, 2)); // 1+2+10=13 // 2. 与对象解构赋值结合（高频实战） function connect({ host = "127.0.0.1", // 设置默认值 username, password, port, }) { console.log(host); // 127.0.0.1 console.log(username); // root console.log(password); // root console.log(port); // 3306 } // 调用时只传必填参数 connect({ username: "root", password: "root", port: 3306, });

3.4 应用场景

函数可选参数、配置项参数、接口请求参数，大幅简化参数判断逻辑。

四、ES6 rest 参数：替代 arguments 的优雅方案

4.1 核心概念

rest 参数用...参数名定义，用于获取函数所有实参，返回一个真数组，完美替代不灵活的arguments（伪数组）。

4.2 语法规则

格式：function fn(...args){}
args是标准数组，可直接使用map/filter/forEach；
rest 参数必须放在所有形参最后。

4.3 代码实战演示

javascript

运行

// ES5：arguments 是伪数组，不能直接用数组方法 function data() { console.log(arguments); // 伪数组 } data("大哥", "二哥", "三哥"); // ES6：rest参数 ...args 是真数组 function data(...args) { console.log(args); // ["大哥", "二哥", "三哥"] // 可直接使用数组方法 args.forEach(item => console.log(item)); } data("大哥", "二哥", "三哥", "四哥");