![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端基础
文章平均质量分 52
前端的基本知识
野生松
笨鸟要用力飞
展开
-
【JavaScript 基础】-- for in 和 for of 区别
日常开发中在对数组或对象进行遍历时,我们经常会使用到两种方法: for in和for of。它们两者都可以用于遍历,不过for in遍历的是数组的索引(index),而for of遍历的是数组元素值(value)for in:注意:for in 既可以遍历对象也可以遍历数组。 遍历数组时,顺序有可能不是按照实际数组的内部顺序 会遍历所有的可枚举属性,包括原型for of:注意:for of 遍历的是数组元素值,不包括原型属性和索引 不能遍历对象,适用遍历数/数组对象/字符串/原创 2022-05-14 16:08:27 · 239 阅读 · 0 评论 -
【JavaScript 基础】-- 不做 if-else 怪
前瞻我们日常开始发时经常遇到复杂逻辑判断的情况,通常大家可以用if/else来实现多个条件判断。但随着逻辑复杂度的增加,代码中的if/else会变得越来越臃肿。那么如何更优雅的写判断逻辑,拒绝做一个if else 怪呢?以下是我的一些优化思想举例有个需求是这样的:马上中秋节要来了,我们本次商场要做大促销活动。对每个商品,我通过在给它设置不同的价格类型,让它展示不同的价格。产品订的逻辑是这样:当价格类型为“预售价”时,满 100 - 20,不满 100 打 9 折 当价格类型为“大促价”时,原创 2021-06-27 22:21:42 · 369 阅读 · 4 评论 -
【JavaScript 基础】-- 灵活的应用JavaScript技巧
1、三元运算符使用三元操作符来代替 if...else优化前:const x = 20;let answer;if (x > 10) { answer = 'big';} else { answer = 'small';}优化后:const answer = x > 10 ? 'big' : 'small';2、短路求值当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句优化前原创 2021-06-23 21:40:30 · 192 阅读 · 1 评论 -
【JavaScript 基础】-- 多种数组变更与循环方法
一、改变原数组push:向数组尾部添加元素,返回添加后数组的长度。 pop:去除数组最后一个元素,返回被去除的元素。 shift:去除数组第一个元素,返回被去除的元素。 unshift:向数组头部添加元素,返回添加后数组的长度。 reverse:数组倒序,返回顺序完全相反的数组。 sort:数组排序(默认是从小到大),返回排序后的数组。 splice:方法向/从数组中添加/删除项...原创 2020-03-04 22:31:03 · 1619 阅读 · 0 评论 -
白屏和首屏加载时间计算
一个网站加载性能如何主要看白屏时间和首屏时间。俩个计算都是使用 new Date() - performance.timing.navigationStart白屏时间:指从输入网址,到页面开始显示内容的时间。计算方式:将以下脚本放在</head>前面就能获取白屏时间 首屏时间:指从输入网址,到页面完全渲染的时间。计算方式:在 window.onload 事件里执行上述方法...原创 2021-03-11 20:39:42 · 965 阅读 · 0 评论 -
什么是一级域名和二级域名
顶级域名:就是我们常说的一级域名。一个完整的域名由两个或者两个以上部分组成,各部分之间用英文的句号 "."来隔开就以百度为例:www.baidu.com一级域名为baidu.com(一级域名由主题与后缀构成)二级域名为:www.baidu.com,www代表的是主机Tips:域名中包含两个"."的就是二级域名,域名中只有一个"."的就是一级域名。...原创 2021-03-09 14:55:34 · 38104 阅读 · 0 评论 -
HTTP与HTTPS记录
HTTP/1 可靠传输,HTTP 基于 TCP/IP。 无状态,这里的状态是指通信过程的上下文信息,而每次 http 请求都是独立、无关的,默认不需要保留状态信息。这可以说是它的优点又是缺点。因为不需要保存连接上下文信息,无状态反而减少了网络开销,从这点看是优点。但是在需要长连接的场景中,需要保存大量的上下文信息,以免传输大量重复的信息,那么这时候无状态就是 http 的缺点。 明文传输,即协议里的报文(主要指的是头部)不使用二进制数据,而是文本形式。 队头阻塞问题,当原创 2021-03-08 21:38:57 · 205 阅读 · 0 评论 -
【JavaScript 基础】-- JS 加载引入方式(defer、async、prefetch、preload)
JavaScript是个单线程语言,渲染引擎和JS引擎不是同时进行的。所以提前引入js文件可能会造成堵塞,从而影响页面加载,出现闪屏等情况。于是为了解决这种情况,就出现了js在body最后引入、script标签中defer和async异步加载JS的方式。defer:如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染。如果有多个设置了defer的script标签存在,则会按照顺序执行所有的script。defer脚本会在文档渲染完毕后,DOMContentLoade原创 2021-03-08 14:02:35 · 3650 阅读 · 1 评论 -
如何判断一个对象是否属于某个类?
如何判断一个对象是否属于某个类?if(a instanceof Person){ alert('yes');}// 判断对象类型最好的方式// 对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。Object.prototype.toString.call('') ; // [object String]Object.prototype.toStr原创 2020-06-10 21:01:30 · 3537 阅读 · 0 评论 -
【JavaScript 基础】-- Promise中的then、catch、finally总结
总结:1、Promise的状态一经改变就不能再改变。const promise = new Promise((resolve, reject) => { resolve("success1"); reject("error"); resolve("success2");});promise.then(res => { console.log("then: ", res); }).catch(err => { console.log("catc原创 2020-05-21 17:29:13 · 37678 阅读 · 8 评论 -
promise中race和all的使用场景
race的用法:谁跑的快,以谁为准执行回调race的使用场景:比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下: //请求某个图片资源 function requestImg(){ var p = new Promise((resolve, reject) => { var img = new Image(); img.onload = function(){原创 2020-05-18 21:28:04 · 1834 阅读 · 1 评论 -
null和undefined的区别
null 表示一个对象被定义了,值为“空值”;undefined 表示不存在这个值。typeof undefined //"undefined"undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。当尝试读取时会返回 undefined;例如变量被声明了,但没有赋值时,就等于undefined。typeof null //"obje...原创 2020-04-09 21:53:05 · 261 阅读 · 0 评论 -
JavaScript判断数据类型的方法
判断数据类型的方法:typeof:console.log(typeof 2); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'str'); // stringconsole.log(typeof undefined); // undefinedconsole.log(typeof []); // ob原创 2020-05-13 20:44:07 · 95 阅读 · 0 评论 -
重绘和重排的区别
当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘(repaint或redraw):重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘发生在元素的可见的外观被改变,但并没有影响到布局的时候。比如,仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)重排(重构/回流/reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏原创 2020-05-08 20:45:53 · 7339 阅读 · 0 评论 -
【JavaScript 基础】-- 五种方式实现JavaScript对象继承
JavaScript是一门基于对象的语言,不是面向对象的语言。因为它没有自己的类(class)!所以对象继承的实现就尤为重要!!!一、原型链继承核心:将父类的实例作为子类的原型function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { ...原创 2020-03-19 22:25:24 · 174 阅读 · 0 评论 -
深入学习前端跨域(JSONP、CORS)
一、什么是跨域浏览器出于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源。同源策略是一个安全策略。所谓的同源,指的是协议,域名,端口相同。跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。二、解决方法1.JSONP原理:利用<script>标签没有跨域限制的漏洞...原创 2020-03-19 20:15:44 · 109 阅读 · 0 评论 -
【JavaScript 基础】-- 前端模块化方法(CommonJS和ES6模块方法)
一、CommonJSNode.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。实际使用时,用module.exports定义当前模块对外输出的接口(不推荐直接用exports),用require加载模块。/** 定义模块 math.js **/var basicNum = 0;funct...原创 2020-02-08 21:02:46 · 2979 阅读 · 0 评论 -
前端模块化和组件化(笔记)
组件化更关注的是 UI 部分:弹出框、头部,内容区、按钮等,都可以编写成组件,然后在适用的地方进行引用。而模块化更侧重于功能或者数据的封装,比如全局的 JSON 配置文件,比如通用的验证方法,比如规范时间戳等。...原创 2019-05-10 16:40:29 · 776 阅读 · 0 评论 -
前端本地项目连接到GitHub上的基本步骤
1、首先在你的本地项目文件夹下打开命令行:输入 git init 。作用是初始化git,生成.git文件,创建本地仓储。2、第二步 git add . ,将文件添加了仓储。可以理解为将 被add 的文件押入到需要commit 的队列里面3、第三步 git commit -m "提交消息", 提交代码4、想要上传到GitHub上,首先你得有GitHub账号,然后将本地电脑的公钥与GitH...原创 2019-11-27 21:11:28 · 505 阅读 · 0 评论 -
JavaScript闭包问题(学习笔记)
我的理解:闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。闭包的危害:1.由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在function test(){ var n...原创 2018-12-07 17:43:36 · 117 阅读 · 0 评论 -
ES6新的数据结构Set和Map
1.SetES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。2.MapJavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字...原创 2018-12-12 17:27:34 · 293 阅读 · 0 评论 -
改变this的指向(call、apply、bind)
call和apply的用法很相近,假设:let arr = [1,2,3]A.call(B, arr[1], arr[2], arr[3]) A.apply(B, arr)第一个参数:传的是要将this指向的那个东西,像上面我写的也就是将A的this指向B。第二个参数:call传的是每个值,apply传的是整个数组。(我可以...原创 2018-12-08 20:34:08 · 96 阅读 · 0 评论 -
字符串去重(学习笔记)
这个真的是醍醐灌顶//单行文本去重function SingleLineDistinct (str) { // Array.prototype.slice.call(str|new String(str)) 可兼容不支持from接口的浏览器 return Array.from(str).reduce( // 这里应该很好明白是在干什么吧? (...原创 2018-12-13 10:21:20 · 317 阅读 · 0 评论 -
【JavaScript 基础】-- 数组切割splice和slice
1.slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。(该方法不会改变原数组)2.splice():该方法向或者从数组中添加或者删除项目,返回被删除的项目。(该方法会改变原数组)splice(index,howmany,item1,...itemX)...原创 2018-12-13 11:11:48 · 2551 阅读 · 0 评论 -
手写事件监听函数
// event(事件)工具集,来源:github.com/markyunmarkyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload...原创 2018-12-13 11:25:48 · 455 阅读 · 0 评论 -
JSON字符串与JSON对象的转换
//JSON字符串转换为JSON对象:var obj =eval('('+ str +')');var obj = str.parseJSON();var obj = JSON.parse(str);//JSON对象转换为JSON字符串:var last=obj.toJSONString();var last=JSON.stringify(obj); ...原创 2018-12-13 11:32:05 · 84 阅读 · 0 评论 -
JavaScript字符串切割slice,substring,substr
1、slice()slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。语法:str.slice(start,end),截取str从start到end的所有字符(包含起始位置,不包含结束位置)说明:start和end都可以是负数,如果是负数,就从字符串的尾部开始算起,例如-1就是最后一个字符,-2就是倒数第二个字符,一次类推如果未指定end参数,则截取从 star...原创 2018-12-13 17:00:44 · 516 阅读 · 0 评论 -
JavaScript实现冒泡排序、选择排序
JavaScript实现冒泡排序、选择排序 function bubbleSort(arr){ let temp , len = arr.length; for(let i = 0 ; i < len ; i++){ for(let j = 0; j < len-i-1 ; j++){ if(arr[j+1] < arr[j...原创 2018-12-14 11:06:28 · 246 阅读 · 0 评论 -
ES6、ES5对象的封装与继承(学习笔记)
Javascript是一种基于对象(object-based)的语言1.ES5封装function cat( name, age){ this.name = name; this.age = age;}cat.prototype.type = '猫科动物';cat.prototype.eat = function() {console.log('吃老鼠')};v...原创 2018-12-09 20:33:16 · 983 阅读 · 0 评论 -
js数据类型转换
转换为数值类型:Number(mix)、parseInt(string,radix)、parseFloat(string)转换为字符串类型:toString(radix)、String(mix)转换为布尔类型:Boolean(mix)// 利用自动类型转换简单的实现手动类型转换// 任意值 => 字符串var str = "" + 2; //"2"...原创 2018-12-12 11:17:50 · 280 阅读 · 0 评论 -
js数据类型检测
typeof通常用于基本类型(null除外)及function的检测;instanceof通常用于引用类型的检测;准确的 引用类型 检测使用Object.prototype.toString.call(value) === "[Object Array]"等;属性 的检测使用in和hasOwnProperty()。...原创 2018-12-12 11:26:52 · 66 阅读 · 0 评论 -
this指向问题(学习笔记)
总的来说:this指的就是调用函数的那个对象。1.匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window。var name = "The Window";var obj = { name: "My Object", getName: function(){ return function(){ return this.name;...原创 2018-12-07 17:28:22 · 138 阅读 · 0 评论