ES6新特性学习
1.字符串模板
在ES6中允许使用反 ` 来创建字符串,这种方法创建的字符串里面可以包含由美元符号$加花括号包裹的变量${vraible}。
例:var name = "小明"; console.log(`my name is ${name}`);//my name is 小明
2.let与const关键字
可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。let 定义的变量不会被变量提升。const用来定义常量,即无法被更改值的变量。
变量提升:在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部;不在函数内即在全局作用域的最顶部。这样就会引起一些误解。例如:
console.log(a); // undefined var a = 'hello'; # 上面的代码相当于 var a; console.log(a); a = 'hello'; # 而 let 就不会被变量提升 console.log(a); // a is not defined let a = 'hello';
3.for of值遍历
for in循环用来遍历数组,类数组或对象,ES6中新引入的for of循环功能相似。不同的是每次循环它提供的不是序号而是值。
(此功能google traceur并未实现,所以无法模拟调试,下面有些功能也是如此)
例:var myArry = ['hello1','hello2','hello3']; for(v of myArry){ console.log(v);//hello1,hello2,hello3; }
4.箭头操作符
在ES6中新增箭头操作符=>,它简化了函数的书写。操作符左边为输入的参数,右边是进行的操作以及返回的值。
我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。
例:var array = [1, 2, 3]; //传统写法 arry.forEach(function(v,i,a){ console.log(v); }); //ES6 array.forEach(v=>console.log(v));
5.类的支持
ES6中添加了对类的支持,引入了class关键字。在提供原生的class支持之后。对象的创建,就更加直观了。并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
6.解构
自动解析数组或对象中的值,简化数组和对象中信息的提取。比如一个函数要返回多个值,我们通常是返回一个对象,将每个值作为对象的属性返回。
但是在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组的值会自动被解析到对应接收该值的变量中。
例:var [x,y]=getVal(),//函数返回值的解构 [name,,age]=['wayou','male','secrect'];//数组解构 function getVal() { return [ 1, 2 ] } console.log('x:'+x+', y:'+y);//输出:x:1, y:2 console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect
7.默认参数值、不定参数、拓展参数
默认参数ES6中定义参数的时候可以指定默认值了,不用像以前那样通过逻辑或操作符来达到目的了
例:function myName(name){ //传统制定默认参数的方法 var name=name||'xiaoming'; console.log("my Name is' +name); } //ES6的方式 function myName2(name=>'xiaoming'){ console.log('my Name is ${name}'); } myName();//输出xiaoming myName2();//输出xiaoming; myName2('jack');//输出jack
不定参数:不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。...x代表了所有传入add函数的参数。
例://将所有的参数相加的函数 function add(...x){ return x.reduce((m,n)=>m+n); } //传递任意个参数 console.log(add(1,2,3));//输出:6 console.log(add(1,2,3,4,5));//输出:15
拓展参数:拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
例:var people=['Wayou','John','Sherlock']; //sayHello函数本来接收三个单独的参数人妖,人二和人三 function sayHello(people1,people2,people3){ console.log(`Hello ${people1},${people2},${people3}`); } //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数 sayHello(...people);//输出:Hello Wayou,John,Sherlock //而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法 sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock