js学习
文章平均质量分 71
南郭菌!
我要活的不像一个废物
展开
-
js中的性能优化
js性能优化在创建网页或者应用时,性能始终是绕不开的话题,前端作为一个贴近用户的位置,更要注重性能的优化。js作为前端的三大将之一,js也是必须要优化,今天我们来说一说js性能优化相关的方法。1. 图片懒加载如果一个网页加载图片过多,必定会导致http请求的次数增多,但是一个网页展示给用户的始终是出现在显示屏的部分,多出的部分,只有在滚轮轮动时,才会展示给用户,因为屏幕始终就那么一块大小嘛,所以呢没有显示在屏幕上的图片,我们就不进行加载,只有这个图片要进入屏幕时在进行加载,这就是图片懒加载!实现思原创 2021-05-22 20:49:19 · 595 阅读 · 0 评论 -
js中的函数柯里化
柯里化(Currying)在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术。(返回和原函数相同的结果)来个例子假如我们封装了一个柯里化函数,那么我们能干什么呢?function Curry(fn){}我现在有一个求和函数,如下function add(a, b, c, d) { return a+b+c+d;}这个柯里化函数能做到什么呢?// 封装一个柯里化函数 期待每一次将剩余参数进原创 2021-05-22 16:12:24 · 277 阅读 · 0 评论 -
js图表插件Echarts
在制作网页的时候,我们有时会需要制作图表,自己画一个很麻烦,这个时候就可以用到echarts。echarts1.下载js文件使用的时候需要下载echarts的js文件(官网链接),可以去官网下载。2.导入js文件就像jQuery一样导入他<script src="echarts.js"></script>3.创建一个容器,需要有一个具备宽高的div先制作一个简易的柱形图<div id="chart1" style="width: 700px; height:原创 2021-05-10 20:20:11 · 1109 阅读 · 1 评论 -
迭代器(iterator)和 生成器(generator)
迭代器(iterator)什么是iterator?迭代器(iterator)是一种统一的接口机制,它是一种接口,为不同的数据结构提供统一的访问机制,任何数据只要定义了iterator接口,就可以完成遍历操作。模拟一个迭代器在js里,一个对象中含有next()方法,并且这个next()方法返回一个对象那么这个对象就是一个迭代器,每一次调用next()方法都会返回一个包含value和done两个属性的对象,value表示数据集合当前成员的值,done是一个布尔值,表示遍历是否结束。let arr原创 2021-05-06 21:05:13 · 1248 阅读 · 0 评论 -
ES8 async 与 await
async 和 await 目的是为了简化promise中api的使用,两种语法结合可以让异步代码和同步代码一样。之前我们解决异步编程,可以使用像callback,promise这种方法,而在ES8中引入了async和await,我们先了解一下async函数asyncasync简化了在函数返回值中对promise对象的创建,用法就是修饰函数,放在函数声明的最前面,并且async函数的返回值一定是一个Promise对象。使用方法及返回值 async function test() {原创 2021-05-04 19:13:19 · 196 阅读 · 0 评论 -
ES6变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这个过程称为解构赋值。在es6之前我们给一个变量赋值,是直接指定值,而在es6中我们可以这么写。var arr = [1, 2, 4];[a, b, c] = arr;console.log(a, b, c);//1,2,4上面这段代码,从数组中提取值,按照顺序对应,给变量赋值数组的解构赋值在进行数组的解构赋值时我们要注意几个点1.在进行解构赋值时,等号两边的模式一样,就可以成功赋值...原创 2021-05-03 22:42:33 · 482 阅读 · 2 评论 -
let和const关键字使用方法
在我们初学javaScript时使用var来声明变量,但是使用var声明变量会遇到变量提升等问题,而且只有全局作用域和函数作用域这种蛋疼的问题。于是在2015年ECMA组织发布了es6,带来了新的声明变量的关键字。let关键字1. let声明的变量 只在let所在的代码块起作用,形成块级作用域之前我们使用var在if语句或者for语句声明变量时,在if外面的作用域也可以访问到,而使用let声明的变量会形成块级作用域,只在声明的花括号{}内部有效。if (true) { let num原创 2021-04-25 20:57:30 · 383 阅读 · 0 评论 -
模板引擎是什么?art-template怎么使用?
模板引擎干啥用的?假如说我的后台返回了一串这样的数据,让我们去渲染到界面以表格的形式显示。年龄大于18显示成年小于18显示未成年(这里就直接var来声明了)。 var arr = [ {name : "last", age : 9,message:"s6第一个王者"}, {name : "ning", age : 18,message:"s8Fmvp"}, {name : "ming", age : 16,message:"电竞铁原创 2021-04-23 17:55:24 · 1574 阅读 · 7 评论 -
前端插件swiper基础使用详解&含部分常用API
swiper插件swiper是一款功能强大、开源、免费的的前端轮播图插件。而且面向手机平板等移动终端(更多介绍可以去官网进行查看)。最近做项目时用到了这个插件,官网的文档看的我很难受!使用方法导入文件首先这个插件和其他的插件一样要引入文件,不同Swiper版本用到的文件名略有不同。我下载的版本是swiper-6.4.15版本里面有一堆奇奇怪怪的文件包含了在里面。我们在package文件夹下找到下面这四个文件放入你的项目里就可以了,最后我们导入这两个文件就可以使用了<link rel="原创 2021-04-19 02:04:39 · 5277 阅读 · 0 评论 -
js实现异步加载的三种方式
js实现异步加载1.deferdefer 写在script标签中的属性 让script变成异步的记载方式 只能在ie中使用//这两种怎么写都行<script defer></script><script type="text/javascript" defer="defer"> </script> 2.async(HTML5的属性)//和上面的一样3.按需加载动态创建script标签 等到所有的 html文件解析和加载完成之后在添加原创 2021-04-05 23:57:05 · 409 阅读 · 0 评论 -
浅谈深克隆和浅克隆,如何实现深克隆
在说深浅克隆之前(也可以叫深浅拷贝)我们先了解一下数据类型和它的存储,对后面的克隆会更好的理解。js变量传值在我们写项目的时候经常会将一个变量的值赋给另一个变量。那么他们在我们看不到的地方是怎么实现的呢?我们来看下面两个例子: // 基本数据类型 var a = 10; var b = a; console.log(a, b); a = 12; console.log(a, b); // 数组(引原创 2021-04-05 23:24:34 · 318 阅读 · 0 评论 -
JavaScript中的伪数组,伪数组转真数组
伪数组什么是伪数组?拥有length属性,无法直接调用数组方法,但可以通过下标对每个元素进行访问的数据集合就是伪数组。有哪些常见的伪数组?1.arguments2.NodeList下面我们来详细的介绍这两种伪数组:argumentsarguments:类数组对象,js中每一个函数都会有一个Arguments的实例对象(arguments)。特点:1.arguments会将实参的值以数组的形式保存,以及传入的实参个数(length)2.arguments的callee属性指向函数自己,(原创 2021-04-05 21:15:28 · 387 阅读 · 2 评论 -
原型的继承,几种常用的继承方法
原型的继承原型的继承方式有很多多种,今天主要说四种常用的方法一 子类原型继承父类的实例(原型链继承)原创 2021-04-01 08:52:56 · 3125 阅读 · 3 评论 -
JavaScript原型、原型链详解
(函数对象是由Function创建的,js引擎启动的时候,直接放在内存中)原型(prototype)js规定,每一个函数都有一个prototype对象属性,在默认情况下prototype是一个普通对象,在prototype中有一个属性,constructor,他指向函数本身图解如下:隐式原型(__ proto __)所有的对象都有一个属性:__ proto __,也就是隐式原型在默认情况下,隐式原型指向创建该对象构造函数的原型图解如下:(per. __ proto __.construc原创 2021-03-11 11:27:25 · 168 阅读 · 0 评论 -
JS this指向问题 详解
this在JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变.this无法赋值1.在全局作用域中,this指向window2.在函数作用域中this执行取决于函数是如何被调用的(被谁调用的)直接被调用,this指向全局对象。当作为对象属性被调用时,this指向这个对象。下面我们来通过几个例子来深入了解一下thisfunction test(){console.log(this);}test();你在全局对象中定义的函数,相当于给全局对象添加了一个原创 2021-03-09 10:01:51 · 300 阅读 · 2 评论 -
JavaScript闭包
js闭包闭包:闭包就是在提供了一个在外部访问另一个函数内部局部变量的方式。当内部函数被保存到外部时,将会形成闭包。闭包会导致原有的作用域链不会被释放,造成内存泄漏。我们先看一个例子var add; function test(){ var a = 999; add = function(){ a++; }; return function(){原创 2021-03-07 22:27:47 · 81 阅读 · 0 评论 -
浅谈JavaScript作用域,作用域链,预编译
预编译js是一种解释型语言,解释一句执行一句。js运行有三步一.语法检测:是否有语法问题?二.预编译:变量和函数的提前声明全局预编译1. 创建一个GO对象 Global Object2. 将var关键字声明的变量当作GO对象的属性,赋值为undefined,有重名的直接覆盖3. 将function关键字声明函数 当作GO对象的属性,值为函数体,重名直接覆盖函数预编译函数执行的前一刻开始4. 创建一个AO对象 Activation Object 执行期上下文对象5. 函数的形参原创 2021-03-07 19:09:54 · 271 阅读 · 2 评论 -
DOM事件等级以及事件冒泡、捕获
在学习什么是冒泡、捕获、事件流前我们先了解一下dom事件等级DOM事件等级dom事件等级分别是dom0级(用on搭载事件名称如onclick):一种是在标签内部写,on加事件名称如:οnclick=“函数名()”第二种如:div1.οnclick=function (){}dom2级(添加监听事件addEventListener(),解绑监听事件removeEventListener():在学习到**addEventListener()**监听事件时,我们知道监听事件的括号里可以填入三个值d原创 2021-02-27 17:08:34 · 467 阅读 · 0 评论 -
JavaScript 预编译&&作用域
JavaScript 预编译js三部曲1.语法分析:对js进行全面扫描检查,分析有没有语法错误,并不会立即执行语句。2.预编译:在函数执行之前,在你的内存中申请一点空间,存放变量和函数。看了网上很多的文章,也是有了一个更深的理解,我个人理解简单的来说,就是将你的变量声明和函数声明提到所有代码的最前面。3.解释执行:就是程序读一句执行一句例如上面的例子,先输出了函数然后输出了数字。最后执行第三步的时候实际代码如下:var a;//先定义了a 此时a为undefinedfunction a(原创 2021-02-24 21:39:51 · 89 阅读 · 0 评论 -
JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性,我第一个想的是.style属性、然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识。一·首先style属性我们建立两个div,一个给内联样式,一个给行内样式。我们只能获得到写了行内样式的css样式。所以style属性只是修改元素的行内样式。说个题外话: !important,可以提高样式的优先级。并且等级高于行内样式,所以在js中使用style属性修改的行内样式优先级也小于 !important例如下图原创 2021-01-19 20:01:41 · 1639 阅读 · 0 评论 -
javascript实现输出指定行数图形,打印乘法表
打印一个10行10列的正方形(要求:每一个输出语句中只能输出一个*)通过for循环,来循环使用document.write("*");最后得到一个10行10列的正方形。1.首先我们来考虑判断条件,因为是10行10列,所以 一共要循环输出100次,那么循环结构我们这样写 for (var i = 1; i <= 100; i++) { document.write("*"); }如果不进行更改的话就会得到一整排的星号,如果想得到正方形的话,那么我们每隔10个星号,通过document.w原创 2021-01-18 20:17:49 · 2388 阅读 · 0 评论 -
函数防抖和函数节流
函数防抖和函数节流函数防抖函数防抖:如果一个事件被频繁触发多次,并且触发事件间隔过短,则防抖函数可以使得对应的事件处理函数只执行最后触发的一次,函数防抖可以把多个顺序的调用合并成一次...原创 2020-11-06 07:08:24 · 245 阅读 · 0 评论