ES6语法介绍

§1 块级作用域(Block-Scoped Declarations)

说到块级作用域,最普遍的方式是IIFE(immediately invoked function expression),如:

  var a = 2;
  (function IIFE(){
        var a = 3;
        console.log(a);  // 3
  })()
  console.log(a); // 2
let声明( let declaration)

ES6中,我们可以用一对{..}来创建作用域,在{..}中用let声明变量的方式来创建块作用域,如:

  var a = 2;
  {
      let a = 3;
      console.log(a); // 3
  }
  console.log(a); // 2

** let声明切记要在域的顶部,避免过早获取而产生意外的错误。 **

常量声明( const declaration)

所谓常量,是指值初始化之后read-only的变量,常量声明必须explicit initialization

{
   const a = 2;
   console.log(a); // 2
   a = 3; // TypeError
}

常量并不局限于值 value本身,换句话说,value不是被冻结的,如果value比较复杂,如object或者arrayvalue的内容仍然是可以被修改的。

  const arr = [1,2,3];
  arr.push(4);
  console.log(arr); // [1,2,3,4]
  arr = 42; // TypeError!

§2 Spread/Rest 操作符(... operator)

ES6中介绍了一个新的...操作符,是指Spread还是Rest,取决于我们怎么用它。
Spread

  function foo(x, y, z){
      console.log(x, y, z);
  }
  foo(...[1,2,3]); // 1, 2, 3

  var a = [2,3,4];
  var b = [1, ...a, 5];
  console.log(b); // 1, 2, 3, 4, 5 

Rest

  function foo(x, y, ...z){
      console.log(x, y, z);
  }
  foo(...[1,2,3,4,5,6]); // 1, 2, [3,4,5,6]

  function bar(...args){
    console.log(args);
  }
  bar(1,2,3,4,5); // [1,2,3,4,5]

§3 默认参数值(Default Parameter Values)

为一个function参数设置默认值的最普遍的方式是:

  function foo(x, y){
    x = x || 11;
    y + y || 31;
    console.log(x + y);
  }
    foo(); // 42
    foo(5, 6); // 11
    foo(5); // 36
    foo(null, 6); // 17
    foo(undefined, 6); // 17
    foo(0, 42); // 53 <-- Oops, not 42

这种方式存在一点危险,就是当你传入的值为0时,如foo(0, 42),获得的不是我们所期待的值42,而是53
ES6中,可以用以下方式设置默认参数值

  function foo(x = 11,  y = 31){
    console.log(x + y);
  }
    foo(); // 42
    foo(5, 6); // 11
    foo(5); // 36
    foo(null, 6); // 6 'null' coerces to '0'
    foo(undefined, 6); // 17 'undefined' is missing 
    foo(0, 42); // 42

** JavaScript的设计原则:'Undefined' means missing **

§4 解构赋值(Destructuring)

destructuringES6新的语法特征,如果你把它理解成结构化的赋值structured assignment就没有那么多困惑了。

  function foo(){
    return [1,2,3];
  }
  var tmp = foo(),
        a = tmp[0], b = tmp[1]; c = tmp[2];
  console.log(a, b, c); // 1, 2, 3

 function bar(){
    return {
        x: 4,
        y: 5,
        z: 6
    };
  }
  var tmp1 = bar(),
        x= tmp1.x, y= tmp1.y; z= tmp1.z;
  console.log(x, y, z); // 4, 5, 6

通过数组的索引或者对象的属性来赋值被认为是structured assignment
ES6array destructuringobjectdestructuring提供了专用的语法,消除了之前代码片段中tmp这个中间变量的使用,使代码更简洁清晰。

 var [a, b, c] = foo();
 console.log(a, b, c); // 1, 2, 3

 var {x: x, y: y, z: z} = bar();
 console.log(x, y, z); // 4, 5, 6

destructuring只是一般的赋值运算,并不是声明

  var a, b, c, x, y, z;
  [a, b, c] = foo()
  ( {x, y, z} = bar() )
  console.log(a, b, c); // 1, 2, 3
  console.log(x, y, z); // 4, 5, 6

** 如果是 object destructuring,在解构赋值的时没有用到 let/var/const 标识符,要用一对 ()将赋值表达式包起来,因为JavaScript通常会将 {}起始的语句解析为一个块,而不是作为对象 **

§5 对象字面量扩展(Object Literal Extensions)

Concise Properties

你已经很熟悉下面这种声明对象字面量的方式:

  var x = 2, y = 3;
  var o = {
      x: x,
      y: y
  }

但是对于x: x这种写法很冗余,在ES6中,如果定义的属性名称和语法标识符的名称相同,可以简写如下:

  var x = 2, y = 3;
  var o = {
      x,
      y
  }
Concise Methods

The old way:

   var o = {
      x: function(){
        // ..
      },
       y: function(){
        // ..
      }
   }

And as of ES6:

   var o = {
       x() {
          // ..
        } ,
        y() {
          // ..
      }
   }

§6 模板文本(Template Literals)

Old Pre-ES6 way:

  var name = "Kyle";
  var greeting = "Hello " + name + "!";
  console.log(greeting); // "Hello Kyle!"

The new ES6 way:

  var name = `Kyle`;
  var greeting = `Hello ${name}!`;
  console.log(greeting); // "Hello Kyle!"

通过一对反引号来定义字符串表达式,通过${..}来计算表达式,任何有效的表达式都是被允许放在${..}里面。

   function upper(s){
      return s.toUpperCase();
  }
  var who = "reader";
  var text =`A very ${upper( "warm" )} welcometo all of you ${upper( `${who}s` )}!`;
   console.log(text); // A very WARM welcome to all of you READERS

使用反引号还能解决多行字符串的问题。

    var text = `You are very lovely You are very lovely
                You are very smart you are very smart
                You are cute you are cute you are cute`;
    console.log(text);
    // You are very lovely You are very lovely
    // You are very smart you are very smart
    // You are cute you are cute you are cute

§7 Arrow Function

Arrow Function是由参数列表、=>标记符和方法体组成: (..) => {..}

  function foo(x, y){
      return x + y;
  }

  //arrow function
  var foo = (x, y) => x + y ;

如果方法体中只有一个表达式或者没有表达式的情况下,可以省略{ },如果该方法只有一个参数,可以省略 ( )

   var f1 = () => 12;
   var f2 = x => x * 2;
   var f3 = (x, y) => {
        var z = x * 2 + y;
        y++;
        x *= 3;
        return (x + y + z) / 2;
    }
   f1(); // 12
   f2(2); // 4
   f3(1, 2); // 5
    var a = [1,2,3,4,5];
    a = a.map(v => v * 2);
    console.log(a); // [2,4,6,8,10]

§8 for .. in 和 for .. of Loops

    var a = ["a", "b", "c", "d", "e"];
    for(var idx in a){
        console.log(idx);
    }
    // 0 1 2 3 4

    for(var value of a){
        console.log(value);
    }
    // "a" "b" "c" "d" "e"

** for .. in 是对 索引/键 的循环遍历 **
** for .. of 是对 值 的循环遍历 **

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容