ES6 - 快速指南

ES6 - Overview

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的实现包括以下新功能 -

Support for constants
Block Scope
箭头功能
扩展参数处理
模板文字
扩展文字
增强的对象属性
De-structuring Assignment
Modules
Classes
Iterators
Generators
Collections
各种类的新内置方法
Promises

ES6 - Environment

在本章中，我们将讨论为ES6设置环境。

本地环境设置 (Local Environment Setup)

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

文本编辑器

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

Installing Node.js

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

Installation on Windows

下载并运行Node的.msi installer

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

在Mac OS X上安装

要在OS X上安装node.js，您可以下载预编译的二进制包，这样可以轻松安装。前往www.nodejs.org并单击安装按钮下载最新的软件包。

按照安装向导的说明从.dmg安装软件包，安装向导将同时安装node和npm 。 npm是Node Package Manager，它便于为Node.js安装其他软件包。

Linux安装 (Installation on Linux)

在安装Node.js和npm之前，您需要安装许多dependencies 。

Ruby和GCC 。您需要Ruby 1.8.6或更高版本以及GCC 4.2或更高版本
Homebrew. Homebrew是一个最初用于Mac的软件包管理器，但它已被Linux移植到Linux上。您可以在http://brew.sh/上了解有关Homebrew的更多信息。

集成开发环境（IDE）支持

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

Visual Studio代码

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

在Windows上安装

下载适用于Windows的Visual Studio代码。

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

以下是IDE的屏幕截图。

您可以通过右键单击文件→在命令提示符下打开来直接遍历文件的路径。同样，“ Reveal in Explorer显示”选项会在文件Reveal in Explorer显示该文件。

在Mac OS X上安装

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

在Linux上安装

有关Visual Studio Code的Linux特定安装指南，请访问https://code.visualstudio.com/Docs/editor/setup.

Brackets

Brackets是由Adobe Systems创建的用于Web开发的免费开源编辑器。它适用于Linux，Windows和Mac OS X.Brackets可在http://brackets.io 。

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

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

你们都准备好了!!!

ES6 - Syntax

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

JavaScript程序可以由 -

Variables - 表示可以存储程序值的命名内存块。
Literals - 表示常数/固定值。
Operators - 定义如何处理操作数的符号。
Keywords - 在语言环境中具有特殊含义的词。

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

break	as	any	Switch
case	if	throw	Else
var	number	string	Get
module	type	instanceof	Typeof
finally	for	enum	Export
while	void	this	New
null	super	Catch	let
static	return	True	False

Modules - 表示可以跨不同程序/脚本重用的代码块。
Comments - 用于提高代码可读性。这些被JavaScript引擎忽略。
Identifiers - 这些是给变量，函数等程序中的元素赋予的名称。标识符的规则是 -
- 标识符可以包括字符和数字。但是，标识符不能以数字开头。
- 除下划线（_）或美元符号（$）外，标识符不能包含特殊符号。
- 标识符不能是关键字。它们必须是独一无二的
- 标识符区分大小写。标识符不能包含空格。

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

有效标识符的示例	无效标识符的示例
名字名字 NUM1 $结果	瓦尔＃名字名字 1NUMBER

有效标识符的示例

无效标识符的示例

名字

NUM1

$结果

瓦尔＃

名字

1NUMBER

空白和换行

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

JavaScript区分大小写

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

分号是可选的

每行指令都称为statement 。分号在JavaScript中是可选的。

例子 (Example)

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

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

JavaScript中的评论

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

JavaScript支持以下类型的注释 -

Single-line comments (//) - //和行尾之间的任何文本都被视为注释。
Multi-line comments (/* */) - 这些注释可能跨越多行。

例子 (Example)

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

您的第一个JavaScript代码

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

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

该计划可分析为 -

第1行通过名称消息声明变量。变量是一种在程序中存储值的机制。
第2行将变量的值打印到提示符。这里，控制台指的是终端窗口。函数log（）用于在屏幕上显示文本。

执行守则

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

Step 1 - 将文件另存为Test.js.
Step 2 - 右键单击Visual Studio代码的project-explorer窗口中的working files选项下的Test.js文件。
Step 3 - 选择“在命令提示符下打开”选项。
Step 4 - 在Node的终端窗口中键入以下命令。

node Test.js

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

Hello World

Node.js和JS/ES6

ECMAScript 2015（ES6）功能分为三组 -

For Shipping - 这些是V8认为稳定的功能。
Staged Features - 这些功能几乎已完成，但V8团队认为不稳定。
In Progress - 这些功能仅用于测试目的。

第一类功能完全受支持，默认情况下由节点打开。分阶段功能需要运行时 - 和谐标志才能执行。

可以在此处找到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和Hoisting

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

可变提升和功能提升将在后续章节中介绍。

ES6 - Variables

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

标识符不能是关键字。
标识符可以包含字母和数字。
标识符不能包含空格和特殊字符，但下划线（_）和美元（$）符号除外。
变量名称不能以数字开头。

键入语法

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

//Declaration using var keyword 
var  variable_name

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

使用let。
使用const。

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

用于声明和初始化变量的传统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会自动处理它。此功能称为dynamic typing 。

JavaScriptVariable Scope

变量的范围是程序中定义它的区域。传统上，JavaScript只定义了两个范围 - 全局和本地。

Global Scope - 可以从JavaScript代码的任何部分访问具有全局范围的变量。
Local Scope - 具有Local Scope的变量可以在声明它的函数中访问。

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

以下示例通过名称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定义了一个新的变量范围 - 块范围。

允许和阻止范围

块作用域限制变量对声明它的块的访问。 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关键字在块中重新声明它。当在内部块外部访问变量时，将打印本地作用域变量的值，而在内部块中引用块作用域变量。

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

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

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

示例:let v/s var

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

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

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

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

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

常数

const声明创建对值的只读引用。它并不意味着它拥有的值是不可变的，只是无法重新分配变量标识符。常量是块范围的，非常类似于使用let语句定义的变量。常量的值不能通过重新赋值而改变，并且不能重新声明。

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

常量不能重新赋值。
常量不能重新声明。
常量需要初始化程序。这意味着必须在声明期间初始化常量。
赋给const变量的值是不可变的。

例子 (Example)

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

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

ES6和可变Hoisting

用var声明的变量的范围是它的当前执行上下文，它是封闭函数，或者对于在任何函数外部声明的变量，global。变量提升允许在JavaScript程序中使用变量，甚至在声明它之前。

以下示例更好地解释了这一概念。

示例:可变提升

var main = function() { 
   for(var x = 0;x<5;x++) { 
      console.log(x); 
   } 
   console.log("x can be accessed outside the block scope x value is :"+x); 
   console.log('x is hoisted to the function scope'); 
} 
main();

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

0
1
2
3
4
x can be accessed outside the block scope x value is :5
x is hoisted to the function scope

JavaScript引擎在内部将脚本表示为 -

var main = function() { 
   var x; // x is hoisted to function scope 
   for( x = 0;x<5;x++) { 
      console.log(x); 
   }  
   console.log("x can be accessed outside the block scope x value is :"+x); 
   console.log('x is hoisted to the function scope'); 
} 
 main();

Note - 提升的概念适用于变量声明但不适用于变量初始化。建议始终在其作用域的顶部（全局代码的顶部和函数代码的顶部）声明变量，以启用代码来解析变量的作用域。

ES6 - Operators

expression是一种特殊类型的语句，它计算为一个值。每个表达都由 -

Operands - 表示数据。
Operator - 定义如何处理操作数以生成值。

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

算术运算符 (Arithmetic Operators)

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

显示示例

操作者	功能	例
+	Addition 返回操作数的总和。	a + b是15
-	Subtraction 返回值的差异。	a-b is 5
*	Multiplication 返回值的乘积。	a * b是50
/	Division 执行除法运算并返回商。	a/b是2
%	Modulus 执行除法并返回余数。	a%b is 0
++	Increment 将变量的值增加1。	a ++是11
--	Decrement 将变量的值减1。	a-- is 9

关系运算符 (Relational Operators)

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

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

显示示例

运算符	描述	例
>	Greater than	（A> B）是假的
<	Lesser than	(A < B) 为真
>=	大于或等于	（A> = B）为假
<=	小于或等于	（A <= B）为真
==	Equality	（A == B）是假的
!=	not equal to	（A！= B）是真的

逻辑运算符 (Logical Operators)

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

显示示例。

运算符	描述	例
&&	And 仅当指定的所有表达式都返回true时，运算符才返回true。	（A> 10 && B> 10）是假的
\|\|	Or 如果指定的至少一个表达式返回true，则运算符返回true。	（A> 10 \|\| B> 10）是真的
!	Not 运算符返回表达式结果的反函数。例如:！（7> 5）返回false。	！（A> 10）是真的

按位运算符 (Bitwise Operators)

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

显示示例。

运算符	用法	描述
Bitwise AND	a＆b	返回每个位位置的一个，两个操作数的相应位为1
Bitwise OR	一个\| b	在每个位的位置返回一个，其中一个或两个操作数的相应位是1
Bitwise XOR	a ^{^} b	在每个位位置返回一个，其中任一个但不是两个操作数的相应位都是1
Bitwise NOT	~a	反转其操作数的位
Left shift	a << b	将二进制表示b（<32）位向左移位，从右移零
Sign-propagating right shift	a >> b	将二进制表示b（<32）位向右移位，丢弃移位的位
Zero-fill right shift	a >>> b	向左移位二进制表示b（<32）位，丢弃移位的位，并从左移位零

赋值操作符 (Assignment Operators)

下表总结了赋值运算符。

显示示例。

Sr.No	操作符和说明
1	= (Simple Assignment) 将值从右侧操作数分配给左侧操作数。 Example - C = A + B将A + B的值分配给C
2	+= (Add and Assignment) 它将右操作数添加到左操作数并将结果赋给左操作数。 Example - C + = A等于C = C + A.
3	-= (Subtract and Assignment) 它从左操作数中减去右操作数，并将结果赋给左操作数。 Example C- = A相当于C = C-A
4	= (Multiply and Assignment) 它将右操作数与左操作数相乘，并将结果赋给左操作数。 Example* C * = A等于C = C * A.
5	/= (Divide and Assignment) 它将左操作数与右操作数分开，并将结果赋给左操作数。

Note - 相同的逻辑适用于按位运算符，因此它们将变为“”=，“”=，“”=，＆=，| =和^ =。

混合操作符 (Miscellaneous Operators)

以下是一些杂项运算符。

The negation operator (-)

更改值的符号。以下程序是一个相同的例子。

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

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

Conditional Operator (?)

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

Test ? expr1 : expr2

Where,

Test - 指条件表达式

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

expr2 - 如果条件为false，则返回值

Example

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

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

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

non-positive

类型操作符

类型运算符

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

类型	由typeof返回的字符串
Number	"number"
String	"string"
Boolean	"boolean"
Object	"object"

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

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

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

number

ES6 - Decision Making

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

JavaScript中的条件结构分类在下表中。

Sr.No	声明和说明
1	if语句 'if'语句由一个布尔表达式后跟一个或多个语句组成。
2	if ... else Statement 'if'语句后面可以跟一个可选的'else'语句，该语句在布尔表达式为false时执行。
3	else ..如果梯形图/嵌套if语句否则......如果梯形图可用于测试多个条件。以下是相同的语法。
4	switch…case 语句 switch语句计算表达式，将表达式的值与case子句匹配，并执行与该case相关的语句。

ES6 - Loops

有时，某些指令需要重复执行。循环是一种理想的方法。循环表示必须重复的一组指令。在循环的上下文中，重复被称为iteration 。

下图说明了循环的分类 -

确定循环

迭代次数是确定/固定的definite loop称为definite loop 。 'for循环'是一个definite loop的实现。

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

Sr.No	确定的循环和描述
1	'for'循环 for循环执行代码块指定的次数。
2	for ... in循环 for循环执行代码块指定的次数。
3	for ... for循环 for循环用于迭代迭代而不是对象文字。

无限循环

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

可以使用以下方式实现无限循环:

Sr.No	无限循环和描述
1	while循环每次指定的条件求值为true时，while循环都会执行指令。
2	do ... while循环 do ... while循环类似于while循环，只是do ... while循环不会在第一次循环执行时评估条件。

循环控制语句

Sr.No	循环控制语句和描述
1	The break statement break语句用于将控件从构造中取出。
2	The continue statement continue语句跳过当前迭代中的后续语句，并将控制权带回循环的开头。

使用标签来控制流量

label只是一个标识符，后跟冒号（:)，应用于语句或代码块。标签可以与break一起使用并continue更精确地控制流量。

'continue'或'break'语句与其标签名称之间不允许换行。此外，标签名称和关联循环之间不应该有任何其他语句

Sr.No	标签和说明
1	标签与休息标签可以与断点一起使用并继续更精确地控制流量。
2	带继续的标签 'continue'或'break'语句与其标签名称之间不允许换行。

ES6 - 函数

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

function function_name() { 
   // function body 
}

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

function_name()

示例:简单的函数定义

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

该示例定义了函数test（）。一对分隔符（{}）定义函数体。它也被称为function scope 。必须调用函数来强制执行。

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

function called

函数的分类 (Classification of Functions)

功能可以分类为Returning和Parameterized功能。

Returning Functions

函数也可以将值与控制一起返回给调用者。这些函数称为返回函数。

以下是返回函数的语法。

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

返回函数必须以return语句结束。
函数最多可以返回一个值。换句话说，每个函数只能有一个return语句。
return语句应该是函数中的最后一个语句。

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

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

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

hello world!!!

参数化功能 (Parameterized Functions)

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

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

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

Example − Parameterized Function

该示例定义了一个函数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。成功执行上述代码后，将显示以下输出。

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

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

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

休息参数

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

要声明rest参数，参数名称前缀为三个句点，称为spread运算符。以下示例说明了相同的内容。

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

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

0 
1 
3

Note - Rest参数应该是函数参数列表中的最后一个。

匿名函数

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

可以为变量分配匿名函数。这种表达式称为function expression 。

以下是匿名函数的语法。

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

Example − Anonymous Function

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

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

hello

Example − Anonymous Parameterized Function

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（）构造函数不传递任何指定其创建的函数名称的参数。

Example − Function Constructor

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函数 (Recursion and JavaScript Functions)

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

Example − Recursion

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

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

Example − Anonymous Recursive Function

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

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

Hello World

Lambda 函数

Lambda是指编程中的匿名函数。 Lambda函数是表示匿名函数的简明机制。这些函数也称为Arrow functions 。

Lambda函数 - 解剖学

Lambda函数有3个部分 -

Parameters - 函数可以选择具有参数。
fat arrow notation/lambda notation （=“）:它也被称为转到运算符。
Statements - 表示函数的指令集。

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

Lambda表达

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

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

Example − Lambda Expression

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

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

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

Lambda 语句

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

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

Example − Lambda Statement

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();

功能表达和功能声明

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

两者之间的根本区别在于，函数声明在执行之前被解析。另一方面，仅在脚本引擎在执行期间遇到函数表达式时才解析函数表达式。

