m0_57712926的博客

抽了一点点时间把前端的复杂数据类型(对象)回顾了一下,今天重新拾笔记录自己的成长历程，以下记录一下之前自己学习时忽略的内容。

目录前言一、什么是 window 对象?1. 属性2. 方法二、什么是 document 对象？1. 属性2. 区别总结前言今天一起来看一下window对象和document对象是什么，并看看它们都各有什么属性与方法，最终看一看它们的区别所在。一、什么是 window 对象?简单来说，document 是 window 的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个window 对象，并为每个

文章目录前言一、伪数组1. 概念2. 目标二、实现方式1. 方式一2. 方式二总结前言当我们得到一个伪数组数据的时候，我们应该如何操作才能将其转变为真实数组，并使它能够使用数组的方法呢？本文列举了两个方法，一起来看下吧~一、伪数组1. 概念具有 length 属性按索引方式存储数据不具有数组的 push.pop 等方法伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，不具有数组的 push.pop 等方法，但仍可以对真正数据遍历方法来遍历它们

目录前言一、需求二、代码演示总结前言开发中经常遇到需要将数字转换为金额格式的场景，今天一起来封装一个函数实现一下这个需求。一、需求封装一个函数，实现将数字转换为金额展示格式。如：123,456.78二、代码演示代码如下（示例）：// s为传入的数字// n为要保留几位小数function formatMoney(s, n) { n = n > 0 && n <= 20 ? n : 2 s = parseFloat((s + '

目录前言一、浏览器是如何加载页面的？二、script脚本阻塞解决方案1. 推迟加载（延迟加载）2. defer延迟加载3. 异步加载总结前言今天一起看一看浏览器是如何加载页面的，以及script脚本放置位置对于加载会有什么样的影响，一起来看看有什么解决方案吧~一、浏览器是如何加载页面的？从浏览器地址栏的请求链接开始，浏览器通过 DNS 解析查到域名映射的 IP 地址，成功之后浏览器端向此 IP 地址取得连接。成功连接之后，浏览器端将请求信息通过 HTTP 协议向此 IP 地址所在服务器发起请

目录前言一、什么是闭包？二、闭包的使用1. 最简单的闭包函数三、闭包应用场景及优缺点1. 使用场景2. 优点3. 缺点总结前言今天来讲一讲什么是闭包以及闭包的使用场景，从概念入手，通过案例来引申出闭包的优缺点及使用场景，还不会的话快来一探究竟~一、什么是闭包？MDN官方概念闭包是函数和声明该函数的词法环境的组合通俗的理解内层函数，引用外层函数上的变量，就可以形成闭包二、闭包的使用1. 最简单的闭包函数如下案例，fn函数内声明一个局部变量a,fn函数内的inner函数顺着可

目录前言一、HTTP和HTTPS1. HTTP2. HTTPS二、什么是 TCP 连接的三次握手1. 三次握手2. TCP 协议优点3. TCP 协议缺点三、 为什么 TCP 连接需要三次握手四次挥手1. 为什么是三次握手？2. 为什么是四次挥手？总结前言TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。一、HTTP和HTTPS1. HTTPHTTP 请求的过程域名解析 --> 发起 TCP

文章目录前言一、typeof和instanceof1. typeof2. instanceof二、区别三、js 使用 typeof 能得到的哪些类型？总结前言前端中如何判断一个值属于什么类型呢？都知道有typeof和instanceof两种，那么它们有什么区别呢？都能得到什么样的值类型呢？还不会的快来看看~一、typeof和instanceof1. typeof在 javascript 中，判断一个变量的类型可以用 typeof数字类型、typeof 返回的值是 number。比如说：ty

文章目录前言一、为什么JavaScript是单线程的？二、为什么分为同步任务和异步任务?三、 事件循环（Event Loop）四、宏任务和微任务1. 宏任务2. 微任务五、 任务队列1. 概念2. 运行机制六、测试1. 第一题2. 第二题3. 第三题4. 第四题5. 第五题6. 第六题总结前言JavaScript是单线程的，也就是说，同一个时刻，JavaScript只能执行一个任务，其他任务只能等待。一、为什么JavaScript是单线程的？js是运行于浏览器的脚本语言，因其经常涉及操作dom，

文章目录前言一、前后端分离项目二、 js渲染的项目三、前端渲染1. 优点2. 缺点四、后端渲染1. 优点2. 缺点五、对比1. 后端渲染2. 前端渲染总结前言首先了解什么是前后端分离项目，现在项目都是使用集成框架进行开发的，以vue为例，页面都是动态生成的。如果页面在前端渲染，其缺点就是十分不利于搜索引擎优化…一、前后端分离项目前端 HTML 页面通过 Ajax 调用后端的 RESTFUL API 接口并使用 JSON 数据进行交互二、 js渲染的项目通过 Ajax 请求数据以后, 通过 J

