定场诗
八月中秋白露,路上行人凄凉;
小桥流水桂花香,日夜千思万想。
心中不得宁静,清早览罢文章。
十年寒苦在书房,方显才高志广。
前言
内容提要
此章节为第2章-ECMAScript与TypeScript概述,主要介绍了JS和TS的相关概念,以及在JS新版本中的新特性:let、解构、箭头函数等。
书名:学习JavaScript数据结构与算法(第3版)作者:[巴西]洛伊安妮·格罗纳 译者:吴双 豆瓣评分:8.4 出版社:人民邮电出版社 出版年份:2019-5 页数:308 内容简介:本书首先介绍了JavaScript语言的基础知识(包括ECMAScri。
2.1 ECMAScript还是JavaScript
ECMA是一个将信息标准化的组织。ECMAScript是一个语言的标准,而JavaScript是该标准(最流行)的一个实现。
或恰如:ECMAScript是JS身份证上的名字(标准),JavaScript是常用的称呼(常见、亲切)。
JS的版本问题
版本简称发布时间备注ECMAScript5ES52009年12月ECMAScript2015ES62015年6月ECMAScript规范委员会决定每年更新标准一次,js的标准称呼为:ECMAScript+年份ECMAScript2016ES72016年6月ECMAScript第7个版本ECMAScript2017ES82017年6月ECMAScript第8个版本ES.NEXT泛指下一个版本的ECMAScript
JS版本的兼容性问题
一定要明白,即便ES2015到ES2017已经发布,但不是所有的浏览器都支持新特性。
print('\n'.join(input('请输入多种水果名称:').strip().split()))
使用最新版的浏览器进行体验
书名:数据结构与算法JavaScript描述 作者:[美] Michael McMillan 译者:王群锋 豆瓣评分:6.6 出版社:人民邮电出版社 出版年份:2014-8 页数:216 内容简介:通过本书的学习,读者将能自如地选择最合适的数据结构与算法,。
使用Babel.js对使用ECMAScript新语言特性的JavaScript代码转换成只使用广泛支持的ES5特性的等价代码
Babel.js是一个JavaScript的转译器,具体使用文档:官网-传送门 Babel.js中文网
2.2 ES6+的新功能
let和const定义变量
不存在变量提升
console.log(a) // ReferenceError: Cannot access 'a' before initializationlet a = 10
链接:https://pan.baidu.com/s/1FBGOD91bW1MgKt5btvx2VA 密码:kus0 书名:学习JavaScript数据结构与算法(第3版)作者:[巴西]洛伊安妮·格罗纳 译者:吴双 豆瓣评分:8.4 出版社:人民邮电出版社 出版年份:
不允许重复
变量作用域
块状作用域 {}
if (true) { const b = 10}console.log(b) // ReferenceError: b is not defined
let和const到底选择谁?
const与let的行为是一样的,唯一的区别在于,使用const定义的变量是只读的,也就是常量。
const保证的其实并不是变量的值不能改动,而是变量指向的内存地址所保存的数据不得改动。
扩展:基本类型值和引用类型值
每一个变量都指向了一个内存地址。
基本类型值:指向了一个内存地址,变量的值就存储在改内存内置中。
引用类型值:指向了一个内存地址,该内存地址中存储的是一个指针,一个指向实际数据的指针。
const保证的是这个指针是固定的,总是指向另一个固定地址;但实际上指针指向的数据结构是否可变,则不能控制。
模板字面量
模板字面量语法``提供了很大的帮助,支持JS书写时换行,可定义多行字符串;使用${}插入变量的值。
let person = { name: '王二狗',age: 18}let str = `给你介绍个人:这个人的名字是${person.name}`console.log(str)
箭头函数
箭头函数 () => {} 简化了函数语法
函数参数默认值
支持定义函数参数的默认值
展开运算符... 将对象或数组展开为一层,亦可当做剩余参数
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,20let {age,name} = { name: '李四',age: 20}console.log(name,age) // 李四,20
数组解构中许注意顺序,对象解构中无需注意顺序;解构中无对应的值,则改值为undefined
解构应用
交换变量值
let x = 10let y = 20[y,x] = [x,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 = 2let area = Math.PI * r ** 2console.log(area)
模块
CommonJS规范是服务器端模块化开发规范,使用require方法加载;
AMD(Asynchronous Module Definition) 异步模块定义,RequireJS是AMD最流行的实现,是浏览器端模块化开发规范;
CMD(Common Module Definition) 通用模块定义,SeaJS是CMD的流行实现,是浏览器端模块化开发规范
ES6模块化开发
export 导出模块;import 导入模块
/ moduleA.jsexport const moduleA = 'moduleA'// html中引入,注意type="module"<script type="module"> import { moduleA } from './moduleA.js' console.log(moduleA)</script>
2.3 介绍TypeScript
TypeScript是一个开源的、渐进式包含类型的JavaScript超集,由微软创建并维护。目的是让开发者增强JavaScript的能力并使应用的规模扩展变得更容易。
TS在JavaScript中提供类型支持可以实现静态检查,从而更容易地重构代码和寻找BUG。最后,TypeScript为被编译为简单的JavaScript代码。
编写时为.ts文件,使用TypeScript对其进行tsc编译,最终为js文件
链接: https://pan.baidu.com/s/1qVjMRp_K-qR33b2OSpBqaA 提取码: 9gpf 书名:学习JavaScript数据结构与算法(第2版)作者:[巴西] Loiane Groner 译者:邓 钢 豆瓣评分:7.3 出版社:人民邮电出版社 出版年份:2。
下载TypeScript
npm i -g typescript
创建.ts文件,写入内容
/ demo.tslet a = '初始化为字符串内容'a = 10console.log(a)
编译ts文件
tsc demo.ts
TS类型推断
/ 定义变量,并约束变量类型let age: number = 20let flag: Boolean = true
TS允许我们给变量设置一个类型,但是此种写法太麻烦。TS提供了便捷的类型推断机制,相当于在给变量赋初始值时就约束了变量的类型。
/ 上面的代码改造let age = 20 // 数值类型let flag = true // 布尔值类型
那么,什么时候需要给变量设置类型呢?
如果没有给变量设置类型,那么它的类型会被自动设置为any,意思为接受任何类型的值。
接口
在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)
执行tsc编译,木有任何问题。但是小伙伴可能会比较奇怪,对象mary中属性多了个phone,但是并未影响代码的执行。
鸭子类型概念:如果它看起来像鸭子,像鸭子一样游泳,像鸭子一样叫,那么它一定是一只鸭子!
变量mary的行为与Person接口定义的一样,那么它就是一个Person。
第二种: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 = 10let res = obj.compareTo(20)console.log(res) // -1
《Javascript 高级程序设计》:书中涉及的概念基本涵盖了js的大部分内容,包括作用域链、js数据类型、OOP对象在js中的实现、闭包、BOM和DOM模型、对变态IE的系列兼容的解决方案、事件流、还有xml、jason、E4X这些数据格式与js。
Comparable接口告诉MyObject类,它需要实现一个叫做compareTo的方法,并且该方法接收一个参数。
泛型
对数据结构和算法作用强大的TS特性是泛型这一概念
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 = 10let obj2 = new MyObject()obj2.age = 20let res = obj.compareTo(obj2)console.log(res) // -1
后记
胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!
长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
胡哥有话说