当JavaScript解析器在主代码流中看到一个函数时，它会假定函数声明。当函数作为语句的一部分出现时，它是一个函数表达式。

功能Hoisting

与变量一样，函数也可以悬挂。与变量不同，函数声明在提升时，提升函数定义而不是仅仅提升函数的名称。

以下代码片段说明了JavaScript中的函数提升。

hoist_function();  
function hoist_function() { 
   console.log("foo"); 
}

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

foo

但是，函数表达式不能被提升。以下代码段说明了相同的内容。

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

立即调用函数表达式

立即调用函数表达式（IIFE）可用于避免块内的可变提升。它允许公共访问方法，同时保留函数中定义的变量的隐私。此模式称为自执行匿名函数。以下两个例子更好地解释了这个概念。

实施例1:IIFE

var main = function() { 
   var loop = function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

实施例2:IIFE

var main = function() { 
   (function() { 
      for(var x = 0;x<5;x++) { 
         console.log(x); 
      } 
   })(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

两个示例都将呈现以下输出。

0 
1 
2 
3 
4  
Uncaught ReferenceError: x is not define

生成器函数 (Generator Functions)

当调用普通函数时，控件依赖于被调用的函数，直到它返回为止。使用ES6中的生成器，调用函数现在可以控制被调用函数的执行。发电机就像一个常规功能，除了 -

该函数可以在任何时候将控制权交还给调用者。
当您调用生成器时，它不会立即运行。相反，你得到一个迭代器。该函数在调用迭代器的下一个方法时运行。

生成器用函数关键字后缀用星号表示; 否则，它们的语法与常规函数相同。

以下示例说明了相同的内容。

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
}

生成器启用调用者和被调用函数之间的双向通信。这是通过使用yield关键字完成的。

考虑以下示例 -

function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

发电机功能的顺序如下 -

发电机暂停开始; 迭代器被返回。
it.next（）产生“你叫什么名字”。发电机暂停。这是由yield关键字完成的。
调用it.next（“Ethan”）将值Ethan分配给变量名称并产生“你最喜欢的运动是什么？”同样，生成器暂停。
调用it.next（“Cricket”）将值Cricket赋值给变量sport并执行后续的return语句。

因此，上述代码的输出将是 -

{ 
   value: 'What is your name?', done: false 
} 
{ 
   value: 'What is your favorite sport?', done: false 
} 
{ 
   value: 'Ethan\'s favorite sport is Cricket', done: true 
}

Note - 无法使用箭头函数表示生成器函数。

ES6 - Events

JavaScript旨在为您的网页添加交互性。 JavaScript使用使用事件的机制来完成此操作。 Events是文档对象模型（DOM）级别3的一部分，每个HTML元素都包含一组可以触发JavaScript代码的事件。

事件是软件识别的操作或事件。它可以由用户或系统触发。一些常见的事件示例包括用户单击按钮，加载网页，单击超链接等。以下是一些常见的HTML事件。

事件处理程序

在发生事件时，应用程序执行一组相关任务。实现此目的的代码块称为eventhandler 。每个HTML元素都有一组与之关联的事件。我们可以使用事件处理程序定义如何在JavaScript中处理事件。

onclick事件类型

这是用户单击鼠标左键时最常用的事件类型。您可以针对此事件类型进行验证，警告等。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

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

新页面打开

onsubmitEvent类型

onsubmit是您尝试提交表单时发生的事件。您可以针对此事件类型进行表单验证。

以下示例显示如何使用onsubmit 。这里我们在将表单数据提交给Web服务器之前调用validate（）函数。如果validate（）函数返回true，则表单将被提交，否则将不提交数据。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript">  
         function validation() {  
            all validation goes here  
            .........  
            return either true or false  
         }   
      </script> 
   </head> 
   <body> 
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> 
         .......  
         <input type = "submit" value = "Submit" /> 
      </form> 
   </body> 
</html>

onmouseover和onmouseout

这两种事件类型将帮助您创建图像甚至文本的精美效果。将鼠标悬停在任何元素上时触发onmouseover事件，当您将鼠标从该元素移出时触发onmouseover事件。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function over() {  
            document.write ("Mouse Over");  
         }  
         function out() {  
            document.write ("Mouse Out");  
         }  
      </script> 
   </head> 
   <body> 
      <p>Bring your mouse inside the division to see the result:</p> 
      <div onmouseover = "over()" onmouseout = "out()"> 
         <h2> This is inside the division </h2> 
      </div> 
   </body> 
</html>

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

新页面打开

HTML 5标准事件

下表中列出了标准HTML 5事件供您参考。该脚本指示要针对该事件执行的JavaScript函数。

属性	值	描述
offline	script	文档脱机时触发
onabort	script	触发中止事件
onafterprint	script	打印文档后触发
onbeforeonload	script	在文档加载之前触发
onbeforeprint	script	打印文档前触发
onblur	script	窗口失去焦点时触发
oncanplay	script	媒体可以开始播放时触发，但可能必须停止缓冲
oncanplaythrough	script	当媒体可以播放到最后时触发，而不停止缓冲
onchange	script	元素更改时触发
onclick	script	单击鼠标时触发
oncontextmenu	script	触发上下文菜单时触发
ondblclick	script	双击鼠标触发
ondrag	script	拖动元素时触发
ondragend	script	拖动操作结束时触发
ondragenter	script	将元素拖动到有效放置目标时触发
ondragleave	script	元素离开有效放置目标时触发
ondragover	script	在有效放置目标上拖动元素时触发
ondragstart	script	在拖动操作开始时触发
ondrop	script	拖动拖动元素时触发
ondurationchange	script	更改介质长度时触发
onemptied	script	媒体资源元素突然变空时触发
onended	script	媒体到达结束时触发
onerror	script	发生错误时触发
onfocus	script	窗口获得焦点时触发
onformchange	script	表单更改时触发
onforminput	script	表单获取用户输入时触发
onhaschange	script	文档更改时触发
oninput	script	元素获取用户输入时触发
oninvalid	script	元素无效时触发
onkeydown	script	按下某个键时触发
onkeypress	script	按下并释放按键时触发
onkeyup	script	释放密钥时触发
onload	script	文档加载时触发
onloadeddata	script	加载媒体数据时触发
onloadedmetadata	script	加载媒体元素的持续时间和其他媒体数据时触发
onloadstart	script	浏览器开始加载媒体数据时触发
onmessage	script	触发消息时触发
onmousedown	script	按下鼠标按钮时触发
onmousemove	script	鼠标指针移动时触发
onmouseout	script	鼠标指针移出元素时触发
onmouseover	script	鼠标指针在元素上移动时触发
onmouseup	script	释放鼠标按钮时触发
onmousewheel	script	旋转鼠标滚轮时触发
onoffline	script	文档脱机时触发
ononline	script	文档联机时触发
onpagehide	script	隐藏窗口时触发
onpageshow	script	窗口变为可见时触发
onpause	script	媒体数据暂停时触发
onplay	script	媒体数据开始播放时触发
onplaying	script	媒体数据开始播放时触发
onpopstate	script	窗口历史记录更改时触发
onprogress	script	浏览器获取媒体数据时触发
onratechange	script	媒体数据的播放速率发生变化时触发
onreadystatechange	script	准备状态改变时触发
onredo	script	文档执行重做时触发
onresize	script	调整窗口大小时触发
onscroll	script	滚动元素的滚动条时触发
onseeked	script	当媒体元素的搜索属性不再为真时触发，并且搜索已经结束
onseeking	script	当媒体元素的搜索属性为真时触发，并且搜索已经开始
onselect	script	选择元素时触发
onstalled	script	在获取媒体数据时出现错误时触发
onstorage	script	文档加载时触发
onsubmit	script	提交表单时触发
onsuspend	script	浏览器获取媒体数据时触发，但在获取整个媒体文件之前停止
ontimeupdate	script	当媒体改变其播放位置时触发
onundo	script	文档执行撤消时触发
onunload	script	用户离开文档时触发
onvolumechange	script	当媒体更改音量时触发，当音量设置为“静音”时触发
onwaiting	script	媒体停止播放时触发，但预计会恢复

ES6 - Cookies

Web浏览器和服务器使用HTTP协议进行通信。 HTTP是无状态协议，即它不会在客户端发出的多个请求中维护客户端的数据。客户端和服务器之间的完整请求 - 响应周期被定义为session 。 Cookie是浏览器用于存储与用户会话相关的数据的默认机制。

它是如何工作的 (How It Works?)

您的服务器以cookie的形式向访问者的浏览器发送一些数据。浏览器可以接受cookie。如果是，则将其作为纯文本记录存储在访问者的硬盘上。现在，当访问者到达您网站上的另一个页面时，浏览器会将相同的cookie发送到服务器进行检索。检索后，您的服务器会知道/记住之前存储的内容。

Cookie是5个可变长度字段的纯文本数据记录。

Expires - Cookie过期的日期。如果这是空白，则访问者退出浏览器时cookie将过期。
Domain - 您网站的域名。
Path - 设置cookie的目录或网页的路径。如果要从任何目录或页面检索cookie，这可能是空白的。
Secure - 如果此字段包含单词“secure”，则只能使用安全服务器检索cookie。如果此字段为空，则不存在此类限制。
Name = Value - 以键值对的形式设置和检索Cookie。

Cookie最初是为CGI编程而设计的。 cookie中包含的数据在Web浏览器和Web服务器之间自动传输，因此服务器上的CGI脚本可以读取和写入存储在客户端的cookie值。

JavaScript还可以使用Document对象的cookie属性来操作cookie。 JavaScript可以读取，创建，修改和删除适用于当前网页的cookie。

存储Cookie

创建cookie的最简单方法是为document.cookie对象分配一个字符串值，如下所示。

"document.cookie = "key1 = value1; key2 = value2; expires = date";

这里，'expires'属性是可选的。如果您为此属性提供有效的日期或时间，则cookie将在给定的日期或时间到期，此后，cookie的值将无法访问。

Note - Cookie值可能不包括分号，逗号或空格。因此，您可能希望使用JavaScript escape()函数对值进行编码，然后将其存储在cookie中。如果这样做，您还必须在读取cookie值时使用相应的unescape()函数。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript">  
         function WriteCookie() {  
            if( document.myform.customer.value == "" ){  
               alert ("Enter some value!");  
               return;  
            }  
            cookievalue =  escape(document.myform.customer.value) + ";";  
            document.cookie = "name = " + cookievalue;  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 
   <body> 
      <form name = "myform" action = ""> 
         Enter name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

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

新页面打开

现在你的机器有一个名为name的cookie。您可以使用以逗号分隔的多个key = value对设置多个cookie。

阅读Cookies

读取cookie就像写一个cookie一样简单，因为document.cookie对象的值是cookie。因此，只要您想访问cookie，就可以使用此字符串。 document.cookie字符串将保留由分号分隔的名称=值对的列表，其中名称是cookie的名称，值是其字符串值。

您可以使用字符串的split()函数将字符串分解为键和值，如以下示例所示。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function ReadCookie() {  
            var allcookies  =  document.cookie;  
            document.write ("All Cookies : " + allcookies ); 
         } 
         // Get all the cookies pairs in an array  
         cookiearray = allcookies.split(';');  
         // Now take key value pair out of this array  
         for(var i = 0; i<cookiearray.length; i++) {  
            name  =  cookiearray[i].split('=')[0];  
            value = cookiearray[i].split('=')[1];  
            document.write ("Key is : " + name + " and Value is : " + value); 
         }  
      </script> 
   </head> 
   <body> 
      <form name = "myform" action = ""> 
         <p> click the following button and see the result:</p> 
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/> 
      </form> 
   </body> 
</html>

Note - 这里，length是Array类的一种方法，它返回数组的长度。

您的计算机上可能已设置了一些其他Cookie。上面的代码将显示您计算机上设置的所有Cookie。

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

新页面打开

设置Cookie到期日

您可以通过设置到期日期并在Cookie中保存到期日期，将Cookie的有效期延长到当前浏览器会话之外。这可以通过将'expires'属性设置为日期和时间来完成。以下示例说明如何将Cookie的到期日期延长1个月。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() + 1 );  
            cookievalue = escape(document.myform.customer.value) + ";"  
            document.cookie = "name = " + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         } 
      </script> 
   </head> 
   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

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

新页面打开

删除Cookie

有时您会想要删除cookie，以便随后尝试读取cookie不会返回任何内容。要执行此操作，您只需将到期日期设置为过去的时间。以下示例说明如何通过将其到期日期设置为当前日期之后一个月来删除cookie。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() - 1 );  
            cookievalue = escape(document.myform.customer.value) + ";" 
            document.cookie = "name=" + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 
   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

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

新页面打开

ES6 - Page Redirect

Redirect是一种将用户和搜索引擎发送到与其最初请求的URL不同的URL的方法。页面重定向是一种自动将网页重定向到另一个网页的方法。重定向页面通常位于同一网站上，或者可以位于不同的网站或Web服务器上。

JavaScript页面重定向

window.location and window.location.href

在JavaScript中，您可以使用许多方法将网页重定向到另一个网页。几乎所有方法都与window.location对象有关，它是Window对象的一个属性。它可用于获取当前URL地址（Web地址）并将浏览器重定向到新页面。两种用法在行为方面都是相同的。 window.location返回一个对象。如果未设置.href ，则window.location默认更改参数.href 。

例子 (Example)

<!DOCTYPE html> 
<html> 
   <head> 
      <script> 
         function newLocation() { 
            window.location = "http://www.xyz.com"; 
         } 
      </script> 
   </head> 
   <body> 
      <input type = "button" value = "Go to new location" onclick = "newLocation()"> 
   </body> 
</html>

location.replace()

另一个最常用的方法是window.location对象的replace()方法，它将用新的方法替换当前文档。在replace（）方法中，您可以将新URL传递给replace（）方法，它将执行HTTP重定向。

以下是相同的语法。

