重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

八月中秋白露,路上行人凄凉;

小桥流水桂花香,日夜千思万想。

心中不得宁静,清早览罢文章,

十年寒苦在书房,方显才高志广。

前言

洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。

内容提要

此章节为第2章-ECMAScript与TypeScript概述,主要介绍了JS和TS的相关概念,以及在JS新版本中的新特性:let、解构、箭头函数等。

2.1 ECMAScript还是JavaScript

ECMA是一个将信息标准化的组织。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()

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwyzxy.html