首先看数据类型、变量(看区别)
第二看运算符
第三看存储类型(看区别)
第四看语句(看区别)
第五看方法(语法区别)
高级部分
类、对象、方法 包
ES6:类、包、模块
ES6
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript
提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,
规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java
是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身
也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言
的开放性和中立性。
ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现
2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言
的下一个版本。
ES6出现时间为2015年,但由于浏览器不兼容没有广泛流传,但在2016年的时候出现组件化开发,ES6才开始流传
更新方向
JS:事件、兼容、对象、API
ES:内核思想:封装js,ES6中大部分为构造函数封装
主体:面向对象的语法糖(语法规则)
语法一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。
- Stage 0 - Strawman(展示阶段)
- Stage 1 - Proposal(征求意见阶段)
- Stage 2 - Draft(草案阶段)
- Stage 3 - Candidate(候选人阶段)
- Stage 4 - Finished(定案阶段)
在node中安装ES6转码器:npm install --save-dev @babel/core
Babel 的配置文件是`.babelrc`,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
配置文件
{
"presets": [],//语言
"plugins": []//配置文件
}
Babel 提供命令行工具`@babel/cli`,用于命令行转码。(脚手架)
它的安装命令如下。:$ npm install --save-dev @babel/cli
# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s
声明变量:增加了let,用法和var相同,但是作用域是块级(用{}括起来的为一块)
声明常量:用const,
const特点:如果是基本数据类型(保存的是缓存),值不变;引用和复合数据类型可改变(保存的是数组)
常量:真实存在,不可改变
变量提升
`var`命令会发生“变量提升”现象,即变量可以在声明之前使用,值为`undefined`。这种现象多多少少是有些奇怪的,
按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,`let`命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错;
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
暂时性死区
只要块级作用域内存在`let`命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响
在代码块内,使用`let`命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
var、let、const区别:var属于原生JS,let和const属于ES6;功能:var随意定义,let定义变量,const定义常量,(作用域,变量提升,暂时性死区)
数据结构:存储数据的方式
js数据结构类型:数组,对象,方法
ES6新增数据结构:set、map
set:成员值都是唯一的,并且没有重复
set:属性;set:方法:add()、delete()、has()、clear()
ES6有自己的遍历器
- `Set.prototype.keys()`:返回键名的遍历器
- `Set.prototype.values()`:返回键值的遍历器
- `Set.prototype.entries()`:返回键值对的遍历器
- `Set.prototype.forEach()`:使用回调函数遍历每个成员
语法:
for...of
for...each