码迷，mamicode.com
首页 > 其他好文 > 详细

ES6的新增特性

时间：2020-01-11 13:23:49      阅读：78      评论：0      收藏：0      [点我收藏+]

标签：elf   test   遍历   define   技巧   data-   export   list   支持   

目录

第一篇、开发环境搭建

 第二篇、三种声明方式

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.

ES6的新增特性

标签：elf   test   遍历   define   技巧   data-   export   list   支持   

原文地址：https://www.cnblogs.com/xue-shuai/p/12179584.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！