JavaScript ES6

let声明变量：

特性一：不能重复声明；

特性二：块级作用域（仅在let变量里边有效）；（四大作用域：块级作用域、全局、函数、eval）

{
let girl = '女生'
}
console.log("不能调用");

特性三：let的块级作用域中，不会影响作用域链；

{
let school='ab';
function fn(){
    console.log(school);
    }
fn();   可以使用school参数，不影响作用域链；
}

特性四：let不存在变量提升，需要先声明；

案例：点击切换颜色

let items = document。getElementsByClassName('item');
for(let i = 0;i<items.length;i++){
    items[i].onclick=function(){
        items[i].style.background = 'pink';
    }
}

注：如果是var定义则会出现下标越界，因为var作用域是在整个函数中；let只在let每次的值中有效。

const声明常量

1、一定要有初始值；

2、一般常量名要大写；

3、常量的值不可以修改；

4、const也是块级作用域；

5、对于数组和对象里边属性，元素的修改不算为对此常量的修改，不报错；

ES6变量解构赋值

ES6中允许按照一定的模式用数组和对象中提取值，对变量进行赋值。

例如：数组值

const F5 = ['a','b','c'];
let[A,B,C]=F5;
console.log(A,B,C); 
输入结果为F5中对应的值，

对象值：

const zhao = {
    name:'zs',
    age:20,
    sing:function(){console.log("唱歌")}
}
let{name,age,sing} = zhao;
console.log(name);
console.log(age);
console.log(sing);
分别输出的是zhao对象中对应的值；

ES6模板字符串（` `）

let str = `模板字符串，反引号`

特性一：内容中可以直接出现换行符；

特性二：可以进行字符串拼接；

 进行字符串拼接时可以需要使用：${"变量名"}固定格式

特性三：模板字符串可以调用函数；

ES6简化对象

允许在大括号里直接写入变量和函数，作用对象的属性和方法。

等效与这样写法：

 （是等效的）

 简化方法：

ES6箭头函数：（"=>"）

原来写法：
let fn = function(){}

箭头函数写法:

let fn =(a,b)=>{
    return a+b;
}
let result = fn(1,2);
console.log(result);

特性一：箭头函数中this是静态的，始终指向函数声明时所在作用域下的this对象。

function getName(){
    console.log(this.name);
}
let getName=()=>{
    console.log(this.name);
}
window.name = "尚硅谷"；
const school = {
    name:'Atg';
}
//getName();
//getName2();
getName.call(school);
getName2.call(school);
getName()两个方法都指向window对象，
getName.call()方法改变了指向，但是箭头函数特性使其任指向window

特性二：不能作为构造函数实例化对象；

let person =(naem,age)=>{
    this.name =name;
    this.age =age;
}
let me = new person('abc',50);
console.log(me);
此程序不会执行，会报错

特性三：不能使用arguments变量；

 特性四：箭头函数可以简写

 1、省略小括号(只有一个形参时)

let fn = n =>{
    return n + n;
}

2、可以省略花括号（当代码只有一条语句时）

let fn = n =>n*n;

 案例:箭头函数

传统写法：

<script>
    let ad = document.getElementById("ad");
    ad.addEventListener('click',function(){
    let that = this;
    setTimeout(function(){
        console.log(this);    指向的是that所代表的ad
        that.style.background='pink';
    },2000)

})

</script>

箭头函数写法：

根据特性，指向的任然为ad

<script>
let ad = document.getElementById('ad');
ad.addEventListener('click',function(){
    setTimeout(() =>{
    this.style.background = 'pink'
    })
})
</script>

案例2：

从数组中返回偶数元素

原来写法：

<script>
    const str = [1,3,5,7,9,10,12]
    const result = arr.filter(function(item){
        if(item %2===0){
            return true;
         }else{
            return false;
          }
    })
    console.log(result);
<script>

箭头函数写法：

const arr = [1,2,6,10,12];
const result = arr.filter(item => item%2===0);
console.log(result);

特性五：

箭头函数：适合与this无关的回调，定时器，数组的方法回调；不适合与this有关的回调，时间回调，对象的方法；

 ES6的参数默认值：

允许给参数赋值和初始值；

1、形参初始值，一般要给最后一个形参赋值。

function fn(a,b,c=10){
 return a+b+c;
}
let sum = fn(1,2)
console.log(sum);

