教学网站建设计划,成都模板网站建设服务,安卓优化大师2023,怎么将网站做成htmlJavaScript高阶班之ES6 → ES11 1、ES6新特性1.1、let 关键字1.2、const关键字1.3、变量的解构赋值1.3.1、数组的解构赋值1.3.2、对象的解构赋值 1.4、模板字符串1.5、简化对象写法1.6、箭头函数1.7、函数参数默认值1.8、rest参数1.9、spread扩展运算符1.9.1、数组合并1.9.2、数… JavaScript高阶班之ES6 → ES11 1、ES6新特性1.1、let 关键字1.2、const关键字1.3、变量的解构赋值1.3.1、数组的解构赋值1.3.2、对象的解构赋值 1.4、模板字符串1.5、简化对象写法1.6、箭头函数1.7、函数参数默认值1.8、rest参数1.9、spread扩展运算符1.9.1、数组合并1.9.2、数组的克隆1.9.3、将伪数组转为真正的数组1.9.4、对象合并 1.9.5、对象的克隆 2、Symbol2.1、Symbol的创建2.2、不能与其他数据进行运算2.3、7种数据类型记忆2.4、Symbol的应用2.4.1、Symbol作为属性名2.4.2、Symbol属性名的遍历2.4.3、Symbol.for() 和 Symbol.keyFor() 2.5、Symbol 内置值 3、迭代器3.0、数组的常用方法3.1、数组的遍历3.2、对象的遍历3.3、数组和对象之间的转换3.4、迭代器 4、生成器函数5、Promise5.1、Promise封装读取文件5.2、Promise封装Ajax5.3、Promise.then方法5.4、Promise.catch方法 6、Set6.1、Set集合实践 7、Map 参考视频 尚硅谷Web前端ES6教程涵盖ES6-ES11 配套代码 https://gitee.com/Augenstern-creator/kuang-study-es6 1、ES6新特性
1.1、let 关键字
let关键字用来声明变量使用 let声明的变量有几个特点
不允许重复声明
//1. 变量不能重复声明
let star 大林;
let star 小林; // 报错块级作用域(包括 if、else、while、for所形成的括号)
//2. 块儿级作用域
{let girl 秦xx;
}
console.log(gril); // 报错不存在变量提升
//3. 不存在变量提升
console.log(song); // 报错
let song 恋爱达人;不影响作用域链
//4. 不影响作用域链
{let school 尚硅谷;function fn(){console.log(school);}fn(); // 尚硅谷
}应用场景以后声明变量使用 let 就对了
1.2、const关键字
const 关键字用来声明常量 const声明有以下特点
声明必须赋初始值
//1. 一定要赋初始值
const A; // 报错标识符一般为大写
//2. 一般常量使用大写(潜规则)
const A 100;不允许重复声明
const SCHOOL 尚硅谷;
const SCHOOL ZZU; // 报错值不允许修改
//声明常量
const SCHOOL 尚硅谷;
//3. 常量的值不能修改
SCHOOL ATGUIGU; // 报错块儿级作用域
//4. 块儿级作用域
{const PLAYER UZI;
}
console.log(PLAYER); // 报错对于数组和对象的元素修改不算作对常量的修改不会报错
const TEAM [UZI,MXLG,Ming,Letme];
TEAM.push(Meiko); // 不报错注意: 对象属性修改和数组元素变化不会触发 const错误
应用场景声明对象类型使用const非对象类型声明选择 let
1.3、变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构赋值。
1.3.1、数组的解构赋值
语法数据的解构使用方括号 []
//1. 数组的结构
const F4 [小沈阳,刘能,赵四,宋小宝];
let [xiao, liu, zhao, song] F4;
console.log(xiao); //小沈阳
console.log(liu); //刘能
console.log(zhao); //赵四
console.log(song); //宋小宝1.3.2、对象的解构赋值
语法对象的解构使用大括号 {}
//2. 对象的解构
const zhao {name: 赵本山,age: 不详,xiaopin: function(){console.log(我可以演小品);}
};let {name, age, xiaopin} zhao;
console.log(name); // 赵本山
console.log(age); // 不详
console.log(xiaopin); // [Function: xiaopin]
xiaopin(); // 我可以演小品// 复杂解构
let wangfei {name: 王菲,age: 18,songs: [红豆,流年,暧昧,传奇],history: [{name : 窦唯},{name: 李亚鹏},{name: 谢霆锋}]
};let {songs: [one,two,three], history: [first,second,third]} wangfei;console.log(one); // 红豆
console.log(two); // 流年
console.log(three); // 暧昧
console.log(first); // { name: 窦唯 }
console.log(second); // { name: 李亚鹏 }
console.log(third); // { name: 谢霆锋 }我们一般解构对象中的属性比较少更多的是解构对象中的方法使用如下
let {xiaopin} zhao;
xiaopin();注意频繁使用对象方法、数组元素就可以使用解构赋值形式 1.4、模板字符串
模板字符串是增强版的字符串用反引号 标识特点
字符串中可以出现换行符
//1. 声明
let str1 我也是一个字符串哦!;
console.log(str1, typeof str1);
// 我也是一个字符串哦! string//2. 内容中可以直接出现换行符
let str2 ulli沈腾/lili玛丽/lili魏翔/lili艾伦/li/ul;
console.log(str2);可以使用 ${xxx} 形式输出变量
//3. 变量拼接
let lovest 魏翔;
let out ${lovest}是我心目中最搞笑的演员!!;
console.log(out);
// 魏翔是我心目中最搞笑的演员!!注意遇到字符串与变量拼接的情况使用模板字符串
1.5、简化对象写法
**ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。**这样的书写更加简洁
let name 尚硅谷;
let age 20;// 原始写法
const school1 {name: name,age: age,change: function() {console.log(我们可以改变你!!);},improve: function() {console.log(我们可以提高你!!);}
}// ES6 写法
const school2 {name,age,change() {console.log(我们可以改变你!!);},improve() {console.log(我们可以提高你的技能);}
}注意对象简写形式简化了代码所以以后用简写就对了
1.6、箭头函数
ES6 允许使用 箭头 定义函数
// 声明一个函数原始写法
let fn function(){}
// 声明函数箭头函数写法
let fn (a,b) {return a b;
}// 调用函数
let result fn(1, 2);
console.log(result);箭头函数的注意点
如果形参只有一个则小括号可以省略
let add (n) {return n n;
}
console.log(add(9));// 省略小括号
let add n {return n n;
}函数体如果只有一条语句则花括号可以省略(省略花括号, return 语句也必须要省略)函数的返回值为该条语句的执行结果
// 函数体如果只有一条语句则省略花括号和return语句
let pow1 (n) {return n * n;
}
console.log(pow1(9));// 省略花括号
let pow2 n n * n;console.log(pow2(9));箭头函数 this 指向声明时所在的作用域下 this 的值
//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName() {console.log(this.name);
}
let getName2 () {console.log(this.name);
}//设置 window 对象的 name 属性
window.name 尚硅谷;
const school {name: ATGUIGU
}//直接调用
getName();
getName2();//call 方法调用
getName.call(school);
getName2.call(school);箭头函数不能作为构造函数实例化
//4. 箭头函数不能作为构造实例化对象
let Person (name, age) {this.name name;this.age age;
}
let me new Person(xiao,30);
console.log(me); // Person is not a constructor不能使用 arguments
//5. 不能使用 arguments 变量
let fn () {console.log(arguments);
}
fn(1,2,3); // arguments is not defined注意箭头函数不会更改 this 指向用来指定回调函数会非常合适。
1.7、函数参数默认值
ES6允许给函数参数赋值初始值
形参初始值具有默认值的参数一般位置要靠后(潜规则)
// 1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a,c10,b) {return a b c;
}
let result add(1,2);
console.log(result);与解构赋值结合
//原始写法
function connect (options){let host options.host;let username options.username;let password options.password;let port options.password;
}// 调用 connect 方法,向里面传个对象
connect({host: atguigu.com,username: root,password: root,port: 3306
})// 与解构赋值结合写法
function connect({host127.0.0.1, username,password, port}){console.log(host)console.log(username)console.log(password)console.log(port)
}// 调用 connect 方法,向里面传个对象
connect({username: root,password: root,port: 3306
})1.8、rest参数
ES6 引入 rest 参数用于获取函数的实参用来代替 arguments
rest 作用与 arguments 相似
function add(...args){console.log(args);
}
add(1,2,3,4,5);rest 参数必须是最后一个形参
function minus(a,b,...args){console.log(a,b,...args);
}
minus(100,1,2,3,4,5,19);注意rest参数非常适合不定个数参数函数的场景
1.9、spread扩展运算符
没有扩展运算符的时候只能组合使用 pushspliceconcat 等方法将已有数组元素变成新数组的一部分。 有了扩展运算符, 构造新数组会变得更简单、更优雅。扩展运算符也是三个点(…)。 它好比 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列对数组进行解包。
// 展开数组
console.log(...[1,2,3]);
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5
console.log([1,...[2,3,4],5])
// [1, 2, 3, 4, 5]1.9.1、数组合并
//1. 数组的合并
const kuaizi [王太利, 肖央];
const fenghuang [曾毅, 玲花];// ES5数组合并写法
const zuixuanxiaopingguo1 kuaizi.concat(fenghuang);
console.log(zuixuanxiaopingguo1);
// [ 王太利, 肖央, 曾毅, 玲花 ]// ES6扩展运算符数组合并
const zuixuanxiaopingguo2 [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo2);
// [ 王太利, 肖央, 曾毅, 玲花 ]1.9.2、数组的克隆
let arr [1, 2, 3];
let arr2 [...arr]; // [1, 2, 3]
arr2.push(4);
console.log(arr2); // [1, 2, 3, 4]// 数组含空位
let arr3 [1, , 3],arr4 [...arr3];
console.log(arr4); // [1, undefined, 3]这里是浅拷贝
1.9.3、将伪数组转为真正的数组
bodydiv/divdiv/divdiv/divscript//3. 将伪数组转为真正的数组const divs document.querySelectorAll(div); //获取到的是一个伪数组console.log(divs);const divArr [...divs];console.log(divArr);/script
/body1.9.4、对象合并
let age {age: 15};
let name {name: Amy};
let person {...age, ...name};
console.log(person); // {age: 15, name: Amy}1.9.5、对象的克隆
var obj1 { foo: bar, x: 42 };
var clonedObj { ...obj1 };
console.log(clonedObj); // { foo: bar, x: 42 } 2、Symbol
ES6 引入了一种新的原始数据类型 Symbol表示独一无二的值它是 JavaScript 语言的第七种数据类型是一种类似于字符串的数据类型。
Symbol 的值是唯一的用来解决命名冲突的问题Symbol 值不能与其他数据进行运算Symbol 定义的对象属性不能使用 for…in 循环遍历但是可以使用 Reflect.ownKeys 来获取对象的所有键名
2.1、Symbol的创建
Symbol() Symbol 前面不能加new关键字直接调用即可创建一个独一无二的 symbol 类型的值。
let s Symbol();
console.log(s,typeof s);
// Symbol() symbolStmbol(‘字符串’) 这里的字符串只是一个描述对于返回的结果也不是固定的(有两个张三但是两个张三的编号是不一样的)
// 创建 Symbol 的时候可以添加一个描述
const sym Symbol(foo);
// sym.description 可以直接返回 Symbol 的描述
console.log(sym.description); // foolet s2 Symbol(张三);
let s3 Symbol(张三);
// 没有两个 Symbol 的值是相等的
console.log( s2 s3); //falseSymbol.for(‘字符串’) 通过这样的方式创建 Symbol可以通过字符串返回一个固定的 Symbol 值
let s4 Symbol.for(尚硅谷);
let s5 Symbol.for(尚硅谷);console.log(s4 s5); // true2.2、不能与其他数据进行运算
//不能与其他数据进行运算
// let result s 100;
// let result s 100;
// let result s s;2.3、7种数据类型记忆
口诀USONB you are so niubiility
U undefined
S string symbol
o object
n null number
b boolean
2.4、Symbol的应用
2.4.1、Symbol作为属性名
在 ES6 中对象的属性名支持表达式所以你可以使用一个变量作为属性名这对于一些代码的简化很有用处但是表达式必须放到方括号内
let prop name;
const obj {// 使用表达式作为属性名,需要加方括号[prop]: liao
};
console.log(obj.name); // liao了解了这个新特性后我们接着学习。symbol 值可以作为属性名因为 symbol 值是独一无二的所以当它作为属性名时不会和其他任何属性名重复
let name Symbol();
let obj {[name]: liao
};
console.log(obj); // { Symbol(): liao }打印出来的对象有一个属性名是 symbol 值。如果我们想访问这个属性值不能使用 . 点的方式而是必须使用方括号的形式
console.log(obj[name]); // liao
console.log(obj.name); // undefinedSymbol 作为属性名的时候需要把 Symbol 使用 [] 包裹 2.4.2、Symbol属性名的遍历
使用 Symbol 类型值作为属性名这个属性不会被for…in遍历到也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()获取到
Object.keys() 获取所有的属性名 keyObject.getOwnPropertyNames() 获取所有的属性名 keyJSON.stringify() 获取所有的属性名key和属性值value
const obj1 {name: 林晓,age: 18,salary: 30000,
};for (const key in obj1) {// 遍历属性名 keyconsole.log(key);/*** nameagesalary*/
}// 获取所有的属性名 key
console.log(Object.keys(obj1));
// [ name, age, salary ]// 获取所有的属性名 key
console.log(Object.getOwnPropertyNames(obj1));
// [ name, age, salary ]// 获取所有的属性名key和属性值value
console.log(JSON.stringify(obj1));
// {name:林晓,age:18,salary:30000}我们可以使用下面两个方法获取对象的所有symbol类型的属性名 Reflect.ownKeys 新的APIObject.getOwnPropertySymbols
/*** 但是如果是 Symbol 属性名*/
const salary Symbol(salary);
const name Symbol(name);
const obj {[name]: 林晓,age: 18,[salary]: 30000,
};// age 只能拿到 key,拿不到Symbol类型的 name 属性名
for (const key in obj) {console.log(key);
}// 获取到obj对象里面的所有 Symbol 属性名
const SymbolPropNames Object.getOwnPropertySymbols(obj);
console.log(SymbolPropNames); // [ Symbol(name), Symbol(salary) ]
// 获取第一个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[0]]); // 林晓
// 获取第二个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[1]]); // 30000// 新的api: Reflect.ownKeys()
console.log(Reflect.ownKeys(obj)); // [ age, Symbol(name), Symbol(salary) ]2.4.3、Symbol.for() 和 Symbol.keyFor()
Symbol 包含两个静态方法for 和 keyFor。
const s1 Symbol(liao);
const s2 Symbol(liao);
const s3 Symbol.for(liao);
const s4 Symbol.for(liao);
console.log(s1 s3); // false
console.log(s3 s4); // true直接使用 Symbol 方法即便传入的字符串是一样的创建的 symbol 值也是互不相等的而使用 Symbol.for方法传入字符串会先检查有没有使用该字符串调用 Symbol.for 方法创建的 symbol 值如果有返回该值如果没有则使用该字符串新创建一个。
// Symbol.keyFor() 方法传入一个 symbol 值,返回该值在全局注册的键名
const sym Symbol.for(liao);
console.log(Symbol.keyFor(sym)); // liao2.5、Symbol 内置值
除了定义自己使用的 Symbol 值以外ES6 还提供了 11 个内置的 Symbol 值指向语言内部使用的方法。可以称这些方法为魔术方法因为它们会在特定的场景下自动执行。
Symbol.hasInstance当其他对象使用 instanceof 运算符判断是否为该对象的实例时会调用这个方法Symbol.isConcatSpreadable对象的 Symbol.isConcatSpreadable属性 等于的是一个布尔值表示该对象用于 Array.prototype.concat()时是否可以展开。Symbol.species创建衍生对象时会使用该属性Symbol.match当执行 str.match(myObject) 时如果该属性存在会调用它返回该方法的返回值。Symbol.replace当该对象被 str.replace(myObject) 方法调用时会返回该方法的返回值。Symbol.search当该对象被 str. search (myObject) 方法调用时会返回该方法的返回值。Symbol.split当该对象被 str. split (myObject) 方法调用时会返回该方法的返回值。Symbol.iterator对象进行 for…of 循环时会调用 Symbol.iterator方法返回该对象的默认遍历器Symbol.toPrimitive该对象被转为原始类型的值时会调用这个方法返回该对象对应的原始类型值。Symbol. toStringTag在该对象上面调用 toString 方法时 返回该方法的返回值Symbol. unscopables该对象指定了使用 with 关键字时哪些属性会被 with环境排除。
3、迭代器
迭代器(Iterator) 就是一种机制。它是一种接口为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口就可以完成遍历操作。
ES6 创造了一种新的遍历命令 for…of 循环Iterator 接口主要供 for…of 消费原生具备 iterator 接口的数据(可用 for of 遍历) ArrayArgumentsSetMapStringTypedArrayNodeList
3.0、数组的常用方法
这里先简单介绍下数组的常用方法
改变原数组的方法
// 1、push() : 数组末尾添加数据,返回数组的长度
var arr [10, 20, 30, 40]
res arr.push(20)
console.log(arr);//[10,20,30,40,20]
console.log(res);//5// 2、pop():数组末尾弹出数据
var arr [10, 20, 30, 40]
res arr.pop()
console.log(arr);//[10,20,30]
console.log(res);//40// 3、unshift(): 数组头部添加数据,返回数组的长度
var arr [10, 20, 30, 40]
resarr.unshift(99)
console.log(arr);//[99,10,20,30,40]
console.log(res);//5// 4、shift():数组头部删除数据,返回删除的那个数据
var arr [10, 20, 30, 40]
resarr.shift()
console.log(arr);[20,30,40] // [ 20, 30, 40 ]
console.log(res);// 10// 5、reverse():翻转数组,返回翻转的数据
var arr [10, 20, 30, 40]
resarr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]// 6、sort(): 排序
var arr [1,3,5,7,9,10]
console.log(arr.sort()); // 默认排序顺序为按字母升序,所以通常不准确
// 正序排列
arr.sort(function(a,b){return(a-b)})
console.log(arr); // [1,3,5,7,9,10]
// 倒序排列
arr.sort(function(a,b){return(b-a)})
console.log(arr);// [ 10, 9, 7, 5, 3, 1 ]// 7、splice(开始的索引,截取几个): 截取数组,返回截取出来的数据
var arr [1,3,5,7,9,10]
res arr.splice(1,2) // 从索引1开始,截取2个数据
console.log(arr); // [ 1, 7, 9, 10 ]
console.log(res); // [ 3, 5 ]//splice(开始的索引,截取几个,你要插入的数据) : 删除并插入数据
var arr [1,3,5,7,9,10]
res arr.splice(1,1,999,888) // 从索引1开始,截取1个数据删除,并插入999,888
console.log(arr); // [1, 999, 888, 5,7,9,10]
console.log(res); // [ 3 ]不改变原数组的方法
// 1、concat(): 合并数据
var arr [10, 20, 10, 30, 40, 50, 60]
res arr.concat(20,小敏,50)
console.log(arr) // [10, 20, 10, 30, 40, 50, 60,20,小敏,50]
console.log(res);// [10, 20, 10, 30, 40, 50, 60,20,小敏,50]//2、join(): 数组转字符串
var arr [10, 20, 10, 30, 40, 50, 60]
res arr.join()
console.log(arr) // 数组不改变 [10, 20, 10, 30, 40, 50, 60]
console.log(res); // 10201030405060
console.log(typeof res); //string//3、slice(开始索引,结束索引): 截取数组的一部分数据,返回截取的数据,前闭后开 [ ),
var arr [10, 20, 10, 30, 40, 50, 60]
res arr.slice(1,4)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res);// [ 20, 10, 30 ]//4、indexOf(数值):从左边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引
var arr [10, 20, 10, 30, 40, 50, 60]
res arr.indexOf(10)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 返回第一次出现的索引 0//indexOf(数值,开始的索引)
var arr [10, 20, 10, 30, 40, 50, 60]
res arr.indexOf(10,1)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 2//5、lastIndexOf(数值):从右边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引ES6新增的数组方法
//1、forEach(): 循环遍历数组
var arr [盖伦,德玛,大风车]
arr.forEach((item,index) {// index 是数组下标,item是数组值console.log(index);console.log(item);
});// 2、map 加工数组
var arr [盖伦,德玛,大风车];
var newArr arr.map((item,index) {console.log(index);console.log(item);return item 111
});
console.log(newArr); // [ 盖伦111, 德玛111, 大风车111 ]// 3、filter() 过滤数组
var arr [1,2,3,4,5];
var newArr arr.filter((item,index) {return item 2;
});
console.log(newArr); // [ 3, 4, 5 ]// 4、every() 判断数组是不是满足所有条件
var arr [1, 2, 3, 4, 5]
var res arr.every((item,index) {return item 0;
})
console.log(res);//打印结果 true// 6、find() 用来获取数组中满足条件的第一个数据
var arr [1, 2, 3, 4, 5]
var res arr.find((item,index) {return item 3;
})
console.log(res);//打印结果 43.1、数组的遍历
我们先看一下数组的遍历方式
//声明一个数组
const xiyou [唐僧, 孙悟空, 猪八戒, 沙僧];//使用 for...in 遍历数组
for (let i in xiyou) {// i 是数组的下标console.log(i);console.log(xiyou[i]);
}//使用 for...of 遍历数组
for (let v of xiyou) {console.log(v);/*** 唐僧孙悟空猪八戒沙僧*/
}//forEach(): 循环遍历数组
var arr [盖伦,德玛,大风车]
arr.forEach((index,item) {// index 是数组下标,item是数组值console.log(index);console.log(item);
});3.2、对象的遍历
//对象
var test {name : zs,age: 18
}// 遍历属性名和属性值
for(let key in test) {// key 是属性名console.log(key);console.log(test[key]);
}// 获取所有的属性名
console.log(Object.keys(test)); // [ name, age ]// 获取所有的属性值
console.log(Object.values(test)); // [ zs, 18 ]3.3、数组和对象之间的转换
数组转换为对象
// 数组转对象
// 方法一:使用 spread 扩展运算符
const arr1 [one,two,three];
const obj1 {...arr1};
console.log(obj1); // { 0: one, 1: tow, 2: three }// 方法二:使用 foreach
const arr [1,2,3,4,5];
let obj {};arr.forEach((item,index) {// index 是下标, item 是数组元素obj[index] item;
})console.log(obj); //{ 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 }对象转换为数组 3.4、迭代器
为什么数据可以使用 for… of 遍历呢因为数组具有一个属性 Symbol.iterator
//声明一个数组
const xiyou [唐僧, 孙悟空, 猪八戒, 沙僧];
console.log(xiyou);注意需要自定义遍历数据的时候要想到迭代器
// 原理
//声明一个数组
const xiyou [唐僧, 孙悟空, 猪八戒, 沙僧];//创建数组的迭代器
let iterator xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());//{ value: 唐僧, done: false }
console.log(iterator.next());//{ value: 孙悟空, done: false }
console.log(iterator.next());//{ value: 猪八戒, done: false }
console.log(iterator.next());//{ value: 沙僧, done: false }
console.log(iterator.next());//{ value: undefined, done: true }4、生成器函数
生成器函数是 ES6 提供的一种异步编程解决方案语法行为和传统函数完全不同。
/*** generator 生成器函数,可以通过 yield 关键字 , 将函数挂起* 和普通函数的区别* 1. function 后面,函数名之前有个星号 ** 2. 只能在函数内部使用 yield 表达式* 3. generator函数是分段执行的, yield 语句是赞同执行, next() 是恢复执行*/
function* func(){yield 2; // 调用一次 next 会执行到这yield 3; // 调用二次 next 会执行到这
}// 调用生成器函数,会返回一个迭代器对象,可以使用 next() 方法
let fn func();
console.log(fn.next()); // { value: 2, done: false }
console.log(fn.next()); // { value: 3, done: false }
console.log(fn.next()); // { value: undefined, done: true }代码说明
* 星号的位置没有限制生成器函数返回的结果是迭代器对象调用迭代器对象的 next 方法可以得到 yield 语句后的值yield 相当于函数的暂停标记也可以认为是函数的分隔符每调用一次 next 方法执行一段代码next 方法可以传递实参作为 yield 语句的返回值
5、Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数用来封装异步操作并可以获取其成功或失败的结果。
//实例化 Promise 对象
// 参数是一个函数,函数的形参是 resolve 和 reject,resolve 可以改变 Promise的状态为成功,reject 可以改变Promise的状态为失败
const p new Promise(function(resolve, reject) {//异步操作定时器setTimeout(function() {let data 数据库中的用户数据;resolve(data);}, 1000);
});/*** 调用 promise 对象的 then 方法,then 方法接收两个参数,两个参数都是函数,成功的函数形参是value,失败函数的形参是reason* 上方 resolve 成功后,下面的 then 方法就是执行第一个函数的方法*/p.then(function(value) {console.log(value); // 数据库中的用户数据
}, function(reason) {console.error(reason);
})我们在异步操作定时器里面获得数据之后就可以调用 resolve 函数来改变 Promise 对象的状态使得Promise 对象的状态为成功成功之后我们可以调用 Promise 对象的 then 方法then 方法接收两个参数都是函数类型成功的形参我们叫做 value失败的形参我们叫做 reason检测到 Promise 对象状态为成功则执行 then 方法里面的第一个方法。
script//实例化 Promise 对象const p new Promise(function(resolve, reject) {// 使用定期器来做一个异步任务的模拟setTimeout(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我们在异步操作定时器里面未能获得数据之后调用 reject 函数来改变 Promise 对象的状态使得 Promise 对象的状态为失败失败之后我们可以调用 Promise 对象的 then 方法检测到 Promise 对象状态为失败则执行 then 方法里面的第二个方法。 如果Promise对象获取数据成功则执行第一个回调函数输出 value 如果Promise对象获取数据失败则执行第二个回调函数输出 reason 5.1、Promise封装读取文件
//1. 引入 fs 模块
const fs require(fs);//2. 调用方法读取文件
// fs.readFile(./resources/为学.md, (err, data){
// //如果失败, 则抛出错误
// if(err) throw err;
// //如果没有出错, 则输出内容
// console.log(data.toString());
// });//3. 使用 Promise 封装
const p new Promise(function(resolve, reject){fs.readFile(./resources/为学.md, (err, data){//判断如果失败if(err) reject(err);//如果成功resolve(data);});
});p.then(function(value){console.log(value.toString());
}, function(reason){console.log(读取失败!!);
});5.2、Promise封装Ajax
bodyscript// 接口地址: https://api.apiopen.top/getJokeconst p new Promise((resolve, reject) {//1. 创建对象const xhr new XMLHttpRequest();//2. 初始化xhr.open(GET, https://api.apiopen.top/getJ);//3. 发送xhr.send();//4. 绑定事件, 处理响应结果xhr.onreadystatechange function () {//判断if (xhr.readyState 4) {//判断响应状态码 200-299if (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);});/script
/body5.3、Promise.then方法
调用 then 方法then 方法的返回结果是 Promise 对象对象状态由回调函数的执行结果决定
如果回调函数中的返回结果是非 Promise 类型的属性
bodyscriptconst p new Promise((resolve, reject) {setTimeout(() {resolve(获取数据成功);}, 1000)});//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值const result p.then(value {console.log(value);return 123;}, reason {console.warn(reason);})console.log(result);/script
/body如果回调函数中的返回结果是 Promise 类型的属性
bodyscriptconst p new Promise((resolve, reject) {setTimeout(() {resolve(获取数据成功);}, 1000)});//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定//2. 如果回调函数中返回的结果是 promise 类型的属性,则then方法的返回状态由 promise 对象决定const result p.then(value {return new Promise((resolve, reject) {resolve(ok);})}, reason {console.warn(reason);})console.log(result);/script
/body抛出错误
bodyscriptconst p new Promise((resolve, reject) {setTimeout(() {resolve(获取数据成功);}, 1000)});//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定//3.抛出错误const result p.then(value {//3. 抛出错误throw new Error(出错啦!);}, reason {console.warn(reason);})console.log(result);/script
/body所以 Promise.then 方法是可以链式调用的
p.then(value {},reason {}).then(value {},reason {})// 常用写法如下
p.then(value{}).then(value{});5.4、Promise.catch方法
bodyscriptconst p new Promise((resolve, reject){setTimeout((){//设置 p 对象的状态为失败, 并设置失败的值reject(出错啦!);}, 1000)});// p.then(function(value){}, function(reason){// console.error(reason);// });p.catch(function(reason){console.warn(reason);});/script
/bodyPromise.catch 就是 Promise.then 缺少第一个函数参数的语法糖用then 就可以。
6、Set Map的属性和方法 size 返回Set的元素个数 add 增加一个新元素返回当前Set has 检测Set中是否包含某个元素 clear 清空集合返回 undefined
//声明一个 set集合
let s new Set();
let s2 new Set([大事儿,小事儿,好事儿,坏事儿,小事儿]);
console.log(s2);// { 大事儿, 小事儿, 好事儿, 坏事儿 }
// 注意Set集合会有去重功能,所以s2的元素个数其实是4个// 元素个数
console.log(s2.size); // 4
// 添加新的元素
s2.add(喜事儿);
console.log(s2); // { 大事儿, 小事儿, 好事儿, 坏事儿, 喜事儿 }
// 删除元素
s2.delete(坏事儿);
// 检测是否存在某个值
console.log(s2.has(糟心事)); // false
// 清空
s2.clear();
console.log(s2);// {}6.1、Set集合实践
数组去重
let arr [1,2,3,4,5,4,3,2,1];
//1. 数组去重
let result1 new Set(arr); //此时result是一个集合,转化为数组只需要使用扩展运算符展开
console.log(result1); // { 1, 2, 3, 4, 5 }let result2 [...new Set(arr)];
console.log(result2); // [ 1, 2, 3, 4, 5 ]两个集合求交集
let arr [1,2,3,4,5,4,3,2,1];
let arr2 [4,5,6,5,6];
// 首先先对数组去重
let result [...new Set(arr)];
let result2 [...new Set(arr2)];
7、Map ES6 提供了 Map 数据结构。它类似于对象也是键值对的集合。 数据结构。它类似于对象也是键值对的集合。 但是“键”的范围不限于字符串各种类型的值包括对象都可以当作键。 Map也实现了iterator接口所以可以使用 扩展运算符 和 for…of…进行遍历。 Map的属性和方法 size 返回Map的元素个数set 增加一个新元素返回当前Mapget 返回键名对象的键值has 检测Map中是否包含某个元素clear 清空集合返回 undefined
//创建一个空Map
let m new Map();
//创建一个非空Map
let m2 new Map([[name,林晓],[age,21]
]);
//添加元素
m2.set(salary,30000);
//添加方法
m2.set(fighting, function(){console.log(加油!!);
});
console.log(m2);// 获取
console.log(m2.get(name));
console.log(m2.get(age));
console.log(m2.get(salary));
console.log(m2.get(fighting));// 删除
m2.delete(age);// 检查是否包含某元素
console.log(m2.has(age));// 清除
m2.clear();