文章目录前言一、需求二、代码演示1. 方案一2. 方案二三、 结果演示总结前言作为一名professional前端开发攻城狮，那理应对地址栏传参了如指掌。今天封装一个获取url中携带的get参数的函数，一起来看下吧~一、需求let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'书写一个函数，将url地址中的GET参数(参数名和参数个数不确定)，将每一个参数按照key-value的形式放入一个

目录前言一、Boolean 布尔对象二、Date 日期时间三、 Error 异常对象四、Function 函数构造器五、Math 数学对象六、Number 数值对象七、Object 对象八、RegExp 正则表达式对象总结前言本文收集了js中常见内置对象的常用方法，每一个方法后都有介绍可以实现的功能，有需要的时候可以起到速查作用哦~觉得有用记得收藏起来哦 ^ _ ^一、Boolean 布尔对象Boolean.toString() —> 将布尔值转换成字符串Boolean.valueOf

目录前言一、什么是垃圾回收机制？二、垃圾回收方式1. 标记清除（mark and sweep）2. 引用计数（reference counting）三、 常用的垃圾回收机制1. 工作原理2. 工作流程总结前言当一个变量不再被使用的时候，我们需要将其释放掉，不能让它一直存在我们的内存中。今天跟着本文的脚步一起看下js中的垃圾回收机制吧~一、什么是垃圾回收机制？JS 的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时，这块内存还存在着，垃圾回收机制就是间歇的不定期的寻

目录前言一、方案一1. 实现思路2. 代码演示3. 缺点二、方案二1. Fisher-Yates shuffle(洗牌算法)2. es6实现3. es5实现三、方案三1. 实现思路2. 代码演示3. 缺点总结前言翻阅了一些资料，思考许久后，给大家整理出几种可以实现随机数组的方法。一起来看看都有哪些吧~一、方案一1. 实现思路使用Array的sort方法和Math的random方法数组sort方法可以传入一个用来指定按某种顺序进行排列的函数，如果省略，元素按照转换为的字符串的各个字符的

目录前言一、 需求二、解决方案1. Set2. reduce()方法3. 双重for循环4. splice()方法5. filter()方法6. Map总结前言有很多情况我们需要将服务端返回的数据，进行去重，那么都有哪些方法可以实现呢？本文列举了六中解决方案，一起来看看都有哪些~一、 需求数组去重，每个元素在数组内只能出现一次。二、解决方案1. SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。set方法的成员必须是唯一的，正好可以满足我们

目录前言一、为什么会出现跨域问题？1. 什么是跨域？2. 没有跨域会出现的问题二、解决方式1. jsonp2. CORS(跨域资源共享)3. 反向代理4. window + iframe总结前言一、为什么会出现跨域问题？1. 什么是跨域？指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对2. 没有跨域会出现的问题javascript 施加的安全限制，防止他人恶意攻击网站比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和

目录前言一、路由懒加载1. 为什么需要路由懒加载2. 如何实现路由懒加载3. 路由懒加载中的魔法注释二、分析包大小1. 需求2. 如何生成打包分析文件三、webpack配置排除打包1. 需求2. 排除打包四、 引用网络资源1. 需求2. CDN3. 实现步骤五、 打包去除console.log1. 需求2. 代码演示总结前言Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧~一、路由懒加载1. 为什么需要路由懒

目录前言一、Ajax1. 什么是Ajax2. 原理3. 优点4. 缺点二、常见http状态码1. 五种常见的状态码2. 其他状态码补充总结前言一、Ajax1. 什么是AjaxAjax 是“Asynchronous JavaScript and XML”的缩写它是指一种创建交互式网页应用的网页开发技术沟通客户端与服务器，可以在不必刷新整个浏览器的情况下，与服务器进行异步通讯的技术2. 原理通过 XmlHTTPRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 jav

目录前言一、字符串定义二、常用方法1. str.length2. charAt()3. concat()4. includes()5. match()6. replace()7. replaceAll()8. split()9. substring()10. toLowerCase()/toUppercase()11. trim()12. indexOf()总结前言之前总结了数组常用的方法，今天总结一下常用的操作字符串的方法~一起来看看都有哪些吧！一、字符串定义js中单引号或者双引号包裹起来的

目录前言一、需求二、代码演示1、for循环实现2、reduce()实现三、结果演示总结前言工作中前后端都需要将一个扁平的数组转换为嵌套的树状结构的数组，今天一起来看一看前端如何使用递归的方式实现吧~一、需求数组中某个对象的pid若与某个对象的id值相同，就将该项加到对应对象的children数组中。const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '

目录前言一、CSS动画1.优点2.缺点二、JS动画1.优点2.缺点三、CSS动画和JS动画的差异总结前言我们在做项目的时候，通常需要配合一些动画效果，从而给用户更好的体验。使用JavaScript和CSS都可以完成动画，那么它们各有什么优点和缺点呢？一起来看一下吧~一、CSS动画1.优点浏览器可以对动画进行优化浏览器使用与requestAnimationFrame类似的机制，requestAnimationFrame比起setTimeout 、setInterval设置动画的优势主要是：①

