ES6新增常见特性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：声明属性let const

var let const 区别

1.var声明变量会发生变量提升，let、const不会发生变量提升

2.var允许重复声明变量，let不可以

3.const声明变量不可以被改变

二：字符串模板

用反引号创建字符串，其中可用${'变量'}

console.log(`your name is ${name}`);

三：解构赋值对数组和对象的优化

四：箭头函数

与普通函数的区别

1、书写上用=>代替了function

2、普通函数的this指向window 而ES6箭头函数里面的this指向定义时的那个对象而不是运行时的那个对象

//普通函数

var test = function(x){

return x+2;

}

使用箭头函数：

var test = x=>x+2;

五：新增了class

ES6中添加了对类的支持，引入了class关键字

以前编写一个构造函数（类）

function Pad(color){

this.color = color;

}

现在的写法跟Java更接近了

class Iphone{

constructor(color, size){

this.color = color;

this.size = size;

}

playgame(){

//.............

}

toString(){

return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;

}

}

我们定义了一个类，名字叫Iphone

通过类生成一个实例：

var iphone = new Iphone("白色", 5);

其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用

不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。

要注意的是，使用了class来定义类，必须先定义再使用

六：ES6中的set方法

一般用于数组去重

var arr = [1,2,3,3,4,5];

var newarr = new Array.from(set arr)

console.log(new arr)//[1,2,3,4,5]

七：promise用来解决异步问题

1、什么是promise?

异步操作的同步代码

2、promise的基本使用

通过new promise创建一个promise对象，里面有一个参数，参数是一个回调函数，回调函数中有2个参数，resolve，reject resolve()当

异步执行成功的时候调用的方法，reject()当异步失败的时候调用的方法。

除此之外promise有一个then方法，当成功的时候执行第一个回调函数，当失败的时候执行第二个回调函数。第二个回调函数也可以通过

promise对象.catch调用

3、Promise.all():当所有的异步代码都执行完毕以后才会执行.then中的操作

4、Promise.race():只要有一个promise执行完毕后就会执行.then操作

如何实现多个异步同步执行

var p1 = new Promise(function(resolve,reject){

　　setTimeout(function(){

　　　　 console.log('1');

　　　　 resolve()

　　},3000)

})

function p2(){

　　 return new Promise(function(resolve,reject){

　　　　setTimeout(function(){

　　　　　　console.log("2");

　　　　　　resolve();

　　　　},2000)

　　　})

}

function p3(){

　　return new Promise(function(resolve,reject){

　　　　setTimeout(function(){

　　　　　　 console.log("3");

　　　　　　 resolve();

　　　　},1000)

　　})

}

function p4(){

　　return new Promise(function(resolve,reject){

　　　　　setTimeout(function(){

　　　　　　　　console.log("4");

　　　　　　　　resolve();

　　　　　　},500)

　　})

}

p1.then(function(){

　　return p2()

})

.then(function(){

　　return p3();

})

.then(function(){

　　return p4();

})

八：ES6新增的Set、Map方法

set:

　　set是ES6提供的一种新的数据结构，类似于数组，但是成员的值是唯一的没有重复的，接受的参数是一个数组方法有：

　　add():添加

　　delete():删除

　　size:长度

　　has():查找

　　clear：清除所有

map：

　　map类似于对象，也是键值对的集合， 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键方法有：

　　set():设置

　　get():获取

　　delete():删除

　　has():查找

　　clear():清除所有

九：for ...of...

for of 和for in区别

for in 可以用来遍历数组，但是会有以下几个问题

　　1.index索引为字符串型数字，不能直接进行几何运算

　　2.遍历顺序有可能不是按照实际数组的内部顺序

　　3.使用for in会遍历数组所有的可枚举属性，例如下面例子上的原型方法method和name属性都会被遍历出来

Array.prototype.method  = function(){

    console.log(this.length)

}

var myArray = [1,2,3,4,5]

myArray.name = "数组"

  for (var key in myArray) {

            console.log(key)

        }

输出结果：