- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 ES6 symbol
Symbol为什么需要SymbolSymbol是什么 为什么需要Symbol ES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbo...
2020-04-12 20:51:40
220
原创 Set 和 Map
Set 数据结构 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 数据结构是用来存储数据的(数组和对象都可以存储数据) var arr = [1,2,3];//数组里面可以存储任何的数据类型(存储数据的容器) var obj = { name:'huasheng',//对象里面也可以存储数据...
2020-03-26 17:28:24
218
原创 ES6中箭头函数的使用
箭头函数箭头函数的基本用法使用箭头函数注意事项箭头函数的 this不适用箭头函数的场合嵌套的箭头函数 箭头函数的基本用法 箭头函数是一个函数表达式，理论上，任何使用函数表达式的地方都可以改成箭头函数。 //ES5 普通函数 function 函数名(参数1,参数2...){ 函数体 } //ES6 箭头函数 (参数1,参数2...) => 函数体 如果参数只有一个，可以省略小括号 唯一...
2020-03-22 22:46:34
508
原创 JSON.parse() 与 JSON.stringify()用法
JSON.stringify()与JSON.parse()的区别 JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()是将JSON字符串转为一个对象。 两者作用是相对的，可以用JSON.stringify()将对象a变成字符串c，也可以用JSON.parse()将字符串c还原成对象a var msg = {"message": ...
2020-03-15 13:14:27
428
原创 js时间线
开始绘制DOM树 document.readyState = "loading" 碰到外部的css的时候，DOM树继续绘制，就有其他的线路去下载此css文件 script中src外部脚本 如果没有async或defer，DOM树停止绘制，脚本下载完成执行后，继续绘制DOM树（同步） 如果有async或defer，DOM树继续绘制，就有其他的线路去下载此js文 img的src、iframe的...
2020-03-10 17:27:45
268
原创 JS模拟瀑布流无限加载
效果图：随着鼠标往下滚动，不断加载生成不同颜色 大小的图片 HTML <div id="content"> <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> CSS * { ...
2020-01-09 20:50:51
471
原创 响应式布局和自适应布局&区别
1.什么是响应式布局和自适应布局 响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。 响应式开发的原理 动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏。 响应式开发的优缺点 优点： 对于不同设备只需要开发一套网页即...
2020-01-08 20:12:57
1557
原创 JS深度克隆
由于JS原始值和引用值的数据存储方式不一样（堆和栈），导致对引用值进行修改的时候会导致两个相同储存地址的引用值一起发生改变 深度克隆方法： function clone(obj) { let result = obj instanceof Array ? [] : {} for (let key in obj) { ...
2020-01-07 20:18:32
214
原创 纯css制作旋转的立方体&跟随鼠标旋转
思路： 首先有一个正方形，根据rotate translate属性设定好正方体六个面的位置 然后用animation动画让正方体进行360°的旋转 具体代码： .box { width: 200px; height: 200px; /* border: 1px dashed red; */ margin: 100px auto; position: relative;...
2020-01-05 21:41:26
522
原创 H5本地存储
H4中使用的cookie把用户信息保存在客户端浏览器，但是它受到很多限制。 大小：最多能存储4k 带宽：它是随着http请求一起发送到服务器的，因此浪费一部分的带宽 复杂度：操作复杂 H5新增加了一种在客户端本地存储数据的方法 webStorange,分两种形式sessionStorage和localStorage。 使用键值对的方式进行存取数据，存取的数据只能是字符串。 存储大小不超...
2019-12-30 18:38:18
792
原创 JS--Object题
题目： var a = {}; var b = { key: 'b' }; var c = { key: 'c' }; var d = [3, 5, 6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log('a[b]=', a[b]); console.log('a[c]=', a[c]); console...
2019-12-02 20:01:59
383
原创 JavaScript--DOM
什么是DOM 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 DOM的分类 核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。 特点：万能但复杂且繁琐 HTMLDOM：针对HTML文档，提...
2019-12-02 15:21:11
178
原创 数组和类数组
什么是类数组对象 (ArrayLike) 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解) 不具有数组所具有的方法 JavaScript中常见的类数组 arguments对象 DOM方法返回结果（getElementsByTagName()、getElementsByClassName()…） 判断一个对象是否为类数组...
2019-11-23 14:15:14
353
原创 JavaScript闭包
什么是闭包？ 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 JS中，在函数内部可以读取函数外部的变量 function outer(){ var num = 10; return num; } outer();//10 但在函数外部无法读取函数内部的局部变量 function outer(){ var nu...
2019-11-12 21:02:35
155
原创 JavaScript预编译
JavaScript预编译 事实上，JavaScript是一门解释性语言，不是编译语言，不存在编译，只是通常这样说。 JavaScript预编译 JavaScript引擎的三大步骤 1，预编译（第一次扫描）扫描全部变量 2，解释执行（第二次扫描） 总结：JS运行过程 全局预编译(脚本代码块script执行前) 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为...
2019-11-11 23:26:07
214
原创 CSS基础面试题（二）
1.display:none、visibility:hidden与opacity:0的区别？ display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘） opacity:0 占据空间（重绘） 2.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ 浮动元素碰到包含它的边框或者浮动元...
2019-11-10 20:58:07
182
原创 前端基础练习题
一、组合问题：用1元纸币兑换1分，2分和5分的硬币，要求兑换总数为50枚，问可以有多少种组合，每种组合对应1分，2分，5分分别是多少？ i代表1分，j代表2分，k代表5分 function num(){ var count = 0; //计数器 for(var i = 0;i <= 100;i++){ for( var j = 0;j <= 50;j++){ ...
2019-11-10 20:57:29
1675
原创 CSS基础面试题(一)
1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2.box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W...
2019-11-04 19:25:36
166
原创 JavaScript：数组的基础知识
一、什么是数组 存储一堆变量，内存中连续存储多个数据的存储空间，再统一取名字（连续存储方便维护和查询） 二、什么时候使用数组 连续存储多个数据，必须使用数组 三、如何使用数组 1.创建空数组 var arr = new Array(); var arr = []; 2.创建数组的同时，初始化数组内容 var arr = new Array[1,2,true,"a"]; var arr = [1,...
2019-11-02 14:25:26
231
原创 JavaScript--数据类型
JavaScript中数据类型分为两种： 1.基本数据类型 2.引用数据类型 一、基本数据类型 1.string/字符串类型 字符串（或文本字符串）是一串字符。字符串被引号包围。可使用单引号或双引号 var str = "abc"; var txt = 'hello world'; 2.number/数字类型 var num = 6; 3.boolean/布尔类型 布尔值只有两个值：true ...
2019-10-27 21:20:06
1133
原创 CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在HTML代码中，我们有时候需要在图片后面加上简单的文字进行说明，但默认情况下，图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。 要想解决这个问题，常见方法有3种： 1、通过添加css的 vertical-align:middle; 2、如果图片是背景图片，可以在css中设置背景图片； 3、把文字和图片分别放入不同的div中。...
2019-10-20 17:16:36
4742
原创 CSS
一、CSS简介 CSS指层叠样式表 (Cascading Style Sheets) 用于渲染HTML元素标签的样式. CSS 可以通过以下方式添加到HTML中: 1.内联样式 : 在HTML元素中使用"style" 属性 <p style="color: red;font-weight: bold;">这是内联样式</p> 2.内部样式表 : 在HTML文档头部区域使用...
2019-10-13 17:15:57
137
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人