学一门新的语言、ES6、安装babel、ES6声明变量、新增数据结构

148 阅读4分钟
首先看数据类型、变量(看区别)
第二看运算符
第三看存储类型(看区别)
第四看语句(看区别)
第五看方法(语法区别)
高级部分
类、对象、方法 包
        ES6:类、包、模块
ES6
一个常见的问题是,ECMAScriptJavaScript 到底是什么关系?
    要讲清楚这个问题,需要回顾历史。199611 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 
提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,
规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
    该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,JavaSun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身
也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言
的开放性和中立性。
    ECMAScriptJavaScript 的关系是,前者是后者的规格,后者是前者的一种实现
    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相同,但是作用域是块级(用{}括起来的为一块)
声明常量:用constconst特点:如果是基本数据类型(保存的是缓存),值不变;引用和复合数据类型可改变(保存的是数组)
常量:真实存在,不可改变

变量提升
    `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