- 博客(30)
- 收藏
- 关注
RSS订阅原创 ES6之class
ES6中的类目录ES6中的类class与构造函数类与构造函数对比静态方法和静态属性私有方法和私有属性类的取值函数（getter）和存值函数（setter）new.target类注意点class与构造函数基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //类的写法 class Point{ getName(){ return 'lili'; }
2020-09-27 20:44:25
351
原创 Promise基本实现源码
Promise基本源码Promise方法一个简单的Promise方法执行过程 const promise = new Promise(function(resolved, reject){ setTimeout(function(){ if(true){ resolved('成功'); }else{ reject('失败'); } },1000); }) promise
2020-09-19 15:36:49
257
原创 ES6 生成器（Generator）
ES6 生成器（Generator）目录ES6 生成器（Generator）什么是生成器？基本用法生成器相关操作斐波那契数列对象中的Generator什么是生成器？生成器就是通过构造函数Generator创造出来的对象，生成器既是一个迭代器，同时也是一个可迭代对象基本用法基本语法： function* myGenerator() { yield 'one'; yield 'two'; return 'three'; } var g = myGenerator();
2020-09-15 20:12:54
724
原创 ES6 中的迭代器(Iterator)
ES6迭代器目录ES6迭代器迭代器（Iterator）基本语法应用for…of循环for…of与for…in的区别迭代器（Iterator）什么是迭代？Iterator迭代器从一个数据集合中按照一定的顺序，不断的取出数据的过程Iterator 的作用：为各种数据结构， 提供一个统一的接口使得数据结构的成员能够按某种次序排列迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完迭代和遍历的区别？迭代强调的依次取出，不能确定可以取出的值有多少，也不能保证去吧数据全部取完
2020-09-10 20:42:41
497
原创 ES6 Promise对象详解
Promise对象目录Promise对象概述Promise解决异步的优点基本用法then 方法原型成员（实例方法）构造函数成员（静态成员）方法详解概述Promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise对象两个特点：对象的状态不受外界影响。有三种状态：pending：挂起（等待） 处于未决阶段 表示事情还在挂起种，最终结果没有出现resolved ：已成功 ， 处于已决阶段rejected：已失败 ，处于已决阶
2020-09-08 20:16:20
294
原创 ES6中的函数(箭头函数)
ES6中的函数函数参数的扩展默认值的临时性死区：不定参数的使用箭头函数应用场景函数参数的扩展默认参数：在 ES5 语法中，为函数形参指定默认值的写法： function foo (bar) { bar = bar || 'abc'; console.log(bar) } foo('xyz')使用 ES6 的语法为函数形参指定默认值 function foo (bar='abc') { console.log(bar) } foo('xyz') //xyz
2020-09-02 20:41:34
165
原创 ES6新增数据类型（Symbol）
ES6新增数据类型（Symbol）基本(原始)类型和引用类型介绍在了解Symbol之前，我们需要了解下JS的数据类型，在JS中数据类型分为两类：基本(原始)类型和引用类型。基本(原始)类型：数值型（Number)，字符类型（String），布尔值型（Boolean），null 和 underfined引用类型：对象（Object）那es6新增的Symbol是什么类型呢？ 这里Symbol也是基本类型；概述ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来
2020-09-01 20:50:03
860
原创 ES6 变量的解构赋值基本用法
ES6 变量的解构赋值变量的解构赋值解构赋值是对赋值运算符的扩展。即结构化赋值ES6允许我们通过数组或者对象的方式，对一组变量进行赋值，这就称为解构（等号两边的结构一定要相等这样才能拿到你需要的值）数组中的解构赋值语法：let [a,b,c] = [1,2,3](把右边的值对应下表赋值给左边的变量)本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值 let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c
2020-08-29 12:04:30
178
原创 ES6中的字符串模板
ES6字符串模板模板字符串语法：把字符串写在``里面，${变量、表达式、函数}：获取值 var obj ={ name: '张三', age: 20 } // 传统打印 console.log("我的名字叫" + obj.name + ",今年" + obj.age + "岁"); // ES6 console.log(`我的名字叫${obj.name},今年${obj.age}岁`);如果模板字符串的变量没有声明，将报错由于模板字符串的大括号内部，就是执
2020-08-27 19:49:25
1368
原创 ES6历史及新增两个重要的关键字
ES6历史前言ECMAScript是JavaScript的语法标准，而ES6是 JavaScript 的下一个版本标准，2015.06 发版。ps：严格来说，ECMAScript还包括其他很多语言的语法标准现在大部分的编写一般都是ES3.1语法,比如jQuery的语法就比较倾向ES3，但是现在的主流框架Vue.js和React.js的语法，就大量用的都是ES6语法，node全部都是ES6的语法ES6中增加了很多功能上的不足，比如常量、作用域、对象代理、异步处理、类、继承、面向对象等ECMAScr
2020-08-26 20:02:39
286
原创 浏览器搜索引擎（SEO）优化
搞定搜索引擎（网页的SEO）目录搞定搜索引擎（网页的SEO）什么是SEO从head标签的meta标签下手keywordsdescription两大电商网站从网页结构上什么是语义化常用语义化标签有哪些语义化的好处什么是SEOSEO（Search Engine Optimization）：搜索引擎优化为什么要SEO：简单来说就是，不花一分钱提高你网站的被搜索的概率SEO的方法有很多种，今天来介绍从网页的结构上进行优化从head标签的meta标签下手meta标签的两大提高搜索引擎搜索的扛把子：k
2020-08-25 20:01:31
1695
原创 CSS margin带来的塌陷问题
CSS margin带来的塌陷问题塌陷问题就是当父元素包裹子元素时，子元素设置margin-top时，并不是子元素上边距离父元素上边一段距离，而是子元素和父元素同时距离bfc（块级格式上下文）下边的距离如下<head> <style> body{ background-color: #ccc; } .d1{ width: 500px; height:
2020-08-25 19:08:07
158
原创 初识AJAX
初识AJAX简介Asynchronous JavaScript and XML （异步的 JavaScript 和 XML）。是指一种创建交互式网页应用的网页开发技术。用js通过http协议向服务器发送xml数据。目前json比较流行AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 工作原理AJAX 工作流程创建 XMLHttpRequest 对象，XMLHttpRequest 是 AJAX 的基础，XMLHttpRequest 用于在后
2020-08-18 19:15:43
167
原创 ES5新增的数组方法
ES5新增的数组方法1. forEach()forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。第一个参数是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身，第二个参数是this的指向 var arr=[1,2,3,4,5]; arr.forEach(function(ele,index,self){ console.log(ele,index,self) })
2020-08-12 19:52:03
115
原创 echarts绘制中国版图
echarts绘制中国版图刚学习几天的echarts，觉得很好玩，很不错，工作中也经常会用到，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架echarts官网：https://echarts.apache.org/zh/index.html下面就是用echarts绘制的中国地图先要引入Echarts <script src="echarts.js"></script>
2020-08-06 20:02:53
1304
原创 jQuery绑定事件及动画效果
jQuery绑定事件及动画效果绑定事件on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。bind(type,[data],fn)：为每个匹配元素的特定事件绑定事件处理函数。one(type,[data],fn)：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。常见事件类型 - blur 失去焦点 focus 获得焦点 resize 调整浏览器窗口的大小 scroll 滚动指定的元素时 unload 离开页面时
2020-08-04 19:02:49
217
原创 初识JQuery
JQuery基础入门JQuery简介jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。JQuery 的优势写的少，做的多轻量级强大的选择器JQuery 允许开发者使用从CSS1到CSS3几乎所有的选择器出色的DOM操作的封装可靠的事件处理机制完善的AJAX出色的浏览器兼容性链式操作方式文档就绪函数的三种写 $(document).ready(function (){ alert
2020-07-29 19:54:55
174
原创 JavaScript如何实现冒泡排序
JavaScript实现冒泡排序冒泡排序冒泡排序是一种非常基础的排序方法，其原理就是从把一个数组中的每一个数从前往后依次进行比较，然后根据大小交换位置，每一轮的比较都确定出一个当轮比较的最大值，最终实现数组的大小排序。下面我们用JS实现冒泡排序。JS实现随便创建一个数组 var arr=[55,33,22,44,11,8,9,7,23]确定轮数假设数组中有n个数，则需要n轮，而每一轮中比较的次数都要减去已经确定的数值，即第i轮需要比较的次数为：n-i，可以用一个嵌套for循环来实现。
2020-07-28 18:57:29
512
原创 CSS3弹性盒子属性
CSS3弹性盒子属性目录CSS3弹性盒子属性设置弹性盒子：display设置在父容器上的属性flex-direction：子元素在父容器中的位置（默认row）主轴和交叉轴（侧轴）flex-wrap：子元素换行方式（默认nowrap）align-items：基于交叉轴对齐（单行）（默认stretch）align-content：基于交叉轴对齐（多行）（默认stretch）justify-content：基于主轴对齐（默认flex-start）设置在子容器上的属性flex-grow：设置或检索弹性盒的扩展比率
2020-07-23 20:29:39
659
原创 JavaScript中有关this的几种用法
JavaScript中this的用法在函数执行时，this 总是指向调用该函数的对象。要判断 this 的指向，其实就是判断 this 所在的函数属于谁。1. 在一般函数方法中使用 this 指代全局对象，预编译过程指向window var x =1 ; function test(){ console.log(this.x) } test() //1这里的输出是1，因为在函数中属于全局性的调用，因此this指代window，代表全局对象2. 作为对象方法调用，this 指代上级对象
2020-07-22 20:04:53
294
原创 JS函数作用域的问题
JS函数作用域的问题作用域：js中所有的变量，都有自己的作用域。当我们要访问变量时，必须要在规定的作用域下才能访问的到。首先作用域这个名词，它针对的是变量，产生于函数的层级关系。也就是说，因为函数的嵌套使用，在不同函数层级中声明的变量，才出现了不同的作用域。函数作用域：使用范围全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用，除了函数以外,其他的任何位置定义的变量都是全局变量局部变量:在函数内部定义的变量,是局部变量,外面不能使用全局
2020-07-21 19:42:31
165
原创 CSS3中那些新增的选择器
CSS3中那些新增的选择器要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。css3之前的选择器id选择器类选择器伪类选择器（:link,visited,hover,active,focus,first-child）伪元素选择器（::first-line,first-letter,before,after）通配选择器(*)属性选择器(E[att=“val”])子包含选择器(E>F)
2020-07-20 19:42:18
507
原创 JavaScript中常用的数组API
JavaScript中常用的数组API将数组转化为字符串（String） var arr=["a","b","c","d","e"]; console.log(String(arr)); //a,b,c,d,epush()+pop()push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。 var arr=["a","b","c","d","e"]; console.
2020-07-16 20:11:49
288
原创 JavaScript中常用的字符串API
JavaScript中常用的字符串APIlength：获取字符串的长度 var str="abcde"; console.log(str.length); //5charAt()：返回指定位置的字符 var str="abcde"; console.log(str.charAt(0)); //a console.log(str.charAt(3)); //dcharCodeAt()：返回指定位置的字符的Unicode编码 var str=
2020-07-15 20:12:58
314
原创 HTML5实现图片的拖拽
HTML5元素拖拽drag与拖放drop元素拖拽浏览器默认允许我们拖拽图像、文本以及链接让其它元素被拖动也是可以实现的只需要在元素标签上添加一个属性 <img src="0.jpg" width="266" draggable="true">draggable属性，默认为true，false即不能拖拽。拖拽事件拖拽事件应该分为两类一类是被拖拽元素触发的事件另一类是拖放目标元素触发的事件 <div class="d1"> <p>源元
2020-07-14 16:47:11
5352
原创 那些年我们玩过的2048
那些年我们玩过的2048首先这个小游戏，相信大家一定都玩过，那今天就一步一步来实现。目前为止，基本功能已经实现，只是没有添加相应的动画效果，待以后有机会补上。游戏截图 基本思路当初次游戏的时候，视图更新，分数更新，随机在两个位置生成一个数，当按左键的时候，所有的数字往左移动，如果有相邻相同的数字就相加，同时再随机生成一个，右上下亦是如此。主要功能1.游戏初始化：新建游戏4×4的16宫格画布，随机格子上生成2或者4两个数字2.格子的移动：先判断能否移动，移动后判断能否合并，合并后改变
2020-07-11 11:48:08
185
原创 JavaScript中你可能不懂的DOM
JavaScript中你可能不懂的DOM首先来看看DOM继承树DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口document HTMLDocument Document的关系看如下图显然很明显了document–>HTMLDocument.prototype–>Document.prototype再看如下代码
2020-07-09 19:36:10
271
原创 那些你可能不知道的JavaScript
那些你可能不知道的JavaScriptJavaScript语音涉及到的内容是非常非常多的，首先我们来谈谈创建对象常用的几种方式方式一：通过对象字面量表示法（又称为直接量、原始方式）var obj={name:"xyz123"}对象字面量是一个名/值对列表，每个名/值对之间用逗号分隔，名和值之间用冒号分隔，最后整体用一个花括号括起来。属性名可以使用数值，数值属性名会自动转换为字符串。在ES5中，对象直接量中的最后一个属性后的逗号可以省略，且在ES3的大部分实现中也可以忽略这个逗号，但在IE中则报
2020-07-08 19:59:31
296
原创 JS时间线及异步加载三种方法
JS时间线及异步加载时间线是什么样的一个步骤呢1、先创建一个document对象，浏览器开始去解析你的html页面，document.readyState=‘loading’2、当遇到外部资源（外部js文件、外部css文件、外部的图片、以及一些标签的href）的时候，除了script标签中的src（当没有设置async、defer）为同步，其余的全部为异步（主线程去调子线程完成）dom解析完以后document.readyState=‘interactive’（外部资源可能还没下载完成）3、
2020-07-07 21:10:31
351
原创 你真的了解JavaScript吗
**你真的了解JavaScript吗?**JavaScript最初由网景(Netscape)公司创建，名为LiveScript。在Netscape发展LiveScript的同时，Sun公司也在发展Java语言，为了使双方都能受益，两家公司进行合作，Netscape才将LiveScript语言改名为JavaScript.后来JavaScript被Netscape公司提交给ECMA(European Computer Manufacturers Association，即欧洲计算机厂商协会)制定为标.
2020-07-06 19:27:11
413
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人