ES7新特性

  1. //  includes   indexOf  查看数组元素 是否存在
  3. const arr = ['test1', 'test2', 'test3'];
  5. //判断
  6. console.log(arr.includes('test2'));
  7. console.log(arr.includes('test'));
  1. //2. **   计算次方   相当于  Math.pow()方法
  2. console.log(2 ** 10);  // 2 的10次方
  3. console.log(Math.pow(2,10));

ES8 async 和 await 函数

async 和 await 两种语法结合可以让异步代码像同步代码一样

async函数

  1. async 函数的返回值是 promise 对象
  2. promise 对象的结果由 async 函数执行返回值决定 
  1. //实例   async 函数
  2. async function fn () {
  4.     //情况1.
  5.     // 返回一个字符串
  6.     // return 'test'; // 返回结果为 Promise 对象
  8.     // 只要 返回的结果  不是 Promise 对象， 则返回的结果就是一个成功的 Promise 对象
  9.     // return;
  11.     //2. 情况2
  12.     // 抛出错误， 返回的结果是一个失败的  Promise
  13.     // throw new Error('出错了');
  15.     //3. 情况3
  16.     // 如果返回结果是一个Promise对象
  17.     return new Promise((resolve, reject) => {
  18.         resolve('成功获取数据');  // 如果成功，返回成功的Promise
  19.         // reject('获取数据失败');  // 如果失败，返回失败的Promise
  20.     })
  22. }
  23. const result = fn();  // Promise {<fulfilled>: 'test'}
  24. // Promise {<rejected>: Error: 出错了
  25. // 如果成功，返回成功的Promise ，  如果失败，返回失败的Promise
  26. // console.log(result);
  28. //  使用 then 方法 回调 , 基本和使用 Promise 一样
  29. result.then(value => {
  30.     console.log(value)
  31. }, reason => {
  32.     console.warn(reason)
  33. })

await 表达式

  1. await 必须写在async 中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了，就会抛出异常， 需用通过 try…catch 捕获处理

// 创建 Promise 对象
const p = new Promise((resolve, reject) => {
// resolve(‘成功获取数据’); // 成功时候
reject(‘失败的调用’);
})

  1. //  await 要放在 async 函数中
  2. async function main () {
  3.     // await 右侧的表达式一般为 promise 对象
  5.     // 成功获取时
  6.     // let result = await p;
  7.     // console.log(result);  // 返回成功的数据
  9.     // 获取失败时
  10.     try {
  11.         let result = await p;
  12.     }catch (e) {
  13.         console.log(e);
  14.     }
  15. }
  17. main();

async和await结合读取数据

  1. const fs = require('fs');
  3. // fs 读取文件 是一个 异步调用方法
  5. function readFile1() {
  6.     // 此函数返回值  是一个  Promise 对象
  7.     return new Promise((resolve, reject) => {
  8.         fs.readFile('./result/test.md', (err, data) => {
  9.             // 如果失败
  10.             if (err)  reject(err);
  11.             resolve(data);
  12.         })
  13.     })
  14. }
  17. function readFile2() {
  18.     // 此函数返回值  是一个  Promise 对象
  19.     return new Promise((resolve, reject) => {
  20.         fs.readFile('./result/test2.md', (err, data) => {
  21.             // 如果失败
  22.             if (err)  reject(err);
  23.             resolve(data);
  24.         })
  25.     })
  26. }
  28. function readFile3() {
  29.     // 此函数返回值  是一个  Promise 对象
  30.     return new Promise((resolve, reject) => {
  31.         fs.readFile('./result/test3.md', (err, data) => {
  32.             // 如果失败
  33.             if (err)  reject(err);
  34.             resolve(data);
  35.         })
  36.     })
  37. }
  40. // 声明一个 async 函数
  41. async function main () {
  42.     // 读取内容
  43.     // let test =  readFile1();  // 异步情况， 如果没有使用await，则返回  [object Promise]
  44.     let test =  await readFile1();
  45.     let test2 = await readFile2();
  46.     let test3 = await readFile3();
  48.     console.log(test.toString());
  49.     console.log(test2.toString());
  50.     console.log(test3.toString());
  52. }
  55. main();

async和await结合发送Ajax请求

  1. // 发送请求，  返回结果是 Promise 对象
  2. function sendAjax(url) {
  4.     // 在这里就 返回 Promise 对象
  5.     return new  Promise((resolve, reject) => {
  7.         // Ajax发送请求
  8.         const x = new XMLHttpRequest();
  9.         x.open('GET', url);
  10.         x.send();
  11.         x.onreadystatechange = function () {
  12.             if (x.readyState === 4) {
  13.                 if (x.status >= 200 && x.status < 300) {
  14.                     resolve(x.response);  // 成功
  15.                 }else {
  16.                     reject(x.status);  // 失败
  17.                 }
  18.             }
  19.         }
  20.     })
  21. }
  23. //测试1.  使用 Promise 的then 方法 测试
  24. // sendAjax('https://autumnfish.cn/api/joke').then(value => {
  25. //     console.log(value)
  26. // }, reason => {
  27. //     console.log(reason);
  28. // })
  31. //测试2.  使用 async 和 await  方法
  32. async function main () {
  33.     const result =  await sendAjax('https://autumnfish.cn/api/joke')
  34.     const xiaohua = await sendAjax('https://autumnfish.cn/api/joke/list?num=2');
  35.     console.log(result);
  36.     console.log(xiaohua);
  37. }
  39. main();