window.location.replace("http://www.abc.com

location.assign()

location.assign（）方法在浏览器窗口中加载新文档。

以下是相同的语法。

window.location.assign("http://www.abc.org");

assign() vs. replace()

assign（）和replace（）方法之间的区别在于location.replace（）方法从文档历史记录中删除当前URL，因此无法导航回原始文档。在这种情况下，您无法使用浏览器“后退”按钮。如果要避免这种情况，则应使用location.assign（）方法，因为它在浏览器中加载新文档。

location.reload()

location.reload（）方法在浏览器窗口中重新加载当前文档。

以下是相同的语法。

window.location.reload("http://www.yahoo.com");

window.navigate()

window.navigate（）方法类似于为window.location.href属性分配新值。因为它仅在MS Internet Explorer中可用，所以您应该避免在跨浏览器开发中使用它。

以下是相同的语法。

window.navigate("http://www.abc.com");

重定向和搜索引擎优化

如果您想通知搜索引擎（SEO）有关您的URL转发，您应该将rel =“canonical”元标记添加到您的网站主题部分，因为搜索引擎不会分析JavaScript来检查重定向。

以下是相同的语法。

<link rel = "canonical" href = "http://abc.com/" />

ES6 - Dialog Boxes

JavaScript支持三种重要类型的对话框。这些对话框可用于提升和警告，或确认任何输入或从用户那里获得一种输入。在这里，我们将逐一讨论每个对话框。

警报对话框

警报对话框主要用于向用户发送警告消息。例如，如果一个输入字段需要输入一些文本但用户不提供任何输入，那么作为验证的一部分，您可以使用警告框发送警告消息。

尽管如此，警报框仍可用于更友好的消息。警报框只提供一个“确定”按钮来选择并继续。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function Warn() {  
            alert ("This is a warning message!");  
            document.write ("This is a warning message!");  
         } 
      </script> 
   </head> 
   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "Warn();" /> 
      </form> 
   </body> 
</html>

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

新页面打开

确认对话框

确认对话框主要用于征得用户对任何选项的同意。它显示一个带有两个按钮的对话框:确定和取消。

如果用户单击“确定”按钮，则窗口方法confirm()将返回true。如果用户单击“取消”按钮，则confirm（）返回false。您可以使用如下确认对话框。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getConfirmation(){  
            var retVal = confirm("Do you want to continue ?");  
            if( retVal == true ){  
               document.write ("User wants to continue!");  
               return true;  
            } else {  
               Document.write ("User does not want to continue!");  
               return false;  
            }  
         }  
      </script> 
   </head> 
   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" /> 
      </form> 
   </body> 
</html>

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

新页面打开

提示对话框

当您想要弹出文本框以获取用户输入时，提示对话框非常有用。因此，它使您能够与用户进行交互。用户需要填写该字段，然后单击“确定”。

此对话框使用名为prompt()的方法显示，该方法采用两个参数:（i）要在文本框中显示的标签和（ii）要在文本框中显示的默认字符串。

此对话框有两个按钮:确定和取消。如果用户单击“确定”按钮，则窗口方法提示符（）将从文本框中返回输入的值。如果用户单击“取消”按钮，则窗口方法prompt（）将返回null。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getValue(){  
            var retVal = prompt("Enter your name : ", "your name here");  
            document.write("You have entered : " + retVal);  
         }  
      </script> 
   </head> 
   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getValue();" /> 
      </form> 
   </body> 
</html>

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

新页面打开

ES6 - Void Keyword

void是JavaScript中的一个重要关键字，可以用作在单个操作数之前出现的一元运算符，该操作数可以是任何类型。此运算符指定要计算的表达式而不返回值。运算符计算给定的表达式，然后返回undefined。

以下是相同的语法。

void expression

无效并立即调用函数表达式

使用立即调用的函数表达式时，void可用于强制将function关键字视为表达式而不是声明。

考虑以下示例 -

void function iife_void() { 
   var msg = function () {console.log("hello world")}; 
   msg(); 
}();

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

hello world

Void和JavaScript URI

JavaScript: URI是HTML页面中常见的语法。浏览器评估URI并使用返回的值替换页面的内容。除非返回的值未定义，否则这是真的。此运算符的最常见用法是在客户端JavaScript: URL ，它允许您在没有浏览器显示已计算表达式的值的情况下为其副作用计算表达式。

请考虑以下代码段 -

<a href = "javascript:void(javascript:alert('hello world!!'))"> 
  Click here to do nothing 
</a> 
<br/><br/><br/> 
<a href = "javascript:alert('hello');">Click here for an alert</a>

将上述文件另存为HTML文档，然后在浏览器中将其打开。单击时，第一个超链接评估javascript:alert（“hello”）并传递给void（）运算符。但是，由于void运算符返回undefined，因此页面上不会显示任何结果。

另一方面，单击时的第二个超链接显示警告对话框。

ES6 - Page Printing

很多时候，您希望在网页上放置一个按钮，通过实际的打印机打印该网页的内容。 JavaScript帮助您使用window对象的print函数实现此功能。

JavaScript打印函数window.print()在执行时打印当前网页。您可以使用onclick事件直接调用此函数，如以下示例所示。

例子 (Example)

<html> 
   <body> 
      <form> 
         <input type = "button" value = "Print" onclick = "window.print()"/> 
      </form> 
   </body> 
</html>

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

新页面打开

ES6 - Objects

JavaScript支持扩展数据类型。 JavaScript对象是定义自定义数据类型的好方法。

object是包含一组键值对的实例。与原始数据类型不同，对象可以表示多个或复杂的值，并且可以在其生命周期内进行更改。值可以是标量值或函数，甚至是其他对象的数组。

进一步讨论了定义对象的语法变体。

对象初始化器

与原始类型一样，对象具有文字语法: curly bracesv （{和}）。以下是定义对象的语法。

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

对象的内容称为properties （或成员），属性由name （或键）和value 。属性名称必须是字符串或符号，值可以是任何类型（包括其他对象）。

与所有JavaScript变量一样，对象名称（可以是普通变量）和属性名称都区分大小写。您可以使用简单的点表示法访问对象的属性。

以下是访问对象属性的语法。

objectName.propertyName

示例:对象初始化程序

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

上面的例子定义了一个对象人。该对象有三个属性。第三个属性是指一个函数。

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

Tom 
Hanks 
Hello!!

在ES6中，指定与属性名称匹配的属性值，可以省略属性值。

例子 (Example)

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

上面的代码片段定义了一个对象baz 。该对象具有属性foo 。这里省略了属性值，因为ES6隐式地将变量foo的值赋给对象的键foo。

以下是上述代码的ES5等价物。

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

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

bar

使用这种简写语法，JS引擎在包含范围内查找具有相同名称的变量。如果找到，则将该变量的值分配给该属性。如果未找到，则抛出参考错误。

The Object() Constructor

JavaScript提供了一个名为Object()的特殊构造函数来构建对象。 new运算符用于创建对象的实例。要创建对象，new运算符后跟构造方法。

以下是定义对象的语法。

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

以下是访问属性的语法。

Object_name.property_key                    
OR              
Object_name["property_key"]

例子 (Example)

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  
console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

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

Ford 
Mustang 
1987

未定义对象的未分配属性。

例子 (Example)

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

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

undefined

Note - 对象属性名称可以是任何有效的JavaScript字符串，也可以是可以转换为字符串的任何内容，包括空字符串。但是，任何不是有效JavaScript标识符的属性名称（例如，具有空格或连字符的属性名称，或以数字开头的属性名称）只能使用方括号表示法访问。

也可以使用存储在变量中的字符串值来访问属性。换句话说，对象的属性键可以是动态值。例如:一个变量。以下示例说明了所述概念。

例子 (Example)

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

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

Ford

构造函数

可以使用以下两个步骤创建对象 -

Step 1 - 通过编写构造函数来定义对象类型。

以下是相同的语法。

function function_name() { 
   this.property_name = value 
}

'this'关键字引用当前正在使用的对象并定义对象的属性。

Step 2 - 使用新语法创建对象的实例。

var Object_name= new function_name() 
//Access the property value  
Object_name.property_name

new关键字调用函数构造函数并初始化函数的属性键。

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

上面的示例使用函数构造函数来定义对象。

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

Ford 
F123

始终可以将新属性添加到先前定义的对象中。例如，请考虑以下代码段 -

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

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

Ford 
F123

Object.create方法

也可以使用Object.create()方法创建对象。它允许您为所需的对象创建原型，而无需定义构造函数。

例子 (Example)

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  
// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

上面的示例定义了一个对象-roles并设置了属性的默认值。创建两个新实例，覆盖对象的默认属性值。

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

Admin 
Guest

The Object.assign() Function

Object.assign()方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

以下是相同的语法。

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

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

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

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

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note - 与复制对象不同，当合并对象时，较大的对象不会维护属性的新副本。而是它保存对原始对象中包含的属性的引用。以下示例解释了此概念。

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

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

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

删除属性

您可以使用delete运算符删除属性。以下代码显示了如何删除属性。

例子 (Example)

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 
// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

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

false

代码段从对象中删除属性。该示例打印为false，因为in运算符未在对象中找到该属性。

比较对象

在JavaScript中，对象是引用类型。两个不同的对象永远不会相等，即使它们具有相同的属性。这是因为，它们指向完全不同的内存地址。只有那些共享公共引用的对象在比较时才会生成true。

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

在上面的示例中， val1和val2是两个不同的对象，它们引用两个不同的内存地址。因此，在进行相等性比较时，运算符将返回false。

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  
console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

在上面的示例中，val1中的内容分配给val2，即val1中属性的引用与val2共享。由于对象现在共享对属性的引用，因此对于引用两个不同内存地址的两个不同对象，相等运算符将返回true。因此，在进行相等性比较时，运算符将返回false。

Object De-structuring

破产一词是指破坏实体的结构。 JavaScript中的解构赋值语法可以将数组或对象中的数据提取到不同的变量中。以下示例说明了相同的内容。

例子 (Example)

var emp = { name: 'John', Id: 3 } 
var {name, Id} = emp 
console.log(name) 
console.log(Id)

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

John 
3

Note - 要启用解构，请在node as node – harmony_destructuring file_name执行该文件。

ES6 - Number

Number对象表示数字日期，可以是整数或浮点数。通常，您不需要担心Number对象，因为浏览器会自动将数字文字转换为数字类的实例。

以下是创建数字对象的语法。

var val = new Number(number);

在number的位置，如果你提供任何非数字参数，那么参数不能转换为number ，它返回NaN（非数字）。

数字属性

Sr.No	财产和描述
1	Number.EPSILON 两个可表示数字之间的最小间隔。
2	Number.MAX_SAFE_INTEGER JavaScript中的最大安全整数（2 ^{^} 53 - 1）。
3	Number.MAX_VALUE 最大的可表示数字。
4	MIN_SAFE_INTEGER JavaScript中的最小安全整数（ - （2 ^{^} 53 - 1））。
5	Number.MIN_VALUE 最小的正可表示数 - 即最接近零的正数（实际上不为零）
6	Number.Nan 特殊的“非数字”价值
7	Number.NEGATIVE_INFINITY 表示负无穷大的特殊值; 溢出后返回
8	Number.POSITIVE_INFINITY 表示无穷大的特殊值; 溢出后返回
9	Number.prototype 表示无穷大的特殊值; 溢出后返回

Number Methods

Sr.No	方法和描述
1	Number.isNaN() 确定传递的值是否为NaN。
2	Number.isFinite() 确定传递的值是否为有限数。
3	Number.isInteger() 确定传递的值是否为整数。
4	Number.isSafeInteger() 确定传递的值是否为安全整数（ - （253 - 1）和253 - 1之间的数字）
5	Number.parseFloat() 该值与全局对象的parseFloat（）相同
6	Number.parseInt() 该值与全局对象的parseInt（）相同

数字实例方法

Number对象仅包含作为每个对象定义一部分的默认方法。

Sr.No	实例方法和描述
1	toExponential() 返回表示指数表示法中的数字的字符串
2	toFixed() 返回表示定点表示法中的数字的字符串
3	toLocaleString() 返回具有此数字的语言敏感表示的字符串
4	toPrecision() 以定点或指数表示法返回表示指定精度的数字的字符串
5	toString() 返回表示指定基数（基数）中指定对象的字符串
6	valueOf() 返回指定对象的原始值。

二进制和八进制文字

在ES6之前，对于整数的二进制或八进制表示，最好的选择是将它们传递给带有基数的parseInt（）。在ES6中，您可以使用0b和0o前缀分别表示二进制和八进制整数文字。同样，要表示十六进制值，请使用0x前缀。

前缀可以用大写或小写写成。但是，建议坚持使用小写版本。

Example − Binary Representation

console.log(0b001) 
console.log(0b010) 
console.log(0b011) 
console.log(0b100)

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

Example − Octal Representation

console.log(0x010) 
console.log(0x100)

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

16
256

Example − Hexadecimal Representation

console.log(0x010) 
console.log(0x100)

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

16
256

ES6 - Boolean

Boolean对象表示两个值， "true"或"false" 。如果省略value参数或者为0，-0，null，false，NaN，undefined或空字符串（“”），则对象的初始值为false。

使用以下语法创建boolean object 。

var val = new Boolean(value);

布尔属性

以下是Boolean对象的属性列表。

Sr.No	财产和描述
1	constructor 返回对创建对象的Boolean函数的引用。
2	prototype prototype属性允许您向对象添加属性和方法。

布尔方法

以下是布尔对象及其描述的方法列表。

Sr.No	方法和描述
1	toSource() 返回包含Boolean对象源的字符串; 您可以使用此字符串来创建等效对象。
2	toString() 返回“true”或“false”的字符串，具体取决于对象的值。
3	valueOf() 返回Boolean对象的原始值。

ES6 - Strings

String对象允许您使用一系列字符; 它使用许多辅助方法包装JavaScript的字符串原始数据类型。

由于JavaScript自动在字符串基元和String对象之间进行转换，因此可以在字符串基元上调用String对象的任何辅助方法。

使用以下语法创建String对象。

var val = new String(string);

字符串参数是一系列已正确编码的字符。串。

字符串属性

以下是String对象及其描述的属性列表。

Sr.No	财产和描述
1	constructor 返回对创建对象的String函数的引用。
2	length 返回字符串的长度。
3	Prototype prototype属性允许您向对象添加属性和方法。

字符串的方法 (String Methods)

以下是String对象中可用方法的列表及其描述。

Sr.No	方法和描述
1	charAt() 返回指定索引处的字符。
2	charCodeAt() 返回一个数字，指示给定索引处字符的Unicode值。
3	concat() 合并两个字符串的文本并返回一个新字符串。
4	indexOf() 返回第一次出现的指定值的调用String对象中的索引，如果未找到，则返回-1。
5	lastIndexOf() 返回最后一次出现的指定值的调用String对象中的索引，如果未找到，则返回-1。
6	localeCompare() 返回一个数字，指示引用字符串是在排序顺序之前还是之后出现，或者与给定字符串相同。
7	match() 用于将正则表达式与字符串匹配。
8	replace() 用于查找正则表达式和字符串之间的匹配，并使用新的子字符串替换匹配的子字符串。
9	search() 执行搜索正则表达式与指定字符串之间的匹配项。
10	slice() 提取字符串的一部分并返回一个新字符串。
11	split() 通过将字符串分隔为子字符串将String对象拆分为字符串数组。
12	substr() 返回从指定位置开始通过指定字符数的字符串中的字符。
13	substring() 将两个索引之间的字符串中的字符返回到字符串中。
14	toLocaleLowerCase() 在尊重当前区域设置的同时，字符串中的字符将转换为小写字母。
15	toLocaleupperCase() 字符串中的字符在转换为当前语言环境时会转换为大写。
16	toLowerCase() 返回转换为小写的调用字符串值。
17	toString() 返回表示指定对象的字符串。
18	toUpperCase() 返回转换为大写的调用字符串值。
19	valueOf() 返回指定对象的原始值。

ES6 - New String Methods

以下是方法列表及其描述。

Sr.No	方法和描述
1	String.prototype.startsWith（searchString，position = 0）如果接收者以searchString开头，则返回true; 该位置允许您指定要检查的字符串的起始位置。
2	String.prototype.endsWith（searchString，endPosition = searchString.length）如果接收者以searchString开头，则返回true; 该位置允许您指定要检查的字符串的起始位置。
3	String.prototype.includes（searchString，position = 0）如果接收者包含searchString，则返回true; position允许您指定要搜索的字符串的开始位置。
4	String.prototype.repeat(count) 返回接收器，连续计数次数。

模板文字

Template literals是允许嵌入表达式的字符串文字。 Templatestrings字符串使用反向标记（``）而不是单引号或双引号。因此，模板字符串可以写成 -

var greeting = `Hello World!`;

字符串插值和模板文字

正如所示，模板字符串可以使用占位符来使用$ {}语法进行字符串替换。

Example 1

var name = "Brendan"; 
console.log('Hello, ${name}!');

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

Hello, Brendan!

Example 2: Template literals and expressions

var a = 10; 
var b = 10; 
console.log(`The sum of ${a} and ${b} is  ${a+b} `);

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

The sum of 10 and 10 is 20

Example 3: Template literals and function expression

function fn() { return "Hello World"; } 
console.log(`Message: ${fn()} !!`);

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

Message: Hello World !!

多行字符串和模板文字

模板字符串可以包含多行。

Example

var multiLine = ` 
   This is 
   a string 
   with multiple 
   lines`; 
console.log(multiLine)

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

This is 
a string 
with multiple 
line

String.raw()

ES6包含原始字符串的标记函数String.raw，其中反斜杠没有特殊含义。 String.raw使我们能够像在正则表达式文字中一样编写反斜杠。请考虑以下示例。

var text =`Hello \n World` 
console.log(text)  
var raw_text = String.raw`Hello \n World ` 
console.log(raw_text)

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

Hello 
World 
Hello \n World

String.fromCodePoint()

静态字符串。 fromCodePoint()方法返回使用指定的unicode代码点序列创建的字符串。如果传递了无效的代码点，该函数将抛出RangeError。

console.log(String.fromCodePoint(42))        
console.log(String.fromCodePoint(65, 90))

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

* 
AZ

ES6 - Arrays

使用变量来存储值会带来以下限制 -

变量本质上是标量。换句话说，变量声明一次只能包含一个。这意味着要在程序中存储n个值，将需要n个变量声明。因此，当需要存储更大的值集合时，使用变量是不可行的。
程序中的变量以随机顺序分配存储器，从而使得难以按其声明的顺序检索/读取值。

JavaScript引入了数组的概念来解决这个问题。

数组是值的同类集合。为简化起见，数组是相同数据类型的值的集合。它是用户定义的类型。

数组的特征

数组声明分配顺序内存块。
数组是静态的。这意味着一旦初始化的数组无法调整大小。
每个存储块表示一个数组元素。
数组元素由称为元素的下标/索引的唯一整数标识。
像变量一样的数组也应该在使用之前声明。
数组初始化是指填充数组元素。
可以更新或修改数组元素值，但不能删除它们。

声明和初始化数组

要在JavaScript中声明和初始化数组，请使用以下语法 -

var array_name; //declaration 
array_name = [val1,val2,valn..]   //initialization 
OR 
var array_name = [val1,val2…valn]

Note - 这对[]称为数组的维度。

例如，类似于: var numlist = [2,4,6,8]的声明将创建一个数组，如下图所示。

访问数组元素 (Accessing Array Elements)

后跟下标的数组名称用于引用数组元素。

以下是相同的语法。

array_name[subscript]

示例:简单数组

var alphas; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

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

1 
2

示例:单个语句声明和初始化

var nums = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

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

数组对象

也可以使用Array对象创建数组。 Array构造函数可以传递为 -

表示数组或大小的数值。
逗号分隔值列表。

以下示例使用此方法创建数组。

例子 (Example)

var arr_names = new Array(4)  
for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

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

示例:Array构造函数接受以逗号分隔的值

var names = new Array("Mary","Tom","Jack","Jill") 
for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

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

Mary 
Tom 
Jack 
Jill

数组方法

以下是Array对象的方法列表及其描述。

Sr.No	方法和描述
1	concat() 返回由此数组组成的新数组，该数组与其他数组和/或值连接
2	every() 如果此数组中的每个元素都满足提供的测试函数，则返回true。
3	filter() 创建一个新数组，其中包含此数组的所有元素，其中提供的过滤函数返回true。
4	forEach() 为数组中的每个元素调用一个函数。
5	indexOf() 返回数组中元素的第一个（最小）索引，该索引等于指定的值，如果没有找到，则返回-1。
6	join() 将数组的所有元素连接成一个字符串。
7	lastIndexOf() 返回数组中元素的最后一个（最大）索引，该索引等于指定值，如果未找到，则返回-1。
8	map() 创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数。
9	pop() 从数组中删除最后一个元素并返回该元素。
10	push() 将一个或多个元素添加到数组的末尾并返回数组的新长度。
11	reduce() 同时对数组的两个值（从左到右）应用函数，以将其减少为单个值。
12	reduceRight() 同时对数组的两个值（从右到左）应用函数，以将其减少为单个值。
13	reverse() 反转数组元素的顺序 - 第一个成为最后一个，最后一个成为第一个。
14	shift() 从数组中删除第一个元素并返回该元素切片。
15	slice() 提取数组的一部分并返回一个新数组。
16	some() 如果此数组中至少有一个元素满足提供的测试函数，则返回true。
17	toSource() 表示对象的源代码。
18	sort() 对数组的元素进行排序。
19	splice() 添加和/或从数组中删除元素。
20	toString() 返回表示数组及其元素的字符串。
21	unshift() 将一个或多个元素添加到数组的前面，并返回数组的新长度。

ES6 - 数组方法

以下是ES6中引入的一些新阵列方法。

Array.prototype.find

find允许您遍历数组并获取返回的第一个元素，使得给定的回调函数返回true。找到元素后，函数会立即返回。这是获得匹配给定条件的第一个项目的有效方法。

Example

var numbers = [1, 2, 3]; 
var oddNumber = numbers.find((x) => x % 2 == 1); 
console.log(oddNumber); // 1

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

Note - ES5 filter()和ES6 find()不是同义词。 Filter总是返回一个匹配数组（并将返回多个匹配项），find总是返回实际的元素。

Array.prototype.findIndex

findIndex行为类似于find，但它不返回匹配的元素，而是返回该元素的索引。

var numbers = [1, 2, 3]; 
var oddNumber = numbers.findIndex((x) => x % 2 == 1); 
console.log(oddNumber); // 0

上面的示例将返回值1（0）的索引作为输出。

Array.prototype.entries

entries是一个函数，它返回一个Array Iterator，可用于遍历数组的键和值。条目将返回一个数组数组，其中每个子数组都是[index，value]的数组。

var numbers = [1, 2, 3]; 
var val = numbers.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

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

[0,1] 
[1.2] 
[2,3]

或者，我们也可以使用spread运算符一次性取回一系列条目。

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

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

[[0,1],[1,2],[2,3]]

Array.from

Array.from()允许从像object这样的数组创建新数组。 Array.from（）的基本功能是将两种值转换为数组 -

类似数组的值。
可设置的值，如Set和Map。

Example

"use strict" 
for (let i of Array.from('hello')) { 
   console.log(i) 
}

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

Array.prototype.keys()

此函数返回数组索引。

Example

console.log(Array.from(['a', 'b'].keys()))

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

[ 0, 1 ]

数组遍历使用for ... in循环

可以使用for ... in循环遍历数组。

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

循环执行基于索引的数组遍历。成功执行上述代码后，将显示以下输出。

JavaScript中的数组

JavaScript支持以下有关数组的概念 -

Sr.No	概念与描述
1	多维数组 JavaScript支持多维数组。多维数组的最简单形式是二维数组
2	将数组传递给函数您可以通过指定不带索引的数组名称来向函数传递指向数组的指针。
3	从函数返回数组允许函数返回数组。

Array De-structuring

JavaScript支持在数组上下文中进行解构。

例子 (Example)

var arr = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

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

12 
13

ES6 - Date

Date object是JavaScript语言中内置的数据类型。使用新的Date ()创建日期对象，如以下语法所示。

创建Date对象后，可以使用许多方法对其进行操作。大多数方法只允许您使用本地时间或UTC（通用或GMT）时间来获取和设置对象的年，月，日，小时，分钟，秒和毫秒字段。

ECMAScript标准要求Date对象能够在1970年1月1日之前或之后的1亿天内以毫秒精度表示任何日期和时间。这是正负273，785年的范围，因此JavaScript可以表示直到275755年的日期和时间。

您可以使用以下任何语法来使用Date () constructor创建Date对象。

new Date( ) 
new Date(milliseconds) 
new Date(datestring) 
new Date(year,month,date[,hour,minute,second,millisecond ])

Note - 括号中的参数始终是可选的。

日期属性

以下是Date对象的属性列表及其说明。

Sr.No	财产和描述
1	constructor 指定创建对象原型的函数
2	prototype prototype属性允许您向对象添加属性和方法

日期方法

以下是不同日期方法的列表以及描述。

Sr.No	方法和描述
1	Date() 返回今天的日期和时间
2	getDate() 根据本地时间返回指定日期的月中某天
3	getDay() 根据本地时间返回指定日期的星期几
4	getFullYear() 根据本地时间返回指定日期的年份
5	getHours() 根据本地时间返回指定日期的小时
6	getMilliseconds() 根据本地时间返回指定日期的毫秒数
7	getMinutes() 根据本地时间返回指定日期的分钟数
8	getMonth() 根据本地时间返回指定日期的月份
9	getSeconds() 根据本地时间返回指定日期的秒数
10	getTime() 返回指定日期的数值，作为自1970年1月1日00:00:00 UTC以来的毫秒数
11	getTimezoneOffset() 返回当前语言环境的时区偏移量（以分钟为单位）
12	getUTCDate() 根据通用时间返回指定日期中月份的日期（日期）
13	getUTCDay() 根据通用时间返回指定日期的星期几
14	getUTCFullYear() 根据通用时间返回指定日期的年份
15	getutcHours() 根据通用时间返回指定日期的小时数
16	getUTCMilliseconds() 根据通用时间返回指定日期的毫秒数
17	getUTCMinutes() 根据通用时间返回指定日期的分钟数
18	getUTCMonth() 根据通用时间返回指定日期的月份
19	getUTCSeconds() 根据通用时间返回指定日期的秒数
20	setDate() 根据本地时间设置指定日期的月中某天
21	setFullYear() 根据当地时间设置指定日期的全年
22	setHours() 根据本地时间设置指定日期的小时数
23	setMilliseconds() 根据本地时间设置指定日期的毫秒数
24	setMinutes() 根据本地时间设置指定日期的分钟数
25	setMonth() 根据本地时间设置指定日期的月份
26	setSeconds() 根据本地时间设置指定日期的秒数
27	setTime() 将Date对象设置为自1970年1月1日00:00:00 UTC以来的毫秒数表示的时间
28	setUTCDate() 将Date对象设置为自1970年1月1日00:00:00 UTC以来的毫秒数表示的时间
29	setUTCFullYear() 根据通用时间设置指定日期的全年
30	setUTCHours() 根据通用时间设置指定日期的小时
31	setUTCMilliseconds() 根据通用时间设置指定日期的毫秒数
32	setUTCMinutes() 根据通用时间设置指定日期的分钟数
33	setUTCMonth() 根据通用时间设置指定日期的月份
34	setUTCSeconds() 根据通用时间设置指定日期的秒数
35	todatestring() 返回Date的“date”部分作为人类可读的字符串
36	toLocaleDateString() 使用当前语言环境的约定，以字符串形式返回Date的“date”部分
37	toLocaleString() 使用当前语言环境的约定将日期转换为字符串
38	toLocaleTimeString() 使用当前语言环境的约定，以字符串形式返回Date的“time”部分
39	toString() 返回表示指定Date对象的字符串
40	toTimeString() 返回Date的“time”部分作为人类可读的字符串
41	toUTCString() 使用通用时间约定将日期转换为字符串
42	valueOf() 返回Date对象的原始值

ES6 - Math

math对象为您提供数学常量和函数的属性和方法。与其他全局对象不同， Math不是构造函数。 Math的所有属性和方法都是静态的，可以使用Math作为对象来调用而不创建它。

数学属性

以下是所有数学属性及其描述的列表。

Sr.No	财产和描述
1	E 欧拉常数和自然对数的基数，约为2.718
2	LN2 自然对数为2，约为0.693
3	LN10 自然对数为10，约为2.302
4	LOG2E 基数为2的对数，约为1.442
5	LOG10E 基数为E的对数10，约为0.434
6	PI 圆周长与直径之比约为3.14159
7	SQRT1_2 平方根为1/2; 等价地，1平方根上的1，大约0.707
8	SQRT2 平方根2，约1.414

指数函数 (Exponential Functions)

基本指数函数是Math.pow() ，并且有平方根，立方根和e的幂的便捷函数，如下表所示。

Sr.No	功能说明
1	Math.pow(x, y) 返回x上升到幂y
2	Math.sqrt(x) 返回数字x平方根
3	Math.cbrt(x) 此方法返回数字x的立方根
4	Math.exp(x) 相当于Math.pow（Math.E，x）
5	Math.expm1(x) 相当于Math.exp（x） - 1
6	Math.hypot(x1, x2,...) 返回参数总和的平方根

对数函数 (Logarithmic Functions)

基本的自然对数函数是Math.log () 。在JavaScript中，“log”表示“自然对数”。为方便起见，ES6引入了Math.log10。

Sr.No	功能说明
1	Math.log(x) x自然对数
2	Math.log10(x) 基数为10的对数
3	Math.log2(x) 基数为2的对数
4	Math.log1p(x) 自然对数为1 + x

其它代数函数 (Miscellaneous Algebraic Functions)

以下是各种代数函数及其描述的列表。

Sr.No	功能说明
1	Math.abs(x) x的绝对值
2	Math.sign(x) x的符号:如果x为负，则为-1; 如果x是正数，1; 如果x是0,0
3	Math.ceil(x) x的上限:大于或等于x的最小整数
4	Math.floor(x) x的底限:小于或等于x的最大整数
5	Math.trunc(x) x的整数部分（所有小数位都被删除）
6	Math.round(x) x四舍五入到最接近的整数
7	Math.min(x1, x2,...) 返回最小参数
8	Math.max((x1, x2,...) 返回最小参数

三角函数 (Trigonometric Functions)

Math库中的所有三角函数都以弧度运算，而不是度。

Sr.No	功能说明
1	Math.sin(x) x弧度的正弦
2	Math.cos(x) x弧度的余弦
3	Math.tan(x) x弧度的正切
4	Math.asin(x) x的反正弦（arcsin）（得到弧度）
5	Math.acos(x) x的反余弦（arccos）（以弧度表示）
6	Math.atan(x) x的反正切（arctan）（以弧度表示）
7	Math.atan2(y, x0) 从x轴到点（x，y）的逆时针角度（以弧度表示）

Math.random()

Math.random()函数返回0（包括）和1（不包括）之间的伪随机数。

示例:伪随机数生成（PRNG）

var value1 = Math.random();  
console.log("First Test Value : " + value1 ); 
var value2 = Math.random();  
console.log("Second Test Value : " + value2 ); 
var value3 = Math.random();  
console.log("Third Test Value : " + value3 ); 
var value4 = Math.random(); 
console.log("Fourth Test Value : " + value4 );

输出 (Output)

First Test Value : 0.5782922627404332 
Second Test Value : 0.5624510529451072 
Third Test Value : 0.9336334094405174 
Fourth Test Value : 0.4002739654388279

ES6 - RegExp

正则表达式是描述字符模式的对象。正则表达式通常缩写为“ regex ”或“ regexp ”。

JavaScript RegExp类表示正则表达式，String和RegExp都定义了使用正则表达式在文本上执行强大的模式匹配和搜索和替换功能的方法。

正则表达式可以定义为 -

var pattern = new RegExp(pattern, attributes); 
OR 
var pattern = /pattern/attributes;

该属性可以包含以下值的任意组合。

Sr.No	属性和描述
1	G 全球比赛
2	I 忽略大小写
3	M 多行; 将开始和结束字符（^和$）视为多行（即匹配每行的开头或结尾（由\ n或\ r分隔），而不仅仅是整个输入字符串的开头或结尾））
4	U 统一; 将模式视为一系列unicode代码点
5	Y 黏; 仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引（并且不会尝试与任何后续索引匹配）

构造正则表达式

Brackets

在正则表达式的上下文中使用时，括号（[]）具有特殊含义。它们用于查找一系列字符。

Sr.No	表达和描述
1	[...] 括号内的任何一个字符
2	[^...] 任何一个字符不在括号之间
3	[0-9] 它匹配从0到9的任何十进制数字
4	[az] 它匹配从小写字母a到小写字母z任何字符
5	[AZ] 它匹配从大写A到大写Z的任何字符
6	[aZ] 它匹配从小写字母a到大写字母Z的任何字符

上面显示的范围是一般的; 您还可以使用范围[0-3]来匹配范围从0到3的任何十进制数字，或者使用范围[bv]来匹配范围从b到v的任何小写字符。

量词(Quantifiers)

括号内的字符序列和单个字符的频率或位置可以用特殊字符表示。每个特殊字符都有特定的含义。 +, *, ?, ，？和$标志都遵循字符序列。

Sr.No	表达和描述
1	p+ 它匹配包含至少一个p任何字符串。
2	p* 它匹配包含零个或多个p's任何字符串
3	p? 它匹配包含一个或多个p's任何字符串
4	p{N} 它匹配包含N p's序列的任何字符串
5	p{2,3} 它匹配包含两个或三个p's序列的任何字符串
6	p{2, } 它匹配包含至少两个p's序列的任何字符串
7	p$ 它匹配任何字符串，其末尾为p
8	^p 它匹配任何字符串，在它的开头有p
9	[^a-zA-Z] 它匹配任何不包含从a到z和A到Z任何字符的字符串
10	pp 它匹配任何包含p字符串，后跟任何字符，然后是另一个p
11	^.{2}$ 它匹配任何包含两个字符的字符串
12	*《b》(.)《/b》它匹配和 b>中包含的任何字符串**
13	p(hp)* 它匹配任何包含p字符串，后跟零个或多个序列hp实例

文字字符

Sr.No	字符和描述
1	Alphanumeric 本身
2	\0 NULL字符（\ u0000）
3	\t 标签（\ u0009）
4	\n 换行（\ u000A）
5	\v 垂直标签（\ u000B）
6	\f 换页（\ u000C）
7	\r 回车（\ u000D）
8	\xnn 由十六进制数nn;指定的拉丁字符nn; 例如，\ x0A与\n相同
9	\uxxxx 由十六进制数xxxx指定的Unicode字符; 例如，\ u0009与\t相同
10	\cX 控制字符^ X; 例如，\ cJ等同于换行符\n

Meta-characters

meta-character只是一个字母字符，前面是反斜杠，用于赋予组合特殊含义。

例如，您可以使用'\d'元字符搜索大笔金额:/（[\ d] +）000 /。在这里， \d将搜索数字字符的任何字符串。

下表列出了一组可在PERL样式正则表达式中使用的元字符。

Sr.No	字符和描述
1	. 单个字符
2	\s 空白字符（空格，制表符，换行符）
3	\S 非空白字符
4	\d 一个数字（0-9）
5	\D 非数字
6	\w 单词字符（az，AZ，0-9，_）
7	\W 非单词字符
8	[\b] 文字退格（特例）
9	[aeiou] 匹配给定集合中的单个字符
10	[^aeiou] 匹配给定集合之外的单个字符
11	(foo\|bar\|baz) 匹配指定的任何替代方案

RegExp属性

Sr.No	属性和描述
1	RegExp.prototype.flags 包含RegExp对象标志的字符串
2	RegExp.prototype.global 是否针对字符串中的所有可能匹配测试正则表达式，或仅针对第一个匹配
3	RegExp.prototype.ignoreCase 是否在字符串中尝试匹配时忽略大小写
4	RegExp.prototype.multiline 是否跨多行搜索字符串
5	RegExp.prototype.source 模式的文本
6	RegExp.prototype.sticky 搜索是否有粘性

RegExp方法

Sr.No	方法和描述
1	RegExp.prototype.exec() 在其字符串参数中执行匹配搜索
2	RegExp.prototype.test() 在其字符串参数中测试匹配项
3	RegExp.prototype.match() 对给定字符串执行匹配并返回匹配结果
4	RegExp.prototype.replace() 用新的子字符串替换给定字符串中的匹配项
5	RegExp.prototype.search() 搜索给定字符串中的匹配项，并返回在字符串中找到的模式的索引
6	RegExp.prototype.split() 通过将字符串分隔为子字符串将给定字符串拆分为数组
7	RegExp.prototype.toString() 返回表示指定对象的字符串。覆盖Object.prototype.toString（）方法

ES6 - HTML DOM

每个网页都驻留在浏览器窗口内，可以将其视为对象。

document object表示在该窗口中显示的HTML文档。文档对象具有各种属性，这些属性引用允许访问和修改文档内容的其他对象。

访问和修改文档内容的方式称为Document Object Model或DOM 。对象按层次结构组织。此分层结构适用于Web文档中的对象组织。

以下是一些重要对象的简单层次结构 -

有几个DOM存在。以下部分详细说明了每个DOM，并描述了如何使用它们来访问和修改文档内容。

The Legacy DOM - 这是在早期版本的JavaScript语言中引入的模型。它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单，表单元素和图像。
The W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）标准化。几乎所有现代浏览器都支持此模型。
The IE4 DOM - 此文档对象模型是在Microsoft Internet Explorer浏览器的第4版中引入的。 IE 5及更高版本包括对大多数基本W3C DOM功能的支持。

遗产DOM

这是JavaScript语言早期版本中引入的模型。它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单，表单元素和图像。

此模型提供了几个只读属性，例如title，URL和lastModified，它们提供有关整个文档的信息。除此之外，该模型提供了各种方法，可用于设置和获取文档属性值。

旧版DOM中的文档属性

以下是可以使用Legacy DOM访问的文档属性列表。

Sr.No	财产和描述
1	alinkColor 不推荐使用 - 指定激活链接颜色的字符串。 Example :document.alinkColor
2	anchors[ ] 一组锚点对象，每个锚点出现在文档中。 Example :document.anchors [0]，document.anchors [1]等
3	applets[ ] 一个applet对象数组，一个用于文档中显示的每个applet。 Example :document.applets [0]，document.applets [1]等
4	bgColor 不推荐使用 - 指定文档背景颜色的字符串。 Example :document.bgColor
5	Cookie 具有特殊行为的字符串值属性，允许查询和设置与此文档关联的cookie。 Example :document.cookie
6	Domain 一个字符串，指定文档来自的Internet域。用于安全目的。 Example :document.domain
7	embeds[ ] 一组对象，表示使用标记嵌入文档中的数据。 plugins []的同义词。可以使用JavaScript代码控制某些插件和ActiveX控件。 Example :document.embeds [0]，document.embeds [1]等
8	fgColor 一个字符串，指定文档的默认文本颜色。 Example :document.fgColor
9	forms[ ] 一组表单对象，每个表单对应于文档中显示的每个HTML表单。 Example :document.forms [0]，document.forms [1]等
10	images[ ] 一个表单对象数组，每个HTML表单对应一个HTML 标记出现在文档中。 Example :document.forms [0]，document.forms [1]等
11	lastModified 一个只读字符串，用于指定文档最近更改的日期。 Example :document.lastModified
12	linkColor 不推荐使用 - 指定未访问链接颜色的字符串。 Example :document.linkColor
13	links[ ] 它是一个文档链接数组。 Example :document.links [0]，document.links [1]等
14	Location 文档的URL。不赞成使用URL属性。 Example :document.location
15	plugins[ ] 嵌入[]的同义词 Example :document.plugins [0]，document.plugins [1]等
16	Referrer 一个只读字符串，包含从中链接当前文档的文档的URL（如果有）。 Example :document.referrer
17	Title 标签的文本内容。 Example :document.title
18	URL 一个只读字符串，用于指定文档的URL。 Example :document.URL
19	vlinkColor 不推荐使用 - 指定访问链接颜色的字符串。 Example :document.vlinkColor

旧版DOM中的文档方法

以下是Legacy DOM支持的方法列表。

Sr.No	财产和描述
1	clear( ) 不推荐使用 - 删除文档的内容并且不返回任何内容。 Example :document.clear（）
2	close( ) 关闭使用open（）方法打开的文档流，不返回任何内容。
3	open( ) 删除现有文档内容并打开可以写入新文档内容的流。什么都不返回 Example :document.open（）
4	write( value, ...) 将指定的字符串或字符串插入当前正在解析的文档中，或附加到使用open（）打开的文档中。什么都不返回 Example :document.write（value，...）
5	writeln( value, ...) 与write（）相同，只是它在输出中附加换行符。什么都不返回 Example :document.writeln（value，...）

我们可以使用HTML DOM在任何HTML文档中找到任何HTML元素。例如，如果Web文档包含表单元素，然后使用JavaScript，我们可以将其称为document.forms [0]。如果Web文档包含两个表单元素，则第一个表单称为document.forms [0]，第二个表单称为document.forms [1]。

使用上面给出的层次结构和属性，我们可以使用document.forms [0] .elements [0]等访问第一个表单元素。

例子 (Example)

以下是使用Legacy DOM方法访问文档属性的示例。

<html> 
   <head> 
      <title> Document Title </title> 
      <script type = "text/javascript"> 
         <!--  
            function myFunc() {  
               var ret = document.title;  
               alert("Document Title : " + ret );  
               var ret = document.URL;  
               alert("Document URL : " + ret );  
               var ret = document.forms[0];  
               alert("Document First Form : " + ret );  
               var ret = document.forms[0].elements[1];  
               alert("Second element : " + ret );  
            } //
         --> 
      </script> 
   </head> 
   <body> 
      <h1 id = "title">This is main title</h1> 
      <p>Click the following to see the result:</p> 
      <form name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();" /> 
         <input type = "button" value = "Cancel"> 
      </form> 
      <form name = "SecondForm"> 
         <input type = "button" value = "Don't ClickMe"/> 
      </form> 
   </body> 
</html>

输出 (Output)

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

新页面打开

Note - 此示例返回表单和元素的对象。我们必须使用本教程中未讨论的那些对象属性来访问它们的值。

ES6 - Collections

ES6引入了两种新的数据结构:地图和集合。

Maps - 此数据结构可将键映射到值。
Sets - 集类似于数组。但是，集合不鼓励重复。

Maps

Map对象是一个简单的键/值对。地图中的键和值可以是原始的或对象。

以下是相同的语法。

new Map([iterable])

参数iterable表示任何可迭代对象，其元素包含键/值对。映射是有序的，即它们按插入顺序遍历元素。

地图属性

Sr.No	财产和描述
1	Map.prototype.size 此属性返回Map对象中键/值对的数量。

了解基本的Map操作

set（）函数设置Map对象中键的值。 set（）函数有两个参数，即键及其值。此函数返回Map对象。

has（）函数返回一个布尔值，指示是否在Map对象中找到指定的键。此函数将键作为参数。

var map = new Map(); 
map.set('name','Tutorial Point'); 
map.get('name'); // Tutorial point

上面的示例创建了一个地图对象。地图只有一个元素。元素键由name表示。键被映射到值Tutorial point 。

Note - 地图区分相似值但具有不同的数据类型。换句话说， integer key 1被认为与string key “1” 。请考虑以下示例以更好地理解此概念

var map = new Map(); 
map.set(1,true); 
console.log(map.has("1")); //false 
map.set("1",true); 
console.log(map.has("1")); //true

输出 (Output)

false 
true

set()方法也是可链接的。请考虑以下示例。

var roles = new Map(); 
roles.set('r1', 'User') 
.set('r2', 'Guest') 
.set('r3', 'Admin'); 
console.log(roles.has('r1'))

输出 (Output)

True

上面的示例定义了一个地图对象。该示例链接set（）函数以定义键/值对。

get()函数用于检索与指定键对应的值。

Map构造函数也可以传递给数组。而且，map还支持使用spread运算符来表示数组。

例子 (Example)

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(roles.get('r2'))

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

Guest

Note - 如果映射中不存在指定的键，则get（）函数将返回undefined。

如果键已经存在于地图中，则set（）将替换该键的值。请考虑以下示例。

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(`value of key r1 before set(): ${roles.get('r1')}`) 
roles.set('r1','superUser') 
console.log(`value of key r1 after set(): ${roles.get('r1')}`)

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

value of key r1 before set(): User 
value of key r1 after set(): superUser

地图方法

Sr.No	方法和描述
1	Map.prototype.clear() 从Map对象中删除所有键/值对。
2	Map.prototype.delete(key) 删除与该键关联的任何值，并返回Map.prototype.has（key）先前返回的值。 Map.prototype.has（key）之后将返回false。
3	Map.prototype.entries() 返回一个新的Iterator对象， an array of对象包含插入顺序中Map对象中每个元素an array of [key，value] an array of 。
4	Map.prototype.forEach(callbackFn[, thisArg]) 按插入顺序为Map对象中存在的每个键值对callbackFn一次callbackFn 。如果向forEach提供thisArg参数，则它将用作每个回调的“this”值。
5	Map.prototype.keys() 返回一个新的Iterator对象，该对象包含插入顺序中Map对象中每个元素的keys 。
6	Map.prototype.values() 返回一个新的Iterator对象， an array of对象包含插入顺序中Map对象中每个元素an array of [key，value] an array of 。

循环的...

以下示例说明了使用for ... of循环遍历映射。

'use strict' 
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);
for(let r of roles.entries()) 
console.log(`${r[0]}: ${r[1]}`);

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

r1: User 
r2: Guest 
r3: Admin

弱地图

弱地图与地图相同，但以下情况除外 -

它的键必须是对象。
弱地图中的键可以是垃圾收集。 Garbage collection是清除程序中未引用对象占用的内存的过程。
弱映射无法迭代或清除。

示例:弱地图

'use strict' 
let weakMap = new WeakMap(); 
let obj = {}; 
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true

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

WeakMap {} 
true

Sets

集合是ES6数据结构。它类似于一个数组，但它不能包含重复项。换句话说，它允许您存储唯一值。设置支持原始值和对象引用。

就像地图一样，集合也是有序的，即元素按其插入顺序迭代。可以使用以下语法初始化集合。

设置属性

Sr.No	财产和描述
1	Set.prototype.size 返回Set对象中的值的数量。

设置方法

Sr.No	方法和描述
1	Set.prototype.add(value) 将具有给定值的新元素追加到Set对象。返回Set对象。
2	Set.prototype.clear() 从Set对象中删除所有元素。
3	Set.prototype.delete(value) 删除与值关联的元素。
4	Set.prototype.entries() 以插入顺序返回一个新的Iterator对象， an array of对象包含Set对象中每个元素an array of [value，value] an array of 。这类似于Map对象，因此每个条目的键和值都具有相同的值。
5	Set.prototype.forEach(callbackFn[, thisArg]) 按插入顺序为Set对象中的每个值调用callbackFn一次。如果为forEach提供athisArg参数，则它将用作每个回调的“this”值。
6	Set.prototype.has(value) 返回一个布尔值，声明一个元素是否与Set对象中的给定值一起出现。
7	Set.prototype.values() 返回一个新的Iterator对象，该对象包含插入顺序中Set对象中每个元素的values 。

弱集

弱集只能包含对象，它们包含的对象可能是垃圾回收。像弱地图一样，弱集不能迭代。

示例:使用弱集

'use strict' 
   let weakSet = new WeakSet();  
   let obj = {msg:"hello"}; 
   weakSet.add(obj); 
   console.log(weakSet.has(obj)); 
   weakSet.delete(obj); 
   console.log(weakSet.has(obj));

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

true 
false

Iterator

Iterator是一个允许一次访问一个对象集合的对象。 set和map都有返回迭代器的方法。

迭代器是具有next()方法的对象。当调用next（）方法时，它返回一个具有'value'和'done'属性的对象。 'done'是boolean，这将在读取集合中的所有项后返回true

示例1:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries(); 
console.log(iterator.next())

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

{ value: [ 'a', 'a' ], done: false }

由于该集合不存储键/值，因此值数组包含类似的键和值。完成将是错误的，因为有更多的元素要读取。

示例2:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values(); 
console.log(iterator.next());

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

{ value: 'a', done: false }

示例3:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.keys(); 
console.log(iterator.next());

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

{ value: 'a', done: false }

示例4:Map和Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.entries(); 
console.log(iterator.next());

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

{ value: [ 1, 'one' ], done: false }

示例5:Map和Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.values(); 
console.log(iterator.next());

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

{value: "one", done: false}

例6:Map和Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.keys(); 
console.log(iterator.next());

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

{value: 1, done: false}

ES6 - Classes

Object Orientation是一种遵循真实世界建模的软件开发范例。面向对象，将程序视为通过称为methods机制相互通信的对象集合。 ES6也支持这些面向对象的组件。

面向对象的编程概念

首先，让我们理解

Object - 对象是任何实体的实时表示。根据Grady Brooch的说法，据说每个物体都有3个特征 -
- State - 由对象的属性描述。
- Behavior - 描述对象的行为方式。
- Identity - 区分对象与一组类似此类对象的唯一值。
Class - OOP方面的类是创建对象的蓝图。类封装了对象的数据。
Method - 方法促进对象之间的通信。

让我们将这些面向对象的概念转换为现实世界中的概念。例如:汽车是一个具有数据（品牌，型号，车门数量，车辆编号等）和功能（加速，换档，打开车门，打开前大灯等）的物体。

在ES6之前，创建课程是一个挑剔的事情。可以使用ES6中的class关键字创建类。

可以通过声明类或使用类表达式将类包含在代码中。

语法:声明一个类

class Class_name {  
}

语法:类表达式

var var_name = new Class_name {  
}

class关键字后跟类名。在命名类时必须考虑标识符的规则（已经讨论过）。

类定义可包括以下内容 -

Constructors - 负责为类的对象分配内存。
Functions - 函数表示对象可以采取的操作。它们有时也被称为方法。

这些组件放在一起称为该类的数据成员。

Note - 类主体只能包含方法，但不能包含数据属性。

示例:声明一个类

class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

示例:类表达式

var Polygon = class { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

上面的代码段表示一个未命名的类表达式。命名类表达式可以写为。

var Polygon = class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Note - 与变量和函数不同，不能提升类。

创建对象

要创建类的实例，请使用new关键字，后跟类名。以下是相同的语法。

var object_name= new class_name([ arguments ])

Where,

new关键字负责实例化。
表达式的右侧调用构造函数。如果参数化，构造函数应该传递值。

示例:实例化一个类

var obj = new Polygon(10,12)

Accessing 函数

可以通过对象访问类的属性和函数。使用 '。' 用于访问类的数据成员的dot notation （称为句点）。

//accessing a function 
obj.function_name()

示例:将它们放在一起

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 
//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();

上面给出的示例声明了一个类'Polygon'。类的构造函数有两个参数 - 高度和宽度。 'this'关键字指的是该类的当前实例。换句话说，上面的构造函数使用传递给构造函数的参数值初始化两个变量h和w。类中的test ()函数打印高度和宽度的值。

要使脚本起作用，将创建Polygon类的对象。该对象由polyObj变量polyObj 。然后通过该对象调用该函数。

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

The height of the polygon:  10 
The width of the polygon:  20

静态关键字

static关键字可以应用于类中的函数。静态成员由类名引用。

例子 (Example)

'use strict' 
class StaticMem { 
   static disp() { 
      console.log("Static Function called") 
   } 
} 
StaticMem.disp() //invoke the static metho

Note - 包含构造函数定义不是必需的。默认情况下，每个类默认都有一个构造函数。

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

Static Function called

instanceof运算符

如果对象属于指定的类型，则instanceof运算符返回true。

例子 (Example)

'use strict' 
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

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

obj is an instance of Person True

类继承

ES6支持Inheritance的概念。继承是程序从现有实体（此处为类）创建新实体的能力。扩展为创建较新类的类称为parent class/super class 。新创建的类称为child/sub classes 。

一个类使用'extends'关键字从另一个类继承。子类继承除父类的构造函数之外的所有属性和方法。

以下是相同的语法。

class child_class_name extends parent_class_name

示例:类继承

'use strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Circle extends Shape { 
   disp() { 
      console.log("Area of the circle:  "+this.Area) 
   } 
} 
var obj = new Circle(223); 
obj.disp()

上面的例子声明了一个类Shape。该类由Circle类扩展。因为，类之间存在继承关系，子类即，类Circle获得对其父类属性即区域的隐式访问。

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

Area of Circle: 223

继承可分为 -

Single - 每个类最多可以从一个父类扩展。
Multiple - 一个类可以从多个类继承。 ES6不支持多重继承。
Multi-level - 请考虑以下示例。

'use strict' 
class Root { 
   test() { 
      console.log("call from parent class") 
   } 
} 
class Child extends Root {} 
class Leaf extends Child   
//indirectly inherits from Root by virtue of inheritance {} 
var obj = new Leaf();
obj.test()

Leaf类通过多级继承从Root类和Child类派生属性。

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

call from parent class

类继承和方法重写

Method Overriding是子类重新定义超类方法的机制。以下示例说明了相同的情况 -

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();

在上面的示例中，子类已经更改了超类函数的实现。

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

doPrint() is printing a string…

超级关键字

ES6允许子类调用其父类数据成员。这是通过使用super关键字实现的。 super关键字用于指代类的直接父级。

考虑以下示例 -

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

StringWriter类中的doPrint()定义会发出对其父类版本的调用。换句话说，super关键字用于调用父类中的doPrint（）函数定义--PrinterClass。

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

doPrint() from Parent called. 
doPrint() is printing a string.

ES6 - Promises

Promises是一种在JavaScript中实现异步编程的简洁方法（ES6新功能）。在承诺之前，Callbacks用于实现异步编程。让我们首先了解异步编程及其实现，使用Callbacks。

了解回调

函数可以作为参数传递给另一个函数。这种机制被称为Callback 。回调对事件有帮助。

以下示例将帮助我们更好地理解这一概念。

<script>   
   function notifyAll(fnSms, fnEmail) {   
      console.log('starting notification process');   
      fnSms();   
      fnEmail();   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   }, 
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); 
   //executes last or blocked by other methods   
