博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
es6一些基本可以使用的东西
阅读量:5061 次
发布时间:2019-06-12

本文共 3585 字,大约阅读时间需要 11 分钟。

const 定义常量

let 块级变量

用let定义的变量只在块当中起作用,离开变量外界的块(括号)就会被销毁。

模板字面量

用于字符串拼接和写模板,使用 ` (反引号,左上角波浪线),变量使用${} 

1 var a="大帅比"; 2 var b="你呢"; 3 console.log( `my name is ${a},${b}?` );  //my name is 大帅比,你呢? 4  5 var tpl=`
    6
  • 1
  • 7
  • 2
  • 8
  • 3
  • 9
  • 4
  • 10
  • 5
  • 11
` //不用加 \n来换行了

解构赋值

交换值

1 var a=1;2 var b=2;3 [a,b]=[b,a];4 console.log(a,b);  // 2 1

从数组里获得元素

1 var array=[1,2,3,4];2 var [a, ,b]=array;3 console.log(a,b);  // 1 3

参数解构

1 var user={name:"李大白",age:"23",sex:"男"}2 function getUser( {name,age} ){3     return `我叫${name},今年${age}岁。`;4 }5 console.log( getUser(user) );  // 我叫李大白,今年23岁。

返回值的解构

1 function margin(){2    var left=1,right=2,top=3,bottom=4;3    return {left,right,top,bottom}4 }5 var {left,bottom}=margin();6 console.log(left,bottom);   // 1 4

深度匹配

1 function setting(){2     return { display:{color:'red'},keyboard:{layout:'querty'} }3 }4 5 var { display:{color: dis_color },keyboard:{layout: key_layout } }=setting();6 console.log(dis_color,key_layout); // red querty

类和继承

1 class Animal{ 2     constructor(name){   //构造函数 3         this.name=name; 4     } 5     speak(){   //方法 6         console.log(this.name+" makes a noise"); 7     } 8 } 9 var animal=new Animal("dog");10 animal.speak();  //dog makes a noise

如果在es5中,要这么写

1 var Animal=(function(){ 2     function Myconstructor(name){ 3         this.name=name; 4     } 5     Myconstructor.prototype.speak=function(){ 6         console.log(this.name+" makes a noise"); 7     } 8     return Myconstructor; 9 })();10 11 var animal=new Animal("dog");12 animal.speak();   //dog makes a noise

继承

1 class Cat extends Animal{2     speak(){3         super.speak();4     }5 }6 var cat=new Cat("短尾猫");7 cat.speak();    //短尾猫 makes a noise

extends关键字代表继承,super关键字代表父类

箭头函数

箭头函数相当于匿名函数,并且简化了函数定义。()中放参数,没有参数就省略,箭头后面是函数体。

1 var fun1=(x)=>x*x; 2 var fun2=(x,y)=>{ 3     if(x>y){ 4         return true; 5     }else{ 6         return false; 7     } 8 } 9 var set=(name,age)=>( {name:name,age:age} )  //直接返回对象需要加小括号10 11 fun1(4);  //1612 fun2(7,1);  // true13 set("李大白","1000");  // Object {name: "李大白", age: "1000"}

es5中this比较坑,当需要外层的this时有几种方法

用变量存储引用

1 var _this=this;2 $(".btn").click(function(){3     _this.sendData();4 });

直接绑定

1 $(".btn").click(function(){2     this.sendData();3 }.bind(this) );

es6中

1 $(".btn").click( ()=> this.sendData() );  //箭头函数this绑定的是词法作用域,肯定指向外层,哪怕用apply,call也没法改变

遍历for...of

es5的遍历

1 var array=["a","b","c","d"];2 for (var i=0,l=array.length;i

或者

1 array.forEach(function(a){  //不能用break语句跳出循环,且不能在这个封闭的函数内使用return语句2     console.log(a);3 })

es6  for...of

1 for(var a of array ){  //可以使用break,continue,return等语句2     console.log(a);3 }

  for...of和for...in的区别,for...in主要用于获取属性名,如果用来遍历数组,确实可以获得序号,但序号都是字符串形式。

默认参数

1 function abc(x=0,y=2,flag=true){2     console.log(x,y,flag);3 }4 5 abc();  // 0 2 true6 abc(4,0,false); // 4 0 false

剩余参数

用于参数数量不固定的场合,剩余参数前面需要加...

1 function reduce(base,...nums){2     var result=base;3     for(var i of nums){4         result-=i;5     }6     return result;7 }8 reduce(10,5,3); // 2

es5

1 function reduce(base){2     var result=base;3     [].shift.apply(arguments);4     for(var i=0,l=arguments.length;i

展开运算符 ...

1 Math.max(2,100,1,6,43);  //1002 Math.max([2,100,1,6,43]); //NaN3 Math.max(...[2,100,1,6,43]); //100   展开的效果

数组拼接也可以使用...

1 arr1=[2,100,1,6,43];2 arr2=["a","b","c","d"];3 arr3=arr1.concat(arr2);4 arr4=[...arr1,...arr2];5 6 console.log( arr3 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]7 console.log( arr4 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]

 

转载于:https://www.cnblogs.com/grey-zhou/p/6039196.html

你可能感兴趣的文章
10nm Ice Lake处理器值得等待!
查看>>
第十一周编程总结
查看>>
Android平台使用SQLite数据库存储数据
查看>>
JS 日期处理
查看>>
分布式session的几种实现方式
查看>>
今天玩一下python得邮件解析吧,查看邮件内容小儿科,我们下载邮件的附件
查看>>
div+css网页部署到本机和服务器上看到的效果不同
查看>>
Top K 算法详解
查看>>
JavaScript Patterns 2.8 Number Conversions with parseInt()
查看>>
从php到浏览器的缓存机制,不得不看!
查看>>
java正则表达式
查看>>
Google 最新推出数据集搜索
查看>>
Linux及安全实验二:SET-UID程序漏洞实验
查看>>
对象作为函数参数
查看>>
ie6兼容性处理
查看>>
【TDS学习文档2】概念理解
查看>>
北京信息科技大学第十一届程序设计竞赛(重现赛)H
查看>>
母版页的应用
查看>>
/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64/bin/java: No such file or directory
查看>>
iOS系统状态栏动态隐藏问题
查看>>