ES6有这些就够了

你老公掀床帘的瞬间_我的爱再也藏不住
257 阅读3分钟

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

avatar
文章
阅读
粉丝