定场诗
八月中秋白露，路上行人凄凉；
小桥流水桂花香，日夜千思万想。
心中不得宁静，清早览罢文章，
十年寒苦在书房，方显才高志广。
前言
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行，新版内容契合当下，实为JavaScript开发人员的必备之佳作。有幸重读此版，与诸君分享共勉。
内容提要
此章节为第2章-ECMAScript与TypeScript概述，主要介绍了JS和TS的相关概念，以及在JS新版本中的新特性：let、解构、箭头函数等。
2.1 ECMAScript还是JavaScript
JS的版本问题
JS版本的兼容性问题
一定要明白，即便ES2015到ES2017已经发布，但不是所有的浏览器都支持新特性。
使用最新版的浏览器进行体验
使用Babel.js对使用ECMAScript新语言特性的JavaScript代码转换成只使用广泛支持的ES5特性的等价代码
2.2 ES6+的新功能
let和const定义变量
不存在变量提升
console.log(a) // ReferenceError: Cannot access 'a' before initialization let a = 10不允许重复声明定义变量
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到底选择谁？
const与let的行为是一样的，唯一的区别在于，使用const定义的变量是只读的，也就是常量。
扩展：基本类型值和引用类型值
每一个变量都指向了一个内存地址。
基本类型值：指向了一个内存地址，变量的值就存储在改内存内置中。
引用类型值：指向了一个内存地址，该内存地址中存储的是一个指针，一个指向实际数据的指针。
模板字面量
模板字面量语法``提供了很大的帮助，支持JS书写时换行，可定义多行字符串；使用${}插入变量的值。
let person = {
name: '王二狗',
age: 18
}
let str = `给你介绍个人：
这个人的名字是${person.name}
`
console.log(str)
箭头函数
let f = () => {
console.log('我是箭头函数....')
}
f()
// 简化return关键字
let sum = (a, b) => a+b
sum(1, 2)
函数参数默认值
function sum (x = 1, y = 2, z = 3) {
return x + y + z
}
声明展开与剩余参数
let p = {
name: '人',
age: 20,
sex: '男'
}
let wangErGou = {
...p,
name: '王二狗'
}
console.log(wangErGou)
// 剩余参数
function sum (x, y, ...a) {
return x * y * a.length
}
sum(1, 2, 2, 'abc', true) // 6 等同于a是数组[2, 'abc', true]
解构
let [x, y] = [10, 20]
console.log(x, y) // 10, 20
let {age, name} = {
name: '李四',
age: 20
}
console.log(name, age) // 李四, 20
解构应用
- 交换变量值
let x = 10
let y = 20
[y, x] = [x, y]
- 属性简写
let x = 10
let y = 10
let obj = {x, y} // 相当于 {x: x, y: y}
简写方法名
let obj = {
name: '王二狗',
print () {
console.log(this.name)
}
}
使用类进行面向对象编程
定义
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) {
// 代表调用父类构造函数
super(title, author, isbn)
this.technology = technology
}
printTechnology () {
console.log(this.technology)
}
}
let jsBook = new ITBook('JS数据结构与算法', 'Groner', '123456789', 'JavaScript')
jsBook.printIsbn()
jsBook.printTechnology()
乘方运算符
let r = 2
let area = Math.PI * r ** 2
console.log(area)
模块
- CommonJS规范是服务器端模块化开发规范，使用require方法加载；
- AMD(Asynchronous Module Definition) 异步模块定义，RequireJS是AMD最流行的实现，是浏览器端模块化开发规范；
- CMD(Common Module Definition) 通用模块定义，SeaJS是CMD的流行实现，是浏览器端模块化开发规范
ES6模块化开发
// moduleA.js
export const moduleA = 'moduleA'
// html中引入，注意type="module"
<script type="module">
import { moduleA } from './moduleA.js'
console.log(moduleA)
</script>
2.3 介绍TypeScript
TS在JavaScript中提供类型支持可以实现静态检查，从而更容易地重构代码和寻找BUG。最后，TypeScript为被编译为简单的JavaScript代码。
下载TypeScript
npm i -g typescript
创建.ts文件，写入内容
// demo.ts
let a = '初始化为字符串内容'
a = 10
console.log(a)
编译ts文件
tsc demo.ts
TS类型推断
// 定义变量，并约束变量类型
let age: number = 20
let flag: Boolean = true
// 上面的代码改造
let age = 20 // 数值类型
let flag = true // 布尔值类型
接口
在TS中，有两种接口概念：
第一种：给变量设置类型，是对一个对象必须包含的属性和方法的描述
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)
第二种：TS接口的概念和面向对象编程相关
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
泛型
interface Comparable<T> {
compareTo (b: T): number
}
class MyObject implements Comparable<MyObject> {
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
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得**收藏、转发、点击右下角按钮在看**，推荐给更多小伙伴呦，欢迎多多留言交流...
长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！