ES6(2)

最新推荐文章于 2023-02-16 12:10:35 发布

原创最新推荐文章于 2023-02-16 12:10:35 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

1. Promise

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

Promise.prototype.catch 方法

	<script>
    // 创建Promise对象
    // new Promise(callback(resolve,reject))
    // resolve,reject 两个回调函数   resolve(成功的结果)  reject(失败的结果)
    const p1 = new Promise((resolve, reject) => {
      const num = Math.floor(Math.random() * 100);
      if (num % 2 === 0) {
        resolve(num + '是偶数');
      } else {
        reject(num + '是奇数');
      }
    });

    // 成功走then
    // 失败走catch
    p1.then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  </script>

Promise.prototype.all

  // 并发 Promise.all 当p1和p2 都是偶数 then  有一个为奇数 catch
Promise.all([p1, p2])
    .then(res => {
    	console.log(res);
	})
    .catch(err => {
   	 console.log(err);
	});

Promise.race

// Promse.race 两个promsie谁先返回，则结果就是他，无关乎成功和失败
Promise.race([p1, p2])
	.then(res => {
		console.log(res);
	})
	.catch(err => {
		console.log(err);
	});

2. Promise 封装 Ajax

function ajax({
  url,
  method = 'GET',
  data = {},
  header = { 'Content-Type': 'application/json' },
} = {}) {
  return new Promise((resolve, reject) => {
    try {
      // 可能会发生错误的代码
      const xhr = XMLHttpRequest
        ? new XMLHttpRequest()
        : new ActiveXObject('microsoft.XMLHTTP');

      // 监听state的变化
      xhr.onreadystatechange = () => {
        const { readyState, status, responseText } = xhr;
        if (readyState === 4 && (status === 200 || status === 201)) {
          // 返回成功结果
          resolve(JSON.parse(responseText));
        }
      };

      // 开启连接
      xhr.open(method, url, true);
      //设置请求头
      for (const key in header) {
        xhr.setRequestHeader(key, header[key]);
      }
      // 发送请求 POST => 参数放在请求体中，需要序列化
      xhr.send(JSON.stringify(data));
    } catch (error) {
      // 对错误的处理
      reject(error);
    }
  });
}

3. 迭代器

什么是迭代器

迭代器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
原生具备 iterator 接口的数据(可用 for of 遍历)

Array
Arguments
Set
Map
String
NodeList

工作原理

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
每调用 next 方法返回一个包含 value 和 done 属性的对象
注: 需要自定义遍历数据的时候，要想到迭代器

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值
has 检测集合中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

//创建一个空集合
let s = new Set(); //创建一个非空集合
let s1 = new Set([1, 2, 3, 1, 2, 3]); //集合属性与方法 //返回集合的元素个数
console.log(s1.size); //添加新元素
console.log(s1.add(4)); //删除元素
console.log(s1.delete(1)); //检测是否存在某个值
console.log(s1.has(2)); //清空集合
console.log(s1.clear());

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：

size 返回 Map 的元素个数
set 增加一个新元素，返回当前 Map
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素，返回 boolean 值
delete 删除 Map 中某个元素，返回 boolean 值
clear 清空集合，返回 undefined

  //创建一个空 map
  let m = new Map();
  //创建一个非空 map
  let m2 = new Map([['name', '网星软件'], ['slogon', '不断提高行业标准'])
  //属性和方法
  //获取映射元素的个数
  console.log(m2.size)
  //添加映射值
  console.log(m2.set('age', 6));
  //获取映射值
  console.log(m2.get('age'));
  //检测是否有该映射
  console.log(m2.has('age'));
 // delete 删除 Map 中某个元素，返回 boolean 值
 console.log(m.delete('age'));
  //清除
  console.log(m2.clear());

4.class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。知识点：

class 声明类
constructor 定义构造函数初始化
extends 继承父类
super 调用父级构造方法
static 定义静态方法和属性
父类方法可以重写

//父类
class Phone {
  //构造方法
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  } //对象方法
  call() {
    console.log('我可以打电话!!!');
  }
} //子类
class SmartPhone extends Phone {
  constructor(brand, color, price, screen, pixel) {
    super(brand, color, price);
    this.screen = screen;
    this.pixel = pixel;
  } //子类方法
  photo() {
    console.log('我可以运行程序');
  }
  static connect() {
    console.log('我可以建立连接');
  }
  call() {
    console.log('我可以进行视频通话!!');
  } //静态方法
  static run() {
    console.log('运行');
  }
}

//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch', '500w'); //调用子类方法
iPhone6s.playGame(); //调用重写方法
iPhone6s.call(); //调用静态方法
SmartPhone.run();