chen__cheng的博客

js3_es6基础一、类和对象1.1 概念1.2 创建类1.3 创建对象1.4 类的继承1.5 类的本质二、函数2.1 函数的定义2.2 函数的调用2.3 改变函数内部的this指向2.4 严格模式2.5 高阶函数2.6 浅拷贝和深拷贝三、正则表达式3.1概述3.2 创建正则表达式3.3 验证正则表达式3.4 正则表达式替换四、es64.1 什么是es64.2 es6自增语法4.3 let4.4 const4.5 解构赋值4.6 剩余参数4.7 扩展运算符4.8 箭头函数4.9 模板字符串4.10 set数

es6提供了新的数据结构Set。类似于数组，但是不同于数组的是，Set数据结构成员的值都是唯一的，没有重复的值创建Set数据Set本身是一个构造函数，用来生成Set数据结构创建空的Set数据const s = new Set();接受一个数组作为参数，用于初始化const set = new Set([1,2,3,4]);应用：数组去重由于Set数据结构数据成员的唯一性，因此可以用其对数组元素去重，再利用扩展运算符转换为数组const set = new ..

es6新增的创建字符串的方式，使用反引号定义let str = `模板字符串`;console.log(str);特点可以解析变量。将变量放于${}中let val = 123;let str2 = `模板字符串${val}`;console.log(str2);现在在模板字符串的字符串换行书写，同时显示也会进而换行显示let obj = { uname: 'zt', age: 18}let str3 = ` <div>模板字符串..

es6中新增的定义函数的方式(arg1,arg2,...) => {函数体};// ()放参数，{}中作为函数体// 等价于function (arg1,arg2,...) { 函数体;}箭头函数的调用采用函数表达式的方式，用变量进行接收const fn = (n) => { return n * 10}; console.log(fn(3));注意：函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号const fn..

es6解构赋值1. 数组解构2. 对象解构解构：分解数据解构，赋值：给变量赋值。es6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构1. 数组解构let arr1 = [1,2,3];let [a,b,c] = arr1;// [a,b,c]表示解构，而不是数组console.log(a);// 1console.log(b);// 2console.log(c);// 3[a,b,c]与数组中的数据进行一一匹配左边解构变量个数小于右边数组数据个数仍然一一对应关

1. letes6中新增的用于声明变量的关键字，let声明的变量只在所处于的块级有效，针对于es6新增的块级作用域if (true) { let a = 1;}console.log(a);// a is not defined;特别注意：一个块级作用域中存在子作用域，子作用域可以访问父作用域，但是父作用域不可以访问子作用域if (true) { let a = 1; if (true) { let b = 1; console.log(a)

使用var关键字，求以下代码的输出结果var arr = [];for (var i = 0; i < 2; i++) { arr[i] = function () { console.log(i); }}arr[0]();arr[1]();结果分别为：2，2分析：for循环中循环两次分别给数组arr赋于一个函数，当数组 项arr[0]调用函数时，即arr0，由于函数体内（当前作用域）并没有声明i，因此通过作用域链向上查找，而这个循环采用var（var..

js正则表达式1概述2 创建正则表达式3 验证正则表达式4 正则表达式替换1概述​ 正则表达式在js中作为对象存在2 创建正则表达式通过对象方式创建var regexp = new RegExp(/123/);通过字面量的形式创建var rp = /\w/;注：/里面写的正则表达式不加引号，即使是字符串或者数字都不加引号/3 验证正则表达式采用对象方法test()来进行验证，只要字符串某一片段满足该正则表达式，则返回true，否则返回false。如果要对数据匹配等进

js浅拷贝/深拷贝简单理解1. 概述2. 浅拷贝3. 深拷贝1. 概述浅拷贝只是拷贝一层，针对于更深层次的对象级别的数据，只是拷贝引用，因此拷贝之后再修改对象数据时，会把原来的数据一并进行修改操作。深拷贝拷贝多层，每一级别的数据都会拷贝，而对象级别的数据则会另开辟新的空间2. 浅拷贝es6新增方法实现浅拷贝：Object.assign(target,…sources)js实现浅拷贝var o = { uname: 'zt', age: 19,

高阶函数1. 概念2. 接收函数作为参数：回调函数3. 将函数作为返回值输出：闭包1. 什么是闭包2. 闭包的作用1. 概念对其他函数进行操作的函数，其接收函数作为参数/将函数作为返回值输出。2. 接收函数作为参数：回调函数3. 将函数作为返回值输出：闭包1. 什么是闭包有权访问另一个函数作用域中变量的函数。也即一个作用域可以访问另一个函数内部的局部变量，而被访问的局部变量所在的函数便为闭包。简单的可以认为：闭包就是一种现象，一个作用域可以访问另一个函数内部局部变量的一个现象，也可以认为子函数访

js严格模式1. 什么是严格模式1. 概念2. 严格模式对正常模式下的js语义的一些更改3. 注意2. 开启严格模式2. 为脚本开启严格模式3. 为函数开启严格模式3. 严格模式中的变化1. 变量规定2. 严格模式下this指向问题3. 函数变化4. 其他1. 什么是严格模式1. 概念 js提供了正常模式以及严格模式。es5的严格模式是采用具有限制性js变体的一种方式，也即在严格模式下运行js代码，需要严格按照一定的严格的规范才能够通过js解释器解析。2. 严格模式对正常模式下的js语义的一些更

es6之类和对象1.1 概念1.2 创建类1.3 创建对象1.4 类的继承1.5 类的本质1.1 概念es6中新增加了类的概念，可以使用class关键字声明一个类1.2 创建类实例 类似于Javaclass Star { constructor(name) { this.uname = name; } song() { console.log(this.uname); }}var zt = new Star('zt');c

原型链关系图如下：

本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M，localStorage约20M只能存储字符串，可以将对象JSON.stringify编码后存储window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用使用存储数据sessionStorage.setItem(key,value); 获取数据sessionStorag

开源、免费、强大的触摸滑动插件：Swipper.包含各种各样展示效果的轮播图https://swiper.com.cn/解决网站大部分特效展示问题：SuperSlide兼容包括ie6的绝大部分浏览器包含“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、‘无缝滚动"等特效http://www.superslide2.com/index.html轻量级媒体播放器：zyMedia.https://github.com/ireaderlab/zyMedia基于HTML5原生mu.

问题描述移动端由于屏幕双击会缩放页面，因此移动端click事件会有300ms延时情况的产生解决方案方法一：全局禁止缩放在html页面头部的meta标签中加上content=“user-scalable=no”<meta content="user-scalable=no">该方法会让浏览器禁用默认的双击行为并且去掉300ms点击延时适用场景：需要对整个页面进行禁用双击行为。但是一般不常用。方法二：封装tap函数解决300ms延迟原理当手指触摸屏幕，记录当前触摸时

概要功能概要自动播放轮播图用户手动滑动轮播图涉及知识点采用css3中transition实现动画移动过渡效果以及transform实现动画效果采用h5中classList切换类的方式实现底部小圆圈同步变化效果移动端touch触屏事件效果预览实现代码html<!-- 轮播图--><div class="focus"> <ul> <li><img src="../imgs/OIP.jpg" a

功能简述图片随着鼠标位置在导航栏上变化而变化当点击某个导航栏时，图片位置迁移到当前导航栏的位置处效果预览实现原理给每个li标签添加鼠标事件当鼠标悬浮于li标签的时候，将当前li标签的offsetLeft值赋给图片的offsetLeft使其移动当鼠标离开li标签的时候，图片offsetLeft的值重置为之前已点击的li标签的offsetLeft值当鼠标点击li标签的时候，记录当前li标签的offsetLeft值涉及到的animate函数详见js动画函数实现侧边栏动态显示内容.实现

功能预览实现步骤搭建静态框架轮播图实现核心在于：设置图片盒子ul相对于父盒子div的left数值基于以上原理，需要先将图片显示在一条线上，实现左浮动的效果鼠标经过以及离开注册事件当鼠标经过的时候，设置注册事件，显示左右图标，并移除定时器（其中，定时器实现轮播图的自动播放效果）当鼠标离开的时候，设置注册事件，隐藏左右图标，并设置定时器。...

功能概要鼠标悬浮侧边栏 弹出数据框 同时指示图标进行变化效果图实现原理实现过程有两部分组成：显示箭头，以及显示内容盒子通过鼠标悬浮以及离开注册监听事件，监听事件中调用动画函数动画函数事件步骤：1. 通过设置定时器setInterval不断改变显示内容盒子的e.style.left位置2. 并通过移动目标位置与当前内容盒子左偏移offsetLeft来控制移动步数，实现缓动动画3. 结束条件：内容盒子左偏移等于目标位置4. 设置回调函数在结束定时器时设置显示箭头方向注意点移动

功能概要将页面分为四部分，header区域、banner区域、main区域以及侧边栏当页面向下滑动，header区域隐藏时，右侧侧边栏固定在页面上不继续滑动当页面向上滑动，header区域显示时，右侧侧边栏正常随着页面滚动当页面向下滑动，header区域以及banner区域隐藏时，右侧侧边栏显示其他相关信息当页面向上滑动，header区域以及banner区域显示时，右侧侧边栏隐藏其他相关信息效果展示实现代码html<div class="slider-bar">

功能概要可放大图片并查看显示效果实现思路主要分为图片展示盒子、遮挡层、大图显示盒子首先需要完成遮挡层随着鼠标的移动而移动，且遮挡层盒子移动坐标计算方式为：鼠标当前坐标 减去 盒子的offsetWidth，即鼠标在大盒子中的位置考虑大图随着遮挡层的移动而移动，由于遮挡层的移动距离与大图的移动距离不是对等关系，因此为了按照一定比列进行移动并显示，大图的计算方式应该如下：大图的移动距离 / 大图最大移动距离 = 遮挡层的移动距离 / 遮挡层最大移动距离大图移动距离 = 大图最大移动距离

实现根据打开终端的不同跳转页面if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|ios|iPad|Android|Mobile|BlackBerry|IEMobile |MQQBrowser|JUC|Fennec|woSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = " ";// 手机} else { window.locat

css reset出现原因因不同浏览器对css的解析效果存在差异，为了减少各种浏览器下默认样式的差异，采用此方法重置元素在不同浏览器下的默认值。最开始的reset css 方式* { padding: 0; margin: 0;}此方法的学名为：Global White Space Reset，最开始css reset的方式，但是这种方式存在一定的弊端：* 导致css渲染引擎在渲染css的时候，使用 * 遍历整个DOM树，影响渲染性能* 由于是对所有标签元素的重置样式，因此

hack技术1. 什么是css hack技术1.1 使用弊端1.2 应用场景2. 四大内核和五大主流浏览器2.1 四大内核2.2 五大主流浏览器3. css hack分类以及使用3.1 属性前缀法3.2 选择器前缀法3.3 条件注释法（只对IE有效，且只在IE９包括IE9以下得版本有效）1. 什么是css hack技术由于目前不同浏览器以及同一浏览器版本的不同导致同一页面源码显示效果不同，为了解决兼容性问题，满足用户使用体验，在满足大众浏览器的基础上为特殊浏览器编辑只有其所能解析的css，使得所有浏览器

原理通过点击不同的tab实现展示不同的界面的效果，主要是通过对显示不同界面的盒子进行隐藏以及显示来实现的。效果图如下：HTML代码块<div class="box"> <div class="boxHeader"> <ul> <li class="choosed">tab1</li> <li>tab2</li> <

概述前端实现表单全选，反选功能的案例还是蛮多的，为了方便以后复用，这里对其做个总结:效果图总览：html代码块：<table> <!-- 表头--> <thead> <tr> <td><input type="checkbox"/></td> <td>商品名称</td> <td>价格</td&gt