JavaScript ES6 语法特征
徐徐 抱歉选手

变量类型

区别var let const主要从

  • scope: functional scope?block scope?是否是块级作用域

  • hoisting or not?是否存在变量提升

  • can be redeclared? 是否可以重复声明

  • can be reassigned? 是否可以重复赋值

这四方面。

ES6引入let和const主要是为了解决var声明变量造成的

  • 不可用于定义常量
  • 可以重复声明变量
  • 存在变量提升
  • 不支持会级作用域

的问题。

const定义的原始类型是不可以重新赋值的,但是复杂类型object可以对其属性进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 不能给常量重新赋值,但如果是引用类型的话可以进行修改。 
const E = 2.718;
E = 2.71;
console.log(E);
运行结果:
Assignment to constant variable.

// 复杂类型
const LK = {
name:'itLike',
intro: '喜欢IT, 就上撩课(itLike.com)'
};

LK.name = '撩课';
console.log(LK.name)//itLike;

var定义的变量通过函数或者闭包拥有作用于;用let定义的变量不仅可以用函数/闭包隔离,还可以通过块级作用域隔离。

块级作用域就是用一组大括号定义一个块,用let定义的变量在大括号外部访问不到,且let声明不会污染全局作用域。

箭头函数

箭头函数(Arrow Functions)适用于需要使用匿名函数的地方。

1
2
3
4
5
6
7
8
(multiple/singleParam) => {statement}
(multiple/singleParam) => expression
(multiple/singleParam) => {return expression}
//当只有单一的return语句时可以直接输出expression,没有括号和return语句
//括号既用在多个或单个参数传入
//单个参数传入不适用括号
singleParam => {statement}
() => {statement}

箭头函数的书写与花括号圆括号

箭头左边才有可能出现(),这是参数的圆括号。

依据箭头函数代码块语句是一句还是多句,可以分成以下两个情况:

  • 箭头的右边出现{},这是函数体的花括号,代表函数体内部会有多条语句,且会出现return语句

  • 箭头的右边没有花括号,代表函数体就一条语句,且这条语句自动会被作为箭头函数的return value

    如果返回的是一个对象,需要再对象的花括号外层嵌套一个小圆括号,例如() => ({name: 'greg', id: 12345})

箭头函数与函数组件

有的时候会使用匿名函数来创建函数组件,这种形式被称作arrow function component,并且把该匿名函数赋值给一个const变量,同时作为moudle被export出去。形式如下:

1
2
3
4
5
6
export const TryToLogin = () => {
return (
// 返回的内容是大写的HTML标签构成的JSX对象
// 必须要有一个根节点包裹,不能同时多个并列标签直接返回
)
}

一般函数组件的写法。当不给函数传递参数时,就代表该函数组件起一个组装UI或者路由的作用,比如下面这个顶层App组件。当为函数传递参数时,一般又是要进行数据传递的组件,会需要export。

1
2
3
4
5
6
7
function App() {
return (
// HTML内置标签,定义react component后的标签
// 全部大写
// 路由标签
)
}

class组件与函数组件比较:

1
2
3
4
5
6
7
class Welcome extends React.Component {
render() {
return (
// UI显示
);
}
}

render(){ return( )}这个模式在class组件中十分常见,代表的是UI渲染部分。

在return语句内部本来应该返回的是类HTML语言,但是由于JSX语法的出现,只要我们把类JavaScript的语法放到花括号中,我们就可以在return语句内部写JavaScript。当然JavaScript语法的返回内容本质上还是类HTML语言。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
const App = () => {
var users = [
{ name: 'Robin' },
{ name: 'Markus' },
];
return (
<ul>
{users.map(user => <li>{user.name}</li>)}
// 第一层花括号是因为return语句返回的应该是html语言,但是users.map显然是javascript语言,所以我们需要用上花括号。
// map语句内部表明用第一层花括号括起来的JavaScript语言返回的仍然是html语言/注意li标签。
// 但是li标签内部又用了一层花括号,因为user.name是javascript语言。
</ul>
);
export default App;

单闭合标签调用与JSX语法引用

无论组件时函数组件还是class组件,使用匿名函数定义的还是普通名称函数定义的,在调用组件的时候,都是将函数名称/组件名称/或者复制匿名函数到变量的名称(注意都需要大写)以HTML element的单闭合标签来使用。这个过程就好像是在调用函数,关注组件的return语句部分

1
2
3
<TryToLogin />
<Welcome />
<App />

但是有的时候又很奇怪为什么不用花括号取包裹这些标签,比如说在把模块import到当前文件后,使用{Welcome}/{App}/{TryToLogin}这种语法,需要指出的是,这个花括号只是让我们在HTML中能用JavaScript,如果用花括号包裹着这些内容,那就好像是把函数声明放在了html文件中,不会有任何渲染。

模版字面量

模版字面量(Template Literals)通过在模版字符串中引入占位符${}实现允许嵌入表达式的字符串字面量。

1
2
3
4
5
let name = '小煤球';
let sex = '公';
let result = `我叫 ${name} , 我是 ${sex} 的`;
console.log(result);
// 我叫 小煤球 , 我是 公 的

功能包括但不限于:

  • 可以换行,所有的空格和换行都会被保留,代码中直接换行就能实现字符串输出换行

  • 占位符中的表达式被直接计算输出

解构赋值

用于数组结构和对象解构。

解构数组,最外面用方括号。

1
2
3
4
5
6
7
8
9
10
11
var foo = ["one", "two", "three", "four"];

var [one, two, ...rest] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(rest); // ["three", "four"] 解构赋值结合剩余语法

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

解构对象,最外面用花括号。

1
2
3
4
5
var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

解构赋值有哪些用?交换变量swap,解析一个从函数返回的数组/对象,忽略函数返回的数组/对象中不需要的值等。MDN 解构赋值

展开语法

展开语法(Spread Syntax)可以使可迭代对象在某一处被展开,例如

  • 在函数调用或数组构造时,将数组表达式在语法层面展开,当作函数参数或数组元素传入

myFunction(...iterableObj):用于代替Function.prototype.apply(null, ...iterableObj)

[...iterableObj, '4', 'five', 6]:实现数组拷贝及连接

  • 在构造对象字面量时,将对象表达式按照key-value展开

let objClone = {...obj}:实现对象字面量的拷贝及连接

  • 实现数组拼接对象合成
1
2
3
4
5
6
7
8
9
10
11
12
let arr1 = [ 'a', 'b', 'c'];
let arr2 = [1, 2, 3];
let result = [...arr1, ...arr2];
console.log(result);
// [ "a", "b", "c", 1, 2, 3 ]

let smallDog = {name:'小煤球', age: 1};
let bigDog = {name: 'Python', age: 2};
let dog = {...smallDog, ...bigDog};
console.log(dog);
// {name: "Python", age: 2}
// 注意: 如果对象中的属性一致, 会被覆盖

剩余语法

剩余语法(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 许可协议。转载请注明出处!
 评论