es6笔记

浅浅复习一下，比较粗略，详细指路阮一峰老师的es6教程

let

• 变量不能重复声明
• 块级作用域
  1）避免内层变量可能会覆盖外层变量
  2）避免用来计数的循环变量泄漏为全局变量
• 不存在变量提升
• 不影响作用域链

const

• 一定要赋初始值
• 常量的值不能修改
• 块级作用域
• 对于数组和对象的元素修改，不算做对常量的修改，不会报错（存储的地址值没有发生改变）

解构赋值

• 数组的解构赋值
  1）不能为空，否则为undefined
  2）个数不能小于要被赋值的变量，或者给其制定默认值

let [foo]=[]
        console.log(foo);//undefined

let [moom,bar]=[]//undefined
 //指定默认值
let [x,y='b']=['a']

• 对象的解构赋值
  1）变量必须与属性同名才能取到正确的值

模板字符串

• 用``声明
• 可以有换行
• 变量拼接：${}

let a='酸酸甜甜'
let str=`<div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>`
let out=`${a}就是我`
console.log(out);//酸酸甜甜就是我

对象的简写

let name='cuisaihua'
let age=18
const person={
    name,
    age,
    things(){
        console.log('打豆豆');
    }
}

箭头函数

• 函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象

		//普通函数
        function person1(){
            console.log(this.name);
        }
        //箭头函数
        let person2=()=>{
            console.log(this.name);
        }
        window.name = '爱在西元前'
            const School = {
                name: '周杰伦'
            }
        person1.call(School)//周杰伦
        person2.call(School)//爱在西元前

• 不可以当作构造函数，不可以使用new命令
• 不可以使用arguments（函数内部保存实参），如果非要使用，可以用rest参数代替
• 一个参数时可以省略（），代码体只有一条语句可以省略{}

let person3=m=>m*m

• 箭头函数适合与this无关的回调，定时器，数组的方法回调
• 箭头函数不适合（不是不能）与this有关的回调，事件回调，对象的方法

函数参数默认值

• 基本用法（一般有默认值的参数都写后边）

function Star(name,age='18'){
            console.log(name);
            console.log(age);
        }
Star('刘德华')

• 与解析赋值默认值使用

function connect({host='127.0.0.1',username,password}){
    console.log(host);
    console.log(username);
    console.log(password);
}
connect({
    host:'atguigu.com',
    username:'root',
    password:'123'
})//调用并解构赋值

rest参数

• 用途：用于获取函数多余参数，形式为“…变量名”，以数组形式存储，可以调用数组的特有方法
• 只能是最后一个参数

function person(a,b,...values){
    console.log(a,b);
    console.log(values);//数组(2) [3, 4]
}
person(1,2,3,4)

扩展运算符（spread）

• 是三个点(…)，它如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，主要用于函数调用

console.log(...[1,2,3]);//1 2 3

• 应用
  数组的合并、数组的克隆、将伪数组转为真正的数组

//数组的合并
const cui=['1','2','3']
const sai=['4','5']
const cuisai=[...cui,...sai]
console.log(cuisai);
//数组的克隆
const cuisaihua=['money','happy','rich']
const cuiyuqing=[...cuisaihua]
console.log(cuiyuqing);
//将伪数组转为真正的数组
const items=document.querySelectorAll('.item')
const itemArr=[...items]
console.log(itemArr);

Symbol

• 特点：独一无二、不能进行加减四则运算比较等、相同参数的Symbol函数的返回值是不相等的、不能使用new指令，是一种新的数据类型
• Symbol()与Symbol.for()新建symbol值的区别
• 作为属性名的symbol
• Symbol的内置对象

let s1=Symbol();
let s2=Symbol()
console.log(s1,typeof s1);//Symbol() 'symbol'
console.log(s1===s2);//false
let s3=Symbol.for('中北大学')
let s4=Symbol.for('中北大学')
console.log(s3===s4);//true
// var a={}
// a[Symbol('天下')]='hello'
// var a={
//     [Symbol()]:function(){
//         name:'peiqi'
//     }
// }
var a={}
Object.defineProperty(a,Symbol(),{value:'Hello!'
console.log(a);

迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

• ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
• 原生具备 iterator 接口的数据(可用 for of 遍历)
  a) Array
  b) Arguments
  c) Set
  d) Map
  e) String
  f) TypedArray
  g) NodeList
• 工作原理
  a) 创建一个指针对象，指向当前数据结构的起始位置
  b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
  c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
  d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

生成器Generator

是es6提供的一种异步编程解决方案，语法行为与传统函数完全不同

• 使用

            function * helloworld(){
                console.log(1);
                yield 'hello'
                console.log(2);
                yield 'world'
                console.log(3);
                yield 'ending'
            }
            let hello = helloworld()
            // hello.next()
            console.log(hello.next())
            console.log(hello.next())
            console.log(hello.next())
            console.log(hello.next())

