qq_41620202的博客

原创 js 数组方法

1、join()使用分隔符将数组转为字符串并返回，不改变原数组let arr1=['a','c','e']console.log(arr1.join('%')) //a%c%e也可以使用分隔符将字符串转为数组let str1='a%c%e'console.log(str1.split('%')) //['a','c','e']2、push、pop、shift、unshift方法push()方法向数组的末尾添加一个元素pop()方法将数组的末尾元素弹出shift()方法向数组的开头添加

原创 css清除浮动

什么是浮动在HTML中，元素默认以普通文档流的方式排列，在普通文档流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如下所示：son1、son2和son3为块级元素独占一行，自上而下排列。 <style> div{ color:white; font-size: 30px; } .f

原创 对js 闭包的理解

概念闭包是指有权访问另外一个函数作用域中的变量的函数。即在函数内部定义一个函数，使内部函数能够访问外部函数的变量优点可以创建私有变量（定义全局变量容易造成变量污染）让变量始终保存在内存中缺点由于闭包常驻在内存中，如果处理不当，容易造成IE内存泄露，降低程序性能例子定义一个count=0，一个函数add()。要求每执行一次add，count的值就加一。首先我们将count定义为全局变量，很容易完成上述要求let count=0function add(){ count++

原创 vue 弹窗插件

1、新建messageBox vue组件<div class='messageBox'> <p>{{title}}</p> <p>{{content}}</p> <button @click="handleOk">dianji</button></div></template><style scoped>...</style>2、新建js

原创 vue数据双向绑定原理 Object.defineProperty()

什么是数据双向绑定就是当改变一个数据时，另一个数据能够获取到这个改变，反之亦然。vue中如下：<input type="text" v-model="aa" /><script>export default {name:'top-nav',components: {},data() {return { list:[ {id:1,name:'aa'}, {id:2,name:'bb'}, ], aa:'testt

原创 ES6新特性

文章目录let const模板字符串箭头函数let const1、const在声明时必须赋值2、let和const声明的变量不具备变量提升特性3、let和const均为块作用域（即仅在花括号内有效）4、let声明变量，const声明常量模板字符串本质上还是字符串，只不过可以写变量。用法let name='aa'console.log(`my name is ${name}`)模板字符串用反引号``表示，变量形式：${变量}箭头函数特点1、不需要function关键字2、不需

原创 js继承的几种方式

父类 function People(name,age){ this.name=name||'default name' this.age=age||33 this.log=function(){ console.log(`${this.name} is ${this.age}`) } } People.prototype.plog=functio

原创 改变this指向 call bind apply

let name='张三', age=12, sex='女'let obj={ name:'aa', age:'bb', myFunc:function(sex,hobby){ console.log(this.name)//李四 console.log(this.age)//44 console.log(sex) //男 console.log(hobby) //game }}let objjjj={name:'李四',age:44}obj.myFunc.call(ob

原创 vue中 使用数组下标作为v-for的key值 所带来的的问题

在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；也就是说列表数据修改的时候，他会根据key值去判断某个值是否改变了，如果改变了就重新渲染，不然就复用之前的元素。v-for可以使用数据本身所具有的唯一值作为key，也可以使用索引index作为key使用index作为key时：<template> <div> <ul> <li v-for="(item,index) in list" :key="index">{{item.na

原创 事件冒泡与捕获 阻止事件冒泡

冒泡 <style> div{ width: 150px; height: 150px; background-color: blue } .pp{ width: 100px; height: 100px; background-color: red; } </style&gt

原创 px rem em

pxpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。emem是相对长度单位。相对于父元素的字体大小，如：<style> div{ font-size:14px; } span{ font-size:2em }</style><div> <span>这是一段话</span></div>span标签内字体大小为2倍的父元素字体大小，即28pxremrem是CSS3新增的一

原创 行内元素和块级元素

块级元素1、可以设置宽高2、可以设置padding和margin3、默认宽度为100%4、独占一行，即使设置的宽度未满一行5、可以包含块级元素和行内元素行内元素1、不可以设置宽高，宽高由内容决定2、可以设置水平方向的padding和margin，不可以设置垂直方向的3、不独占一行，多个行内元素可在一行4、只可以包含行内元素、不可以包含块级元素inline-block如 input、img元素既能设置宽高，也能多个元素在同一行显示块级元素和行内元素可相互转换使用display:in

原创 9种跨域方式总结

1、jsonp2、CORS3、http proxy4、nginx反向代理5、postMessage6、document.domain + iframe7、window.name + iframe1、jsonpscript标签的src属性没有跨域问题，可以利用这一特点实现跨域资源共享。// localhost:5500<script> function test1(data) { console.log(data) }

转载 js if判断 转为boolean

js的if语句，是把其他数据类型强制转为Boolean类型，其主要常见误区也就是对于js数据类型理解不够深入。首先说一下js的数据类型吧。基本类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二[es6增加的]）。引用类型：对象(Object)、数组(Array)、函数(Function)。基本类型...

原创 diaplay:none opacity:0 visibility:hidden

原创 js 深拷贝

像数组、对象这些变量，我们将其直接赋值给另一个变量，不论改变哪一个变量的值，另一个也会随之改变。let obj1={name:'a'}let obj2=obj1obj2.name='b'console.log(obj1.name)// b为解决这些问题，我们可以采用以下方法。1、function deepClone(data){ if(typeof data ==='object' && !(data instanceof RegExp) && !(d

原创 关于原型和原型链的理解

在JavaScript中，继承通过构造函数和原型链来实现 <script> let a = new Object() a.name = "aa" console.log(a.valueOf())//{name: "aa"} </script>我们并没有给a对象添加valueOf方法，但a对象却可以调用valueOf方法。这就和原型链有关了。在JavaScript中，每个函数都有一个原型对象，通过prototype属

原创 性能优化之函数防抖

所谓函数防抖就是让函数在触发时的n秒后执行，若函数被反复触发且触发间隔小于n秒，则函数会在最后一次触发时的n秒后执行一次使用场景：搜索框输入并实时显示结果、鼠标滑过不同的菜单发出相应的ajax请求等。举例当鼠标在蓝色div内移动时，div内的数字加1...

原创 webpack配置vue

一、创建项目文件夹webpack_vue二、在该文件夹下打开命令行输入：npm init -y三、下载webpack webpack-cli，在命令行中输入cnpm i webpack webpack-cli -D四、下载vue-loader vue-template-compiler，在命令行中输入cnpm i vue-loader vue-template-complier五、下载vue为运行时依赖，输入cnpm i vue -S六、创建目录其中App.vue内容为：index.js内

原创 js获取视口宽高、获取鼠标位置、获取元素位置、获取滚动距离

获取视口宽高<script> let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight</script>获

原创 元素距左右屏幕为10px 高度为宽度的50% 垂直居中

<style> *{padding:0;margin:0;box-sizing:border-box;} html,body{height:100%;} .a{height:100%;margin: 0 10px;display:flex;align-items:center;} .b{width:100%;padding-bottom:50%;background-color:red;position:relative;} .c{width:100%;height:100%;font

原创 js性能优化之函数防抖、节流

什么是函数防抖一定时间内，让事件处理函数只执行一次函数防抖的使用场景搜索框，监听用户输入，显示关联词。用户输入频繁，但我们不能频繁向后端发起请求，这样影响性能。页面滚动。监听页面滚动，执行相应的事件处理函数。。。。怎样实现核心是setTimeout()，setTimeout中写事件处理函数。比如监听滚动事件，输出页面距顶端的距离。function showScrollTop(){...

原创 js 删除数组中的某个元素之splice、delete

splice方法用于替换或删除数组中的某个元素。array.splice(index,howmany,item1...itemx)index： 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。howmany： 可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。item：...

原创 vue路由传参 params和query

query传参：//-----------------路由routes:[ { path:'/index', component:com }, { path:'/home', name:Home, component:hhhhome }]//-------------------------------传参//通过path引入this.$router.p...

原创 module.exports、exports、export、import、require乱七八糟的导入导出方式

首先module.exports/exports是Node才支持的导出方式export/import是ES6才制止的导入导出方式require是Node和ES6都支持的导入方式Node里面的模块系统遵循的是CommonJS规范。CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)当Node执行一个文件时，会给该文件生成mo...

原创 js关于遍历对象 遍历原型上的属性和不遍历原型上的属性

for in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。会遍历原型上的属性Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。会遍历原型上的属性Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包...

原创 css实现下拉样式动画踩坑

<ul class='menu_list'> <li class='menu_list_item'>菜单</li> <li class='menu_list_item'>菜单</li></ul><ul class='pull_list'> <li class='pull_list_item'>...

原创 mongodb mongoose save方法写入数据失败

问题描述：在一个collection中，插入两条数据，第一条插入成功，第二条失败。打印错误为E11000 duplicate key error collection解决办法：删除indexes中的后两条数据。这个好像和索引有关，目前还没研究，正在学习mongo中。。。...

原创 js数组中包含 __ob__: Observer属性

vue中数组出现了__ob__: Observer，使用v-for遍历取不到值解决办法：yourArr=JSON.parse(JSON.stringify(yourArr))再用v-for遍历yourArr就可以了。

原创 java 基本数据类型包装类

作用：对基本数据类型的数值提供更多的操作。如：int a=10;String b = Integer.toString(a)System.out.println(b)//"10"String c = Integer.toString(a,2)//将int a转换为2进制的字符串System.out.println(c)//"1100"String d="1234";int e = ...

原创 mongo 删除对象数组中的对象

{ "_id" : ObjectId("5e782cb124c66a09547823a2"), "goods" : [ { "isChecked" : false, "_id" : ObjectId("5e782cb124c66a09547823a3"), "goodId" : "211",...

原创 vue前进刷新

问题：列表页：<ul><li v-for="item in goodslist" :key="item.id" @click="enterDetails(item.id)">{{item.name}}</li></ul>data(){return { goodslist:[{数据}{数据}]}},methods:{ enterD...

原创 typeof和instanceof

typeof 单元操作符 返回变量的类型，如 typeof ‘abc’ 返回stringinstanceof 双元操作符 判断变量是否是对象的实例 返回true/false如：var arr=[] ; arr instanceof Array 返回truetypeof能返回的类型有 Number String Boolean object function undefined其中 数组...

原创 promise用法示例

let p1=new Promise((resolve,reject)=>{ console.log('这是p1');//立即执行 setTimeout(()=>{ //setTimeout属于宏任务 resolve('执行成功') //属于微任务 ...

原创 js对象数组去重

大致思路：在对象内部，对属性排序将对象数组利用JSON.stringfy()转为字符串数组将数组内的字符串挨个与temp进行比较，不等则将该字符串push进新数组，并将该字符串赋值给temp。相等则比较下一个字符串将3得到的字符串数组，利用JSON.pase()将字符串解析为对象，然后push进一个空数组代码如下：function objectArraySort(oa){ ...

原创 for in 和 for of

遍历数组时：for in 遍历数组只能遍历数组的索引 index。for in的特点：for in遍历到的索引值为string遍历顺序可能不是实际的内部顺序会遍历数组的所有可枚举属性，包括原型。for of 可以遍历元素值遍历对象时：...

原创 js sort函数

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。也就是说直接使用sort来对数组进行排序的话，它是根据元素的Unicode来排序的，如：var arr=[100,23,1,1000,2]console.log(arr.sort())...

原创 js求数组的最大值和最小值

首先知道 Math.min()方法可求最小值，具体用法如下：var minValue=Math.min(4,6,2,9)console.log(minValue) //2但是min方法不接受数组作为参数这时候可以用apply()来解决这个问题。因为apply第二个参数为数组。如：var arr=[3,6,2,1,8]Math.min.apply(Math,arr)//apply是改...

原创 this指向问题

不同场景下的this指向一、普通函数下的thisfunction a1(){ console.log(this)//this指向a1所在的上下文环境，即window}二、对象中的函数var obj={ a1:function(){ console.log(this)//this指向函数所在的上下文，即obj对象 }}三、构造函数function Person(){ ...