ES6的新增特性

分类：ES6作者：佚名

目录

第一篇、开发环境搭建

 第二篇、三种声明方式

2.1 var(全局声明)

2.2 let(局部声明)

2.3 const(常量声明)

第三篇、解构赋值

3.1 数组的解构赋值

3.2 对象的解构赋值

3.3 字符串的解构赋值

第四篇、对象扩展运算符和rest运算符

4.1 对象扩展运算符

4.2 rest运算符

第五篇、新增字符串

5.1 字符串模板

5.2 字符串查找

5.3 字符串的复制

第六篇、数字的操作

6.1 数字判断

第七篇、数组方法

7.1 Array.from()

7.2 Array.of()

7.3 find()实例方法

7.4  fill()实例方法

7.5 entries()实例方法

7.6 数组循环

7.6.1 for...of

第八篇、函数扩展和箭头函数

 第八篇、函数和数组的查缺补漏

 8.1 对象的函数解构

 8.2 数组解构

 8.3 in的用法

 8.4 数组遍历

8.5 数组转为字符串

第九篇、ES6中的对象

9.1 对象的赋值

9.2 key值的构建

9.3 自定义对象

9.3.1 is()

9.3.2 assign()

第十篇、Symbol在对象中的作用

10.1 认识Symbol

10.2 Symbol在对象中的应用

第十一篇、Set和WeakSet数据结构

11.1 Set的增删查

 11.2 Set的输出

11.3 WeakSet的声明

11.4  WeakSet重复值的问题

 第十二篇、map的数据结构

12.1 初始map

12.2 map的增删查

第十三篇、proxy

第十四篇、promise

第十五篇、class

 15.1 类方法的传参

 15.2 类的传参

15.3 类的继承

第十六篇、模块化操作

 16.1 多变量输出

16.2 函数化输出

16.3 语义化输出

第一篇、开发环境搭建

ES6跟我们的ES5不一样,因为很多浏览器可能不支持ES6的语法,所以需要通过转码将ES6的语法转为ES5的语法,来使得大部分浏览器可以识别

  1. //根目录下初始化npm生成package.json
  2. npm init -y
  3.  
  4. {
  5.   "name": "ES6",
  6.   "version": "1.0.0",
  7.   "description": "",
  8.   "main": "index.js",
  9.   "scripts": {
  10.     "test": "echo \"Error: no test specified\" && exit 1"
  11.   },
  12.   "keywords": [],
  13.   "author": "",
  14.   "license": "ISC"
  15. }
  16.  
  17. //全局安装babel-cli
  18. npm install -g babel-cli
  19.  
  20. //安装babel-preset-es2015和babel-cli
  21. npm install --save-dev babel-preset-es2015 babel-cli
  22.  
  23. //安装完成之后在package.json下会多出来如下代码
  24. "devDependencies": {
  25.     "babel-cli": "^6.26.0",
  26.     "babel-preset-es2015": "^6.24.1"
  27.   }
  28.  
  29. //在根目录下需要建一个.babelrc文件,文件中写入如下代码
  30. {
  31.     "presets":[
  32.         "es2015"
  33.     ],
  34.     "plugins":[]
  35. }
  36.  
  37. //最后执行如下命令
  38. //将src/index.js文件转为ES5的语法,转完之后的文件在dist/index.js
  39. babel src/index.js -o dist/index.js

 目录结构如下：

html文件中引入的js需要引入的是dist下的index.js。

  1. ----------------------------转码前---------------------
  2.  
  3. >src/index.js
  4.  
  5. let a=1;
  6. console.log(a)
  7.  
  8. ----------------------------转码后---------------------
  9.  
  10. >dist/index.js
  12. "use strict";
  13.  
  14. var a = 1;
  15. console.log(a);
  1. //每次都要手动输入很长的命令才可以转码,我们要简化一下
  2.  
  3. > 修改package.json的script里的内容如下
  4.  
  5. "scripts": {
  6.     "build": "babel src/index.js -o dist/index.js"
  7.   },
  8.  
  9. //这样我们每次执行npm run build就可以打包执行代码

 第二篇、三种声明方式

2.1 var(全局声明)

  1. //var是全局声明变量
  2. var a = "Hamy";
  3. console.log(a)    //Hamy
  4. window.onload = function(){
  5.     console.log(a)    //哈米
  6. }
  7. {
  8.     var a = "哈米";
  9. }
  10. console.log(a)    //哈米
  11. //在块中再次声明该变量,会覆盖全局声明的变量

