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

网站转微信小程序网络推广平台代理

news 2025/7/21 9:32:48

网站转微信小程序,网络推广平台代理,breal wordpress,express做静态网站ecmascript 6在John Resig和Bear Bibeault撰写的《 JavaScript忍者的秘密》一书中，作者将功能描述为该语言的最重要概念，因为在JavaScript中，一切都围绕着功能展开。功能确实非常重要。新版本JavaScript为您添加了更多您喜欢使用的功能。 …

ecmascript 6

在John Resig和Bear Bibeault撰写的《 JavaScript忍者的秘密》一书中，作者将功能描述为该语言的最重要概念，因为在JavaScript中，一切都围绕着功能展开。功能确实非常重要。新版本JavaScript为您添加了更多您喜欢使用的功能。在本教程中，您将学习有关可与函数一起使用的新功能的更多信息，并使您能够编写更强大的代码。

如果您想了解有关ECMAScript 6的更多信息，建议您阅读有关String和Array数据类型以及新引入的Map和WeakMap数据类型的文章。

箭头功能

我要介绍的第一个功能是箭头功能。顾名思义，要使用它，我们将使用箭头（ => ），如果您曾经使用过PHP，您可能会认识到。此功能以两种形式与当前函数语法集成在一起。请记住，使用箭头功能只能替换匿名功能。两种可能的语法如下所示：

// First syntax
([param] [, param]) => { statements }
// Second syntax
param => expression

param占位符代表函数的参数，而statements代表函数的主体。 expression表示任何有效的表达式，它代替了第一种语法（ { statements } ）的右侧。在第一种形式中，您可以在括号之间放置任意数量的参数，而第二种形式则限于一个。

为了了解它们的外观，我们假设我们需要一组数字来测试偶数或奇数。另外，我们只需要执行一次此测试，因此我们不需要定义isEven()函数，并且可以使用匿名函数。如果一个数字是偶数，我们的函数将返回true ，否则返回false 。结果是下面的代码：

var numbers = [10, 21, 15, 8];
// prints "[true, false, false, true]"
console.log(
numbers.map(function(number) {
return number % 2 === 0;
})
);

这是箭头功能为何有用的完美示例。如您所见，匿名函数非常简单，其主体由单个语句组成。尽管如此，要遵守当前JavaScript语法，我们必须键入许多其他字符。多亏了箭头功能，我们可以避免使用它们并编写如下代码：

var numbers = [10, 21, 15, 8];
// prints "[true, false, false, true]"
console.log(
numbers.map(number => number % 2 === 0)
);

不是很短吗？在这种情况下，我们可以使用较短的第二种语法，因为函数的主体仅由一个语句组成。此外，我们仅有的一条语句是return 。实际上，使用第二种语法时，正确表达式的结果将用作返回值。

如果我们想使用箭头函数来替换更多的语句，可以使用第一种形式。为了看到它的作用，让我们增强功能以验证给定的参数实际上是一个数字，并且是一个整数。结果代码如下：

var numbers = [10, 15, false, 'test', {}];
// prints "[true, false, false, false, false]"
console.log(
numbers.map(function(number) {
// The parameter is a number and it's an integer
if (typeof number !== 'number' || number % 1 !== 0) {
return false;
}
return number % 2 === 0;
})
);

我们可以使用箭头函数的第一种形式来缩短它，如下所示：

var numbers = [10, 15, false, 'test', {}];
// prints "[true, false, false, false, false]"
console.log(
numbers.map(number => {
// The parameter is a number and it's an integer
if (typeof number !== 'number' || number % 1 !== 0) {
return false;
}
return number % 2 === 0;
})
);

下面显示了先前代码的实时演示，并且也可以作为JSFiddle获得。

箭头功能不仅很棒，还因为它们使我们能够节省一些击键。另一个重要特征是它们隐式绑定函数的this值。假设给定页面具有一些按钮，并且该页面具有以下代码：

var Utility = {
fullname: 'Aurelio De Rosa',
handler: function (elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
console.log(this.fullname);
});
}
}
};
var buttons = document.getElementsByTagName('button');
Utility.handler(buttons);

每当按下按钮时，控制台上就会打印字符串“ Aurelio De Rosa”。然而，当处理器在连接for环路，价值this不会是Utility的对象了，但它会window 。因此，控制台将显示undefined 。

这是JavaScript中的常见问题，我们可以通过许多不同的方式解决。例如，您可以使用变量（经典var that = this方法）存储对Utility对象的引用，也可以使用bind()函数。但是，由于引入了arrow功能，我们可以解决以下问题：

var Utility = {
fullname: 'Aurelio De Rosa',
handler: function (elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', () => {
console.log(this.fullname);
});
}
}
};
var buttons = document.getElementsByTagName('button');
Utility.handler(buttons);

