JavaScript基础知识
文章平均质量分 52
JavaScript
guokanglun
这个作者很懒,什么都没留下…
展开
-
css 动画、滤镜
只需要规定起始帧和结束帧(1)参数过渡动画时间:transition-duration过渡动画延迟:transition-delay动画帧速率: transition-timing-function复合样式:属性名 过渡时间 过度动画时间函数 动画延迟时间;display:none --> display: block 没有动画效果opacity: 1 --> opacity: 0 有动画效果 轮播淡入淡出效果2. 主动式动画创建动画帧:语法:参数:animation-原创 2022-07-08 16:23:11 · 379 阅读 · 0 评论 -
数组骚操作
作用:将对象展开1.2 复制数组(浅拷贝)1.3 合并数组1.4 字符串 转数组2. 数组循环2.1 forEach2.2 map重新整理数据结构2.3 filter过滤数组2.4 some every返回布尔值2.5 reduce统计,求和3 . Array.from()作用: 把类数组对象转成数组3.2 类数组转数组3.3 数组过滤3.4 接收第二个参数(函数), 处理每一个对象,类似map3.5 假值 用 0 替换4. arr.find()原创 2022-07-07 17:31:56 · 365 阅读 · 0 评论 -
js替换所有
例: 将字符串里的a替换为fconst str = 'Abcabcabcabcabcabc';// g 全局匹配; m 换行匹配; i 忽略大小写const res = str.replace(new RegExp('a', 'gmi'), 'f');console.log(res); // fbcfbcfbcfbcfbcfbc原创 2021-03-25 16:07:20 · 869 阅读 · 0 评论 -
mouseenter、mouseleave、mouseover和mouseout的区别
mouseenter 鼠标移入mouseover 鼠标移入mouseleave 鼠标移出mouseout 鼠标移出mouseenter 和 mouseleave 是 一组mouseover和mouseout 为另一组区别:父元素绑定 mouseenter 和 mouseleave 事件, 子元素不会触发;父元素绑定 mouseover 和 mouseout 事件, 子元素会触发;测试代码<!doctype html><html lang="en">原创 2021-02-12 19:31:20 · 315 阅读 · 1 评论 -
DocumentFragment
文章目录1. 描述2. 使用1. 描述DocumentFragments 是DOM节点。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。2. 使用<!doctype html><html lang="en"><head> &原创 2020-11-30 13:50:55 · 586 阅读 · 0 评论 -
Object.defineProperty
文章目录1.语法2. 属性描述符3. 使用4. 点运算符和 Object.defineProperty()区别5. get setObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。1.语法Object.defineProperty(obj, prop, descriptor)参数obj要定义属性的对象。prop要定义或修改的属性的名称或 Symbol 。descriptor要定义或修改的属性描述符。2. 属原创 2020-11-28 22:32:52 · 152 阅读 · 0 评论 -
h5 视频
文章目录1. Video 标签属性4.1 关于source标签5.Video API方法6. 基本事件7. Video API属性二. HTML 5 音频1. audio 标签属性3. audio API属性1. Video 标签属性Src 视频url地址Autoplay 视频就绪自动播放controls 向用户显示播放控件Width 设置播放器宽度Height 设置播放器高度Loop 播放完是否继续播放该视频,循环播放Preload是否等加载完再播放Poster加载等待的画面图片原创 2020-10-24 09:16:57 · 260 阅读 · 0 评论 -
canvas
Canvas一.概述Canvas是HTML5中非常重要的一个更新亮点,画布,替代Flash的!制作动画、制作游戏。渲染效率非常的高,浏览器不需要安装任何的插件就可以渲染这个动画1. Hello Worldcanvas是一个标签,有一个默认的宽高(300px,150px)。如果我们要设置宽度、高度,必须设置在HTML标签上面,而不能设置在CSS上。我们必须使用JavaScript来控制Canvas渲染各种东西:<style type="text/css"> canvas{原创 2020-10-23 20:20:03 · 272 阅读 · 0 评论 -
跨域
1. 同源策略同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。后台设置响应头Access-Control-Allow-Origin: * 解决跨域问题node 服务原创 2020-10-23 08:10:43 · 123 阅读 · 0 评论 -
es6 class类
类class1. ES6中class的用法ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。1.1 . 复习之前模拟的类之前用函数模拟类function Person(name, age) { this.name = name; this.age = ag原创 2020-10-22 16:43:57 · 234 阅读 · 0 评论 -
esmodule
文章目录一. export命令1. 如何定义模块1.1 export输出变量的写法:1.2 export`命令输出函数或类(class)。1.3 as关键字重命名1.4 特别注意2. 如何使用模块2.1 as关键字改变量名2.2 import 提升2.3 import不能使用表达式2.4 模块化整体加载import 特点import() 动态引入导出 export特殊形式例子:一. export命令1. 如何定义模块一个模块就是一个独立的js文件导出模块export 东西1.1 exp原创 2020-10-22 12:24:04 · 251 阅读 · 0 评论 -
generator
generator1. 基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。生成器,也是一个函数,generator出来的目的是帮我们解决异步问题, 其实就是解决代码复杂后造成的深度嵌套的问题之前学过的Promise也是解决这个问题的当成出来的时候挺好的,但是现原创 2020-10-22 10:09:58 · 125 阅读 · 2 评论 -
async await
async 函数 & await1. async含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖?意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西。反向还有语法盐:主要目的是通过反人类的语法,让你更痛苦的写代码,虽然同样能达到避免代码书写错误的效果,但是编程效率很低,毕原创 2020-10-22 10:09:21 · 117 阅读 · 0 评论 -
set map
Set & WeakSetES6新增的数据结构, 数组其实就是一种数据结构Set数据结构类似于数组,但又跟数组不一样,数组里面可以有重复的值,Set里面不能有重复值let arr = ['a','b','c','a'];console.log(arr); // ["a", "b", "c", "a"]let set = new Set(['a','b','c','a']);console.log(set); // Set(3) {"a", "b", "c"}创建数组的两种方原创 2020-10-21 15:29:18 · 179 阅读 · 0 评论 -
proxy 代理
Proxy 代理Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”,即对编程语言进行编程。讲通俗一点就是扩展(增强)了对象,方法(函数)的一些功能ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。Proxy其实是设计模式的一种,代理模式1. 语法使用new Proxy(target,handle)参数第一个参数: target 是你要代理的对象第二个参数,handle是对代理对象做什么操作{ set(){}, get原创 2020-10-21 15:28:40 · 4541 阅读 · 0 评论 -
iterator迭代器
概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Iterator 的作用有三个:为各种数据结构,提供一个统一的、简便的访问接口;使得数据结构的成员能够按某种次序排列;主要供for...of消费。Iterator本质上,就是一个指针对象。过程是这样的:(1)创建一个指针对象,指向当前数据结构的起始位置。(2)第一次调用指针对象的next方法,可以将指针指向数据结原创 2020-10-21 12:57:54 · 92 阅读 · 0 评论 -
es6新增基本数据类型Symbol
1.为什么用SymbolES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和原来的属性名发送冲突,显然我们是不希望这种情况发生的。所以,我们需要确保每个属性名都是独一无二的,这样就可以防止属性名的冲突了。因此,ES6里就引入了Symbol,用它来产生一个独一无二的值。作用: 生成一个独一无二的值2. Symbol是什么定义:Symbol实际上是ES6引入的一种原始数据类型以前学过的数据类型原创 2020-10-21 10:50:40 · 545 阅读 · 0 评论 -
es6 对象扩展
文章目录一. 对象简洁语法二.属性名表达式三. 对象新增1. Object.is() 用来比较两个值是否相等2. Object.assign() 用来合并对象的2.1 如果属性名有重复,2.2如果只有一个参数,`Object.assign`会直接返回该参数。2.3 由于`undefined`和`null`无法转成对象,所以如果它们作为参数,就会报错。2.4 可以利用这个方法来拷贝数组3. Object.keys() Object.entries() Object.values()四.对象的扩展运原创 2020-10-21 10:16:03 · 101 阅读 · 0 评论 -
es6 数组扩展
文章目录一. 扩展运算符1. 扩展运算符的使用1.1 替代了apply方法1.2 可以快速取出数组中的最大值2. 扩展运算符的应用2.1 复制数组2.2 合并数组3. 与解构组合使用4. 类数组转数组二. 数组循环1 . 常用循环2. ES 5 新增的循环方法以上这些方法接收的参数一模一样,接受两个参数2.1 普通for循环2.2 forEach用法2.3 map的用法2.4 filter2.5 some every3. ES 5 新增的不一样方法2.6 reduce reduceRight三.E原创 2020-10-20 20:27:33 · 225 阅读 · 0 评论 -
reset ... 扩展运算符
文章目录1. 扩展运算符,reset运算符1.1 扩展运算符1.2 重置运算符,配合函数使用1.3 解决了arguments问题1.4 传参时扩展1.5 又叫剩余运算符总结1.6 函数的length不包括rest参数ES6 引入 reset 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。reset 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。1. 扩展运算符,reset运算符写法就是... 三个点两个作用,扩展和剩余1.1 扩展运算符原创 2020-10-20 12:12:30 · 397 阅读 · 0 评论 -
函数扩展
文章目录一. 函数参数的默认值1. ES6设置默认参数4. 默认参数的位置5. 结合对象解构赋值6. 函数的参数默认已经定义了,不能再用let,const声明二. 默认参数对函数length的影响三. 默认值与作用域一. 函数参数的默认值1. ES6设置默认参数传参就使用传入的参数,没有就使用默认参数function show(a = 'hello', b = 'world') { console.log(a, b)}show() // hello worldshow('世界',原创 2020-10-20 12:00:31 · 175 阅读 · 0 评论 -
es6 Number新增
一. Number新增方法数字的变化以前的方法都是挂着window身上的,我们会就得很奇怪,明明是处理数字的方法,为什么不定义在Number身上,而要定义在全局,ES 6改变了现在挂着在Number自己身上所以isNaN() 和 Number.isNaN()的用法完全一样现在parseInt(),parseFloat()两个方法也挂着到了Number上.1. .Number.parseInt()、Number.parseFloat()ES6 将全局方法parseInt()和parseFloat(原创 2020-10-20 09:46:19 · 186 阅读 · 0 评论 -
es6 字符串新增
字符串扩展一.模板字符串1. ES5的字符串处理es5的字符串模板输出通常是使用+拼接。这样的缺点显然易见:字符串拼接内容多的时候,过于混乱,易出错。let name = "wuwei";let age = 18;let str = "这个人叫XXX,年龄是111岁";console.log(str); //这个人叫XXX,年龄是111岁// 以前学的字符串模板let str = "这个人叫" + name + ",年龄是" + age + "岁";console.log(str);原创 2020-10-20 08:44:51 · 290 阅读 · 0 评论 -
解构赋值
文章目录解构赋值一. 数组的结构赋值1. 理解解构赋值注意:2. 不成功的解构赋值3. 不完全解构4. 如果模式不匹配,那么会报错5. 默认值5.1 如果默认值是一个表达式5.2 默认值可以引用解构赋值的其他变量,6. 利用解构赋值交换两个值二. 对象的结构赋值1. 对象解构赋值2. 对象解构赋值属性名必须相同3. 自定义变量名与属性名不同4. 解构可以用于嵌套结构5. 对象的解构赋值也可以指定默认值6. 数组也可以按照对象的方式解构7. 注意点:例子:三. 字符串的解构赋值四.函数参数的解构赋值:1.原创 2020-10-19 18:08:58 · 1725 阅读 · 0 评论 -
jq
文章目录1 .原生JS的问题2. JQuery二、 $() 选择器1. $() 选择出来的是一个`类数组`4. 文档加载完成三. 筛选器1. 选择所有的p标签2. 选择第一个p标签3. 最后一个p标签4. 任意一个p标签5. 选中某一个范围的p标签6. 获取奇偶数7. 特别的过滤器的方法7.1 eq可以单独的提炼为方法,可以连续打点调用7.2 first() last() 筛选第一个最后一个元素的方法7.3 not() 排除那些元素7.4 hasClass() 判断是否具有某个类名8. is()原创 2020-10-13 15:57:17 · 351 阅读 · 0 评论 -
异步加载js及时间线
一. DOM树解析什么是DOM树 ==>DOM节点按照树型结构排列1. DOM树生成的原则深度优先2. 浏览器渲染页面前的步骤解析DOM节点,生成DOM树继续解析css代码生成CSS树DOM树和CSS树合并在一块生成Render树浏览器开始渲染绘制页面3. script标签同步加载的弊端3.1 js加载是同步的同步加载js是为了防止js操作DOM元素,而造成问题js下载会阻止后面的标签执行,js还学会阻止网页中所有的下载行为2.2 如果需要异步加载J原创 2020-10-12 17:28:23 · 116 阅读 · 1 评论 -
json 格式数据
文章目录1.json2. `JSON`的分类3. `JSON`中允许的值4. `JSON`的方法(也叫序列化对象)4.1 将`JSON`字符串转成`js`对象4.2 将`js`对象转换为`JSON`对象1.jsonJSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别并且可以转换为任意语言中的对象,JSON在开发中主要用来数据交互json 格式数据必需用双引号表示:var jsonStr = "{'name': 'doudou'}" 错误写法var jsonStr = '{"原创 2020-10-11 16:44:27 · 166 阅读 · 0 评论 -
js 错误捕获
try{ console.log("123"); var a = b; //这行语句有错误,b没有被定义 console.log("哈哈");}catch(err){}console.log("456");程序的执行逻辑是这样的: 运行try语句块里面的语句,如果遇见了错误的语句,不向浏览器抛出错误。而是执行catch语句段里的语句。try语句里面没有执行完的语句,不执行了。catch语句块执行完毕之后,执行后面的语句。...原创 2020-10-10 16:03:26 · 167 阅读 · 0 评论 -
JavaScript 对象
文章目录1. 对象2. 内置对象3. 增删改查4. 检测对象属性是否存在5. 设置属性对象1. 对象对象是属性的无序集合,每个属性都由一个键值对组成 var obj = { 'name': 'yizhi', 'age': 18 }2. 内置对象new运算符创建并初始化一个新对象。关键字后面跟随的是一个函数的调用,这个函数被称为构造函数var obj = new Object(); // 创建一个空对象var ar原创 2020-09-25 16:16:34 · 90 阅读 · 0 评论 -
垃圾回收
文章目录1. 标记清除2. 引用计数1. 标记清除JavaScript最常用的是标记清除:当变量进入环境(作用域),则将变量标记为进入环境,当变量离开环境的时候,将其标记为离开环境。垃圾收集器在运行时会给存储在内存中所有变量标记,然后去掉环境变量与被环境变量引用的变量,剩下的就是环境无法访问的变量,这些变量以及其占用的内容空间将被清理回收。2. 引用计数不太常见的垃圾回收策略:引用计数。跟踪每一个值得引用次数。当声明一个引用并将一个引用类型赋值给这个变量得时候,这个值得引用计数加1,如果又把这个原创 2020-09-24 01:12:56 · 202 阅读 · 0 评论 -
let var const
文章目录1. var 的变量提升2. 函数声明提升3. var let 区别4. const5. 例子1. var 的变量提升变量声明会提升到代码最前面 console.log(a); // undefined var a = 10;等价于var a;console.log(a);var a = 10;2. 函数声明提升函数声明提升会提升到变量声明前面3. var let 区别(1)var有变量提升,let没有变量提升(2) var 能声明重复的变原创 2020-09-23 23:38:56 · 151 阅读 · 0 评论 -
ASN1 is not defined 问题
文章目录1. ASN12. 问题解决3. 直接使用ASN1解码器的工具1. ASN1ASN1是一个JS解码器,可以解码任何有效的Base64编码或十六进制编码的DER或BER结构,一般浏览器已内置的有,大部分js调试器是没有的2. 问题解决找到出错的地方,将该函数定义删除掉,然后将调用该方法的地方用固定值代替(一般情况下都是固定的)在调用的地方打上断点,将显示 的值替换(注意:要先让最...原创 2020-03-23 01:11:22 · 2895 阅读 · 6 评论 -
原型链与继承
文章目录1. 原型链的本质1. 原型链的本质只要是对象,一定有原型对象,就是说只要这个东西是个对象,那么一定有__proto__属性。我们想实例的原型对象也是一个对象,那么我们迫切的想看看这个原型对象的原型对象.如果这理论没有问题的话,这个原型对象应该也有__proto__指向他的原型对象吧....原创 2020-03-18 18:29:31 · 170 阅读 · 0 评论 -
原型
文章目录1. 原型 prototype2. 特点3. 原型对象与实例4. 实例对象的`__proto__ ` 属性5. 原型的扩展1. 原型 prototype原型是构造函数创建对象的原始模型2. 特点原型也是对象,原型是函数对象的一个属性;原型自带constructor属性, constructor指定构造函数;构造函数创建出的对象会继承原型的属性和方法;3. 原型对象与实例一...原创 2020-03-17 00:01:01 · 115 阅读 · 0 评论 -
Promise
文章目录1. 概念2. 特点3. 状态4.缺点5. 基本用法6. ajax 请求7. then 方法8. 链式操作的用法9. catch()10. resolve与reject方法11. Promise.all()12. Promise.race()1. 概念Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所以Promise,简单说就是一个容器...原创 2020-03-02 19:45:39 · 141 阅读 · 0 评论 -
es6 单例模式
文章目录1. 单例模式2. 示例1. 单例模式单例模式是一种十分常用但却相对而言比较简单的单例模式。它是指在一个类只能有一个实例,即使多次实例化该类,也只返回第一次实例化后的实例对象。单例模式不仅能减少不必要的内存开销, 并且在减少全局的函数和变量冲突也具有重要的意义。2. 示例//单例模式class Db { // 静态方法 static getInstance() {...原创 2020-03-01 19:20:47 · 608 阅读 · 0 评论 -
es6类的定义与继承
文章目录1. 定义类2. 继承1. 定义类class Person { constructor(name) { this.name = name; this.sex = '男' this.money = true } getName() { // this 指向Person类 console...原创 2020-03-01 14:58:06 · 283 阅读 · 0 评论 -
BOM(浏览器对象模型)
文章目录1. location: 浏览器地址信息1.1 location.href 当前页面url1.2 location.pathname 地址栏的路径1.3 location.hash 地址栏#后面的字符串1.4 location.search 地址栏?后面的字符串1.5 location.protocol 地址栏的协议1.6 location.port 地址栏的端口号1.7 l...原创 2020-01-27 00:24:29 · 333 阅读 · 0 评论 -
事件处理模型
var oDiv = document.getElementsByTagName('div')[0]; oDiv.onclick = function (ev) { console.log(ev); // 到浏览器左上角的水平位置 console.log(ev.clientX); // 到触发事件元素左上角水平位置 co...原创 2020-01-24 18:31:59 · 170 阅读 · 0 评论 -
JavaScript 事件
文章目录1. 事件作用2. 鼠标事件3. 滚轮事件4. 键盘事件5. 资源事件6. window 事件1. 事件作用JavaScript 通过事件检测用户行为2. 鼠标事件 onclick: 点击鼠标左键触发 onmousedown:鼠标任意键按住时触发 onmouseup: 鼠标任意键抬起时触发 oncontextmenu: 点击鼠标右键触发 onmouseenter:...原创 2020-01-21 16:29:54 · 440 阅读 · 0 评论