Es6语法

let和const声明变量

1.let变量声明 不存在变量提升问题
特点：
    1.是一个块级的作用域 类似在类中的实例变量一样，只能在声明内部使用,外部不能使用
    2.不允许在相同作用域内，重复声明同一个变量
1-1.变量提升测试
    console.log(b); // 报错，变量b初始化不存在(不存在变量提升问题)
    let b = 100
    console.log(b)
​
1-2.变量名重复
    let a = 40
    var a = 5000
    console.log(a) // 报错 提示a变量重出现
​
1-3. 变量可以被覆盖
    let a = 10 ;
    a = 100
    a = 1000
    console.log(a); //1000
​
​
2.const变量声明
声明一个只读的常量。一旦声明，常量的值就不能改变
const一旦声明变量，就必须立即初始化，不能留到以后赋值
const foo; // 报错,不能留着以后复制
特点:
    1.声明后不能修改,块级的作用域
    2.变量不能重复,不能被覆盖
​
console.log(a); // 保存 初始化a变量不存在
const a = 100
​
2-1.变量声明后就无法在重新赋值
    const a = 100
    a = 1000  // 无法重新赋值，报错
    虽然无法直接修改a变量，但是如果a变量是个对象的情况下是可以对内部的值进行修改的
    const p = {
     name : '123',
     age : 456,
    }
    p.name = '1xx222'
​
3.var变量声明
特点：
    1.在启动时,将全部的var声明的变量提升到全局作用域中
    2.声明变量是可以被覆盖,可以重复的
​
 var a;
 console.log(a);  //提示undefind 说明变量提升全局
 var a = 1000

变量提升

使用var
arr  =  [];
for (var i = 0; i < 10; i++) {
        arr[i] = function () {
            return i
        }
    }
console.log(arr);  // [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ] 10个函数的数组
console.log(arr[5]()); // 获取arr的第5个元素的结果是10
​
​
使用let 因为let不会存在变量提升的问题,不会污染全局
​
arr  =  [];
for (let i = 0; i < 10; i++) {
        arr[i] = function () {
            return i
        }
    }
console.log(arr);  // [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ] 10个函数的数组
console.log(arr[5]()); // 5
​

模板字符串

​
<div class="box">
​
</div>
​
​
<script>
    // 追加结构
    const obox = document.querySelector('.box')
​
    let id = 1, name = 'xxx';
​
    //使用tab上面的反引号 构造一个htmlstr的一个字符串
    // ${} 进添加值  ${} 相当于 python进行占位符
    let htmlstr = `
    <ul>
        <li>
            <p id="${id}">${name}</p>
        </li>
    </ul>
    `
    obox.innerHTML = htmlstr
</script>

剩余运算符与扩展运算符

1.函数的默认参数
    function bba(a = 10, b = 20) {  // 带默认参数
        return a + b
    }
    console.log(bba(100, 300));  // 传入 传入100 和300值，覆盖原来的带有参数的值
​
//默认参数可以是一个函数    
    function add(a,b=date(5)){
        return a+b
    }
    function date(val){
        return 5 + val // 必须是有返回值的
    }
​
2.剩余运算符
    //es6写法  剩余参数 由... 紧跟者一个参数实现的
    // ...key 剩余参数固定写法 参数名可以随便写
    //  ...key剩余参数解决了 arguments(伪数组)的意思 
    function pick(object, ...key) { // ...key 返回一个数组
        console.log(key)  // ...key 接受到 传入'title', 'author', "year"3个名称
​
        let res = Object.create(null)
        for (let i = 0; i < key.length; i++) {
            res[key[i]] = object[key[i]]
        }
        return res
    }
    // book对象
    let book = {
        title: '1231',
        author: "65465",
        year: 2019,
    }
    //获取pick函数处理的值赋值给bookdata // pick接受了pick
    let bookdata = pick(book, 'title', 'author', "year") 
    console.log(bookdata)
    // 剩余参数：接受函数中剩余的参数 返回一个数组 和python中的*args一样属于位置参数