• 传参

                        function * shuzi(num){
                console.log(num)
                let one = yield 111
                console.log(one)
                let two = yield 222
                console.log(two)
                let three = yield 333
                console.log(three)
            }
            let shuzi1=shuzi(123)
            console.log(shuzi1.next());
            console.log(shuzi1.next(1));
            console.log(shuzi1.next(2));
            console.log(shuzi1.next(3));

• 应用

function one() {
            setTimeout(() => {
                console.log(111);
                timer1.next()
            }, 1000);
        }
        function two() {
                setTimeout(() => {
                    console.log(222);
                    timer1.next()
                }, 2000);
            }
        function three() {
                setTimeout(() => {
                    console.log(333);
                    timer1.next()
                }, 3000);
            }
        function * timer(){
            yield one()
            yield two()
            yield three()
        }
        let timer1 = timer()
        timer1.next()

promise

promise是异步编程的一种解决方案。简单来说，他是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

• 简单使用

        const p=new Promise(function(resolve,reject){
            setTimeout(function(){
                /* let data='数据库中的数据'
                resolve(data) */
                let err='数据读取失败'
                reject(err)
            }, 1000);
        })
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.error(reason);
        })

• 封装ajax

        const p = new Promise(function(resolve,reject){
            const xhr = new XMLHttpRequest();
            xhr.open('GET',"https://api.apiopen.top/get")
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        resolve(xhr.response);
                    }else{
                        reject(xhr.status)
                    }
                }
            }
        })
        //指定回调
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.error(reason);
        })

• Promise.prototype.then
  调用then方法，then方法返回的是一个promise对象，对象状态由回调函数的执行结果决定
  1）如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功值（没有返回值时候，为undefined）
  2）如果回调函数中返回的结果是promise对象，回调函数中promise对象的状态就是该对象的状态
  3）抛出错误，状态为失败

        const p = new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve('啦啦啦');
            },500)
        });
        const result = p.then(function(value){
            //1、非promise
            // return 123;
            // return
            //2、promise
            /* return new Promise(function(resolve,reject){
                // resolve('123')
                reject('err')
            }) */
            throw '出错啦'
        },reason=>{
            console.warn(reason)
        });
        console.log(result);

• Promise.prototype.catch
  是.then(null,rejection)的别名，用于指定发生错误时候的回调函数。

        const p=new Promise((resolve,reject)=>{
            setTimeout(function(){
                reject('出错啦')
            })
        })
        p.catch(function(reject){
            console.log('出错了');
        })

Set和Map及其API

set，它类似于数组，但是成员的值都是唯一的，没有重复

const s=new Set([2,4,2,5,5,4,3,1])
        console.log(s);//2,4,5,3,1

• set结构的实例有以下属性
  1）Set.prototype.constructor：构造函数，默认就是Set函数
  2）Set.prototype.size：返回set实例成员的总数
• API

1）操作方法（用于操作数据）

1.1—add(value)：添加某个值，返回set结构本身
1.2—delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
1.3—has(value)：返回一个布尔值，表示参数是否为set的成员
1.4—clear()：清除所有成员，没有返回值

2）遍历方法（用于遍历成员）
看书吧

• 实战
  数组去重、交、并、差

        //数组去重
        const arr = [2, 5, 2, 5, 8, 7, 9, 8]
        console.log([...new Set(arr)])
        //交集
        const arr2 = [2, 8, 7, 4, 5, 6, 0]
        let result = [...new Set(arr)].filter(item => {
            let a2 = new Set(arr2)
            return a2.has(item)
        }
        )
        console.log(result);
        //并集
        let union = [...new Set([...arr, ...arr2])]
        console.log(union);
        //差
        let cha = [...new Set(arr)].filter(item => {
            let a2 = new Set(arr2)
            return !a2.has(item)
        }
        )
        console.log(cha);

Map，可以使用对象作为键

1）set增加、get读取键值、has返回布尔值查看是否存在、delete删除、clear清空

		let m=new Map()
        m.set('name','王源')
        m.set('changename',function(){
            console.log('王圈');
        })
        const hobbys={
            name:'banner'
        }
        m.set(hobbys,['香蕉','橘子'])
        console.log(m);

2）遍历

class，对象扩展、数值扩展（看书）

模块化

使用模块化方式一：在script中

<script type="module"></script>

一、引入 ：

1）通用方式

import * as m1 from '../m1.js'

2）解构赋值方式

        import {school,teach} from ''
        import {school as cuisaihua} from ''//别名
        import {dafault as m3} from ''

3）简便形式 针对默认暴露

import m3 from 'm3.js'

二、暴露方式
1）默认暴露


2）统一暴露


使用模块化方式二：引入入口文件