ES6
Z.Meng
一个前端搬砖工程师
展开
-
前端进阶攻略之Set与Map
前端进阶攻略之Set与Map一.ES6中的SetES6中提供了Set数据集合,这是一个能够存储无重复值的有序列表。1.创建Set对象可以通过new Set()创建Set对象,传参为一个可迭代对象 const s1 = new Set([1, 2, 3, 4, 5, 6, 7, 3, 6, 1, 2, 5]) console.log(s1) //1 2 3 4 5 6 7如果存放的是原始值:会转换成字符串对象,在进行存储// 如果存放的是原始值:会转换成字符串对原创 2020-09-15 20:15:29 · 577 阅读 · 0 评论 -
前端进阶攻略之迭代器
前端进阶攻略之迭代器一.什么是迭代器?1.什么是迭代?从一个数据集合中按照一定的顺序,不断的取出数据的过程2.迭代和遍历的区别?迭代强调的依次取出,不能确定可以取出的值有多少,也不能保证去把数据全部取完遍历必须保证数据的长度,循环不断的全部取出,针对于数据量过大的情况下使用遍历,需要时间过长3.迭代器对迭代过程的封装,通常表现为对象的数据形式(也可以使用数组),不同语言中,表现出了的迭代形式不一样4.迭代模式一种编程设计模式,用于同一迭代的过程,并且规范迭代器的格式二.JS原生迭代器原创 2020-09-12 14:33:36 · 1776 阅读 · 0 评论 -
前端进阶攻略之ES6中反射和代理
前端进阶攻略之ES6中反射和代理在学习ES6中反射和代理之前,先要明白属性描述符和存储器属性的原理,然后理解反射和代理的原理就会非常的简单。一.属性描述符在ES5之前,JavaScript语言本身并没有提供可以直接检测属性特性的方法,比如判断属性是否可读,ES5 增加了属性描述符,可以更细腻的控制属性的不同操作。1.Object.getOwnPropertyDescriptor()Object.getOwnPropertyDescriptor()方法可以查看描述属性的相关信息, 第一个参数为对象原创 2020-09-12 12:18:10 · 602 阅读 · 0 评论 -
前端进阶攻略之ES6-Promise中的async与await关键字
前端进阶攻略之Promise中async与await关键字在ES6中Promise新增async与await关键字,简化promise的写法与promise结合生成器来简化promise的操作。优点: 简化异步和回调的操作缺点: 只要开始promise就无法中断一.基本用法普通的函数声明async function A(){}声明一个函数表达式let A=async function(){}async形式的箭头函数let A=async ()=>{}async关键字:原创 2020-09-08 20:01:59 · 276 阅读 · 0 评论 -
前端进阶攻略之ES6中的Promise
前端进阶攻略之Promise一.什么是Promise对象?Promise是异步编程的一种解决方案,比起传统的解决方案(回调函数和事件),它显得更加的强大和方便(具体请看下文)。从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息。Promise对象提供统一的API,各种异步操作都可以用同样的方法进行处理。二.Promise有什么用?大家一致会回答,回调地狱。那什么又是回调地狱?它有什么缺点?回调: 运行某个函数实现某个功能的时候,并传入一个函数作为参数,当发生某件事情时,会执行该函原创 2020-09-08 19:18:52 · 159 阅读 · 0 评论 -
前端进阶攻略之事件循环&ES6事件队列
前端进阶攻略之事件循环&ES6事件队列事件循环与任务队列是JS中比较重要的两个概念。这两个概念在ES5和ES6两个标准中有不同的实现。尤其在ES6标准中,清楚的区分宏观任务队列和微观任务队列才能解释Promise一些看似奇怪的表现。一.事件循环1.浏览器宿主环境有5个线程:1.1.JS引擎 (js主线程)1.2.GUI线程(布局引擎)互斥状态,相互等待1.3.事件监听线程(onclick)1.4.计时线程(setTimeout)1.5.网络线程(http ,Ajax)2.原创 2020-09-07 19:56:18 · 312 阅读 · 0 评论 -
前端进阶攻略之ES6中的共享符号与知名符号
前端进阶攻略之ES6中的共享符号与知名符号一.共享符号ES6 提供了“全局符号注册表”。使用Symbol.for()方法可以创建共享符号。Symbol.for()方法仅接受单个字符串类型的参数,作为目标符号值的标识符,同时此参数也会成为该符号的描述信息。Symbol.for() 方法首先会搜索全局符号注册表,看是否存在该键值的符号值。若存在,该方法会返回这个已存在的符号值;否则,会创建一个新的符号值,并使用该键值将其记录到全局符号注册表中,然后返回这个新的符号值。这就意味着此后使用同一个键值去调用原创 2020-09-01 20:46:52 · 443 阅读 · 0 评论 -
前端进阶攻略之ES6中的Symbol
ES6中的Symbol 一.Symbol基本概念Symbol是ES6中引入得一种新型的数据类型(符号类型),它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值Boolean、字符串String、数值Number、对象Object`1.1.引入Symbol的好处为解决属性名冲突问题而生ES5 中方法和属性的命名:以前,我们给一个对象下的方法或者属性命名的时候,可能会与该对象原有的方法或者属性产生冲突,这样的场景想必大家也很熟悉,我们常用到的解决原创 2020-09-01 19:25:46 · 2703 阅读 · 2 评论 -
前端进阶攻略之ES6中的class类继承extends与super
ES6中的class类继承extends与super一.extends与super的基本语法1、类的继承 extends类可以继承另外一个类。这是一个非常棒的语法,在技术上是它基于原型继承实现的。为了继承另外一个类,我们需要在括号 {…} 前指定 “extends” 和父类,语法如下: class Animal{ constructor (type,name,sex,age){ this.type=type;原创 2020-08-31 20:46:33 · 1159 阅读 · 0 评论 -
前端进阶攻略之ES6中的class类
ES6中的class类在传统的javascript中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人困惑!如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数示例://函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)function Person(name,age) { this.name = name;原创 2020-08-31 20:22:16 · 300 阅读 · 0 评论 -
前端进阶攻略之ES6中的解构赋值
ES6中的解构赋值今天我们来探讨一个新问题:之前在我们开发的过程中,难免会碰到这样的情况:后端传给我们一串数据,然后我们需要对这个数据进行处理。如果是这样的一个数据:let obj = { username:'webpilot', userid:12831, profession:'webDeveloper', region:'beijing'}然后我们需要用变量去保存这些数据,那么我们可能会这么操作:let username = obj.username原创 2020-08-30 20:20:57 · 549 阅读 · 0 评论 -
前端进阶攻略之ES6中展开&&收集运算符
ES6中展开&&收集运算符一.收集运算符基本用法收集,顾名思义把散列东西收集到一个地方,这个地方ES6规定收集在数组中例如:下面函数fn将传递的参数收集在arg变量中,打印arg是一个数组,里面包含着传来的参数。就像吃豆子一样把值收到自己的嘴里。function fn(...arg){ console.log(arg); //[1,2,3]}fn(1,2,3)上面的代码让我们想起来arguments,也是保存着传过来的参数。但是我们知道arguments对象是原创 2020-08-30 19:46:17 · 427 阅读 · 0 评论 -
前端进阶攻略之ES6中的参数默认值
ES6中的参数默认值一.基本用法我们都清楚在调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined。怎么给缺失的参数赋值默认值,在ES6之前,并没有太简洁的方法,如下段代码所示:function myFunction(x, y, z) { x = x === undefined ? 1 : x; y = y === undefined ? 2 : y; z = z === undefined ? 3 : z; console.log(x, y, z)原创 2020-08-30 19:30:35 · 1671 阅读 · 0 评论 -
前端进阶攻略之ES6中的箭头函数
ES6中的箭头函数一.基本用法1.在ES6 允许使用“箭头” => 定义函数。//ES6箭头函数写法const print1=(a,b)=>{ console.log(a,b); }print1(10,20)//等同于function print(a,b){ console.log(a,b);}print(10,20);2.参数只有一个的时候,可以省略小括号const print = num => { console.log('接收原创 2020-08-28 17:19:43 · 222 阅读 · 0 评论 -
前端进阶攻略之ES6中let与const
ES6中let与const一.let的基本用法ES6 新增了 let 命令,用来声明变量。 它的用法类似于 var ,但是所声明的变量,只在 let 命令所在的代码块内有效{ let a = 10; var b = 1;} a// ReferenceError: a is not defined.b // 1上面代码在代码块之中,分别用 let 和 var 声明了两个变量。 然后在代码块之外调用这两个变量,结果 let 声明的变量报错, var 声明的变量返回了正确的值。 这表原创 2020-08-27 19:48:48 · 182 阅读 · 0 评论