​
3.扩展运算符
扩展运算符：将数组进行分割，将改革想作为分离的参数进行传入函数中
const arr = [11,22,33,44,566,778979,9879]
console.log(Math.max(...arr))  // 使用扩展运算符 ...数组  可以将数组进行分离为一个个的元素，进行比较 
    

箭头函数

es6的箭头函数 => 来定义 取代function(){} 等价于 ()=>{} 匿名函数
​
add = function(a,b){
    return a + b
}
​
add = (a,b)=>{
    return a + b
}
​
add = (a,b) => a+b // 默认存在一个return
​
1.无参数 必须有()存在
()=>{
    return '123456'
}
​
2.单个参数
val => { return val+5
       }
​
3.单个参数返回
val => val
​
4.返回对象参数
let getobj = obj => (
    {name:'666',age:18}
)
​
闭包：
 //闭包函数 fn 可以表达式进行()起来也可以不用括起来
let fn = (function(){
           return function(){ 
               return 123 
           } 
        })()
fn(); // 需要执行一下
​
箭头函数闭包
let fns = (() => {
            return () => {
                return 123
            }
        }) (); // 第一层函数执行，获取到的第二层的function函数(没有执行) 需要执行
        fn();

箭头函数指向this问题

es6 解决this指向问题 使用=> 就会找上层的作用域
箭头函数之后没有this指向，通过查找作用域进行找 
一但使用箭头函数，当前有没有作用域，就找上层的作用域
3层作用域    this
​
let pa = {
    id : 10,
    // 2级作用域 this
    init:function(){  
        // 1级作用域 this
        document.addEventListener('click',(event)=>{
            console.log(this); 
            this.doSomeThings(event.type) 
            // console.log(event.type) 
        },false)
    },
    doSomeThings:function(type){
        console.log(`事件类型${type},事件id${this.id}`)
    }
​
}
pa.init()
console.log(pa.doSomeThings());
​
怎么查找作用域
在 document.addEventListener方法定义的内部是一个作用域
这个作用域上层指向了 init:function init变量
init 变量的上层作用域 指向了对象pa 所以 this指向pa对象
​
假设 int：function  定义为箭头函数 => 那么相当于 init没有作用域，就会找到pa对象的作用域
在找到window 作用域练 最外层.
​
箭头函数注意:
1.使用箭头函数就会内部就没有 arguments 方法，因为使用箭头函数就没有作用域链，就会指向weindow
​
 let pa = ()=>{
     console.log(arguments)
     return 10+20
 }
 console.log(pa())
​
2 箭头函数不能使用new关键字实例化对象
let pa = ()=>{} // 因为箭头函数无法实现作用域
console.log(pa) // ()=>{}  他不是一个对象 语法糖 表达式  function 类型
let p = function(){}
console.log(p()) // ƒ (){} 也是一个对象 function 类型
let p = new pa

解构赋值

​
let info = {
    type: 'id',
    name: ' askjh'
}
es6 完全结构
let { type, name } = info // 进行了赋值
console.log(type, name)  // id,askjh
​
//不完全结构 可以忽略某些属性
let obj = {
     a: {
        name: '张三'
     }, // 对象
     b: [], // 数组
     c: 'hello world'
​
}
let {a} = obj // 获取obj对象一些值
console.log(a) // {name: '张三'}
​
还可以使用 剩余运算符进行获取
let {a,...bs} = obj
console.log(bs) // {b: Array(0), c: 'hello world'} 获取剩余参数的对象
​
​
// 使用默认值
let {a,b=30} = {a:40}
console.log(a,b) // 40 30
​
​
​
// 对于数组的使用
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a,b,c) // 1 2 3 
​
// 嵌套结构
let [n,[d],e] = [1,[2],3] // 相当于python 中的 a,b = 1,3 但是需要根据对应参数的形式获取值
console.log(n,d,e) //1 2 3

对象的扩展

