迭代器
//声明一个数组 const xiyou = ['唐总','孙悟空','猪八戒','沙僧'] console.log(xiyou); //使用for of 遍历 for(let v of xiyou){ console.log(v); // 唐总,孙悟空,猪八戒,沙僧 键值 } for(let v in xiyou){ console.log(v); //0,1,2,3 键名 let iterator = xiyou[Symbol.iterator](); console.log(iterator); //调用对象的next 方法 // console.log(iterator.next()); // console.log(iterator.next()); // console.log(iterator.next()); // console.log(iterator.next()); 迭代器的应用: //迭代器的应用 --> 自定义遍历数据的时候,需要用到迭代器 const banji = { name: '终极一班', stus:[ 'xiaoxia', 'xiaozhang', 'knight', 'zhangzhang' ], [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:false} } } }; } }
生成器函数 声明与调用
初体验: //生成器其实就是一个特殊的函数 // 异步编程 纯回调函数 function * gen(){ console.log("你好"); //yield 函数代码的分隔符 yield '小溪是我的朋友'; console.log("小溪是我的朋友"); yield '法外狂徒张三'; console.log("法外狂徒张三"); yield '就是牛,你怎么说?'; console.log("就是牛"); } let iterator = gen(); console.log(iterator); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); for (let v of gen() ) { console.log(v); }
生成器传参
//生成器函数参数 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()); console.log(iterator.next('BBB')); console.log(iterator.next('CCC')); console.log(iterator.next());
Promise
promise 是es6 引入异步编程的新解决方案。语法上是promise是一个构造函数,用来封装异步操作并可以获取其成功或者失败的结果 1,Promise 构造函数: Promise(excutor) {}, 2,Promise.prototype.then 方法 3,Promise.prototype.catch 方法 三种状态: 等待: (pending) , 已完成(fulfilled) , 已拒绝 (rejected) 初识Promise : //实例化Promise 对象 const p = new Promise(function(resolve,reject){ setTimeout(function(){ // // let data = '数据库中的用户数据'; // // 调用resolve方法,promise对象的状态就会变成成功 // resolve(data); let err = '数据读取失败'; //调用reject 这个promise 的状态就会变成失败 reject(err); },1000); }); //调用Promise 的then 方法 p.then(function(value){ //成功 console.log('我打印成功的数据',value) },function(reson){ console.error('我打印失败的数据',reson) })
使用Promise 封装Ajax 请求
const p = new Promise((resolve ,reject) => { const xhr = new XMLHttpRequest(); xhr.open("Get","http://localhost:8083/personTest/getAllTest"); 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(vallue) { console.log(vallue); },function(reason){ console.error(reason); })
Promise – then 方法
<script type="text/javascript"> //创建 promise对象 const p = new Promise((resolve,reject) =>{ setTimeout(()=>{ // resolve('用户数据'); reject('读取用户数据失败了!'); },1000) }); //调用then 方法 then 方法的返回结果是promise // 对象,对象的状态是由回调函数的执行结果决定的 const result = p.then(value => { console.log(value); },reason =>{ console.warn(reason); }); console.error(result);
Promise —Catch 方法
const p = new Promise((resolve,reject)=>{ setTimeout(()=>{ //设置P 对象的状态为失败 reject('我出错了,咋办?'); },1000) }); // p.then(value=>{ // console.log(value); // },reason=>{ // console.warn(reason); // }) p.catch(reason => { console.warn(reason); })
Set集合
let s = new Set(); let s2 = new Set(['1','2','3','2']) console.warn(s2, typeof s); console.error(s2.size); s2.add('100'); console.log(s2); for (let v of s2){ console.log(v) }
Map集合
es 6提供了Map 数据结构,它类似于对象,也是键值对的集合,但是 “键” 的范围不限于字符串,各种类型的值,包括对象,都可以当作键, Map 也实现了iterator 接口,所有可以使用扩展运算符 【 … 】 和 for … of … 进行遍历,Map 的属性 和方法:
size 返回 Map 的元素个i数 set 增加一个新元素,返回当前的Map get 返回键名对象的键值 has 检测当前Map 中是否包含某个元素,返回 一个 boolen 值 clear 清空集合 ,返回 undefined
class 类
知识点:
class 声明类 constructor 定义构造函数初始化 extends 继承父类 super 调用父类的构造方法 static 定义静态方法和属性 父类方法可以重写 //es 6 类的声明 //class class Phone{ //构造方法 名字固定 constructor(brand,price){ this.brand = brand; this.price = price; } //方法 call() { console.warn("我乐意打电话!"); } } let onePlus = new Phone("iphone",100); console.warn(onePlus.call()); console.error(onePlus);
类的静态成员
class Person{ //静态属性属于类而不属于实例化对象 static name = '张大炮'; static change(){ console.warn("可以改变世界"); } } let person = new Person(); console.log(Person.name) console.log(Person.change());
es6 类继承
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("拍照"); } } const xiaomi = new smartPhone('xiaomi',799,'yellow',6.7); console.log(xiaomi.photo()); .....
对象方法的扩展
// Objects.is 判断俩个值是否完全相等 // console.warn(Object.is(120,120)); // console.log(NaN === NaN); // console.log(Object.is(NaN,NaN)); // Objects.assign 对象的合并 const config1 = { host: 'localhost', port: '3306' }; const config2 = { host : 'xilijun.com', port: '8888' }
模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来
模块化的好处: 1,防止命名冲突 2,代码复用 3,高维护性
模块功能主要由俩个命令构成: export 和 import
export 命令是用于规定模块的对外接口
.size = size; } photo(){ console.log(“拍照”); } } const xiaomi = new smartPhone(‘xiaomi’,799,‘yellow’,6.7); console.log(xiaomi.photo()); …
### 对象方法的扩展 ```javascript // Objects.is 判断俩个值是否完全相等 // console.warn(Object.is(120,120)); // console.log(NaN === NaN); // console.log(Object.is(NaN,NaN)); // Objects.assign 对象的合并 const config1 = { host: 'localhost', port: '3306' }; const config2 = { host : 'xilijun.com', port: '8888' }
模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来
模块化的好处: 1,防止命名冲突 2,代码复用 3,高维护性
模块功能主要由俩个命令构成: export 和 import
export 命令是用于规定模块的对外接口
import 命令是用于输入其他模块提供的功能