PeggyCoding-CSDN博客

原创 ES6对象的扩展

ES6有五种方法可以遍历对象的属性。for…in循环遍历对象自身的和继承的可枚举属性Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性的键名Object.getOwnPropertySymbols(obj)Object.getOwnPropertySymbols(obj

2020-10-20 15:06:10 121

原创 ES6部分数组扩展方法

1. Array.from()Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象。先看一个例子let fakeArr = { '0': 'a', '1': 'b', '2': 'c', length: 3}// es5的写法var arr1 = [].slice.call(fakeArr)// es6的写法var arr2 = Array.from(fakeArr)只要是部署了Iterator接口的数据结构，Array.fro

2020-10-20 11:55:09 189

原创 JavaScript之深入作用域链

作用域链的概念：当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级（词法层面上的父级）执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。下面我们来看看作用域链是如何创建和变化的。函数创建函数一个内部属性[[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，可以理解成[[scope]]就是所有父变量对象的层级链，但是值得注意的是，[[scope]]并不代表完整的作用域链。举个栗子f

2020-10-10 15:00:28 194

原创 JavaScript call和apply的实现

MDN对call方法的定义:call()方法使用一个指定的 this值和单独给出的一个或多个参数来调用一个函数。var foo = { value: 1};function bar(){ console.log(this.value) };bar.call(foo); // 1这段代码一共做了两件事情：call方法改变了this的指向，指向了foo执行了bar函数我们可以尝试着改变一下foo对象：var foo = { value: 1, bar:

2020-09-23 11:47:40 127

原创 JavaScript中的模块化开发

什么是模块化？简单来说，一个功能就是一个模块，多个功能组成完整的应用，我们把其中一个模块抽离出来，也不会影响其他功能的运行。那么为什么前端需要模块化呢？Javascript这门语言被创造出来时，它只是基于浏览器的。但自1996年以来，已经有各种各样的JavaScript平台可以在浏览器之外进行编程，官方定义的API只能构建基于浏览器的应用程序。人们逐渐认识到了问题的严重性：JavaScript没有模块系统。要编写JavaScript脚本，必须以HTML格式管理，连接，注入或手动获取和评估它们。没有

2020-06-22 18:09:45 129

原创 CSS中的flex和grid布局

1.flex布局flex布局：flex布局是弹性布局，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。但是，设置为flex布局后，子元素的float，clear，vertical-align属性都会失效。我们对于采用flex布局的元素，称为容器，对于子元素，称为项目。布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。1. 1 一些常见的父项属性（容器）flex-direction：设置主轴方向row：默认值，水平方向从左到右column：侧轴，垂直

2020-06-22 14:48:37 867

原创 DOM事件、事件流、注册事件、事件委托、事件捕获、事件冒泡

DOM（Document Object Model）：是处理html或xhtml的标准编程接口。通过这些接口可以改变网页内容、结构和样式。1.1 什么是事件？事件是可以被JavaScript检测到的行为（触发-响应机制）。事件由三元素构成：事件源：触发事件的元素事件类型：例如click点击事件事件处理程序：事件触发后要执行的代码执行事件的步骤：获取事件源 => 注册事件（绑定事件） => 添加事件处理程序1.2 注册事件注册事件有两种方式：传统方式和监听注册方式传统方式

2020-06-21 18:13:32 163

原创前端缓存之HTTP缓存（二）

1.1 什么是HTTP缓存？HTTP缓存：当客户端向服务端请求资源时，会先去到浏览器缓存，如果浏览器缓存有需要请求资源的副本，就可以直接从浏览器缓存中提取，而不会去到服务器。常见的http缓存都只能缓存get方式请求响应的资源，不能处理其他类型的响应。HTTP缓存都是从第二次请求开始的，当第一次请求资源时，服务器会返回资源，并在请求头中传回资源的缓存参数；第二次请求时，浏览器会对这些参数进行判断，命中强缓存的就返回200，不命中会把请求参数加到请求头中传给服务器，判断是否命中协商缓存，命中协商缓存返回

2020-06-21 17:14:58 240 1

原创 JavaScript原型和原型链(查找机制，this指向)

1.1 原型对象prototype什么是原型？我们先来看看下面的代码：function Person(name,age){ this.name = name this.age = age this.sport = function(){ console.log("我会运动") }}let p1 = new Person('Peggy',20)let p2 = new Person('Kris',25)上面这段代码相信大家都不会陌生，是很常见的利用

2020-06-21 15:44:49 502

原创 ES6中新增的一些数组方法（map、filter、reduce，find、every、some、forEach）

1. map函数map函数是一个映射函数，有一一映射的关系。array.map((item) => {…})let array = [1,2,3,4,5]let newArr = array.map(item => { return item + 1})console.log(newArr) //[2,3,4,5,6]可以看到结果是遍历了数组中的每一个数并加上了1。2. filter函数filter是过滤的意思，调用了filter方法后，会得到一个过滤后的新数组。a

2020-06-20 18:28:38 621

原创 JavaScript中this的指向问题

本文是基于很多大佬写得很棒的博客以及自己看书的一点理解，如果哪里说得有问题的欢迎评论区指正讨论~相信很多人刚开始学JavaScript，都会像我一样被this指向弄混，单纯秉着“谁调用指向谁”这句话并不是万能的，因为很多时候分不清是谁调用了函数。我们先来下面两段代码看看this的作用let obj = { a:'a', fun(){ console.log(this.a) }};let fn = obj.fun;fn(); //undefined相信很多

2020-06-20 16:47:26 141

原创 CSS中水平居中，垂直居中，水平垂直居中

水平居中块级元素给定宽度margin:0 auto;行内块元素居中：将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可text-align:center;用绝对定位absoluteposition:absolute;left:50%;margin-top:-(元素宽度的一半)px;利用flex布局display:flex;justify-content:center;垂直居中单行文

2020-06-17 14:31:42 96

原创关于CSS部分一些面试题的整理（自用）

CSS1.1.1 CSS有哪些基本选择器？权重如何表示？CSS基本选择器有：属性选择器，类选择器和ID选择器。CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。通常将权重分为四个等级，可用0.0.0.0来表示这4个等级。!important关键字优先级最高。内联样式的优先级可以看成是1.0.0.0ID选择器的优先级为0.1.0.0类、属性、伪类的选择器优先级为0.0.1.0元素、伪元素选择器的优先级为0.0.0.11.

2020-06-17 14:07:59 224

原创前端缓存之浏览器缓存（一）

浏览器缓存分为本地小容量缓存和本地大容量缓存1.1 本地小容量缓存小容量的缓存分别有cookie，localStorage，sessionStorage。cookie：数据存放在客户的浏览器上，每次请求的时候内容会自动传送到服务器，但是cookie的大小是受限的，不同浏览器对cookie的大小并不统一，多余的会被截掉。因此，cookie比较浪费带宽，不建议写入太多内容。cookie一般在4-10kb。localStorage：用于持久化的本地存储，会把内容一直存在浏览器中，直到清除浏览器的

2020-06-16 21:17:59 458

原创用CSS、JS实现三角形、轮播图和动画盒子

三角形用CSS边框可以模拟三角形的效果。首先将盒子的高度、宽度设为0。四个边框都要写，只给有需要的边框设置颜色，其余设置为透明。为了照顾兼容性，低版本的浏览器可以加上font-size:0;line-height:0;这是未设置透明的效果：div{ width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid green; border-left:

2020-06-16 16:29:18 445

原创关于HTML部分一些面试题的整理（自用）

HTML1.1.1 HTML和XHTML的区别？HTML是一种基于Web网页的设计语言，XHTML是一种基于XML，语法严格、标准的设计语言两者主要不同的是XHTML必须正确的嵌套，元素必须关闭，标签必须小写，必须有根元素；而HTML没有这些限制。1.1.2 静态网页和动态网页的区别？静态网页是指没有数据交互的网页，即没有数据库参与，没有服务器端数据的加载动态网页是指有后台数据参与的网页，网页中的数据都是从数据库中提取的，需要有后台逻辑的支持。1.1.3 DOCTYPE有什么作用？区分

2020-06-16 10:20:32 150

转载 JavaScript判断数据类型的方法

本文将介绍在JavaScript中几种判断数据类型的方法。1. typeof用typeof对基本数据类型进行判断typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof null //返回类型错误，返回Object用typeof对复杂数据类型进行判断typeof [] // 'object'typeof {} // 'object'ty

2020-06-02 14:22:25 287

原创 Vue响应式原理解析（Vue2.x和3.x及区别）

我们都知道在Vue.js中，MVVM相对传统的DOM操作，有一个很大的优点就是能实现数据的双向绑定。先用代码来体验一下：<div id="app"> {{message}} {{name}} </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app',

2020-06-02 10:46:51 921

原创 Vue.js的MVVM模式

开头先放出这张大家看过很多遍的图。简单理解就是：在模板（Model）上绑定JavaScript对象（数据），当视图层（View）发生改变，VM层会监听视图层的变化并通知Model数据更新，数据更新后再通过VM层通知View层发生改变。View层和Model层并不能直接通信，两者得到了最大限度的分离。具体执行过程看这张图：实现一个Obverse数据监听器，监听所有节点数据对象的属性，如果检测到发生变化便通知Dep（订阅者）实现一个Compile模板编译类，对每个节点进行解析编译，根据要求更新.

2020-05-29 11:14:34 291

原创 JSON入门（基本知识点总结）

JSON是一种数据格式，不是一种编程语言。JSON是JavaScript的一个严格子集，利用了JavaScript中的一些模式来表示结构化数据。并不是只有JavaScript才是用JSON，很多编程语言都有针对JSON的解析器和序列化器。1.1语法JSON的语法可以表示以下三种类型的值1.1.1 简单值可以在JSON中表示字符串、数值、布尔值和null。但是JSON不支持JavaScript中的特殊值undefined下面是JSON表示字符串的方式："Hello World"JSON字符串

2020-05-28 13:35:19 298

原创 Vue修饰符的使用和解析

Vue提供了很多方便使用的修饰符，这里做一点总结。事件修饰符按键修饰符系统修饰符事件修饰符在事件处理程序中可以调用preventDefault方法和stopPropagetion方法可以阻止默认事件和阻止冒泡，但是我们希望方法中只存在数据逻辑，而不是处理DOM事件细节。因此vue.js提供了事件修饰符。.stop由于事件冒泡，给元素绑定某个事件（如点击事件）时，也会触发父级元素的（点击）事件，用**.stop**可以阻止事件冒泡，相当于调用了stopPropagatio()方法。.

2020-05-26 14:32:24 166

原创 Vue中组件数据的存放

在Vue.js中，组件是一个单独功能模板的封装，这个模板有属于自己的HTML代码，也有属于自己的数据data。测试下面这段代码，可以发现，组件不能直接访问Vue实例的data。<div id="app"> <cpn></cpn></div><template> <div>{{message}}</div></template><script> let app = new Vue(

2020-05-14 23:00:13 1081

原创 JS中Math对象pow(),abs(),ceil(),floor(),round()等常用方法

关于JS中Math对象常用的方法JavaScript Math对象Math对象多用来执行常见的算术方法。Math.Pow(x,y)pow方法用于返回x的y次幂的值x：底数 y：指数console.log(Math.pow(2,4)); //输出16Math.abs()abs方法用于返回一个绝对值返回类型：number，如果不是数字返回NaN，0返回null。console.l...

2020-04-28 09:17:43 1003

Peggy0829的博客