- 博客(43)
- 收藏
- 关注
RSS订阅转载 9种JavaScript数组去重的高阶方法
一般的方法此处也不列举了，还是有很多的，如双层循环判断是否相等，或新建数组比较再push等等，需要注意的是，使用splice方法移除元素时，有可能会导致数组塌陷问题，需要处理一下。本文中介绍了多种数组去重的方法，使用了较多的高阶方法及API，并给出相应解释及语法，还有其他多种组合调用方式，原理逻辑其实都差不多，其中for循环可以与forEach方法相互转换，因此此处便不再一一列举，大家如果有更好的算法，可以留言给我，虚心请教！！给定一个数组 [1,2,2,4,null,null,‘3’,‘abc’,3,
2021-05-25 11:07:35
238
原创 一文搞懂 this、apply、call、bind
this的指向“this” 关键字允许在调用函数或方法时决定哪个对象应该是焦点。在JavaScript中this可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式，this 绑定的对象即函数执行的上下文环境。在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，正是由于调用function的对象不同，才导致了this的指向不同// e.g.1var test = { a: 5, b: 6, sum: function (a, b
2021-05-25 10:58:46
279
4
原创 Vue 路由组件传参的 8 种方式
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 vue-router@4。编程式路由传参除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。1. 通过 params 传递路由配置路径参数 用冒号 : 表示。const routes = [ // 动态段以冒号开始 {
2021-05-25 10:49:22
2024
1
转载 工作中有用的javaScript代码块
1.随机ID生成当你在进行原型设计并需要唯一的id时，这可以成为你的首选功能。const a = Math.random().toString(36).substring(2);console.log(a)----------------------------72pklaoe38u2.生成范围内的随机数在很多情况下，我们需要在一个范围内生成一个随机数。Math.random函数可以帮助我们生成随机数，然后将其转换为所需的范围。max = 20min = 10var a = Math.
2021-05-25 10:38:52
93
原创 Vue 性能优化方式及原理
我们在使用 Vue 或其他框架的日常开发中，或多或少的都会遇到一些性能问题，尽管 Vue 内部已经帮助我们做了许多优化，但是还是有些问题是需要我们主动去避免的。我在我的日常开中，以及网上各种大佬的文章中总结了一些容易产生性能问题的场景以及针对这些问题优化的技巧，这篇文章就来探讨下，希望对你有所帮助。使用v-slot:slotName，而不是slot=“slotName”v-slot 是 2.6 新增的语法，具体可查看:Vue2.6，2.6 发布已经是快两年前的事情了，但是现在仍然有不少人仍然在使用slo
2021-05-25 10:17:07
172
原创 2-3年前端经典面试题
webpack是做什么用的？在发送请求时对请求进行终止？单点登录，多点登录的理解？js，jq，H5C3，浏览器seo优化，跨浏览器解决问题？(IE即将落下帷幕)restful和普通接口有什么区别？ES6的导入导出的了解？js模块闭包的理解及应用场景，内存泄漏的理解及应对方法？原型链？js数组去重，求和，数组字符串类型转换，数据类型判断typeOf等，join，split方法等？手写ajax请求过程？ajax和axios、fetch的区别？回调函数，async await，Pro.
2021-05-24 19:03:27
1685
原创 一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX
不管是Vue，还是 React，都需要管理状态（state），比如组件之间都有共享状态的需要。什么是共享状态？比如一个组件需要使用另一个组件的状态，或者一个组件需要改变另一个组件的状态，都是共享状态。父子组件之间，兄弟组件之间共享状态，往往需要写很多没有必要的代码，比如把状态提升到父组件里，或者给兄弟组件写一个父组件，听听就觉得挺啰嗦。如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。如果没有经历过这方面的困扰，可以简单理解为会搞得很乱就对了。在软件开
2021-03-29 09:57:03
200
原创 初始化项目+准备工作(更新版)
一 : vue 是 单文件组件导 : 之前注册组件有什么缺点 ? 1- 缺乏语法高亮 2-格式不好整体 3-没有专门的写css代码等等参考 : vue => 工具 => 单文件组件什么是单文件组件 ? 后缀为 .vue 的文件单文件组件的三个组成部分 (代码块 : scaffold 自动提示)template (模板结构)script 组件的代码逻...
2019-11-14 11:49:40
296
原创 02-webpack步骤-改造
webpack 使用步骤 (最新版)webpack 第一阶段命名初始化阶段项目名不能有汉字,不能取名叫 webpack创建项目名称并生成 package.json, 命令 : npm init -y安装 : npm i -D webpack webpack-cliwebpack : 是 webpack 工具的核心包webpack-cli : 提供了一些在终端中使用的命令-...
2019-07-16 23:50:32
198
原创 01-webpack介绍-改造
Webpackwebpack官网webpack中文网一 : Webpack 介绍Webpack 是什么?? (面试)前端模块化打包(构建)工具WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及新语法，并将其转换和打包为合适的格式供浏览器使用。为什要使用WebPac...
2019-07-16 23:49:17
126
原创 Vue-router基础知识
单页面应用程序SPA : Single Page Application 单页面应用程序MPA : Multiple Page Application 多页面应用程序单页 web 应用就是只有一个 web 页面的应用,是加载单个 HTML 页面,并在用户与应用程序交互时, 动态更新该页面的 web 应用程序区别对于传统的多页面应用程序来说, 每次请求服务器返回的...
2019-07-16 23:44:08
171
原创 git-命令大全
版本控制系统为什么要有版本控制系统在开发过程中，经常需要对一个文件进行修改甚至删除，但是我们又希望能够保存这个文件的历史记录，如果通过备份，那么管理起来会非常的复杂。什么是版本控制系统版本控制系统（Version Control System）:是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。版本控制系统不仅可以应用于软件源代码的文本文件，而且可以对任何类型的文...
2019-07-16 20:51:41
138
原创 Vue基本语法day06
一. 通信机制1. 父传子: 1.1 通过属性,父组件将数据传递给子组件 :msg = 'pmsg' 1.2 子组件通过 props 配置项,指定一下要接收的数据 props : [ 'msg' ]2. 子传父: 2.1 父组件准备一个方法 methods: { pfn(res) { console.log('父组件接收到的 : ', res) } } 2.2 通...
2019-04-22 00:05:31
213
原创 Vue基本语法day05
组件 (重难点)一 : 认识组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可 (将一个完整的页面,抽离成一个个独立的组件,最终,通过这一个个独立组件完成整个的页面(项目)的功能)组件化和模块化的不同：- 模块化： 是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模...
2019-04-19 11:22:34
199
原创 Vue基本语法day04
一. ES6 中的默认值表示方式: test() function test(num = 20) { // es5 // num = num || 10 // es6 // (num = 20) console.log(num) }============================================================...
2019-04-19 00:53:10
239
原创 Vue2.0知识路线图
day01: 1. vue 介绍 2. MVC + MVVM 区别与对应优势 3. vue基本使用及注意点 4. {{}} 插值表达式 5. v-model (数据双向绑定)的使用及内在原理 6. v-text 和 v-html 7. v-bind 的使用(数据单向绑定, M(数据层) ==> V(视图层)) 8. v-on的使用(注册事件/绑定事件) 9. v-for...
2019-04-16 01:00:14
502
原创 Vue基本语法day03
data 变化,引发的事情?data 里的数据发生了变化,指令会重新计算data 里的数据发生了变化,表达式会重新计算<div id="app"> <h1>{{ num }}</h1> <h1 v-show="getShow()">w shi h1</h1> <h1>{{ num >= 105 ? ...
2019-04-16 00:29:09
236
原创 Vue基本语法day02
v-if 和 v-show 切换元素的隐藏和显示格式: v-if / v-show='布尔值', true => 元素显示, false => 元素就隐藏相同点: 都可以切换元素的显示和隐藏不同点: 实现的方法不同v-if : 显示 : 创建节点,,,隐藏 : 删除节点 通过不断的创建和删除节点来切换v-show : 显示 : display: bloc...
2019-04-15 21:16:44
853
原创 Vue基本语法day01
二 : Vue 介绍vue 中文网 https://cn.vuejs.org/github 下载地址 https://github.com/vuejs/vueVue.js (读音 /vju:/ view)渐进式 JavaScript 框架4.1 渐进式 :小型项目 就可以使用 vue 就高度了随着页面的复杂程序提高,就要学习 vue-rouer 来管理更多的页面再随着项目的数据越...
2019-04-12 23:33:28
316
原创 移动端开发基础知识
移动web开发指的是: 需要适配移动设备的网页开发移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术移动端与pc端web开发的区别:1、浏览器不同移动端的浏览器与pc端不同谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 百度手机浏览器 360安全浏览器 搜狗浏览器 猎豹浏览器等国内的手机浏览器都是根据webkit内核修...
2019-04-09 23:37:04
18762
原创 ES6之基础知识
一. ES6中提供了两个声明变量的关键字：const 和 letES6 用let来声明变量,它的用法类似于var。1.1 let的使用 - let声明的变量,多了一个块级作用域 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 - 不...
2019-04-09 21:51:51
244
1
原创 ES5之数组遍历七大方法
* 方法1 : forEach 遍历数组, 等同于 for(但是性能没有for好)* 返回值 : 没有返回值 // var arr = ['zs', 'ls', 'ww']// item : 数组里的每一个元素 (最最多)// index : 数组元素的下标/索引 (很少用)// array : 数组 本身 // arr.forEach(function ( item,i,ar...
2019-04-09 20:34:41
5122
原创 移动端自适应之rem布局(原生js实现)
页面最大宽度 750pxhtml{ font-size:75px;}img{ width:1rem; height:1rem;}// js方式,动态调整布局function setRem() { //获取屏幕的宽度 var w = window.innerWidth; if (w > 750) { w = 750...
2019-04-07 23:52:30
706
原创 nprogress进度条插件使用
nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件使用步骤:引入js文件和css文件 <link rel='stylesheet' href='nprogress.css'/> <script src='nprogress.js'></script>使用进度条插件引入了nprogress.js文件后，就有了一个...
2019-04-07 23:39:21
5839
原创 缓存之斐波那契数列
斐波那契数列问题,几乎所有计算机语言中都涉及到.接下来针对斐波那契数列,展开性能优化,即引入了 “缓存” 这个名词 垃圾代码: var count = 0; function fib(n){ count++; if(n === 1 || n ===2){ return 1; } r...
2019-04-04 00:31:49
1156
原创 本地存储之localStorage语法
使用场景: 例如搜索栏的搜索历史,购物网站面包屑导航的分类针对搜索历史,现在数据存储在后台数据库(大数据,联想淘宝搜索,第二天弹出类似.)注意: localStorege 只能存字符串,如果是其他类型的数据,都会转换成字符串如果要如果要在localStorage中存储复杂类型的数据,需要使用JSON.stringify() 转成 json字符串localStorage.getItem取到...
2019-03-31 00:32:47
1248
原创 jquery对象和dom对象之间转化
什么是DOM对象? 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。var btn = document.getElementById(“btnShowDiv”);var divs = document.getElementsByTagName(“div”);dom对象只可以使用do...
2019-03-31 00:17:23
3801
原创 Session与Cookie的原理(二)
一、Session的概念Session 是存放在服务器端的，类似于Session结构来存放用户数据，当浏览器 第一次发送请求时，服务器自动生成了一个Session和一个Session ID用来唯一标识这个Session，并将其通过响应发送到浏览器。当浏览器第二次发送请求，会将前一次服务器响应中的Session ID放在请求中一并发送到服务器上，服务器从请求中提取出Session ID，并和保存的...
2019-03-29 19:52:09
225
原创 cookie和session原理(一)
session原理：1、session是保存在服务器端，理论上是没有是没有限制，只要你的内存够大2、浏览器第一次访问服务器时会创建一个session对象并返回一个JSESSIONID=ID的值，创建一个Cookie对象key为JSSIONID，value为ID的值，将这个Cookie写回浏览器3、浏览器在第二次访问服务器的时候携带Cookie信息JSESSIONID=ID的值，如果该JSE...
2019-03-29 19:49:18
981
原创 js基础之内置对象
JS内置对象就是指Javascript自带的一些对象，供开发者使用，这些对象提供了一些常用的的功能。常见的内置对象有Math、String、Array、Date等内置对象有很多，我们主要是记下这些内置对象的用法即可.网上资源如下:火狐开发者网站MDN https://developer.mozilla.org/zh-CN/W3School网站 http://www.w3school.c...
2019-03-22 22:00:26
3861
原创 面向对象与面向过程&&举例
面向过程 （洗衣服）-- 站在一个执行者的角度去做事情 // 1. 找个盆 // 2. 收集要洗的衣服 // 3. 放水放洗衣液 // 4. 洗一洗 // 5. 晒一晒面向对象 – 站在指挥者的角度 // 1. 找个对象 // 2. 让他去洗 // 面向对象不是用来替代面向过程， 是封装了面向过程的代码 /...
2019-03-22 21:25:41
3611
原创 注册事件+事件传播和阻止
注册事件的两种方式(原生js) 1. on + 事件名 存在覆盖问题 document.onclick = function(){ alert(1); } document.onclick = function(){ alert(2); } 解绑事件 document.onclick = null; 2. 注册事件新方式 ---...
2019-03-22 21:14:34
250
原创 节流阀之拖拽登录框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;...
2019-03-22 17:47:07
333
原创 git
版本控制系统为什么要有版本控制系统在开发过程中，经常需要对一个文件进行修改甚至删除，但是我们又希望能够保存这个文件的历史记录，如果通过备份，那么管理起来会非常的复杂。什么是版本控制系统版本控制系统（Version Control System）:是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。版本控制系统不仅可以应用于软件源代码的文本文件，而且可以对任何类型的文...
2019-03-17 18:04:12
248
原创 HTML5和CSS3基本知识
HTML5的发展(了解)1-HTML 的历史： 1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML 4.01 版本稳定下来。 后来逐渐被更加严格的 XHTML 取代。2-XHTML 的兴衰史： 自从 HTML 4.01 版本之后，掌握着 HTML 规范的万维网联网（W3C）组织没有再发布新的标准，而是围绕着 XHT...
2019-03-12 23:55:17
1864
原创 移动端轮播图插件使用说明+代码详解
此案例中:移动端轮播图使用的是swiper 3.4.2 版本引入css样式文件: 引入轮播图HTML代码块:引入swiper 3.4.2 版本js文件初始化swiper功能调节样式(即.将轮播图图片样式:高度100%,display:block)class = swiper-*** 的div, 是必须要有的.jd-layout 是body标签内网页内容最大的盒子jd-ban...
2019-03-06 21:30:55
1687
原创 函数调用模式与this的前世今生
函数的四种调用模式与this // this 指向 // ①. 任何函数都有自己的this指向 // ②. this的指向和函数的调用模式相关，在函数没有调用的时候，仅仅是定义了函数，是不知道this的指向。 // 遇到this的问题，如何去分析 // 1. 分析这个this 是属于哪个函数的 // 2. 分析这个函数的调用模式是哪...
2019-03-06 00:04:06
220
原创 发送不同源请求的基本方式
请求一个不同源地址:就是我们所说的跨域请求.同源策略中的同源指的是:协议相同,域名相同,端口相同同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据.如果非同源，以下三种行为都将收到限制:1. Cookie、LocalStorage 和 IndexDB 无法读取。2. DOM 无法获得。3. AJAX 请求不能发送。当前页面访问地址: http://day-12...
2019-03-04 18:41:00
635
原创 跨域之JSONP
JSONP : (json with Padding) 是一种借助于 script标签发送跨域请求的技巧.原理 : 就是在客户端借助script标签请求服务端的一个动态网页(php文件),服务端的这个动态网页返回一段带有函数调用的javaScript全局函数调用的脚本,将原来需要返回给客户端的数据传递出去.(随机创建一个函数,把函数名传给服务端,避免客户端多次调用重名导致的问题).jsonp...
2019-03-04 18:37:20
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人