JavaScript ES6 - React 01

react-vernacular-campaign-01 JavaScript ES6

序言

在了解 React 前端框架之前,让我们先让读者温习一下 JavaScript ES6 的知识,我们将在本篇文章中介绍 ES6。

  1. JavaScript 的历史
  2. let, const, var 差异
  3. 模板字面
  4. 箭头功能

以上中文翻译基于 MDN 官方翻译,如有错误,欢迎读者留言。

JavaScript ES6 历史

布兰登-艾奇于 1995 年出版、 JavaScript,最初JavaScript主要用于在网页中实现一些简单的功能。后来,出现了 Ajax、Jquery、React.js、Vue.js、Node.js、TypeScript,JavaScript 逐渐成为使用最广泛的编程语言之一,然后成为主流,它既可用于前端开发,也可用于后端开发。

有些读者可能知道 ES5 和 ES6,但 ES 是什么?

ES 的全称是 ECMAScript,其中 ECMA 代表欧洲计算机制造商协会(European Computer Manufacrurers Association),末尾的数字代表代数,因此 ES5 是第五代 ECMAScript,ES6 是第六代 ECMAScript。

那么,为什么不经常听到 ES1 至 ES4 代的消息呢?

其主要原因是,1997 年 ES1 推出后,它仍然只是简单地实现了一些功能。ES2、ES3 和 ES4 修正了一些问题,或增加了新的正则表达式和字符串处理功能,然后 ES5 在 2009 年问世,真正实现了大量功能,包括扩展数组方法、对象属性和 JSON。

JavaScript ES6

ES6 出现于 2015 年,增加了许多方便实用的功能,这些功能已在各种 JavaScript 应用程序中实现。

想了解更多历史的人,还可以参考

var, let, const 差异

1. var

var 是 ES5 的早期声明方法。它可以使用 var 声明,并具有函数作用域或全局作用域。

2. let

let is a relatively recent ES6 declaration method that can be declared using let. In addition to implementing the Lexical Variable Scope, the use of curly braces also creates a Code Block, which is block-scoped in a let declaration.

3. const

const 是最新的 ES6 声明之一,可以使用 const 声明,并且具有块作用域。
const 和 let 的最大区别在于,const 是一个不会被重新分配的值。

var 以及 let 差異

为了快速演示这两段代码之间的区别,让我们先在 ES5 中声明 var,我们可以看到,在判别式中再次声明 var 并将代码块留在判别式中后,变量仍然具有代码块中声明的值。

				
					var input = "Global"; if(input){ var input = "Block"; console.log("input"); // 会输出变数Block } console.log("input"); // 会输出变数Block
				
			

如果再次使用 ES6 的 let 声明,可以看到在判别式中再次声明时,只会影响代码块,变量不会影响外部全局变量。

				
					let input = "Global"; if(input){ let input = "Block"; console.log("input"); // 会输出Block } console.log("input"); // 会输出Global
				
			

从上面的例子中可以看出,在代码块中使用 ES5 var 声明会污染其他同名变量,因此现在的主流声明方式是使用 let 或 const。

模板文字

这使用了 MDN WEB 虽然有些地方也将其称为 Template String,但使用的是该术语的名称和中文译名。
在传统的 JavaScript 语法中,我们使用加号来连接字符串,但这种传统的语法并不直观。

				
					console.log("Hello, This is "+ Name + " and My Phone Number is" + PhoneNumber)
				
			

在模板文字语法出现后,我们可以使用回车键来括弧字符串,并使用钱号和大括号 ${} 在字符串中放置变量。如果我们重写上面的代码,就会变成下面这样。您可以看到,整个字符串变得更加简洁易懂。

				
					console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)
				
			

箭头功能

宣告( Define )

在传统的 ES5 语法中,声明使用以下语法,以关键字 function 开头,然后是函数名称,并用大括号将函数内部的操作括起来。

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

另一种声明类型是函数表达式,它首先声明一个变量,然后将一个函数赋值给该变量。

提吊( Hoist )

这里有两种不同类型的声明:字母声明和字母指定。如果是函数声明,则会被吊起,但如果是函数指定,则不会。

				
					printHelloWorld() function printHelloWorld() { console.log("Hello World") } // 这样执行是没有问题的printHelloWorld() var printHelloWorld = function() { console.log("Hello World") } // 这样执行是有问题的
				
			

参数传输

在传统的 ES5 中,可以在函数中传递参数,这在形式上被称为 Argument。

				
					function printHello(name) { console.log(`Hello,My Name is ${name}`) } printHello("Hogan")
				
			

但是,如果在使用函数时没有给出引用数字的值,该怎么办呢?

将显示 Hello,My Name is undefined

在 ES6 中,还有一个函数预设,因此您可以在函数声明中直接将引用赋值给一个值,从而避免这个问题。

				
					function printHello(name = "Hogan") { console.log(`Hello,My Name is ${name}`) } printHello() // Hello,My Name is Hogan printHello("Bo Bo") // Hello,My Name is Bo Bo
				
			

箭头功能

箭头函数(Arrow Function)是 ES6 的新特性之一,它允许您在不使用函数关键字,甚至不给出函数名和返回值的情况下声明函数。

箭头函数将在未来的 React 实现中经常使用,是一项非常重要和有用的功能。

下面是使用关键字 function 和 return 声明传统 ES5 函数的方法。

				
					var printHello = function(name) { return ("Hello " + name) } console.log(printHello("Hogan"))
				
			

箭头函数可改写如下

				
					const printHello = (name) => `Hello ${name}` console.log(printHello("Hogan"))
				
			

结论

本文将介绍 JavaScript ES6 中的一些新功能和概念,并使用代码对其进行解释。

在了解 React 前端框架语法之前,让我们先回顾一下 JavaScript 的原始语法。

如果您有任何建议或问题,欢迎留言!

如果您喜欢 "React Vernacular Campaign "系列,请点赞并分享,让更多人看到!

其他文章参考

大公司为何使用 Nx?Monorepo 工具 5 分钟快速构建

你真的了解 Monorepo 吗?5 分钟了解前端大型架构。

什么是 Zustand?React 前端状态管理

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

zh_CN简体中文