JavaScript
文章平均质量分 79
青黄皂白
这个作者很懒,什么都没留下…
展开
-
reduce(Math.pow) 的使用 及 reduce 的一些常见用法
reduce(Math.pow) 的使用[3, 2, 1].reduce(Math.pow);[3].reduce(Math.pow);[].reduce(Math.pow, 3);[].reduce(Math.pow);大家知道以上三个表达式都会返回什么值吗?相信大家都会 Math.pow 和 reduce() 的使用有所了解,但是大家真的完全了解它们吗?Math.pow(m, n) 接受两个参数,返回的结果是 m 的 n次幂。比如 Math.pow(3, 2) 返回的是 3 的二次原创 2022-04-26 22:04:52 · 598 阅读 · 0 评论 -
JavaScript事件(一)
JavaScript事件(一)一、事件流1、事件冒泡IE事件流被称为事件冒泡,这是因为事件被定义为从最具体的元素(文档树中最深的节点)开始触发,然后向上传播至没有那么具体的元素(文档)。2、事件捕获事件捕获是从最不具体的节点应该最先收到事件,而最具体的节点最后收到事件。事件捕获实际上是为了在事件达到目标前拦截事件。3. DOM事件流DOM2 Events 规定事件流分为三个阶段:事件捕获、到达目标和事件冒泡。事件捕获最先发生,为提前拦截事件提供了可能。然后,实际的目标接收到事件。最后一个阶段是原创 2022-03-12 23:42:56 · 1188 阅读 · 1 评论 -
JS 类型和语法1
JS 类型和语法1JavaScript类型Javascript有七种内置类型:空值(null)未定义(undefined)布尔值(boolean)数字(number)字符串(string)对象(object)符号(symbol, ES6 新增)我们可以用 typeof 运算符来查看值的类型,它返回的是类型的字符串值。但是其中类型和他们的字符串值并不一一对应:其中 typeof null === “object” // true 比较特殊,我们需要使用符合条件来检测 null 值的原创 2022-02-08 22:54:04 · 461 阅读 · 1 评论 -
循环加载:a 依赖 b,b 依赖 c, c 依赖 a 加载情况解析
循环加载:a 依赖 b,b 依赖 c, c 依赖 a 加载情况解析“循环加载”(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。// a.jsvar b = require('b');// b.jsvar a = require('a');通常,“循环加载”表示存在强耦合,如果处理不好,还可能导致递归加载,使得程序无法执行,因此应该避免出现。但是实际上,这是很难避免的,尤其是依赖关系复杂的大项目,很容易出现a依赖b,b依赖c,c又依赖a这转载 2022-02-06 21:50:15 · 1319 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(十六):Moudle
阮一峰ES6入门读书笔记(十六):Moudle在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模转载 2022-01-25 16:35:59 · 392 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(十五):Class
阮一峰ES6入门读书笔记(十五):ClassClass 基本语法ES6 的 class 可以看作是一个语法糖,它的绝大部分功能,ES5 都可以做到。可以通过下面两段写法来比较两者的不同//ES5写法function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = n转载 2022-01-24 15:31:57 · 5091 阅读 · 0 评论 -
阮一峰 ES6 入门读书笔记(十四):async 函数
阮一峰 ES6 入门读书笔记(十四):async 函数1. 含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。async函数对 Generator 函数的改进,体现在以下四点。内置执行器async函数的执行,与普通函数一模一样,只要一行。更好的语义async和await,比转载 2022-01-22 14:24:20 · 1746 阅读 · 0 评论 -
阮一峰 ES6 入门读书笔记(十三):Generator 函数的语法
阮一峰 ES6 入门读书笔记(十三):Generator 函数1. 简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。形转载 2022-01-07 08:36:57 · 1093 阅读 · 3 评论 -
阮一峰 ES6 入门读书笔记(十二):Iterator 和 for...of 循环
阮一峰 ES6 入门读书笔记(十二):Iterator 和 for…of 循环Iterator(遍历器)的概念遍历器是一种为数组和对象,ES6后又新添加了 Map 和 Set 这些数据集合提供同一的接口机制,来处理所有不同的数据结构。任何数据结构只要部署了 Iterator 接口,就可以完成遍历操作。Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按照某种次序排列;三是 ES6 创造了一种新的遍历命令 for…of 循环,Iterator转载 2022-01-06 16:20:11 · 221 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(十一):Promise
阮一峰ES6入门读书笔记(十一):PromisePromise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理更强大。所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。Promise 对象有以下两个特点。对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦状态改变,就不会再变,任何时候都可转载 2021-12-30 16:32:54 · 1971 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(十):Proxy
阮一峰ES6入门读书笔记(十):Proxy 和 Reflect1. 概述Proxy用于修改某些操作的默认行为,可以理解为,在魔表对象之前架设了一层“拦截”,外界对该对象的访问,都必须通过这层拦截。var obj = new Proxy({}, { get: function (target, propKey, receiver) { console.log(`getting ${propKey}!`); return Reflect.get(target, propKey, rec转载 2021-12-28 10:43:13 · 2303 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(九):Set 和 Map
阮一峰ES6入门读书笔记(九):Set 和 Map1.Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4Set函数可以接受一个数组(或者具有 ite转载 2021-12-25 14:10:37 · 383 阅读 · 0 评论 -
阮一峰读书笔记(八):Symbol
阮一峰读书笔记(八):Symbol1. 概述ES5 的对象属性名都是字符串,柘荣哟造成属性名冲突。ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 的第七种数据类型,前六种是:undefined, null, boolean, String, Number, Object。Symbol 值通过 Symbol 函数生成。Symbol 函数前不能使用 new 命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。typeof 运算符的结转载 2021-12-24 13:32:53 · 416 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(七):运算符的拓展
阮一峰ES6入门读书笔记(七):运算符的拓展1. 指数运算符ES6新增了一个指数运算符(**)。2 ** 2 // 42 ** 3 // 8这个运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。// 相当于 2 ** (3 ** 2)2 ** 3 ** 2// 512指数运算符可以与等号结合,形成一个新的赋值运算符(**=)。let a = 1.5;a **= 2;// 等同于 a = a * a;let b = 4;b **= 3;转载 2021-12-21 16:47:33 · 232 阅读 · 0 评论 -
阮一峰ES6入门读书笔记(六):对象
阮一峰ES6入门读书笔记(六):对象属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面的代码中,变量 foo 直接写在大括号里面。这时,属性名就是变量名,属性值就是变量值。除了属性可以简写,方法也可以简写const o = { method() {转载 2021-12-19 11:37:04 · 501 阅读 · 0 评论 -
ES6入门:let和const
阮一峰ES6入门读书笔记(一):let和constlet基本用法let 的用法类似于 var,但是所声明的变量,只在 let 命令所在的代码块有效。{ let a = 10; var b = 1;}a // ReferencError: a is not defined.b // 1由上述代码可知,let 声明的变量 a 只在块作用域中有效,在块作用域之外报错,var 声明的变量 b 则可以有效访问到。for 循环的计数器,就很适合使用 let 命令。for (let i = 0;转载 2021-12-09 11:47:14 · 171 阅读 · 0 评论 -
JavaScript script标签与文档模式
JavaScript <script>标签与文档模式1. 文档模式首先说一下文档模式吧IE5.5 发明了文档模式的概念,即可以使用 doctype 切换文档模式。最初的文档模式有两种:混杂模式和标准模式。混杂模式让 IE 像 IE5 一样(支持一些非标准的特性)。标准模式让 IE 具有兼容标准的行为。2.<script>标签script标签有以下几种元素:src:可选。表示包含要执行的代码的外部文件。async:可选。表示应该立即开始下载脚本,并在下载完后开始执行。原创 2021-10-31 17:47:09 · 372 阅读 · 0 评论 -
JavaScript 事件注册
事件注册事件注册有哪些方法on + “event”例如:onclick/onmouseover…支持最广。但是要在一个元素上多次添加同一事件,此时就无能为力了,只能以最后一次绑定的事件为准。addEventListenerW3C 标准方法,功能也最强大,支持添加多个事件//element.addEventListener(type,listener,useCapture);obj.addEventListener('click', method1, false)obj.addEventLis原创 2021-06-25 23:56:51 · 651 阅读 · 0 评论 -
Event Loop事件循环机制
Event Loop事件循环机制一、JS单线程执行却不堵塞的秘密在开始之前,我们先看一张图:此图为事件在浏览器中的角色,不用看太久,有个概念就好,等你读完这篇文章,就能看懂这张图了。首先要声明,事件循环是与 js 的运行环境相关的机制,它与 js (引擎) 本身无关。常见的运行环境有浏览器、Node.js,每种运行环境可能都有自己实现事件循环的方式,而本文只探讨浏览器的时间循环。为什么要进行事件循环?因为 js 是单线程执行的,一个函数运行过久就会卡住后面的函数执行,如果这些函数恰好是做与 UI原创 2021-06-01 09:58:06 · 278 阅读 · 0 评论 -
JS详解——对象
JS详解——对象一、声明语法对象可以通过两种形式定义:声明(文字)形式和构造形式。对象的文字语法如下:var myobj = { key: value // ...}构造形式大概是这样的:var myobj = new Object()myObj.key = value构造形式和文字形式生成的对象是一样的。唯一的区别是,文字形式中你可以添加多个键值对,而构造形式中你必须逐个添加属性。二、类型在JavaScript中一共有六种主要类型(术语是”语言类型“):stringnu原创 2021-05-07 23:00:09 · 218 阅读 · 2 评论 -
字符串
字符串访问字符串的字符:字符串.length 访问字符串中字符的个数。【注】中文 utf-8(三个字符表示一个汉字)gbk(两个字符表示一个汉字) 在计数的时候都是当做一个汉字计数。访问字符串中单个字符:字符串.charAt(下标) 【注】从0开始的字符串[下标]【注】字符串是只读,字符串一旦被声明就没有办法被修改,如果非要声明字符串,我们只能讲原字符串效果,重新生成新的字符串。【注】在JS中,字符串既是基本数据类型,又是复合数据类型。字符串找那个的字符遍历也可以进行循原创 2021-05-01 23:09:18 · 67 阅读 · 0 评论 -
正则表达式
正则表达式1. 正则表达式概念正则表达式,super string。 正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类 表示正则表达式,而 String 和 正则表达式都定义了进行强大的【模式匹配】和【文本检索】与【替换】的函数。2.正则表达式的创建方式 创建正则表达式和创建字符串类似,创建正则表达式提供了两种方法,一种是采用 new 运算符,另一个是采用字面量方式。var box=new RegExp('box')原创 2021-05-01 23:08:43 · 57 阅读 · 0 评论 -
运动与游戏开发
运动与游戏开发运动原理如何实现运动方法:运动的物体使用绝对定位通过改变定位物体的属性(left、right、top、bottom)值来使物体移动。例如向右或向左移动可以使用offsetLeft(offsetRight)来控制左右移动。步骤:开始运动前,先清除已有定时器,否则连续点击按钮会使物体运动速度越来越快。开启定时器,计算速度把运动和停止用if/else语句隔开,判断停止条件,执行运动定时器在javascritp中,有两个关于定时器的专用函数,它们是:倒计定时器:tim原创 2021-05-01 23:06:23 · 79 阅读 · 0 评论 -
数组
数组遍历数组普通for循环for(var i = 0; i < 5; i++){ document.write(arr[i]);}for…in语句用于遍历数组或者对象的属性(快速枚举法)for(var i in arr){ document.write(arr[i]);}数组的方法栈方法**push()**方法可以接收任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度。而**pop()**方法则从数组末尾移除最后一个元素,减少数组的lengt原创 2021-05-01 23:05:54 · 96 阅读 · 0 评论 -
事件下
事件下1. 阻止右键菜单document.oncontextmenu = function(){ return false;}自定义右键菜单js部分代码window.onload = function(){ window.oncontextmenu = function(){ return false; } var oDiv = document.getElementById('di原创 2021-05-01 22:58:35 · 75 阅读 · 0 评论 -
事件驱动函数
事件驱动函数通过id获取页面上对应的标签document.getElementById(“id”);node.innerHTML 标签间的内容表单元素,获取其中内容,通过.value属性双标签元素,获取其中内容,通过innerHTML属性onclickonblur 失去焦点window.onload = function(){ 写在这里的代码,是整个页面加载完成后再运行的(固定格式)}通过id获取标签的方法进行简化function $(id){ return document原创 2021-05-01 22:57:49 · 79 阅读 · 0 评论 -
事件
事件上1.事件处理函数JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件。PS:所有的事件处理函数都会都有两个部分组成,on+ 事件名称,例如 click 事件的事件处理函数就是:onclick。在这里,我们主要谈论脚本模型的方式来构建事件,违反分离原 则的内联模式,我们忽略掉。2.鼠标事件,页面所有元素都可触发click:当用户单击鼠标按钮或按下回车键时触发dblclick:当用户双击主鼠标按钮时触发。mousedown:当用户按下了鼠标还未弹起时触发。mous原创 2021-05-01 22:54:19 · 78 阅读 · 0 评论 -
模块化开发
模块化开发一、JavaScript模块化的必要性 随着网站逐渐变成“互联网应用程序(WebApp)”,嵌入网页的JavaScript代码越来越庞大,越来越复杂。 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等…开发者不得不使用软件工程的方法,管理网页的业务逻辑。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 但是,Javascript不是一种模块化编程语言,它不支持"类"(原创 2021-05-01 22:53:42 · 137 阅读 · 0 评论 -
面向对象
面向对象面向对象,继承、封装(封装构造函数)、多态。 面向对象是一个编程思想,支撑面向对象编程思想的语法是类(ECMA6之前没有类这个概念)和对象,构造函数充当类的角色。 构造函数和对象实现面向对象程序的时候,体现出 继承、 封装、 多态的特点。 function Dog({name, type, age}){ //this = new Object(); //添加属性原创 2021-05-01 22:53:10 · 76 阅读 · 0 评论 -
递归四个步骤
递归四个步骤java代码模板public void recur(int level, int param){ //递归终结条件 if(level > MAX_level){ return; } //处理当前逻辑 process(level,param); //下探到下一层 recur(level:level+1 , newParam); //清理当前层}...原创 2021-04-30 23:11:59 · 187 阅读 · 1 评论 -
PHP入门
PHP入门一、PHP简介PHP语言的特点PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。)PHP脚本在服务器上运行PHP可在不同的平台上运行(windows、Linux、Unix、Mac OSX等)PHP与目前几乎所有的正在被使用的服务器兼容(Apache、IIS等),全球95%以上的网站都是由PHP开发的。PHP提供了广泛的数据库支持。PHP是免费的,可以同官网下载它:www.php.netPHP易于学习,并可原创 2021-04-30 23:07:01 · 139 阅读 · 1 评论 -
localStorage
localStorage1.什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。2.localStorage的优势与局限localStorage的优势localStorage拓展了cookie的4K限制。localSt原创 2021-04-30 23:05:31 · 8506 阅读 · 1 评论 -
Gulp
Gulp一、Gulp的介绍https://www.gulpjs.com.cn/Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。二、安装node.js注意先要安装node.js 安装node.js一路下一步就好了https://nodejs.org/en/安装gulp 在mac版本下安装gulpsudo npm install gulp -gwi原创 2021-04-30 23:03:54 · 192 阅读 · 1 评论 -
Git
Git一、Git是什么 Git是目前世界上最先进的分布式版本控制系统。二、SVN与Git的最主要区别? SVN的存储需要依赖一个服务器,而Git所有的东西都是放在线上的。节约成本,省时省力。三、Git操作的具体步骤cd 路径 进入当前目录配置git基本操作git config --global user.name “你的git名称”git config --global user.email “你的git验证邮箱”git init(此步骤显示"Initialized emp原创 2021-04-30 23:03:09 · 163 阅读 · 1 评论 -
ECMA6中的class语法
ECMA6中的class语法//ECMA6class语法 class Person{ //class属性添加 constructor(name, sex, age){ this.name = name; this.sex = sex; this.age = age; }原创 2021-04-30 23:02:44 · 77 阅读 · 1 评论 -
ECMA5和ECMA6
ECMA5和ECMA61.this关键字详解,改变this指向的方法call、apply、bind深度分析1.this的使用场景 每一个函数中,都有一个内置的变量this,这个this中存储着当前函数的主人,所以,要知道this是谁,就要通过上下文分析,当前函数的主人是谁。this永远存储的是当前函数的主人。全局函数中指向windowfunction show(){ alert(this); //[object Window]}show();对象方法中指向该对象var person原创 2021-04-30 23:02:04 · 146 阅读 · 1 评论 -
BOM和DOM
BOM和DOM1. BOM的概念和定义Bom 就是浏览器的对象【模型】,我们如何操控这个对象模型?[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6RawcBr-1618818147395)(C:\Users\DSH\AppData\Local\Temp\Image.png)]提起BOM就不得不提起JavaScript的构成。ECMAScript为JavaScript的核心,但是要是在浏览器中使用JavaScript,那么JavaScript需要听从BOM的调遣。2原创 2021-04-30 23:01:20 · 119 阅读 · 0 评论 -
JS中的this指向问题
一、判断this首先我们开门见山,讲一下如何判断this指向的是哪个作用域。如果你不知道我讲的是什么,那也不用着急,接着往下看我会慢慢分析。函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。var bar = new foo()函数是否通过call、apply(显示绑定)或者硬绑定调用?如果是的话,this绑定的是指定的对象。var bar = foo.call(obj2)函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下原创 2021-04-15 17:44:01 · 220 阅读 · 0 评论 -
详解JS的作用域和闭包
作用域和闭包尽管通常将JavaScript归类为“动态”或“解释执行”语言,但实际上它是一门编程语言。但与传统的编译语言不同,它不是提前编译的,编译结果也不能在分布式系统中进行移植。尽管如此,JavaScript引擎进行编译的步骤和传统的编译语言非常相似,在某些环节可能比预想的复杂。传统的编译语言通常会在一段源代码执行之前经历三个步骤,统称为“编译”。这三个步骤分别是分词/词法分析(Tokenizing/Lexing)、解析/语法分析(Parsing)、代码生成。但对于JavaScript来说,大部分情原创 2021-04-05 18:27:10 · 3624 阅读 · 11 评论 -
AsyncAwait 语法糖与Generator异步方案
Async/Await 语法糖与Generator异步方案首先我们来看一下字节跳动的一道面试题:setTimeout(function () { console.log('setTimeout')}, 0)async function async1() { console.log('async1 start') await async2() console.log('async1 end')}async function async2() { cons原创 2021-04-03 17:00:07 · 184 阅读 · 0 评论