es6特性(2)

测试es6特性(2)

目录

• 1.promise对象
  • (1)promise对象的声明格式
  • (2)promise读取文件
  • (3)promise封装ajax请求
  • (4)promise.then方法
• 2.es6集合set及其api
  • (1)set的声明格式及api
  • (2)使用set的实例
• 3.es6map及其api
  • (1)map的声明格式及api
• 4.class类
  • (1)class的声明类
  • (2)class的静态成员
  • (3)class的继承
  • (4)子类对父类方法的重写
  • (5)get和set
    -5.数值扩展
  • (1)最小精度
  • (2)二进制和八进制
  • (3)Number.isFinite() , Number.isNaN()
  • (4)Number.parseInt() 与 Number.parseFloat()
  • (5)Number.isInteger() 与 Math.trunc()
  • (6)Math.sign()
• 6.对象扩展
  • (1)Object.is()
  • (2)Object.assign()对象的合并
  • (3)Object.setPrototypeOf()设置原型对象
• 7.模块化语言
  • 1)export暴露类型
    • (1)分别暴露直接调用
    • (2)统一暴露
    • (3)默认暴露
  • 2)import导入类型
    • (1)通用导入方式
    • (2)解构赋值形式
    • (3)简便赋值

es6特性(2)

1.promise对象

Promise 是 ES6 引入的异步编程的新解决方案。

语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

(1)promise对象的声明格式

成功：

const p=new Promise((resolve, reject) => {
    setTimeout(() => {
        let data='成功读取数据';
        resolve(data);

        //let error='读取数据失败';
        // reject(error);
    }, 1000);
});
p.then((value) => {
    console.log(value);
}).catch(reason => {
    console.error(reason);
});

失败：

const p=new Promise((resolve, reject) => {
    setTimeout(() => {
        // let data='成功读取数据';
        // resolve(data);

        let error='读取数据失败';
        reject(error);
    }, 1000);
});
p.then((value) => {
    console.log(value);
}).catch(reason => {
    console.error(reason);
});

(2)promise读取文件

//引入fs模块
const fs = require('fs');

//调用方法读取文件
// fs.readFile('./为学.md', (err, data) => {
//     if (err) throw err;
//     console.log(data.toString());
// })

//使用Promise封装读取文件
const p = new Promise((resolve, reject) => {
    fs.readFile('./为学.md', (err, data) => {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});
p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.error('读取失败');
});

(3)promise封装ajax请求

//发送AJKX请求
//接口地址：https://api.apiopen.top/api/getTime

const p = new Promise((resolve,reject) =>{
    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.初始化
    xhr.open('GET', 'https://api.apiopen.top/api/getTime', true);

    //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((value) => {
    console.log(value);
}, reason => {
    console.error(reason);
})

(4)promise.then方法

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功读取数据');
        // reject('读取数据失败');
    }, 1000);
});
//调用then方法 then方法的返回结果时promise对象,对象状态由回调函数的执行结果决定
const result = p.then(value => {
    console.log(value);
    //1.如果回调函数执行返回的结果是非Promise对象，状态为fulfilled(成功)，则返回值为对象的成功的值
    //return 123;
    //2.返回一个Promise对象,则返回值为这个Promise对象的结果，包括状态
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('异步操作成功');
        }, 2000);
    //3.抛出错误，返回状态一定为rejected(失败)
    //throw '出错了！';
    });
},reason => {
    console.warn(reason);
});
console.log(result);

2.es6集合set及其api

ES6 提供了新的数据结构 Set（集合）

类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和[for…of…]进行遍历

set类似于数学集合，元素不允许相同，自动去除相同的元素

(1)set的声明格式及api

//声明一个set
let s=new Set(['1','2','3','4','1']);
console.log(s);
//元素个数
console.log(s.size);
//添加元素
s.add('5');
console.log(s);
//删除元素
s.delete('1');
console.log(s);
//判断元素是否存在
console.log(s.has('2'));
//清空元素
s.clear();
console.log(s);
//遍历元素
for(let v of s) {
    console.log(v);
}

