JavaScript
文章平均质量分 50
沐浴 前端
前端学习者,希望未来能成为一个优秀的人,虚心若愚,求知若渴
展开
-
VUE中实现数据代理和数据劫持(Vue原理之步骤二)
VUE中实现数据代理和数据劫持1.VUE中实现数据代理把所有data中的数据代理到new出来的Vue实例上class Vue { //options是传过来的参数类似一个对象 constructor(options){ //把options存起来,可能会在实例中用到 this.$options = options //dat...原创 2020-02-27 17:18:51 · 2181 阅读 · 0 评论 -
ES6字符串,数值,布尔值的结构赋值
ES6字符串,数值,布尔值的结构赋值1.字符串的结构赋值字符串也可以解构赋值,因为此时字符串被转换为一个类似数组的对象const [a, b, c, d, e] = 'hello';// a = "h"// b = "e"// c = "l"// d = "l"// e = "o"类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值let { length: len } = "hello";// len: 52.数值和布尔值的解构赋值结构赋值时,如果等原创 2021-03-02 17:56:26 · 522 阅读 · 0 评论 -
ES6对象的结构赋值
ES6 对象的解构赋值对象的结构和数组有一个重要的不同,数组的元素时按照次序排序的,变量的取值是由它的位置决定的,而对象的属性没有次序,变量必须和属性同名才能取到正确的值let { bar, foo } = {foo: 'a', bar: 'b'};// foo = 'a'// bar = 'b'let { ccc } = {foo: 'a', bar: 'b'};// ccc = undefined如果变量名和属性名不一致var {foo: baz} = {foo: 'a',原创 2021-03-02 14:25:36 · 1636 阅读 · 0 评论 -
ES6 数组的结构赋值
ES6数组的结构赋值读于阮一峰老师的ES6入门书籍1.基本用法ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为结构;// 以前为变量赋值只能直接指定值let a = 1;let b = 2;let c = 3;// ES6 可以写成let [a, b, c] = [1, 2, 3];1.1 数组结构案例let [, , third] = ['a', 'b', 'c'];// third = 'c'let [x, , y] = [1, 2, 3];原创 2021-03-01 15:47:17 · 2340 阅读 · 1 评论 -
js手写实现new操作符
js手写实现new操作符 // 用函数来实现new function myNew(constructor){ //创建一个对象 let obj = {} //连接原型链,obj.__proto__ 不标准 obj = Object.create(constructor.prototype) //等同于 obj.__proto__ = constructor.prototype原创 2020-08-03 21:13:03 · 547 阅读 · 0 评论 -
js手写bind
js手写bind Function.prototype.myBind = function(context){ //保存一下this let _this = this //保存一下参数 let args1 = Array.from(arguments).slice(1) function F(){ //保存一下参数 le原创 2020-08-03 20:43:51 · 199 阅读 · 0 评论 -
js中手写apply(不能使用ES6语法)和使用ES6语法对比
js手写apply(不能使用ES6语法)参考前边手写call// apply和call的区别就是传参方式不同,apply第二个参数传的是数组 Function.prototype.myApply = function(context,args){ if(context === null || context === undefined){ context = window }else{原创 2020-07-23 16:27:02 · 373 阅读 · 0 评论 -
js中手写call(不能使用ES6语法)和使用ES6语法对比
js手写call(不能使用ES6语法)//在myCall中通过this拿到调用myCall的原函数,接下来,当函数被调用时,它作为某个对象的方法(前面加了"."),// this指向这个对象("."前面的对象)改变原函数中this的指向//将原函数作为context的方法调用时,方法名并不影响功能,但是将方法名写死可能会造成方法名冲突//传参问题,可以传递n个参数,使用arguments,第二个参数之后的叫剩余参数,将剩余参数传递给`context[uniqueName]`还可以通过`eval`来拼原创 2020-07-22 16:08:13 · 460 阅读 · 0 评论 -
js中比较数组中的对象下边的某个属性最小值
js中数组中对象下的某属性最小值和最大值最小值var arr = [{a:1,b:'b'},{a:5,b:'bbb'},{a:0,b:'bbbbb'}]//最小值Math.min.apply(Math,arr.map(ele=>{return ele.a}))最大值var arr = [{a:1,b:'b'},{a:5,b:'bbb'},{a:0,b:'bbbbb'}]//最大值Math.max.apply(Math,arr.map(ele=>{return ele.a}))原创 2020-06-30 16:56:27 · 729 阅读 · 0 评论 -
js数组中相同对象合并对象中不同数据
js数组中相同对象合并该对象中不同字段//数据,水果名称相同的,把数量累加合并起来,根据id是否相同判断var data =[ { id:'5ec223ec306f2300017aa7d4', fruitName:'苹果', num:100, price:30 }, { id:'5ec4fb83ad7caf0001257ed6', fruitName:'香蕉', num原创 2020-05-22 13:59:16 · 1342 阅读 · 0 评论 -
ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况
ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况 //封装函数方便调用 handleData(data, newarr) { const len = data.length for (let i = 0; i < len; i++) { //如果子级存在,并且有数据 if (data[i].children && data[i].children.length >原创 2020-05-19 11:31:52 · 2961 阅读 · 0 评论 -
js中for循环多次请求,返回数据不按照顺序返回的处理
js中for循环多次请求,返回数据不按照顺序的处理//根据使用场景按需处理 //先把所有请求返回的数据使用new Promise来异步处理,把返回来的数据按照顺序存放在一个atemp数组中 const atemp = [] for (let i = 0; i < 7; i++) { atemp.push( // 使用Promise用于异步计算 new Promise((resolve, rej原创 2020-05-19 11:11:27 · 4342 阅读 · 0 评论 -
js数组中对象去重(根据对象中存在唯一标识)
js数组中对象去重//数组中根据对象唯一标识对象去重//参数1: 是一个数组,数组中是对象//参数2: 每一个对象中的唯一标识function uniqueArrObj(arr, unique) { const tempArr = [] const tempObj = {} for (let i = 0; i < arr.length; i++) { if (!tempObj[arr[i][unique]]) { tempArr.push(a原创 2020-05-18 11:30:06 · 1566 阅读 · 0 评论 -
js中格式化时间
js中格式化时间函数//格式化时间function parseTime(time, cFormat) { if (arguments.length === 0) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else {原创 2020-05-18 11:25:56 · 1734 阅读 · 0 评论 -
Object.defineProperty的用法以及存取器getter/setter(Vue原理之步骤一)
Object.definePropertyObject.defineProperty(obj,prop,descriptor)//obj:必需,目标对象//prop:必需, 需定义或修改属性的名字//descriptor: 必需,目标属性所拥有的特性/* value:被定义的属性的值,默认为undefined writable: 是否可以被重写,true可以重写,false不能重写,...原创 2020-02-26 22:35:47 · 1131 阅读 · 0 评论 -
前后端交互,Promise 基本API
前后端交互,Promise 基本API1.接口调用方式1.原生ajax;2.基于jQuery的ajax;3.fetch;4.axios;2.异步JavaScript的执行环境是「单线程」所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程异步模式可...原创 2020-02-26 17:27:32 · 858 阅读 · 0 评论 -
模块化(commonJs和ES6 module)
模块化模块(Module): 一块具有独立功能的代码,可以是一个函数,一个对象,甚至是一个字符串或者数字,通常存储为一个单独的文件;**模块化出现的原因:**js很难编写大型项目,由于全局变量的污染和难以管理的依赖关系, 这些问题导致了js无法进行精细的模块划分,因为精细的模块划分会导致更多的全局污染以及更加复杂的依赖关系;1.CommonJs模块化目前只有node环境才支持CommonJ...原创 2020-02-24 18:24:11 · 1101 阅读 · 0 评论 -
JS事件循环
事件循环事件循环是js处理异步函数的具体方法具体做法是:1.执行 执行栈中的代码;2.遇到一些特殊的代码交给浏览器的其他线程处理;3.将执行栈中的代码全部执行完毕4.从事件队列中取出第一个任务放入执行栈,然后重复第一步;事件队列在不同的宿主环境中有所差异,大部分宿主环境会将事件队列进行细分,在浏览器中,事件队列分为两种:1.宏任务(队列) : macroTask,计时器结束的回调...原创 2020-02-23 18:39:19 · 239 阅读 · 0 评论 -
进程和线程,js单线程,js多任务操作,同步代码和异步代码,执行栈
进程和线程,js单线程,js多任务操作,同步代码和异步代码,执行栈1.浏览器,js , 执行引擎的关系js:一门计算机语言,提供表达程序逻辑语法和实现基本功能的API;浏览器:js语言的真实运行环境,又称为js的宿主环境;js执行引擎:js宿主环境(如浏览器)中的一个功能模块,用于解析并执行js;关系:2.进程和线程2.1进程当一个应用程序运行时,需要使用内存和cpu资源,这些资...原创 2020-02-23 16:39:30 · 460 阅读 · 0 评论 -
js中常用的数组去重的方法
js中数组去重的方法 var arr = [1,1,3,4,2,8,3,6,2,2,3]/*第一种****************************************************/ function unique(arr) { var newArr = [] for (var i = 0; i < arr.leng...原创 2019-12-08 10:20:27 · 201 阅读 · 0 评论 -
js中对象冒充继承和原型继承及封装的函数(继承所有的属性和方法)
js中对象冒充继承和原型继承及封装的函数(继承所有的属性和方法)1.对象冒充继承 // 父构造函数 function Parent(x) { // 属性 this.x = 1; // 方法 this.a1 = function(){ } }...原创 2019-12-08 09:57:41 · 252 阅读 · 0 评论 -
递归深拷贝和Object.assign() 加递归深拷贝和(JSON.stringify()+JSON.parse()最简单深拷贝)
深拷贝的几种方式1.使用递归深拷贝var obj = { name:'张三', age:20, card:['11','22',33], wife:{ name:'李四', son:{ name:'张六' } }, say:function(){ var a=3...原创 2019-10-21 18:37:57 · 1321 阅读 · 0 评论 -
js闭包和闭包的作用
闭包和闭包的作用1.闭包**闭包(closure)**指有权访问另一个函数作用域中变量的函数,一个作用域可以访问另一个函数内部的局部变量;闭包缺点: 当内部函数被保存到外部时就会生成闭包,闭包会导致原有作用域链不释放,造成内存泄漏;小案例function a(){ function b(){ var bbb = 234; console.log(a...原创 2019-10-02 09:13:20 · 309 阅读 · 0 评论 -
js------函数
函数1.函数函数就是封装一段可被重复调用执行的代码块,通过这个代码块可以实现大量代码的重复使用1.1函数声明//1.function 函数名(){ 代码块;}//调用,函数只有在被调用的时候才被执行函数名();/**********************///2.匿名函数,函数调用必须写在函数体后边var 函数名 = function() { 代码块;}...原创 2019-08-29 23:14:54 · 153 阅读 · 0 评论 -
ES6内置对象
ES6 的内置对象1.Array的扩展方法1.1扩展运算符扩展运算符可以将数组或者对象转为用逗号分割的参数序列let arr = [1,2,3];...arr //1,2,3console.log(...arr); /相当于console.log(1,2,3)扩展运算符应用于合并数组//方法1let arr1 = [1,2,3];let arr2 = [4,5,6];...原创 2019-10-02 10:57:50 · 518 阅读 · 0 评论 -
js中es6 class类的继承
js中 es6 class类的继承语法// 父类class Father{ } // 子类继承父类class Son extends Father { } 子类使用super关键字访问父类的方法//定义了父类class Father { constructor(x, y) { this.x = x; this.y = y; } sum...原创 2019-09-19 18:03:25 · 1715 阅读 · 0 评论 -
js作用域和作用域链
js作用域和作用域链[[scope]]: 每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个,[[scope]]指的是我们所说的作用域,其中存储了运行期上下文集合;作用域链: [[scope]]中所存储的执行期上下文对象集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链;运行期上下...原创 2019-09-30 16:26:22 · 258 阅读 · 0 评论 -
js预解析
js预解析1.预解析三部曲1.语法解析2.预编译3.解释执行2.预编译前奏**函数声明整体提升:**函数不管写在哪里,都会被提升到逻辑的最前边,不管在哪里调用,本质上都是在后面调用;var a = 123;//把变量的声明提升就是拆分为var a;a = 123;然后把var a 提升到最前边1.imply global 暗示全局变量,即任何变量,如果变量未经声明就赋值,此变量...原创 2019-09-30 15:55:45 · 175 阅读 · 0 评论 -
js鼠标事件和键盘事件
事件1.鼠标事件//1.鼠标点击左键触发onclick//2.鼠标经过触发onmouseover//3.鼠标离开触发onmouseout//4.获得鼠标焦点触发onfocus//5.失去鼠标触发onblur//6.鼠标移动触发onmousemove//7.鼠标弹起触发onmouseup//8.鼠标按下触发onmousedown//9.鼠标经过时触发,但是不会冒泡...原创 2019-09-08 18:03:21 · 1132 阅读 · 0 评论 -
js DOM
DOM1.DOM是什么文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。2.DOM树DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前页面...原创 2019-09-07 23:24:08 · 129 阅读 · 0 评论 -
js内置对象(String)
内置对象(String)1.基本包装类型 //基本包装类型 var str = '122123123'; console.log(str.length); // 对象才有属性和方法, 复杂数据类型才有属性和方法 // 简单的数据类型为什么会有length属性呢 // 基本类型包装类型,就是把简单的数据类型,包装...原创 2019-09-03 23:10:54 · 428 阅读 · 0 评论 -
js内置对象(Array)
内置对象(Array)1.数组对象数组对象是一个有序的数据(数据可以是 原始类型 或 对象类型)集合。相对于变量,数组可用于在一个变量中存储多个变量值。1.1数组对象的创建1.利用数组字面量方式var arr = [0,1,2,3,4,5,6,7,8,9];2.利用new Array()var arr1 = new Array(); //创建一个空的数组var arr2 = ne...原创 2019-09-03 00:31:23 · 431 阅读 · 0 评论 -
js内置对象(Math,Date)
内置对象(Math,Date)1.Math对象Math对象不是构造函数,它具有数学常数和函数的属性和方法;1.1常用简单方法Math.PI //圆周率 //Math.PI--->3.141592653589793Math.floor() // 向下取整//Math.floor(1.9)---> 1 Math.ceil() // 向上取整//Ma...原创 2019-09-02 18:20:56 · 193 阅读 · 0 评论 -
js------数组
数组数组是指一组数据的集合,每个数据被称为作为元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在变量名下的一种方式1.创建数组的方法字面量创建数组:var arr=[‘李白’,‘韩信’,‘露娜’,‘诸葛亮’];数组索引和对应的值:arr[0] = 李白;arr[1] = 韩信;arr[2] = 露娜; arr[3] = 诸葛亮;数组的长度:arr.length = 4...原创 2019-08-28 19:00:16 · 109 阅读 · 0 评论 -
js数据类型转换
JavaScript数据类型转换数据类型的转换转换为字符串类型:toString():转成字符串;String() :转成字符串;+拼接字符串(隐式类型):用加号和字符串拼接,结果都是字符串var a = 20;//toString()var b = a.toString(); //字符型20console.log(typeof b); //string//Stringvar...原创 2019-08-22 19:03:03 · 170 阅读 · 0 评论 -
js变量和数据类型
JavaScript的变量和数据类型1.变量的含义和存储变量就是用来存放数据的容器,可以通过变量名获取数据,也可以修改数据;在内存中存储的本质:变量是程序在内存中申请的一块用来存放数据的空间;2.变量变量的声明:var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管变量的命名规范:1.由字母...原创 2019-08-22 10:12:34 · 272 阅读 · 0 评论 -
什么是JavaScript
javaScript1、什么是JavaScriptJavaScript是一种运行在客户端的脚本语言;不需要编译,运行过程中由js解释器逐个进行解释并执行2、JavaScript的用途表单动态效验(密码强度检测);网页特效;服务端开发;桌面程序;APP;控制硬件-物联网;游戏开发;3、JavaScript的组成1、ECMAScript:是有ECMA国际(原欧洲计算机制造商协会)进行标准...原创 2019-08-21 23:23:22 · 4477 阅读 · 0 评论 -
js------流程控制
JavaScript—流程控制1.顺序流程控制顺序结构是程序中最简单的、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行;2.分支语句2.1 if语句if(判断条件){ //条件成立时执行代码语句;}2.2 if else------双分支语句经典案例—判断年份是否为闰年if(判断条件){ //如果条件成立时执行的语句;} ...原创 2019-08-24 21:41:06 · 122 阅读 · 0 评论 -
js节点操作
js节点操作1.节点**节点:**网页中所有内容都是节点(标签, 属性, 文本, 注释等),在DOM中,节点使用node来表示;HTML DOM 树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点) 均可被修改,也可以删除或创建;几点至少拥有nodeType(节点类型), nodeName (节点名称) 和 nodeValue(节点值) 这三个基本属性;1.元素节...原创 2019-09-08 23:44:44 · 948 阅读 · 0 评论 -
js事件高级(事件监听,事件对象,DOM事件流,事件委托)
事件高级1.注册事件(2种方式)1.1传统注册方式利用on开头的事件 onclick;<button onclick="我是最帅的" ></button>;btn.onclick = function(){ };特点:注册事件的唯一性;同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数;1.2监听注册方式addEven...原创 2019-09-09 23:58:24 · 383 阅读 · 0 评论