1. es6 直接写入变量的函数 作为对象的属性
const name = '消息下', age = 12
const pe = {
name,
age,
sayName(){
console.log(name) //  消息下
}
}
pe.sayName() // 执行函数
​
​
2. set 方 与 get 方法的使用
// 当直接执行get 方法就会根据默认值执行
// 如果对set方法传入参数，就会现去set方法中进行判断 在执行get方法
let caet = {
    wheel:4 ,
    set(val){ // 取值
        if (val < this.wheel){
            throw new Error('数量太少') // throw 抛出异常
        }
    },
    get(){ // 读值
        return this.wheel
    }
}
caet.set(3) // 对方法传入3时，在执行 get 就会获取set值的判断结果
console.log(caet.get()) // 如果不对set传入值，那么默认就会参数就是wheel
​
3. 属性表达式
const obj = {}
obj.isshow = true // 对obj对象进行赋值
console.log(obj); // {isshow: true}
const name = 'a'
obj[name+'bc'] = 123 // 将name变量 和 bc 进行拼接进行写入对象中
console.log(obj) // {isshow: true, abc: 123}
obj['f'+ 'cc'] = function(){
    console.log(this);
}
console.log(obj) // {isshow: true, abc: 123, fcc: ƒ}
​
​
​
4.对象方法
// is() 相当于 ===  比较与两个值是否严格相同
console.log(NaN === NaN); //  不严谨 false
console.log(Object.is(NaN,NaN));  // true
​
5.assign() 对象的合并  // 属于浅拷贝
let t = {
​
}   
let b = {
    a:10
}
Object.assign(t,b) // 将第二个以后的全部对象，合并到第一个对象中  返回一个新对象
console.log(t) // {a: 10}

symbol类型

原始数据 symbol ，表示他他是一个独一无二的值
const name = Symbol('name') // 内存地址不一样
const name2 = Symbol('name') // 独一无二的一个值
const name3 = "name" 
 
console.log(name3 ===name)//false 
console.log(name === name2); //false 
console.log(typeof name ) // 类型symbol不是字符串
# 用来定义对象的私有变量,可以设置对象的私有的属性
# 不能使用new命令 因为生成的 Symbol 是一个原始类型的值，不是对象，所以不能使用new命令来调用
# 也不能作为对象进行使用, 可以认为他是一个字符串
let obj = {
    'name' : '123' 
}
let s2 = Symbol(obj)
console.log(s2); // Symbol([object Object])
 
# Symbol 值不能与其他类型的值进行运算，会报错
let a = Symbol('a')
console.log('bcd' + a); // 报错
 
#  Symbol 可以作为if中的参数可以作为bool，但是不能转为数值
let a = Symbol() // 没有描述也是true
console.log(Boolean(a)); // true
if(a){
    console.log('123');
}
console.log(Number(sym)); // 报类型错误
 
 
内部方法
const sym = Symbol('foo');
1.返回symbol('描述') 描述
console.log(sym.description ); // "foo"
 
2.可以作为对象的属性名
let obj = {}
obj[sym] = 123456
或者
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
 
3.可以作为消除魔术字符串
魔术字符串:在程序中多次出现的
const a = {
    'b':'name' //   魔术字符串
}
const a = {
    'b': Symbol() //  代替 因为每次创建 Symbol 都是不一样的
}
 
 
4.Symbol.for()，Symbol.keyFor()
s1 = Symbol.for('123') # 如果希望使用同一个Symbol对象就是for方法，他会全局环境中进行搜索,而Symbol不会,如果Symbol.for已经存在就会调用存在的Symbol.for不会重新创建
Symbol.keyFor('s1') # 为了找到Symbol.for登记的值

set集合类型

无序不可以重复的类型
let set = new Set() // Set(0) {size: 0}
console.log(set); //Set(0) {size: 0} 其中 size 表示集合的长度
 
常用方法:
set.add('name') // 可以使数值 集合 对象 字符串 布尔值
set.delete('name') // 删除
set.has('name')  // 查看当前值是否存在 返回flase true
set.size // 访问集合的长度
set.forEach((key,val)=>{ // 进行对当前集合的数组进行 遍历 无意义
    console.log(key,val);
})
 
