ES6学习-浅层次梳理，点到为止

简介

ES全程EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性！

为什么要学习新特性？

• 1.语法简介，功能丰富
• 2.框架开发应用
• 3.前端开发职位要求

特性

let变量声明

• 1.变量不能重复声明
• 2.块级作用域，全局，函数，eval
• 3.不存在变量提升
• 4.不影响作用域链

let arr=[1,2,3]
for(let i=0;i<arr.length;i++){
    console.log(i)
}// 1,2,3

for(var i=0;i<arr.length;i++){
    console.log(i)
}//4,4,4

const声明常量

• 1.一定要赋初始值
• 2.一般常量使用大写
• 3.常量的值不能修改
• 4.块级作用域
• 5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

模板字符串

• 1.内容中可以直接出现换行符

let str=`<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>`

• 2.变量拼接

let day='星期四'
let out=`今天是${day}`
console.log(out)

对象的简化

let name='41'
let change=function(){
    console.log('我们可以改变你！！')
}
const school={
    name,
    change,
    improve(){
          console.log('提高技能')
    }
}

箭头函数

let fn=(a,b)=>{
    return a+b
}

• 1.this是静态的，this始终指向函数声明时所在作用域下的this的值

function getName(){
    console.log(this.name)
}
let getName2=()=>{
    console.log(this.name)
}
window.name='41'
const school={
    name:'42'
}
getName.call(school)
getName2.call(school)

// 42 41

• 2.不能作为构造实例化对象
• 3.不能使用arguments变量
• 4.箭头函数简写，形参只有一个的时候可以省略小括号

函数参数的默认值

• 1.形参初始值，具有默认值的参数，一般位置要靠后(潜规则)

  rest参数

function fn(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args)
}
fn(1,2,3,4,5,6)

扩展运算符

• ...扩展运算符能将数组转换为逗号分隔的参数序列

  Symbol

• 创建Symbollet s=Symbol('41')
• Symbol.for 创建 let s2=Symbol.for('41')

前者无论如何不会===，后者数值相等可以返回true

• 不能与其他数据进行运算
• ES6还提供了11个内置的Symbol值，实际项目很少用到，这里不多介绍了

  迭代器

  迭代器时一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。
• 使用for…of遍历数组(类似链表)

生成器

• 生成器其实就是一个特殊的函数
• 异步编程，纯回调函数，node fs ajax mongodb
• 函数代码的分隔符

function *gen(){
    console.log(111)
    yield '一只没有耳朵'
    console.log(222)
    yield '一只没有尾巴'
    console.log(333)
    yield '真奇怪'
    console.log(444)
}
let iterator =gen()
iterator.next()
iterator.next()
iterator.next()
iterator.next()
// 111 222 333 444


// 遍历
for(let v of gen()){
    console.log(v)
}
// 一只没有耳朵 一只没有尾巴 真奇怪

Promise

Promise时ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

集合Set()

ES6提供了新的数据结构Set，它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for..of进行遍历

属性和方法	作用
size	返回集合的元素个数
add	添加一个新元素，返回当前集合
delete	删除元素，返回boolean值
has	检测集合中是否包含某个元素，返回boolean值

Map()

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但键的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map也实现了iterator接口，所以可以使用扩展运算符和for..of进行遍历
|属性和方法|作用 |
|–|–|
|size |返回Map集合的元素个数 |
|set |添加一个新元素，返回当前Map |
| get |返回键名对象的键值 |
|has |检测Map中是否包含某个元素，返回boolean值 |
| clear |清空Map，返回undefined |

class类

ES6提供了更接近传统语言的写法，引入Class(类)这个概念，作为对象的模板，通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰，更像面向对象的语法而已

数值扩展

• 最小精度Number.EPSILON
• 检测一个数值是否为有限数Number.isFinite()
• 是否为NaNNumber.isNaN()
• 字符串转整数浮点数 Number.parseInt() Number.paerseFloat()

  对象方法扩展

• 判断两个值是否完全相等Object.is()
• 对象和合并Object.assign()
• 设置原型对象Object.setPrototypeof

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

• 防止命名冲突
• 代码复用
• 高维护性
• ES6之前的模块化规范有

规范
CommonJS	NodeJS，Browserify
AMD	requireJS
CMD	seaJS

简单来说就是export import

babel语法糖