</script>

在上面显示的notifyAll()方法中，通过发送SMS和发送电子邮件来进行通知。因此，notifyAll方法的调用者必须传递两个函数作为参数。每个功能都承担一项责任，如发送短信和发送电子邮件。

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

starting notification process 
Sms send .. 
Email send .. 
End of script

在上面提到的代码中，函数调用是同步的。这意味着UI线程将等待完成整个通知过程。同步调用成为阻塞调用。让我们现在了解非阻塞或异步调用。

了解AsyncCallback

考虑上面的例子。

要启用脚本，请对notifyAll（）方法执行异步或非阻塞调用。我们将使用JavaScript的setTimeout()方法。默认情况下，此方法是异步的。

setTimeout（）方法有两个参数 -

回调函数。
调用方法之前的秒数。

在这种情况下，通知进程已包含超时。因此，代码设置需要两秒钟的延迟。将调用notifyAll（）并且主线程继续执行其他方法。因此，通知过程不会阻止主JavaScript线程。

<script>   
   function notifyAll(fnSms, fnEmail) {   
      setTimeout(function() {   
         console.log('starting notification process');   
         fnSms();   
         fnEmail();   
      }, 2000);   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   },  
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); //executes first or not blocked by others   
</script>

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

End of script 
starting notification process 
Sms send .. 
Email send ..

