資訊專欄INFORMATION COLUMN
摘要：第二種接口的概念和面向?qū)ο缶幊滔嚓P(guān)接口視為一份合約，在合約里可以定義這份合約的類或接口的行為接口告訴類，它需要實(shí)現(xiàn)一個(gè)叫做的方法，并且該方法接收一個(gè)參數(shù)。
定場(chǎng)詩(shī)
八月中秋白露，路上行人凄涼；
小橋流水桂花香，日夜千思萬(wàn)想。
心中不得寧?kù)o，清早覽罷文章，
十年寒苦在書房，方顯才高志廣。
前言洛伊安妮·格羅納女士所著的《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》第三版于2019年的5月份再次刊印發(fā)行，新版內(nèi)容契合當(dāng)下，實(shí)為JavaScript開發(fā)人員的必備之佳作。有幸重讀此版，與諸君分享共勉。
內(nèi)容提要此章節(jié)為第2章-ECMAScript與TypeScript概述，主要介紹了JS和TS的相關(guān)概念，以及在JS新版本中的新特性：let、解構(gòu)、箭頭函數(shù)等。
2.1 ECMAScript還是JavaScriptECMA是一個(gè)將信息標(biāo)準(zhǔn)化的組織。ECMAScript是一個(gè)語(yǔ)言的標(biāo)準(zhǔn)，而JavaScript是該標(biāo)準(zhǔn)(最流行)的一個(gè)實(shí)現(xiàn)。JS的版本問題或恰如：ECMAScript是JS身份證上的名字(標(biāo)準(zhǔn))，JavaScript是常用的稱呼(常見、親切)。
| 版本 | 簡(jiǎn)稱 | 發(fā)布時(shí)間 | 備注 |
|---|---|---|---|
| ECMAScript5 | ES5 | 2009年12月 | |
| ECMAScript2015 | ES6 | 2015年6月 | ECMAScript規(guī)范委員會(huì)決定每年更新標(biāo)準(zhǔn)一次，js的標(biāo)準(zhǔn)稱呼為：ECMAScript+年份 |
| ECMAScript2016 | ES7 | 2016年6月 | ECMAScript第7個(gè)版本 |
| ECMAScript2017 | ES8 | 2017年6月 | ECMAScript第8個(gè)版本 |
| ES.NEXT | 泛指下一個(gè)版本的ECMAScript |
一定要明白，即便ES2015到ES2017已經(jīng)發(fā)布，但不是所有的瀏覽器都支持新特性。
使用最新版的瀏覽器進(jìn)行體驗(yàn)
使用Babel.js對(duì)使用ECMAScript新語(yǔ)言特性的JavaScript代碼轉(zhuǎn)換成只使用廣泛支持的ES5特性的等價(jià)代碼
Babel.js是一個(gè)JavaScript的轉(zhuǎn)譯器，具體使用文檔：官網(wǎng)-傳送門 Babel.js中文網(wǎng)2.2 ES6+的新功能 let和const定義變量
不存在變量提升
console.log(a) // ReferenceError: Cannot access "a" before initialization let a = 10
不允許重復(fù)聲明定義變量
let a = 10 let a = 20 // SyntaxError: Identifier "a" has already been declared
變量作用域
> 塊狀作用域 {}
if (true) {
const b = 10
}
console.log(b) // ReferenceError: b is not defined
let和const到底選擇誰(shuí)？
const與let的行為是一樣的，唯一的區(qū)別在于，使用const定義的變量是只讀的，也就是常量。
const保證的其實(shí)并不是變量的值不能改動(dòng)，而是變量指向的內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。擴(kuò)展：基本類型值和引用類型值
每一個(gè)變量都指向了一個(gè)內(nèi)存地址。
基本類型值：指向了一個(gè)內(nèi)存地址，變量的值就存儲(chǔ)在改內(nèi)存內(nèi)置中。
引用類型值：指向了一個(gè)內(nèi)存地址，該內(nèi)存地址中存儲(chǔ)的是一個(gè)指針，一個(gè)指向?qū)嶋H數(shù)據(jù)的指針。
const保證的是這個(gè)指針是固定的，總是指向另一個(gè)固定地址；但實(shí)際上指針指向的數(shù)據(jù)結(jié)構(gòu)是否可變，則不能控制。模板字面量
模板字面量語(yǔ)法``提供了很大的幫助，支持JS書寫時(shí)換行，可定義多行字符串；使用${}插入變量的值。
let person = {
name: "王二狗",
age: 18
}
let str = `給你介紹個(gè)人：
這個(gè)人的名字是${person.name}
`
console.log(str)
箭頭函數(shù)
箭頭函數(shù) () => {} 簡(jiǎn)化了函數(shù)語(yǔ)法
let f = () => {
console.log("我是箭頭函數(shù)....")
}
f()
// 簡(jiǎn)化return關(guān)鍵字
let sum = (a, b) => a+b
sum(1, 2)
函數(shù)參數(shù)默認(rèn)值
支持定義函數(shù)參數(shù)的默認(rèn)值
function sum (x = 1, y = 2, z = 3) {
return x + y + z
}
聲明展開與剩余參數(shù)
展開運(yùn)算符... 將對(duì)象或數(shù)組展開為一層，亦可當(dāng)做剩余參數(shù)
let p = {
name: "人",
age: 20,
sex: "男"
}
let wangErGou = {
...p,
name: "王二狗"
}
console.log(wangErGou)
// 剩余參數(shù)
function sum (x, y, ...a) {
return x * y * a.length
}
sum(1, 2, 2, "abc", true) // 6 等同于a是數(shù)組[2, "abc", true]
解構(gòu)
數(shù)組與對(duì)象解構(gòu)
let [x, y] = [10, 20]
console.log(x, y) // 10, 20
let {age, name} = {
name: "李四",
age: 20
}
console.log(name, age) // 李四, 20
數(shù)組解構(gòu)中許注意順序，對(duì)象解構(gòu)中無(wú)需注意順序；解構(gòu)中無(wú)對(duì)應(yīng)的值，則改值為undefined
解構(gòu)應(yīng)用
交換變量值
let x = 10 let y = 20 [y, x] = [x, y]
屬性簡(jiǎn)寫
let x = 10
let y = 10
let obj = {x, y} // 相當(dāng)于 {x: x, y: y}
簡(jiǎn)寫方法名
對(duì)象中的方法名可簡(jiǎn)寫
let obj = {
name: "王二狗",
print () {
console.log(this.name)
}
}
使用類進(jìn)行面向?qū)ο缶幊?/b>
定義
class Book {
constructor (title, author, isbn) {
this.title = title
this.author = author
this.isbn = isbn
}
printIsbn () {
console.log(this.isbn)
}
}
let book = new Book("郭德綱相聲選", "郭德綱", "00111011")
book.printIsbn()
繼承
class ITBook extends Book {
constructor (title, author, isbn, technology) {
// 代表調(diào)用父類構(gòu)造函數(shù)
super(title, author, isbn)
this.technology = technology
}
printTechnology () {
console.log(this.technology)
}
}
let jsBook = new ITBook("JS數(shù)據(jù)結(jié)構(gòu)與算法", "Groner", "123456789", "JavaScript")
jsBook.printIsbn()
jsBook.printTechnology()
乘方運(yùn)算符
let r = 2 let area = Math.PI * r ** 2 console.log(area)模塊
CommonJS規(guī)范是服務(wù)器端模塊化開發(fā)規(guī)范，使用require方法加載；
AMD(Asynchronous Module Definition) 異步模塊定義，RequireJS是AMD最流行的實(shí)現(xiàn)，是瀏覽器端模塊化開發(fā)規(guī)范；
CMD(Common Module Definition) 通用模塊定義，SeaJS是CMD的流行實(shí)現(xiàn)，是瀏覽器端模塊化開發(fā)規(guī)范
ES6模塊化開發(fā)
export 導(dǎo)出模塊；import 導(dǎo)入模塊
// moduleA.js export const moduleA = "moduleA"
// html中引入，注意type="module"2.3 介紹TypeScript
TypeScript是一個(gè)開源的、漸進(jìn)式包含類型的JavaScript超集，由微軟創(chuàng)建并維護(hù)。目的是讓開發(fā)者增強(qiáng)JavaScript的能力并使應(yīng)用的規(guī)模擴(kuò)展變得更容易。
TS在JavaScript中提供類型支持可以實(shí)現(xiàn)靜態(tài)檢查，從而更容易地重構(gòu)代碼和尋找BUG。最后，TypeScript為被編譯為簡(jiǎn)單的JavaScript代碼。
編寫時(shí)為.ts文件，使用TypeScript對(duì)其進(jìn)行tsc編譯，最終為js文件
下載TypeScript
npm i -g typescript
創(chuàng)建.ts文件，寫入內(nèi)容
// demo.ts let a = "初始化為字符串內(nèi)容" a = 10 console.log(a)
編譯ts文件
tsc demo.ts
此處回生成demo.js文件，同時(shí)控制臺(tái)報(bào)警告信息：error TS2322: Type "10" is not assignable to type "string". 說明TS對(duì)變量類型進(jìn)行了校驗(yàn)，但并未阻止編譯器生成最終的js代碼。TS類型推斷
// 定義變量，并約束變量類型 let age: number = 20 let flag: Boolean = true
TS允許我們給變量設(shè)置一個(gè)類型，但是此種寫法太麻煩。TS提供了便捷的類型推斷機(jī)制，相當(dāng)于在給變量賦初始值時(shí)就約束了變量的類型。
// 上面的代碼改造 let age = 20 // 數(shù)值類型 let flag = true // 布爾值類型
那么，什么時(shí)候需要給變量設(shè)置類型呢？聲明變量，但沒有設(shè)置其初始值的時(shí)候！接口如果沒有給變量設(shè)置類型，那么它的類型會(huì)被自動(dòng)設(shè)置為any，意思為接受任何類型的值。
在TS中，有兩種接口概念：
第一種：給變量設(shè)置類型，是對(duì)一個(gè)對(duì)象必須包含的屬性和方法的描述interface Person {
age: number,
name: string
}
function printName (person: Person) {
console.log(person.name)
}
const john = {
name: "john",
age: 21
}
const mary = {
name: "mary",
age: 20,
phone: "123456"
}
printName(john)
printName(mary)
執(zhí)行tsc編譯，木有任何問題。但是小伙伴可能會(huì)比較奇怪，對(duì)象mary中屬性多了個(gè)phone，但是并未影響代碼的執(zhí)行。第二種：TS接口的概念和面向?qū)ο缶幊滔嚓P(guān)鴨子類型概念：如果它看起來像鴨子，像鴨子一樣游泳，像鴨子一樣叫，那么它一定是一只鴨子！
變量mary的行為與Person接口定義的一樣，那么它就是一個(gè)Person。
接口視為一份合約，在合約里可以定義這份合約的類或接口的行為
interface Comparable {
compareTo (b): number
}
class myObject implements Comparable {
age: number
compareTo(b): number {
if (this.age === b.age) {
return 0
}
return this.age > b.age ? 1 : -1
}
}
let obj = new MyObject()
obj.age = 10
let res = obj.compareTo(20)
console.log(res) // -1
Comparable接口告訴MyObject類，它需要實(shí)現(xiàn)一個(gè)叫做compareTo的方法，并且該方法接收一個(gè)參數(shù)。泛型
對(duì)數(shù)據(jù)結(jié)構(gòu)和算法作用強(qiáng)大的TS特性是泛型這一概念
interface Comparable后記{ compareTo (b: T): number } class MyObject implements Comparable { age: number compareTo(b: MyObject): number { if (this.age === b.age) { return 0 } return this.age > b.age ? 1 : -1 } } let obj = new MyObject() obj.age = 10 let obj2 = new MyObject() obj2.age = 20 let res = obj.compareTo(obj2) console.log(res) // -1
以上就是胡哥今天給大家分享的內(nèi)容，喜歡的小伙伴記得收藏、轉(zhuǎn)發(fā)、點(diǎn)擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個(gè)有技術(shù)，有情懷的胡哥！京東開放平臺(tái)首席前端攻城獅。與你一起聊聊大前端，分享前端系統(tǒng)架構(gòu)，框架實(shí)現(xiàn)原理，最新最高效的技術(shù)實(shí)踐！
長(zhǎng)按掃碼關(guān)注，更帥更漂亮呦！關(guān)注胡哥有話說公眾號(hào)，可與胡哥繼續(xù)深入交流呦！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106694.html
摘要：定場(chǎng)詩(shī)馬瘦毛長(zhǎng)蹄子肥，兒子偷爹不算賊，瞎大爺娶個(gè)瞎大奶奶，老兩口過了多半輩，誰(shuí)也沒看見誰(shuí)前言本章為重讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法第三版的系列文章，主要講述隊(duì)列數(shù)據(jù)結(jié)構(gòu)雙端隊(duì)列數(shù)據(jù)結(jié)構(gòu)以及隊(duì)列相關(guān)應(yīng)用。 定場(chǎng)詩(shī) 馬瘦毛長(zhǎng)蹄子肥，兒子偷爹不算賊，瞎大爺娶個(gè)瞎大奶奶，老兩口過了多半輩，誰(shuí)也沒看見誰(shuí)！ 前言 本章為重讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-第三版》的系列文章，主要講述隊(duì)列數(shù)據(jù)結(jié)構(gòu)、...
摘要：定場(chǎng)詩(shī)守法朝朝憂悶，強(qiáng)梁夜夜歡歌損人利己騎馬騾，正值公平挨餓修橋補(bǔ)路瞎眼，殺人放火兒多我到西天問我佛，佛說我也沒轍前言讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法第章數(shù)組，本小節(jié)將繼續(xù)為各位小伙伴分享數(shù)組的相關(guān)知識(shí)數(shù)組的新功能。 定場(chǎng)詩(shī) 守法朝朝憂悶，強(qiáng)梁夜夜歡歌； 損人利己騎馬騾，正值公平挨餓； 修橋補(bǔ)路瞎眼，殺人放火兒多； 我到西天問我佛，佛說：我也沒轍！ 前言 讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法...
摘要：此處應(yīng)該有掌聲前言讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法第章數(shù)組，本節(jié)將為各位小伙伴分享數(shù)組的相關(guān)知識(shí)概念創(chuàng)建方式常見方法以及數(shù)組的新功能。數(shù)組數(shù)組是最簡(jiǎn)單的內(nèi)存數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)一系列同一種數(shù)據(jù)類型的值。 定場(chǎng)詩(shī) 大將生來膽氣豪，腰橫秋水雁翎刀。 風(fēng)吹鼉鼓山河動(dòng)，電閃旌旗日月高。 天上麒麟原有種，穴中螻蟻豈能逃。 太平待詔歸來日，朕與先生解戰(zhàn)袍。 此處應(yīng)該有掌聲... 前言 讀《學(xué)習(xí)JavaScrip...
摘要：前言本章為重讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法的系列文章，該章節(jié)主要講述數(shù)據(jù)結(jié)構(gòu)鏈表，以及實(shí)現(xiàn)鏈表的過程和原理。鏈表，是存儲(chǔ)有序的元素集合。鏈表中的元素在內(nèi)存中并不是連續(xù)放置的，每個(gè)元素由一個(gè)存儲(chǔ)自身的元素節(jié)點(diǎn)和一個(gè)指向下一個(gè)元素的引用指針或鏈接組成。 定場(chǎng)詩(shī) 傷情最是晚涼天，憔悴廝人不堪言； 邀酒摧腸三杯醉.尋香驚夢(mèng)五更寒。 釵頭鳳斜卿有淚，荼蘼花了我無(wú)緣； 小樓寂寞新雨月.也難如鉤也難圓。 前言...
摘要：詞法分析對(duì)構(gòu)成源程序的字符流進(jìn)行掃描然后根據(jù)構(gòu)詞規(guī)則識(shí)別單詞也稱單詞符號(hào)或符號(hào)。語(yǔ)義分析是編譯過程的一個(gè)邏輯階段語(yǔ)義分析的任務(wù)是對(duì)結(jié)構(gòu)上正確的源程序進(jìn)行上下文有關(guān)性質(zhì)的審查進(jìn)行類型審查，審查抽象語(yǔ)法樹是否符合該編程語(yǔ)言的規(guī)則。 1. 文章的內(nèi)容和主題 我對(duì)編譯器的深入了解起源于一條推特中的問題：Angular是如何用Angular預(yù)先編譯器（AOT）對(duì)靜態(tài)代碼進(jìn)行解析工作的。在進(jìn)行一些...
閱讀 2915·2021-11-19 09:40
閱讀 3597·2021-10-09 09:43
閱讀 2680·2021-09-22 15:31
閱讀 1732·2021-07-30 15:31
閱讀 786·2019-08-30 15:55
閱讀 3265·2019-08-30 15:54
閱讀 1166·2019-08-30 11:26
閱讀 1914·2019-08-29 13:00
