![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
Mrs彬
带你上路,直到入坑
展开
-
7.6、数组的常用方法reduce高级用法,find findIndex
1、简介:数组的迭代方法有很对,为什么要说reduce呢?人生哲理:通往成功的道路有很多,总有最好的捷径2、语法:arr.reduce(callback,[initValue])数组中的每一项都执行给定回调函数,回调函数接受四个参数previousValue(初始值),currentValue(当前的值),index(索引),array(数组本身)initValue作为第一次调用回调函数的初始值,如果没有initValue,会默认从数组索引为1的项开始执行回调函数最直接的用法:计算数组中所有sto原创 2021-05-20 20:05:59 · 181 阅读 · 0 评论 -
7.5 对象的扩展
一、对象的简洁表示法 var a = 10; var obj = { a: a } //简介表示法 // 当变量一样时可以简写成一个 var a = 10; var obj = { a } console....原创 2021-04-09 18:54:21 · 53 阅读 · 0 评论 -
javascript防抖和节流
函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。 btn.onclick = baounce(fn,500) //防抖代码 function debounce(fn,delay) { console.log(this); var timer = null//存储定时器 return function () {原创 2021-01-29 21:20:26 · 114 阅读 · 0 评论 -
移动端轮播图
Document <script> window.onload = function () { var wrap = document.querySelector('.wr...原创 2020-10-22 11:50:48 · 189 阅读 · 0 评论 -
数组合并并排序
一、applyvar a=[5,2,4,1]var b=[8,2,4,1]function fun(a,b){a.push.apply(a,b)// console.log(a)// 外循环控制轮数for(var i=0;i<a.length-1;i++){// 内循环控制交换的次数for(var j=0;j<a.length-i-1;j++){// 如果后一项 比 前一项 小 就换位置if(a[j]>a[j+1]){var temp=a[j+1]a[j+1]=a原创 2020-08-17 20:24:12 · 665 阅读 · 0 评论 -
js深拷贝
//判断类型 是数组还是对象 function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } function deepCopy(data) { //1.根据数据类型,创建对应空数...原创 2020-01-17 17:38:21 · 127 阅读 · 0 评论 -
Ajax GET and POST封装
function Ajax(obj) { //1.创建对象 var xhr = new XMLHttpRequest(); //判断get or post if (obj.method.toUpperCase() == "GET") { //2.连接 url = obj.data ? obj.url + "?" + ob...原创 2020-01-10 17:10:07 · 104 阅读 · 0 评论 -
7.6正则匹配 手动输关键字过滤
正则过滤 替换 <textarea class="replace" cols="30" rows="10" placeholder="替换后的文本"></textarea><script> var noReplace = document.getElementsByClassName...原创 2020-01-08 19:42:22 · 141 阅读 · 0 评论 -
7.5、promise异步回调
一、// promise 是es6中新增的异步解决方案,体现在代码中 他是一个对象,可以通过promise 构造函数来实例化// 实例化promise,它接收一个函数作为参数,这个函数再接收两个参数,分别是resolve和reject,// resolve: 异步成功要执行的回调// reject: 异步失败要执行的回调// let p = new Promise(function(r...原创 2019-11-10 23:06:54 · 97 阅读 · 0 评论 -
7.4、class 类 和类的继承
class 构造函数名 { // 实例化的时候会自动走这个constructor 这个方法 constructor(name, age) { this.name = name; this.age = age; // this指向实例化的对象 } 方法名1() { console.log('方法1') ...原创 2019-11-10 21:48:20 · 146 阅读 · 0 评论 -
7.3、封装添加class的方法和删除class的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-10 21:10:20 · 227 阅读 · 0 评论 -
7.2、几个小题走一走
一、练习字符串方法// 封装一个方法 传入name 输出chenbin// 方法一 字符串方法var str = 'login?name=chenbin&age=24&sex=men'console.log(indexofattr(str, 'name')) //chenbinconsole.log(indexofattr(str, 'age')) //24consol...原创 2019-11-10 00:33:17 · 116 阅读 · 0 评论 -
7.1、es6中 for-of
for-of 循环原创 2019-11-09 23:09:59 · 107 阅读 · 0 评论 -
7.0 es6 数据结构map
一 、先看这样一个案例<script> let obj1 = { a: 1 } let obj2 = { b: 2 } let obj = {} obj[obj1] = 1 obj[obj2] = 2 console.log(obj) //{[object Object]: 2} ...原创 2019-11-04 09:55:33 · 156 阅读 · 0 评论 -
6.9 es6中数据结构set
一、数据结构set() 接收数组作为参数是一集合是由一组无须且唯一的(不重复的)项组成的 // 创建数据结构 不传参数 var set = new Set() console.log(set) //Set {} // 创建数据结构 传数组 // var set = new Set([2, 3, 5, 2, 3, 8, 4, 95, 5, 4, 4])...原创 2019-11-04 00:12:43 · 73 阅读 · 0 评论 -
6.8、es6中数组的扩展
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-03 19:24:41 · 108 阅读 · 0 评论 -
6.7、es6数组的扩展
一将类数组转成真正的数组 // 法一 function toArray(obj) { Array.prototype.slice.call(obj) } // 法二es6 Array.from function fn() { console.log(arguments) //[1, 25, 56, 3] 类数组前面带》 ...原创 2019-11-03 00:15:02 · 124 阅读 · 0 评论 -
6.6、es6中的对象的结构赋值
一、对象的解构赋值:本质上就是一种匹配模式,只要等号两边的模式相同,等号左边的变量就可以被赋予对应的值对象的结构赋值分为两种数组的结构赋值对象的结构赋值// 数组的解构赋值 (有位置来决定)// 数组的结构赋值有顺序// 1、按顺序解构// let [a, b, c] = [1, 2, 3]// console.log(a, b, c) //1,2,3//2、不完全解构// ...原创 2019-11-02 23:41:01 · 1111 阅读 · 0 评论 -
6.5、es6中的箭头函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-02 20:04:37 · 110 阅读 · 0 评论 -
6.4、es6中函数的默认值
一、js的原生的函数默认值的处理 function add(a, b) { console.log(a + b) //3+undefined } add(3, 2) //5 add(3) //NaN function add(a, b) { var b = typeof b == 'und...原创 2019-11-02 14:17:30 · 137 阅读 · 0 评论 -
6.3、ES6变量声明 let 和常量const
一、var声明的问题// var声明的问题// 1.存在变量声明// 2.挂载到window上// 3.可以声明多次// 4.只有全局作用域和函数作用于console.log(a) //undefined 变量提升问题var a = 10二、let声明的问题 // let声明的问题 // 1. 不存在变量声明 而存在暂时性死区 // ...原创 2019-11-02 13:20:34 · 115 阅读 · 0 评论 -
6.2、通过正则封装兼容的通过class获取元素的方法
一、正则独立的部分// 了解一下正则独立的部分// var str = ' btn1 btn2 '// var re = /\bbtn1\b/// console.log(re.test(str)) //true<ul id="nn"> <li class="btn1 btn2">1111111111111111</li> <l...原创 2019-11-01 23:05:51 · 136 阅读 · 0 评论 -
6.1正则的小括号和[ ]
一、()分组 // 手机号中奖隐藏演示 // () 分组 var str = '18300668827' var re = /(\d{3})(\d{4})(\d{3})/ var newstr = str.replace(re, function($0, $1, $2, $3, $4) { co...原创 2019-11-01 22:29:12 · 139 阅读 · 0 评论 -
6.0字符串方法的正则
一、上一节说了字符串的serch()方法这里说一下字符串正则的其他方法二、replace() 方法用法1:str.replace(正则,新字符串)用法1 字符串.replace(正则, function(‘匹配成功的字符’){})规则:正则去匹配字符串,如果匹配成功,替换成新字符串,并且返回替换后的字符串,匹配失败 则原样返回例如: var str = '2345678dfghjfg...原创 2019-11-01 21:36:28 · 101 阅读 · 0 评论 -
5.9、正则和一些常用的标识符
一、 // 正则 主要是用来操作字符串的,是一种字符串匹配规则应用场景手机号,证件号,邮箱的验证等等// 全称 可以放变量var re = new RegExp()//简写 不能放变量var re = /a/二、 方法// 正则本身两个方法// test() exec()// 字符串方法四个// match() search() replace() split()三、正则...原创 2019-10-29 21:07:21 · 356 阅读 · 0 评论 -
5.8、循序渐进正则表达式(下一节:正则表达式)
一、需求找出所有数字组成一个数组str=‘123asd12sad122as1’结果是arr=[123,12,122,1] var str = '212asdas234dfgh67a3' function getNumberArr(str) { var arr = [] var s = '' for...原创 2019-10-29 15:39:55 · 163 阅读 · 0 评论 -
5.7、自执行函数和闭包
一、自执行函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-10-29 00:19:15 · 170 阅读 · 0 评论 -
5.6 全方位的数据类型的判断和封装
// 1、typeof 判断基本数据类型, Undefined,String,Number,Booolean,Function // 2、instanceof 有局限性// 3、constructor 有局限性// 4、Object.prototype.toString.call() 全方位的 可以封装成方法function fn() {}console.log(typeof fn) ...原创 2019-10-26 10:34:33 · 132 阅读 · 0 评论 -
最详细的原生js的继承 三分钟看会 高频面试考题
一、原型加构造函数继承1)属性和方法 分开来继承在这里需要说明一下,看不太懂的,请先看我的上一节的讲解,有不懂的可以留言,评论2)先看一下引导 // //创建构造函数// function ParentPerson(name, age) {// this.name = name// this.age = age// console.log(this) //1...原创 2019-10-25 14:14:01 · 134 阅读 · 1 评论 -
5.5、混合模式(构造函数加原型模式)创建对象
一、属性放在构造函数里方法放在原型上 //构造函数 function Person(name, age) { this.name = name this.age = age } // 原型模式 Person.prototype.fn = function(name) { console.log(name) ...原创 2019-10-24 09:38:08 · 228 阅读 · 0 评论 -
5.4、原型模式及原型链详细讲解
我们每写一个函数,这个函数都有一个原型原型默认有一个属性叫constructor,constructor属性默认指向这个函数例如: 写一个构造函数 function Person() {} console.log(Person.prototype) // 打印出来是 一个对象 // Object{ // constructor:func...原创 2019-10-23 10:52:44 · 132 阅读 · 0 评论 -
5.3、字面量、工厂模式、和构造函数创建对象
一、对象字面量创建// 对象字面量创建var obj = { name: 'mrs陈', arr: ['1', '2', {}], age: 3, fn: function() { console.log(this.name + '今年' + this.age + '岁了') }}obj.fn() //mrs陈今年3岁了consol...原创 2019-10-23 10:01:07 · 396 阅读 · 0 评论 -
82、get-post和自执行函数
// get 方式吧数据名称和数据值用=链接起来,// 如果有多个的话,可以用&进行连接,然后把数据放在url?问好的后面例如:open(“GET”, “http://127.0.0.1:8080/php/test.php?name=‘zhansgang’&age=12”, true);// 注意:// 1、因为url长度限制的原因,所以我们不要通过get方式传递过多的数...原创 2019-10-21 17:32:32 · 155 阅读 · 0 评论 -
js的运行机制
一、javascript运行机制是很多面试常考的一个问题接下来我们就来一起了解一下js的运行机制吧js的特点就是单线程,单线程就是在同一时间只能做同一件事,而且必须一件事情做完之后才能做另一件事情二、js的消息队列单线程就意味着所有的事情要排队一个一个进行所以js设计就分成了两任务,一种是同步任务,另一种是异步任务同步任务:在主线程上依次排队执行异步任务:不进入主线程,而进入 任务队...原创 2019-10-21 13:06:31 · 356 阅读 · 0 评论 -
5.2、ajax封装版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-20 21:43:36 · 191 阅读 · 0 评论 -
5.1、详细版ajax
简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。优点:是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。<!DOCTYPE html>...原创 2019-10-20 21:29:36 · 105 阅读 · 0 评论 -
5.0 cookie的封装
```go<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2019-10-19 18:33:32 · 122 阅读 · 0 评论 -
4.9、cookie和WebStorage的区别和使用
一、WebStorage包括sessionStorage和localStoragecookie、sessionStorage和localStorage的区别1)、数据的生命周期来看(1)Cookie一般由服务器生成,可设置失效时间如果在浏览器端生成cookie 则默认是浏览器关闭后失效(2)localStorage 是浏览器存储,除非手动清除,否则永久保存在本地(3)sessionSto...原创 2019-10-19 17:12:57 · 174 阅读 · 0 评论 -
4.8、改变this指向的方法
一、 改变函数中的this指向的方法 call() apply() bind()形式一function fn() { console.log(this) } // fn() //window形式二var odiv = document.getElementsByTagName('div')[0] odiv.oncli...原创 2019-10-18 17:29:20 · 96 阅读 · 0 评论 -
4.7、滚轮事件和方向 及滚轮的高度
一滚轮事件IE和谷歌一致 ,火狐 单独事件:IE和谷歌: onmousewheel (滚轮事件)方向步数:ev.wheelDelta 向上120 向下 -120火狐: DOMMouseScroll 必须用addEventListener进行绑定例如: addEventListener('DOMMouseScroll',function(ev){ var ev = ev ||...原创 2019-10-17 17:30:18 · 180 阅读 · 0 评论