目录前言一、需求二、代码演示三、结果展示总结前言当一个项目中有许多数据需要展示的时候，众所周知一个页面是没有办法放下所有数据的，所以会出现分页的需求。那么分页又会产生什么新的需求呢？如果你也有这样的疑问，那就看看本文内容哦~一、需求那么如果分页特别多的时候，我们也不能把所有页码都展示出来，这时候就需要动态的展示当前选中页左右几个就可以了，为了用户更好的体验，尽量让选中的页码居中显示，这样也是极好的。在可能的情况下，让选中的页码值，在中间显示。// total: 总条数// size: 每页

目录前言一、借用构造函数1、思路2、缺点二、组合继承1、思路2、优点三、原型链继承1、思路四、寄生式继承1、思路2、缺点五、寄生组合式继承1、思路总结前言JavaScript中常见的继承有几种方法?各自实现的思路和优缺点是什么呢？跟随本文的脚步一起来看看吧。一、借用构造函数也叫伪造对象或经典继承。1、思路在子类构造函数的内部调用超类型构造函数。可以通过使用apply()和call()方法在新创建的对象上执行构造函数。2、缺点方法都在构造函数中定义，函数的复用就无从谈起。在超类型的原型中定

目录前言一、代码演示二、结果展示总结前言今天用js整一个随机背景色的九九乘法表，一起来看看怎么实现的吧~一、代码演示代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

目录前言一、this指向1、各种情况下的this指向2、代码演示3、结果展示二、改变this指向1.方法call()apply()bind()2、相同点3、区别总结前言今天谈一谈JavaScript中各种情况下this的指向问题，以及怎么改变this的指向。一、this指向1、各种情况下的this指向以函数形式调用时，this 永远都是 window以方法的形式调用时，this 是调用方法的对象通过构造函数创建实例对象的时候，this永远指向创建的实例对象严格模式下，普通函数this指

数组与对象的相互转换数组转对象需求let arr = [{label: '男', value: 0},{label: '女', value: 1}]// 转换为 let obj = {0:'男', 1:'女'}代码实现let arr = [{label: '男', value: 0},{label: '女', value: 1}]// 方案一// 思路// 1、使用数组的forEach方法遍历数组// 2、定义一个空对象// 3、将遍历得到的每一个对象中的value值当做新对象的

数组转树状结构很多场景我们需要把类似下面这样的扁平数组，转换为树状结构的数组格式。以下是代码实现及结果展示。需求let data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' },

数组常用方法push()将一个或者多个元素添加到数组末尾。let arr = [1,2,3]arr.push(4)console.log(arr) // [1,2,3,4]shift()删除数组内第一个元素，并返回删除元素的值。let arr = [1,2,3]let firstEl = arr.shift()console.log(firstEl) // 1unshift()将一个或者多个元素添加到数组的头部。let arr = [2,3]let newArr = arr.

目录前言一、什么是防抖？二、防抖解决了什么问题三、实现防抖的基本代码四、防抖的应用场景1.代码实现2.结果展示总结前言本文讲解一下js中防抖思想，下方有实现防抖的基本代码，可以复制到自己的编辑器看看效果哦。以及实际的应用场景。小伙伴会HTML、CSS、JQuery以及使用jQuery发送Ajax请求即可。一、什么是防抖？ 防抖阻止了事件的多次调用，规定时间内只会执行一次。二、防抖解决了什么问题假设一个用户高频点击一个按钮，点击按钮后会向后台发送请求，如果不使用防抖，就会发送许多重复的Aja

目录前言一、对象的浅拷贝？1.什么是浅拷贝2.代码演示3.结果展示二、深拷贝1.为什么需要深拷贝2.代码演示3.结果展示总结前言js中如何进行对象的深浅拷贝呢？相信看过本文后，你就会有一定的了解。话不多说，先从浅拷贝开始。一、对象的浅拷贝？1.什么是浅拷贝将一个对象内的值拷贝到另一个新的对象里，但是只能拷贝最外边的一层。2.代码演示代码如下（示例）：<!DOCTYPE html><html lang="en"> <head> <me

目录前言一、需求二、思路三、代码演示1.基础写法2.进阶写法四、结果展示总结前言如何计算一个元素在数组中出现的次数呢？本文通过基础写法和进阶写法进行讲解，还不会的小伙伴儿快来瞅瞅~一、需求求以下数组中每个元素出现的次数，示例结果：{a: 1, b: 3, c: 3}let arr = ["b", "c","b", "c","a", "b", "c"]二、思路通过JavaScript的内置对象Array提供的reduce方法，来计算数组内元素的出现次数。reduce语法arr.r

目录前言一、什么是原型？二、原型链三、代码演示总结前言为什么要学原型呢？原型链有什么作用呢？本文通过图解和代码给你讲解，快来一睹为快~提示：以下是本篇文章正文内容，下面案例可供参考一、什么是原型？JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，