深入理解es6(下)
程序员文章站
2022-06-27 21:45:49
一、symbol javascript基本数据类型: null、undefined、number、boolean、string、symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值(随机生成的一个永远都不会重复的id串) 二、Set和Map 1、Set() 是es6提供的一 ......
一、symbol
javascript基本数据类型:
null、undefined、number、boolean、string、symbol
es6 引入了一种新的原始数据类型symbol,表示独一无二的值(随机生成的一个永远都不会重复的id串)
let s = symbol(); typeof s // "symbol"
二、set和map
1、set()
是es6提供的一种新的数据结构,类似于数组,但是set里面的数据具有唯一性
const s = new set();
set实例的属性和方法
let set = new set([1, 2, 3, 4, 4]); //返回实例的总数 set.size //5 //操作方法 set.add(value) //添加某个值,返回结构本身 set.delete(value) //删除某个值,返回一个布尔值 set.has(value) //返回一个布尔值,表示是否为set成员 set.clear() //清空所有成员,无返回值 //遍历方法 keys(),values(),entries() // 注:set 结构没有键名,只有键值,所以keys(),values()的行为完全一致
2、map()
map 数据结构,它类似于对象,但是键的范围不限于字符串,可以为各种类型的值(包括对象)
let map = new map(); let obj = {msg:'hello'} //map设置和获取值(用一个对象作为了键) map.set(obj, 'content') map.set('key', 'value') map.get(obj) //'content' //size 属性 map.size //2 //返回一个布尔值,表示某个键是否在当前 map 对象之中 map.has(obj) //true //删除某个键,返回true。如果删除失败,返回false map.delete(obj) //true //清除所有成员,没有返回值。 map.clear() //遍历方法 keys(),values(),entries() //注:map 的遍历顺序就是插入顺序
三、promise
是异步编程的一种解决方案,可以处理多个异步请求的执行顺序等
//基本用法 let p1 = function(){ return new promise((resolve,reject)=>{ //异步操作1,成功执行resolve函数,失败执行reject函数 }) } let p2 = function(){ return new promise((resolve,reject)=>{ //异步操作2,成功执行resolve函数,失败执行reject函数 }) } p1.then((data)=>{ console.log('成功的回调') },(err)=>{ console.log('失败的回调') }) //promise.all方法用于将多个 promise 实例,包装成一个新的 promise 实例 let p = promise.all([p1,p2]) p.then((data)=>{ //两个都执行了resolve方法 }).catch((err)=>{ //一个不满足就执行这里 })
四、generator函数 和 async函数
1、generator函数
es6 提供的一种异步编程解决方案
操作繁琐,需要手动调用next方法,不常用
function* test(){ yield 'hello'; //yield可以为一个异步函数的返回结果 yield 'world'; ... } let result = test(); console.log(result.next()); // { value: 'hello', done: false } console.log(result.next()); // { value: 'world', done: false } console.log(result.next()); // { value: undefined, done: true }
2、async函数(es7)
它就是 generator 函数的语法糖
async函数返回一个 promise 对象,可以使用then方法添加回调函数。
function timeout(ms) { return new promise((resolve, reject) => { settimeout(resolve, ms, "finish"); }); } async function asynctimesys(){ await timeout(1000); console.log("第一层异步结束!") await timeout(1000); console.log("第二层异步结束!") await timeout(1000); console.log("第三层异步结束!") await timeout(1000); console.log("第四层异步结束!") await timeout(1000); console.log("第五层异步结束!") return "all finish"; } asynctimesys().then((value)=>{ console.log(value); });
五、class类
通过class关键字,可以定义类
1、基本用法
//es6之前定义类(构造函数) function person(name,age){ this.name = name; this.age = age; } let student = new person('小明',18); //定义共有方法 person.prototype.say = function(){ return this.name +'今年'+ this.age; } console.log(student.say()) //小明今年18 //通过class定义类 class person { //静态属性,直接通过person.type拿到值 static type = '地球人'; //静态方法,通过person.eat()调用 static eat(){ console.log('吃点啥'); } //构造器定义类的属性 constructor(name,age){ this.name = name; this.age = age; } //定义共有方法 say(){ return this.name +'今年'+ this.age } } let student = new person('小明',18) console.log(student.say()) //小明今年18
2、class的继承
可以通过extends关键字实现继承
class person { constructor(name){ this.name = name; } say(){} } class teachaer extends person{ constructor(name,job){ super(name); //需要用到this,则必须执行一次super函数, this.job = job; } work(){ return `${this.name}的工作是${this.job}`; } } let xiaoming = new teachaer('小明','教书') console.log(xiaoming .work()) //小明的工作是教书
六、module语法
es6之前已经出现了js模块加载的方案,最主要的是commonjs(用于服务器端,如nodejs)和amd规范(用于浏览器,如requirejs)
1、export 导出
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
//1、一个一个的导出 //导出多个变量 export var name = "小明"; export var age = 18; //导出方法 export function say(){} //导出类 export class person{} //2、多个一起导出 let a = 1; let b = 2; let c = 3; export { a, b, c } //通过向大括号中添加 a、b、c 变量并且export输出,就可以将对应变量值以 a、b、c 变量标识符形式暴露给其他文件而被读取到
2、import 导入
import用于在一个模块中加载另一个含有export接口的模块。
//1、引入所有成员 import * as items from '模块路径' //注:* 代表所有,as后面跟别名 //2、引入指定成员 import { a, b } from '模块路径'
3、export default 导出默认成员
一个模块只能有一个export default
var name = '小明' export default name; //引入default成员 import name from '模块路径'