ES6 - 快速指南

---

ES6 - 概述

ECMAScript (ES) 是 ECMAScript International 标准化的脚本语言规范。应用程序使用它来启用客户端脚本。该规范受到 Self、Perl、Python、Java 等编程语言的影响。JavaScript、Jscript 和 ActionScript 等语言均受该规范管辖。

本教程向您介绍 JavaScript 中的 ES6 实现。

JavaScript

JavaScript 由 Netscape Communications Corporation 的开发人员 Brendan Eich 于 1995 年开发。JavaScript 最初的名称为 Mocha，在正式更名为 JavaScript 之前曾短暂命名为 LiveScript。它是一种由浏览器（即客户端）执行的脚本语言。它与 HTML 结合使用来开发响应式网页。

这里讨论的 ECMA Script6 的实现涵盖以下新功能 -

• 支持常量
• 块范围
• 箭头功能
• 扩展参数处理
• 模板文字
• 扩展文字
• 增强的对象属性
• 解构赋值
• 模块
• 课程
• 迭代器
• 发电机
• 收藏
• 各种类的新内置方法
• 承诺

ECMAScript 版本

ECMA-262 有九个版本，如下 -

ES6 - 环境

本章我们将讨论ES6环境的搭建。

本地环境设置

JavaScript 可以在任何浏览器、任何主机和任何操作系统上运行。您将需要以下内容来编写和测试 JavaScript 程序标准 -

文本编辑器

文本编辑器可以帮助您编写源代码。少数编辑器的示例包括 Windows Notepad、Notepad++、Emacs、vim 或 vi 等。使用的编辑器可能因操作系统而异。源文件通常以扩展名.js命名

安装 Node.js

Node.js是一个用于服务器端 JavaScript 的开源、跨平台运行时环境。Node.js 需要在没有浏览器支持的情况下运行 JavaScript。它使用 Google V8 JavaScript 引擎来执行代码。您可以下载 Node.js 源代码或适合您平台的预构建安装程序。节点可在https://nodejs.org/en/download获取

在 Windows 上安装

下载并运行Node 的.msi 安装程序

要验证安装是否成功，请在终端窗口中输入命令node –v 。

在 Mac OS X 上安装

要在 OS X 上安装 node.js，您可以下载一个预编译的二进制包，这使得安装变得简单又方便。前往www.nodejs.org并单击安装按钮下载最新的软件包。

按照安装向导安装.dmg中的软件包，该向导将安装node和npm。npm 是 Node 包管理器，它有助于安装 Node.js 的附加包。

在 Linux 上安装

在安装 Node.js 和 npm 之前，您需要安装一些依赖项。

• Ruby和海湾合作委员会。您需要 Ruby 1.8.6 或更高版本以及 GCC 4.2 或更高版本

• 自制。Homebrew 是一个最初用于 Mac 的包管理器，但它已被移植到 Linux 上，称为 Linuxbrew。您可以在http://brew.sh/的http://brew.sh/linuxbrew上了解有关 Homebrew 的更多信息。

集成开发环境 (IDE) 支持

JavaScript 可以构建在多种开发环境上，例如 Visual Studio、Sublime Text 2、WebStorm/PHPStorm、Eclipse、Brackets 等。本节讨论 Visual Studio Code 和 Brackets IDE。这里使用的开发环境是Visual Studio Code（Windows平台）。

视觉工作室代码

这是 Visual Studio 的开源 IDE。它适用于 Mac OS X、Linux 和 Windows 平台。VScode 可从https://code.visualstudio.com获取。

在 Windows 上安装

下载适用于 Windows 的 Visual Studio Code。

双击 VSCodeSetup.exe以启动安装过程。这只需要一分钟。

以下是 IDE 的屏幕截图。

您可以通过右键单击文件 → 在命令提示符中打开来直接遍历到文件的路径。同样，“在资源管理器中显示”选项会在文件资源管理器中显示文件。

在 Mac OS X 上安装

Visual Studio Code 的 Mac OS X 特定安装指南可在https://code.visualstudio.com/docs/setup/setup-overview找到

在 Linux 上安装

Visual Studio Code 的 Linux 特定安装指南可在 https://code.visualstudio.com/Docs/editor/setup 找到。

