前端路线--JS高阶（day03）
2024-05-16 15:48:21
案例–发送验证码5s
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><button>点击发送验证码1</button><button>点击发送验证码2</button></body><script type="text/javascript">var btns = document.querySelectorAll('button');for (var i = 0; i < btns.length; i++) {btns[i].index = i;btns[i].onclick = function() {var c = 5; //5sthis.timer = setInterval(function() {//定时器中的this默认指向的是window 需要用bind改变this指向为当前的事件源c--;this.disabled = true;this.innerText = '还剩' + c + '秒';if (c == 0) {//禁用按钮 disabled='' true:开启禁用 false：关闭禁用this.disabled = false; this.innerText = '点击发送验证码1';clearInterval(this.timer);}}.bind(this), 1000) //用bind方法去改变this的指向，不去执行bind的方法}}</script>
</html>案例–apply求数组最大值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">var arr=[2,3,6,8,10];//apply借助math的方法传入arr数组参数实现求最大值var maxNum=Math.max.apply(Math,arr);console.log(maxNum);</script>
</html>判断数据类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">//typeOf 判断console.log(typeof 1);//Object.prototype.toString.call(123) 用apply()或者callconsole.log(Object.prototype.toString.call(123));//用constructor来判断var n=2;console.log(n.constructor);</script>
</html>构造函数的继承
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">function Father (name,age) {this.name=name;this.age=age;this.say=function () {console.log('我在说话');}}function Son (name,age,sex) {//利用Call方法给Father的this指向改变 让父亲的属性孩子可以继承//缺点:会抵消原型链，不常用Father.call(this,name,age);this.sex=sex;this.sleep=function () {console.log('我在睡觉');}}var son=new Son('小谷',10,'女');son.say();son.sleep();</script>
</html>
新的继承方法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">function Father (name,age) {this.name=name;this.age=age;this.say=function () {console.log('我在说话');}}function Son (name,age,sex) {//让构造器产生联系Father.call(this,name,age);this.sex=sex;this.sleep=function () {console.log('我在睡觉');}}//让原型链产生联系//1.子构造器的原型对象指向父构造器的实例//2.再将子构造器的原型对象指向子构造器Son.prototype=new Father();Son.prototype.constructor=Son;//所有的新增方法的操作放在链条底下Son.prototype.study=function () {console.log('我会学习');}var son=new Son('小谷',10,'女');son.say();son.sleep();son.study();console.log(son);/* 深度理解:将字构造器的原型对象 指向-->父实例 在访问方法时子构造原型里面没有，回去父亲的本身找，再去父亲的原型对象去找子构造器的原型对象的原型对象 指向-->子构造器*/</script>
</html>第三种继承方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">function Father (name,age) {this.name=name;this.age=age;this.say=function () {console.log('我在说话');}}function Son (name,age,sex) {Father.call(this,name,age);this.sex=sex;this.sleep=function () {console.log('我在睡觉');}}//使用类式继承创建新对象实现继承Son.prototype=Object.create(Father.prototype,{constructor:{value:Son},fly:{value:function () {console.log('我会飞');}}})var son=new Son('小谷',10,'女');// son.say();console.log(son);// son.sleep();</script>
</html>实现类式继承
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">var P={name:'小谷',sex:'男'}// Object.create(老对象,{属性:{描述}})//返回新对象，且新对象继承了父对象(通过__proto__)var xiaoxiao=Object.create(P,{age:{configurable:true,writable:true,Enumerable:true,value:function(){console.log('睡觉');}}});console.log(xiaoxiao);</script>
</html>数组的遍历
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">var arr=[1,2,3,4,5,6,8];//forEach()遍历数组//数组.forEach(function(v,i,arr){}) v:value i:index arr:数组对象arr.forEach(function (v,i,arr) {console.log(v,i,arr);})//对数组进行遍历和处理 map() 返回值:返回一个新数组var arr1=arr.map(function (v,i) {return v+'0';})console.log(arr1);//过滤符合条件的元素 filter() 返回值:返回一个新数组var arr2=arr.filter(function (v,i) {return v>2;})console.log(arr2);//查询是否有符合条件的数组元素 返回值:true/falsevar arr3=arr.some(function (v,i) {return v>2;})console.log(arr3);//查询是否全部元素符合条件 返回值:true/falsevar arr4=arr.every(function (v,i) {return v>8;})console.log(arr4);//查找第一个满足条件的元素 返回值:返回符合条件的第一个元素/undefinedvar arr5=arr.find(function (v,i) {return v>2;})console.log(arr5);//reduce(total,v,i,arr) 返回值:返回一个值var arr6=arr.reduce(function (total,v,i) { return total+v;})console.log(arr6);</script>
</html>前端路线--JS高阶（day03）相关推荐
- 原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数
框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程 框架这个广泛的定义使用的十分流行,尤其在软件概念 ...
- create React-app脚手架中封装withRouter.js高阶组件
由于 useNavigate.useLocation.useSearchParams等方法,只能写在函数内,也就是说我们可以在React Hooks 函数组件内可以直接 import 导入,创建实例化 ...
- export function函数传参_04 js高阶函数（惰性函数、柯里化函数、compose函数）和单例设计模式...
高阶函数的定义 在<javascript设计模式和开发实践>中是这样定义的. 函数可以作为参数被传递: 函数可以作为返回值输出. 结合这两个特点,首先想到的肯定是回调函数,回调函数也是高阶 ...
- js 高阶函数之柯里化
博客地址:https://ainyi.com/74 定义 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且 ...
- js高阶函数的使用-filter/map/reduct
通过案例来讲述这几个函数的使用 // filter函数的使用,过滤数组中小于50的元素const nums = [11, 22, 33, 44, 55, 111, 333];let num1 = nu ...
- JS高阶编程之柯理化函数
柯理化函数编程: 一个大函数执行,返回一个小函数. <!DOCTYPE html> <html lang="en"><head><meta ...
- 猿人学·爬虫逆向高阶课
我跟 virjar 出了一套爬虫课(猿人学·爬虫进阶培训课),包含:安卓逆向抓取.JS 高阶逆向抓取.安卓群控抓取.容器定制化等. 实际上我去年就在做这个爬虫课了,一直没有放到网课平台上公开宣传,但是 ...
- 高阶前端开发人员必备工具-Node.JS知识讲解
想要成为一个"值钱"的高阶Web前端开发人才,Node.JS是必须要掌握的技术之一.今天小千就为大家详细讲解Node.JS的知识,让你完全了解Node.JS的前世今生. 1.说起N ...
- js最简单的几个特效_高阶函数不会用?教你JS中最实用的几个高阶函数用法
不废话,先来看下什么是高阶函数 高阶函数 函数可以作为参数传递 函数可以作为返回值输出 函数作为参数传递 回调函数 在ajax异步请求的过程中,回调函数使用的非常频繁 在不确定请求返回的时间时,将ca ...
最新文章
- 【Qt】QImage使用总结
- Windows7操作系统任务栏的相关技巧
- mysql+phpmyadmin配置流程
- 07 总结ProgressDialog 异步任务
- 芯片内部长啥样？牛人用1500张照片，一层层放给你
- MySQL查看和修改数据库存储目录
- git使用教程（初次配置+错误提示）
- Jquery—Jquery中$与$.fn的区别
- Django model 设置数据库 字段 编码
- WEBPACK+ES6+REACT入门(5/7)-在React中为按钮绑定点击事件
- python3 matplotlib多个子图分别对应不同colorbar
- Centos升级GLIBC
- camera link心得
- 无法同步谷歌日历_这场科技发布会上，谷歌究竟更新了啥？
- 【Meta Learning学习笔记】Meta Learning详解
- 比较好用的自定义软键盘
- 第4章数据库的查询、视图和游标
- 自旋锁与适应性自旋锁
- android 热更新 方案,热更新-热更新app开发的两种系统方案！
- B863AV3.2-M、B863AV3.1-M2、E900V22C通刷固件（可救砖）