在多个回调的情况下，代码看起来很可怕。

<script>   
   setTimeout(function() {   
      console.log("one");   
      setTimeout(function() {   
         console.log("two");   
         setTimeout(function() {   
            console.log("three");   
         }, 1000);   
      }, 1000);   
   }, 1000);   
</script>

ES6通过引入承诺的概念来帮助您。 Promise是“Continuation events”，它们可以帮助您以更清晰的代码风格一起执行多个异步操作。

例子 (Example)

让我们通过一个例子来理解这一点。以下是相同的语法。

var promise = new Promise(function(resolve , reject) {    
   // do a thing, possibly async , then..  
   if(/*everthing turned out fine */)    resolve("stuff worked");  
   else     
   reject(Error("It broke"));  
});  
return promise;
// Give this to someone

实现承诺的第一步是创建一个使用承诺的方法。让我们说在这个例子中， getSum()方法是异步的，即它的操作不应该阻止其他方法的执行。一旦此操作完成，它将在稍后通知呼叫者。

以下示例（步骤1）声明了Promise对象'var promise'。 Promise构造函数首先将函数用于成功完成工作，另一个函数用于发生错误。

promise通过使用resolve回调并传入结果返回计算结果，即n1 + n2

Step 1 - 解析（n1 + n2）;

