Jingcun Yan

笔记 | ES6-11新特性

字数总计：4.3k | 阅读估时：18分钟

https://www.bilibili.com/video/BV1uK411H7on 课程笔记

概述

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

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；

百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看：

http://www.ecma-international.org/publications/standards/Standard.htm

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

为什么学习ES6？

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

ES6

功能概述

1、let 关键字。声明局部变量；

2、const 关键字。声明常量；

3、变量和对象的解构赋值。简化变量声明：；

4、模板字符串。声明自带格式的字符串；

5、简化对象和函数写法。简化对象和函数写法；

6、箭头函数。简化函数写法；

7、ES6中函数参数的默认值。给函数的参数设置默认值；

8、rest参数。拿到实参；

9、扩展运算符。将一个数组转为用逗号分隔的参数序列；

10、Symbol。表示独一无二的值；

11、迭代器。用来遍历集合、数组等；

12、生成器。是一种异步编程解决方案；

13、Promise。非常强大的异步编程的新解决方案；

14、Set集合。类似数组，但元素不重复的集合；

15、Map集合。键值对集合；

16、class类。像java实体类一样声明js类；

17、数值扩展。增加一些数值相关的方法等；

18、对象扩展。增加一些对象相关的方法等；

19、模块化。模块化、组件化；

20、Babel对ES6模块化代码转换。为了适配浏览器，将更新的ES规范转换成ES5规范；

21、ES6模块化引入NPM包。像导入模块一样导入npm包；

let关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明；
块儿级作用域（局部变量），只能在代码块中有效
不存在变量提升；
1. 变量提升：在代码执行之前，函数声明和变量声明会被提前放在内存中，使得我们可以在代码的函数声明之前对函数进行调用，只有声明会被提升，如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined。
不影响作用域链；（向内兼容）

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

// 不允许重复声明；
let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

for (let i = 0; i < items.length; i++) {
  items[i].onclick = function() {
    // 修改当前元素的背景颜色
    // this.style.background = 'pink'; // 写法一：常规写法一般无异常
    items[i].style.background = 'pink'; // 写法二
    // 写法二：需要注意的是for循环内的i必须使用let声明
    // 如果使用var就会报错，因为var是全局变量，
    // 经过循环之后i的值会变成3，items[i]就会下标越界
    // let是局部变量
    // 我们要明白的是当我们点击的时候，这个i是哪个值
    // 使用var相当于是：
    // { var i = 0; }
    // { var i = 1; }
    // { var i = 2; }
    // { var i = 3; }
    // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
    // 而使用let相当于是：
    // { let i = 0; }
    // { let i = 1; }
    // { let i = 2; }
    // { let i = 3; }
    // 由于let声明的是局部变量，每一个保持着原来的值
    // 点击事件调用的时候拿到的是对应的i
  }
}

以后声明变量能用let都用let

const关键字

const 关键字用来声明常量，const 声明有以下特点：

声明必须赋初始值；
标识符一般为大写（习惯）；
不允许重复声明；
值不允许修改；
块儿级作用域（局部变量）；
对数组和常量的修改不算对常量的修改，不会报错
1. const 常量指向的地址没有变

声明对象类型使用 const，非对象类型声明选择 let；

变量和对象的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；

// ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；
// 1、数组的解构赋值
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4;
// 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
  name : "大哥",
  age : 22,
  sex : "男",
  xiaopin : function(){ // 常用
    console.log("我会演小品！");
  }
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用

频繁使用对象方法、数组元素，就可以使用解构赋值形式；

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符（声明和赋值的时候）；
可以使用 ${xxx} 形式引用变量（变量拼接）；

// 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
// 声明
let string = `我也一个字符串哦！`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =
`<ul>
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
</ul>`;
console.log(str);
// 2、可以使用 ${xxx} 形式引用变量
let s = "大哥";
let out = `${s}是我最大的榜样！`;

当遇到字符串与变量拼接的情况使用模板字符串；