括号

Brackets 是一款用于 Web 开发的免费开源编辑器，由 Adob​​e Systems 创建。它适用于 Linux、Windows 和 Mac OS X。Brackets 可从http://brackets.io获取。

您可以通过添加一个扩展 Brackets Shell 在 Brackets 本身内运行 DOS 提示符/Shell。

安装后，您将在编辑器的右侧找到一个 shell 图标。单击该图标后，您将看到 shell 窗口，如以下屏幕截图所示。

你都准备好了！！！

ES6 - 语法

语法定义了编写程序的一组规则。每种语言规范都定义了自己的语法。

JavaScript 程序可以由以下部分组成：

• 变量- 表示可以存储程序值的命名内存块。

• 文字- 表示常量/固定值。

• 运算符- 定义如何处理操作数的符号。

• 关键字- 在语言上下文中具有特殊含义的单词。

下表列出了 JavaScript 中的一些关键字。下表列出了一些常用的关键字。

• 模块- 表示可以在不同程序/脚本之间重用的代码块。

• 注释- 用于提高代码可读性。JavaScript 引擎会忽略这些。

• 标识符- 这些是程序中元素的名称，如变量、函数等。标识符的规则是 -

  • 标识符可以包括字符和数字。但是，标识符不能以数字开头。

  • 标识符不能包含除下划线 (_) 或美元符号 ($) 之外的特殊符号。

  • 标识符不能是关键字。它们必须是独一无二的。

  • 标识符区分大小写。标识符不能包含空格。

下表说明了一些有效和无效的标识符。

空格和换行符

ES6 忽略程序中出现的空格、制表符和换行符。您可以在程序中自由使用空格、制表符和换行符，并且可以以整洁一致的方式自由地格式化和缩进程序，使代码易于阅读和理解。

JavaScript 区分大小写

JavaScript 区分大小写。这意味着 JavaScript 区分大写和小写字符。

分号是可选的

每行指令称为一条语句。JavaScript 中分号是可选的。

例子

console.log("hello world") 
console.log("We are learning ES6") 

一行可以包含多个语句。但是，这些语句必须用分号分隔。

JavaScript 中的注释

注释是提高程序可读性的一种方法。注释可用于包含有关程序的附加信息，例如代码的作者、有关函数/构造的提示等。编译器会忽略注释。

JavaScript 支持以下类型的注释 -