2、可以与解构赋值结合

若调用函数有值则会覆盖函数中的值，若调用函数没有值，则使用函数中的默认值。

function connect({host='3.1415',username='abc'}){
    console.log(host);
    console.log(username);
}
connect({
    host:'localhost';
    username
})

ES6引入rest参数：

ES5中获取函数的实参可以使用arguments获取：输出的是对象

function data(){
    console.log(arguments);
}
data("a","b")
此时输出的是一个对象{a,b}

ES6中用rest参数替代arguments:输出的是数组

function data(...args){
    console.log(args);
}
data('a','b');
此时输出的是数组[a,b]

ES6扩展运算符：

“...”扩展运算符可以将[数组]转换为参数序列

const tf=['a','c'];
function chuwan(){
    console.log(arguments);
}
chuwan(...tf);
输出的为两个单独的对象：a,c

1、扩展运算符可以用来进行数组的合并：

普通方法：concat（）方法合并；

const a =['a','b'];
const b =['c','d'];
const hebing = a.concat(b);
//concat合并的方法
console.log(hebing);
输出的结果为['a','b','c','d']

使用拓展运算符：

const a1 = ['a','b'];
const b1 = ['c','d'];
const hebing = [...a1,...b1];
console.log(hebing);
输出结果也为['a','b','c','d']

2、可以用作数组的克隆

const str = ['a','b','c']
const ab =[...str];
console.log(ab);
输出的结果为['a','b','c']

3、把伪数组转为真正数组

<div></div>
<div></div>
<script>
    const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    console.log(divArr); //输入结果为[div,div]
</script>

ES6——Symbol第七种数据类型

 创建两种方式：方式一

let a = Symbol('A');
let b = Symbol('B');
console.log(a===b);
//打印输入false，此方式声明的值是唯一的

方式二：

let a = Symbol.for('aa');
let b = Symbol.for('aa');
console.log(a===b);
//返回true，这样方式值是相同的

注：Symbol不能与其他数量进行运算；

七种数据类型总结：USONB

u:underfined

s:String , Symbol

o:Object

n:null,number

b:boolean

Symbol作用：

一、创建对象属性方法：

let game={
}
let methods = {   //首先新建一个对象
    up:Symbol(),
    down:Symbol()
}

//通过这个对象添加方法
game[methods.up] = function(){
    console.log("Symbol添加方法一");
}
game[methods.down]=function(){
    console.log("添加方法二");
}

创建方法二：直接通过在目标对象通过Symbol添加方法

let youxi={
    name:'liangrensha',
    [Symbol("say")]：function(){
    console.log('方法一');
    }
}

Symbol还提供了十一个内置的值：

 ES6——迭代器（iterator）

是一种接口，为各种不同的数据结构提供统一的访问机制。

ES6提供了一个新的遍历方式for..of...

 遍历实例：

const xiyou=['唐僧','孙悟空'，'猪八戒','沙僧']；
for(let v of xiyou){
    console.log(v); //输出结果为：唐僧  孙悟空  猪八戒 沙僧
}

原理：

const xiyou=['唐僧','孙悟空'，'猪八戒','沙僧'];
let iter = xiyou[Symbol.iterator]();
console.log(iterator.next());; //输出唐僧  false  
console.log(iterator.next());;  //输出孙悟空   false
console.log(iterator.next());;//输出猪八戒   false
console.log(iterator.next());; //输出沙僧  false
console.log(iterator.next());;  //输出underfined   true

 案例：对象中遍历数组

<script>
    const banji={
    name:'一班'，
    stus:[
        'xiaoming',
        'xiaotian',
        'xiaohong'
    ],
    [Symbol.iterator](){
        let index = 0;
        let _this = this;    
        return {
        next:function(){
            if(index<=_this.stus.length)
{const result ={value:_this.stus[index],done:false}};
            index++;
            return result;
            }else{
            return {value:underfined,done:true};
            }
        }
    }
    }
</script>

生成器——特殊的函数

异步编程：纯回调函数；

function * gen(){
    console.log('hello');  //调用iterator的next方法才可以调用
}
let iterator = gen();
iterator.next();

特殊点二：

function * gen(){
    console.log(111);
    yidld '调用一';
    console.log(222);
    yidld '调用二'；
}
let iterator = gen();
iterator.next();

案例：生成器

