ES6语法总结--下篇（进阶篇 ES6~ES11）

已于 2022-07-22 10:49:58 修改
阅读量117 收藏
点赞数
分类专栏： 前端笔记 文章标签： es6 javascript 前端
于 2022-07-04 17:28:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062076/article/details/125596213
版权
迭代器（for...of遍历） 为不同的数据结构提供统一的访问接口

对象的Prototype属性中存在Symbol(Symbol.iterator)属性 则就可以使用for…of遍历（of前面的变量存储的是键值）
for…of适用于：Array Arguments Set Map String TypedArray NodeList

在这里插入图片描述
自定义迭代器

let json = {
  arr: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let i = 0;
    let that = this;
    return {
      next() {
      //当遍历到value值为undefined设置done为true 结束遍历
        if (i < that.arr.length) {
          return { value: that.arr[i++], done: false }
        } else {
          return { value: undefined, done: true }
        }
      }
    }
  }
}
//能够打印出arr数组的每一项
for (let item of json) {
  console.log(item);
}
生成器 特殊的函数 实现异步编程

基础写法

function* func_scq() {
  console.log('1');
  yield "分割01"
  console.log('2');
  yield "分割02";
  console.log('3');
  yield "分割03";
  console.log('4');
}
let scq = func_scq();

调用方式

scq.next();
scq.next();
scq.next();
scq.next();

在这里插入图片描述

遍历

//for of循环
for (let iterator of scq) {
  console.log(iterator);
}

在这里插入图片描述

传参
在这里插入图片描述

function* func_scq() {
  console.log('1');
  let one = yield "分割01"
  console.log('one :>> ', one);
  let two = yield "分割02";
  console.log('two :>> ', two);
  let three = yield "分割03";
  console.log('three :>> ', three);
}
let scq = func_scq();
scq.next();
scq.next("给01传参");
scq.next("给02传参");
scq.next("给03传参");

在这里插入图片描述

使用场景
1.解决回调地狱

function a() {
  setTimeout(() => {
    console.log('a 方法');
    p.next();
  }, 1000);
}
function b() {
  setTimeout(() => {
    console.log('b 方法');
    p.next();
  }, 1000);
}
function c() {
  setTimeout(() => {
    console.log('c 方法');
    p.next();
  }, 1000);
}

function* pro() {
  yield a();
  yield b();
  yield c();
}
let p = pro();
p.next();

在这里插入图片描述
2.在解决回调地狱的基础上传参

function a() {
  setTimeout(() => {
    console.log('a 方法');
    p.next("a传的参数");
  }, 1000);
}
function b(bb) {
  console.log('bb :>> ', bb);
  setTimeout(() => {
    console.log('b 方法');
    p.next("b传的参数");
  }, 1000);
}
function c(cc) {
  console.log('cc :>> ', cc);
  setTimeout(() => {
    console.log('c 方法');
    p.next("c传的参数");
  }, 1000);
}

function* pro() {
  let aaa = yield a();
  let bbb = yield b(aaa);
  let ccc = yield c(bbb);
}
let p = pro();
p.next();

在这里插入图片描述

Promise 解决回调地狱的新方案

三种状态
padding：进行中
fulfilled：已成功
rejected：已失败
两个过程
padding -> fulfilled
padding -> rejected

基础写法

const p = new Promise(function (reslove, reject) {
    setTimeout(() => {
      let suc = "成功";
      reslove(suc);
      // let err = "失败";
      // reject(err);
    }, 1000);
  });
  p.then(function (suc) {
    console.log('suc :>> ', suc);
  }).catch(function (err) {
    console.log('err :>> ', err);
  });

在这里插入图片描述
链式调用
方式1：

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('正在执行p1');
      resolve(1);
    }, 1000)
  });
  let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('正在执行p2');
      resolve(2);
    }, 2000)
  });
  let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('正在执行p3');
      resolve(3);
    }, 3000)
  });
  p1.then(value => {
    console.log("p1的value:", value);
    return p2;
  }).then(value => {
    console.log("p2的value:", value);
    return p3;
  }).catch(err => {
    console.log(err);
  })

在这里插入图片描述

方式2：

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 1000)
  });
  let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 2000)
  });
  let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(3);
    }, 3000)
  });
  Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
  })

在这里插入图片描述

Symbol

写法
在这里插入图片描述
注：Symbol 不能进行运算、比较、字符串拼接等 不能使用for of遍历
在这里插入图片描述
使用场景：主要用于给对象添加属性和方法
在这里插入图片描述

ES7新特性

includes 判断数组是否存在某个元素
在这里插入图片描述
计算次幂
在这里插入图片描述

ES8新特性 异步编程

async函数
async function func() {
    return new Promise((reslove,reject)=>{
        reslove("成功");
        //reject("失败");
    });
}
let res = func();

