古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理.为此,开辟了<ES6躬行记>系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友. 在ES6之前的版本中,用于声明变量的关键字只有var,并且没有块级作用域,只有函数作用域和全局作用域,但在ES6中已改变…

ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向…

<svg>是矢量图的根元素,通过xmlns属性声明命名空间,从而告诉用户代理标记名称属于哪个XML方言.在下面的示例中,为<svg>元素声明了宽度和高度(默认以像素为单位),其子元素<title>可作为提示,在<desc>中可声明一段描述性纯文本,这两个元素都不会在页面中呈现.而<rect>是一个矩形,将被绘制到页面中. <svg xmlns="http://www.w3.org/2000/svg" width=&quo…

webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CSS和HTML等文件,并且能对图像做优化处理,如图1所示. 图1  webpack打包 目前,webpack的最新版本是4.33,其配置文件(webpack.config.js)的基本结构如下所示,包含了它的4个核心概念:入口(entry).输出(output).加载器(loader)和插件(plug…

一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形.CSS3提供了强大的clip-path属性,突破了clip属性的众多限制,接下来将围绕clip-path属性展开讲解. 1)裁剪形状 clip-path属性可以使用四种裁剪函数:circle().ellip…

ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类). class People { constructor() { this.age = 28; } getAge() { return this.age; } static getName() { return "strick"; } } class Man extend…

类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据.总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView.在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能. 一.ArrayBuffer 虽然ArrayBuffer对象可以开辟一片固定大小的内存区域(即数组缓冲区)…

解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是数组解构和对象解构,两者的区别在于解构赋值语句的左侧,前者是数组字面量,而后者是对象字面量.为了说明解构的优势,下面用一个例子来对比手动赋值和解构赋值. var arr = [1, 2], obj = { a: 3, b: 4 }, x, y, a, b; x = arr[0]; y = arr[1…

在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了.模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装.按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程.但有一点要注意,模块中的代码默认运行在严格模式中. 一.导出 一个模块就是一个独立的JavaScript文件,如果要读取…