<script>
    function * gen(arg){
        console.log(arg);  //输出AAA
        let one = yield 111;
        console.log(one);  //输出BBB
        let two = yield 222;
        console.log(two);  //输出CCC
        let three = yield 333;
        console.log(three);   //输出DDD
    }
let iterator = gen('AAA');
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
</script>

每个iterator.next函数都是前一个的调用。

生成器——异步编程（文件操作，网络操作，数据库操作）

定时器案例：

function one(){
    setTimeout(()=>{
    console.log(111);
    iterator.next();
    },1000)
}
function two(){
    setTimeout(()=>{
    console.log(222);
    iterator.next();
},2000)
}
function * gen(){
    yield one();
    yield two();
}
let iterator = gen();
iterato.next();

生成器案例：

function getUsers(){
    setTimeout(()=>{
        let data = '用户数据'；
        iterator.next(data);
    }.1000)
}
function getOrders(){
    setTimeout(()=>{
        let data = '订单数据';
        iterator.next(data);
    })
}
function * gen(){
    let users = yield getUsers();
    console.log(users);
   let order = yield getUsers();
    console.log(order);
}
let iterator = gen();
iterator.next();

ES6——promise

引入的异步编程的新解决方案。promise是一个构造函数。

<script>
    const p = new Promise(function(resolve,reject){
        setTimetout(function(){
            let data = '数据库中的数据成功';
            resolve(data);
        -------------------------------
            let err = '数据读取失败';
            reject(err);
        },1000);
});
//调用promise对象的then方法
    p.then(function(value){
        console.log(value);
},function(reason){
    console.error(reason);
})
</script>

当获取成功时获取resolve参数，执行then方法第一个回调；

当获取失败时获取reject参数，执行then方法第二个回调；

promise实例读取文件（node.js获取fs模块）：

let fs = requie('fs');
//引入node的fs模块

const p = new Promise(function(resolve,reject){
    fs.readFile('./files/1.txt',(err,reject)=>{
    if(err) reject(err);
    resolve(data);
    });
});
p.then(function(value){
    console.log(value.toString());
},
function(error){
    console.log("获取失败");
})

使用promise封装AJAX

<script>
    const p = new Promise((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(error){
    console.log(error);
}
)
</script>

promise-then方法：

<script>
    const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('执行成功');
    -----------------------
       reject('执行失败');
    },1000)
})；
const result = p.then(value=>{
    console.log(value);
},function(error){
    console.warn(reason);    向控制台输出一个警告信息
})
console.log(result);
</script>

调用then方法，它的返回结果是Promise对象，对象的状态由回调函数的执行结果决定；

如果回调函数中的返回的结果是非Promise类型的属性，状态为成功，返回值是对象成功的值；

实例：返回值不是Promise类型的

<script>
    const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
    执行成功
        resolve('用户数据');  
-------------------------
    执行失败
        reject('出错啦');
     },1000)
    });
    const result = p.then(value =>{
        console.log(value);
        return '不是promise类型'
    }，reason=>{
        console.warn(reason);
        });
     console.log(result);
</script>

实例：返回值是Promise类型的

此时内部return 返回的promise状态决定了then方法返回的Promise状态。

const p = new Promist((resolve,reject)=>{
    setTimeout(()=>{
        resolve('数据执行成功');
        --------------------
        reject('数据执行失败');
    }.1000)
})；
const result = p.then(value=>{
    console.log(value);
    return new Promise((resolve,reject)=>{
        resovle('成功');
--------------------------------
        reject('error');
    })
})

then方法还可以抛出错误

const p = new Promist((resolve,reject)=>{
    setTimeout(()=>{
        resolve('数据执行成功');
        --------------------
        reject('数据执行失败');
    }.1000)
})；
const result = p.then(value=>{
    console.log(value);
    throw new Error('出错啦')
}，reason=>{ 
        console.warn(reason);
    })
})

案例：读取多个文件(链式调用)

const fs = require('fs');
const p = new Promise((resolve,reject)=>{
    fs.readFile('./flies/1.txt',(err,data)=>{
    resolve(data);
    });
});
p.then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile('./file/2.txt',(err,data)=>{
            resolve([value,data]);
        });
    })
}).then(value=>{
    return new Promist((resolve,reject)=>{
        fs.readFile('./file/3.txt',(err,data)=>{
            value.push(data);
            resolve(value);
        });
    })
}).then(value=>{
    console.log(value.join('\r\n'));
})