//将set 变为一个数组
let set2 = new Set([1,2,3,4,4,5,66,44]) // 集合将元素中的数组进行重复的剔除
let arr = [...set2] // 使用扩展用算符转换为一个数组 // 将集合展开
console.log(arr);
 
 
// 释放当前资源
// set 无法被释放
let arr1 = [ 1,2,3,4]
arr1 = null
 
 WeakSet() // 弱类型的set对象 可以被释放 

map类型

map类型是键值对的有序列表，键和值的任意类型
无法被释放
 
// 声明 map
let map = new Map();
// 进行设置值
map.set("name", '张三')  //Map(1) Map(1) {'name' => '张三'}
//循环遍历 key ：name val：张三
console.log(map) // Map(0) { size: 0 } 打印的结构
 
// 获取值
console.log(map.get('name')); // 张三
 
// 校验值
console.log(map.has('name')) //  true
 
//删除值
console.log(map.delete('name')) // 删除后 打印的结果也是 bool类型
 
// 清除值
map.clear()  //清空值
 
// 因为这个map结构使数任何类型  key val 可以使任意结构
map.set([11, 2, 3, 44, 5, 6,], 'hello') //{Array(6) => "hello"}
console.log(map);
// 设置多元数组
let m = new Map([["a", 1], ["b", 2]])
console.log(m) // {'a' => 1, 'b' => 2}

数组补充

数组的方法 from of
function add(){
    arguments // 当前对象在函数中引用函数的参数
	console.log(arguments); // 返回一个伪数组 好多方法不能使用
	let arr = Array.from(arguments); // 变为真正的数组
}
 
add(1,2,3,4)
 
 
2.使用扩展用算符进行快送转换运算符
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
let lis = document.querySelectorAll('li') // 获取全部的li标签
 
console.log([...lis]); // 直接转换
 
3.使用form对元素进行处理
let lis = document.querySelectorAll('li') // 获取全部的li标签
let list = Array.from(lis, (ele) => { return ele.textContent }) // 第二个参数是一个回掉函数处理转换的数组中的元素
 
 let list2 = Array.from(lis, ele =>  ele.textContent )
 
 4.of方法 将一组的值转换为数组 任意的数据类型转换为数组
 console.log(Array.of(3,1,2,4,5,6,7,88,9)); //[3, 1, 2, 4, 5, 6, 7, 88, 9]
 
 
5.数据的其他的方法
5-1.copywithin() 方法 了解
// 复制替换将数组中的值进行替换 返回当前的数组
let a = [1, 2, 3, 4, 5, 6].copyWithin(0, 3) // 原结果[1,2,3,4,5,6]
console.log(a); // [4,5,6,4,5,6]
//从第三个元素开始到后面的全部数替换前面的数0-3的元素
 
 
5-2.find查找数值 findindex查找数值的元素
//find 方法找出第一个满足条件的 数组元素
[1, 2, -103, 4, 5, -10, 7].find((n) => {
    return n < 0
}) // -103 结果  找出第一个条件的数组成员
 
//findindex 找出第一个数组成员的下标索引
[1, 2, -103, 4, 5, -10, 7].findindex((n) => {
    return n < 0
})
 
5-3.includes 返回一个bool值 表示一个数组是否包含这个值
//作为if 判断条件 是否包含这个元素
console.log([1,2,3,4].includes(2)); // true
console.log([1,2,3,4].includes(10)); //false
 
6.entries方法
keys(对键的遍历) values(对值的遍历) 返回一个遍历起  可以使用for ... of 进行遍历 通过这些方法生成遍历器
 
6-1.keys 获取索引
let a = [1, 2, 3, 4, "a", 6].keys()
console.log(a); // 获取的结构 就是一个遍历器Array Iterator
//就可以使用for of 进行遍历
for (let index of a) {
    console.log(index)  // 将数组的数据遍历出来（获取的索引） 和python中的for遍历一样 不同的就是需要生产一个遍历器
}
 
6-2.values 获取元素
let b = [1, 2, 3, 4, "a", 6].values()
for (let index of b) {
    console.log(index) // 获取的是数组的值 于python中的for相似但是有和dict方法相似
}
 
