ES6變量型檀、數(shù)據(jù)類型、結構

ECMAScript 6 入門

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

新的原始數(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"
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蜗巧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蕾盯,更是在濱河造成了極大的恐慌惧蛹,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異香嗓,居然都是意外死亡迅腔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門靠娱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沧烈,“玉大人,你說我怎么就攤上這事像云⌒咳福” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵迅诬,是天一觀的道長腋逆。 經(jīng)常有香客問我,道長侈贷,這世上最難降的妖魔是什么惩歉? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮俏蛮,結果婚禮上撑蚌,老公的妹妹穿的比我還像新娘。我一直安慰自己搏屑,他們只是感情好争涌,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辣恋,像睡著了一般亮垫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伟骨,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天包警,我揣著相機與錄音,去河邊找鬼底靠。 笑死,一個胖子當著我的面吹牛特铝,可吹牛的內容都是我干的暑中。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼鲫剿,長吁一口氣:“原來是場噩夢啊……” “哼鳄逾!你這毒婦竟也來了?” 一聲冷哼從身側響起灵莲,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤雕凹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體枚抵,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡线欲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了汽摹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片李丰。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖逼泣,靈堂內的尸體忽然破棺而出趴泌,到底是詐尸還是另有隱情,我是刑警寧澤拉庶,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布嗜憔,位于F島的核電站,受9級特大地震影響氏仗,放射性物質發(fā)生泄漏吉捶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一廓鞠、第九天 我趴在偏房一處隱蔽的房頂上張望帚稠。 院中可真熱鬧,春花似錦床佳、人聲如沸滋早。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杆麸。三九已至,卻和暖如春浪感,著一層夾襖步出監(jiān)牢的瞬間昔头,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工影兽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留揭斧,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓峻堰,卻偏偏與公主長得像讹开,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捐名,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內容

  • 一旦万、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,085評論 8 25
  • 你可能已經(jīng)聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個版本镶蹋,它有很...
    奮斗的小廢魚閱讀 766評論 0 16
  • 你可能已經(jīng)聽說過ECMAScript 6(簡稱 ES6)了成艘。ES6 是 Javascript 的下一個版本赏半,它有很...
    米塔塔閱讀 940評論 0 10
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點點福利:阿里云產(chǎn)品券淆两,享受所有官網(wǎng)優(yōu)惠断箫,并抽取幸運大...
    HetfieldJoe閱讀 3,661評論 2 27
  • 曾經(jīng)以為最壞的日子,回頭來看卻是最好的日子琼腔!不要抱怨生活瑰枫,經(jīng)歷將會是最好的恩賜。與其向別人抱怨丹莲,不如努力過好每一天...
    等待未滿于若星閱讀 198評論 0 0