2.2 let(局部声明)

  1. //let 局部声明
  2. {
  3.     let a="哈米"
  4. }
  5. console.log(a);    //报错,因为a是在{}中局部声明,在全局中获取不到
  6.  
  7. for(var i=0;i<10;i++){
  8.     console.log("循环体中:"+i)    //1 2 3 4 5 6 7 8 9 
  9. }
  10. console.log("循环体外:"+i)    //10
  11.  
  12.  
  13. for(let i=0;i<10;i++){
  14.     console.log("循环体中:"+i)    //1 2 3 4 5 6 7 8 9 
  15. }
  16. console.log("循环体外:"+i)    //报错,因为i是局部变量,全局中找不到i

2.3 const(常量声明)

  1. const a = "Hami";
  2. var a = "哈米";
  3. console.log(a);    //报错,常量声明完成之后不能被修改,否则报错

第三篇、解构赋值

3.1 数组的解构赋值

  1. //数组的解构赋值要一一对应,否则报错
  2.  
  3. let [a,b,c] = [0,1,2]
  4. console.log(a,b,c)    //0 1 2
  5.  
  6. let [a,[b,c],d] = [0,1,2]
  7. console.log(a,b,c)    //报错
  8.  
  9. let [a,[b,c],d] = [0,[1,2],3]
  10. console.log(a,b,c,d)    //0 1 2 3
  11.  
  12. let [foo='true'] = []
  13. console.log(foo)    //true  可以使用默认值
  14.  
  15. let [a,b='哈米'] = ['hamy']
  16. console.log(a+b)    //hamy哈米
  17.  
  18. let [a,b='哈米'] = ['hamy',undefined]
  19. console.log(a+b)    //hamy哈米    undefined是空
  20.  
  21. let [a,b='哈米'] = ['hamy',null]
  22. console.log(a+b)    //hamynull    null是有值,值为null  
  23.

3.2 对象的解构赋值

  1. //对象的解构赋值是通过key值来取的
  2.  
  3. let {foo,bar} = {foo:'Hamy',bar:'哈米'}
  4. console.log(foo+bar)    //Hamy哈米
  5.  
  6. let {foo,boo} = {foo:'Hamy',bar:'哈米'}
  7. console.log(foo+boo)    //Hamyundefined    对象中找不到为boo的key值
  8.  
  9. //如果先定义,再解构,解构的时候需要加上()
  10. let foo;
  11. ({foo}) = {foo:'Hamy'}
  12. console.log(foo+bar)

3.3 字符串的解构赋值

  1. //字符串解构
  2.  
  3. const [a,b,c,d]='Hamy';
  4. console.log(a,b,c,d)    //H a m y

第四篇、对象扩展运算符和rest运算符

4.1 对象扩展运算符

  1. //不确定参数有多少个,可以使用对象扩展运算符...
  2. //当取不到之的时候取到的就是undefined
  3. function hamy(...arg){
  4.     console.log(arg[0]);    //1
  5.     console.log(arg[1]);    //2
  6.     console.log(arg[2]);    //3
  7.     console.log(arg[3]);    //undefined
  8. }
  9. hamy(1,2,3)
  10.  
  11. //改变arr2的值会影响arr1的值
  12. let arr1 = ['www','xueshuai','top'];
  13. let arr2 = arr1;
  14. console.log(arr2);     //['www','xueshuai','top']
  15. arr2.push('xueshuai');
  16. console.log(arr1);    //["www", "xueshuai", "top", "xueshuai"]
  17.  
  18. //使用扩展运算符将arr1里的值赋给arr2,修改arr2不会影响arr1
  19. let arr1 = ['www','xueshuai','top'];
  20. let arr2=[...arr1];
  21. console.log(arr2);//['www','xueshuai','top']
  22. arr2.push('xueshuai');
  23. console.log(arr2);//["www", "xueshuai", "top", "xueshuai"]
  24. console.log(arr1);//['www','xueshuai','top']
  25.

4.2 rest运算符

使用 for...of 代替 for

  1. //rest 剩余参数
  2. function hamy(first,...arg){
  3.     console.log(arg.length)    //7 因为first是0,arg是0后面的数,长度为7
  4.     for(let val of arg){
  5.         console.log(val)    //1 2 3 4 5 6 7
  6.     }
  7. }
  8. hamy(0,1,2,3,4,5,6,7)