如果getSum（）遇到错误或意外情况，它将调用Promise中的拒绝回调方法并将错误信息传递给调用者。

Step 2 - 拒绝（错误（“不支持否定”））;

方法实现在以下代码中给出（步骤1）。

function getSum(n1, n2) {   
   varisAnyNegative = function() {   
      return n1 < 0 || n2 < 0;   
   }   
   var promise = new Promise(function(resolve, reject) {   
      if (isAnyNegative()) {   
         reject(Error("Negatives not supported"));   
      }   
      resolve(n1 + n2)
   });   
   return promise;   
}

第二步详细说明了调用者的实现（步骤2）。

调用者应使用'then'方法，该方法采用两种回调方法 - 首先是成功，第二种是失败。每个方法都有一个参数，如下面的代码所示。

getSum(5, 6)   
.then(function (result) {   
   console.log(result);   
},   
function (error) {   
   console.log(error);   
});

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

由于getSum（）的返回类型是Promise，我们实际上可以有多个'then'语句。第一个'then'将有一个return语句。

getSum(5, 6)   
.then(function(result) {   
   console.log(result);   
   returngetSum(10, 20); 
   // this returns another promise   
},   
function(error) {   
   console.log(error);   
})   
.then(function(result) {   
   console.log(result);   
}, 
function(error) {   
   console.log(error);
});

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

11
30

以下示例使用getSum（）方法发出三个then（）调用。

<script>   
   function getSum(n1, n2) {   
      varisAnyNegative = function() {   
         return n1 < 0 || n2 < 0;   
      }   
      var promise = new Promise(function(resolve, reject) {   
         if (isAnyNegative()) {   
            reject(Error("Negatives not supported"));   
         }   
         resolve(n1 + n2);   
      });   
      return promise;   
   }   
   getSum(5, 6)   
   .then(function(result) {   
      console.log(result);   
      returngetSum(10, 20); 
      //this returns another Promise   
   },   
   function(error) {   
      console.log(error);   
   })
   .then(function(result) {   
      console.log(result);   
      returngetSum(30, 40); 
      //this returns another Promise   
   }, 
   function(error) {   
      console.log(error);   
   })   
   .then(function(result) {   
      console.log(result);   
   }, 
   function(error) {         
      console.log(error);   
   });   
   console.log("End of script ");   
</script>

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

程序首先显示“脚本结束”，然后逐个调用getSum（）方法。

End of script  
11 
30 
70

这表明以异步样式或非阻塞样式调用getSum（）。 Promise为处理回调提供了一种干净利落的方式。

ES6 - Modules

考虑需要重用部分JavaScript代码的场景。 ES6通过模块的概念来帮助您解决问题。

module只不过是在文件中编写的一大块JavaScript代码。除非模块文件导出模块，否则模块中的函数或变量不可用。

简单来说，这些模块可以帮助您在模块中编写代码，并仅公开应该由代码的其他部分访问的代码部分。

必须将ES6模块转换为ES5代码，以便我们可以运行和测试代码。 Transpilation是将代码从一种语言转换为对应语言的过程。 ES6 Module Transpiler是一个工具，它可以将您的ES6模块编译为CommonJS或AMD风格的ES5兼容代码。

ES6模块是一个非常强大的概念。虽然目前还没有支持，但您今天可以使用ES6代码并转换为ES5。您可以使用Grunt，Gulp，Babel或其他一些转换程序在构建过程中编译模块。出于演示的目的，本课程使用Node.js来转换和执行代码，因为它基于控制台并且易于理解。

导出模块

要使模块的某些部分可用，请使用export关键字。以下是导出模块的语法。

导出单个值或元素 - 使用导出默认值

export default element_name

导出多个值或元素

export {element_name1,element_name2,....}

导入模块

要使用模块，请使用import关键字。以下是相同的语法。

导入单个值或元素

从module_name导入元素名称

导出多个值或元素

import {element_name1,element_name2,....} from module_name

考虑一个JavaScript文件Message.js ，其中包含printMsg（）方法。为了能够重用此方法提供的功能，请在Message.js文件中包含以下内容 -

