美文网首页编程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"

相关文章

  • 笔记:python语言基础

    一、变量及数据类型 1.1、变量 变量的赋值操作 输出结果: 1.2数据类型(结构) 数据结构:通过某种方式组织在...

  • ES6变量、数据类型、结构

    ECMAScript 6 入门 ES5 只有两种声明变量的方法:var命令和function命令。ES6除了添加l...

  • 《数据类型&&变量》笔记

    数据类型&&变量 数据类型 JavaScript共有六种数据类型(ES6新增Symbol类型的值) 数值(numb...

  • js知识点罗列

    1.数据类型 基本 -- 引用 的区别 2.语法 声明变量 var ES6 let const 变量提...

  • ES6新增了哪些特性?

    ES6新增了哪些特性? const(声明常量),let(声明变量),var(声明变量)全局 map和set数据类型...

  • Unreal4蓝图中的结构体变量0040bate1

    蓝图中的结构体变量 利用蓝图结构体变量,可将包含相关信息的不同数据类型一起保存。 结构体是相关联的不同数据类型的合...

  • 郝斌C语言笔记 -- 预备知识

    预备知识 1.数据类型 1.基本数据类型 2.复合数据类型 结构体 枚举 共用体 2.变量 1.什么是变量 变量的...

  • Java语言基础

    Java主类结构基本数据类型变量与常量运算符数据类型转换

  • ES6文集的目录

    基础 变量的解构赋值扩展运算符箭头函数export与import 数据类型 引用数据类型 ES6的数组数组之Arr...

  • 8 结构体

    自定义类型的数据,允许存放不同类型的数据 struct 结构体名{数据类型1 变量1;数据类型2 变量2 ...}...

网友评论

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

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