ES6新特性整理

let和const命令

  • var:声明变量,更多的是全局作用域,存在变量提升
  • let:声明变量,存在于块级作用域,不会变量提升(如适用于for循环中做计数器)
  • const:声明常量,只在声明所在的块级作用域内有效,const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动

变量的解构赋值

ES6按照模式匹配,从** 数组 对象 **中按照属性名称提取值,对变量进行赋值。

  • 数组的解构:
    let [x, y] = [1, 2, 3];
    x // 1
    y // 2

    • 事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值,如Set集合:
      let [x, y, z] = new Set(['a', 'b', 'c']);
      x // "a"

    • 解构赋值允许指定默认值:
      let [foo = true] = [];
      foo // true

      let [x, y = 'b'] = ['a']; // x='a', y='b'
      let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' 
      
    • 如果解构不成功,变量的值就等于undefined:
      let [foo] = [];
      let [bar, foo] = [1];
      foo//undefined

  • 对象的解构赋值
    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    区别:

  1. 数组的元素是按次序排列的,变量的取值由它的位置决定;
  2. 对象的属性没有次序,变量必须与属性同名,才能取到正确的值
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined
- 对象的解构赋值的内部机制:先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
      let obj = { first: 'hello', last: 'world' };
      let { first: f, last: l } = obj;
      f // 'hello'
      l // 'world'

  > 上面代码中,first和last是匹配的模式,f和l才是变量。真正被赋值的是变量f和l,而不是模式first和last。
- 对象的解构也可以指定默认值 (** 默认值生效的条件是,对象的属性值严格等于undefined **)
      var {x = 3} = {};
      x // 3

      var {x, y = 5} = {x: 1};
      x // 1
      y // 5 
      
      // 属性值为undefined
      var {x = 3} = {x: undefined};
      x // 3

      var {x = 3} = {x: null};
      x // null
  • 字符串的解构赋值

    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o" 
    
  • 数值和布尔值的解构赋值

    解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

  • 函数参数的解构赋值
    function add([x, y]){
    return x + y;
    }

    add([1, 2]); // 3 
    
  • 用途

    • (1)交换变量的值
      let x = 1;
      let y = 2;

      [x, y] = [y, x]; 
      
    • (2)从函数返回多个值
      // 返回一个数组
      function example() {
      return [1, 2, 3];
      }
      let [a, b, c] = example();

    • (3)函数参数的定义:
      // 参数是一组有次序的值
      function f([x, y, z]) { ... }
      f([1, 2, 3]);

      // 参数是一组无次序的值
      function f({x, y, z}) { ... }
      f({z: 3, y: 2, x: 1});
      
    • (4)提取JSON数据:
      let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
      };

      let { id, status, data: number } = jsonData;
      
      console.log(id, status, number);
      // 42, "OK", [867, 5309] 
      
    • (5)函数参数的默认值

    • (6)遍历Map结构
      var map = new Map();
      map.set('first', 'hello');
      map.set('second', 'world');

      for (let [key, value] of map) {
        console.log(key + " is " + value);
      }
      // first is hello
      // second is world
      
      // 获取键名
      for (let [key] of map) {
        // ...
      }
      
      // 获取键值
      for (let [,value] of map) {
        // ...
      } 
      
    • (7)输入模块的指定方法

      加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
      const { SourceMapConsumer, SourceNode } = require("source-map");

字符串的扩展

Paste_Image.png
  • 模板字符串
    是增强版的字符串,用反引号()标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 // 普通字符串In JavaScript '\n' is a line-feed.`

    // 多行字符串
    `In JavaScript this is
     not legal.` 
    
     // 字符串中嵌入变量
    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`
    

数值的扩展

Paste_Image.png
  • 二进制和八进制
    ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

    0b111110111 === 503 // true
    0o767 === 503 // true 
    
  • 指数运算符
    ES2016 新增了一个指数运算符(**)

    2 ** 2 // 4
    2 ** 3 // 8
    

数组的扩展

Paste_Image.png
  • Array.from
    Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
    let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
    };

      // ES5的写法
      var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
      // ES6的写法
      let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
    

函数的扩展

Paste_Image.png
  • 箭头函数
    ES6允许使用“箭头”(=>)定义函数。
    var f = () => 5;
    // 等同于
    var f = function () { return 5 };

        var sum = (num1, num2) => num1 + num2;
        // 等同于
        var sum = function(num1, num2) {
          return num1 + num2;
        };
    
  • rest参数
    形式为“...变量名”。用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
    function add(...values) {
    let sum = 0;
    // valuses数组
    for (var val of values) {
    sum += val;
    }

      return sum;
    }
    
    add(2, 5, 3) // 10
    
  • 扩展运算符** ... **
    扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    console.log(...[1, 2, 3])
    // 1 2 3

    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]
    // [<div>, <div>, <div>]
    

Symbol

ES6为了防止属性名的冲突,引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。

Set和Map数据结构 ###

Paste_Image.png
  • Set
    类似于数组,但是成员的值都是唯一的,没有重复的值。
    // 例一
    var set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]

    // 例二
    var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
    items.size // 5
    
  • Map
    类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
    var m = new Map();
    var o = {p: 'Hello World'};

    m.set(o, 'content')
    m.get(o) // "content"
    
    m.has(o) // true
    m.delete(o) // true
    m.has(o) // false
    

Promise对象

Promise 是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理和更强大。

    var promise = new Promise(function(resolve, reject) {
      // ... some code

      if (/* 异步操作成功 */){
          resolve(value);
      } else {
        reject(error);
      }
    });

Promise还可以做更多的事情,比如,有若干个异步任务,需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务,不用Promise需要写一层一层的嵌套代码。有了Promise,我们只需要简单地写:

 job1.then(job2).then(job3).catch(handleError); 

注意执行顺序:Promise实例新建后立即执行——>然后执行当前脚本所有同步任务——>执行完才会执行then方法指定的回调函。

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield语句,定义不同的内部状态。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator(); 
hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }  

class

Paste_Image.png

ES6定义一个类,如下:

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
}

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}  
  • class继承
    Class之间可以通过extends关键字实现继承:
    class ColorPoint extends Point {
    constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
    }

      toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }
    

模块module

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

  • export default 命令

  • 模块的继承

  • 跨模块常量
    // constants.js 模块
    export const A = 1;
    export const B = 3;
    export const C = 4;

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

推荐阅读更多精彩内容