第五篇、新增字符串

5.1 字符串模板

  1. //使用反引号,反引号中使用${}添加变量
  2. //支持空格
  3. //支持html标签
  4. //支持运算
  5. let hamy = '哈米';
  6. let txt = `锄禾日当午,<br>汗滴禾下土,<br>谁之盘中餐,<br>粒粒皆辛苦。${hamy}`
  7. document.write(txt)   //写在页面
  8.  
  9.  
  10. let a=1;
  11. let b=2;
  12. let result=`${a+b}`;
  13. document.write(result);
  14.

5.2 字符串查找

  1. //字符串查找
  2. document.write(txt.includes(hamy))    //查看字符串中有没有hamy
  3. document.write(txt.startsWith(hamy))    //查看字符串中开头有没有hamy
  4. document.write(txt.endsWith(hamy))    //查看字符串中结尾有没有hamy

5.3 字符串的复制

  1. //字符串的复制,repeat中传入要显示的数量
  2. document.write('hamy |'.repeat(20))

第六篇、数字的操作

  1. //二进制声明 Binary
  2. let binary = 0B010101;
  3. console.log(binary); //21
  4.  
  5. //八进制声明 Octal
  6. let octal = 0o666;
  7. console.log(octal); //438

6.1 数字判断

  1. let a=11;
  2. console.log(Number.isFinite(a));    //true
  3. console.log(Number.isFinite('hamy'));   //false
  4. console.log(Number.isFinite(NaN));  //false
  5. console.log(Number.isFinite(undefined));    //false
  6.  
  7. //判断是不是数字
  8. Number.isFinite(a)
  9.  
  10. //判断NaN
  11. console.log(Number.isNaN(NaN)); //true
  12. console.log(Number.isNaN(4));   //false
  13.  
  14. //判断是不是整数
  15. let a = 918.1;
  16. console.log(Number.isInteger(a));   //false
  17.  
  18. //转换为整数
  19. console.log(Number.parseInt(a));   //918
  20.  
  21. //转换为浮点数
  22. console.log(Number.parseFloat(a));   //918.1
  23.  
  24. //最大安全整数和最小安全整数
  25. let hamy = Math.pow(2,53)-1
  26. console.log(Number.MAX_SAFE_INTEGER)    //9007199254740991
  27. console.log(Number.MIN_SAFE_INTEGER)    //-9007199254740991
  28. console.log(Number.isSafeInteger(hamy))    //true 判断是不是安全整数
  29.

第七篇、数组方法

7.1 Array.from()

json的数组格式转为数组格式

  1. //什么是json的数组格式
  2. let json = {
  3.     "0":"JSPang",
  4.     "1":"技术胖",
  5.     "2":"大胖逼逼叨",
  6.     length:3
  7. }
  8.  
  9. //json数组格式转为数组
  10. let arr = Array.from(json);
  11. console.log(arr);  //['JSPang','技术胖','大胖逼逼叨']

7.2 Array.of()

字符串/数字转为数组格式

  1. //Array.of()转为数组
  2. let arr = Array.of(3,4,5,6)
  3. console.log(arr)    //[3,4,5,6]
  4.  
  5. let arr1 = Array.of('jspang','技术胖')
  6. console.log(arr1)    //['jspang','技术胖']

7.3 find()实例方法

实例方法指的是需要先有一个实例,然后该实例调用该实例方法

  1. //find(fn) 实例方法
  2. //fn(value,index,arr){}
  3. //value 值        |    index  下标        |    arr 该数组
  4. //按条件查找时,遇到满足条件的情况,停止查找
  5. //按值查找时,查找到返回改值,否则返回undefined
  6.  
  7. let arr = [1,2,3,4,5,6,7,8,9];
  8. console.log(arr.find(function(value,index,arr){
  9.     return value > 5;
  10. }))        //6
  11.  
  12.  
  13. let arr1 = ['jspang','技术胖','大胖逼逼叨'];
  14. console.log(arr.find(function(value,index,arr){
  15.     return value == '小胖子';
  16. }))        //undefined

7.4  fill()实例方法

  1. //fill(str,start,end) 替换操作
  2. //str要替换的字符串    |    start开始替换的下标(从0开始)    |    end终止的下标(不包含)
  3.  
  4. let arr = ['jspang','技术胖','大胖逼逼叨'];
  5. arr.fill('web',1,3)
  6. console.log(arr)    //['jspang','web','web']