exportdefault printMsg

打算使用该函数的脚本文件，例如User.js，必须通过包含以下内容从Message模块导入该函数 -

import printMsg from './Message.js'

Note - 注意:export语句中的多个元素应由逗号分隔符分隔。导入也是如此。

示例:定义和使用ES6模块

Defining a module: Message_module.js

function display_message() { 
   console.log("Hello World") 
} 
export default display_message

Importing the module: consume_module.js

import display_message from './MessageModule.js' 
display_message()

使用以下命令通过npm安装es6-module-transpiler -

npm install -g es6-module-transpiler

假设给定JS项目的目录结构如下 -

D:/ 
ES6/ 
   scripts/ 
      app.js 
      utility.js 
   out/

其中， scripts是包含我的ES6代码示例的目录。我们将ES6代码转换为ES5并将它们保存到上面显示的目录中。

以下是相同的步骤 -

Step 1 - 导航到D:/ ES6/scripts目录并将ES6代码转换为CommonJS格式。您也可以选择转换为AMD格式，然后使用浏览器运行相同的内容。

在节点窗口中键入以下内容以将代码转换为CommonJS格式 -

compile-modules convert -I scripts -o out Message_module.js 
   consume_module.js -format commonjs

上面的命令将转换脚本目录中的所有JS文件，并将其转换后的版本放入out子目录中。

Step 2 - 执行脚本代码。

cd out 
node consume_module.js

以下是上述代码的输出。

Hello World

Note - 模块也可以重新导出，即导入模块的代码也可以导出它。

ES6 - Error Handling

编程中有三种类型的错误:语法错误，运行时错误和逻辑错误。

语法错误

语法错误，也称为parsing errors ，在传统编程语言的编译时和JavaScript中的解释时发生。当JavaScript中出现语法错误时，只有与语法错误包含在同一线程中的代码才会受到影响，而其他线程中的其余代码将被执行，假设其中没有任何内容取决于包含错误的代码。

运行时错误

运行时错误（也称为exceptions ）在执行期间（编译/解释之后）发生。异常也会影响它们发生的线程，允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。相反，当您在驱动脚本的逻辑中出错并且没有按预期获得结果时，它们就会发生。

您无法捕获这些错误，因为它取决于您的业务需求，您希望在程序中添加什么类型的逻辑。

发生运行时错误时，JavaScript会抛出Error对象的实例。下表列出了Error对象的预定义类型。

Sr.No	错误对象和描述
1	EvalError 创建表示有关全局函数eval()的错误的实例。
2	RangeError 创建表示数值变量或参数超出其有效范围时发生的错误的实例。
3	ReferenceError 创建表示取消引用无效引用时发生的错误的实例。
4	SyntaxError 创建表示解析代码时发生的语法错误的实例。
5	TypeError 创建表示当变量或参数不是有效类型时发生的错误的实例。
6	URIError 创建一个实例，表示在encodeURI()或decodeURI()传递无效参数时发生的错误。

抛出异常

可以使用throw statement引发错误（预定义或用户定义）。稍后可以捕获这些异常，您可以采取适当的措施。以下是相同的语法。

语法:抛出一般异常

throw new Error([message]) 
OR 
throw([message])

语法:抛出特定异常

throw new Error_name([message])

异常处理

使用try...catch statement完成异常处理。当程序遇到异常时，程序将以不友好的方式终止。为了防止出现这种意外错误，我们可以将代码包装在try ... catch语句中。

try块必须紧跟一个catch块或一个finally块（或两者之一）。当try块中发生异常时，异常放在e中并执行catch块。在try/catch之后无条件执行可选的finally块

以下是相同的语法。

try {  
   // Code to run  
   [break;]  
} catch ( e ) {  
   // Code to run if an exception occurs
   [break;]  
}[ finally {  
   // Code that is always executed regardless of  
   // an exception occurring  
}]

例子 (Example)

var a = 100; 
var b = 0; 
try { 
   if (b == 0 ) { 
      throw(“Divide by zero error.”); 
   } else { 
      var c = a/b; 
   } 
} 
catch( e ) { 
   console.log("Error: " + e ); 
}

输出 (Output)

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

Error: Divide by zero error

Note - 注意:您可以在一个函数中引发异常，然后可以使用try...catch块在同一函数或调用函数中捕获该异常。

The onerror( ) Method

onerror事件处理程序是第一个促进JavaScript中的错误处理的功能。只要页面发生异常，就会在窗口对象上触发错误事件。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         window.onerror  =  function () {  
            document.write ("An error occurred.");  
         } 
      </script> 
   </head> 
   <body> 
      <p>Click the following to see the result:</p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "myFunc();" /> 
      </form> 
   </body> 
</html>

输出 (Output)

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

新页面打开

onerror事件处理程序提供三条信息来识别错误的确切性质 -

Error message - 浏览器将针对给定错误显示的相同消息。
URL - 发生错误的文件。
Line number - 给定URL中导致错误的行号。

以下示例显示如何提取此信息。

例子 (Example)

<html> 
   <head> 
      <script type = "text/javascript"> 
         window.onerror  =  function (msg, url, line) {  
            document.write ("Message : " + msg );  
            document.write ("url : " + url );  
            document.write ("Line number : " + line );  
         } 
      </script> 
   </head> 
   <body> 
      <p>Click the following to see the result:</p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "myFunc();" /> 
      </form> 
   </body> 
</html>

自定义错误

JavaScript支持自定义错误的概念。以下示例解释了相同的内容。

示例1:默认消息的自定义错误

function MyError(message) { 
   this.name = 'CustomError'; 
   this.message = message || 'Error raised with default message'; 
} 
try { 
   throw new MyError(); 
} catch (e) {  
   console.log(e.name);      
   console.log(e.message);  // 'Default Message' 
}

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

CustomError 
Error raised with default message

示例2:具有用户定义的错误消息的自定义错误

function MyError(message) { 
   this.name = 'CustomError'; 
   this.message = message || 'Default Error Message';  
} try { 
   throw new MyError('Printing Custom Error message'); 
} 
catch (e) { 
   console.log(e.name);      
   console.log(e.message);  
}

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

CustomError 
Printing Custom Error message

ES6 - Validations

在客户端输入所有必要数据然后按下“提交”按钮后，通常用于在服务器上进行的Form validation 。如果客户端输入的数据不正确或者丢失了，则服务器必须将所有数据发送回客户端，并请求使用正确的信息重新提交表单。这真是一个漫长的过程，曾经给服务器带来了很多负担。

JavaScript提供了一种在将表单数据发送到Web服务器之前在客户端计算机上验证表单数据的方法。表单验证通常执行两个功能。

Basic Validation - 首先，必须检查表单以确保填写所有必填字段。它只需要循环遍历表单中的每个字段并检查数据。
Data Format Validation - 其次，必须检查输入的数据的格式和值是否正确。您的代码必须包含适当的逻辑来测试数据的正确性。

例子 (Example)

我们将举例说明验证过程。这是一个简单的html格式表单。

<html>
   <head> 
      <title>Form Validation</title> 
      <script type = "text/javascript"> 
         <!--  
            // Form validation code will come here.  
            //
         --> 
      </script> 
   </head> 
   <body> 
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());"> 
         <table cellspacing = "2" cellpadding = "2" border = "1"> 
            <tr> 
               <td align = "right">Name</td> 
               <td><input type = "text" name = "Name" /></td>
            </tr> 
            <tr> 
               <td align = "right">EMail</td> 
               <td><input type = "text" name = "EMail" /></td> 
            </tr> 
            <tr> 
               <td align = "right">Zip Code</td> 
               <td><input type = "text" name = "Zip" /></td> 
            </tr> 
            <tr> 
               <td align = "right">Country</td> 
               <td> 
                  <select name = "Country"> 
                     <option value = "-1" selected>[choose yours]</option> 
                     <option value = "1">USA</option> 
                     <option value = "2">UK</option> 
                     <option value = "3">INDIA</option> 
                  </select> 
               </td> 
            </tr> 
            <tr> 
               <td align = "right"></td> 
               <td><input type = "submit" value = "Submit" /></td> 
            </tr> 
         </table> 
      </form> 
   </body> 
</html>

输出 (Output)

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

新页面打开

基本表格验证

首先让我们看看如何进行基本表单验证。在上面的表单中，我们调用validate()来在onsubmit事件发生时验证数据。以下代码显示了此validate（）函数的实现。

<script type = "text/javascript"> 
   <!--  
      // Form validation code will come here. function validate() {    
         if( document.myForm.Name.value == "" ) {  
            alert( "Please provide your name!" );      
            document.myForm.Name.focus() ;      
            return false;  
         }  
         if( document.myForm.EMail.value == "" ) {  
            alert( "Please provide your Email!" );      
            document.myForm.EMail.focus() ;      
            return false; 
         }  
         if( document.myForm.Zip.value == "" ||            
         isNaN( document.myForm.Zip.value ) ||            
         document.myForm.Zip.value.length != 5 ) {  
            alert( "Please provide a zip in the format #####." );      
            document.myForm.Zip.focus() ;      
            return false;  
         }  
         if( document.myForm.Country.value == "-1" ) {  
            alert( "Please provide your country!" );      
            return false;  
         }  
         return( true );  
      }  
      //
   --> 
</script>

数据格式验证

现在我们将看到如何在将输入的表单数据提交到Web服务器之前验证它们。

以下示例显示如何验证输入的电子邮件地址。电子邮件地址必须至少包含“@”符号和点（。）。此外，'@'不能是电子邮件地址的第一个字符，最后一个点必须至少是'@'符号后面的一个字符

例子 (Example)

请尝试以下代码进行电子邮件验证。

<script type = "text/javascript"> 
   <!--  
      function validateEmail() { 
         var emailID = document.myForm.EMail.value;    
         atpos = emailID.indexOf("@");    
         dotpos = emailID.lastIndexOf(".");    
         if (atpos < 1 || ( dotpos - atpos < 2 )) {       
            alert("Please enter correct email ID")         
            document.myForm.EMail.focus() ;         
            return false;    
         }     
         return( true );  
      } 
      //
   --< 
</script>

ES6 - Animation

您可以使用JavaScript创建复杂的动画，但不限于以下元素 -

Fireworks
淡化效果
Roll-in or Roll-out
Page-in或Page-out
Object movements

在本章中，我们将了解如何使用JavaScript创建动画。

JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量DOM元素（，

或任何其他HTML元素）。

JavaScript提供了以下在动画程序中经常使用的函数。

setTimeout （function，duration） - 此函数从现在起持续几毫秒后调用该函数。
setInterval （function，duration） - 此函数在每个持续时间毫秒后调用该函数。
clearTimeout （setTimeout_variable） - 该函数清除setTimeout（）函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性，包括它在屏幕上的位置。您可以设置对象的顶部和左侧属性，以将其放置在屏幕上的任何位置。以下是相同的语法。

// Set distance from left edge of the screen.  
object.style.left = distance in pixels or points;    
or  
// Set distance from top edge of the screen.  
object.style.top = distance in pixels or points;

手动动画

因此，让我们使用DOM对象属性和JavaScript函数实现一个简单的动画，如下所示。以下列表包含不同的DOM方法。

我们使用JavaScript函数getElementById()来获取DOM对象，然后将其分配给全局变量imgObj 。
我们已经定义了一个初始化函数init()来初始化imgObj，我们已经设置了它的位置和左边的属性。
我们在窗口加载时调用初始化函数。
我们调用moveRight()函数将左边距离增加10个像素。您也可以将其设置为负值，将其移动到左侧。

例子 (Example)