ES6中Promise——catch方法

<script>
    const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
    reject('出错了');
    },1000)
    })；
    p.then(function(value){},function(reason){  
        不指定一个成功参数，直接第二个参数
        console.log(reason);
    });
------------------------------
    
    p.catch(function(reason){
        console.warn(reason);
    })
</script>

set集合介绍与API

声明一个set集合：set声明的集合中的元素只能是唯一的

<script>
    let s = new set();
</script>

 声明一个set集合，并统计个数："集合名".size;

<script>
    let s2 = new Set(['学习'，'游泳','读书','学习','学习']);
    元素个数
    console.log(s2.size);
</script>

添加新元素：集合名.add('元素名');

<script>
    let s = new Set(['学习'，'游泳','读书','学习','学习']);
    s.add('写代码');
</script>

删除元素：集合名称.delete('元素名称');

<script>
    let s = new Set(['学习'，'游泳','读书','学习','学习']);
    s.delete('游泳');
</script>

检测元素是否存在：集合名称.has('元素名称');

<script>
    let s = new Set(['学习'，'游泳','读书','学习','学习']);
    s.has('学习');
    存在返回true
    不存在返回false
</script>

 清空集合：集合名称.clear();

<script>
    let s = new Set(['学习'，'游泳','读书','学习','学习']);
    s.clear();
</script>

set集合实践：

数组去重：转化为集合，利用其特性，元素唯一性。

<script>
    let arr=[11,2,3,10,15,15];;
   set生成的集合，其中的元素只能是唯一的
    let result = [...new Set(arr)];
    console.log(result);
</script>

两个数组取交集：

filter():创建一个新数组；

let arr = [1,2,2,3,5,5];
let arr2 = [5,6,5];
let result = [...new Set(arr)].filter(item=>{
    let s2 = new Set(arr2); //5,6
    if(s2.has(item)){
        return true;
    }else{
        return false;
    }
});
console.log(result);
---------------------方法二
let result =[...new Set(arr)].filter(item=>new Set(arr2).has(item));

两个数组取并集：

<script>
let arr = [1,2,2,3,5,5];
let arr2 = [5,6,5];
let hebing = [...new Set([...arr,...arr2])];
console.log(hebing);
</script>

两个数组取差值：

<script>
let arr = [1,2,2,3,5,5];
let arr2 = [5,6,5];
let result = [...new Set(arr).filter(item=>{
    let s2 = [...new Set(arr2)];
    if(s2.has(item)){
        return false;
    }else{
        return true;
    }
    })]
</script>

ES6——Map数据结构

Map数据结构类似于对象，也是键值对的集合。但‘键’范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用【扩展运算符】和【for....of...】进行遍历。

1、size 返回Map元素个数；

2、set 增加一个新元素，返回当前Map；

3、get 获取键名对象的键值；

4、has 检测Map中是否包含某个元素，返回boolean值；

5、clear清空集合，返回underfined;

6、delete 删除键名或值

一、创建一个空Map

let m = new Map();

二、添加元素

<script>
let m = new Map();
m.set('name','尚硅谷');
m.set('change',function(){
    console.log('我们可以改变你！');
});
</script>

 三、删除元素：

<script>
let m = new Map();
m.set('name','尚硅谷');
m.set('change',function(){
    console.log('我们可以改变你！');
});
//删除指定的值
m.delete('name');
</script>

 四、获取元素

<script>
let m = new Map();
m.set('name','尚硅谷');
m.set('change',function(){
    console.log('我们可以改变你！');
});
//获取键名对象的值
console.log(m.get(change));
</script>

五、清空

<script>
let m = new Map();
m.set('name','尚硅谷');
m.set('change',function(){
    console.log('我们可以改变你！');
});
let key ={
    school:'ATGUI'
}
m.set(key,['ab','cd','ef']);

m.clear();
</script>

六、遍历

<script>
let m = new Map();
m.set('name','尚硅谷');
m.set('change',function(){
    console.log('我们可以改变你！');
});
let key ={
    school:'ATGUI'
}
m.set(key,['ab','cd','ef']);

for(let v of m){
    console.log(v);

}
</script>

class类

知识点：

1、class声明类；2、constructor定义构造函数初始化；

