脑图(H5新增标签,鼠标事件,MVC和MVVM的关系图解,ES6相关)

一. H5新增标签

二. 鼠标事件

三. MVC和MVVM的关系图解

四. ES6相关 -- ES6常用

1. ES6新特性

1.变量声明const和let

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

2. 模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

注意: 模板字符串中的换行和空格都是会被保留的

3.函数

函数默认参数

只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值。

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined

箭头函数 -- 当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。

箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

注意点：没有 this、super、arguments 和 new.target 绑定。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:

var people = name => 'hello' + name
//参数name就没有括号

4. 展开运算符

在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开。先来看一个例子它是如何使用的。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

展开运算符还常常运用在解析结构之中，例如我们在Raect封装组件的时候常常不确定props到底还有多少数据会传进来，就会利用展开运算符来处理剩余的数据。

// 这种方式在react中十分常用
const props = {
  size: 1,
  src: 'xxxx',
  mode: 'si'
}

const { size, ...others } = props;

console.log(others)

// 然后再利用暂开运算符传递给下一个元素，再以后封装react组件时会大量使用到这种方式，正在学习react的同学一定要搞懂这种使用方式
<button {...others} size={size} />

5. 更方便的数据访问 -- 解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程.

ES5我们提取对象中的信息形式如下：

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如

 //对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

解构赋值

• 解构的语法是用花括号{}
• 对象解构，使用var {name} = character; 可以直接获取character中的类。
• {}中还可以使用逗号表达式，引用多个属性。还可以在变量后采用 : [别名]的方式取别名
• 解构的值还可以是对象，所以可以多层解构。
• 解构还可以使用默认值。var {gender = 'male'} = character; 如果对象中不存在则使用默认值；
• 解构可以使用计算属性，但是必须命别名，不然浏览器识别不了。
• 数组解构类似对象解构，还可以在位置留白，也可以只取部分数据。
• 函数参数同样可以解构（一般会配置默认值）。配合剩余参数可以很灵活的实现某些动态传参。

下面附上一张ES6的图解:

拓展:

什么是ES6语法糖?(语法糖是什么?)

语法糖：也译为糖衣语法，是由语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会</p> 实际上从面向过程到面向对象也是一种语法糖，C语言可以通过它的指针、类型转换，结构体实现面向对象的编程风格，但是C++更进一步的推广了这种风格，更加易用，不过到了C#把OO的风格发挥得淋漓尽致。OO的编程风格对于面向过程来说是不是一种语法糖呢？如果生硬地照此理解，只有计算机硬件指令才不算语法糖，而其他一切利用编译器、汇编器将代码抽象，和自然语言更相近的手段都算语法糖。 ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。