es6中一些基本的使用方法
es6中一些基本的使用方法
const 定义常量
let 块级变量
用let定义的变量只在块当中起作用,离开变量外界的块(括号)就会被销毁。
模板字面量
用于字符串拼接和写模板,使用 ` (反引号,左上角波浪线),变量使用${}

1 var a="大帅比";
2 var b="你呢";
3 console.log( `my name is ${a},${b}?` ); //my name is 大帅比,你呢?
4
5 var tpl=`<ul class="haha">
6 <li class="active">1</li>
7 <li>2</li>
8 <li>3</li>
9 <li>4</li>
10 <li>5</li>
11 </ul>` //不用加 \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); //16
12 fun2(7,1); // true
13 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<l;i++){
3 var a=array[i];
4 console.log(a);
5 }
或者
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 true
6 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<l;i++){
5 result-=arguments[i];
6 }
7 return result;
8 }
9 reduce(10,5,3); // 2

展开运算符 ...
1 Math.max(2,100,1,6,43); //100
2 Math.max([2,100,1,6,43]); //NaN
3 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"]

es6中一些基本的使用方法的更多相关文章
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES6中函数新增的方式方法
---恢复内容开始--- 绪 言 ES6 大家对JavaScript中的函数都不陌生.今天我就为大家带来ES6中关于函数的一些扩展方式和方法. 1.1函数形参的默认值 1.1.1基本用法 ES6 ...
- es6中reduce()方法和reduceRight()方法
es6中reduce()方法从左往右开始 参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 返回值:函数累计 ...
- ES6中新增let命令使用方法
在ES6中新增了let命令,该命令的用法与var 类似,但是所声明的变量只能在let命令所在的代码块(最接近let 命令的大括号内)中有效果.但是let 又有一些不同于var 的特性. 1.let定 ...
- ES6中的模板字符串使用方法
传统的 JavaScript 语言,输出模板通常是这样写的. $('#result').append( 'There are <b>' + basket.count + '</b&g ...
- Node.js 中使用 ES6 中的 import / export 的方法大全
https://blog.csdn.net/universsky2015/article/details/83754741
- ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- ES6 中 let 和 const 总结
目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块级作 ...
随机推荐
- gradle一个已删除的项目找不到
排查了已有模块未果,到.idea目录中找到了gradle.xml文件,发现其中externalProjectPath指向的正是报错的那个已删除项目,改之,刷gradle,解决.
- python装饰器探究与参数的领取
首先上原文, 现在,假设我们要增强now()函数的功能,比如,在函数调用前后自动打印日志,但又不希望修改now()函数的定义,这种在代码运行期间动态增加功能的方式,称之为"装饰器" ...
- Jenkins gitlab vue,angular,react 自动化构建【原】
大致思路,(本篇主要讲vue ,当然了 angular react 也是一样配置) ,转发请注明原链接,谢谢 :) 1. 服务器上面配置jenkins (安装配置,不介绍) 2.新建item 自由风格 ...
- Https访问
Let's Encrypt是很火的一个免费SSL证书发行项目,自动化发行证书,证书有90天的有效期.适合个人使用或者临时使用,不用再忍受自签发证书不受浏览器信赖的提示.去年VPS侦探曾经说过Let's ...
- Git版本控制的基本命令
安装完了GIT首先要自报家门,否则代码不能提交 git config --global user.name "Your Name" git config --global user ...
- UVA-10954 贪心+优先队列
贪心策略:每次选取最小的两个数相加,将和作为新的数加入序列,再从里面取两个最小的数...直到只剩下一个数.优先队列正好对付这题. PS :以前在学校OJ做过几乎一毛一样的这题 AC代码: #inclu ...
- 聊聊JavaScript-闭包
今天聊聊闭包,网上五花八门的定义和解释很多很多,是不是搞得你很懵逼:每次看闭包,都不同,本来自己懂,看完别人的之后就开始怀疑自己了.在我看来,闭包简单的说就是函数里面套函数,再往大了说就是我函数外面想 ...
- OPENCV 旋转图像算法-汇总
void ImgRotate(cv::Mat imgIn, float theta, cv::Mat& imgOut) { int oldWidth = imgIn.cols; int o ...
- 【天坑】ASP.net WebAPI跨域调用问题
最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...
- 我的Java设计模式-原型模式
"不好意思,我是卧底!哇哈哈哈~"额......自从写了上一篇的观察者模式,就一直沉浸在这个角色当中,无法自拨.昨晚在看<使徒行者2>,有一集说到啊炮仗哥印钞票,我去, ...