3、extends继承父类；   4、super调用父级构造方法 ；

5、static定义静态方法和属性；   6、父类方法可以重写；

ES5通过构造函数实例化对象方法：

<script>
    function phone(brand,price){
        this.brand = brand;
        this.price = price;
    }
    phone.prototype.call = function(){
        console.log('可以打电话');
    }
    let huawei = new phone('华为'，4500);
    huawei.call();
    console.log(huawei);

</script>

ES6通过class构造方法：

constructor方法当实例化（new）时，自动调用此方法；固定方式；

方法必须使用此方式定义；

class shouji{
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    call(){
        console.log('我可以打电话');
    }
}
    let onePlus = new shouji('oppo',2999);
    console.log(shouji);

class类的静态成员：

静态属性只能class类调用

<script>
class phone{
    static name = '手机';
    static change(){
        console.log('方法');
    }
}
let nokia = new phone();
console.log(phone.name);
</script>

ES5构造函数的继承：

<script>
    function phone(){
        this.brand = brand;
        this.price = price;
    }
    phone.prototype.call= function(){
        console.log("我可以打电话");
    }
    function smartPhone(brand,price,color,size){
        phone.call(this,brand,price);
        this.color =color;
        this.size = size;
    }
//设置子级构造函数的原型
    smartPhone.prototype = new phone;

//声明子类的方法
    smartPhone.prototype.phone = function(){
        console.log('拍照');
    }
    smartPhone.prototype.playGame = function(){
        console.log('游戏');
    }
    const chuizi = new smartPhone('锤子',2499,'黑色',5.5inch);
    console.log(chuizi);
</script>

类继承：

class Phone{
    constructor(){
        this.brand = brand;
        this.price = price;
    }
    call(){
        console.log("我可以打电话");
    }
}
   class smartPhone extends Phone {
    //构造方法
    constructor(brand,price,color){
         super(brand,price); //子类访问父类方法属性
        this.color= color;
    }
    photo(){
        console.log('拍照');
     }
    playGame(){
        console.log('玩游戏');
    }
}
const xiaomi = new smartPhone('小米',1999,'黑色');
    console.log(xiaomi);
    

（当子类有与父类同名的方法时，只能调用子类的方法，进行完全重写；）

class中的get和set：

<script>
    class phone{
        get price(){
        console.log("价格属性被读取了");
        return 'iloveyou';
        }
        set price(newVal){
            console.log("价格属性被修改了");
        }
    }
    let s = new phone();
//设置数据
    s.price = 'free';
----------------------------
//读取数据
    console.log(s.price);
</script>

ES6数值的扩展

一、Number.EPSILON是JavaScript表示最小精度；

EPSILON属性的值接近于2.22044....E-16，如果两个值相减值小于EPSILON则表示两个值为相等的；

<script>
    function equal(a,b){
    if(Math.abs(a-b) < Number.EPSILON){
        return true;
    }else{
        return false;
   }
}
console.log(0.1+0.2 ===0.3);  //返回值为false
console.log(equal(0.1+0.2,0.3));  //返回值为：true

</script>

二、二进制，八进制，十进制，十六进制

三、Number.isFinite检测是否为一个有限数；

console.log(Number.isFinite(100));
返回true；
console.log(Number.isFinite(Infinity));
返回为false

四、Number.isNaN检测一个数值是否为NaN

五、Number.parseInt / Number.parseFloat字符串转整数/浮点数

六、Number.isInteger判断一个数是否为整数

七、Math.trunc将数字的小数部分抹掉

八、Math.sign判断一个数是正数、负数还是0；

正数返回1，负数为-1，零返回0；

ES6对象方法的扩展：

1、Object.is判断两个值是否完全相等

console.log(Object.is(120,120)); //返回值为true

2、Object.assign对象的合并

合并时，后边的会覆盖掉前边的重名属性。

<script>
    const config1 ={
      host:'agbsdf',
      port:3306,
      name:'aaa'
    };
    const config2={
        host:'123',
        port:222,
        name:'张三'
    }
    console.log(Object.assign(config1,config2));

</script>

3、Object.setPrototypeof 设置原型对象

      Object.getPrototypeof 获取原型对象