简化对象和函数写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "JC";
let change = function(){
	console.log("活着就是为了改变世界！");
}
//创建对象
const school = {
  // 完整写法
  // name:name,
  // change:change
  // 简化写法
  name,
  change,
  // 声明方法的简化
  say(){
    console.log("言行一致！");
  }
}
school.change();
school.say();

以后都用简化的写法

箭头函数

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义

箭头函数的注意点：

如果形参只有一个，则小括号可以省略；
函数体如果只有一条语句，则花括号可以省略，此时return关键字必须省略，函数的返回值为该条语句的执行结果；
箭头函数 this 指向声明时所在作用域下 this 的值；
箭头函数不能作为构造函数实例化；
不能使用 arguments；

特性：

箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
不能作为构造函数实例化对象；
不能使用 arguments 变量；

// 无参数
let speak = () => console.log("hello 哈哈！");
// 一个参数
let hi = name => "hi " + name;
// 多个参数
let he = (a,b,c) => a + b + c;

// 特性
// 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
const school = {
  name : "大哥",
}
// 传统函数
function getName(){
  console.log("getName：" + this.name);
}
// 箭头函数
getName1 = () => console.log("getName1：" + this.name);
window.name = "JC";
// 直接调用
getName(); // 大哥
getName1(); // JC
// 使用call调用
getName.call(school); // 输出
getName1.call(school);
// 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
// 2、不能作为构造实例化对象
let Persion = (name,age) => {
  this.name = name;
  this.age = age;
}
let me = new Persion("JC",24);
console.log(me);
// 报错：Uncaught TypeError: Persion is not a constructor
// 3、不能使用 arguments 变量
let fn = () => console.log(arguments);
fn(1,2,3);
// 报错：Uncaught ReferenceError: arguments is not defined

案例：

点击div2s后变色

let ad = document.getElementById('ad')
// 以前的写法，在外部声明 _this 
ad.addEventListener("click", function(){
  let _this = this;
  setTimeout(function(){
    _this.style.background = 'pink'
  }, 2000)
})
// 现在的写法，直接写箭头函数
ad.addEventListener("click", function(){
  setTimeout(() => {
    this.style.background = 'pink'
  }, 2000)
})

从数组中返回偶数的元素

const arr = [1, 2, 3, 4, 5, 6, 7, 8]
// 原来的写法
const rst = arr.filter(function(item){
  if( item % 2 === 0){
    return true
  }else {
    return false
  }
})
// 现在的写法
const rst = arr.filter(item => item % 2 === 0)

适合于this无关的回调，定时器，数组

不适合和this有关的回调：事件回调，对象的方法

ES6中函数参数的默认值

ES允许给函数的参数赋初始值；

 //ES6 允许给函数参数赋值初始值
    //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
    function add(a,b,c=10) {
      return a + b + c;
   }
    let result = add(1,2);
    console.log(result); // 13
    //2. 与解构赋值结合
// 注意这里参数是一个对象
    function connect({host="127.0.0.1", username,password, port}){
      console.log(host)
      console.log(username)
      console.log(password)
      console.log(port)
   }
    connect({
      host: 'atguigu.com',
      username: 'root',
      password: 'root',
      port: 3306
   })

rest 参数

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

参考文章：https://www.jianshu.com/p/50bcb376a419

// arguments 是一个对象，rest是一个数组
// ES6的rest参数...args，rest参数必须放在最后面
// 灵活处理多参数
function data(...args){
  console.log(args); // fliter some every map
}
function data(a, b, c, ...args){
  console.log(args); // fliter some every map
}
data("大哥","二哥","三哥","四哥");

扩展运算符 …

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

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参
数序列，对数组进行解包；

// ... 扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组 ...
const tfboys = ['易烊千玺', '王源', '王俊凯'];
// => '易烊千玺','王源','王俊凯'
// 声明一个函数
function chunwan() {
  console.log(arguments);
}
// 放在函数调用处
chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')

应用

//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);

//2. 数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);

//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments

Symbol

Symbol 概述：

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类
型，是一种类似于字符串的数据类型；

参考文章：https://blog.csdn.net/fesfsefgs/article/details/108354248

Symbol 特点：

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

迭代器