• 单行注释 (//) - // 和行尾之间的任何文本都被视为注释。

• 多行注释 (/* */) - 这些注释可能跨越多行。

例子

//this is single line comment  
/* This is a  
Multi-line comment 
*/

你的第一个 JavaScript 代码

让我们从传统的“Hello World”示例开始”。

var message = "Hello World" 
console.log(message)

该程序可以分析为 -

• 第 1 行通过名称 message 声明一个变量。变量是程序中存储值的一种机制。

• 第 2 行将变量的值打印到提示符中。这里的控制台是指终端窗口。函数log()用于在屏幕上显示文本。

执行代码

我们将使用 Node.js 来执行我们的代码。

• 步骤 1 - 将文件另存为 Test.js

• 步骤 2 - 右键单击​​ Visual Studio Code 的项目资源管理器窗口中工作文件选项下的 Test.js 文件。

• 步骤 3 - 选择“在命令提示符中打开”选项。

• 步骤 4 - 在 Node 的终端窗口中键入以下命令。

node Test.js 

成功执行文件后将显示以下输出。

Hello World

Node.js 和 JS/ES6

ECMAScript 2015(ES6) 功能分为三组 -

• 对于运输- 这些是 V8 认为稳定的功能。

• 阶段性功能- 这些是几乎完成的功能，但 V8 团队认为不稳定。

• 进行中- 这些功能应仅用于测试目的。

第一类功能是完全支持的，并且节点默认打开。分阶段功能需要运行时和谐标志才能执行。

可以在此处找到 Node.js 组件特定 CLI 标志的列表 - https://nodejs.org/api/cli.html

严格模式

ECMAScript 规范第五版引入了严格模式。严格模式对 JavaScript 施加了一层约束。它对正常的 JavaScript 语义进行了一些更改。

通过包含以下内容，可以将代码转换为在严格模式下工作：

// Whole-script strict mode syntax 
"use strict"; 
 v = "Hi!  I'm a strict mode script!";  // ERROR: Variable v is not declared

在上面的代码片段中，整个代码作为 JavaScript 的受约束变体运行。

JavaScript 还允许将严格模式限制在块的作用域内，就像函数的作用域一样。如下所示 -

v = 15 
function f1() { 
   "use strict"; 
   var v = "Hi!  I'm a strict mode script!"; 
}

在上面的代码片段中，函数外部的任何代码都将以非严格模式运行。函数内的所有语句都将以严格模式执行。

ES6和吊装

默认情况下，JavaScript 引擎将声明移至顶部。此功能称为提升。此功能适用于变量和函数。提升允许 JavaScript 在声明组件之前使用该组件。但是，提升的概念不适用于在严格模式下运行的脚本。

变量提升和函数提升将在后续章节中进行解释。

ES6 - 变量

根据定义，变量是“内存中存储值的命名空间” 。换句话说，它充当程序中值的容器。变量名称为标识符。以下是标识符的命名规则 -

• 标识符不能是关键字。

• 标识符可以包含字母和数字。

• 标识符不能包含空格和特殊字符，下划线 (_) 和美元 ($) 符号除外。

• 变量名不能以数字开头。

类型语法

变量必须在使用之前声明。ES5 语法使用var关键字来实现相同的效果。声明变量的 ES5 语法如下。

//Declaration using var keyword 
var  variable_name

ES6 引入了以下变量声明语法 -

• 使用让。
• 使用常量。

变量初始化是指在变量中存储值的过程。变量可以在声明时或稍后的时间点进行初始化。

声明和初始化变量的传统 ES5 类型语法如下 -

//Declaration using var keyword 
var variable_name = value

示例：使用变量

var name = "Tom" 
console.log("The value in the variable is: "+name)

上面的例子声明了一个变量并打印它的值。

成功执行后将显示以下输出。

The value in the variable is Tom

JavaScript 和动态类型

JavaScript 是一种无类型语言。这意味着 JavaScript 变量可以保存任何数据类型的值。与许多其他语言不同，您不必在变量声明期间告诉 JavaScript 该变量将保存什么类型的值。变量的值类型可以在程序执行期间发生变化，JavaScript 会自动处理它。此功能称为动态类型。

JavaScript变量作用域

变量的作用域是定义它的程序区域。传统上，JavaScript 仅定义两个作用域：全局作用域和局部作用域。

• 全局作用域- 可以从 JavaScript 代码的任何部分访问具有全局作用域的变量。

• 局部作用域- 具有局部作用域的变量可以从声明它的函数内访问。

示例：全局变量与局部变量

以下示例使用名称num声明两个变量- 一个在函数外部（全局范围），另一个在函数内部（局部范围）。

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

在函数内引用该变量时，该变量显示局部作用域变量的值。但是，在函数外部访问变量num时会返回全局范围的实例。

成功执行后将显示以下输出。

value of num outside test() 10
value of num in test() 100

ES6 定义了一个新的变量作用域——块作用域。

Let 和 Block 作用域

块作用域限制变量对声明它的块的访问。var关键字将函数作用域分配给变量。与 var 关键字不同，let关键字允许脚本将对变量的访问限制为最近的封闭块。

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

该脚本在函数的本地范围内声明变量num ，并使用 let 关键字在块内重新声明它。当在内部块外部访问变量时，会打印本地作用域变量的值，而在内部块内引用块作用域变量。

注意- 严格模式是一种选择 JavaScript 受限制变体的方法。

成功执行后将显示以下输出。

value of num in test() 100 
Inner Block begins 
value of num : 200

示例：让 v/s var

var no = 10; 
var no = 20; 
console.log(no);

成功执行上述代码后将显示以下输出。

20

让我们使用let关键字重新编写相同的代码。

let no = 10; 
let no = 20; 
console.log(no);

上面的代码将抛出一个错误：标识符“no”已经被声明。使用 let 关键字声明的任何变量都被分配块作用域。

let 和 block 级别的安全性

如果我们尝试在同一个块内两次声明let变量，则会抛出错误。考虑以下示例 -

<script>
   let balance = 5000 // number type
   console.log(typeof balance)
   let balance = {message:"hello"} // changing number to object type
   console.log(typeof balance)
</script>

上面的代码将导致以下错误 -

Uncaught SyntaxError: Identifier 'balance' has already been declared

let 和多个块

但是，同一个let变量可以在不同的块级作用域中使用，而不会出现任何语法错误。

例子

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
      //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
   //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
      //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

上述代码的输出如下 -

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

常量

const声明创建对值的只读引用。这并不意味着它所保存的值是不可变的，只是变量标识符不能被重新分配。常量是块作用域的，很像使用 let 语句定义的变量。常量的值不能通过重新赋值而改变，也不能重新声明。

以下规则适用于使用const关键字声明的变量-

• 常量不能重新赋值。
• 不能重新声明常量。
• 常量需要一个初始值设定项。这意味着常量必须在声明期间初始化。
• 分配给const变量的值是可变的。

例子

const x = 10
x = 12 // will result in an error!!

上面的代码将返回错误，因为常量无法重新赋值。常量变量是不可变的。

常量是不可变的

与使用let关键字声明的变量不同，常量是不可变的。这意味着它的值无法更改。例如，如果我们尝试更改常量变量的值，则会显示错误。

<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000 // mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

上述代码的输出如下 -

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

常量和数组

以下示例展示了如何创建不可变数组。可以将新元素添加到数组中。但是，重新初始化数组将导致错误，如下所示 -

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
   //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

上述代码的输出如下所示 -

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

var 关键字

在 ES6 之前， JavaScript 中使用var关键字来声明变量。使用var声明的变量不支持块级作用域。这意味着如果在循环或if 块中声明变量，则可以在循环或if 块之外访问该变量。这是因为使用var关键字声明的变量支持提升。

var 和提升

变量提升允许在 JavaScript 程序中使用变量，甚至在声明变量之前也是如此。默认情况下，此类变量将被初始化为未定义。JavaScript 运行时将扫描变量声明并将它们放在函数或脚本的顶部。用var关键字声明的变量被提升到顶部。考虑以下示例 -

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company); // using variable before declaring
   var company = "TutorialsPoint"; // declare and initialized here
   console.log(company);