7.5 entries()实例方法

  1. let arr = ['jspang','技术胖','大胖逼逼叨'];
  2.  
  3. let list = arr.entries();
  4.  
  5. console.log(list.next().value);        //[0, "jspang"]
  6. console.log('--------------------------------');    
  7. console.log(list.next().value);        //[1, "技术胖"]
  8. console.log('********************************');
  9. console.log(list.next().value);        //[2, "大胖逼逼叨"]
  10. console.log('================================');

7.6 数组循环

7.6.1 for...of

  1. let arr = ['jspang','技术胖','大胖逼逼叨'];
  2.  
  3. //输出数组项
  4. for(let item of arr){
  5.     console.log(item);    //'jspang'    '技术胖'    '大胖逼逼叨'
  6. }
  7.  
  8. //输出数组下标
  9. for(let item of arr.keys()){
  10.     console.log(item);    //0    1    2
  11. }
  12.  
  13. //输出数组项和下标
  14. for(let [index,val] of arr.entries()){
  15.     console.log(index+':'+val);    //    0:jspang    1:技术胖     2:大胖逼逼叨
  16. }

第八篇、函数扩展和箭头函数

在ES5中严格模式只能写在js最前面,在ES6中严格模式可以写在函数体内,但是该函数参数不能有默认值,否则报错

 严格模式

  1. function add(a,b) {
  2.     'use strict'
  3.  
  4.     if(a == 0){
  5.         throw new Error('A is Error')    //主动抛错
  6.     }
  7.     return a+b;
  8. }
  9.  
  10. console.log(add(1,2))    //3

 获得传递参数的个数

  1. //获得传递参数的个数
  2.  
  3. function add(a,b) {
  4.     return a+b;
  5. }
  6. console.log(add.length) //只能获取必传参数,参数有了默认值不算在内

 箭头函数

箭头函数中不能使用构造函数

  1. /*function add(a,b) {
  2.     return a+b;
  3. }*/
  4.  
  5. var add = (a,b) => a+b;    //(内为函数的形参)    如果函数体内只有一行代码的话,可以不加{}
  6. var add = (a,b) => {return a+b};    //如果必须要写return的话,是需要加{}
  7.  
  8. console.log(add.length)    //2

 第八篇、函数和数组的查缺补漏

 8.1 对象的函数解构

  1. //对象的函数解构
  2.  
  3. let json = {
  4.     a:'jspang',
  5.     b:'技术胖'
  6. }
  7.  
  8. function fun({a,b}){
  9.     console.log(a,b)
  10. }
  11.  
  12. fun(json);    //'jspang'    '技术胖'

 8.2 数组解构

  1. //数组解构
  2. let arr = ['jspang','技术胖','前端教程'];
  3.  
  4. function fun(a,b,c){
  5.     console.log(a,b,c)
  6. }
  7.  
  8. fun(...arr);    //jspang 技术胖 前端教程

 8.3 in的用法

  1. //in的用法
  2. let obj = {
  3.     a:'技术胖',
  4.     b:'jspang'
  5. }
  6. console.log('a' in obj);    //true
  7.  
  8. let arr = [,,,]
  9. console.log(arr.length);    //3    其实为空,容易引起业务逻辑错误
  10. console.log(0 in arr);        //false

 8.4 数组遍历

  1. let arr = ['jspang','技术胖','前端视频'];
  2.  
  3. arr.forEach((val,index)=>console.log(index,val))
  4.  
  5. arr.filter(x => console.log(x));    //过滤
  6.  
  7. arr.some(x => console.log(x));    //一些
  8.  
  9. console.log(arr.map(x=> 'web'))    //替换

8.5 数组转为字符串

  1. let arr = ['jspang','技术胖','前端视频'];
  2.  
  3. console.log(arr.toString());    //jspang,技术胖,前端视频
  4.  
  5. console.log(arr.join('|'));     //jspang|技术胖|前端视频

第九篇、ES6中的对象

9.1 对象的赋值

  1. let name = 'jspang';
  2. let skill = 'web';
  3.  
  4. //ES5
  5. let obj = {
  6.     name:name,
  7.     skill:skill
  8. }
  9.  
  10. //ES6
  11. let obj = {
  12.     name,
  13.     skill
  14. }
  15.  
  16. console.log(obj)

