反应JS ES6

ES6，也称为ECMA script 2015，是一种基于ECMA国际公司在ECMA-262和ISO/IEC 1623中规范和标准化的脚本语言，是ECMAScript语言规范标准的第六版。它的创建是为了标准化 JavaScript 语言以带来多种实现。它引入了一些新功能，例如用于迭代数组的新循环、块范围变量、模板字面量以及更多使 JavaScript 编程更容易的更改。 ECMA 脚本最常用于客户端脚本，特别是在万维网中。通过使用 node.js 编写基于服务器的应用程序和更广泛的服务有巨大的需求。

定义： ES6 是 ECMA 脚本编程语言，2015 年发布 5 之后的下一个版本。用于创建 JavaScript 语言的标准，使其可以带来多个独立的实现。

如何使用 ES6？
ES6 通常很多地方都支持，但是有 Internet Explorer 的问题。因此，当您刚开始使用 ES6 风格编写代码时，您无法确定是否每个人的浏览器都会以相同的方式运行。

如今，在 Babel 等实用程序的帮助下，ES6 被编译为“常规”ES5 语法。 Babel 是一个编译器，它可以帮助您将用 ES6 编写的开发代码转换为将在您的生产站点上运行的代码，通常也与 web-pack 捆绑和缩小。

工作：您在开发环境中编写您的“ .js ”文件，并且可以使用您想要的任何 ES6 语法。您不是直接加载它们，而是设置一个 web-pack 来使用 Babel 加载 js 文件。通常，您会想要运行 webpack-dev-server，所以当您进行更改时，这会自动发生。现在，不是加载 index.js，而是加载包含所有代码的 bundle.js。

let 关键字： ES6 引入了新的let关键字来声明变量。在 ES6 引入之前，声明变量的唯一方法是使用关键字var 。

使用var关键字声明的变量是功能范围的，而使用let关键字声明的变量是块范围的。此外，如果使用关键字var声明变量，则变量会在其范围内的顶部提升，但使用let关键字声明变量时不会提升。

块作用域意味着将所有 JavaScript 语句混杂到一个块中。它在一对大括号（即{}）之间创建了一个新范围。因此，如果您使用let关键字声明一个变量，它就不会存在于该循环之外。让我们看一个例子：

// ES6 Syntax
for(let i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i);
}

// Prints 'undefined'
console.log(i);  

// ES5 Syntax
for(var i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i); 
}

// Prints '10'
console.log(i); 

因此，您可以看到 ES6 语法中的变量i在 for 循环之外是不可访问的。这样做的好处是可以多次使用相同的变量名，因为范围仅限于块，即 {}。

const 关键字： const关键字用于定义常量。常量是只读的，这意味着您不能为它们重新分配任何新值。它们也像let关键字一样是块范围的。

// Creating a constant variable
const PI = 3.14;

// Prints '3.14'
console.log(PI); 

// Throws an Error
PI = 777; 

示例：说明如何更改对象属性或数组元素的代码，如下所示：

// Sample object with some properties
const Branch = {name: "IT", students: 55};

// Prints 'IT'
console.log(Branch.name); 

// Changing the object property value
Branch.name = "CSE";

// Prints 'CSE'
console.log(Branch.name); 

// Sample array with some values
const Fruits = ["apple", "mango", "banana"];

// Prints 'apple'
console.log(Fruits[0]); 

// Changing array element
Fruits[0] = "grapes";

// Prints 'grapes'
console.log(Fruits[0]); 

for-of 循环： for-of 循环用于非常轻松地迭代数组或任何其他可迭代对象。此外，使用这种类型的循环，循环内可迭代对象的每个元素都会被执行。

示例：说明如何在 ReactJs 中使用 for-of 循环的代码，如下所示：

// Iterating over array
let colors = ["red", "blue", "green", 
        "yellow", "pink", "purple"];

// Using the for-of loop
for (let color of colors) {

   // Prints 'red,blue,green,yellow,pink,purple'
   console.log(color); 
}

// Iterating over string
let name = "Alpha Charlie";

// Using the for-of loop 
for(let character of name) {

   // Prints 'A,l,p,h,a, ,C,h,a,r,l,i,e'
   console.log(character); 
}

模板字面量：模板字面量有助于提供一种简单而干净的方式来编写多行字符串并执行字符串插值。它还可以轻松地将变量或表达式嵌入到任何位置的字符串中。

现在，反引号（` `）字符用于创建模板字面量，而不是单引号和双引号。变量和表达式可以使用模板字面量语法放置在字符串中。

示例：在 ES6 中使用多行字符串。

// Multi-line string in ES6
let str = `Jack and Jill
   went up the hill.`;

// Sample values
let a = 30;
let b = 10;

// String with embedded variables
// and expression
let answer = 
  `The difference of ${30} and ${10} is ${a-b}.`;

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

示例：在 ES5 中使用多行字符串。

// Multi-line string in ES5
var str = 'Jack and Jill\n\t'
   + 'went up the hill.';

// Sample values
var a = 30;
var b = 10;

// Creating string using variables
// and expression
var answer = 'The difference of ' + a 
    + ' and ' + b + ' is ' + (a-b) + '.';

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

箭头函数：箭头函数使创建函数变得非常容易。它是一个表达式闭包，可以创建漂亮而紧凑的函数，尤其是在处理回调、列表或错误处理时。

// Arrow functions
arr.map((func) => {
  return func + 1;
});

此外，如果您只传递一个参数，则不需要括号。此外，如果您只返回一个值，则没有括号和 return 语句：

arr.map(func => func + 1);

如果不使用箭头函数，语法将如下所示：

// Without Arrow functions
arr.map(function (func) {
  return func + 1;
});