</script>

上述代码的输出如下所示 -

undefined
TutorialsPoint

var 和块作用域

块作用域限制变量对声明它的块的访问。var关键字将函数作用域分配给变量。使用var关键字声明的变量没有块作用域。考虑以下示例 -

<script>
   //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

上述代码的输出如下 -

1
2
3
4
5
after the loop i value is 6

变量i在 for 循环内使用var关键字声明。变量 i 可以在循环外访问。然而，有时可能需要限制块内变量的访问。在这种情况下我们不能使用var关键字。ES6 引入了let关键字来克服这个限制。

var 和块级安全

如果我们在一个块内使用var 关键字两次声明同一个变量，编译器将不会抛出错误。然而，这可能会导致运行时出现意外的逻辑错误。

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

上述代码的输出如下所示 -

number
object

ES6 - 运算符

表达式是一种计算结果为值的特殊语句。每个表达式都由以下部分组成 -

• 操作数- 代表数据。

• 运算符- 定义如何处理操作数以产生值。

考虑以下表达式 - 2 + 3。在表达式中，2 和 3 是操作数，符号 +（加号）是运算符。JavaScript 支持以下类型的运算符 -

• 算术运算符
• 逻辑运算符
• 关系运算符
• 按位运算符
• 赋值运算符
• 三元/条件运算符
• 字符串运算符
• 类型运算符
• 空操作符

算术运算符

假设变量a和b的值分别为10和5。

显示示例

关系运算符

关系运算符测试或定义两个实体之间的关系类型。关系运算符返回一个布尔值，即 true/false。

假设A的值为10，B的值为20。

显示示例

逻辑运算符

逻辑运算符用于组合两个或多个条件。逻辑运算符也返回布尔值。假设变量 A 的值为 10，B 的值为 20。

显示示例。

按位运算符

JavaScript 支持以下按位运算符。下表总结了 JavaScript 的按位运算符。

显示示例。

