{site_name}

{site_name}

🌜 搜索

ES6(ECMAScript 2015)引入了一些新的函数扩展特性,包括箭头函数

前端 𝄐 0
es6新增函数,es6扩展运算,es6中的扩展运算符,es6find方法,es6常用的方法,es6常用函数
ES6(ECMAScript 2015)引入了一些新的函数扩展特性,包括箭头函数、默认参数值、剩余参数、展开语法和解构赋值。

1. 箭头函数
箭头函数是一种更简洁的函数声明方式,可以使用更少的代码来定义函数。它们的语法使用“=>”符号,而不是function关键字,并且具有自动绑定this的功能。

例如,下面是一个使用传统函数声明方式定义的函数:


function add(a, b) {
return a + b;
}


我们可以使用箭头函数重写它:


const add = (a, b) => a + b;


2. 默认参数值
ES6允许在函数参数列表中为参数设置默认值。如果调用函数时没有提供该参数,则将使用默认值。

例如,下面是一个使用默认参数值的函数:


function greet(name = 'World') {
console.log(Hello, ${name}!);
}
greet(); // 输出:Hello, World!
greet('Alice'); // 输出:Hello, Alice!


3. 剩余参数
剩余参数允许我们在函数定义中使用不确定数量的参数。剩余参数以三个点(...)作为前缀,后跟参数名称。在函数内部,剩余参数被表示为一个数组。

例如,下面是一个使用剩余参数的函数:


function sum(...numbers) {
return numbers.reduce((total, num) => total + num);
}
console.log(sum(1, 2, 3)); // 输出:6
console.log(sum(4, 5, 6, 7)); // 输出:22


4. 展开语法
展开语法可以将数组或对象“展开”为参数列表或属性列表。

例如,下面是一个使用展开语法的函数:


function greet(firstName, lastName) {
console.log(Hello, ${firstName} ${lastName}!);
}
const name = ['Alice', 'Smith'];
greet(...name); // 输出:Hello, Alice Smith!


5. 解构赋值
解构赋值允许我们从数组或对象中提取数据,并将其分配给变量。解构赋值也可以用于函数参数。

例如,下面是一个使用解构赋值的函数:


function greet({ firstName, lastName }) {
console.log(Hello, ${firstName} ${lastName}!);
}
const person = { firstName: 'Alice', lastName: 'Smith' };
greet(person); // 输出:Hello, Alice Smith!