9.2 key值的构建

  1. //不确定key是什么的时候,使用'[变量]'代替key值
  2. let key = "skill";
  3.  
  4. let obj = {
  5.     [key]:'web'
  6. }
  7. console.log(obj);    //{skill:'web'}

9.3 自定义对象

9.3.1 is()

  1. //is()    判断对象是否相等
  2. //===同值相等    is严格相等
  3.  
  4. let obj1 = {name:'jspang'};
  5. let obj2 = {name:'jspang'};
  6.  
  7. console.log(obj1.name === obj2.name);     //true
  8. console.log(Object.is(obj1.name,obj2.name));     //true
  9.  
  10. console.log(+0 === -0);     //true
  11. console.log(NaN === NaN);   //false
  12.  
  13. console.log(Object.is(+0,-0));    //false
  14. console.log(Object.is(NaN,NaN));   //true

9.3.2 assign()

  1. //assign()    合并对象
  2. let a={a:'jspang'}
  3. let b={b:'技术胖'}
  4. let c={c:'web'}
  5. let d=Object.assign(a,b,c);
  6. console.log(d)    //{a: "jspang", b: "技术胖", c: "web"}

第十篇、Symbol在对象中的作用

10.1 认识Symbol

  1. //Symbol
  2.  
  3. //声明
  4. let f = Symbol();
  5. console.log(typeof f);    //symbol
  6.  
  7. //输出
  8. let jspang = Symbol('技术胖');
  9. console.log(jspang);    //Symbol(技术胖)    Symbol类型
  10. console.log(jspang.toString());     //Symbol(技术胖)    转为字符串

10.2 Symbol在对象中的应用

  1. let jspang = Symbol();
  2.  
  3. let obj = {
  4.     [jspang]:'技术胖'
  5. } 
  6.  
  7. //对象中取Symbol值时用[]
  8. console.log(obj[jspang])
  9.  
  10. //修改对象中不确定key的值
  11. obj[jspang]='web'
  12. console.log(obj[jspang])
  1. let obj = {name:'jspang',skill:'web'};
  2. let age=Symbol();
  3. obj[age]=18;
  4. //对对象起到了一个保护作用,对不需要展示的key值用symbol类型
  5. for(let item in obj){
  6.     console.log(obj[item]); //jspang    web
  7. }
  8. console.log(obj[age])   //18

第十一篇、Set和WeakSet数据结构

 Set本身是个去重的过程,所以里面如果有重复的会被忽略

11.1 Set的增删查

  1. //Set
  2. let setArr = new Set(['jspang','技术胖','web','jspang']);
  3.  
  4. console.log(setArr)     //Set(3) {"jspang", "技术胖", "web"}    数据结构
  5.  
  6. //增加
  7. setArr.add('前端职场')
  8.  
  9. //查找 返回true/false
  10. console.log(setArr.has('jspang'));//true
  11. console.log(setArr.has('xiaodi'));//false
  12.  
  13. //删除某一项
  14. setArr.delete('web');
  15. console.log(setArr);
  16.  
  17. //全部删除
  18. setArr.clear();
  19. console.log(setArr);

 11.2 Set的输出

  1. //Set
  2. let setArr = new Set(['jspang','技术胖','web','jspang']);
  3.  
  4. //for...of
  5. for(let item of setArr){
  6.     console.log(item);
  7. }
  8.  
  9. //forEach
  10. setArr.forEach((value)=>console.log(value))
  11.  
  12. //size属性
  13. console.log(setArr.size);    //3

11.3 WeakSet的声明

  1. //WeakSet
  2. //不允许直接将对象写在WeakSet()里面
  3. //只能通过add添加
  4.  
  5. let weakobj = new WeakSet();
  6.  
  7. let obj={a:'jspang',b:'技术胖'};
  8. weakobj.add(obj);
  9. console.log(weakobj)

11.4  WeakSet重复值的问题

同Set一样,WeakSet不能存在重复的对象,但是WeakSet有个小技巧

  1. //类似如下这种形式的WeakSet是可以存在重复值的,因为值虽然一样,但是指向的内存空间不同
  2.  
  3. let weakobj = new WeakSet();
  4.  
  5. let obj1={a:'jspang',b:'技术胖'};
  6. let obj2={a:'jspang',b:'技术胖'};
  7.  
  8. weakobj.add(obj1);
  9. weakobj.add(obj2);
  10.  
  11. console.log(weakobj)
  12.  
  13. //----------------------------------------------------------------
  14. //但是如果将obj2的值赋给了obj1,再将obj1添加到weakobj中,就不会存在重复的值
  15. let weakobj = new WeakSet();
  16.  
  17. let obj1={a:'jspang',b:'技术胖'};
  18. let obj2={a:'jspang',b:'技术胖'};
  19. obj1 = obj2;
  20. weakobj.add(obj1);
  21.  
  22. console.log(weakobj)
  23.

 第十二篇、map的数据结构

