JavaScript
关注
分享
扫一扫
JavaScript：es5,es6,es7等语法，实战练习，面试题目
巧克力很苦
此人因什么都配不齐，什么都没有写
展开
-
js 函数防抖与节流
前言我们为什么需要函数防抖与节流我们在实际开发当中，可定会遇见持续触发的事件如：onmousemove，onchange，resize等这种持续触发的事件，我们还可能会遇见那么持续需要点击的功能：抽奖，点击购买商品等功能以上这种情况都会引出来一个问题，那就是页面可能会卡顿，性能较低等问题那么我们可以通过函数节流和函数防抖等我们人为定义函数功能的方式来解决这种问题什么是函数防抖与节流举个栗子，当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放中基原创 2020-06-17 14:31:46 · 570 阅读 · 0 评论 -
Node核心模块之fs模块02
前言我们知道node.js 当中有一个fs.readFile异步方法来读取文件，其实这个方法是一下子都读取过来数据的这就造成了你读取的时候数据比较多的情况，而我们接下来简绍的流式读取方式是一点点的读取而不是一下子都读取过来的，这样就解决了我们读取数据造成堵塞的情况验证我们使用console上面的time和timeEnd方法参数传一致的时候我们做出了一个标识，来看fs.readFile方...原创 2020-04-16 13:54:56 · 350 阅读 · 2 评论 -
JS当中DOM操作成本到底高在哪儿？
从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是react、vue等mvvm框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底，这里说的成本，到底高在哪儿呢？什么是DOM ？？DOM全称：Document Object Model 文档对象模型什么是DOM？可能...原创 2020-04-14 21:28:54 · 544 阅读 · 0 评论 -
JS题目
第一题["1", "2", "3"].map(parseInt)第二题[typeof null, null instanceof Object]第三题[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)]第四题var val = 'smtg';console.log('Value is ' + (val === 'smtg') ? '...原创 2019-11-10 11:58:49 · 532 阅读 · 2 评论 -
H5新增规范(delete设置非法属性)
前言在HTML中什么是合法属性和非法属性？？<div id="box" class="div" fn='lala' hua='lll'></div>比如说我们常用的标签：p,div,span.ul.ol,li,img 这些是W3C这些开发人员制定的原生的标签当然classidtitle属性也是W3C这些开发人员制定的合法属性当前现在的fn和hua是...原创 2019-10-05 20:32:19 · 629 阅读 · 0 评论 -
H5本地存储(localStorage,sessionStorage)
本地存储前言当你从浏览器的角度想一下，以下代码会在浏览器当中执行什么？？var a = 1;console.log(a);//1当打开浏览器，浏览器会解析标签和脚本做一些事情1）当前通过谷歌浏览器打开了html页面解析了内部的使用标签和js脚本2）在js脚本中发现当前声明了一个变量a，肯定是在内存中开辟空间存储着变量a中的数据13）然后就是console.log(a...原创 2019-10-05 19:51:15 · 593 阅读 · 0 评论 -
H5canvas(保存图片，globalCompositeOperation)
保存图片前言canvas是画布的概念，那么canvas在浏览器表现出来的是一张图片那么我们可以把这张图片右键保存(把canvas以图片的形式保存)（保存的图片格式是png(底部的透明的)）那么怎么用js代码下载canvas图片先在canvas上面画出一个实心圆来吧CSS样式代码<style> *{ margin:0; ...原创 2019-10-05 18:49:27 · 1247 阅读 · 1 评论 -
H5canvas(渐变，绘制图片和视频，画布变换，制作马赛克)
绘制渐变前言绘制一条线段让这个线段的宽度是10颜色是蓝色var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.lineWidth = 10;//设置线宽cxt.strokeStyle = 'blue';//设置线的颜色cxt.beginPath();//...原创 2019-10-05 16:17:27 · 1029 阅读 · 2 评论 -
H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)
Canvas简介canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。什么是canvasHT...原创 2019-10-05 11:04:58 · 1970 阅读 · 0 评论 -
H5多媒体
H5操作节点类名补充(获取元素新方法)注意：只针对于节点上面有id名的元素获取元素有两种方式1.通过document.getElementById('box')方式获取元素(如下)//通过document方式获取idvar oBox = document.getElementById('box');console.log(oBox)2.如果在HTML标签上面有id名的...原创 2019-10-01 11:19:37 · 957 阅读 · 0 评论 -
HTML新增API（练习）
拖拽练习1第一种方式在外部用一个obj变量存储着拖拽元素，在到dragstart事件中利用事件委托的形式把每次点击的元素存储到obj这个变量当中，在到drop事件中用事件委托的形式把obj添加到节点上（别忘了在dragover事件中清除浏览器的默认事件呀）<!DOCTYPE html><html lang="en"><head> <...原创 2019-09-30 13:37:45 · 253 阅读 · 0 评论 -
H5新增API
前言HTML新增的API是放在移动端的IE低版本浏览器就不要去考虑了(H5一般是在做移动端)全屏显示基本概念HTML5规范允许用户自定义网页上任一元素全屏显示(规定了任何元素都可以全屏显示) 元素.requestFullscreen() 开启全屏显示、document.cancleFullscreen() 关闭全屏显示、document.isFullScreen判断当前是否全屏...原创 2019-09-30 13:13:41 · 479 阅读 · 0 评论 -
Jquery插件的编写及使用分享
jQuery插件开发在项目中的使用是非常方便的，那么如何来写一个jQuery插件？接下来我们就来看一看jQuery插件的编写及使用。引言：在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除...此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻高大上的00后有为青年呢~可是该如何高大上呢？这...原创 2019-09-28 22:51:36 · 329 阅读 · 0 评论 -
JS中的for循环、while循环、do...while循环
for循环for循环的作用：可以让在for循环中的代码重复执行基本语法for(循环起点;循环条件;累加器){ 循环体(需要循环的代码块);}循环执行过程：执行循环起点 例：var a=0;循环条件的判断 例：a<5;若循环条件成立，则执行循环体若循环条件不成立，则结束循环然后执行循环体，在执行累加器 例：a++;重复执行第二...原创 2019-09-21 10:12:49 · 590 阅读 · 1 评论 -
js中if 和 switch 判断语句的区别
一直说想要研究底层原理，把知识学深一些，原来真的像初中的物理老师说的那样，把基础的原理都学会，就能做难的题目，高难度题目的框架都是靠简单的原理搭建的。if语句 var num = 5; if(num>7){ document.write('数字大于7') }else if(num>6){ document.write('数字大于6') }else if(n...原创 2019-09-13 11:29:57 · 5353 阅读 · 0 评论 -
JS实现奇偶数的判断
奇数和偶数的判断是数学运算中经常碰到的问题，比如：有变量x，如果x=1则为奇数，为2则为偶数。这篇文章主要讲解通过JavaScript来实现奇偶数的判断。方法一、求余%if…else的形式： var num = parseInt(prompt('请输入数字'));//请输入数字 if((num%2)===0){//判定条件余数为0时为偶数 alert(num + '是' + ...原创 2019-09-07 14:30:10 · 28881 阅读 · 2 评论 -
Module
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。export 命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。...原创 2019-09-06 18:52:50 · 406 阅读 · 0 评论 -
Class
用法class跟let、const一样：不存在变量提升、不能重复声明…es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新...原创 2019-09-06 18:52:38 · 460 阅读 · 0 评论 -
async 函数
含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。反向还有语法盐：主要目的是通过反人类的语法，让你更痛苦的写代码，...原创 2019-09-06 18:52:19 · 556 阅读 · 0 评论 -
Generator
简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。跟普通函数的区别function关键字与函数名之间有一个星号；函数体内部使用yield表达式，...原创 2019-09-06 18:52:08 · 1481 阅读 · 3 评论 -
Promise
概念Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。特点对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态Promise对象代表一个异步操作，有三种状态：pending（进行中）、resolved...原创 2019-09-06 18:51:52 · 258 阅读 · 0 评论 -
Proxy&&Reflect
Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。认识别拦截的对象和拦截器/...原创 2019-09-06 18:51:39 · 346 阅读 · 0 评论 -
Set 和 Map 数据结构
Set 数据结构ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。数据结构是用来存储数据的(数组和对象都可以存储数据) var arr = [1,2,3];//数组里面可以存储任何的数据类型(存储数据的容器) var obj = { name:'huasheng',//对象里面也可以存储数据...原创 2019-09-06 18:51:25 · 483 阅读 · 0 评论 -
Iterator迭代器(for of循环执行的原理)
概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；主要供for...of消费。for of能够遍历到的数据for...of 循环可以遍历的...原创 2019-09-06 18:51:12 · 834 阅读 · 0 评论 -
es6 函数的新增方法和补充for of循环
for of循环es5专门用来遍历对象和数组的 for in 循环遍历对象// 遍历对象 var obj = { name:'huasheng', age:28, } for(var key in obj){//用for in循环遍历obj这个对象 console.log(key,obj[key]); }key是obj的属性名,这些属...原创 2019-09-06 18:50:50 · 805 阅读 · 0 评论 -
se6 新增数据类型Symbol
Symbol为啥需要SymbolES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。Symb...原创 2019-09-06 18:50:40 · 345 阅读 · 0 评论 -
es6 函数扩展补充和对象扩展
箭头函数ES6 允许使用“箭头”（=>）定义函数。箭头函数看似是一个函数,其实他不是一个函数他是一个函数表达式es5的方式定义了一个函数表达式var x = function(){ console.log('我是函数表达式') } x();//让函数执行es6定义了一个箭头函数的形式let fn = ()=>{//箭头函数是简化函数这种写法的 //把原本的...原创 2019-09-06 18:50:27 · 245 阅读 · 0 评论 -
es6 数组的扩展
扩展运算符 ...一下代码的打印结果是什么let [a,b] = [1,2,3,4];console.log(a,b)a从索引0找到了数字1,并且声明了变量a值是1b从索引1找到了数字2,并且声明了变量b值是2那么如何让b获取到后面的所有参数？？？let [a,...b] = [1,2,3,4];//a=1 b=[2,3,4]console.log(a,b)如果想要得到b后...原创 2019-09-06 18:50:16 · 318 阅读 · 1 评论 -
es6 字符串扩展&&数值扩展
字符串新增方法如何判断字符s是在字符huasheng中呢let str = 'huasheng';//es5中通过序列号判断在不在当前字符串当中console.log(str.indexOf('s')===-1);如果是true是不在指定字符中，如果false是在指定字符当中indexOf方法是查看指定字符在字符串中的序列号，如果不在字符串中那就是-1(默认不在当前指定字符的位置)f...原创 2019-09-06 18:50:05 · 335 阅读 · 1 评论 -
es6 变量的解构赋值
什么是解构赋值？？？在Es6中提供了更高效的变量赋值方法，可以按照一定模式，拆解数组，对象，字符串的结构给变量赋值。这种方式称为解构赋值。数组的解构赋值在es5中如何拿到一个数组的索引项呢var arr = [0,1,2];var a = arr[0];//拿到索引0项var b = arr[1];//拿到索引1项var c = arr[2];//拿到索引2项//声明了3个变量存储...原创 2019-09-06 18:49:43 · 619 阅读 · 1 评论 -
es6 let&&const
JS的三大组成部分JS语法 --> ECMAScript -->es5 -->es6DOM --> Document Object Model(文档对象模型) 可以操作html+cssBOM --> Browser Object Model(浏览器对象模型)let和var的区别在es5和es6中如何声明一个变量如何声明一个变量(es5)var a ...原创 2019-09-06 18:49:29 · 496 阅读 · 3 评论 -
js加载时间线
JS时间线原创 2019-09-06 18:49:19 · 987 阅读 · 0 评论 -
AJAX
form表单是如何请求（发起）数据的get方式提交数据<form action="https://tieba.baidu.com/" method="get" > 用户名字：<input type="text" name="username"><br> 密码：<input type="password" name="password"...原创 2019-09-06 18:48:54 · 4221 阅读 · 1 评论 -
构造函数&&原型（继承，Object.prototype.toString()，克隆对象）
继承个对象A 要使用对象B的属性和方法，这种现象就叫做 继承JS中实现继承的方式原型链继承 弊端：继承了太多无关的属性借用构造函数 弊端：每次构造函数执行都会多执行一次借用构造函数继承的第一种方式：原型链 function Grand(){ /* this-->{ __proto__:Gran...原创 2019-09-06 18:48:43 · 369 阅读 · 0 评论 -
数组的常用方法
数组的特点什么是数组数据是一组数据的集合数组里面可以放任意的数据类型数组是引用数据类型，操作数组时实际是在操作数组的内存地址数组是由字符串属性名和属性值组成的特殊对象，我们把数组的属性名叫做数组的索引创建数组的方式var arr = [0,false,true,3,undefined,null,{}]如何知道数组中到底用几个数据 var arr = [1,2,2,34,nu...原创 2019-09-06 18:48:24 · 904 阅读 · 0 评论 -
构造函数&&原型（包装类（包装对象）、工厂模式&&构造函数、原型）
对象的创建方式var obj = {}叫做对象字面量或者叫做对象直接量那么如何给当前对象添加一个属性和方法呢？？ var obj = {};//对象字面量/对象直接量 obj.name = "huasheng";//添加属性 obj.sayName = function(){//添加方法，方法是个函数 console.log(this.name); };...原创 2019-09-06 18:47:55 · 260 阅读 · 0 评论 -
构造函数&&原型（补充原型题目、原型链、 hasOwnProperty和 instanceof属性）
补充原型题目第四题 function Person(){ // __proto__这个属性记录person1的原始模型 /* this -->{ __proto__:Person.prototype; } ...原创 2019-09-06 18:47:44 · 385 阅读 · 0 评论 -
正则表达式（ 形容词、转义符号、补充）
形容词var str = "hunasheng"; var reg = /n/; console.log(str.match(reg));结果是在索引2的位置上匹配到了n那么我向让他在最后的位置匹配到了n，那个怎么办？？先要匹配到最后的n，那么你要定义一个规则，并且这个规则能在最后匹配到n，那么要形容修饰一下n var str = "hunashengn";...原创 2019-09-06 18:47:32 · 976 阅读 · 0 评论 -
正则表达式(正则表达式的方法和属性、正则的修饰符、表达式、元字符、量词)
什么是正则表达式正则表达式是一种规则，而这种规则能够匹配字符串的一种匹配模式，专门为简化字符串操作而生的正则表达式的创建方式var reg = /2/;//创建正则表达式 console.log(reg)正则表达式是由，两波反斜杠包裹的数据/2/那么正则表达式，是什么数据类型的呢？？var reg = /2/; console.log(typeof reg)...原创 2019-09-06 18:47:17 · 544 阅读 · 0 评论 -
BOM
JS的组成：ECMAScript --> es5DOM --> document object model 文档对象模型BOM --> browser object model 浏览器对象模型什么是BOM？？？ ==> Broswer Object ModelBOM和DOM类似也是一个编程接口,这个编程接口让JavaScript有能力与...原创 2019-09-06 18:47:02 · 886 阅读 · 0 评论