js ...运算符_重读《学习JS数据结构与算法-第三版》第二章 ECMAScript概述

定场诗

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

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

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

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

前言

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

内容提要

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

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已经发布,但不是所有的浏览器都支持新特性。

  1. 使用最新版的浏览器进行体验
  2. 使用Babel.js对使用ECMAScript新语言特性的JavaScript代码转换成只使用广泛支持的ES5特性的等价代码

Babel.js是一个JavaScript的转译器,具体使用文档:官网-传送门 Babel.js中文网

2.2 ES6+的新功能

let和const定义变量

  1. 不存在变量提升
console.log(a) // ReferenceError: Cannot access 'a' before initializationlet a = 10
  1. 不允许重复声明定义变量
let a = 10let a = 20 // SyntaxError: Identifier 'a' has already been declared
  1. 变量作用域

块状作用域 {}

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+bsum(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, 20let {age, name} = { name: '李四', age: 20}console.log(name, age) // 李四, 20

数组解构中许注意顺序,对象解构中无需注意顺序;解构中无对应的值,则改值为undefined

解构应用

  1. 交换变量值
let x = 10let y = 20[y, x] = [x, y]
  1. 属性简写
let x = 10let y = 10let 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 = 2let area = Math.PI * r ** 2console.log(area)

模块

  1. CommonJS规范是服务器端模块化开发规范,使用require方法加载;
  2. AMD(Asynchronous Module Definition) 异步模块定义,RequireJS是AMD最流行的实现,是浏览器端模块化开发规范;
  3. CMD(Common Module Definition) 通用模块定义,SeaJS是CMD的流行实现,是浏览器端模块化开发规范

ES6模块化开发

export 导出模块;import 导入模块

// moduleA.jsexport const moduleA = 'moduleA'// html中引入,注意type="module"

2.3 介绍TypeScript

TypeScript是一个开源的、渐进式包含类型的JavaScript超集,由微软创建并维护。目的是让开发者增强JavaScript的能力并使应用的规模扩展变得更容易。

TS在JavaScript中提供类型支持可以实现静态检查,从而更容易地重构代码和寻找BUG。最后,TypeScript为被编译为简单的JavaScript代码。

编写时为.ts文件,使用TypeScript对其进行tsc编译,最终为js文件

下载TypeScript

npm i -g typescript

创建.ts文件,写入内容

// demo.tslet a = '初始化为字符串内容'a = 10console.log(a)

编译ts文件

tsc demo.ts

此处回生成demo.js文件,同时控制台报警告信息:error TS2322: Type '10' is not assignable to type 'string'. 说明TS对变量类型进行了校验,但并未阻止编译器生成最终的js代码。

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

Comparable接口告诉MyObject类,它需要实现一个叫做compareTo的方法,并且该方法接收一个参数。

泛型

对数据结构和算法作用强大的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 = 10let obj2 = new MyObject()obj2.age = 20let res = obj.compareTo(obj2)console.log(res) // -1

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!

长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

ad26d325f78f8a0dc5d2bda6a764c4a9.png

胡哥有话说

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <b><span style="font-size:14px;"></span><span style="font-size:14px;background-color:#FFE500;">【Java面试宝典】</span></b><br /> <span style="font-size:14px;">1、68讲视频课,500道大厂Java常见面试题+100个Java面试技巧与答题公式+10万字核心知识解析+授课老师1对1面试指导+无限次回放</span><br /> <span style="font-size:14px;">2、这门课程基于胡书敏老师8年Java面试经验,调研近百家互联网公司及面试官的问题打造而成,从筛选简历和面试官角度,给出能帮助候选人能面试成功的面试技巧。</span><br /> <span style="font-size:14px;">3、通过学习这门课程,你能系统掌握Java核心、数据库、Java框架、分布式组件、Java简历准备、面试实战技巧等面试必考知识点。</span><br /> <span style="font-size:14px;">4、知识点+项目经验案例,每一个都能做为面试的作品展现。</span><br /> <span style="font-size:14px;">5、本课程已经在线下的培训课程中经过实际检验,老师每次培训结束后,都能帮助同学们运用面试技巧,成功找到更好的工作。</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【超人气讲师】</b></span><br /> <span style="font-size:14px;">胡书敏 | 10年大厂工作经验,8年Java面试官经验,5年线下Java职业培训经验,5年架构师经验</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【报名须知】</b></span><br /> <span style="font-size:14px;">上课模式是什么?</span><br /> <span style="font-size:14px;">课程采取录播模式,课程永久有效,可无限次观看</span><br /> <span style="font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span><br /> <br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><strong>如何开始学习?</strong></span><br /> <span style="font-size:14px;">PC端:报名成功后可以直接进入课程学习</span><br /> <span style="font-size:14px;">移动端:<span style="font-family:Helvetica;font-size:14px;background-color:#FFFFFF;">CSDN 学院APP(注意不是CSDN APP哦)</span></span> </p>
<p> <span style="color:#337FE5;"><strong>【为什么还需要学习C++?】</strong></span> </p> <p style="margin-left:0cm;"> 你是否接触很多语言,但从来没有了解过编程语言的本质? </p> <p style="margin-left:0cm;text-align:start;"> 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? </p> <p style="margin-left:0cm;text-align:start;"> 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹? </p> <p style="margin-left:0cm;text-align:start;">   </p> <p style="margin-left:0cm;text-align:start;"> 那么C++就是你个人能力提升,职业之路进阶的不二之选。 </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p style="margin-left:0cm;"> <strong><span style="color:#337FE5;">【课程特色】</span></strong> </p> <p style="margin-left:0cm;text-align:start;"> 1.课程共19大节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 </p> <p style="margin-left:0cm;text-align:start;"> 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 </p> <p style="margin-left:0cm;text-align:start;"> 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;"><strong>【学完后我将达到什么水平?】</strong></span> </p> <p class="ql-long-24357476"> 1.对C++的各个知识能够熟练配置、开发、部署; </p> <p class="ql-long-24357476"> 2.吊打一切关于C++的笔试面试题; </p> <p class="ql-long-24357476"> 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 </p> <p class="MsoNoSpacing" style="margin-left:18pt;"> <br /> </p> <div> <br /> </div> <p> <br /> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#337FE5;"><strong>【面向人群】</strong></span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">1.希望一站式快速入门的C++初学者;</span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">2.希望快速学习 C++、掌握编程要义、修炼内功的开发者;</span> </p> <p style="margin-left:0cm;text-align:start;"> <span style="color:#222226;font-family:PingFangSC-Regular, "font-size:14px;background-color:#FFFFFF;">3.有志于挑战更高级的开发项目,成为资深开发的工程师。</span> </p> <p style="margin-left:0cm;text-align:start;"> <br /> </p> <p> <br /> </p> <p> <span style="color:#337FE5;"><strong>【课程设计】</strong></span> </p> <p> 本课程包含3大模块 </p> <p> <strong>基础篇</strong><br /> 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 </p> <p> <br /> <strong>进阶篇</strong><br /> 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 </p> <p> <br /> <strong>提升篇:</strong><br /> 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。 </p> <p> <img src="https://img-bss.csdnimg.cn/202007091130239667.png" alt="" /> </p>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页