6-3.entries 获取val 和key
let c = [1, 2, 3, 4, "a", 6].entries()
for (let [key, val] of c) {
    console.log('这是键', key) // 获取索引
    console.log('这是值', val)  // 获取值
}

迭代器interator

// 迭代器 一种新的遍历机制
// 遍历起就是迭代器
const item = ['1',2,55,'asd'] //只能是数组类型
 
 
 
// func 就是一个函数，是可以执行的函数  迭代器
let func = item[Symbol.iterator]() // 获取数组的中的迭代器，返回一个函数 ƒ values() { [native code] }
 
console.log(func); // Array Iterator {}迭代器 
 
// 迭代器的next方法
console.log(func.next()) // {value: '1', done: false} 返回的一个对象 value代表时数组中的值 done false 代表是遍历还没有完成 当done为teru时，说明便利完成
console.log(func.next())
console.log(func.next())
console.log(func.next())
console.log(func.next()) // {value: undefined, done: true} done为true 说明为遍历完成 value变为 空
 
 
// 迭代器两个核心：
// 1 迭代器是一个接口，能快捷的访问数据  [Symbol.iterator]( 创建迭起，同给迭代器的next的结果
// 2 迭代器遍历数据结构的指针 第一次调用指向了 1  value指向 1 dome为false 以此类推 
// 当done 为true时，遍历结束

生成器

生成器的应用，异步编程，让异步编程同步执行
1.
function* func(){
    // request是一个方法 res 接受第二次nxet res 参数赋值给 let res变量
    let res = yield request('传入的网络地址') // 3.res 不是yield执行的结果返回的值
    // res 是谁：恢复执行传入next(实参)
 
    }    
const ite = func() // 1.迭代器对象
ite.next() // 2.恢复yield进行执行 // 执行这个生成器函数
function request(url){
    $.ajax({
        url:url,
        method:'get',
        success(res){
            ite.next(res) // 4.恢复执行并且 将res传入给 生成器值的变量res    
        }
    })
} 
 
2.加载效果
function* en(){
    add() // 执行第一个开始加载提示
    yield del() // 卡在加载提示这里，当加载提示执行
    func()
}
const ite = en() // 生成器对象
console.log(ite);
ite.next() // 执行第一次
function add(){
    console.log('开始加载... 图片');
} 
 
 
function func(){
    console.log('隐藏加载提示...显示图片')
}
 
function del(){
    //  setInterval计时器
    setTimeout(() =>{
        console.log('加载完成,隐藏加载效果')
        // 加载提示执行后执行
        // 执行生成器中的下一次next方法
        ite.next() // 执行第二次
    },5000)
 
}

生成器generator

作用:
1.generator 函数 可以通过yield关键字 将函数挂起，为了改变执行流程提供了可读性
2.为异步编程(解决异步代码)
区别:
1.function后  函数名前 * 
2 只能在函数内部使用yield表达式 让函数挂起
 
1.例如：生成器函数
function* func(){
yield 1; // 当使用yield关键字时，就会在这个位置挂起不走，当使用next才会执行
}
// 返回一个遍历器对象， 可以调用next()方法调用
let fn = func() // 返回一个对象给 fn变量 返回遍历器对象
// 使用next()方法 
// 可以.value取值 done 获取状态(false还可以next true不能next)
console.log(fn.next().done); //打印的结果就是 {valse：1 ，done：false}
// 当第一次调用next 就会卡在第一个yield
// generator 函数是分段执行，yield语句是暂停执行，next就是恢复执行
 
案例
 // 对迭代器的传值
function* add(){
    console.log('hehehe');
    // x 不是 yield 2 的返回 是当前next 调用 恢复调用yield执行传入的实参
    let x = yield "a" // 当使用next时 卡在这个位置
    console.log('hahah',x);
    let y = yield '123'
    console.log('hahahz',y);
    return x+y
}
let fn = add()
// 先打印 log 中的数据  在进行打印yield关键字中的内容，函数进行挂起
// 在进行执行next 时就恢复执行
console.log(fn.next(10)); // {value: 'a', done: false}
 
// 当进行传值时，这个next的值传给乐 let 中的x
//  hahah 20
console.log(fn.next(20));  // {value: '123', done: false}
 
