经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
深入理解es6(下)
来源:cnblogs  作者:smile_or  时间:2019/9/11 8:50:50  对本文有异议

一、symbol

javascript基本数据类型:
null、undefined、number、boolean、string、symbol
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值(随机生成的一个永远都不会重复的id串)

  1. let s = Symbol();
  2. typeof s
  3. // "symbol"

二、Set和Map

1、Set()

是es6提供的一种新的数据结构,类似于数组,但是set里面的数据具有唯一性

  1. const s = new Set();

Set实例的属性和方法

  1. let set = new Set([1, 2, 3, 4, 4]);
  2. //返回实例的总数
  3. set.size //5
  4. //操作方法
  5. set.add(value) //添加某个值,返回结构本身
  6. set.delete(value) //删除某个值,返回一个布尔值
  7. set.has(value) //返回一个布尔值,表示是否为set成员
  8. set.clear() //清空所有成员,无返回值
  9. //遍历方法
  10. keys(),values(),entries()
  11. // 注:Set 结构没有键名,只有键值,所以keys(),values()的行为完全一致

2、Map()

Map 数据结构,它类似于对象,但是键的范围不限于字符串,可以为各种类型的值(包括对象)

  1. let map = new Map();
  2. let obj = {msg:'hello'}
  3. //map设置和获取值(用一个对象作为了键)
  4. map.set(obj, 'content')
  5. map.set('key', 'value')
  6. map.get(obj) //'content'
  7. //size 属性
  8. map.size //2
  9. //返回一个布尔值,表示某个键是否在当前 Map 对象之中
  10. map.has(obj) //true
  11. //删除某个键,返回true。如果删除失败,返回false
  12. map.delete(obj) //true
  13. //清除所有成员,没有返回值。
  14. map.clear()
  15. //遍历方法
  16. keys(),values(),entries()
  17. //注:Map 的遍历顺序就是插入顺序

三、promise

是异步编程的一种解决方案,可以处理多个异步请求的执行顺序等

  1. //基本用法
  2. let p1 = function(){
  3. return new Promise((resolve,reject)=>{
  4. //异步操作1,成功执行resolve函数,失败执行reject函数
  5. })
  6. }
  7. let p2 = function(){
  8. return new Promise((resolve,reject)=>{
  9. //异步操作2,成功执行resolve函数,失败执行reject函数
  10. })
  11. }
  12. p1.then((data)=>{
  13. console.log('成功的回调')
  14. },(err)=>{
  15. console.log('失败的回调')
  16. })
  17. //Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
  18. let p = Promise.all([p1,p2])
  19. p.then((data)=>{
  20. //两个都执行了resolve方法
  21. }).catch((err)=>{
  22. //一个不满足就执行这里
  23. })

四、Generator函数 和 async函数

1、Generator函数

ES6 提供的一种异步编程解决方案
操作繁琐,需要手动调用next方法,不常用

  1. function* test(){
  2. yield 'hello'; //yield可以为一个异步函数的返回结果
  3. yield 'world';
  4. ...
  5. }
  6. let result = test();
  7. console.log(result.next()); // { value: 'hello', done: false }
  8. console.log(result.next()); // { value: 'world', done: false }
  9. console.log(result.next()); // { value: undefined, done: true }

2、async函数(es7)

它就是 Generator 函数的语法糖
async函数返回一个 Promise 对象,可以使用then方法添加回调函数。

  1. function timeout(ms) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(resolve, ms, "finish");
  4. });
  5. }
  6. async function asyncTimeSys(){
  7. await timeout(1000);
  8. console.log("第一层异步结束!")
  9. await timeout(1000);
  10. console.log("第二层异步结束!")
  11. await timeout(1000);
  12. console.log("第三层异步结束!")
  13. await timeout(1000);
  14. console.log("第四层异步结束!")
  15. await timeout(1000);
  16. console.log("第五层异步结束!")
  17. return "all finish";
  18. }
  19. asyncTimeSys().then((value)=>{
  20. console.log(value);
  21. });

五、Class类

通过class关键字,可以定义类

1、基本用法

  1. //es6之前定义类(构造函数)
  2. function Person(name,age){
  3. this.name = name;
  4. this.age = age;
  5. }
  6. let student = new Person('小明',18);
  7. //定义共有方法
  8. Person.prototype.say = function(){
  9. return this.name +'今年'+ this.age;
  10. }
  11. console.log(student.say()) //小明今年18
  12. //通过class定义类
  13. class Person {
  14. //静态属性,直接通过Person.type拿到值
  15. static type = '地球人';
  16. //静态方法,通过Person.eat()调用
  17. static eat(){
  18. console.log('吃点啥');
  19. }
  20. //构造器定义类的属性
  21. constructor(name,age){
  22. this.name = name;
  23. this.age = age;
  24. }
  25. //定义共有方法
  26. say(){
  27. return this.name +'今年'+ this.age
  28. }
  29. }
  30. let student = new Person('小明',18)
  31. console.log(student.say()) //小明今年18

2、class的继承

可以通过extends关键字实现继承

  1. class Person {
  2. constructor(name){
  3. this.name = name;
  4. }
  5. say(){}
  6. }
  7. class Teachaer extends Person{
  8. constructor(name,job){
  9. super(name); //需要用到this,则必须执行一次super函数,
  10. this.job = job;
  11. }
  12. work(){
  13. return `${this.name}的工作是${this.job}`;
  14. }
  15. }
  16. let xiaoming = new Teachaer('小明','教书')
  17. console.log(xiaoming .work()) //小明的工作是教书

六、Module语法

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS(用于服务器端,如nodeJS)和AMD规范(用于浏览器,如requireJS)

1、export 导出

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

  1. //1、一个一个的导出
  2. //导出多个变量
  3. export var name = "小明";
  4. export var age = 18;
  5. //导出方法
  6. export function say(){}
  7. //导出类
  8. export class Person{}
  9. //2、多个一起导出
  10. let a = 1;
  11. let b = 2;
  12. let c = 3;
  13. export { a, b, c }
  14. //通过向大括号中添加 a、b、c 变量并且export输出,就可以将对应变量值以 a、b、c 变量标识符形式暴露给其他文件而被读取到

2、import 导入

import用于在一个模块中加载另一个含有export接口的模块。

  1. //1、引入所有成员
  2. import * as items from '模块路径'
  3. //注:* 代表所有,as后面跟别名
  4. //2、引入指定成员
  5. import { a, b } from '模块路径'

3、export default 导出默认成员

一个模块只能有一个export default

  1. var name = '小明'
  2. export default name;
  3. //引入default成员
  4. import name from '模块路径'

原文链接:http://www.cnblogs.com/sgs123/p/11497476.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号