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 
 





亦心晗
原文地址:https://www.cnblogs.com/wanf/p/7227235.html