js总结篇之—ES6 （看完你就学会整个js）

1.ECMAScript

## 介绍
* 一般来说ECMAScript可以认为是javascript
* javascript对ECMAScript进行了扩展
### javascript组成
* ECMAScript(核心)
* 扩展-->浏览器端
  * DOM
  * BOM
* 扩展-->服务器端
  * NODEJS
## ES版本变化
1. ES5 发布于2009年
2. ES6 发布于2015年
3. ES7 发布于2016年

2.数组函数的扩展

* Array.prototype.indexOf(value)
  * 返回value在Array中第一次出现的下标
* Array.prototype.lastIndexOf(value)
  * 返回value在Array中第一次出现的下标
* Array.prototype.forEach(function(item, index, arr){})
  * 遍历整个数组
* Array.prototype.map(function(item, index){})
  * 遍历整个数组并将每个值按照回调函数的return的结果进行修改,返回值为修改好的数组 
* Array.prototype.filter(function(item, index){})
  * 遍历整个数组并将每个值按照回调函数的return的结果进行过滤,不满足则丢弃,返回值为修改好的数组 

函数的扩展
* Function.prototype.bind(obj)
  * 将函数内的this值修改为obj并将修改好的函数返回， 常用作为回调函数
* Function.prototype.call(obj, para1, para2...)
  * 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回, 与apply区别在于参数不同
* Function.prototype.apply(obj, [para1, para2...])
  * 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回

3.let和const

### let
* 作用与var类似, 用于声明变量
* 特点：
  * 在块作用域里有效
  * 不能重复声明
  * 不会预处理, 不会发生提升
* 应用：
  * 循环遍历加监听
  * 取代var是趋势
### const
* 特点：
  * 值不能修改
  * 其余与let相同
* 应用：
  * 保存不需要修改的数据


<script type="text/javascript">
    const sex = '男';
    console.log(sex);
    //sex = '女';//不能修改
    console.log(sex);
</script>

4.结构赋值

* 从对象或者数组中提取数据并将其赋值给变量(多个)
* 给对象解构赋值
  * `let {a,b} = {a: 'bbb', b: 'ccc'}`
  * 按照对象名来进行取值
* 给数组解构赋值
  * `let [a,b] = [1, 'aaaa']`
  * 按照下标顺序赋值
* 用途：
  * 给多个参数赋值
* 应用给函数形参与实参



<script type="test/javascript">
//ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
//解构赋值
//1数组的结构
const F=['你','好']
let [ni,hao]=F
console.log(ni)
console.log(hao)
//2对象的结构
 const zhap={
	 name:'篮球'
 }
 let {name}=zhap;
 console.log(name)
</script>

5.模板字符串

* 简化字符串的拼接
* 使用``对字符串进行拼接
* 变量的部分使用${xxx}代替



<script type="text/javascript">
    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>

6.对象简写

对象的简写
* 属性值与属性名相同时可以只写属性名
* 函数的function可以省略


<script type="text/javascript">
    let x = 3;
    let y = 5;
    //普通额写法
//    let obj = {
//        x : x,
//        y : y,
//        getPoint : function () {
//            return this.x + this.y
//        }
//    };
    //简化的写法
    let obj = {
        x,
        y,
        getPoint(){
            return this.x
        }
    };
    console.log(obj, obj.getPoint());
	
	//ES6中允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
	let name='mm'
	let chage=function(){
		console.log("特别好")
	}
	const school={
		name,
		chage,
		improve(){
			console.log("我们可以提高你的技能")
		}
	}
</script>

7.箭头函数

不能作为构建实例化对象
不能使用arguments变量

<script type="text/javascript">
 //ES6允许使用箭头函数 =>
//  声明一个函数
 let f=function f(){
  console.log("一般函数")
 }
// 箭头函数
let jia=()=>{
    console.log("箭头函数")
}
// 调用函数
jia()
//this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
    console.log(this.name)
}
let getName2=()=>{
    console.log(this.name)
}
//设置window对象的name属性
window.name='你好'
const school={
    name:"nihao"
}
//直接调用
getName();
getName2()
//call方法调用
getName.call(school);
getName2.call(school)
// 箭头函数的简写
//   当只有一个参数的时候，省略小括号
let t= n =>{
    return n+1
}
console.log(t(1))
//省略花括号，当代码体只有一句语句的时候,此时return必须省略，而且语句的执行结果就是函数的返回值
let pow =(n)=> n*n;
console.log(pow(2))
</script>


* 特点：
  * 简洁
  * 箭头函数的this与谁调用无关，而是定义时所处对象的this
    * 扩展理解
      1. 先看箭头函数外层有没有函数，有则为普通函数的this，没有就是window
      2. 如果外层也是箭头函数继续重复第一步的操作

8.点点点（…）扩展运算符

let e=['我的','你的','好']
   //声明一个函数
   function c(){
       console.log(arguments)
   }
   c(...e)
   const r=['2','3']
   //数组的合并
   const er=[...e,...r]
   console.log(er)


//当可变参数前也声明了形参时会自动从自己里剔除相应数量形参
function foo(a, ...value){
    console.log(value)
}
foo(1,2,3,4,5)  //2,3,4,5

 扩展用法

let a = [1,6]
let b = [2,3,4,5]
a = [1, ...b, 6]
console.log(a)  //[1,2,3,4,5,6]

9.形参默认值

//形参初始值，具有默认参数一般靠后
 function add(a,b,c=10){
       return a+b+c
   }
   let result=add(1,2)
   console.log(result) //13

10.promise对象

* promise对象: 代表了将来某个将要发生的事件(通常是异步操作)
* 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数
* ES6的Promise是个构造函数，用来生成promise实例
* 参数函数resolve的参数可以是另一个promise，此时当前promise会等待另一个promise状态发生改变时才继续执行
* promise共有三个状态：
  * pendding    初始化状态
  * fullfilled  成功状态
  * rejected    失败状态
* 基本步骤

// 1. 创建promise的实例
let url = ''
function getNews(url){
    let xmlRequest = new XMLHttpRequest(url)
    let promise = new Promise((resolve, reject)=>{
    // promise处于初始化状态
        xmlRequest.onreadystatechange = ()=>{
            if(xmlRequest.readystate === 4){
                if(xmlRequest.state === 200){
                    xmlRequest.open('get', url)
                    console.log(xmlRequest.responseText)
                    //  2. 指定进入成功状态时的回调函数的逻辑
                    resolve(xmlRequest.responseText)
                }else{
                    //  3. 指定进入失败状态时的回调函数的逻辑
                    reject('失败了')
                }
            }
        }
    })
    // 返回promise以创建下一条链式调用
    return promise
}
getNews(url)
    .then((data)=>{
        // fullfilled状态，步骤2中的回调函数
        let {newUrl} = JSON.parse(data)
    // 返回promise以继续创建下一条链式调用
        return getNews(newUrl)  // 重新创建了新的promise来重复执行函数getNews
    }, (error)=>{
        // rejected状态，步骤3中的回调函数
        console.log(error)
    })
    .then((data)=>{
        // fullfilled状态，步骤2中的回调函数
        console.log('完成')
    }, (error)=>{
        // rejected状态，步骤3中的回调函数
        console.log(error)
    })
    .catch(error=>{ //通常不会给then指定第二个错误回调，而是使用catch方法来捕获错误
        console.log(error)
    })
    .finally(()=>{}) //在执行完then或者catch回调后就执行，本质两者回调中的逻辑交集，发布于ES8

10.1Promise来封装ajax请求操作

   //promise进行封装
const p=new Promise(
 (resovle,reject)=>{
//1、创建对象
let xhr=new XMLHttpRequest()
//2、初始化
xhr.open("GET","https://api.apiopen.top/getJoke")
// 3、发送
xhr.send();
// 4、绑定事件处理响应结果
//promise进行封装
const p=new Promise(
 (resovle,reject)=>{

})
xhr.onreadystatechange=function(){
  //判断
  if(xhr.readyState===4){
    // 判断状态码200到299
    if(xhr.status>=200&&xhr.status<300){
      //表示成功
     resovle(xhr.response)
    }else{
      //失败
      reject(xhr.response)
    }
  }
}
})
//指定回调
p.then(function(value){
   console.log(value)
},function(reason){
  console.log(reason)
})
</script>

11.symbol

在ES5中由于对象的属性名是个字符串，可能造成命名冲突
  * 比如想给别人创建的对象添加新属性时，新属性名可能与原属性名冲突，此时可用symbol解决
* 在ES6中新增加的基本类型
* 表示一个独一无二的值，无法与其他值进行运算包括拼串
* 创建时不使用new运算符，因为它不是对象而是一个原始类型的值
* 不会被for in 与for of遍历到


