美文网首页编程Web前端之路让前端飞
ES6变量、数据类型、结构

ES6变量、数据类型、结构

作者: 大前端之路 | 来源:发表于2017-05-04 15:28 被阅读96次

    ECMAScript 6 入门

    ES5 只有两种声明变量的方法:var命令和function命令。
    ES6除了添加let和const、命令import命令和class命令。所以,ES6 一共有6种声明变量的方法。

    ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

    Symbol说明
    <a href="https://my.oschina.net/u/2903254/blog/818796">ES6 的 Symbol 类型及使用案例</a>

    let、const、块级作用域、TDZ

    const声明一个只读的常量。一旦声明,常量的值就不能改变。

    值传递和值引用的区别

    本质:并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值)=值传递,值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组)=值引用,变量指向的内存地址,保存的只是一个指针

    const a1="1";
    a1="2";//报错
    const foo = {};
    
    // 为 foo 添加一个属性,可以成功
    foo.prop = 123;
    foo.prop // 123
    
    // 将 foo 指向另一个对象,就会报错
    foo = {}; // TypeError: "foo" is read-only
    

    let只在代码块内有效,不存在变量提升
    TDZ暂时性死区

    if (true) {
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp; // TDZ结束
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }
    

    ES5 只有全局作用域和函数作用域let实际上为 JavaScript 新增了块级作用域。
    块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

    // IIFE 写法
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }
    

    变量的解构赋值

    //嵌套数组解构
    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3
    
    //对象的结构
    var { foo, bar } = { foo: "lorem", bar: "ipsum" };
        console.log(foo);
        // "lorem"
        console.log(bar);
        // "ipsum"
    
    import {Link} from 'react-router';
    
    //解构的实际应用
    //1、解放var foo = config.foo || theDefaultFoo;
    jQuery.ajax = function (url, {
          async = true,
          beforeSend = noop,
          cache = true,
          complete = noop,
          crossDomain = false,
          global = true,
          // ... 更多配置
        }) {
          // ... do stuff
        };
    //如此一来,我们可以避免对配置对象的每个属性都重复var foo = config.foo || theDefaultFoo;这样的操作。
    
    2、与ES6迭代器协议协同使用
        var map = new Map();
        map.set(window, "the global");
        map.set(document, "the document");
        for (var [key, value] of map) {
          console.log(key + " is " + value);
        }
        // "[object Window] is the global"
        // "[object HTMLDocument] is the document"
    //只遍历键:
     for (var [key] of map) {
          // ...
        }
    //只遍历值:
    for (var [,value] of map) {
          // ...
        }
    
    //3、多重返回值
    function returnMultipleValues() {
          return [1, 2];
        }
        var [foo, bar] = returnMultipleValues();
    //4、使用解构导入部分CommonJS模块
    //const { SourceMapConsumer, SourceNode } = require("source-map");
    

    class

    基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

    //定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    
    Paste_Image.png
    function Super() {}
     
    function Sub() {}
    Sub.prototype = new Super();
    Sub.prototype.constructor = Sub;
     
    var sub = new Sub();
     
    Sub.prototype.constructor === Sub; // ② true
    sub.constructor === Sub; // ④ true
    sub.__proto__ === Sub.prototype; // ⑤ true
    Sub.prototype.__proto__ == Super.prototype; // ⑦ true
    

    ES5中这种最简单的继承,实质上就是将子类的原型设置为父类的实例。

    Paste_Image.png
    class Super {}
     
    class Sub extends Super {}
     
    var sub = new Sub();
     
    Sub.prototype.constructor === Sub; // ② true
    sub.constructor === Sub; // ④ true
    sub.__proto__ === Sub.prototype; // ⑤ true
    Sub.__proto__ === Super; // ⑥ true
    Sub.prototype.__proto__ === Super.prototype; // ⑦ true
    

    所以
    ES6和ES5的继承是一模一样的,只是多了class 和extends ,ES6的子类和父类,子类原型和父类原型,通过proto 连接。

    Symbol

    新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
    应用:
    1、<a href="http://es6.ruanyifeng.com/#docs/symbol#实例:消除魔术字符串">实例:消除魔术字符串</a>
    2、隐藏内部属性

    Set和Map数据结构

    // 去除数组的重复成员
    [...new Set(array)]
    
    const m = new Map();
    const o = {p: 'Hello World'};
    m.set(o, 'content')
    m.get(o) // "content"
    

    相关文章

      网友评论

        本文标题:ES6变量、数据类型、结构

        本文链接:https://www.haomeiwen.com/subject/hdxdtxtx.html