请尝试以下示例

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; function init(){  
               imgObj = document.getElementById('myImage');
               imgObj.style.position = 'relative';     
               imgObj.style.left = '0px';   
            }     
            function moveRight(){  
               imgObj.style.left = parseInt(
               imgObj.style.left) + 10 + 'px';  
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 
   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Click button below to move the image to right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" /> 
      </form>
   </body>
</html>

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

新页面打开

自动化动画

在上面的示例中，我们看到了每次单击时图像如何向右移动。我们可以使用JavaScript函数setTimeout()自动执行此过程，如下所示。

这里我们添加了更多方法。所以，让我们看看这里有什么新东西。

moveRight()函数调用setTimeout（）函数来设置imgObj的位置。
我们添加了一个新函数stop()来清除setTimeout（）函数设置的计时器，并将对象设置在其初始位置。

例子 (Example)

请尝试以下示例代码。

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; var animate ; function init(){  
               imgObj = document.getElementById('myImage');     
               imgObj.style.position = 'relative';    
               imgObj.style.left = '0px'; 
            }  
            function moveRight(){  
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';    
               animate = setTimeout(moveRight,20); 
               // call moveRight in 20msec  
            }  
            function stop() {     
               clearTimeout(animate);    
               imgObj.style.left = '0px';   
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 
   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Click the buttons below to handle animation</p> 
         <input type="button" value="Start" onclick = "moveRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
      </form>    
   </body> 
</html>

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

新页面打开

滚动鼠标事件

这是一个简单的示例，显示了鼠标事件的图像翻转。

让我们看看我们在以下示例中使用的内容 -

在加载此页面时，“if”语句检查图像对象是否存在。如果图像对象不可用，则不会执行此块。
Image()构造函数创建并预加载一个名为image1的新图像对象。
为src属性分配名为/images/html.gif的外部图像文件的名称。
同样，我们在此对象中创建了image2对象并分配了/images/http.gif 。
# （哈希标记）禁用链接，以便浏览器在单击时不会尝试转到URL。此链接是图像。
当用户的鼠标移动到链接上时触发onMouseOut事件处理程序，当用户的鼠标离开链接（图像）时触发onMouseOut事件处理程序。
当鼠标在图像上移动时，HTTP图像从第一个图像变为第二个图像。当鼠标远离图像时，将显示原始图像。
当鼠标远离链接时，初始图像html.gif将重新出现在屏幕上。

<html> 
   <head> 
      <title>Rollover with a Mouse Events</title> 
      <script type = "text/javascript"> 
         <!--  
            if(document.images) {  
               var image1 = new Image();       
               // Preload an image image1.src = "/images/html.gif";  
               var image2 = new Image();       
               // Preload second image image2.src = "/images/http.gif";  
            }  
            //
         -->
      </script> 
   </head> 
   <body> 
      <p>Move your mouse over the image to see the result</p>
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"      
         onMouseOut = "document.myImage.src = image1.src;"> 
         <img name = "myImage" src = "/images/html.gif" /> 
      </a> 
   </body>
</html>

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

新页面打开

ES6 - Multimedia

JavaScript导航器对象包含一个名为plugins的子对象。此对象是一个数组，浏览器上安装的每个插件都有一个条目。 navigator.plugins对象仅由Netscape，Firefox和Mozilla支持。

例子 (Example)

以下示例显示如何列出浏览器中安装的所有插件。

<html> 
   <head> 
      <title>List of Plug-Ins</title> 
   </head> 
   <body> 
      <table border = "1"> 
         <tr>
            <th>Plug-in Name</th>
            <th>Filename</th>
            <th>Description</th>
         </tr> 
         <script LANGUAGE = "JavaScript" type = "text/javascript"> 
            for (i = 0; i<navigator.plugins.length; i++) {    
               document.write("<tr><td>");  
               document.write(navigator.plugins[i].name);    
               document.write("</td><td>");  
               document.write(navigator.plugins[i].filename); 
               document.write("</td><td>");  
               document.write(navigator.plugins[i].description);    
               document.write("</td></tr>");  
            }  
         </script> 
      </table> 
   </body>
</html>

输出 (Output)

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

新页面打开

检查插件

每个插件在数组中都有一个条目。每个条目都具有以下属性 -

name - 插件的名称。
filename - 为安装插件而加载的可执行文件。
description - 开发人员提供的插件说明。
mimeTypes - 插件支持的每种MIME类型都有一个条目的数组。

您可以在脚本中使用这些属性来查找已安装的插件，然后使用JavaScript，您可以播放相应的多媒体文件。看看下面的代码。

<html> 
   <head> 
      <title>Using Plug-Ins</title> 
   </head> 
   <body> 
      <script language = "JavaScript" type = "text/javascript"> 
         media  =  navigator.mimeTypes["video/quicktime"]; if (media) {  
            document.write("<embed src = 'quick.mov' height = 100 width = 100>");  
         } else {  
            document.write("<img src = 'quick.gif' height = 100 width = 100>");  
         }  
      </script> 
   </body>
</html>

Note - 这里我们使用HTML 《embed》 tag来嵌入多媒体文件。

控制多媒体

让我们举一个适用于几乎所有浏览器的真实示例。

<html> 
   <head> 
      <title>Using Embeded Object</title> 
      <script type = "text/javascript"> 
         <!--  
            function play() {  
               if (!document.demo.IsPlaying()) {      
                  document.demo.Play();  
               }  
            }  
            function stop() {  
               if (document.demo.IsPlaying()){      
                  document.demo.StopPlay();  
               }  
            }  
            function rewind() { 
               if (document.demo.IsPlaying()){      
                  document.demo.StopPlay();  
               }  
               document.demo.Rewind();  
            } 
            //
         --> 
      </script> 
   </head> 
   <body> 
      <embed id = "demo" name = "demo"
         src = "http://www.amrood.com/games/kumite.swf" 
         width = "318" height = "300" play = "false" loop = "false"     
         pluginspage = "http://www.macromedia.com/go/getflashplayer"     
         swliveconnect = "true"> 
      </embed> 
      <form name = "form" id = "form" action = "#" method = "get"> 
         <input type = "button" value = "Start" onclick = "play();" /> 
         <input type = "button" value = "Stop" onclick = "stop();" /> 
         <input type = "button" value = "Rewind" onclick = "rewind();" /> 
      </form>
   </body> 
</html>

ES6 - Debugging

不时，开发人员在编码时会犯错误。程序或脚本中的bug被称为bug 。

查找和修复错误的过程称为debugging ，是开发过程的正常部分。本章介绍了可以帮助您完成调试任务的工具和技术。

IE中的错误消息

追踪错误的最基本方法是打开浏览器中的错误信息。默认情况下，当页面上发生错误时，Internet Explorer会在状态栏中显示错误图标。

双击此图标将转到一个对话框，显示有关已发生的特定错误的信息。

由于此图标很容易被忽略，因此Internet Explorer会为您提供在发生错误时自动显示“错误”对话框的选项。

要启用此选项，请选择Tools → Internet Options → Advanced tab ，然后最后选中“ Display a NotificationaboutEvery Script Error ”框选项，如以下屏幕截图所示。

Firefox或Mozilla中的错误消息

其他浏览器（如Firefox，Netscape和Mozilla）会将错误消息发送到名为JavaScript Console或Error Console的特殊窗口。要查看控制台，请选择Tools → Error Console or Web Development 。

遗憾的是，由于这些浏览器在发生错误时不提供可视指示，因此您必须保持控制台处于打开状态，并在脚本执行时注意错误。

错误通知

在控制台或Internet Explorer对话框中显示的错误通知是语法和运行时错误的结果。这些错误通知包括发生错误的行号。

如果您使用的是Firefox，则可以单击错误控制台中可用的错误，转到出现错误的脚本中的确切行。

调试脚本

有多种方法可以调试JavaScript。以下是一些方法。

使用JavaScript验证器

检查JavaScript代码是否存在奇怪错误的一种方法是通过一个程序运行它来检查它以确保它是有效的并且它遵循该语言的官方语法规则。这些程序称为validating parsers或简称validating parsers器，通常带有商业HTML和JavaScript编辑器。

最方便的JavaScript验证器是Douglas Crockford的JavaScript Lint，它可以在Douglas Crockford的JavaScript Lint免费获得。

只需访问该网页，将JavaScript（仅限JavaScript）代码粘贴到提供的文本区域，然后单击jslint按钮。该程序将解析您的JavaScript代码，确保所有变量和函数定义遵循正确的语法。它还会检查JavaScript语句，例如if和while，以确保它们也遵循正确的格式。

将调试代码添加到您的程序

您可以使用程序中的alert()或document.write()方法来调试代码。例如，您可以编写如下内容 -

var debugging = true; var whichImage = "widget"; 
if( debugging )  
   alert( "Calls swapImage() with argument: " + whichImage ); 
   var swapStatus = swapImage( whichImage ); 
if( debugging )  
alert( "Exits swapImage() with swapStatus=" + swapStatus );

通过检查alert（）出现的内容和顺序，您可以非常轻松地检查程序的运行状况。

使用JavaScript调试器

debugger是一个将脚本执行的所有方面置于程序员控制之下的应用程序。调试器通过一个接口提供对脚本状态的细粒度控制，该接口允许您检查和设置值以及控制执行流程。

将脚本加载到调试器后，可以一次运行一行或指示在某些断点处停止。一旦执行停止，程序员就可以检查脚本及其变量的状态，以确定是否有问题。您还可以查看变量值的变量。

适用于Mozilla和Netscape浏览器的最新版本的Mozilla JavaScript调试器（代号为Venkman）可以从www.hacksrus.com/~ginda/venkman下载。

开发人员的有用提示

您可以记住以下提示，以减少脚本中的错误数量并简化调试过程 -

使用大量的评论。通过注释，您可以解释为什么以您的方式编写脚本，并特别解释代码的困难部分。
始终使用缩进来使代码易于阅读。缩进语句还使您可以更轻松地匹配开始和结束标记，花括号以及其他HTML和脚本元素。
编写模块化代码。尽可能将语句分组为函数。函数允许您对相关语句进行分组，并以最少的工作量测试和重用代码部分。
在命名变量和函数的方式上保持一致。尝试使用足够长的有意义的名称，并描述变量的内容或函数的用途。
命名变量和函数时使用一致的语法。换句话说，保持全部小写或全部大写; 如果您更喜欢Camel-Back符号，请始终如一地使用它。
以模块化方式测试长脚本。换句话说，在测试它的任何部分之前，不要尝试编写整个脚本。在添加代码的下一部分之前写一篇文章并使其工作。
使用描述性变量和函数名称，避免使用单个字符名称。
注意你的引号。请记住，引号在字符串周围成对使用，并且两个引号必须是相同的样式（单个或双）。
注意你的等号。您不应该使用单个=进行比较。
使用var关键字显式声明变量。

使用Node.js进行调试

Node.js包括一个功能齐全的调试实用程序。要使用它，请使用debug参数启动Node.js，然后使用要调试的脚本的路径。

node debug test.js

将启动指示调试器已成功启动的提示。

要在指定位置应用断点，请在源代码中调用调试器，如以下代码所示。

// myscript.js 
x = 5; 
setTimeout(() => { 
   debugger; 
   console.log('world'); 
}, 1000); 
console.log('hello');

以下是一组可以与Node一起使用的步进命令。

Sr.No	步进命令和描述
1	cont,c continue
2	next,n next
3	step,s 介入;涉足
4	out,o 走出去
5	pause 暂停代码。类似于开发人员工具中的暂停

可以在此处找到Node的调试命令的完整列表 - https://nodejs.org/api/debugger.html.

Visual Studio代码和调试

Visual Studio Code的一个关键特性是它对Node.js Runtime的内置调试支持。为了调试其他语言的代码，它提供了调试器扩展。

调试器提供了大量功能，允许我们启动配置文件，应用/删除/禁用和启用断点，变量或启用数据检查等。

有关使用VS Code进行调试的详细指南，请访问此处 - https://code.visualstudio.com/docs/editor/debugging

ES6 - Image Map

您可以使用JavaScript创建客户端图像映射。客户端图像映射由《img /》标记的usemap属性启用，并由特殊的“map”和《area》扩展标记定义。

将使用表格将要形成地图的图像插入到页面中元素正常，除了它带有一个名为usemap的额外属性。 usemap属性的值是“map”元素上name属性的值，您将要遇到它，前面有井号或井号。

元素实际上为图像创建了地图，通常紧跟在元素之后。它充当实际定义可点击热点的元素的容器。元素只携带一个属性，name属性，它是标识地图的名称。这就是元素知道要使用哪个元素的方式。

元素指定定义每个可点击热点边界的形状和坐标。

当鼠标移动到图像的不同部分时，以下代码组合了图像映射和JavaScript以在文本框中生成消息。

<html> 
   <head> 
      <title>Using JavaScript Image Map</title>
      <script type="text/javascript"> 
         <!--  
            function showTutorial(name) {  
               document.myform.stage.value = name  
            }  
            //
         --> 
      </script> 
   </head> 
   <body> 
      <form name = "myform"> 
         <input type = "text" name = "stage" size = "20" /> 
      </form> 
      <!-- Create  Mappings --> 
      <img src = "//images/usemap.gif" alt = "HTML Map" 
         border = "0" usemap = "#tutorials"/> 
      <map name = "tutorials"> 
         <area shape = "poly" 
            coords = "74,0,113,29,98,72,52,72,38,27" 
            href = "/perl/index.htm" alt = "Perl Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         <area shape = "rect"   
            coords = "22,83,126,125"  
            href = "/html/index.htm" alt = "HTML Tutorial" target = "_self"   
            onMouseOver = "showTutorial('html')"         
            onMouseOut = "showTutorial('')"/>  
         <area shape = "circle"  coords = "73,168,32"  
            href = "/php/index.htm" alt = "PHP Tutorial" target = "_self"   
            onMouseOver = "showTutorial('php')"       
            onMouseOut = "showTutorial('')"/> 
      </map> 
   </body>
</html>

成功执行上述代码后，将显示以下输出。您可以通过将鼠标光标放在图像对象上来感受地图概念。

新页面打开

ES6 - Browsers

重要的是要理解不同浏览器之间的差异，以便按照预期的方式处理每个浏览器。因此，了解您的网页运行的浏览器非常重要。要获取有关您的网页当前正在运行的浏览器的信息，请使用内置的导航器对象。

导航器属性

您可以在网页中使用几个与Navigator相关的属性。以下是名称及其说明的列表。

Sr.No	财产和描述
1	appCodeName 此属性是一个字符串，其中包含浏览器的代码名称，Netscape for Netscape和Microsoft Internet Explorer for Internet Explorer。
2	appVersion 此属性是一个字符串，其中包含浏览器的版本以及其他有用的信息，例如其语言和兼容性。
3	language 此属性包含浏览器使用的语言的双字母缩写。仅限网景。
4	mimTypes[] 此属性是一个包含客户端支持的所有MIME类型的数组。仅限网景。
5	platform[] 此属性是一个字符串，其中包含编译浏览器的平台。适用于32位Windows操作系统的“Win32”。
6	plugins[] 此属性是一个包含客户端上已安装的所有插件的数组。仅限网景。
7	userAgent[] 此属性是一个字符串，其中包含代码名称和浏览器版本。该值被发送到始发服务器以识别客户端。

导航方法

有几种特定于Navigator的方法。这是他们的名字和描述的列表。

Sr.No	方法和描述
1	javaEnabled() 此方法确定是否在客户端中启用了JavaScript。如果启用了JavaScript，则此方法返回true; 否则，它返回false。
2	plugings.refresh 此方法使新安装的插件可用，并使用所有新插件名称填充插件阵列。仅限网景
3	preference(name,value) 此方法允许签名脚本获取和设置一些Netscape首选项。如果省略第二个参数，则此方法将返回指定首选项的值; 否则，它设置值。仅限网景
4	taintEnabled() 如果启用了数据污染，则此方法返回true; 否则是假的

浏览器检测

以下JavaScript代码可用于查找浏览器的名称，然后可以向用户提供HTML页面。

<html> 
   <head> 
      <title>Browser Detection Example</title> 
   </head> 
   <body> 
      <script type = "text/javascript"> 
         <!--  
            var userAgent   = navigator.userAgent;  
            var opera       = (userAgent.indexOf('Opera') 
            ! = -1); var ie          = (userAgent.indexOf('MSIE') 
            != -1); var gecko        = (userAgent.indexOf('Gecko') 
            ! = -1); var netscape    = (userAgent.indexOf('Mozilla') 
            ! = -1); var version     = navigator.appVersion;  
            if (opera) {  
               document.write("Opera based browser");    
               // Keep your opera specific URL here.  
            } else if (gecko) {
               document.write("Mozilla based browser");   
               // Keep your gecko specific URL here.  
            } else if (ie) {   
               document.write("IE based browser");    
               // Keep your IE specific URL here.  
            } else if (netscape) {  
               document.write("Netscape based browser");    
               // Keep your Netscape specific URL here.  
            } else {  
               document.write("Unknown browser");  
            }   
            // You can include version to along with any above condition. 
            document.write("<br /> Browser version info : " + version );  
            //
         --> 
      </script> 
   </body> 
</html>

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

Mozilla based browser  
Browser version info : 5.0

（Windows NT 6.3; WOW64）AppleWebKit/537.36（KHTML，像Gecko）Chrome/41.0.2272.101 Safari/537.36

<上一篇.ES6 - 浏览器( Browsers)

ES6 - 有用的资源.下一篇>

ES6 - 教程

ES6 - 概述

ES6 - 环境

ES6 - 语法

ES6 - 变量

ES6 - 运算符

ES6 - 决策( Decision Making)

ES6 - 循环

ES6 - 功能( Functions)

ES6 - Events

ES6 - Cookies

ES6 - 页面重定向( Page Redirect)

ES6 - 对话框( Dialog Boxes)

ES6 - 无效关键字( Void Keyword)

ES6 - 页面打印( Page Printing)

ES6 - Objects

ES6 - Number

ES6 - Boolean

ES6 - Strings

ES6 - 新的字符串方法( New String Methods)

ES6 - Arrays

ES6 - Date

ES6 - Math

ES6 - RegExp

ES6 - HTML DOM

ES6 - Collections

ES6 - Classes

ES6 - 承诺( Promises)

ES6 - Modules

ES6 - 错误处理( Error Handling)

ES6 - 验证( Validations)

ES6 - 动画 Animation

ES6 - 多媒体( Multimedia)

ES6 - 调试 debug

ES6 - 图像映射( Image Map)

ES6 - 浏览器( Browsers)