赋值运算符

下表总结了赋值运算符。

显示示例。

注意- 相同的逻辑适用于按位运算符，因此它们将变为 <<=、>>=、>>=、&=、|= 和 ^=。

杂项运算符

以下是一些杂项运算符。

否定运算符 (-)

更改值的符号。以下程序是相同的示例。

var x = 4 
var y = -x; 
console.log("value of x: ",x); //outputs 4 
console.log("value of y: ",y); //outputs -4

成功执行上述程序后将显示以下输出。

value of x: 4 
value of y: -4 

字符串运算符：连接运算符 (+)

+ 运算符应用于字符串时会将第二个字符串附加到第一个字符串。以下程序有助于理解这个概念。

var msg = "hello"+"world" 
console.log(msg) 

成功执行上述程序后将显示以下输出。

helloworld

连接操作不会在字符串之间添加空格。多个字符串可以连接在一个语句中。

条件运算符 (?)

该运算符用于表示条件表达式。条件运算符有时也称为三元运算符。以下是语法。

Test ? expr1 : expr2

在哪里，

测试- 指条件表达式

expr1 - 如果条件为真则返回的值

expr2 - 如果条件为假则返回值

例子

var num = -2 
var result = num > 0 ?"positive":"non-positive" 
console.log(result)

第 2 行检查变量 num 中的值是否大于零。如果 num 设置为大于零的值，则返回字符串“正”，否则返回“非正”字符串。

成功执行上述程序后将显示以下输出。

non-positive 

类型运算符

它是一个一元运算符。该运算符返回操作数的数据类型。下表列出了JavaScript 中typeof运算符返回的数据类型和值。

以下示例代码将数字显示为输出。

var num = 12 
console.log(typeof num); //output: number

成功执行上述代码后将显示以下输出。

number

价差运算符

ES6提供了一个新的运算符，称为展开运算符。扩展运算符由三个点“...”表示。扩展运算符将数组转换为单独的数组元素。

展开运算符和函数

以下示例说明了函数中扩展运算符的使用

<script>
   function addThreeNumbers(a,b,c){
      return a+b+c;
   }
   const arr = [10,20,30]
   console.log('sum is :',addThreeNumbers(...arr))
   console.log('sum is ',addThreeNumbers(...[1,2,3]))
</script>

上述代码的输出如下所示 -

sum is : 60
sum is 6

展开运算符以及数组复制和连接

扩展运算符可用于将一个数组复制到另一个数组中。它还可用于连接两个或多个数组。如下例所示 -

例子

<script>
   //copy array using spread operator
   let source_arr = [10,20,30]
   let dest_arr = [...source_arr]
   console.log(dest_arr)
	
   //concatenate two arrays
   let arr1 = [10,20,30]
   let arr2 =[40,50,60]
   let arr3 = [...arr1,...arr2]
   console.log(arr3)
</script>

上述代码的输出如下 -

[10, 20, 30]
[10, 20, 30, 40, 50, 60]

Spread 运算符和对象复制和串联

扩展运算符可用于将一个对象复制到另一个对象中。它还可用于连接两个或多个对象。如下例所示 -

<script>
   //copy object
   let student1 ={firstName:'Mohtashim',company:'TutorialsPoint'}
   let student2 ={...student1}
   console.log(student2)
   //concatenate objects
   let student3 = {lastName:'Mohammad'}
   let student4 = {...student1,...student3}
   console.log(student4)
</script>

上述代码的输出如下 -

{firstName: "Mohtashim", company: "TutorialsPoint"}
{firstName: "Mohtashim", company: "TutorialsPoint", lastName: "Mohammad"}

ES6 - 决策

条件/决策结构在执行指令之前评估条件。

JavaScript 中的条件结构如下表所示进行分类。

ES6 - 循环

有时，某些指令需要重复执行。循环是实现相同目的的理想方法。循环代表一组必须重复的指令。在循环的上下文中，重复称为迭代。

下图说明了循环的分类 -

定环

迭代次数是确定/固定的循环称为确定循环。“for 循环”是确定循环的实现。

for (initial_count_value; termination-condition; step) { 
   //statements
}   

无限循环

当循环中的迭代次数不确定或未知时，使用不定循环。

