ES6-ES11

作者: Zach_1991 | 来源:发表于2022-02-18 17:16 被阅读0次

1、let变量

// （1）声明变量
let a;
let b,c,d;
let e = 1000;
let f = 521, g = 'I LOVE YOU!', h = [];

// （2）变量不能重复声明
let star = '成龙';
let star = '陈港生';  // Uncaught SyntaxError: Identifier 'star' has already been declared

// （3）块级作用域  全局、函数、eval
// if else while for 
{
    let girl = '周扬青';
}
console.log(girl); // Uncaught ReferenceError: girl is not defined

// （4）不影响作用域链
{
    let school = '尚硅谷';
    function fn(){
        console.log(shoole);
    }
    fn(); // 尚硅谷
}

let 实践案例======================

<div class="container">
    <h2 class="page-header"> 点击切换颜色 </h2>
    <div class="item"></item>
    <div class="item"></item>
    <div class="item"></item>
</div>
<script>
    // 获取div元素对象
    document.getElementsByClassName('item');
   // 1、遍历并绑定事件
   for(var i = 0; i < items.length; i ++){
        item[i].onclick = function(){
            // 修改当前元素的背景颜色
            this.style.background = 'pink';
        }
    }
    // 2、遍历并绑定事件
    for(let i = 0; i < items.length; i ++){
        item[i].onclick = function(){
            // 修改当前元素的背景颜色
            items[i].style.background = 'pink';
        }
    }
</script>

2、const常量

// 声明常量
const SCHOOL = '尚硅谷';
// 1、一定要赋初始值
const = A;
// 2、一般常量使用大写（潜规则）
const A = 100;
// 3、常量的值不能修改
SCHOOL = '开课吧!';
//4、块级作用域
{
    const PLAYER = 'UZI';
}
console.log(PLAYER);
//5、对于数组和对象的属性修改，不算做对常量的修改，不会报错
const TEAM = ['UZI','MXLG','HSSZT'];
TEAM.push('HGR');

3、变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

// 1、数组的解构赋值
const F4 = ['小沈阳','宋小宝','刘能','赵四'];
let [xiao,song,liu,zhao] = F4;
console.log(xiao);
console.log(song);
console.log(liu);
console.log(zhao);
//2、对象的解构赋值
const zhao = {
    name:'赵本上',
    age:'不详',
    xiaopin:function(){
        console.log('我可以演小品');
    }
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

4、模板字符串

ES6引入新的声明字符串的方式[``] '' ""

// 1、声明
let str = `我也是一个字符串哦!`;
console.log(str, typeof str);
// 2、内容中可以直接出现换行符
let str = `<ul>
                  <li>沈腾</li>
                  <li>玛丽</li>
                  <li>魏翔</li>
                  <li>艾伦</li>
              </ul>`;
// 3、变量拼接
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员！！！`;
console.log(out);

5、简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
这样的书写更加简洁。

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

6、箭头函数

ES6允许使用【箭头】(=>)定义函数

// 声明一个函数
let fn = function(){

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

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

function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}
// 设置window对象的name属性
window.name = '尚硅谷';
const school = {
    name:'AIGUIGU'
}
// 直接调用
getName(); // 尚硅谷
getName2(); // 尚硅谷
// call 方法调用
getName.call(school);
getName2.call(school);

2、不能作为构造函数实例化对象

let person = (name,age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao',30);
console.log(me);

3、不能使用arguments变量

let fn = () => {
    console.log(arguments);
}
fn(1,2,3);

4、箭头函数的简写

1）省略小括号，当形参有且只有一个的时候
let add = n => {
    return n + n
}
console.log(add(9));
2）省略花括号，当代码体只有一条语句的时候，此时return 必须省略，而且语句执行结果就是函数的返回值
let pow = n => n * n;
console.log(9);

箭头函数实践===================

// 需求1  点击div 2s后颜色变成【粉色】
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件
ad.addEventListener('click',function(){
    // 保存this的值
    // let _this = this;
    // 定时器
    setTimeout(() => {
        // 修改背景颜色 this
        // _this.style.background = 'pink';
        this.style.background = 'pink';
    },2000);
});
// -=======================================
// 需求2  从数组中返回偶数的元素
const arr = [1,3,5,6,10,100,34,45];
// 第一种写法
// const result = arr.filter(function(item){
//    if(item % 2 === 0){
//        return true;
//    }else{
//        return false;
//    }
//});
// 第二种
const result = arr.filter(item => {
    if(item % 2 === 0){
        return true;
    }else{
        return false;
    }
});
// 简化写法
const result = arr.filter(item => item % 2 === 0)
console.log(result);

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

7、函数参数默认值

ES6允许给函数参数赋值初始值

// 1、形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
function add (a,b,c=10){
  return a + b + c
}
let result = add(1,2);
console.log(result);
// 2、与解构赋值结合
function connect({host='127.0.0.1',username,password,port}){
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}
connect({
    host: 'www.baidu.com',
    username: 'root',
    password: 'root',
    port: '3306'
});

8、rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

// ES5获取实参的方式
function date(){
    console.log(arguments);
}
date('白芷','阿娇','思慧');

// rest参数
function date(...args){
    console.log(args); // filter,some,every,map
}
date('阿娇','白芷','思慧');

// rest参数必须要放到参数最后
function fn(a,b,...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6,7);

9、扩展运算符

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

// 声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'
// 声明一个函数
function chunwan(){
    console.log(arguments);
}
chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯');

10、扩展运算符应用

// 1、数组的合并
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi,...fenghuang];
console.log(zuixuanxiaopingguo);

// 2、数组的克隆   浅拷贝
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua]; // ['E','G','M']
console.log(sanyecao); 

// 3、将伪数组转化为真正的数组
const divs = document.querySelectorAll('div');
const disArr = [...divs];
console.log(divArr); // arguments

11、Symbol

ES6引入一种新的原始数据类型symbol，表示对一无二的值，它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点

Symbol的值是唯一的，用来解决命名冲突的问题；
Symbol值不能与其他数据进行运算；
Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名；

// 创建Symbol
let s = Symbol();
console.log(s,typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2 === s3); // false
// Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5); // true
// 不能与其他数据进行运算
let result = s + 100;
let result = s > 100;
let result = s + s;
// USONB   you are so niubility!
// U undefined
// S string symbol
// O object
// N null number
// b boolean

12、Symbol创建对象属性

// 向对象中添加方法 up down
let geme = {
    name: '俄罗斯方块',
    up: function(){

    },
    down: funtion(){

    }
};
// 声明一个对象
let methods = {
    up: Symbol(),
    down: Symbol()
};
game[methods.up] = function(){
    console.log('我可以改变形状！');
}
game[methods.down] = function(){
    console.log('我可以快速下降！');
}
console.log(game);

// 另一种格式
let youxi = {
    name: '狼人杀',
    [Symbol('say')]: function(){
        console.log('我可以发言！');
    },
    [Symbol('zibao')]: function(){
        console.log('我可以自爆');
    }
}
console.log(youxi);

13、Symbol内置属性

// Symbol.hasInstance
class Person{
    static [Symbol.hasInstance](param){
        console.log(param);
        console.log('我被用来检测类型了');
        return false;
    }
}
let o = {};
console.log(o instanceof Person);

// Symbol.isConcatSpreadable
const arr = [1,2,3];
const arr2 = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));

// Symol.unscopables
// 该对象指定了使用with关键字时,哪些属性会被with环境排除；

// Symbol.match
// 一个正则表达式方法，该方法用正则表达式去匹配字符串，由String.prototype.match()方法使用。

// Symbol.replate 
// 该对象被str.replace(myObject)方法调用时，会返回该方法的返回值；

// Symbol.search 
// 当该对象被str.search(myObject)方法调用时，会返回该方法的返回值；

// Symbol.split
// 当该对象被str.split(myObject)方法调用时，会返回该方法的返回值；

// Symbol.iterator
// 一个方法，该方法返回对象默认的迭代器，由for-of 语句使用

// Symbol.toPrimitive
// 该对象被转为原始类型的值，会调用这个方法，返回该对象对应的原始类型值；

// Symbol.toStringTag
// 一个字符串，该字符串用于创建对象的默认字符串描述，由内置方法Object。prototype.toString()使用。

// Symbol.species 
// 创建衍生对象时，会使用该属性

14、迭代器

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

 // 声明一个
const xiyou = ['唐僧','孙悟空','猪八戒','沙悟净'];
// 使用for...of遍历数组
for (let v of xiyou){
    console.log(v);
}
// 唐僧、孙悟空、猪八戒、沙悟净

let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// 结果见下图：

打印结果

工作原理：

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，指导最后一个成员
每调用next方法返回一个包含value和dome属性的对象

注：需要自定义遍历数据的时候，要想到迭代器。

15、迭代器应用

自定义遍历数据

// 声明一个对象
const banji = {
    name: '终极',
    stus: [
        'xiaoming',
        'xiaoning',
        'xiaotian',
        'knight'
    ],
    [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:undefined,done:true}
                }
            }
        }
    }
}

// 遍历这个对象
for( let v of banji){
     console.log(v);
}

16、生成器

// 生成器其实就是一个特殊的函数
// 异步编程，纯回调函数 node fs ajax mongodb
function * gen(){
    console.log('hello generator');
}
let iterator = gen();
iterator.next();
// ============================
// 函数代码的分割符
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();
for (let v of gen()){
     console.log(v);
}

17、生成器函数参数

function * gen(arg){
    console.log(arg);
    let one = yield 111;
    console.log(one);
    let two = yield 222;
    console.log(two);
    let three = yield 333;
    console.log(three);
}
// 执行获取迭代器对象
let iterator = gen('AAA');
console.log(iterator.next());
// next 方法可以传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));

18、生成器函数实例一

// 异步编程 文件操作 网络操作(ajax,request) 数据库操作
// 1s 后控制台输入111   2s后输出222   3s后输出333
function one(){
    setTimeout(()=>{
        console.log(111);
        iterator.next();
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log(222);
        iterator.next();
    },2000)
}
function three(){
    setTimeout(()=>{
        console.log(333);
        iterator.next();
    },3000)
}
function * gen(){
    yield one();
    yield two();
    yield three();
}
// 调用生成器函数
let iterator = gen();
iterator.next();

19、生成器函数实例二

// 模拟获取 用户数据 订单数据 商品数据
function getUsers(){
    setTimeout(()=>{
        let data = '用户数据';
        iterator.next(data);
    },1000)
}

function getOrders(){
    setTimeout(()=>{
        let data = '订单数据';
        iterator.next(data);
    },1000)
}

function getGoods(){
    setTimeout(()=>{
        let data = '商品数据';
        iterator.next(data);
    },1000)
}

function * gen(){
    let users = yield getUsers();
    console.log(users);
    let orders = yield getOrders();
    console.log(orders);
    let goods = yield getGoods();
    console.log(goods)
}

let iterator = gen();
iterator.next();

20、Promise

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

Promise构造函数：Promise(excutor){}
Promise.prototype.then方法
Promise.prototype.catch方法

// 实例化 Promise对象
const p = new Promise(function(resolve,reject){
    setTimeout(()=>{
        // 成功
        let successMsg = '数据库中的用户数据';
        resolve(successMsg);
        // 失败
        let errorMsg = '数据读取失败';
        reject(errorMsg);
    },1000)
});
// 调用promise对象的then方法
p.then(function(value){
    console.log(value);
},function(reason){
    console.log(reason);
})

21、Promise读取文件

// 1、引入fs模块
const fs = require('fs');
// 2、调用方法读取文件
fs.readFile('./resources/为学.md',(err,data)=>{
    // 如果失败，则抛出错误
    if(err) throw err;
    // 如果正确，则输出内容
    console.log(data.roString());
});
// 3、使用promise封装
const p = new Promise(function(){
    fs.readFile('./resources/为学.md',(err,data)=>{
        // 判断如果失败
        if(err) reject(err);
        // 如果成功
        resolve(data);
    });
});
p.then(function(){
    console.log(value.toString());
},function(reason){
    console.log('读取失败！！！');
})

22、Promise封装Ajax请求

const p = new Promise((resolve,reject) => {
    // 1、创建对象
    const xhr = new XMLHttpRequest();
    // 2、初始化  
    xhr.open('GET','https://api.xxx.xxx/xxxx?id=111');
    // 3、方法
    xhr.send();
    // 4、绑定事件，处理响应结果
    xhr.onreadystatechange = function(){
        // 判断
        if(xhr.readyState === 4){
            // 判断响应状态码 200-299
            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);
});

23、Promise.prototype.then

// 创建promise对象
const p = new Promise((resolve,reject) => {
    setTimeout(()=>{
        // resolve('用户数据');
        reject('出错了！！！');
    },1000);
});
// 调用then方法 then方法的返回结果是promise对象，对象的状态由回调函数的执行结果决定
// 1、如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功的值；
const result = p.then(value =>{
    console.log(value);
    // 1、非promise类型的属性
    // return '123';
    // 2、是promise对象
    // return new Promise((resolve,reject)=>{
    //    resolve('ok');
    // });
   // 3、抛出错误
    throw new Error('出错啦！');
},reason=>{
    console.warn(reason);
});
console.log(result);

24、promise实践-读取多个文件

// 引入fs模块
const fs = require('fs');
const p = new Promise((resolve,reject)=>{
    fs.readFile('./resources/为学.md',(err,data)=>{
        resolve(data);
    });
});
p.then(value => {
    return new Promise((resolve,reject)=>{
        fs.readFile('./resources/插秧诗.md',(err,data)=>{
            resolve([value,data]);
        })
    })
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile('./resources/观书有感.md',(err,data)=>{
            // 加入
            value.push(data);
            resolve(value);
        })
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

25、promise-catch方法

const p = new Promise((resolve,reject) => {
   setTimeout(()=>{
       // 设置p对象的状态为失败，并设置失败的值
       reject('出错啦！');
   },2000);
});
p.catch(reason => {
   console.warn(reason);
})

26、集合set

// 声明一个set
let s = new Set();
let s2 = new Set(['大师傅','小师傅','大师傅','小师傅']);
// 元素个数
console.log(s2.size);
// 添加新的元素
s2.add('喜事儿');
// 删除元素
s2.delete('坏事儿');
// 检测
console.log(s2.has('糟心事儿'));
// 清空
s2.clear();
console.log(s2);

27、Set实践

let arr = [1,2,3,4,5,6,4,32,1,2,3];
// 数组去重
let result = [...new Set(arr)];
// 交集
let arr2 = [2,3,4,5,5,5,4,7,8,1];
// 方法一：
let result = [...new Set(arr)].filter(item => {
  let s2 = new Set(arr2);
  if(s2.has(item)){
    return true;
  }else{
    return false;
  }
});
// 方法二：
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
// 并集
let union = [...new Set([...arr,...arr2])];
// 差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

28、Map

// 声明
let m = new Map();
// 添加元素
m.set('name','尚硅谷');
m.set('change',function(){
    console.log("我们可以改变你！！！");
});
let key = {
  school: 'ATGUIGU'
};
m.set(key,['北京','上海','深圳']);

// size
console.log(m.size);

// 删除
m.delete('name');

// 获取
m.get(key);

//清空
m.clear();

// 遍历
for(let v of m){
  console.log(v);
}

29、Class类

// 手机  之前实现方式
function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
// 添加方法
Phone.prototype.call = function(){
  console.log("我可以打电话！！");
}
// 实例化对象
let Huawei = new Phone('华为',5999);
Huawei.call();
console.log(Huawei);

// class
class Shouji{
  // 构造方法，名字不能修改
  constructor(brand,price){
    this.brand = brand;
    this.price = price;
  }
  // 方法必须使用该语法，不能使用ES5的对象完整形式
  call(){
    console.log('我可以打电话！！！');
  }
}

let onePlus = new Shouji('+1',1999);
console.log(onePlus);

30、静态成员

function Phone(){}
Phone.name = '手机';
Phone.change = function(){
  console.log('我可以改变世界');
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
nokia.change();
console.log(nokia.size);

// class
class Phone{
  // 静态属性
  static name = '手机';
  static change(){
    console.log('我可以改变世界');
  }
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
}

31、对象继承

// 手机
function Phone(brand,price){
  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.constructor = SmartPhone;
// 声明子类的方法
SmartPhone.prototype.phone = function(){
  console.log('我可以拍照');
}
SmartPhone.prototype.playGame = function(){
  console.log('我可以玩游戏');
}
const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');
console.log(chuizi);

32、class类继承

class Phone(){
  // 构造方法
  constructor(brand,price){
    this.brand = brand;
    this.price = price;
  }
  // 父类的成员属性
  call(){
    console.log('我可以打电话！');
  }
}
class SmartPhone extends Phone {
  // 构造方法
  constructor(brand,price,color,size){
    super(brand,price);
    this.color = color;
    this.size = size;
  }
  phone(){
    console.log('拍照');
  }
  playGame(){
    console.log('玩游戏');
  }
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
xiaomi.call();
xiaomi.phone();
xioami.playGame();

33、class的get和set

// get和set
class Phone{
  get price(){
    console.log('价格属性被读取了');
    return 'iloveyou';
  }
  set price(newVal){
    console.log('价格属性被修改了');
  }
}

// 实例化对象
let s = new Phone();
s.price = 'free';

34、数值扩展

// 0、Number.EPSILON 是JavaScript表示的最小精度
// EPSILON属性的值接近于2.2204460492503130808472633361816E-16
function equal(a,b){
  if(Math.abs(a-b) < Number.EPSILON){
    return true;
  }else{
    return false;
  }
}
console.log(0.1+ 0.2 === 0.3);
console.log(equal(0.1 + 0.2, 0.3));
1、二进制和八进制
let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
console.log(x);
2、Number.isFinte 检测一个数值是否为有限数
console.log(Number.isFinite(100));
console.log(Number.isFinite(100/0));
console.log(Number.isFinte(Infinity));
3、Number.isNaN 检测一个数值是否为NaN
console.log(Number.isNaN(123));
4、Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt('54321234love'));
console.log(Number.parseFloat('3.1415916神奇'));
5、Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));
6、Math.trunc将数字的小数点部分抹掉
console.log(Math.trunc(3.5));
7、Math.sign 判断一个数到底为正数  负责 还是零
console.log(100);
console.log(0);
console.log(-100);

35、对象方法扩展

1、Object.is 判断两个值是否完全相等
console.log(Object.is(120,120));
console.log(Object.is(NaN,NaN));
console.log(NaN === NaN);
2、Object.assign 对象的合并

const config1 = {
  host: 'localhost',
  port: 3306,
  name: 'root',
  pass: 'root',
  test: 'test'
}
const config2 = {
  host: 'http://atguigu.com',
  port: 33060,
  name: 'atguigu.com',
  pass: 'iloveyou',
  test2: 'test2'
}
console.log(Object.assign(config1,config2));
3、Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf
const school = {
    name: '尚硅谷'
}
const cities = {
  xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school,cities);
console.log(Object.getPrototypeOf(school));
console.log(school);

36、模块化

// 后期补充

37、ES7新特性

// includes  indexOf
const mingzhu = ['西游记','红楼梦','水浒传','三国演义'];

// 判断
console.log(mingzhu.includes('西游记'));
console.log(mingzhu.includes('金平煤'));

// 幂运算
console.log(2 ** 10);
console.log(Math.pow(2,10));

38、async 函数

async function fn(){
    // 返回一个字符串
    // return '尚硅谷'
    // 返回的结果不是一个Promise类型的对象，返回的结果就是成功 promise 对象
    // return;
    // 抛出错误，返回的结果是一个失败的Promise
    throw new Error('出错了！');
    // 返回的结果如果是一个Promise对象
    return new Promise((resolve,reject) => {
        // resolve('成功的数据');
        reject('失败的错误');
    });
}
const result = fn();
// 调用then方法
result.then(value => {
    console.log(value);
},reason => {
    console.warn(reason);
})

39、await 表达式

// 创建 Promise 对象
const p = new Promise((resolve,reject) => {
  // resolve("用户数据");
  reject("失败啦！");
});
// await 要放在async函数中
async function main(){
    try {
        let result = await p;
        console.log(result);
    } catch(e){
        console.log(e);
    }
};
// 调用函数
main();

40、async和await结合读取文件

// 1、引入fs模块
const fs = require('fs');
// 读取 为学
function readWeixue(){
  return new Promise((resolve,reject) => {
    fs.readFile('./resources/为学.md',(err,data) => {
      // 如果失败
      if(err) reject(err);
      // 如果成功
      resolve(data);
    })
  });
}

// 声明一个async函数
async function main(){
  // 获取为学内容
  let weixue = await readWeixue();
  console.log(weixue.toString());
}
main();

41、async和await封装AJAX请求

// 发送AJAX请求，返回的结果是promise对象
function sendAJAX(url){
  return new Promise((resolve,reject) => {
    // 创建对象
    const x = new XMLHttpRequest();
    // 初始化
    x.open('GET',url);
    // 发送
    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://api.apiopen.top/getJoke').then(value => {
  console.log(value);
},reason => {
  
});

// async和await测试
async function main(){
  // 发送AJAX请求
  let result = await sendAJAX('https://api.apiopen.top/getJoke');
  // 再次发送
  let tianqi = await sendAJAX('https://www.tianqiapi.com/api/');
  console.log(tianqi);
}
main();

42、ES8对象方法扩展

// 生命对象
const school = {
  name: '尚硅谷',
  cities: ['北京','上海','深圳'],
  xueke: ['前端','Java','大数据']
}
// 获取对象所有的键
console.log(Object.keys(school));
// 获取对象所有的值
console.log(Object.values(school));
// entries
console.log(Object.entries(school));
// 创建Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));
//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
const obj = Object.create(null,{
  name: {
    // 设置值
    value: '尚硅谷',
    // 属性特性
    writable: true,
    configurable: true,
    enumerable: true
  }
})