变量类型

区别var let const主要从

scope: functional scope?block scope?是否是块级作用域
hoisting or not?是否存在变量提升
can be redeclared? 是否可以重复声明
can be reassigned? 是否可以重复赋值

这四方面。

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

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

的问题。

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

// 不能给常量重新赋值，但如果是引用类型的话可以进行修改。 
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)适用于需要使用匿名函数的地方。

(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出去。形式如下：

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

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

function App() {
  return (
      // HTML内置标签，定义react component后的标签
      // 全部大写
      // 路由标签
  )
}

class组件与函数组件比较：

class Welcome extends React.Component {
  render() {
    return (
        // UI显示
    );
  }
}

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

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

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)通过在模版字符串中引入占位符${}实现允许嵌入表达式的字符串字面量。

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

功能包括但不限于：

可以换行，所有的空格和换行都会被保留，代码中直接换行就能实现字符串输出换行
占位符中的表达式被直接计算输出

解构赋值

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

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

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

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

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}：实现对象字面量的拷贝及连接

实现数组拼接对象合成

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()函数