可以使用以下方式实现不定循环 -

循环控制语句

使用标签来控制流程

标签只是一个标识符，后跟一个冒号 (:)，应用于语句或代码块。标签可以与中断和继续一起使用，以更精确地控制流量。

“继续”或“中断”语句及其标签名称之间不允许有换行符。此外，标签名称和关联循环之间不应有任何其他语句

ES6 - 函数

函数是可读、可维护和可重用代码的构建块。函数是使用 function 关键字定义的。以下是定义标准函数的语法。

function function_name() { 
   // function body 
} 

要强制执行该函数，必须调用该函数。这称为函数调用。以下是调用函数的语法。

function_name()

示例：简单的函数定义

//define a  function 
function test() { 
   console.log("function called") 
} 
//call the function 
test()

该示例定义了一个函数 test()。一对分隔符 ( { } ) 定义函数体。也称为函数作用域。必须调用函数来强制其执行。

成功执行上述代码后将显示以下输出。

function called

功能分类

函数可以分为返回函数和参数化函数。

返回函数

函数还可以将值与控制一起返回给调用者。此类函数称为返回函数。

以下是返回函数的语法。

function function_name() { 
   //statements 
   return value; 
}

• 返回函数必须以 return 语句结束。

• 一个函数最多可以返回一个值。换句话说，每个函数只能有一个 return 语句。

• return 语句应该是函数中的最后一条语句。

以下代码片段是返回函数的示例 -

function retStr() { 
   return "hello world!!!" 
}  
var val = retStr() 
console.log(val) 

上面的示例定义了一个返回字符串“hello world!!!”的函数。给来电者。成功执行上述代码后将显示以下输出。

hello world!!! 

参数化函数

参数是一种将值传递给函数的机制。参数构成函数签名的一部分。参数值在函数调用期间传递给函数。除非明确指定，否则传递给函数的值的数量必须与定义的参数的数量相匹配。

以下是定义参数化函数的语法。

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

示例 - 参数化函数

该示例定义了一个函数 add，它接受两个参数n1和n2并打印它们的总和。参数值在调用函数时传递给函数。

function add( n1,n2) { 
   var sum = n1 + n2 
   console.log("The sum of the values entered "+sum) 
} 
add(12,13) 

成功执行上述代码后将显示以下输出。

The sum of the values entered 25

默认功能参数

在 ES6 中，如果没有值传递给函数或者函数未定义，则函数允许使用默认值初始化参数。下面的代码也说明了这一点。

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4))

上面的函数默认将 b 的值设置为 1。除非已显式传递值，否则该函数将始终认为参数 b 的值为 1。成功执行上述代码后将显示以下输出。

5

如果函数显式传递值，则参数的默认值将被覆盖。

function add(a, b = 1) { 
   return a + b; 
} 
console.log(add(4,2))

上面的代码将参数 b 的值显式设置为 2，从而覆盖其默认值。成功执行上述代码后将显示以下输出。

6

为了更好地理解，让我们考虑下面的例子。

实施例1

以下示例显示了一个函数，该函数接受两个参数并返回它们的总和。第二个参数的默认值为 10。这意味着，如果没有值传递给第二个参数，则其值为 10。

<script>
   function addTwoNumbers(first,second = 10){
      console.log('first parameter is :',first)
      console.log('second parameter is :',second)
      return first+second;
   }

   console.log("case 1 sum:",addTwoNumbers(20)) // no value
   console.log("case 2 sum:",addTwoNumbers(2,3))
   console.log("case 3 sum:",addTwoNumbers())
   console.log("case 4 sum",addTwoNumbers(1,null))//null passed
   console.log("case 5 sum",addTwoNumbers(3,undefined))
</script>

上述代码的输出如下 -

first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13

实施例2

<script>
   let DEFAULT_VAL = 30
      function addTwoNumbers(first,second = DEFAULT_VAL){
         console.log('first parameter is :',first)
         console.log('second parameter is :',second)
         return first+second;
      }
      console.log("case 1 sum",addTwoNumbers(1))
      console.log("case 2 sum",addTwoNumbers(3,undefined))
</script>

上述代码的输出如下所示 -

first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33

其余参数

