ES5 只有兩種聲明變量的方法:var命令和function命令裂七。
ES6除了添加let和const仓坞、命令import命令和class命令扯躺。所以,ES6 一共有6種聲明變量的方法倍啥。
ES6 引入了一種新的原始數(shù)據(jù)類型Symbol澎埠,表示獨一無二的值蒲稳。它是 JavaScript 語言的第七種數(shù)據(jù)類型伍派,前六種是:undefined剩胁、null、布爾值(Boolean)晾腔、字符串(String)灼擂、數(shù)值(Number)觉至、對象(Object)。
Symbol說明
<a >ES6 的 Symbol 類型及使用案例</a>
let峻贮、const月洛、塊級作用域孽锥、TDZ
const聲明一個只讀的常量细层。一旦聲明疫赎,常量的值就不能改變盛撑。
值傳遞和值引用的區(qū)別
本質:并不是變量的值不得改動,而是變量指向的那個內存地址不得改動捧搞。對于簡單類型的數(shù)據(jù)(數(shù)值抵卫、字符串、布爾值)=值傳遞胎撇,值就保存在變量指向的那個內存地址介粘,因此等同于常量。但對于復合類型的數(shù)據(jù)(主要是對象和數(shù)組)=值引用晚树,變量指向的內存地址姻采,保存的只是一個指針
const a1="1";
a1="2";//報錯
const foo = {};
// 為 foo 添加一個屬性,可以成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另一個對象爵憎,就會報錯
foo = {}; // TypeError: "foo" is read-only
let只在代碼塊內有效,不存在變量提升
TDZ暫時性死區(qū)
if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ結束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
ES5 只有全局作用域和函數(shù)作用域let實際上為 JavaScript 新增了塊級作用域婚瓜。
塊級作用域的出現(xiàn),實際上使得獲得廣泛應用的立即執(zhí)行函數(shù)表達式(IIFE)不再必要了刑棵。
// IIFE 寫法
(function () {
var tmp = ...;
...
}());
// 塊級作用域寫法
{
let tmp = ...;
...
}
變量的解構賦值
//嵌套數(shù)組解構
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迭代器協(xié)議協(xié)同使用
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
新的原始數(shù)據(jù)類型Symbol,表示獨一無二的值歪泳。它是 JavaScript 語言的第七種數(shù)據(jù)類型萝勤,前六種是:undefined、null呐伞、布爾值(Boolean)敌卓、字符串(String)、數(shù)值(Number)伶氢、對象(Object)趟径。
應用:
1、<a >實例:消除魔術字符串</a>
2癣防、隱藏內部屬性
Set和Map數(shù)據(jù)結構
// 去除數(shù)組的重復成員
[...new Set(array)]
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"