<script>
    const school = {
        name:'尚硅谷'
    }
    const cities = {
        xiaoqu:['北京','上海','深圳']
    }
    Object.setPrototypeof(school,cities);
    console.log(Object.getPrototypeof(school)); //输出的是获取的属性
    console.log(school);
</script>

ES6模块化

优势：

1、防止命名冲突；

2、代码复用；

3、高维护性；

ES6之前模块化规范产品：

  ES6模块化语法

模块功能主要由两个命令构成：export和import

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能

<body>
    <script type='module'>
导入模块通用方式
        import * as m1 from "./src/js/1.js";
        console.log(m1);
    </script>
</body>

 (分别暴露):

export let school = "尚硅谷";
export function teach(){
    console.log("我们可以教给你技能");
    }

(统一暴露):

let school = '尚硅谷';
function findJob(){
    console.log("学习更多知识");
}
export{school,findJob};

 (默认暴露):

export default{
    school:'abc',
    change:function(){
        console.log("我们可以教你");
    }
}

导入模块方法二：解构赋值形式

分别暴露方法:

<script><
    import {school,teach} from "./src/js.1.js";
    console.log(school);
    console.log(teach);
/script>

 统一暴露方法：

<script>
    import {shcool as guigu,findJob} from "./src/1.js";
    console.log(guigu,findJob);
</script>

默认暴露法：

<script>
    import {default as m3} from "./src/m3.js";
    console.log(m3);
</script>

简便形式——只能针对默认暴露

<script>
    import m3 form "./src/m3.js";
    console.log(m3);
</script>

ES6模块化另一个种方式：

声明模块化

<body>
<script src='./src/js/app.js' type ='module'></script>

</body>

 导入模块化文件（通用方法，分别暴露法，统一暴露法，默认暴露法）

import * as m1 from "./m1.js";
console.log(m1);

通过babel对ES6模块化进行转化：

模块化引入NPM包：

ES7新特性

一、Array.prototype.includes

includes()方法用来检测数组中是否包含某个元素，返回布尔型值。

<script>
    const mingzhu = ['西游记','红楼梦','水浒传']
    console.log(mingzhu.includes('西游记'));
    //若存在值则返回true；
    //若不存在则返回false；
</script>

二、指数操作符（**）两个星号。

<script>
    console.log(2**10);    //1024
    console.log(Math.pow(2,10)); //1024
</script>

ES8新特性

async函数和await表达式两种语法结合可以让异步代码像同步代码一样。

一、async函数

1、函数的返回值是promise对象；

2、promise对象的结果由async函数执行的返回值决定；

返回的是一个非promise对象时，返回的就是一个成功的Promise值；

<script>
    async function fn(){
            返回一个字符串
        return '尚硅谷';
---------------------------
        return；
------------------------
        throw new Error('出错了');
}
</script>

----------------------------------------------------------------------

 当返回的结果是Promise时：

 返回的状态由函数内部的return语句决定；

<script>
    async function fn(){
        return new Promise((resolve,reject)=>{
          resolve('成功的数据');
          --------------------
          reject('失败的数据');
        })；
    }
    const result = fn();
    console.log(result);
调用then方法：
result.then(value=>{     成功时调用第一个
    console.log(value);
},reason=>{
    console.warn(reason);  失败时调用这个
})
</script>

 抛出错误时，返回是一个失败的Promise：

 

 await表达式

 1、await必须写在async函数中；

2、await右侧表达式一般为Promise对象

3、await返回的是Promise;

4、await的Promise失败了，就会抛出异常，需要通过try ...catch捕获处理

执行成功时：

<script>
    const p = new Promise((resolve,reject)=>{
        resolve("成功返回用户数据");
})
    async function main(){
    let result = await p;
    console.log(result);
    }
</script>

执行失败：

const p = new Promise((resolve,reject)=>{
    reject("失败数据");
})
async function main(){
    try{
        let result = await p;
    }catch(e){
        console.log(e);
    }
}

  ES6——async和await结合读取内容

const fs = require('fs');
function readWeixue(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./文件/为学.md',(err,data)=>{
             if(err) reject(err);
             resolve(data);
        })
    })
}
function readGuan(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./文件/观书有感.md',(err,data)=>{
             if(err) reject(err);
             resolve(data);
        })
    })
}
async function main(){
    let weixue = await readWeixue();
    let guan = await readGuan;
    console.log(weixue.toString);
    console.log(Guan.toString);
}
main();

  ES6——async和await结合封装AJAX请求

