八月中秋白露,路上行人凄凉;
小桥流水桂花香,日夜千思万想。
心中不得宁静,清早览罢文章,
十年寒苦在书房,方显才高志广。
前言洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。
内容提要此章节为第2章-ECMAScript与TypeScript概述,主要介绍了JS和TS的相关概念,以及在JS新版本中的新特性:let、解构、箭头函数等。
2.1 ECMAScript还是JavaScriptECMA是一个将信息标准化的组织。ECMAScript是一个语言的标准,而JavaScript是该标准(最流行)的一个实现。
或恰如:ECMAScript是JS身份证上的名字(标准),JavaScript是常用的称呼(常见、亲切)。
JS的版本问题 版本 简称 发布时间 备注ECMAScript5 ES5 2009年12月
ECMAScript2015 ES6 2015年6月 ECMAScript规范委员会决定每年更新标准一次,js的标准称呼为:ECMAScript+年份
ECMAScript2016 ES7 2016年6月 ECMAScript第7个版本
ECMAScript2017 ES8 2017年6月 ECMAScript第8个版本
ES.NEXT 泛指下一个版本的ECMAScript
JS版本的兼容性问题
一定要明白,即便ES2015到ES2017已经发布,但不是所有的浏览器都支持新特性。
使用最新版的浏览器进行体验
使用Babel.js对使用ECMAScript新语言特性的JavaScript代码转换成只使用广泛支持的ES5特性的等价代码
Babel.js是一个JavaScript的转译器,具体使用文档:官网-传送门 Babel.js中文网
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定义的变量是只读的,也就是常量。
const保证的其实并不是变量的值不能改动,而是变量指向的内存地址所保存的数据不得改动。
扩展:基本类型值和引用类型值每一个变量都指向了一个内存地址。
基本类型值:指向了一个内存地址,变量的值就存储在改内存内置中。
引用类型值:指向了一个内存地址,该内存地址中存储的是一个指针,一个指向实际数据的指针。
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数组解构中许注意顺序,对象解构中无需注意顺序;解构中无对应的值,则改值为undefined
解构应用
交换变量值
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()