// 当进行传值时 next  中的参数传给y值
// 返回值return x+y找到下一个执行的yield 中的 对value进行赋值，因为最后一次执行done: true
// 所以就赋值到最后一个next 的value中
console.log(fn.next(20)); //{value: 40, done: true}
 
 
 
主要作用就是 不具备 interator 接口的对象提供的遍历操作
将不具备 interrator循环的对象 变为可遍历操作
function* func(obj) { // 生成器写法 + yield 挂起
    const propkey = Object.keys(obj) // 传入的对象 返回一个迭代器
    console.log(propkey);
    for (let p of propkey) { // 迭代器就可以进行for of循环
        yield [p, obj[p]] // 构造结构 {name：1223}  // 使用yield关键字函数挂起
    }
}
 
 
const obj = {
    name: 133,
    age: 456
}
 
 
 
console.log(obj); // {name: 133, age: 456} 普通的对象
 
for (let [key, val] of func(obj)) {
    console.log(key, val);
    console.log(`${key}:${val}`)
}

promise

异步编程的解决方案 承诺  因为是一个对象 所以需要new 创建对象
promise 相当于一个容器，放置这未来要执行的事件(异步)的一个结果
各种异步操作都可以使用同样的方式进行处理 axios库就是基于promise
 
 
特点：
1. 对象的状态不收外接影响 异步处理的状态： peendig(进行中) resolved（成功） rejected(失败了)
这三个状态 保存在peomise
2.一旦改变，就会在变，任何时候都可以 得到结果 进行中- 成功  进行中-失败 都存储在peomise
 
案例：
// 创建对象
//1. new Promise(接受一个回调函数) 
//2. rejected,resolve 回掉函数中接受两个参数(失败和成功) 固定写法
let pro = new Promise(function (rejected, resolved) {
    // rejected,resolve 这个参数都是方法
    // 执行异步操作
    let res = {
        code: 200,
        data: {
            name: '成功了'
        },
        error: '失败 了'
    }
    // 伪造异步操作
    setTimeout(() => {
        if (res.code === 200) { // 如果状态为200
            resolved(res.datas) // 就将成功的值传给resolved成功状态 可以pro对象中的then() 获取成功的值
        } else {
            rejected(res.error)
        }
    }, 1000)
})
console.log(pro); // 返回一个promis对象 对象内部存在两个3个状态
 
创建的promise对象的回调方法
// 成功状态下 请求后端获取的状态吗和参数
//pro.then() 成功的结果 执行异步操作的成功的结果 内部接受一个回调函数
pro.then((val) => { // 接受回调函数
    // val 接受成功的数据
    console.log(val); // 
}, (err) => { // err接受异步请求中请求状态 错误的内容
    console.log(err)
})
 
 
封装异步操作
ex 接受时间
封装了promise 方法，变得更为灵活
function time(ex) {
     return new Promise((rejected, resolved) => {
         setTimeout(() => {
             resolved('成功的信息')
         }, ex);
     })
 }
 time(1000).then((val) => {
     console.log(val)
})

promise封装异步函数

pormise 封装一个ajax 异步请求
const getJSON = function(url){
    //在这个方法中封装一个promise对象
    new Promise((reject,resolve)=>{
        // 创建一个请求
        const xhr = new XMLHttpRequest()
        //打开对象
        xhr.open('GET',url)
        // 设置状态 回调函数
        xhr.onreadystatechange = handler
        //约定返回数据类型
        xhr.responseText = 'json'
        //设置请求头
        xhr.setRequestHeader('Accept','application/json')
        //发送
        xhr.send() // get必须写
        // 回调函数
        function handler(){ // 创建回调函数
            // this指向 xhr对象
            console.log(this.readyState) // 获取数组的状态
            if(this.readyState === 4){
                if(this.status === 200){ // 后端请求的状态
                    resolve(this.response) // 获取的请求体返回  
                }else{
                    reject(new Error(this.statusText)) // 讲请求状态的error
                }
            }
        }
    })
}
 