function sendAJAX(url){
    const x = new XMLHttpRequest();
    return new Promise((resolve,reject)={)
    x.open();
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState===4){
             if(x.status>=200 && x.status<=300){
                resolve(x.response);
             }else{
              reject(x.status);
            }
        }
    }
  })
}
------------------------
promise中then方法测试
sendAJAX("https://www......").then(value=>{
    console.log(value);
},reason=>{
    
})
---------------------------
async function main(){
    let result = await sendAJAX("https://www......");
    console.log)(result);
}
main();

 Object.values和Object.entries：

 Object.values()方法返回一个给定对象的所有可枚举属性值的数组；

<script>
    const school = {
        name:'尚硅谷',
        cities:['北京','上海','深圳'],
        xueke:['java','前端','大数据']
    };
    //获取所有对象的键：
   console.log(Object.keys(school));
    //输出所有的值:
   console.log(Object.values(school));

</script>

Object.entries()方法返回的是一个给定对象自身可遍历属性[ key,value]的数组；

<script>
    const school = {
        name:'尚硅谷',
        cities:['北京','上海','深圳'],
        xueke:['java','前端','大数据']
    };
    //获取[key,value]数值
    console.log(Object.entries(school));
    
</script>

 Object.entries()方法有利于创建Map：

<script>
    const school = {
        name:'尚硅谷',
        cities:['北京','上海','深圳'],
        xueke:['java','前端','大数据']
    };
    const m = new Map(Object.entries(school));
    console.log(m);
    console.log(m.get('name'));  //输出"尚硅谷"
</script> 

 Object.getOwnPropertyDescriptors()返回指定对象所有自身属性的描述对象

<script>
    const school = {
        name:'尚硅谷',
        cities:['北京','上海','深圳'],
        xueke:['java','前端','大数据']
    };
    console.log(Object.getOwnPropertyDescriptors(school));
</script> 

 ES9扩展运算符和rest参数

一、扩展运算符

在函数参数中时，会将其余参数都放入到扩展运算符中

<script>
    function connect(host,port,...user){
       console.log(host);
       console.log(port);
       console.log(user); 
    }
    connect({
        host:'3.1415',
        port:123,
        username:'zs',
        password:123456
    })

<script>

 扩展运算符在对象中：

<script>
    const skillOne = {
        q:'技能一'
    }
    const skillTwo = {
        w:'技能二'
    }
    const mangseeng = {...skillOne,...skillTwo};
    console.log(mangseng);

</script>

 输出结果为：

ES9正则扩展——命名捕获分组

捕获：

<script>
    let str = '<a href="http://www.baidu.com">百度</a>';
    const reg = /<a href="(.*)">(.*)</a>;
    const result = reg.exec(str);
    console.log(result);
</script>

输出结果为： 

捕获分组：

在需要提取前边加上：?<"命名">

<script>
    let str = '<a href="http://www.baidu.com">百度</a>';
    const reg = /<a href="(?<url>.*)">(?<text>.*)</a>/
    const result = reg.exec(str);
    console.log(result);
</script>

执行结果：

 ES9正则表达式——正则断言

<script>
    let str = 'js123正则断言666啦啦啦';
    const reg = /\d+(?=啦)/;
     //   \d是正则数字简写（0-9）
    const result = reg.exec(str);
    console.log(result);
</script>

 ES9正则表达式——反向断言：

<script>
    let str = 'ying123中文111zhongwen';
    const reg = /(?<=zhong)\d+/;
    const result = reg.exec(str);
    console.log(result);
</script>

ES9正则扩展——dotAll模式：

dot——"."（英文点）

<script>
  let str = '<ul>
            <li>
                <a>名称</a>
                <p>日期</p>
            </li>
        </ul>';
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
let result;
let data=[];
while(result= reg.exec(str)){
    console.log()result;
    data.push({title:result[1],time:result[2]});
}
console.log(data);
</script>

ES10新特性——Object.formEntries

 将二维数组转换为对象

<script>
const result = Object.fromEntries([
    ['name','尚硅谷'],
    ['kemu','java']
]),
console.log(result);
</script>

将对象转化为二维数组（ES8新特性）与ES10这个特性互逆的

<script>
    const arr = Object.entries({
    name:'尚硅谷'
})
    console.log(arr);
</script>