ES8 对象方法的扩展

  1. // 声明对象
  3. const school = {
  4.     name: 'Yellowsea',
  5.     className: ['test', 'test2','test3'],
  6.     techers: ['1','2','3'],
  7. }
  10. //对象的扩展方法
  12. //1. Object.keys()   获取所有的键
  13. console.log(Object.keys(school));
  15. //2. Object.values()   获取所有的值
  16. console.log(Object.values(school));
  18. //3. Object.entries()  获取所有的键值对 ， 返回一个数组, 数组元素为 键值对 的数组
  19. console.log(Object.entries(school));  // [Array(2), Array(2), Array(2)]
  20. // 方便使用 Map() 方法
  21. const m = new Map(Object.entries(school));
  22. console.log(m);
  23. console.log(m.get('className'));
  26. //4. Object.getOwnPropertyDescriptors()
  27. // 对象属性的描述对象
  28. console.log(Object.getOwnPropertyDescriptors(school));
  30. // 就是对象属性的配置 （创建对象的底层）
  31. const obj = Object.create(null, {
  32.     // 这里写的就是对象属性的描述
  33.     name : {
  34.         value: 'Yellowsea',
  35.         // 可写  可修改删除  可枚举
  36.         writable: true,
  37.         configurable: true,
  38.         enumerable: true
  39.     }
  40. })
  41. console.log(obj);  // {name: 'Yellowsea'}

ES9对象展开-扩展运算符

Rest 参数 spread 扩展运算符 在 ES6 中已经引入， 不过ES6 中只针对数组

在ES9 中为对象提供了像数组一样的rest 参数 和 扩展运算符

实例

  1. function connect({host, port, ...username}) { //  ...username 对 username 后面的数据进行压缩到一个数组
  2.     // 输出
  3.     console.log(host, port,username);
  4.     // localhost 3306 {username: 'test', password: 'test'}
  5. }
  7. connect({
  8.     host: 'localhost',
  9.     port: 3306,
  10.     username: 'test',
  11.     password: 'test',
  12.     type: 'utf-8',
  13. })
  17. //2. 对象合并 ...
  19. let obj1=  {name1: 'obj1',}
  21. let obj2= {name2: 'obj2'}
  23. let obj3= {name3: 'obj3'}
  25. // 对象合并
  26. // ...obj 展开 对象中的数据
  27. const result  = {...obj1,...obj2,...obj3}
  28. console.log(result)

ES10

对象扩展方法Object.fromEntries

  1. // 二维数组
  2. // Object.fromEntries() 接收一个二维数组 ， 将二维数组 转为  键|值形式
  3. const result = Object.fromEntries([
  4.     ['name', 'yellowsea'],
  5.     ['test', 'test,test,test']
  6. ])
  8. console.log(result);
  9. // {name: 'yellowsea', test: 'test,test,test'}
  12. // Map
  13. const m = new Map();  // 新的数据结构,  可以通过 Map属性， 对Map进行操作
  14. m.set('name', 'Yellowsea'); // 添加属性
  16. const res = Object.fromEntries(m);
  17. console.log(res, typeof res);  // {name: 'Yellowsea'}  object
  20. // Object.fromEntries() 方法 将数组转为一个对象
  21. // ES8 中 Object.Entries  方法将 对象  转为  数组(二维数组)   //  相反的关系
  23. const  obj2 =  {
  24.     name: 'yellowsea',
  25.     test: 'test'
  26. }
  27. const res2 = Object.entries(obj2);
  28. console.log(res2);  //  [Array(2), Array(2)]
  30. const res3 = Object.fromEntries(res2);
  31. console.log(res3);  // {name: 'yellowsea', test: 'test'}

ES10字符串方法trimStart和trimEnd方法

  1. // 之前就有 trim 方法  去除字符串两边的空格
  3. const str = '   hello    ';
  4. console.log(str.trim());  // hello
  6. // trimStart()  去除字符串 前边的空格
  7. console.log(str.trimStart());
  9. // trimEnd()  去除字符串 后面的空格
  10. console.log(str.trimEnd());