let symbol = Symbol()
console.log(symbol) //symbol()
//可以传参作为它的标识符
let symbol1 = Symbol('one')
console.log(symbol) //symbol(one)
//如果传入参数是一个对象则调用toString方法来作为标识符
let obj = {
    toString(){
        return 'abc'
    }
}
let symbol2 = Symbol(obj)
console.log(symbol) //symbol(abc)

12.iterator遍历器

* 是一个接口机制，为各种不同的数据结构提供统一的访问机制
* 作用：
  * 为各种数据结构提供一种统一简洁的接口
  * 使得数据结构能按一定次序排列
  * ES6创造一种新的遍历方式for of，带有iterator接口的数据才能被遍历
* 工作原理：
  * 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
  * 调用next方法，指针自动指向数据结构的第一个成员
  * 继续调用next方法，指针指向下一个成员直到指向最后一个成员
  * 每调用一个next方法返回一个对象包含value与done
    * value表示当前的值，done表示是否遍历完成，布尔值
    * 当遍历结束时(最后一个值的next)value为undefined，done返回true
```javascript
//模拟遍历器接口
let arr = [1,2,3,4,5]
let iterator = (arr)=>{
    let index = 0
    return index >= arr.length?{value: arr[index], done: false}:{value: undefined, done: true}
}

* 将iterator接口部署到指定数据结构上，可以使用for of遍历
* 数组，字符串，arguments，map容器，set容器自带iterator接口

let arr = [1,2,3,4,5]
for(let i of arr){
    console.log(i)
}
//1,2,3,4,5
let str = 'abcdefg'
for(let i of str){
    console.log(i)
}
//a,b,c,d,f,g
function foo(a,b,c,d){
    for(let i of arguments){
        console.log(i)
    }
}
foo(1,2,3,4)//1,2,3,4
```
* 对对象使用for of时会调用对象内Symbol.iterator的函数
```javascript
//给对象添加模拟遍历器
obj = {
    [Symbol.iterator](){ 
        return { index: 0,
                next:function(){
                return this.index<=3?{value: this.index++, done: false}:{value: undefined, done: true}
        }}
    }
}

13.async函数

* ES7语法
* 真正意义上解决异步回调，同步流程表达异步操作
* 本质是generator的语法糖
* async函数返回值为promise
```javascript
async function foo(){
    await 异步操作
    await 异步操作
}
```
* 例子

function getNews(url){
    let promise = new Promise((resolve, reject)=>{
        if(url === 'aaa'){
            resolve(url)
        }else{
            //参数函数的执行不会终止后续逻辑但是由于状态只会转变一次，因此回调需要二选一
            resolve(false)  //此种回调可以让失败的逻辑交给async函数本身处理
            reject('普通函数失败')  //此种回调可以让失败逻辑交给async函数的then方法来执行
        }
    })
    return promise
}

async function test(){
    let result = await getNews('bbb')   //await后的函数只有promise为成功状态才会继续执行
    //此处的if判断是建立在上个函数调用resolve的基础上
    if(result===false){ //可以借用给resolve传递false来表示promise实际为fullfilled状态
        console.log('async函数失败') //针对fullfilled状态需要执行的逻辑
    }else{
        console.log(result) //成功状态执行的逻辑
    }
    result = await getNews('aaa')
    console.log(result)
    return 'async函数成功'
}
//处理异步执行过程中发生的成功或者失败的逻辑
test().then((data)=>{   
    console.log(data)   //成功执行此处，data的值为async函数return的值
},(error)=>{
    console.log(error)  //失败执行此处
})

14. class

* 通过class定义类/实现类的继承
* 在类中使用constructor来实现类的属性继承
* 使用函数简写的形式给类添加一个方法
* 子类使用extends继承父类
* 子类在constructor中使用super来调用父类继承的属性
* 子类可以通过父类的方法重写来实现调用自己的方法

class Person{
    constructor(name, age){ //属性继承
        this.name = name
        this.age = age
    }
    getName(){  //创建父类方法
        console.log(this.name, this.age)
    }
}
class SalaryPerson extends Person{
    constructor(name, age, salary){
        super(name, age)    //继承父类属性
        this.salary = salary
    }
    getName(){  //重写父类方法
        console.log(this.name, this.age, this.salary)
    }
}
let aPerson = new SalaryPerson('aa', 16,2000)
console.log(aPerson)

15.扩展

### 字符串扩展
* `str.includes(str)` 判断是否包含指定字符串
* `str.startWith(str)` 判断是否以指定字符串开头
* `str.endWith(str)` 判断是否以指定字符串结尾
* `str.repeat(count)`   返回重复了指定次数的字符串
### 数值扩展
* 二进制与八进制表示法：0b开头表示二进制，0o表示八进制
* `number.isFinite(i)` 判断是否是有限数
* `number.isNaN(i)` 判断是否是NaN
* `number.parseInt(str)` 字符串转化为整数
* `number.isInteger(i)` 判断是否是整数
* `Math.trunc(i)`   小数转化为整数
### 数组对象的扩展
* `Array.from(v)` 将伪数组转化为真数组
* `Array.of(v1,v2,v3)`  将一系列数据转化为数组
* `Array.find(function(item, index, arr){})`    找到满足条件的第一个值

对象的扩展
* `Object.is(v1, v2)`   判断两个数据是否相等，底层是判断字符串
* `Object.assign(target, source, [source, source])` 将源对象的属性添加到目标对象上
* 从ES6开始__proto__可以被操作

16.拷贝

* 拷贝数据：
  * 基本数据类型
    * 拷贝后生成一份新的数据，修改新数据不会改变原数据的值
  * 对象/数组
    * 拷贝后是传递原数据的引用地址，修改新数据会改变原数据的值
* 深拷贝：
  * 拷贝的不是引用地址
* 浅拷贝：
  * 拷贝的是引用地址
* 几种拷贝方法：
  1. 直接赋值   浅拷贝
  2. Object.assign()    浅拷贝
  3. Array.prototype.concat() 浅拷贝
  4. Array.prototype.slice() 浅拷贝
  5. JSON.parse(JSON.stringify())   深拷贝, 但是内容中不能包括函数，否则是null
* 深拷贝的实现要求
  * 拷贝的内容里不能有对象/数组
* 深拷贝的实现

function clone(target){
    let value = null
    if(checkedType(target) === 'Object'){
        value = {}  //如果形参为对象则创建对象字面量
    }else if(checkedType(target) === 'Array'){
        value = []  //如果形参为数组则创建数组字面量
    }else{
        return target
    }
    for(let i in target){   //遍历对象或者数组
        value[i] = arguments.callee(target[i])  //递归调用判断对象或者数组中的值
    }
    return value
    function checkedType(obj){
        return Object.prototype.toString.call(obj).slice(8, -1) //调用原型上纯净的方法
    }
}

17.set与map容器

#### set容器
* 无序的不可重复的多个value的集合体
* Set(array)    将数组转化为set容器
* set.add() 
* set.delete() 
* set.has() 
* set.clear() 
  
可用来解决数组内数据重复问题
#### map容器
* 无序的key不重复的多个key-value的集合体
* Map(array)    将两维数组转化为map容器
* map.set(key, value) 
* map.get(key) 
* map.delete(key) 
* map.has(key) 
* map.clear() 
* map.size
## ES7新增
* 指数运算符`**`
* Array.prototype.includes(value)   判断某个值是否在数组内

18.模块化

1.导入

1.
导入 一个 没有 导出 任何 接口的 文件 （js或者其他类型文件）

直接 import 引入 文件即可，相当于 文件在引入的位置处运行（模块化，变量不会互相污染）

import './assets/a.css'
import './assets/a.js'


2.
+ 引入第三方模块 （下载在node_modules中的模块）
引入时 直接写文件名即可，如果 导出 接口 需要使用变量接收
```js
import 变量名 from '包名'
import Vue from 'vue'
import VueRouter from 'vue-router'



3.
在另一个文件中导入 
1 全部引入
    import * as obj from './assets/c.js'
      obj是对象 属性 就是 模块中所有的接口名
   
  
2 按需引入  
    import { a, b, fn } from './assets/c.js' 利用对象的结构赋值

自定义模块导入导出      注意：自定义的模块 即使同一目录 也一定要加 ./
+ 定义一个 文件 导出 多个 接口
  - export 多次导出
 
    // a.js
    export const a = 10
    export const b = [1, 2, 3]
    export const fn = () => {
      console.log(111)
    }
 
  - export 统一导出
  
    const a = 10
    const b = [1, 2, 3]
    const fn = () => {
      console.log(111)
    }

    export {
      a,
      b,
      fn
    }


导出默认值 
  export defualt 值
    // eg
    export default [1, 2, 3, 4]
导入
    直接import时声明变量接收值 import arr from './js/d'
注意：一个文件只能出现一次 export default