ES10新特性——trimStart（清空字符串左侧空白）和trimEnd（清空字符串右侧空白:

<script>
    let str = '   asadf   ';
    console.log(str);
    console.log(str.trimStart());
    console.log(str.trimEnd);
</script>

ES10新特性——flat和flatMap:

flat默认为深度1，降低一个维，三维变二维：

<script>
    const arr = [1,2,3[4,5[6,7]]];
    console.log(arr.flat());
</script>

输出结果为： 

flat设置为一维数组：

<script>
    const arr=[1,2,3[4,5[6,7]]];
    console.log(arr.falt(2));
</script>

输出结果为：

 flatMap：把Map结果变为一维数组：

<script>
    const arr=[1,2,3[4,5[6,7]]];
    const result = arr.flatMap(item=>[item * 10]);
    console.log(result);
</script>

 ES10新特性——Symbol.prototype.description

<script>
    let s = Symbol("尚硅谷");
    console.log(s.description);
</script>

ES11新特性

私有属性：只能在class类中使用

<script>
class Person{
    name,
    #age,
    #weight;
    constructor(name,age,weight){
        this.name = name;
        this.age = age;
        this.weight = weight;
    }
    intro(){
        console.log(this.name);
        console.log(this.age);
        console.log(this.weight);
    }
}
 const gril = new Person('小红',20,'50kg');   
    gril.intro();
</script>

ES11新特性——Promise.allSettled

 接收一个Promise数组，返回的也是一个Promise对象，返回的一直是成功的状态；

<script>
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("商品数据");
        },1000)
    })；
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("价钱信息");
        },1000)
    })；
    const result = Promise.allSettled([p1,p2]);
    console.log(result);
</script>

返回的数据为：

其中一个为执行失败时，执行结果还是成功状态返回：

 与此特性类似的是Promise.all()方法：

只有当全部为成功属性才返回成功Promise状态，否则返回失败状态Promise；

<script>
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("商品数据");
        },1000)
    })；
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("价钱信息");
        },1000)
    })；
    const re = Promise.all([p1,p2]);
    console.log(re);
</script>

 ES11新特性——String.prototype.matchAll()

返回的是数据匹配正则的批量方法：

<script>
    let str='<ul>
        <li>
            <a>肖生克救赎</a>
            <p>上映日期</p>
        </li>
        <li>
            <a>肖生克救赎</a>
            <p>上映日期</p>
        </li>
    </ul>';
    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
    const result = str.matchAll(reg);
    for(let v of result){
        console.log(v);
        返回的是数据
    }
--------------------------------
    利用扩展运算符展开
    const arr = [...result];
    console.log(arr);
</script>

ES11——可选链操作符（ ？. ）

用在对象类型的参数是，可以使用这个操作符，

不用操作符时：

<script>
    function main(config){
    const dbhost = config && config.db && config.db.host;
}
    main({
    db:{
        host:'192.168.1.1'
        username:'root'
    },
    cache:{
        host:'123'
        name:'abc'
    }
})
    
</script>

用可选操作符时：

<script>
    function main(config){
        const dbhost= config?.db?.host;
        console.log(dbhost);
    }
    main({
        db:{
          host:'1921.168.1.1',
          username:'root'    
        },
        cache:{
            host:'192.168.1.1',
            username:'admin';
            }
    })
</script>

返回值为：

 若没有参数时，输出:underfined

  

<script>


</script>

ES11——大整型（bigInt）

<script>
    let n = 521n;
    console.log(n,typeof(n));
</script>

定义函数转化为大整型：(不能是浮点数)

<script>
    let n = 123;
    console.log(BigInt(n));
</script>

大数值运算：

<script>
    let max = Number.MAX_SAFE_INTEGER;
    console.log(max); 
</script>

输出结果为： 

<script>
    let max = Number.MAX_SAFE_INTEGER;
    console.log(max+1);
    console.log(max+2);
</script>

最大只能输出这个值；

 可以使用BigInt进行转化获得更大数值，进行相加时需要都加上转化BigInt：

<script>
    let max = Number.MAX_SAFE_INTEGER;
    console.log(BigInt(max)+BigInt(1));
    console.log(BigInt(max)+BigInt(2));
</script>

 ES11新特性——绝对全局对象globalThis

<script>
    console.log(globalThis);
</script>

指向window对象