getJSON('url') // 传入地址
.then((val)=>{
	console.log(val)
},(error)=>{
	console.log(error);
})
 
 
//其他pormise中的其他方法
//then() 方法 第一个参数：relove 回掉方法 第二个参数：可选的reject 状态的回调 
// then() 返回了什么：返回的时新的pormise实例对象 还可以.then()  可以采用链式写法
// 可以特殊写发 链式写法
getJSON('url').then(val=>{
    // 返回正确的操作
}).catch(err=>{
    // 返回错误的操作
})

补充

 // resolve() reject() all() race() finally()
//1 resolve() = reject() 可以转换为 promise对象 现有的任何对象转换为
// let p = Promise.resolve('foo') //将字符串foo转为promis对象
// //等价于
// let p = Promise(resolve => {
//    return resolve('foo')
// }) // 直接返回foo
 
// console.log(p);
// p.then((val) => {
//     console.log(val); // 结构 foo
// })
 
 
// all() 并行的执行这个3个异步 // 一起操作 游戏素材 加载
// let p1 =new Promise((resolve,reject)=>{}) 
// let p2 =new Promise((resolve,reject)=>{}) 
// let p3 =new Promise((resolve,reject)=>{})    
 
// let lst = [p1,p2,p3]
// let p4 = Promise.all(lst) // 传入一个数组
// p4.then((val)=>{
//     // 3个都成功才是成功
// }).catch((err)=>{
//     // 如果一个失败 就全失败
// })
 
// race() 请求超时的操作 给某个设置超时的时间并且在超时后执行相应的操作
// 请求图片资源
function img(imgs) {
    return new Promise((resolve, reject) => {
        new imgg = new Image() // Image()函数
        img.onload = function () {
            resolve(img) // 成功返回img
        }
        img.src = imgsrc
    })
}
// 请求图片时长
function timeout() {
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('请求超时')
        }, 3000) // 设置时长3秒
    })
    }
// 参数接受数组 请求成功不会走catch
Promise.rece([img('images/2.peg'), timeout()]).then(res => {
    console.log(res); // 如果3秒内请求图片就会执行这里
}).catch(err=>[
    console.log(err) // 如果3秒后才能请求到就会执行请求超时(打印请求超时提示)
])
 
race() finally(()=>{也是一个回调函数}) 不论是promise对象请求数据成功失败 都会执行race() finally()这两个方法

async异步

async 解决异步操作更加方便
使用async 进行异步操作 返回一个promise对象 可以统括then 和catch
async 时gemerator 的一个语法糖
 
1.案例使用async
async function f(){
    // 这个后台的字符串会被async方法转换为 promis对象
    // 字符传会被转换为promis对象
    // await命令就是等待
    return await 'await等待命令' async方法必须要与await配合使用
}
f() // Promise {<fulfilled>: undefined} 返回一个promise对象
f().then(res=>{ // 接受正确的数据
    console.log(res)
}).catch(error=>{ // 接受抛出异常数据
    console.log(error)
})
 
 
方便理解
async function f(){
    let s = await '你好 你好 async' //1.s变量执行
    let data = await s.split('') // 2.data 等待s变量执行完毕后 在进行执行
    return data // 3.最终返回的时data等待执行后的结果
  
}
 
// 假如：
async函数中有多个await 那么then函数等待 所有的await指令 运行完毕的结果 才会执行then
 
//注意：
await '后面必须是一个promise对象，不管是什么类型都会转换为promise对象'
await 特点就是 如果一个出错执行了错误信息，下面的await不会执行
 
2.捕获异常
async function f2(){
    await Promise.reject('出错了') // 只会打印出错了，下面的命令就不会执行
    await Promise.resolve('正确的') // 不执行
 
}
f2().then(
    (val)=>{
        console.log(val);
    }
).catch(
    (err)=>{
        console.log(err); // 捕获Promise对象的信息
    })
 
 
3.解决await 出现错误不执行的弊端
async function f2(){
    try {
        await Promise.reject('出错了') // 就算出错
    }catch(err){
    }
    return await Promise.resolve('正确的') // 还是可以出现正确的
}
 
