• es6新特性

    目录

    ES6新特性

    什么是ES6

    ECMA ->ECMAScript ->ES6 ->javaScript

    ECMA

    ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制

    造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该

    组织改名为 Ecma 国际（简单来说这个组织就是来认可和制定标准的）

    ECMAScript

    ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言（简单的说就是一种标准语言）

    ECMA-262 标准

    Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个；ECMA-262标准几乎每个几年就会发布一个新的版本更新了一些新的特性（ES6就是2015年发布的ECMA-262标准新的版本）

    JavaScript

    JavaScript语言是ECMAScript标准语言的一种实现方式

    关键字

    let 关键字和var关键字

    • let 关键字一般用来声明局部变量
    • var 关键字一般用来声明全局变量

    const 关键字

    • 用来声明常量，声明时必须要赋初始值
    • 声明的常量一般大写
    • 不允许重复声明
    • 值不允许修改，但是当使用const 关键字声明对象或数组时，可以修改里面的数据（本质：只要没有修改声明的常量的地址就可以）

    解构赋值

    对声明的变量进行快速赋值

    //数组解构赋值
const arr = ['关羽','花木兰','马超','夏侯惇']
let [a,b,c,d] = arr
console.log(a);
console.log(b);
console.log(c);
console.log(d);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    //对象的解构赋值
const obj = {
  name:'张三',
  age:'22',
  hobbys:['学习','打游戏','看综艺']
} 
let {myName,myAge,myHobbys} = obj

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    模板字符串

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

    特性：

    • 拼接html解构字符串可以直接换行，省略了“+”号
    • 可以获取字符串中的变量
    //原来的拼接方式
let str1 = "
      " +
    "
    • 关羽
      • "       +
    "
    • 张飞
      • "       +
    "
    • 刘备
      • "       +
    "
    "    

//es6新加的模板字符串
let str2 = `
      
              
    • 于禁
      • 
              
    • 典韦
      • 
              
    • 夏侯惇
      • 
              
    • 夏侯渊
      • 
			
    `    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    //变量拼接
let hero = '关羽';
let str3 = `${hero}是我最擅长的英雄！`

    • 1
    • 2
    • 3

    声明对象简写形式

    es6允许在声明对象时，在大括号里面直接写入变量和函数

    let name = '张三';
let change = function(){
  console.log('我是傻子!!');
}

