JS原生
原生JS对于每个web前端的开发者来说,可谓是大楼下的基底,夯的越实,楼则起得越高,其重要性便不言而喻。
·段公子
一个追求用户极致体验的前端开发工程师
展开
-
理解JS中选择排序
选择排序算法原理[理解]将第一位依次与后面的元素相比较,得到最小值,与第一位交换。再用第二位依次与后面元素相比较,得到最小值,与第二位交换。从原始数据中找到最小元素,并放在数组的最前面。然后再从下面的元素中找到最小元素,放在之前最小元素的后面,直到排序完成以下是实现该算法的代码// 两个值互相比较,小的值放在前面// 将第一位依次与后面的元素相比较,得到最小值,与第一位交换。// 再用第二位依次与后面元素相比较,得到最小值,与第二位交换。for (var i = 0; i <原创 2020-05-20 12:19:29 · 207 阅读 · 0 评论 -
JS中可视化插入排序
插入排序插入排序的原理如下。第一个元素默认是已排序元素,取出下一个元素和当前元素比较,如果当前元素大就交换位置。那么此时第一个元素就是当前的最小数,所以下次取出操作从第三个元素开始,向前对比,重复之前的操作。以下是实现该算法的代码var arr = [8,3,54,7,12,9,6];for(var i=1;i<arr.length;i++){ var temp = arr[i]; for(var j = i;j>0;j--){ if(arr[j]>原创 2020-05-20 11:16:45 · 237 阅读 · 0 评论 -
JS中常用的性能优化方式
图片优化很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用 CSS 去代替。小图使用 base64 格式将多个图标文件整合到一张图片中(雪碧图)对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好节流考虑一个场景,滚动事件中会发起网络请求,但是我们并不希望用户在滚动过程中一直发起请求,而是隔一段时间发起一次,对于这种情况我们就可以使用节流。// fu原创 2020-05-18 14:55:50 · 1285 阅读 · 0 评论 -
为什么 0.1 + 0.2 != 0.3
为什么 0.1 + 0.2 != 0.3涉及面试题:为什么 0.1 + 0.2 != 0.3?如何解决这个问题?先说原因,因为 JS 采用 IEEE 754 双精度版本(64位),并且只要采用 IEEE 754 的语言都有该问题。我们都知道计算机是通过二进制来存储东西的,那么 0.1 在二进制中会表示为// (0011) 表示循环0.1 = 2^-4 * 1.10011(0011)我们可以发现,0.1 在二进制中是无限循环的一些数字,其实不只是 0.1,其实很多十进制小数用二进制表示都是无原创 2020-05-15 11:55:34 · 633 阅读 · 0 评论 -
instanceof 的原理
instanceof涉及面试题:instanceof 的原理是什么?instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。我们也可以试着实现一下 instanceoffunction myInstanceof(left, right) { let prototype = right.prototype left = left.__proto__ while (true) { if (left === nul原创 2020-05-15 11:46:48 · 232 阅读 · 0 评论 -
对 new 的理解
new涉及面试题:new 的原理是什么?通过 new 的方式创建对象和通过字面量创建有什么区别?在调用 new 的过程中会发生以上四件事情:新生成了一个对象链接到原型绑定 this返回新对象根据以上几个过程,我们也可以试着来自己实现一个 newfunction Dog(name){ this.name = name}Dog.prototype.sayName = function(){ console.log(this.name)}// 上面是本身Dogfu原创 2020-05-15 11:40:59 · 308 阅读 · 1 评论 -
探索 JS中的异步运行原理 及 Event Loop
前言:在实践的过程中,你是否遇到过以下场景,为什么 setTimeout 会比 Promise 后执行,明明代码写在 Promise 之前。这其实涉及到了 Event Loop 相关的知识,这一章节我们会来详细地了解 Event Loop 相关知识,知道 JS 异步运行代码的原理进程和线程涉及面试题:进程与线程区别?JS 单线程带来的好处?相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程?讲到线程,那么肯定也得说一下进程。本质上来说,两个名词都是 CPU 工作时间片的一个描原创 2020-05-14 12:18:16 · 217 阅读 · 0 评论 -
对JS中原型及原型链的理解
原型涉及面试题:如何理解原型?如何理解原型链?当我们创建一个对象时 let obj = { age: 25},我们可以发现能使用很多种函数,但是我们明明没有定义过它们,对于这种情况你是否有过疑惑?当我们在浏览器中打印 obj 时你会发现,在 obj 上居然还有一个 proto 属性,那么看来之前的疑问就和这个属性有关系了。讲到这里好像还是没有弄明白什么是原型,接下来让我们再看看 proto 里面有什么吧。看到这里你应该明白了,原型也是一个对象,并且这个对象中包含了很多函数,所以我们可以得出一个结原创 2020-05-11 19:50:33 · 250 阅读 · 0 评论 -
探索JS中的深浅拷贝
前言:对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。let a = { age: 1}let b = aa.age = 2console.log(b.age) // 2浅拷贝首先可以通过 Object.assign 来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所原创 2020-05-11 19:30:54 · 145 阅读 · 0 评论 -
对JS闭包的认识
闭包涉及面试题:什么是闭包?闭包的定义其实很简单:函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包。function A() { let a = 1 window.B = function () { console.log(a) }}A()B() // 1很多人对于闭包的解释可能是函数嵌套了函数,然后返回一个函数。其实这个解释是不完整的,就比如我上面这个例子就可以反驳这个观点。在 JS 中,闭包存在的意义就是让原创 2020-05-11 19:07:37 · 201 阅读 · 0 评论 -
教你一眼识出JS中千变万化的this指向
this是很多人会混淆的概念,但是其实它一点都不难,只是网上很多文章把简单的东西说复杂了。在这一小节中,你一定会彻底明白 this 这个概念的。涉及面试题:如何正确判断 this?箭头函数的 this 是什么?我们先来看几个函数调用的场景function foo() { console.log(this.a)}var a = 1foo()const obj = { a: 2, foo: foo}obj.foo()const c = new foo()我们原创 2020-05-11 11:12:34 · 170 阅读 · 0 评论 -
JS中类型之间的转换
为什么要进行类型转换??? 服务器请求回来的数据,有可能是字符串,比如age='18', var age = '18'; console.log(age+1);// 181查看变量的类型typeof关键字可以查看数据的类型var num = 11;console.log(typeof num);//numbernum = "abc";console.log(typeof nu...原创 2020-04-25 17:40:49 · 135 阅读 · 0 评论 -
JS运算符概述
算术运算符:+加法 -减法 *乘法 /除法 %取余 var a = 1, b = 2; a + b = 3 a - b = -1 a * b = 2 a / b = 0.5 a % b = 1目测,跟数学中的运算符是一样的。但是: var a = ...原创 2020-04-25 16:45:59 · 190 阅读 · 0 评论 -
JS中NaN的认识与ISNaN函数的使用
NaN & ISNaN在JS中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,js不会报错,而是会返回一个NaNNaN的注意事项:NaN为number类型,但NaN表示一个非数字NaN不等于任何值,包括NaN本身通过isNaN()可以判断是否是一个数字,返回false的时候,表示是一个数字 var a = 1; var b ; console...原创 2020-04-25 15:41:16 · 354 阅读 · 0 评论 -
JS七种基本数据类型
七种基本数据类型变量中的数据时需要存储在计算机中的计算机底层只能识别0和1,所以需要对不同类型的数据进行转.转换的结果会导致所需空间不同,所以JS中分成多种数据类型,以方便计算机的存储。值数据类型显著的特点: 只能存放一个值数据类型描述示例数字型(number)简写:num表示一个数字、可以是整数或者小数如:1.1、5666、888字符型(strin...原创 2020-04-25 14:32:20 · 533 阅读 · 0 评论 -
JavaScript 通过可视化数据来分析冒泡排序
前言:冒泡排序:无论在任何一种编程语言中,都是非常经典的有代表性的程序或者算法,它很锻炼一个人的程序思维,尤其是对于一个初学者而言,是入门编程的必经之路。不多说,我们先通过可视化动态图来解析,什么是冒泡排序可视化冒泡排序在动态图中,我们可以看到,每一次循环,都会拿出第一个数字和后面的数字进行两两比较,如果当前的数字大于后边的数字,便开始交换位置,然后在用比较出大的数字再和后边的进...原创 2020-04-17 18:49:15 · 192 阅读 · 0 评论 -
JS中的常见兼容处理
javaScript中常见的兼容性处理集合获取窗口尺寸获取浏览器窗口的内高度/宽度window.innerHeight//window.innerWidth兼容 IE 8,、7、6、5document.body.clientHeight//document.body.clientWidthonscroll 滚动事件获取滚动条到浏览器 顶部/左边 的...原创 2020-03-02 21:24:45 · 252 阅读 · 0 评论 -
JS常见设计模式概述
一、前言今天,与大家分享一下我对在项目中常见的设计模式的理解和认识。什么是设计模式设计模式就是针对项目中 特定的问题, 做出的简洁而且优化的处理方案二、设计模式单例模式概念:同一个构造函数,生成唯一的实例,防止重复的实例化优点:节省内存空间,提高程序执行效率原理:判断构造函数是否生成过实例化对象,没有则new构造函数生成实例化对象,有则返回之前所new出的实例...原创 2020-02-29 12:32:00 · 342 阅读 · 8 评论