脚本宝典收集整理的这篇文章主要介绍了JavaScript ES6功能：好的部件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

JavaScript ES6功能：好的部件

ES6提供了一些很酷的新功能，使JavaScript编程更加灵活。我们来谈谈它们中的一些 - 特别是默认参数，休息参数和箭头函数。

有趣的提示：您可以将任何这些示例/代码复制并粘贴到Babel REPL中@H_406_8@ ，您可以看到ES6代码如何转换为ES5。

默认参数值

JavaScript函数具有一个独特的功能，允许您在函数调用期间传递任意数量的参数（实际参数），而不管函数定义中存在的参数数量（形式参数）。因此，您需要包含默认参数，以防有人忘记传递其中一个参数。

如何在ES5中实现默认参数

当我们运行它时，上面似乎很好。number2没有通过，我们使用' ||'运算符检查这个，如果第一个是假的，则返回第二个操作数。因此，'10'被指定为默认值，因为number2未定义。

但是只有一个问题。如果有人将'0'作为第二个参数传递怎么办？⚠

上述方法将失败，因为我们将分配默认值“10”而不是传递的值，例如“0”。为什么？因为'0'被评估为假！

让我们改进上面的代码，好吗？

哎！那个代码太多了。一点都不酷。让我们看看ES6是如何做到的。

ES6中的默认参数

function counts(number1 = 5, number2 = 10) {
  // do anything here
}

number1并number2分别分配默认值“5”和“10”。 好吧，这就是它。简短又甜蜜。没有额外的代码来检查缺少的参数。这使得函数的主体变得美观而简短。🙃

注意：如果undefined为具有默认参数的参数传递值，则按预期方式传递的值无效并分配默认参数值。但是如果null传递，则认为它是有效的并且不使用默认参数并且为该参数分配null。

默认参数的一个很好的特性是默认参数不一定必须是原始值，我们还可以执行一个函数来检索默认参数值。这是一个例子：

以前的参数也可以是它们之后的参数的默认参数，如下所示：

 

function multiply(First, second = first) {
  // do something here
}

但反过来会抛出一个错误。也就是说，如果将第二个参数指定为第一个参数的默认值，则会导致错误，因为第二个参数在分配给第一个参数时尚未定义。  

function add（first = second，second）{ 
  return first + second; 
} 
console.LOG（add（undefined，1））; //抛出错误

休息参数

一个休息的参数仅仅是这是由三个点（...）开头命名参数。此命名参数成为一个数组，其中包含函数调用期间传递的其余参数（即除了命名参数）。

请记住，只能有一个rest参数，它必须是最后一个参数。我们在rest参数之后不能有一个命名参数。 这是一个例子：

正如您所看到的，我们已经使用rest参数来获取从传递的对象中提取的所有键/属性，这是第一个参数。

rest参数和'arguments object'之间的区别在于后者包含函数调用期间传递的所有实际参数，而'rest参数'仅包含非命名参数的参数，并在函数调用期间传递。

箭头功能➡

箭头函数或“胖箭头函数”引入了一种用于定义非常简洁的函数的新语法。我们可以避免输入类似的关键字function，return甚至是大括号{ }和括号()。

句法

语法有不同的风格，具体取决于我们的用法。所有的变化有一个共同点共同的，即它们开始与参数，然后将 箭头（=>），然后是函数体。

论证和正文可以采取不同的形式。这是最基本的例子：

let mirror = value => value;
// 相当于：
let mirror = function（value）{ 
  返回值; 
};

上面的示例采用单个参数“value”（在箭头之前）并简单地返回该参数（=> value;）。正如您所看到的，这里只是返回值，因此不需要返回关键字或花括号来包装函数体。

由于只有一个参数，所以也不需要括号 “（）”。

这是一个包含多个参数的示例，可帮助您理解这一点：

let add =（no1，no2）=> no1 + no2;
// 相当于：
let add = function（no1，no2）{ 
  return no1 + no2; 
};

如果根本没有参数，则必须包含如下的空括号：

let getMessage =（）=>'Hello World';
// 相当于：
let getMessage = function（）{ 
  return'Hello World'; 
}

对于只有return语句的函数体，花括号是可选的。 对于不仅仅具有return语句的函数体，您需要像传统函数一样将体包裹在花括号中。

这是一个简单的计算函数，有两个操作 - 加法和减法。它的身体必须用花括号包裹：

let calculate = (no1, no2, operation) => {
    let result;
    swITch (oPEration) {
        case 'add':
            result = no1 + no2;
            break;
        case 'suBTract':
            result = no1 - no2;
            break;
    }
    return result;
};

现在如果我们想要一个只返回一个对象的函数呢？无论大括号是函数体的object（）还是花括号，编译器都会感到困惑。()=>{id: number}

解决方案是将对象包装在括号中。这是如何做：

let getTempItem = number => （ {id：number} ） ;
//有效地相当于：
让getTempItem = function（number）{ 
    return { 
        id：number 
    }; 
};

我们来看看最后的例子。在此我们将在数字样本数组上使用过滤函数来返回大于5,000的所有数字：

//使用箭头函数
let result = sampleArray.filter（element => element> 5000）;
//没有箭头函数
let result = sampleArray.filter（function（element）{ 
  return element> 5000; 
}）;

我们可以看到与传统功能相比需要的代码少得多。

关于箭头函数的一些事情要记住：

• 它们不能用new调用，不能用作构造函数（因此也缺少原型）
@H_126_196@箭头函数有自己的范围，但没有自己的“ 这个”。
• 没有参数对象可用。但是，您可以使用 rest参数。

由于JavaScript将函数视为第一类，因此箭头函数使得编写像lambda表达式和curry的函数代码变得更加容易。

“箭头功能就像是JavaScript中功能性编程爆炸的火箭燃料。” - Eric Elliott

---

好吧，你去吧！也许是时候开始使用这些功能了。

像这样的ES6功能是一股清新的空气，开发人员喜欢使用它们。

  觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript ES6功能：好的部件全部内容，希望文章能够帮你解决JavaScript ES6功能：好的部件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。