const school = {
  name,
  change,
  improve(){
    console.log("你也是！");
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    箭头函数

    es6允许使用箭头函数来定义函数

    //原来定义函数的方式
let fn = function () {

}

//使用箭头函数定义函数
let fn = (a,b) => {

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    注意：使用箭头定义函数

    • 函数参数只有一个，小括号可省略
    • 函数体只有一条执行语句，大括号可省略
    • 箭头函数 this 指向声明时所在作用域下 this 的值
    • 箭头函数不能作为构造函数实例化
    • 不能使用 arguments

    rest 参数

    用于获取函数的实参，代替arguments

    


    • 1
    • 2

    Promise

    Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，

    用来封装异步操作并可以获取其成功或失败的结果。

    使用Promise构造函数创建实例对象时，该构造函数需要接收一个函数（函数里面执行异步操作）作为参数，接收的函数带有两个函数类型的形参，并且能够通过调用这两个函数类型（形参）的方法来改变实例化的Promise对象的状态

    • 初始化状态
    • 成功状态（调用resolve 之后）
    • 失败状态（调用reject 之后）

    之后用实例化后的对象调用Promise 对象封装的then 方法，该方法根据实例化对象的状态来返回对应的结果；then 方法需要两个函数作为形参，每个函数也有一个形参，每个函数的形参就是返回的结果。

    基本语法

    <script>
  //实例化 Promise 对象
  //resolve
  //reject
  const p = new Promise(function(resolve, reject){
    setTimeout(function(){
      // let data = '数据库中的用户数据';
      // resolve
      // resolve(data);
      let err = '数据读取失败';
      reject(err);
    }, 1000);
  });

//调用 promise 对象的 then 方法
p.then(function(value){
  console.log(value);
}, function(reason){
  console.error(reason);
})

//Promise实例化对象，对象状态为失败时，也可以通过catch捕获失败信息
p.catch(function(reason){
  console.warn(reason);
});
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    Promise 封装ajax

    封装原生ajax

    <script>
  // 接口地址: https://api.apiopen.top/getJoke
  const p = new Promise((resolve, reject) => {
    //1. 创建对象
    const xhr = new XMLHttpRequest();

    //2. 初始化
    xhr.open("GET", "https://api.apiopen.top/getJ");

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

    //4. 绑定事件, 处理响应结果
    xhr.onreadystatechange = function () {
      //判断
      if (xhr.readyState === 4) {
        //判断响应状态码 200-299
        if (xhr.status >= 200 && xhr.status < 300) {
          //表示成功
          resolve(xhr.response);
        } else {
          //如果失败
          reject(xhr.status);
        }
      }
    }
  })

//指定回调
p.then(function(value){
  console.log(value);
}, function(reason){
  console.error(reason);
});
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    模块化

    模块化语法

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

    • export：用户规定模块的对外接口
    • import：用于导入其他模块

    export对外暴露接口的方式有三种：

    • 分别暴露

      //a.js
//分别暴露
export let school = 'aynu';

export function teach() {
    console.log("我在b站学习！");
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    • 统一暴露

      //b.js
//统一暴露
let school = 'aynu';

function findJob(){
    console.log("我准备去实习!!");
}

export {school, findJob};

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    • 默认暴露

      //c.js
//默认暴露
export default {
    school: 'aynu',
    change: function(){
        console.log("我凉了!!");
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

    import引入其他外部模块

    • 万能导入方式

      <script type="module">
  	//1. 通用的导入方式
  	import * as a from "./src/js/a.js";
	import * as b from "./src/js/b.js";
	import * as c from "./src/js/c.js";
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    • 解构赋值形式

      <script type="module">
  	//2. 解构赋值形式
  	import {school, teach} from "./src/js/a.js";
	//重名的可以引入后取别名
	import {school as mtf, findJob} from "./src/js/b.js";
	import {default as c} from "./src/js/c.js";
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    • 简便形式（注意：这里的简便形式只适用于通过默认方式暴露接口的模块）

      <script type="module">
  //3. 简便形式  针对默认暴露
  import c from "./src/js/c.js";
</script>

      • 1
      • 2
      • 3
      • 4

    ES8新特性

    async 函数

    async 函数的返回值为 promise 对象，promise 对象的结果由 async 函数执行的返回值决定

    <script>
  //async 函数
  async function fn(){
  // 返回一个字符串
  // return 'aynu';
  // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
  // return;
  //抛出错误, 返回的结果是一个失败的 Promise
  // throw new Error('出错啦!');
  //返回的结果如果是一个 Promise 对象
  return new Promise((resolve, reject)=>{
    resolve('成功的数据');
    // reject("失败的错误");
  });
}

const result = fn();

//调用 then 方法
result.then(value => {
  console.log(value);
}, reason => {
  console.warn(reason);
})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    await 函数

    • await 必须写在 async 函数中
    • await 右侧的表达式一般为 promise 对象
    • await 返回的是 promise 成功的值
    • await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
    • await取代了Promise 对象中的then方法
    <script>
  //创建 promise 对象
  const p = new Promise((resolve, reject) => {
    // resolve("用户数据");
    reject("失败啦!");
  })

// await 要放在 async 函数中.
async function main() {
  try {
    let result = await p;
    //
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
//调用函数
main();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    async 和await 封装ajax

    <script>
  // 发送 AJAX 请求, 返回的结果是 Promise 对象
  function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    //1. 创建对象
    const x = new XMLHttpRequest();

    //2. 初始化
    x.open('GET', url);

    //3. 发送
    x.send();

    //4. 事件绑定
    x.onreadystatechange = function () {
      if (x.readyState === 4) {
        if (x.status >= 200 && x.status < 300) {
          //成功啦
          resolve(x.response);
        }else{
          //如果失败
          reject(x.status);
        }
      }
    }
  })
}

//promise then 方法测试
// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
//     console.log(value);
// }, reason=>{})

// async 与 await 测试  axios
async function main(){
  //发送 AJAX 请求
  let result = await sendAJAX("https://api.apiopen.top/getJoke");
  //再次测试
  let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')

  //注意：上述写法会打破操作的“并行”，效率不高()
  let [a,b] = await Promise.all([result,tianqi])
  console.log(tianqi);
}
main();
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    注意：

    • 使用async 声明的函数为异步函数，而这里的异步函数就是返回值为Promise 对象的函数
  • 相关阅读:
    JAR will be empty - no content was marked for inclusion!
    动态规划算法学习一：DP的重要知识点、矩阵连乘算法
    JVM调优实战--容器内应用内存溢出被杀死
    docker安装Jenkins完整教程
    web-view 调用微信小程序的方法
    超详细的数据结构---顺序表的有关教程
    【Java 进阶篇】数据定义语言（DDL）详解
    Java手写红黑树应用拓展案例
    基于AI智能分析网关的智慧视频监控系统一站式解决方案
    【ManageEngine】IP地址扫描的作用
  • 原文地址：https://blog.csdn.net/qq_48575500/article/details/126502699