剩余参数类似于 Java 中的变量参数。剩余参数不限制可以传递给函数的值的数量。但是，传递的值必须全部属于同一类型。换句话说，剩余参数充当相同类型的多个参数的占位符。

要声明剩余参数，参数名称应以三个句点为前缀，称为扩展运算符。下面的例子说明了同样的情况。

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7); 

成功执行上述代码后将显示以下输出。

0 
1 
3

注意- 剩余参数应该是函数参数列表中的最后一个。

匿名函数

未绑定到标识符（函数名）的函数称为匿名函数。这些函数在运行时动态声明。匿名函数可以接受输入并返回输出，就像标准函数一样。匿名函数在初始创建后通常无法访问。

可以为变量分配匿名函数。这样的表达式称为函数表达式。

以下是匿名函数的语法。

var res = function( [arguments] ) { ... } 

示例 - 匿名函数

var f = function(){ return "hello"} 
console.log(f()) 

成功执行上述代码后将显示以下输出。

hello 

示例 - 匿名参数化函数

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) 
} 
product()

成功执行上述代码后将显示以下输出。

The product : 200 

函数构造器

函数语句并不是定义新函数的唯一方法；您可以使用 Function() 构造函数和 new 运算符动态定义函数。

以下是使用 Function() 构造函数和 new 运算符创建函数的语法。

var variablename = new Function(Arg1, Arg2..., "Function Body"); 

Function() 构造函数需要任意数量的字符串参数。最后一个参数是函数的主体——它可以包含任意 JavaScript 语句，彼此之间用分号分隔。

Function() 构造函数不会传递任何为其创建的函数指定名称的参数。

示例 - 函数构造函数

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)
} 
product()

在上面的示例中，Function() 构造函数用于定义匿名函数。该函数接受两个参数并返回它们的乘积。

成功执行上述代码后将显示以下输出。

The product : 200

递归和 JavaScript 函数

递归是一种通过让函数重复调用自身直到得出结果来迭代操作的技术。当您需要在循环内使用不同参数重复调用同一函数时，最好应用递归。

示例 - 递归

function factorial(num) { 
   if(num <= 0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6)) 

在上面的例子中，函数调用自身。成功执行上述代码后将显示以下输出。

720 

示例 - 匿名递归函数

(function() { 
   var msg = "Hello World" 
   console.log(msg)
})()

该函数使用一对括号 () 调用自身。成功执行上述代码后将显示以下输出。

Hello World 

拉姆达函数

Lambda指的是编程中的匿名函数。Lambda 函数是一种表示匿名函数的简洁机制。这些函数也称为箭头函数。

Lambda 函数 - 剖析

Lambda 函数由 3 个部分组成 -

• 参数- 函数可以选择具有参数。

• 粗箭头表示法/lambda 表示法(=>)：也称为“go to”运算符。

• 语句- 代表函数的指令集。

提示- 按照惯例，鼓励使用单个字母参数来实现紧凑而精确的函数声明。

拉姆达表达式

它是一个指向单行代码的匿名函数表达式。以下是相同的语法。

([param1, parma2,…param n] )=>statement;

示例 - Lambda 表达式

var foo = (x)=>10+x 
console.log(foo(10)) 

该示例声明了一个 lambda 表达式函数。该函数返回 10 和传递的参数之和。

成功执行上述代码后将显示以下输出。

20

拉姆达声明

它是指向代码块的匿名函数声明。当函数体跨越多行时使用此语法。以下是相同的语法。

( [param1, parma2,…param n] )=> {       
   //code block 
}

示例 - Lambda 语句

var msg = ()=> { 
   console.log("function invoked") 
} 
msg() 

返回函数的引用并将其存储在变量 msg 中。成功执行上述代码后将显示以下输出。

function  invoked 

句法变化

单个参数的可选括号。

var msg = x=> { 
   console.log(x) 
} 
msg(10)

单个语句的可选大括号。空括号表示没有参数。

var disp = ()=>console.log("Hello World") 
disp();

函数表达式和函数声明

函数表达式和函数声明不是同义词。与函数表达式不同，函数声明由函数名称绑定。

两者之间的根本区别在于，函数声明在执行之前被解析。另一方面