res.then(val=>{
    console.log(val);
},err=>{
    console.log(err);
})

在这里插入图片描述

await函数

基本写法

let p = new Promise((reslove,reject)=>{
    reslove("成功");
    //reject("失败");
  })
  async function pro(){
    try {
      let res = await p;
    } catch (error) {
      console.log('error :>> ', error);
    }
  }

模拟多个异步

function p1() {
    return new Promise((reslove, reject) => {
      setTimeout(() => {
        reslove("p1成功");
      }, 1000);
      //reject("失败");
    })
  }
  function p2() {
    return new Promise((reslove, reject) => {
      setTimeout(() => {
        reslove("p2成功");
      }, 1000);
      //reject("失败");
    })
  }
  function p3() {
    return new Promise((reslove, reject) => {
      setTimeout(() => {
        reslove("p3成功");
      }, 1000);
      //reject("失败");
    })
  }
  async function pro() {
    try {
      let resp1 = await p1();
      let resp2 = await p2();
      let resp3 = await p3();
      console.log(resp1, resp2, resp3);
    } catch (error) {
      console.log('error :>> ', error);
    }
  }
  pro();
对象方法扩展
const json = {
    125: "如果你收到了这样一个JSON对象",
    336: "要解析它",
    722: "怎么办",
    689: "把它变成正常的json对象",
    1024: "干翻苍穹",
    1: {
      31: "美食分享",
      32: "游戏分享",
      34: "学习分享"
    },
    arr: [1, 2, 3, 4, 5],
    item: { "id": 1, name: 10 }
  };
  //获取所有key
  let keys = Object.keys(json);
  console.log('keys :>> ', keys);
  //获取所有value
  let values = Object.values(json);
  console.log('values :>> ', values);
  //entries
  let entries = Object.entries(json);
  console.log('values :>> ', entries);
  //对象属性的描述对象
  let own = Object.getOwnPropertyDescriptors(json);
  console.log('own :>> ', own);

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

//变成正常的数组json格式  方便vue  v-for
  let nentries = entries.map(item => {
    console.log(item);
    return { id: item[0], value: item[1] }
  });
  console.log(nentries);

在这里插入图片描述

ES9新特性

对象展开

合并对象 深拷贝

  let q = { 1: 1 };
  let w = { 2: 2 };
  let e = { 3: 3 };
  let r = { 4: 4 };
  let all = { ...q, ...w, ...e, ...r };
  console.log(all);
  all[1] = 11111;
  console.log('all :>> ', all);
  console.log('q :>> ', q);

在这里插入图片描述

ES10新特性

fromEntries entries的逆运算
const json = {
    125: "如果你收到了这样一个JSON对象",
    336: "要解析它",
    722: "怎么办",
    689: "把它变成正常的json对象",
  };
  //entries
  let entries = Object.entries(json);
  console.log('entries :>> ', entries);

  let arr = Object.fromEntries(entries);
  console.log("arr :>>", arr);

在这里插入图片描述

trimStart：清除字符串左侧内容 trimEnd：清除字符串右侧内容

在这里插入图片描述

flat:数组降维
  let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]];
  console.log(arr.flat(2)) // 降两个维度  3维变1维  不传参降1个维度

在这里插入图片描述

flatMap:结合了flat 和 map 方法 二维变一维

在这里插入图片描述

ES11新特性

bigint

 let a = 1024n;
  console.log('a :>> ', a);
  console.log('typeof :>> ', typeof a);
  //大数运算
  let b = Number.MAX_SAFE_INTEGER;
  console.log(b + 1);
  console.log(b + 2);
  console.log(BigInt(b) + BigInt(1));
  console.log(BigInt(b) + BigInt(2));

在这里插入图片描述
所以经过这两篇文章 加上基础知识 我们可以知道 js数据类型 有哪些：

number string  object  undefined  boolern  function   symbol  bigint

在这里插入图片描述

技术参考：b站 – 【尚硅谷】十分感谢分享资源 推荐大家去看
https://www.bilibili.com/video/BV1uK411H7on?p=1&vd