12.1 初始map

  1. //map
  2. let json = {
  3.     name:'jspang',
  4.     skill:'web'
  5. }
  6. console.log(json.name)
  7.  
  8. let map = new Map();
  9. //这里的json就是key值,iam是value值
  10. map.set(json,'iam');
  11. console.log(map)
  12. //这里的json就是value值,iam是key值
  13. map.set('jspang',json);
  14. console.log(map);

12.2 map的增删查

  1. //增
  2. map.set(json,'iam');
  3. //取值
  4. console.log(map.get(json))//根据key值取值
  5. //查找
  6. console.log(map.has('jspang'))//返回true和false
  7. //查看值的长度
  8. console.log(map.size);
  9. //删除特定值
  10. map.delete(json);
  11. console.log(map)
  12. //删除全部
  13. map.clear();

第十三篇、proxy

  1. //传统的对象
  2. let obj = {
  3.     add:function (val) {
  4.         return val+100;
  5.     },
  6.     name:'I am JSPang'
  7. }
  8. console.log(obj.add(100))
  9. console.log(obj.name)

 Proxy的Set和Get

  1. //proxy 代理 ES6 增强 对象和函数(方法)  生命周期  预处理
  2. let pro = new Proxy({
  3.     add:function (val) {
  4.         return val+100;
  5.     },
  6.     name:'I am JSPang'
  7. },{
  8.     get:function (target,key,property) {
  9.         console.log(target,key);//target对象体   key要取值的key
  10.         return target[key];
  11.     },
  12.     set:function (target,key,value,receiver) {
  13.         console.log(`setting ${key} = ${value}`);
  14.         return target[key]=value;
  15.     }
  16. })
  17. console.log(pro.name)
  18. pro.name = '技术胖'
  19. console.log(pro.name)
  20.

Proxy的apply

  1. let target = function(){
  2.     return 'I am JSPang';
  3. }
  4. let handler = {
  5.     apply(target,ctx,args){
  6.         console.log('do apply')
  7.         return Reflect.apply(...arguments)
  8.     }
  9. }
  10.  
  11. let pro = new Proxy(target,handler);
  12.  
  13. console.log(pro());

第十四篇、promise

  1. //promise 解决ES5中的回调地狱问题
  2. //1.洗菜做饭
  3. //2.坐下来吃饭
  4. //3.收拾桌子洗碗
  5.  
  6. let state=1;//状态
  7.  
  8. function step1(resolve,reject){
  9.     console.log('1.开始-洗菜做饭');
  10.     if(state==1){
  11.         resolve('洗菜做饭-完成')
  12.     }else{
  13.         reject('洗菜做饭-错误')
  14.     }
  15. }
  16.  
  17. function step2(resolve,reject){
  18.     console.log('2.开始-坐下来吃饭');
  19.     if(state==1){
  20.         resolve('坐下来吃饭-完成')
  21.     }else{
  22.         reject('坐下来吃饭-错误')
  23.     }
  24. }
  25.  
  26. function step3(resolve,reject){
  27.     console.log('3.开始-收拾桌子洗碗');
  28.     if(state==1){
  29.         resolve('收拾桌子洗碗-完成')
  30.     }else{
  31.         reject('收拾桌子洗碗-错误')
  32.     }
  33. }
  34.  
  35. new Promise(step1)
  36. .then(function(val){
  37.     console.log(val);
  38.     return new Promise(step2);
  39. })
  40. .then(function(val){
  41.     console.log(val);
  42.     return new Promise(step3);
  43. })
  44. .then(function(val){
  45.     console.log(val);
  46. })

第十五篇、class