数组方法flat和flatMap

  1. // ES10数组方法flat和flatMap
  3. const arr = [1,2,3, [4,5, [6,7,8]]];
  5. // flat()
  6. // 作用 ： 将多维数组转为  低维数组
  7. console.log(arr.flat());  // [1, 2, 3, 4, 5]     -> 二维数组转为一维数组
  9. //将三维数组 转为1维数组 ， 需要 flat(参数)  参数为 数组的深度 默认为1
  10. console.log(arr.flat(2));  // [1, 2, 3, 4, 5, 6, 7, 8]
  14. // flatMap()
  15. // 也是将多维数组转为低维数组
  16. //用法 ： 在使用Map进行循环运算时   计算过程中返回具有二维数组， 使用 flatMap() 可以对数组降维
  17. const arr2 = [1,2,3,4];
  19. //使用 map() 循环时 ，  没有使用 flatMap() 
  20. const result1 =  arr2.map(item =>  [item * 10] );
  21. console.log(result1);  // [[10], [20], [30], [40]]
  23. // 使用 flatMap()  对数组降维
  24. const result2 = arr2.flatMap(item => [item * 10])  // 能够降维 
  25. console.log(result2); //  [10, 20, 30, 40]

Symbol.prototype.description直接获取Symbol属性值

  1. // Symbol.prototype.description直接获取Symbol属性值
  4. const s = Symbol('这是Symbol属性')
  5. console.log(s.description);  // 这是Symbol属性

ES11

Class类私有属性

  1. // 私有属性
  3.     class Person {
  4.         //共有属性
  5.         name;
  7.         // 私有属性
  8.         #age;   // 使用 #变量  定义私有属性
  9.         #weight;
  11.         constructor(name, age, weight) {
  12.             this.name = name;
  13.             this.#age = age;  //  初始化时候 也是 使用 #age
  14.             this.#weight = weight;
  15.         }
  18.         // 内部方法
  19.         intro() {
  20.             console.log(this.name);
  21.             console.log(girl.#age)
  22.             console.log(girl.#weight)
  23.         }
  24.     }
  27.     // 对象 实例化
  28.     const  girl = new Person('小红', 12, '12kg');
  31. // console.log(girl.name)  // 查看属性
  32. // console.log(girl.#age)  //  报错， 无法通过实例化对象查看  私有属性
  33. // console.log(girl.#weight
  35. girl.intro();  // 可以成功访问

Promise.allSettled方法

Promise.allSettled()， 参数接收一个数组， 数组中元素必须是一个 Promise 对象

Promise.allSettled() 返回数据也是一个Promise对象， 返回值始终是一个成功的Promise，值数组中Promise的返回值

  1. // 声明两个 Promise 对象
  3. const p1 = new Promise((resolve, reject) => {
  4.     setTimeout(()=> {
  5.         resolve('p1成功');
  6.     }, 1000)
  7. })
  10. const p2 = new Promise((resolve, reject) => {
  11.     setTimeout(()=> {
  12.         // resolve('p2成功');
  13.         reject('p2失败')
  14.     }, 1000)
  15. })
  18. // 调用 allSettled 方法 
  19. const result = Promise.allSettled([p1,p2]);  // 传入的参数必须是 数组 
  20. console.log(result);
  23. // 跟 allSettled 方法相似的 all() 方法
  25. // all() 方法 接收也是一个数组，
  26. // 区别是：数组Promise元素，如果有一个出错，返回结果返回就是 失败的状态 。 必须是Promise的状态全部成功，才返回成功
  27. const showResult = Promise.all([p1,p2]);
  28. console.log(showResult);

对象可选链操作符

?. 对象的可选链操作符

  1. // ?.
  2. // 用于判断对象是否存在，如果存在，则执行， 不存在 返回 undefined
  4. function main(config) {
  5.     // 获取   config.db.host
  7.     // 先判断config是否为空   再判断 config.db 是否为空    再进行config.db.host的赋值
  8.     // const dbHost =  config  &&  config.db &&  config.db.host  // 这样子判断太麻烦了，
  10.     // 使用可选链,   ?.  如果有执行后面， 如果没有 返回 undefined
  11.     const dbHost =  config?.db?.host
  12.     console.log(dbHost);  // 1.2.3.4
  13. }
  16. main({
  17.     db: {
  18.         host: '1.2.3.4',
  19.         username: 'root'
  20.     },
  21.     cache: {
  22.         host: '192.1.4.1',
  23.         username: 'admin',
  24.     }
  25. })

新数字类型BigInt

  1. // 大整形   BigInt
  3. let n = 123n;
  4. console.log(n, typeof n);  // 123n 'bigint'
  7. // 使用 BigInt 将 一个整形的数字转为 BigInt 类型
  8. // BigInt() 只能接收 整形， 不能接收 Float 类型
  9. let  n1 = 123;
  10. console.log(BigInt(n1));  // 123n
  13. // BigInt 类型数，  运算
  14. let max = Number.MAX_SAFE_INTEGER;
  15. console.log(max);
  17. console.log(max + 1)
  18. console.log(max + 2)
  19. console.log(max + 3)
  21. // BigInt运算
  22. console.log(BigInt(max) + BigInt(1));  // 9007199254740992n
  23. console.log(BigInt(max) + BigInt(max));  // 8014398509481982n

绝对全局对象globalThis

  1. // 绝对全局对象globalThis
  3. console.log(globalThis);
  4. // 使用浏览器时， 返回的全局对象是  window
  6. // 使用 node 环境时 ， 返回的全局对象就是 global