阿波次嘚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nuxt.js 脚手架搭建项目中不支持ES6语法 ---- 解决办法
Riona_cheng的博客
11-19 1776
Nuxt 脚手架搭建项目不支持ES6语法完美解决方案
ES6-ES12常用语法汇总（下篇）
技术改变世界
09-02 494
includes 传入元素，如果数组中能找到此元素，则返回true，否则返回false const includeArr = [1,2,3,'小明','科比'] const isKobe = includeArr.includes('科比') console.log(iskobe) // true 跟indexOf很像，但还是有区别的 const arr = [1,2,NaN] console.log(arr.indexOf(NaN)) // -1 indexOf找不到NaN console.lo.
ES6语法总结--上篇（基础篇）
weixin_45062076的博客
07-04 530
ES6 知识点总结
ES6------promise详解
weixin_40381947的博客
04-06 983
1.promise其实就是一个对象或者说是构造函数2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）3.在前端中，ajax和axios都会用到异步编程，axios更是基于promise的，所以一定要掌握promise以及用async和await搭配promise的使用。
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
以上就是从ES6到ES11的一些重要语法特性，这些新功能为JavaScript开发者提供了更多工具和灵活性，使代码更简洁、更易于理解和维护。学习并掌握这些知识点，将有助于提升你的JavaScript开发能力。
ES6-for-humans：编写ES6的入门指南
02-03
这篇指南旨在帮助初学者和经验丰富的开发者快速上手ES6，理解其核心概念，并熟练地应用到实际项目中。 1. **变量声明：let和const** 在ES6之前，我们主要使用`var`来声明变量，但ES6引入了`let`和`const`。`let`...
es6-to-amd:es6转amd
07-24
ES 到 AMD 转换器 ES（EcmaScript）模块到 AMD（异步模块定义）转换器目录背景导入/导出语法正变得越来越流行。 考虑到一个庞大的、遗留的 AMD 应用程序，一次迁移它并非易事。 转换器可以帮助您暂时将模块转换为 ...
es6-mario：ES由ES6语法和HTML5 Canvas制作的网页游戏
02-05
使用ES6语法和HTML5功能（例如Module, Canvas编写的网络游戏。 通过该项目，您可以对ES6语法， HTML Canvas Related API和Webpack简单配置有特定的印象。 通过@ 的。 还强烈为您推荐此频道！ 非常感谢作者 ，他从...
js-es6-es2017:ES6和ES2017-示例
03-26
ES6引入了基于原型的类语法，使得面向对象编程更加直观。 ```javascript class Person { constructor(name) { this.name = name; } sayName() { console.log(this.name); } } ``` 3. **let和const**： ...
ES6 对象的扩展（十五）
qq_35876316的博客
07-16 320
特性：在对象字面量中，可以直接使用方法定义，而不需要使用 function 关键字。用法：简化对象中方法的书写。');// 输出：Hello!
ES6 模块
最新发布
搞笑范fan
07-18 172
export 命令导出的接口名称，须和模块内部的变量有一一对应关系。导入的变量名，须和导出的接口名称相同，即顺序可以不一致。用于不同模块导出接口名称命名重复， 便可以使用 as 重新定义变量名方法一// Tom方法er// Tom// Jerry**export 与 import 结合使用**/* ------- 特点 1 --------*/// 普通改名// 将 foo 转导成 default// 将 default 转导成 foo。
ES6 数组的扩展（十六）
qq_35876316的博客
07-16 282
返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。：返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。：用一个固定值填充数组中从起始索引到终止索引（不包括）的所有元素。：从类数组对象或可迭代对象中创建一个新的数组实例。：找出数组中满足条件的第一个元素的索引。：将数组的一部分复制到数组的另一个位置。：将数组中一段区域的元素替换为特定值。：找出数组中满足条件的第一个元素。：创建一个包含多个参数的数组。
ES6 Symbol （十三）
qq_35876316的博客
07-15 472
内置Symbol：使用 ES6 内置的 Symbol，如 Symbol.iterator 来实现自定义迭代器。创建Symbol：使用 Symbol() 创建一个新的 Symbol 值。作为属性键：使用 Symbol 作为对象属性的键，确保属性的唯一性。
ES6常用功能/新特性
闻人放歌的三寸青草园圃
07-15 224
es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁。箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层。promise用来解决js中的callback hell。
ES6 数值的扩展（十八）
qq_35876316的博客
07-18 1185
但是由于这两个二进制数的最低位都是 1，所以这个结果肯定是不正确的，因为根据二进制乘法，计算结果的二进制最低位应该也是 1。这个错误就是因为它们的乘积超过了 2 的 53 次方，JavaScript 无法保存额外的精度，就把低位的值都变成了 0。将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效， Number.isFinite() 对于非数值一律返回 false ,Number.isNaN() 只有对于NaN才返回true ，非 NaN 一律返回 false。我们知道浮点数计算是不精确的。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 778
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 422
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 339
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
尚硅谷es6-es11笔记
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11个内置的Symbol值，这些值指向语言内部使用的方法，可以称之为魔术方法，因为它们会在特定的场景下自动执行。 另外，ES6还提供了二进制和八进制数值的新的写法，分别用前缀0b和0o表示。还有Number.isFinite()和Number.isNaN()方法用于判断一个数值是否有限或是否为NaN。 以上是尚硅谷ES6-ES11笔记的一些内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值