生成器

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作
并可以获取其成功或失败的结果；

Promise 构造函数: Promise (excutor) {}；
Promise.prototype.then 方法；
Promise.prototype.catch 方法；

基本使用

const p = new Promise(function (resolve, reject){
  setTimeout(function(){
    // 成功
    let data = 'data'
    resolve(data) // 改变P的状态为成功，并传值data

    // 失败
    let err = 'error'
    reject(err)

  }, 1000)
})

// promise 有两个状态，分别是两个函数用来处理成功和失败的结果
p.then(value => {
  // 调用了resolve之后执行这个(成功)
  console.log(value);
}, reason => {
  // 调用了reject之后执行这个(失败)
  console.log(reason);
})

Promise 封装ajax操作

原生Ajax

// 1.创建对象
const xhr = new XMLHttpRequest()

// 2.初始化
xhr.open("GET", "http://101.201.64.102:8000/article/all?pn=1&limit=10&condition=")

// 3.发送请求
xhr.send();

// 4.绑定事件，处理响应结果
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status >= 200 && xhr.status < 300){
      console.log(xhr.response);
    }else{
      console.error(xhr.status)
    }
  }
}

Promise封装Ajax

// 使用Promise对Ajax进行封装

const p = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", "http://101.201.64.102:8000/article/all?pn=1&limit=10&condition=")
  xhr.send();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
        resolve(xhr.response);
      }else{
        reject(xhr.status)
      }
    }
  }
})

// 指定成功和失败的回调函数
p.then(value => {
  console.log(value);
}, resaon => {
  console.log(resaon)
})

then方法

then方法使得其可以链式调用

// 创建 Promise 对象
const p = new Promise((resolve,reject) => {
  setTimeout(() => {
	  resolve("用户数据");
  },1000);
});
// 调用then方法，then方法的返回结果是promise对象，
// 对象的状态有回调函数的结果决定;
const result = p.then(value => {
    console.log(value);
    // 1、如果回调函数中返回的结果是 非promise 类型的数据，
    // 状态为成功，返回值为对象的成功值resolved
    // [[PromiseStatus]]:"resolved"
    // [[PromiseValue]]:123
    // return 123;
    // 2、如果...是promise类型的数据
    // 此Promise对象的状态决定上面Promise对象p的状态
    // return new Promise((resolve,reject)=>{
    // // resolve("ok"); // resolved
    // reject("ok"); // rejected
    // });
    // 3、抛出错误
    // throw new Error("失败啦！");
    // 状态：rejected
    // value：失败啦！
  },reason => {
  console.error(reason);
})
// 链式调用
// then里面两个函数参数，可以只写一个
p.then(value=>{},reason=>{}).then(value=>{},reason=>{});
console.log(result);

catch

// Promise对象catch方法
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
    // 设置p对象的状态为失败，并设置失败的值
    reject("失败啦~！");
  },1000);
})
// p.then(value=>{
// console.log(value);
// },reason=>{
// console.warn(reason);
// });
p.catch(reason=>{
  console.warn(reason);
});

Set

Map

class

数值扩展

对象扩展

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；

模块化的好处：

模块化的优势有以下几点：

防止命名冲突；
代码复用；
高维护性；

模块化规范产品：

ES6 之前的模块化规范有：

CommonJS => Node.JS、Browserify；
AMD => requireJS；
CMD => seaJS；

ES6 模块化语法：

模块功能主要由两个命令构成：export 和 import；

export 命令用于规定模块的对外接口（导出模块）；

import 命令用于输入其他模块提供的功能（导入模块）；

具体代码见 GITHUB\Learning\Front-End\JavaScript\module-0

Babel编译器

Babel 是一个 JavaScript 编译器；

Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；

步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤：

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

<script src="./js/bundle.js" type="module"></script>

转换前后对比：

转换前：

//分别暴露
export let school = '尚硅谷';
export function teach() {
  console.log("我们可以教给你开发技能");
}

转换后：

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.teach = teach;
//分别暴露
var school = exports.school = '尚硅谷';
function teach() {
  console.log("我们可以教给你开发技能");
}

2021-02-20