clas类其实就是构造函数的另一种写法

  1. class Coder {
  2.     name(val){
  3.         console.log(val);
  4.     }
  5. }
  6.  
  7. let jspang = new Coder;
  8. jspang.name('技术胖')

 15.1 类方法的传参

  1. //类里面若是调用类的方法使用this,每个方法必须return一个值才可以使用
  2. //类里面的各方法之间不用逗号或分号分开
  3. class Coder {
  4.     name(val){
  5.         console.log(val);
  6.         return val;
  7.     }
  8.     skill(val){
  9.         console.log(this.name('技术胖')+':'+'Skill-'+val)
  10.     }
  11. }
  12.  
  13. let jspang = new Coder;
  14. jspang.skill('web');

 15.2 类的传参

  1. //类的传参需要有一个contructor方法,这个方法接收的就是类的参数
  2. class Coder {
  3.     name(val){
  4.         console.log(val);
  5.         return val;
  6.     }
  7.     skill(val){
  8.         console.log(this.name('技术胖')+':'+'Skill-'+val)
  9.     }
  10.     constructor(a,b){
  11.         this.a=a;
  12.         this.b=b;
  13.     }
  14.     add(){
  15.         return this.a+this.b
  16.     }
  17. }
  18.  
  19. let jspang = new Coder(1,2);
  20. console.log(jspang.add())

15.3 类的继承

  1. class Coder {
  2.     name(val){
  3.         console.log(val);
  4.         return val;
  5.     }
  6.     skill(val){
  7.         console.log(this.name('技术胖')+':'+'Skill-'+val)
  8.     }
  9.     constructor(a,b){
  10.         this.a=a;
  11.         this.b=b;
  12.     }
  13.     add(){
  14.         return this.a+this.b
  15.     }
  16. }
  17.  
  18. class htmler extends Coder{
  19.     //...子类自己的方法
  20. }
  21.  
  22. let pang = new htmler;
  23. pang.name('jspang')

第十六篇、模块化操作

首先新建另一个js文件用来充当模块

 在temp.js写下如下代码

export var name = 'jspang'

在index.js中引用

  1. //export 输出
  2. //import 引入
  3.  
  4. import {name} from './temp';
  5.  
  6. console.log(name)

终端执行babel-node '路径'命令查看

 16.1 多变量输出

  1. //将temp.js里的内容改为如下
  2.  
  3. var name = 'jspang'
  4. var b = '技术胖'
  5. var skill = 'web'
  6.  
  7. export {name,b,skill};

16.2 函数化输出

  1. //修改temp.js的内容如下
  2. export function add(a,b){
  3.     return a+b;
  4. }

16.3 语义化输出

  1. //修改temp.js内容如下
  2. var a = 'jspang'
  3. var b = '技术胖'
  4. var c = 'web'
  5.  
  6. export {
  7.     a as name,
  8.     b as cname,
  9.     c as skill
  10. }
  11.  
  12. //修改index.js内容如下
  13. import {name,cname,skill} from './temp';

export default在一个js文件中只能有一个

export可以有多个

  1. export输出
  2. 用import {name,cname,skill} from './temp';形式引入
  3. 需要加上{}
  4.  
  5. export default输出
  6. import shy from './temp'
  7. 不需要用{},变量名自定义
  8. 使用的时候可以
  9. let {name,cname,skill} = shy
  10.  
  11.

原文地址：https://www.cnblogs.com/xue-shuai/p/12179584.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
JavaScript中的es5及es6新增的内容
ES5及ES6es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6es5的新特性严格模式（对应的相反的称为怪异模式）'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5及ES6
ES5的严格模式所谓严格模式，从字面上就很好理解，即更严格的模式，在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。'usestrict'//一般用
es6 export和export default的区别
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用不同点一、在一个文件或模块中，export、import可以有多个，exportdefault仅有一个//model.jsle
学习ES6[尚硅谷二]笔记
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
【JS高级】es6
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特
JavaScript ES6新增
命名修饰符let：不能重复声明变量、块级作用域leta=1;leta=2;//报错const：初始化常量，必须给初始值，否则报错、在同一个作用域内，const定义的常量不能修改其值、块级作用域consta=10a=100//报错，不能重复声明解构constobj={name:'jack'age:18sex:'
ES6
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用
ES6基础知识解构赋值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
es6 正则的扩展
一，RegExp构造函数es5中，RegExp构造函数的参数有两种情况。1，参数是字符串，第二个参数表示正则表达式的修饰符（flag）。2，参数是一个正则表达式，返回一个原有正则表达式的拷贝。es6中，如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而
ES6学习笔记二-字符串的扩展
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符，超过该范围需要用两个双字节表示ES6改进：将码点放入大括号，就能正确解读该字符。转换参考：https://blog.csdn.net/hezh1994/ar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot