ES6新特性学习

Posted 2020-09-29 亦心晗

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