(2)使用set的实例

let arr=[1,2,3,4,5,4,3,2,1];        
//数组去重
let result = [...new Set(arr)];
console.log(result);
//交集
let arr2=[3,4,5,6,7,6,5];
// let result2 = [...new Set(arr)].filter(item =>{
//     let s2=new Set(arr2);
//     if(s2.has(item)) {
//         return true;
//     }else {
//         return false;
//     }
// });
//等价于
let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(result2);

//并集
let result3 = [...new Set([...arr, ...arr2])];
console.log(result3);

//差集
let diff=[...new Set(arr)].filter(item => !new Set(arr2).has(item));
console.log(diff);

3.es6map及其api

类似于对象，是键值对的集合，键可以是任意类型

(1)map的声明格式及api

//声明map
let m = new Map([
    ['name', 'sry'],
    ['age', 18]
]);
//添加元素set
m.set('school', 'erzhong');
m.set('change', function() {
    console.log('我们可以改变你！');
});

let key={
    part:'xiaoqu'
}
m.set(key, ['北京','上海', '广州']);
console.log(m);

//元素个数size
console.log(m.size);

//删除元素delete
m.delete('age');
console.log(m);

//获取get
console.log(m.get('name'));
console.log(m.get(key));

//遍历for...of

for(let v of m) {
    console.log(v);
}//输出为数组
for(let [k, v] of m) {
    console.log(k, v);
}

//判断元素是否存在has
console.log(m.has('name'));

//判断清空clear
m.clear();
console.log(m);

4.class类

ES6 引入了类的概念，使用 class 关键字来定义类。

(1)class的声明类

//传统es5通过构造函数实例化对象
//手机
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 tele {
    //构造函数 名字不能修改
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    //添加方法 方法必须使用该语法，不能使用es5的对象完整形式
    call() {
        console.log('我可以打tele');
    }
}

let apple = new tele('苹果', 10000);
apple.call();
console.log(apple);

(2)class的静态成员

class Phone{
    //静态属性 属于类，不属于实例
    static name='手机';
    static change(){
        console.log('我可以改变世界');
    }
}

let huawei = new Phone();
console.log(huawei.name);
console.log(Phone.name);

(3)class的继承

传统es5:

//传统es5的实例继承
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.photo = function() {
    console.log('我可以拍照');
}
SmartPhone.prototype.play = function() {
    console.log('我可以玩游戏');
}

const chuizi = new SmartPhone('锤子', 1999, '黑色', '6.0');
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.play();

class继承：

//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;
    }
    photo() {
        console.log('我可以拍照');
    }
    play() {
        console.log('我可以玩游戏');
    }
}

const chuizi = new SmartPhone('锤子', 1999, '黑色', '6.0');
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.play();

(4)子类对父类方法的重写

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;
    }
    //必须完全重写父类同名方法
    call() {
        console.log('我可以打智能电话');
    }
}

const chuizi = new SmartPhone('锤子', 1999, '黑色', '6.0');
console.log(chuizi);
chuizi.call();

(5)get和set

//get和set方法
class Phone {
    get price() {
        console.log('获取价格');//执行到get时自动调用
        return 'iloveyou';//返回值即为prise属性的值
    }
    set price(value) {
        console.log('设置价格');//执行到set时自动调用
    }
}
let s=new Phone();
console.log(s.price); 
s.price = 1000; //设置价格时自动调用set方法

5.数值扩展

(1)最小精度

console.log(0.1+0.2);
console.log(0.1+0.2===0.3); //false,浮点数精度问题
//Number.EPSILON是最小的精度误差
function isEqual(a, b) {
    if (Math.abs(a - b) < Number.EPSILON){
        return true
    }else{
        return false
    }
}

(2)二进制和八进制

分别用前缀 0b(2) 0o(8) 和 0x(16) 表示

let b=0b1010;
let o=0o0777;
let x=0xff;
console.log(b,o,x);

(3)Number.isFinite() , Number.isNaN()

Number.isFinite()检测数值是否有限
Number.isNaN()检测数值是不是NAN

