博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
为vue开发准备的一份es6语法笔记
阅读量:6855 次
发布时间:2019-06-26

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

  hot3.png

结构赋值

1.数组解构赋值

以前我们定义n个变量如下:

var a=1;	var b=2;	var c=3;

es6为我们提供了数组形式的结构赋值,我们可以批量设置:

var a=1;	var b=2;	var c=3;	//同上	var [a,b,c]=[1,2,3]

数组的结构赋值会按照我们的设置顺序把对应色设置到相应位置

我们还可以使用...符号把最后的都设置到一个变量上:

var [a,b,...c]=[1,2,3,4,5,6]	//a=1	//b=2	//c=[3,4,5,6]

2.对象结构赋值

var a=1;	var b=2;	var c=3;	//同上	var {a,b,c}={a:1,b:2,c:3}

后边可以不按照顺序书写,不过我们的变量名只有与后面key同时存在,才会被正确赋值

var {a,b,c}={c:3,a:1}	//a=1	//b 未定义	//c=3

3.函数参数采用结构赋值

函数中同样可以使用数组或者对象的结构赋值获取我们的参数:

function fun([a,b,c]){		alert(a) //1		alert(b) //2		alert(c) //3	}	fun([1,2,3])

对象结构同理:

function fun({a,b,c}){		alert(a) //1		alert(b) //2		alert(c) //3	}	fun({a:1,b:2,c:3})

采用对象结构赋值,我们可以打乱参数顺序:

function fun({a,b,c}){		alert(a) //1		alert(b) //2		alert(c) //3	}	fun({a:1,c:3,b:2})

 

箭头函数

1.传统函数定义和箭头函数对比

//定义方式1	function fun1(arg){		return arg	}	//定义方式2	var fun2=function(arg){	return arg	}		//箭头函数1  最简单方式	var fun3=arg=>arg;		//箭头函数2  复杂	var fun4=(arg1,arg2)=>{return arg1+arg2};

2.回调函数使用箭头函数

function add(callback){		return callback(2)	};		add(arg=>arg) //return 2

 

for of循环

我们以前针对数组循环有for和for in,

针对对象有for in,

var arr=[1,2,3,4];	for(var i=0;i

for of和for in使用基本相同

var objs={a:1,b:2,c:3};	for(var v of objs){		alert(v)	};

 

对象扩展

1.简写设置属性

var el=123;	var obj={		a:1,		el		}	alert(obj.el) //123

当我们设置的属性和要设置的值相同时可以做简写

2.简写创建函数属性

var el=123;	var obj={		a:1,		el,		fun(arg){			alert(arg)		}		}	obj.fun("hel") //hel

等同于下面的写法:

var el=123;	var obj={		a:1,		el,		fun:function(arg){			alert(arg)		}		}	obj.fun("hel") //hel

 

构造函数和类

1.构造函数创建类和class创建类

传统创建一个类:

function Person(name,sex){		this.name=name;		this.sex=sex;		this.showname=function(){			alert(this.name)		}	}	var per1=new Person("小李子","男");	alert(per1.name) //小李子	per1.showname() //小李子

利用class创建:

class Person {	  constructor(name, sex) {		this.name = name;		this.sex = sex;	  }		  showname() {		alert(this.name)	  }	};	var per1=new Person("小李子","男");	alert(per1.name) //小李子	per1.showname() //小李子

在实例化,我们会调用class的constructor函数,这是必须写的约定函数,使用es6语法定义函数同对象的简写方式。

我们实例化的对象的constructor属性返回的都是创建对象的类

alert(per1.constructor)

2.prototype属性

function Person(name,sex){		this.name=name;		this.sex=sex;		this.showname=function(){			alert(this.name)		}	}		Person.prototype.showsex=function(){		alert(this.sex)	}	var per1=new Person("小李子","男");		per1.showsex() //小李子

我们的构造函数会有一个prototype属性,这个属性代表了prototype对象,他的constructor属性也是返回创建他的类

function Person(name,sex){		this.name=name;		this.sex=sex;		this.showname=function(){			alert(this.name)		}	}		Person.prototype.showsex=function(){		alert(this.sex)	}	alert(Person.prototype.constructor)

在创建一个对象,我们调用对象的方法的时候,对象会先寻找构造函数内定义的方法,没有找到的时候就会找prototype下挂载的方法,如果在类里面找到了就不会去寻找prototype下挂载的方法

3.利用prototype继承

function Person(name,sex){		this.name=name;	}		Person.prototype.showtext=function(text){		alert(text)	}		function Ppp(name){		this.name=name;	}	Ppp.prototype=Person.prototype;	var p=new Ppp("小a");		p.showtext("111111111")

我们让类2的prototype等于类1的prototype属性,在类2创建的示例就可以使用类1的方法了

4.call 继承

function Person(name){		this.name=name;		this.showname=function(){			alert(this.name)		}	}		function Ppp(name){		Person.call(this,name)	}	var p=new Ppp("阿里肖")	p.showname();

类2执行了一个call方法,在我们类2实例化的时候,会调用类1方法,this的指向其实指向的是类2,我们类1的this添加的属性和方法自然就添加到了类2的this,那个类2创建的对象就会有类1的方法和属性了,call可以改变指针,从调用方法的位置只想call(thisobj) 的thisobj

5.extends继承

class Person {	  constructor(name, sex) {		this.name = name;		this.sex = sex;	  }		  showname() {		alert(this.name)	  }	};			class Ppp extends Person{			constructor(name, sex, year) {		  super(name, sex); // 调用父类的constructor(x, y)		  this.year = year;	   }	}		var p=new Ppp("xx","男","1991-1-5");	alert(p.year);

super(arg);是必须的,必须调用一次父类的构造方法,不然提示this被定义,说明this是通过父类继承下来的

 

module模块化加载

1.nodejs模块化

我们如果使用过nodejs,就会知道nodejs的模块化是怎么是使用的,那么是什么是模块呢?模块最简单可以理解为一个文件,一个js文件:

引入方式:

var m1=require("./m1.js")	m1.add(1,3)

定义方式:

var m1={		add:function(arg1,arg2){			return arg1+arg2		}	}  	module.exports.m1=m1;

2.es6模块化

单个导出:

export var a = '1';	export var b = '2';	export var c = 3;

批量导出:

var a = '1';	var b = '2';	var c = 3;	export {a,b,c};

批量导出重命名:

var a = '1';	var b = '2';	var c = 3;	export {a as a1,b as b1,c as c1};

批量导入:

import  {a,b,c} from "./m.js";

批量导出和导入的名字必须对应上

批量导入重命名:

import  {a as a1,b as b1,c as c1} from "./m.js";

全部导入并且存放在一个变量内:

import * as objs from './m.js';

使用*关键字

export default匿名导出

避免每次把名字都要对应上:

var a=1;		export default a

导入:

import diy from './m.js';

匿名导出,导入可以随便写一个名字

 

 

转载于:https://my.oschina.net/tbd/blog/1541903

你可能感兴趣的文章
记一次通宵加班
查看>>
iOS7 兼容适配 如何判断版本号
查看>>
Hibernate懒加载解析
查看>>
字符串匹配与KMP算法实现
查看>>
菜鸟学自动化测试(七)----selenium RC 工作原理
查看>>
ACM 要学
查看>>
C++之:模板元编程(二) 模板形参
查看>>
甲骨文宣布正式介入存储业务 超融合架构须基于对业务的深刻了解
查看>>
[华为机试练习题]25.圆桌游戏
查看>>
Android学习笔记(16):绝对布局AbsoluteLayout、常用距离单位
查看>>
[华为机试真题]66.单词搜索
查看>>
[From My Companion]memmem
查看>>
Magento--给EAV模型新增非EAV属性
查看>>
ASP.NET 系统支持数据库访问设计
查看>>
Use OpenVSwitch & bridge & Docker & pipework fast build complicated testing ENV
查看>>
一分钟了解阿里云产品:阿里云免费企业邮箱特点介绍及免费申请过程
查看>>
Linux查找find命令详解
查看>>
客户案例—北京优络时代科技有限公司
查看>>
runc 1.0-rc7 发布之际
查看>>
AutoNet-ios (ios 强大好用的网络框架, 加入了新的拦截器概念)
查看>>