下面显示了先前代码的实时演示，并且还可以作为JSFiddle获得。

当前仅Firefox 22+支持此功能。

参数的默认值

新版本JavaScript引入了PHP开发人员广泛使用的另一个功能：可以为参数设置默认值。 JavaScript版本比PHP版本更强大，因为用于给定参数的默认值可用于列表中的下一个参数。另外，在JavaScript中，带有默认值的参数后面可以带有不带参数的参数。在PHP中这是不可能的。要分配默认值，您必须在参数名称后紧跟等号，然后再添加要分配的默认值，就像在经典分配中一样。

默认值是我们过去使用过几次的东西，但使用的方式不同。思考以下代码：

function Person(name, surname, gender) {
// Set default values
name = name || 'Aurelio';
surname = surname || 'De Rosa';
gender = gender || 'male';
this.toString = function() {
return 'My name is ' + name + ' ' + surname + ' and I am a ' + gender;
}
};
// prints "My name is John Doe and I am a male"
console.log(new Person('John', 'Doe').toString());
// prints "My name is Aurelio De Rosa and I am a male"
console.log(new Person().toString());

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

运行此代码段可以按预期工作，但是手动管理默认值确实很无聊。此外，所使用的方法可能会产生意外结果，因为它会测试伪造的值，然后分配默认值。假设参数之一是数字，理想的默认值为10，但零是可以接受的。使用上面的代码技术，我们可以编写：

param = param || 10;

在这种情况下，因为零是虚假值，所以将10分配给param ，这实际上不是我们想要的。当然可以使用其他技术，但是它们要求我们编写更多代码。借助ECMAScript 6的新功能，我们可以避免出现此类问题并缩短代码，如下所示：

function Person(name = 'Aurelio', surname = 'De Rosa', gender = 'male') {  
this.toString = function() {
return 'My name is ' + name + ' ' + surname + ' and I am a ' + gender;
}
};
// prints "My name is John Doe and I am a male"
console.log(new Person('John', 'Doe').toString());
// prints "My name is Aurelio De Rosa and I am a male"
console.log(new Person().toString());

此版本不仅更简洁，而且更具可读性，因为默认值设置为接近参数。值得注意的是，如果传入的参数undefined也将使用默认值。

下面显示了先前代码的实时演示，并且也可以作为JSFiddle获得。

在前面的示例中，我们仅看到了此新功能的基本用法。下一个示例显示了如何在具有默认值的参数之后设置没有默认值的参数：

function prod(number1 = 1, number2) {
return number1 * number2;
}

最后一个示例显示一个参数，其默认值取决于带有默认值的先前参数：

function Person(name, surname, username = name + ' ' + surname) {
}

与以前的功能一样，该参数的默认值目前仅受Firefox 15+支持。

休息参数

rest参数是一个特殊参数，使我们能够在函数中表达任意数量的参数。它将包含所有与命名参数不匹配的传递参数作为数组的元素（而不是类似数组的元素）。要定义此参数，您必须将其放置在函数签名的最后，并在其前面加上三个点。此参数的语法报告如下：

function (...paramName) {
}

paramName可以是您想要分配给此特殊参数的任何任意名称。

开发人员长期以来使用arguments并删除命名参数来模拟此功能。为了可视化旧方法和新方法之间的区别，我们假设我们有一个函数，该函数接受有关人员的一些数据并将其打印在控制台上。此功能有两个强制性参数，分别代表人员的姓名和姓氏，然后是任意数量的附加参数。在旧方法中，可以将以下函数编写为：

function presentation(name, surname) {
var otherInfo = [].slice.call(arguments, 2);
console.log('My name is ' + name + ' ' + surname);
if (otherInfo.length > 0) {
console.log('Other info: ' + otherInfo.join(', '));
}
}
// prints "My name is John Doe"
presentation('John', 'Doe');
// Prints "My name is Aurelio De Rosa"
// "Other info: male, Italian, Web developer"
presentation('Aurelio', 'De Rosa', 'male', 'Italian', 'Web developer');

使用rest参数，我们可以摆脱函数的第一条语句，从而得到下面列出的代码：

function presentation(name, surname, ...otherInfo) {
console.log('My name is ' + name + ' ' + surname);
if (otherInfo.length > 0) {
console.log('Other info: ' + otherInfo.join(', '));
}
}
// prints "My name is John Doe"
presentation('John', 'Doe');
// Prints "My name is Aurelio De Rosa"
// "Other info: male, Italian, Web developer"
presentation('Aurelio', 'De Rosa', 'male', 'Italian', 'Web developer');

下面显示了先前代码的实时演示，并且也可以作为JSFiddle获得。

当前仅Firefox 15+支持此功能。