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 + ')';
}
}

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中这种最简单的继承,实质上就是将子类的原型设置为父类的实例。

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"
网友评论