ES6有这些就够了
1、var和let/const的比较
除了var,在ES6中我们还可以使用let和const来定义变量。let和const定义的变量不会提升。
复制代码
使用var
function f1(){
var x="xiaoqiang"}
console.log(x) //undefined
使用let
console.log(z) // not defined
let z="wangcai"
function f1(){
let x="xiaoqiang"}
console.log(x) // not defined
注意: 1、const定义的变量不可以修改,而且必须初始化。
2、var定义的变量可以修改,如果不初始化会输出undefined,不会报错
3、let和const是块级作用域,函数内部使用let/const定义后,对函数外部无影响。
复制代码
2、箭头函数
通常情况下函数的写法
function f(x){
return x;
}
在ES6中增加了箭头函数的函数写法,如下:
var f=(x)=>{
return x
}
注意: 1、如果箭头函数中只有一个形参,那么()可以不写
2、如果函数体只有一条语句(非return语句),那么{}也可以不写
3、如果有return 语句,把{}和reutrn 都省略了
复制代码
最终写法如下:
var f=x=>x
3、关于数组
1、Array.from
作用:将把类数组对象转成真正的数组。
格式:
格式一:Array.from(类数组对象);
格式二:Arrey.from(类数组对象,function(item.index){
return ;
})
2、Array.of
作用:将一组值转换为数组。与 Array.from 功能相似,可以理解为用来创建数组。
使用Array.of创建数组如下
var arr=Array.of("11","22","33")
conso.log(arr) //["11","22","33"]
3、find和findIndex
find:用于找出第一个符合条件的数组元素。找不到则是 undefined 。
注意,它是不会返回多 个,只找一个,找到了就返回。如果你要把所有的满足条件的数组元素素都找出来,你应该用filter()
findIndex:返回第一个符合条件的数组元素的索引。找不到则是-1;
格式:
arr.find(function(item,index){})
arr.findIndex(function(item,index){})
4、includes
作用:判断元素是否在数组中存在。返回值是 true|false
格式:
arr1.includes(arr2);//判断arr1中是否包含arr2的字符,是返回true否返回false。
5、fill
作用:给数组填充指定值。fill 方法用于空数组的初始化非常方便。已有数据会被覆盖。 fill 方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
格式:
格式一:arr.fill(值)
格式二:arr.fill(值,起点,终点)//包括起点,不包括终点
6、数组的扩展运算符
扩展运算符是三个点(...)。
应用:
1、合并数组,写法:
[...arr1,...arr2,...arr3]
2、将字符串转为数组
[..."hello"]
// [ "h", "e", "l", "l", "o" ]
3、将类数组转成数组
写法:[...类数组]
7、数组解构赋值
在ES6中允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这被称为解构。是对变量的赋值,变量的值是数组或对象。
1、传统写法:
var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
改进写法:let [a, b, c, d] = [1, 2, 3, 4];
2、跳过部分:
let[a,,c]=[1,2,3]
console.log(a) //1
console.log(c) //3
3、设置默认值
let[a,b,c,d=666]=[1,2,3]
console.log(a) //1
console.log(d) //666
4、模板字符串
1、连接变量值和字符串
var name = 'Tiger';
var age = 13;
console.log('My cat is named ' + name + ' and is ' + age + ' years old.');
改进:
const name = 'Tiger';
const age = 13;
console.log(`My cat is named ${name} and is ${age} years old.`);
2、换行
模板字符串可以支持换行并且不需要额外的处理,只需两个 ` :
let text = ( cat
dog
nickelodeon
);
3、模板字符串还支持表达式
格式:${表达式}
class
在ES6之前我们创建对象都是通过创建构造器,然后new构造器的方法,构造器相当于一个类,在ES6中,可以使用class来创建对象了。
1、创建对象
格式:
class 类名{
constructor(参数){
this.属性=参数;
} }
注意:
1、class 是关键字,后面紧跟类名,类名首字母大写,采取的是大驼峰命名法则。类名之后是{}。
2、在{}中,不能直接写语句,只能写方法,方法不需要使用关键字
3、方法和方法之间没有逗号。不是键值对
复制代码
2、使用extends实现继承
格式:
class子类extends父类{
constructor(参数){
super(参数)
this.属性=值
} }
注意:
使用xetends关键字来实现继承,在子类的构造器constructor中,必须要显示调用父类的super方法,如果不调用,则this不可用
复制代码
class NBAPlayer{
constructor(name,age,heigth){
this.name=name;
this.age=age;
this.height=height;
}
say(){
console.log(我是${name},是NBA球员
)
}
}
class MVP extendsNBAPlayer{
constructor(name,age,height,year){
super(name,age,height)
this.year=year;
}
showMVP(){
console.log(我是${this.name},我是${this.year}年MVP
)
}
}
var mvp1=new MVP("库里","30","191",2016);
MVP1.say();
MVP1.showMVP();
//我是库里,是NBA球员
//我是库里,我是2016年MVP