es6的全名是ECMAscript 2015
一、var、const、let变量类型的说明
var如果有重复声明的变量名称将会覆盖之前声明的变量值
如:var a=1;
function fun(){
var a=2;
console.log(a); //2
}
console.log(a); //2
const一般声明不会随便被改变的变量,如果试图改变const声明的变量会报错!也可以称之为常量,
如:函数声明等不会常被修改的变量。
let块级作用域,重复声明不会应该之前声明的变量的值。
如:let a=1;
function fun(){
let a=2;
console.log(a);//2
}
console.log(a); //1
二、箭头函数
es5
var fun=function(a,b){
return a+b;
}
或
var fun1=fun(){
console.log("haha"); //haha
}
es6
const fun=(a,b)=>{
return a+b;
}
或
const fun1=()=> console.log("哈哈") ;//haha
备注:重要的一点是箭头函数没有this,如果在箭头函数中使用了this,那么该this一点是指向外层的this。
也正是因为箭头函数没有this,那么也就无从谈起在es6中call/apply/bind来改变this的属性
如:es5
var fun={
id:"1",
getid:function(){
return console.log(this.id); //1
}
}
es6
const fun={
id:"1",
getid:()=>{
return console.log(this.id)//undefined.id
}
}
在es6会默认采用严格模式,所以this也不会自动指向window对象,且箭头函数本身没有this,所以输出的this是undefined
在es6中换种写法,可以这样写:
const fun={
id:"1",
getid:function(){
return setTimeout(()=>{console.log(this.id,'-------')},50);
/*打印出来的是1,因为该箭头函数中的this指向的是getid中的function,如果用const多次声明同一个变量的话会出现该错误。如下:VM93:1 Uncaught SyntaxError: Identifier 'person1' has already been declared
at <anonymous>:1:1*/
}
}
三、模版字符串
let a=1;
let b=2;
let c=`${a}+${b}=${a+b}`;//console.log(c);a+b=3;//模版字符串还支持换行等
四、结构解析
let animal={
type:"bird",
name:"haha"
}
let{type,name}=animal;
console.log(type,name,'------')//“bird”,"haha"
数组也可以类似的解析:
如: let arr=[1,2,3];
let[a,b,c]=arr;
console.log(a,b,c,'-----');
数组通过结构解析是通过序号来一一对应进行解析显示。有序关系
对象是通过对象名来解析,无序的关系。
四、es6中的默认值用法
如:es6:
const fun=(a=0)=>{
console.log(a);//0
}
es5:
function fun(a){
console.log(a || 0);//0
}
五、数组和对象合并。Rest 操作符(...+name)
数组如下:
let a=[1,2,3];
let b=[...a,4,5,6];
console.log(b);//[1,2,3,4,5,6];
对象如下:
let a={
b:1,
c:2
}
let aa={
...a,
d:3,
e:4
}
console.log(aa),{b:1,c:2,d:3,e:4};
类似于es6中object.assign({},a,aa);
类似于es5中的$.extend({},a,aa);
六、es6处理对象数据和函数运算,Rest 操作符(...+name)
函数对象处理:
let preson={
name:"lucy",
sex:"girl",
age:"18"
}
let {name,...oth}=preson;
console.log(oth,'-----');//{sex:"girl,age:"18"}
使用方式:<div {...oth}>{name}</div>
函数运算:
let addnum=(a,b,...num)=>{
return console.log(num.reduce((c,d)=>{c+d})+a+b);//10
}
addnum(1,2,3,4);
es6的运算和对象的处理相对于es5来说比较灵活,多熟悉熟悉 用用就好。
七、对象字面量与类(class)
1、对象字面量
es6 如:
let a=1,b=2;
let ab={
a,
b
}
console.log(ab);//{a:1,b:2}
es5 如:
var ab={
a:1,
b:2
}
console.log(ab);//{a:1,b:2};
在字面量中也可以使用中括号属性。如下:
es6中,中括号作为字面量:
let ab={
['na'+'me']:"haha",
['age']:"18"
}
console.log(ab,'-----');//{name:"haha",age:"18"}
2、类(class)
es6 如:
class component{
constructor(name.sex){ //es6中的构造函数
this.name=name;
this.sex=sex;
static age=20; //等同于component.age=20;
height:180; //等同于在构造函数中添加的属性,相当于this.height=180
}
getname(){
return console.log(this.name);
}
getheight=()=>{
return console.log(this.height);//180
}
}
es5 如;
function person(name,sex){ //es5中的构造函数
this.name=name;
this.sex=name;
}
person.prototype.getname=function(){ //实现person的原型函数
return console.log(this.name);
}
八、继承 extends
es6 如:
class bird extends animal(){
constructor(name,type){
super(type); //这是表示子类继承父类需要在构造函数中加入super,相当与在es5中用call或者是apply
this.name=name;
}
}
es5 继承的call 、apply 如:
function animal(name type){ //父类
this.name=name;
this.type=type;
this.say=function(){
return console.log("hello,i am "+name +"i am" +type,"nice to meet you!");
}
}
function dog(name,type){ //子类 call方式
animal.call(dog,name,type);
}
function cat(name,type){ //子类 apply方式
animal.apply(cat,[name,type]);
}
var dog1=new dog("haha","dog");
dog1.say();//hello,i am haha i am dog,nice to meet you!
var cat1=new cat("hehe","cat");
cat1.say();//hello,i am hehe i am cat,nice to meet you!
关于checkbox选中当前复选框的返回值的写法,方法如下:
function iteratorFactory(i){
var onclick = function(e){
console.log(i)
}
return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox');
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i)
}
该方法的博客出自如下,里面还有一下关于es6的总结,大家也可以看看:
地址:https://blog.csdn.net/qq_24189933/article/details/78655254
以上是总结的几点关于es5 和 es6的基础的知识,希望能对大家有帮助,如有写的有问题的地方也希望大家能够提出来,相互学习,如es5的基础比较扎实的话,es6学起来也是很容易的。