console.log(Number.isFinite(100));
console.log(Number.isFinite(100/0));

//NaN 是 JavaScript 中的一个特殊值，表示 "Not a Number"（不是一个数字）。
// 它出现在数学运算无法产生有效数字结果时。
console.log(Number.isNaN(123));
console.log(Number.isNaN('abc'));

(4)Number.parseInt() 与 Number.parseFloat()

Number.parseInt() 与 Number.parseFloat()字符串转整数和浮点数
自动截取字符串中的数字

console.log(Number.parseInt('5201314iloveyou'));
console.log(Number.parseFloat('3.1415926神奇'));

(5)Number.isInteger() 与 Math.trunc()

Number.isInteger()判断是否时整数
Math.trunc()去除一个数的小数部分

console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));

console.log(Math.trunc(-1.1));
console.log(Math.trunc(1.1));

(6)Math.sign()

Math.sign()判断一个数是正数，负数还是0

console.log(Math.sign(1.1));
console.log(Math.sign(-1.1));
console.log(Math.sign(0));

6.对象扩展

(1)Object.is()

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'
}

const config2={
    host:'http://baidu.com',
    port:33060,
    name:'sry',
    pass:'ilovefyou'
}

Object.assign(config1,config2)
console.log(config1);
console.log(config2);
//Object.assign(a,b)b会将a覆盖

(3)Object.setPrototypeOf()设置原型对象

const school={
    name:'erzhong'
} 
const cities={
    xiaoqu:['北京','上海','深圳']
}
Object.setPrototypeOf(school,cities)
console.log(school);
//获取原型
console.log(Object.getPrototypeOf(school));

7.模块化语言

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

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

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

1)export暴露类型

(1)分别暴露直接调用

//mkh.html

<body>
    <script type="module">
        //引入 mkh.js 模块
        import * as mk from './mkh.js'
        console.log(mk);
        
    </script>

</body>

//mkh.js

export let school ='erzhong';

export function teach(){
    console.log('我们可以被调用');
}

(2)统一暴露

//mkh.html

<body>
    <script type="module">
        //引入 mkh.js 模块
        import * as mk1 from './mkh.js'
        // console.log(mk1);

        //引入 mkh2.js 模块
        import * as mk2 from './mkh2.js'
        console.log(mk2);
    </script>

</body>

//mkh2.js

let school ='erzhong';

function findjob(){
    console.log('我们可以帮助你找工作！');
    
}

//
export {school,findjob};

(3)默认暴露

//mkh.html

<body>
    <script type="module">
        //引入 mkh.js 模块
        import * as mk1 from './mkh.js'
        // console.log(mk1);

        //引入 mkh2.js 模块
        import * as mk2 from "./mkh2.js";
        //console.log(mk2);

        //引入 mkh3.js 模块
        import * as mk3 from "./mkh3.js";
        console.log(mk3);
        //调用需要多一个.default
        mk3.default.change();
    </script>

</body>

//mkh3.js

export default {
    school:'erzhong',
    change : function(){
        console.log('我们可以改变你！');
    }
}

2)import导入类型

(1)通用导入方式

import * as mk3 from "src";
上述export均为通用导入

(2)解构赋值形式

//mkh.html

<body>
    <script type="module">
        import {school,teach} from './mkh.js'
        import {school as school2,findjob} from './mkh2.js'
        //引入相同名称可以as别名避免冲突
        console.log(school2);
        findjob();
        console.log(school);
        console.log(teach);
    </script>
</body>

//mkh.js

export let school ='erzhong';
export function teach(){
    console.log('我们可以被调用');
}

//mkh2.js

let school ='erzhong';

function findjob(){
    console.log('我们可以帮助你找工作！');
}

(3)简便赋值 争对默认暴露

mkh.html

<body>
    <script type="module">
        import mk3 from "./mkh3.js"
        console.log(mk3);      
    </script>
</body>

//mkh3.js

export default {
    school:'erzhong',
    change : function(){
        console.log('我们可以改变你！');
    }
}