变量类型
区别var
let
const
主要从
scope: functional scope?block scope?
是否是块级作用域hoisting or not?
是否存在变量提升can be redeclared?
是否可以重复声明can be reassigned?
是否可以重复赋值
这四方面。
ES6引入let和const主要是为了解决var声明变量造成的
- 不可用于定义常量
- 可以重复声明变量
- 存在变量提升
- 不支持会级作用域
的问题。
用const
定义的原始类型是不可以重新赋值的,但是复杂类型object可以对其属性进行修改。
1 | // 不能给常量重新赋值,但如果是引用类型的话可以进行修改。 |
用var
定义的变量通过函数或者闭包拥有作用于;用let
定义的变量不仅可以用函数/闭包隔离,还可以通过块级作用域隔离。
块级作用域就是用一组大括号定义一个块,用let
定义的变量在大括号外部访问不到,且let
声明不会污染全局作用域。
箭头函数
箭头函数(Arrow Functions)适用于需要使用匿名函数的地方。
1 | (multiple/singleParam) => {statement} |
箭头函数的书写与花括号圆括号
箭头左边才有可能出现()
,这是参数的圆括号。
依据箭头函数代码块语句是一句还是多句,可以分成以下两个情况:
箭头的右边出现
{}
,这是函数体的花括号,代表函数体内部会有多条语句,且会出现return语句。箭头的右边没有花括号,代表函数体就一条语句,且这条语句自动会被作为箭头函数的return value。
如果返回的是一个对象,需要再对象的花括号外层嵌套一个小圆括号,例如
() => ({name: 'greg', id: 12345})
。
箭头函数与函数组件
有的时候会使用匿名函数来创建函数组件,这种形式被称作arrow function component,并且把该匿名函数赋值给一个const变量,同时作为moudle被export出去。形式如下:
1 | export const TryToLogin = () => { |
一般函数组件的写法。当不给函数传递参数时,就代表该函数组件起一个组装UI或者路由的作用,比如下面这个顶层App组件。当为函数传递参数时,一般又是要进行数据传递的组件,会需要export。
1 | function App() { |
class组件与函数组件比较:
1 | class Welcome extends React.Component { |
render(){ return( )}
这个模式在class组件中十分常见,代表的是UI渲染部分。
在return语句内部本来应该返回的是类HTML语言,但是由于JSX语法的出现,只要我们把类JavaScript的语法放到花括号中,我们就可以在return语句内部写JavaScript。当然JavaScript语法的返回内容本质上还是类HTML语言。
1 | import React from 'react'; |
单闭合标签调用与JSX语法引用
无论组件时函数组件还是class组件,使用匿名函数定义的还是普通名称函数定义的,在调用组件的时候,都是将函数名称/组件名称/或者复制匿名函数到变量的名称(注意都需要大写)以HTML element的单闭合标签来使用。这个过程就好像是在调用函数,关注组件的return语句部分。
1 | <TryToLogin /> |
但是有的时候又很奇怪为什么不用花括号取包裹这些标签,比如说在把模块import到当前文件后,使用{Welcome}/{App}/{TryToLogin}
这种语法,需要指出的是,这个花括号只是让我们在HTML中能用JavaScript,如果用花括号包裹着这些内容,那就好像是把函数声明放在了html文件中,不会有任何渲染。
模版字面量
模版字面量(Template Literals)通过在模版字符串中引入占位符${}
实现允许嵌入表达式的字符串字面量。
1 | let name = '小煤球'; |
功能包括但不限于:
可以换行,所有的空格和换行都会被保留,代码中直接换行就能实现字符串输出换行
占位符中的表达式被直接计算输出
解构赋值
用于数组结构和对象解构。
解构数组,最外面用方括号。
1 | var foo = ["one", "two", "three", "four"]; |
解构对象,最外面用花括号。
1 | var o = {p: 42, q: true}; |
解构赋值有哪些用?交换变量swap,解析一个从函数返回的数组/对象,忽略函数返回的数组/对象中不需要的值等。MDN 解构赋值
展开语法
展开语法(Spread Syntax)可以使可迭代对象在某一处被展开,例如
- 在函数调用或数组构造时,将数组表达式在语法层面展开,当作函数参数或数组元素传入
myFunction(...iterableObj)
:用于代替Function.prototype.apply(null, ...iterableObj)
[...iterableObj, '4', 'five', 6]
:实现数组拷贝及连接
- 在构造对象字面量时,将对象表达式按照key-value展开
let objClone = {...obj}
:实现对象字面量的拷贝及连接
- 实现数组拼接对象合成
1 | let arr1 = [ 'a', 'b', 'c']; |
剩余语法
剩余语法(Rest Syntax)和展开语法进行的是相反的操作,展开语法将某一东西展开为许多元素,剩余语法将多个元素收集合并成一个东西。
剩余语法允许我们将不被预期的、多余的(没有对应形参的实参)、不定量的参数收集成一个数组(是真正的Array
实例)。
function(a, b, ...theArgs){ }
类 继承
类语法本质是基于原型的继承的语法糖。关于一个类包括定义类和类体方法。
定义类
方法有两种:类声明和类表达式。
类声明
class class-name{}
类表达式,可以分为具名类和匿名类
let var-name = class {}
let var-name = class class-name {}
类体方法
构造函数:constructor
静态方法: static
关键字,常用于为一个应用程序创建工具函数
属性:
- 实例属性定义在类的方法里
- 静态的或原型的数据属性通过点访问形式定义在类的外面
extends
子类
class sub-class-name extends super-class
Promise对象
通过创造Promise
链来实现链式调用,将前一个函数的返回情况绑定在new Promise
对象上,而后调用then()函数
- 本文标题:JavaScript ES6 语法特征
- 本文作者:徐徐
- 创建时间:2020-10-05 16:45:30
- 本文链接:https://machacroissant.github.io/2020/10/05/es6/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!