javascript
关注
分享
扫一扫
文章平均质量分 85
_Tough_Girl
这个作者很懒，什么都没留下…
展开
-
JavaScript数组去重的12种方法
1、利用 ES6 Set 去重（ES6 中最常用）Set 对象是 ES6 中新定义的数据结构，类似于数组，它允许你存储任何类型的唯一值，不管是原始值还是对象引用。Array.from() 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a原创 2021-10-13 16:05:14 · 2341 阅读 · 1 评论 -
JavaScript 中的可枚举属性与不可枚举属性、JavaScript 中数组遍历和对象遍历、使用JQuery 的遍历
1、JavaScript 中的可枚举属性与不可枚举属性在 JavaScript 中，对象的属性分为可枚举和不可枚举之分，它们是由属性的 enumerable 值决定的。可枚举性决定了这个属性能否被 for…in 查找遍历到。可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。可枚举的属性可以通过 for...in 循环进行遍历（原创 2021-10-09 21:53:55 · 1410 阅读 · 0 评论 -
ES6 的内置对象扩展：Array 的扩展方法、String 的扩展方法、Set 数据结构
1、Array 的扩展方法1.1 扩展运算符（展开语法）扩展运算符(…)可以将数组或者对象转为用逗号分隔的参数序列。// 1. 扩展运算符(...)可以将数组或者对象转为用逗号分隔的参数序列let ary = ['a', 'b', 'c'];// ...ary; // 'a' , 'b', 'c'console.log(...ary); // a b c扩展运算符可以应用于合并数组。// 2. 扩展运算符应用于合并数组let ary1 = [1, 2, 3];let ar原创 2021-09-25 19:58:19 · 225 阅读 · 0 评论 -
ES6 的新增语法：解构赋值（包括数组解构和对象解构）、剩余参数、箭头函数
1、解构赋值ES6 中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。1.1 数组解构数组解构允许我们按照一 一对应的关系从数组中提取值，然后将值赋值给变量。如果解构不成功，变量的值为 undefined 。// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量let ary = [1, 2, 3];let [a, b, c, d, e] = ary;console.log(a); // 1console.log(b); // 2console.lo原创 2021-09-25 19:41:15 · 309 阅读 · 0 评论 -
移动端网页特效：触屏事件、 移动端常见特效、移动端常用开发插件、移动端常用开发框架
1、触屏事件1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如：触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下：触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touc原创 2021-09-24 22:33:54 · 261 阅读 · 0 评论 -
JavaScript 中的严格模式、高阶函数、闭包以及递归
1、严格模式2、高阶函数3、闭包4、递归原创 2021-09-25 17:29:17 · 129 阅读 · 0 评论 -
构造函数和原型、继承、ES5 中的新增方法
1、构造函数和原型1.1 概述在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前，JS 中并没用引入类的概念。ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式：原创 2021-09-25 16:59:14 · 188 阅读 · 0 评论 -
面向对象编程介绍、 ES6 中的类和对象、 ES6 中类的继承
1、 面向对象编程介绍1.1 面向过程编程 POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个例子：将大象装进冰箱，面向过程做法。打开冰箱门把大象装进去关上冰箱门面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。1.2 面向对象编程 OOP (Object Oriented Programming)面向对象是把事务分解成为一个个对象，然后由对象之间原创 2021-09-25 11:30:24 · 130 阅读 · 0 评论 -
正则表达式：概述、在 JavaScript 中的使用、以及正则表达式中的特殊字符和替换
1、正则表达式概述2、正则表达式在 JavaScript 中的使用3、 正则表达式中的特殊字符4、正则表达式中的替换原创 2021-09-25 00:16:45 · 742 阅读 · 0 评论 -
本地存储：sessionStorage 和 localStorage
1、本地存储本地存储特性：数据存储在用户浏览器中。设置、读取方便、甚至页面刷新不丢失数据。容量较大，sessionStorage 约 5M、localStorage 约 20M。只能存储字符串，可以将对象 JSON.stringify() 编码后存储。2、window.sessionStorage 和 window.localStorage2.1 sessionStorage 和 localStorage 的区别window.sessionStoragewindow.local原创 2021-09-24 22:54:30 · 78 阅读 · 0 评论 -
动画函数封装和节流阀
1、动画函数封装1.1 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置。让盒子在当前位置加上1个移动距离。利用定时器不断重复这个操作。加一个结束定时器的条件。注意此元素需要添加定位，才能使用 element.style.left。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-09-23 23:34:15 · 141 阅读 · 0 评论 -
元素偏移量 offset 系列、元素可视区 client 系列以及元素滚动 scroll 系列
1、元素偏移量 offset 系列2、元素可视区 client 系列3、元素滚动 scroll 系列原创 2021-09-23 17:41:53 · 215 阅读 · 0 评论 -
BOM 概述、Window 对象的常见事件、定时器、JS 执行机制以及 location、navigator、 history对象
1、BOM 概述1.1 什么是 BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。DOM 和 BOM 的区别：DOMBOM文档对象模型浏览器对象模型原创 2021-09-23 10:47:56 · 307 阅读 · 0 评论 -
事件高级：注册、删除事件，DOM事件流和事件对象，以及事件委托、常用鼠标事件和键盘事件
1、注册事件（绑定事件）1.1 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式。传统注册方式方法监听注册方式利用 on 开头的事件，如：onclickw3c 标准，推荐方式<button onclick=“alert('hi~')”></button>addEventListener() 它是一个方法，里面的事件类型是字符串，必定加引号，而且不带 onbtn.onclick = func原创 2021-09-22 16:44:27 · 281 阅读 · 0 评论 -
DOM 简介及相关操作
1、DOM 简介文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。对于JavaScript，为了能够使 JavaScript 操作 HTML，JavaScript 就有了一套自己的 dom 编程接口。对于HTML，dom 使得 html 形成一棵 dom 树， 包含文档、元素、节点。我们获取过来的原创 2021-09-21 16:34:08 · 1081 阅读 · 0 评论 -
JavaScript 内置对象：Math 对象、日期（Date）对象、数组对象、字符串对象
1、内置对象JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的。内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 。内置对象最大的优点就是帮助我们快速开发 。JavaScript 提供了多个内置对象：Math、 Date 、Array、String等。2、内置对象：Math 对象2.1 Math原创 2021-09-20 18:15:44 · 346 阅读 · 0 评论 -
JavaScript中null 和 undefined 的区别以及 typeof 与 instanceof 的区别
1、首先看一个判断题：null和undefined 是否相等 console.log(null==undefined) //true console.log(null===undefined) //false console.log(typeof null) // "object" console.log(typeof undefined) // "undefined"观察可以发现：null 和 undefined 两者相等，但是当两者做全等比较时，两者又不等。原因：nu原创 2021-09-11 18:16:42 · 576 阅读 · 0 评论 -
JS垃圾回收机制
一、垃圾回收的必要性下面这段话引自《JavaScript权威指南（第四版）》由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。2、垃圾回收机制的原理js 的垃圾回收机制是为了防止内存泄露（已经不需要的某一块内存还一直存在着原创 2021-09-11 10:49:05 · 121 阅读 · 0 评论 -
JavaScript 预解析：变量提升和函数提升
1、预解析JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。预解析：在当前作用域下，JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。代码执行： 从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，原创 2021-10-06 15:34:59 · 159 阅读 · 0 评论 -
ES6新增语法：使用 let 和 const 关键字声明变量以及 let、const、var三者的区别
1、ES6 简介1.1 什么是 ES6 ?ES 的全称是 ECMAScript ，它是由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。1.2 为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript 语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性 。语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。2、ES6 的新增语法—— letletE原创 2021-08-19 17:54:05 · 507 阅读 · 2 评论 -
JavaScript 中函数的定义与调用、函数内 this 的指向、手写call、apply、bind函数
1、函数的定义方式函数声明方式 function 关键字 (命名函数)函数表达式 (匿名函数)new Function()var fn = new Function('参数1','参数2'..., '函数体')Function 里面参数都必须是字符串格式第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象)函数也属于对象2、函数的调用方式普通函数对象的方法构造函数绑定事件函数定时器函数立即执行函数 <scri原创 2021-08-18 17:26:35 · 142 阅读 · 0 评论 -
JavaScript中浅拷贝和深拷贝的区别与实现
JavaScript中浅拷贝和深拷贝的区别与实现JavaScript有两种数据类型，基础数据类型和引用数据类型。基础数据类型都是按值访问的，我们可以直接操作保存在变量中的实际的值。而引用类型如Array，我们不能直接操作对象的堆内存空间。引用类型的值都是按引用访问的，即保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。深拷贝和浅拷贝的区别浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存。深拷贝（deep copy）：复制并创建一个一模一样原创 2021-08-18 17:15:33 · 7975 阅读 · 2 评论 -
JavaScript 简单数据类型与复杂数据类型
1、简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，即：String ，Number，Boolean，Undefined，Null其中，简单数据类型 null 返回的是一个空的对象 object ，如果有个变量我们以后打算存储为对象，暂时没有想好放什么，这个时候就给 null 。引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。通过 ne转载 2021-08-18 16:39:29 · 488 阅读 · 2 评论