zoukankan      html  css  js  c++  java
  • 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 
     
    
    




    亦心晗
  • 相关阅读:
    【数位dp】Beautiful Numbers @2018acm上海大都会赛J
    【状压dp】Trie 树 @中山纪念中学20170304
    两个给点染色的问题-树上染色与图上染色
    【贪心】经营与开发 @upc_exam_5500
    【二分+拓扑排序】Milking Order @USACO 2018 US Open Contest, Gold/upc_exam_6348
    【并查集】Connectivity @ABC049&ARC065/upcexam6492
    【倍增】T-shirt @2018acm徐州邀请赛 I
    Sparse Coding: Autoencoder Interpretation
    Sparse Coding
    Pooling
  • 原文地址:https://www.cnblogs.com/wanf/p/7227235.html
Copyright © 2011-2022 走看看