美文网首页
ES6 新特性

ES6 新特性

作者: 月半女那 | 来源:发表于2018-02-27 22:39 被阅读0次

1.箭头操作符( => )

ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。

例如: let array = [1,2,3];

            array.forEach(element => {

                    console.log(element);

                });

2.类的支持( class )

ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装.现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。

例如:class Animal(){

           constructor(name){

            this.name = name;

          }

        sayName(){console.log('My name is '+this.name);}

       }

3.字符串模板

   字符串模板相对简单易懂些。ES6中允许使用反引号`来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。

例如: var num = 1;

          console.log(`this num is ${num}`);

4.参数默认值,不定参数,拓展参数

默认参数

现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

例如: function sayHello(name){

let name = name||'cc';

cpnsole.log(name);

}

functionsayHello2(name='dude'){

console.log(`Hello${name}`);

}

sayHello();//输出:Hello cc;

sayHello('Wayou');//输出:Hello Wayou

不定参数

   不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名

//将所有参数相加的函数

functionadd(...x){returnx.reduce((m,n)=>m+n);}//传递任意个数的参数console.log(add(1,2,3));//输出:6console.log(add(1,2,3,4,5));//输出:15

拓展参数

拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];

//sayHello函数本来接收三个单独的参数人妖,人二和人三

functionsayHello(people1,people2,people3){console.log(`Hello${people1},${people2},${people3}`);}

//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数sayHello(...people);

//输出:Hello Wayou,John,Sherlock

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法

sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock

5.for of 值遍历

var someArray=["a","b","c"];

for(vofsomeArray){

 console.log(v);//输出 a,b,c

}

6.Promises

Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred对象。当你发起一个异步请求,并绑定了.when(),.done()等事件处理程序时,其实就是在应用promise模式。

//创建promise

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

// 进行一些异步或耗时操作

if(/*如果成功 */){

resolve("Stuff worked!");

}else{

reject(Error("It broke"));

}});

//绑定处理程序

promise.then( function(result){

//promise成功的话会执行这里

console.log(result);

// "Stuff worked!"

},function(err){

//promise失败会执行这里

console.log(err);

// Error: "It broke"

});


相关文章

网友评论

      本文标题:ES6 新特性

      本文链接:https://www.haomeiwen.com/subject/nhkcixtx.html