JavaScript 笔记1 ES6 新特性 | 解构赋值、模板字符串、Symbol数据类型、Promise、模块化

参考资料：

• https://es6.ruanyifeng.com/#docs/intro
• https://www.bilibili.com/video/BV1uK411H7on

1. ECMAScript

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织目标是评估、开发和认可电信和计算机标准。1994年该组织改名为 Ecma 国际。

ECMAScript 简称 ES，是脚本语言的规范，平时编写的 JavaScript，是 ECMAScript规范的一种实现，ES 新特性指的是 JavaScript 新特性

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言，发展历史如下：
（ECMA-262 是 Ecma国际制定了许多标准中的一个）

ECMA版本	发布日期	新特性
1	1997 年	制定了语言的基本语法
2	1998 年	较小改动
3	1999 年	引入正则、异常处理，格式化输出等，IE浏览器开始支持
4	2007年	未发布
5	2009年	引入严格模式，JSON、扩展对象、数组、原型、字符串、日期方法
6	2015年	模块化，面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等
7	2016年	幂运算符、数组扩展、Async/await 关键字
8	2017年	Async/await 、字符串扩展
9	2018年	对象解构赋值，正则扩展
10	2019年	扩展对象、数组方法

注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大1

TC39 （Technical Committee 39）是推进 ECMAScript 发展的委员会，其会员都是各种公司（主要是浏览器厂商，有苹果、谷歌、微软等）。
TC39 会定期召开会议，会议由会员公司的代表与特邀专家出席

2. ES6

为什么要学习 ES6

• ES6 的版本变动内容最多，具有里程碑意义
• ES6 加入许多新的语法特性，编程实现更简单、高效
• ES6 是前端发展趋势，就业必备技能

ES6与不同浏览器版本的兼容性查询
http://kangax.github.io/compat-table/es6/

3. let 、const

let 是 ES6 新推出的数据类型，let 用于声明变量，若不赋值，则默认为 undefined 类型

1. 变量不能重复声明
2. 块级作用域，相当于局部变量

{
   
   let name = 'uni' 
}
console.log(name)	// 报错, 无法访问

这里包括但不限于 if、else、while、for 、funtion 所包含的 { }

3. 不存在变量提升，不允许在变量声明前就去使用
4. 不影响作用域链，所在作用域的内部函数可以访问到变量

let name = 'uni';
function fn(){
   
   console.log(name); 
}
fn();

const 用于声明常量

1. 在定义时必须赋值初始值
2. 一般常量使用大写
3. 常量的值不能修改
4. 块级作用域

{
   
   const NAME = 'uni' 
}
console.log(NAME)	// 报错

5. 支持对数组类型修改

const users = []
users.puth('uni')

4. 解构赋值

解构赋值：ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值
解构赋值一般分为数组和对象这两种
【例】对数组进行解构赋值

const words = ['a', 'b', 'c']
let [a, b, c] = words
// a = 'a'
// b = 'b'
// c = 'c'

【例】对对象进行解构赋值

const user={
   
   id: 1,
   name: 'uni',
   say: function(){
   
      console.log(`name: ${
     name}, id: ${
     id}`)
   }
}
let {
   id, name, say} = user;
say()

5. 模板字符串

使用 反引号，支持使用 ${} 取值，例：

let name = 'uni'
console.log(`name: ${
     name}`)

6. 对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

let name = 'uni'
let say = function(){
   
   console.log(`name: ${
     uni}`)
}
const uni = {
   name, say}
// 相当于: const uni = {name: name, say: say}
console.log(uni)

7. 箭头函数

ES6 允许使用 =>箭头 定义函数
【例】定义求和函数

let fn = (a, b) => {
    return a + b } 

箭头函数的特性：

1. this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值

【例】直接调用两种定义方式的函数

function getName(){
   
    console.log(this.name)
}
function getName2(){
   
    console.log(this.name); 
}
window.name = 'uni',
const school = {
   
   name: 'UNI' 
}
console.log(getName())
console.log(getName2())

运行结果
uni
uni

例，使用 call 来改变函数的this

getName.call(school)
getName2.call(school)

运行结果
UNI
UNI

2. 不能作为构造实例化对象

【例】箭头函数的错误使用

let Person = (name, age) => {
   
  this.name = name
  this.age = age
}
let uni = new Person('uni', 22)
console.log(uni)		// 报错

3. 不能使用 arguments 变量

let fn = () => {
   
  console.log(arguments);
}

4. 箭头函数可简写

• 当形参只有一个时可省略小括号

简写前

let abs = (a) => {
   
  if(a < 0)
    return -a;
  else 
    return a;
}

简写后

let abs = a => {
   
  if(a < 0)
    return -a;
  else 
    return a;
}

• 省略花括号，当代码只有一条语句时，此时的 return 必须省略，语句执行结果即为函数返回值

// 简写前
let pow = (n) => {
   
   return n * n 
}
// 简写后
let pow2 = n => n * n
console.log(pow(1)

使用场景：

1. 适合与 this 无关的回调，例如定时器，数组的方法等回调
2. 不适合与 this 有关的回调，事件回调

8. 函数参数初始值

ES6 允许给函数参数赋值默认值，经常与解构赋值结合使用
【例】

function connect({
   
  host="127.0.0.1",
  username,
  password,
  port
})
connect({
   username: 'root', password: 'root', port: 3306})

9. REST 参数

ES6 引入 REST 参数，用于获取函数的实参，用于代替 arguments

// ES5 获取实参的方式
function data(){
   
  console.log(arguments);
}
data(1,2,3)

// ES6 使用 rest 参数
function data(...args){
   
   console.log(args) 
}
data(1,2,3)

rest 参数必须要放到参数最后

10. 拓展运算符

ES6 的扩展运算符能将数组转换为逗号分隔的参数序列

const words = ['a', 'b', 'c']

function data(...args){
   
  console.log(args)  
}
data(...words)

11. Symbol 数据类型

11.1 Symbol 类型的特点

ES6 引入了一种新的基本数据类型 （第八种）Symbol，表示独一无二的值，类似于字符串。
Symbol 数据的类型的特点有：

1. Symbol 的值是唯一的，用来解决命名冲突的问题
2. Symbol 值不能与其他数据进行运算
3. Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

11.2 Symbol 类型的基本使用

// 1. 创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1) // Symbol() "symbol"
let s2 = Symbol('uni')
let s3 = Symbol('uni')