f2().then(
    (val)=>{
        console.log(val); // 可以打印正确信息
    }
).catch(
    (err)=>{
        console.log(err); 
    })
 
 
4.模拟异步请求
function getJSON(url){
    //伪造的ajax请求
    console.log(url)
    return HeWeather6
}
 
// 伪造url 中返回的对象数据
HeWeather6 =  {
    now :{
        'xx':123
    }
}
 
//当执行这个函数时，就会将url传入到async的函数中
async function func(url) {
    // 发送ajax
    // await  等待数据传的返回
    let res = await getJSON(url) // 等待getJSON函数执行完毕后返回结果
    // 获取 url中的now的数据
    let arr = await res.now //HeWeather6 url 中返回的对象数据
    return arr // 返回数据 对象中now数据
}
 
// 使用then 获取正确的数据
// then 需要等待await执行完毕后返回的数据结构
func('这是url').then((val) => { console.log(val); })
 
总结：generator promise async 解决回掉地狱的问题(回掉循环 嵌套太多) 异步操作更加方便

class构造

class 关键字时es6的语法糖   
   
class Person{  // 创建class person
	constructor(name,age){ // init方法初始化方法
    	this.name = name // 赋值属性
    	this.age = age 
    }
 
	sayname(){ // 内部方法
		return this.name
	}
	sayage(){ // 内部方法
		return this.age
	}
 
}
 
let p1 = new Person('aa',123) // 实例化对象
console.log(p1); // Person {name: 'aa', age: 123}
// 调用对象中的方法
console.log(p1.sayage()); //123
console.log(p1.sayname()); //aa 
 
// 通过外部进行对类中设置方法 Object.assign 
// 传入两个参数1 当前的类名.prototype方法 2传入一个对象，对象中函数名(){}
Object.assign(Person.prototype,{
    sayxx(){
        return xx
    },
    sayzz(){
        return yy
    }
})

class类的继承

// 类的继承 使用关键字extends
// 创建类不用加上()
 
class animal {
    // es6 中的初始化方法 // 没有类对象
    constructor(name, age) {
        this.name = name //事例对象
        this.age = age // 事例对象
    }
    //创建两个对象
    show() {
        return this.name
    }
    func() {
        return this.age
    }
}
继承语法:
class  子类名 extends 父类名
class dog extends animal{
	// dog继承了adimal方法
}  
 
// 使用super方法继承父类的初始化方法
class dog extends animal{ 
    // 子类的初始化方法，因为继承了父类的变量
    constructor(name,age,color){
        super(name,age) // 直接使用super去找父类的变量就可以
        this.color = color
    }
    // 子类的自己的方法
    saycole(){
        return `${this.name}${this.age}`
    }
    //重写父类的方法
    func() {
        return `${this.name}${this.age}`
    }
}
// 创建子类的对象
let p1 = new dog('aa',18,'red') // p1是事例话dog 的对象
console.log(p1); // 返回了dog的对象，内部有父类的方法和父类的事例变量
 
//执行父类中的方法
console.log(p1.show());
//执行子类的方法
console.log(p1.color());

模块化

在modules/index.js文件将函数或者变量进行抛出
 
// es6 模块中主要有两个命令构成 export和import构成
// export 用于规定模块对外接口 抛出
// import 用于输入其他模块提供的功能 结构
// 模块就是一个独立的文件
export const name = '张珊'
export const age = 18
// 必须使用export关键字进行 
export function func(){ // 抛出方法对象
    return '你好我是xx'
}
// 或者
export {func} //抛出对象 被引用的进行解构
 
// 抛出类 对象 数组 等等
 
 
在需要的文件导入index.js文件中的变量和函数
<script type="module"> // 如果使用外部抛出的 模块需要将type设置为module
//  es6模块系统 引入 模块下的文件 和模块下的方法对象
// 进行解构 模块中的方法
import {name,age,func} from './modules/index.js' //进行导入 从那个文件导入那个变量
//  {name} 指定导出的数值或者方法  from 指定接受的文件
console.log(name)
console.log(age)
console.log(func());
 
</script>