js高阶 -- 总结 03（小白）

严格模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 开启严格模式"use strict"// 不适用var关键字// num = 10;function fun () {console.log(this);}fun();// 普通函数this在非严格模式下指向window，严格模式下指向undefined</script>
</body>
</html>

高阶函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 满足其中之一// 函数作为参数（参数是函数）// 函数作为返回值function fun1(fun) {fun();}function fun2() {console.log("参数");}// 函数作为参数fun1(fun2);// 函数作为返回值function fun3(){return function(){console.log("函数作为返回值");}}fun3()();</script>
</body></html>

闭包

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 闭包：内部函数访问外部函数的参数或变量// 内部函数访问外部函数的作用域，所形成的词法环境叫做闭包// 闭包特点：// 1.函数嵌套函数// 2.内部函数访问外部函数的参数或变量// 3.函数中的变量会长期驻扎在内存中function fun1(a, b) {// 局部变量var num1 = 10;function fun2() {// 内部函数访问外部函数的变量console.log(num1);// 内部函数访问外部函数的参数console.log(a + b);}return fun2();}fun1(1, 2);</script>
</body></html>

闭包的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {margin: 0;padding: 0;list-style: none;width: 500px;margin: 50px auto 0;display: flex;}li {box-sizing: border-box;width: 100px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;}.active-li {background-color: red;}.content {box-sizing: border-box;width: 500px;height: 400px;margin: 0 auto;border: 1px solid #ccc;position: relative;}.content div {position: absolute;left: 0;top: 0;display: none;}.content .active-div {display: block;}</style>
</head><body><ul><li class="active-li">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="content"><div class="active-div">1</div><div>2</div><div>3</div><div>4</div><div>5</div></div><script>var list = document.querySelectorAll("li");var box = document.querySelectorAll(".content div");for (var i = 0; i < list.length; i++) {// 形成闭包环境(function(index) {list[index].onclick = function () {// 排他sibling(list);sibling(box);this.className = "active-li";box[index].classList = "active-div";}})(i);}function sibling(ele) {for (var i = 0; i < ele.length; i++) {ele[i].className = "";}}</script>
</body></html>

递归

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 递归：函数内部访问函数本身，这个函数就是递归函数（自己调用自己）// 求n的阶乘function fun(n) {if (n == 1) {return 1;} else {return n * fun(n - 1);}}console.log(fun(5));// 5 * fun(4)// 5 * 4 * fun(3)// 5 * 4 * 3 * fun(2)// 5*4*3*2*fun(1)// 斐波那契数列// 1 1 2 3 5 8 13 21 34 55 89 144 ...function fibonacci(n) {if (n == 1 || n == 2) {return 1;} else {return fibonacci(n - 1) + fibonacci(n - 2);}}console.log(fibonacci(8));// f(4) + f(3)// f(3） + f(2) + f(2) + f(1)// f(2) + f(1) + 1+1+1// 1+1+1+1+1</script>
</body></html>

赋值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 数据类型// 基本数据类型// string boolean undefined number null// 引用数据类型// object array function Date Math RegExp...// 数据类型的存储// 赋值（地址传递）var arr = [1, 2, 3, 4, 5];var arr2 = arr;arr[1] = 0;console.log(arr);console.log(arr2);// 当修改其中一个内容的时候，两个都会改变</script>
</body></html>

浅拷贝

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 浅拷贝 Object.asign()var obj = {name:"小明",age:20,hobby:["游泳", "打球", "睡觉"]}var copyObj = {usname:"小红",sex:"男"}var newobj = Object.assign(copyObj,obj);newobj.name = "zhangsan";console.log(newobj);console.log(copyObj);console.log(obj);// 改变新拷贝的对象newobj.name = "zhangsan";// 修改新对象的深层次的引用数据类型时newobj.hobby[2] = "写作业";console.log(newobj);    // 新拷贝的对象console.log(copyObj);   // 目标对象console.log(obj);       // 原对象也会跟着改变</script>
</body>
</html>

深拷贝

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var obj = {name:"小明",age:20,hobby:["游泳", "打球", "睡觉"],son: {sname: "lisi",age: 3}}// 实现深拷贝// JSON// 1.将对象转为 json 字符串 JSON.stringify()var str = JSON.stringify(obj);console.log(str);// 2.将json字符串再转回对象 JSON.parse()var newobj = JSON.parse(str);// 修改其中一个newobj.name = "小红";newobj.son.sname = "zhangsan";console.log(newobj);console.log(obj);</script>
</body></html>

手写递归实现深拷贝

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var obj = {name:"小明",age:20,// 引用数据类型hobby:["游泳", "打球", "睡觉"],son: {sname: "lisi",age: 3}}var arr = [1, 2, 3, 4, 5];console.log(arr);for (var k in arr) {console.log("k" + k);console.log("value" + arr[k]);}// 封装深拷贝function deepCopy(newObj, oldObj) {// 遍历旧对象for (var k in oldObj) {var item = oldObj[k];// 判断每个属性的数据类型 instanceofif (item instanceof Array) {// 数组处理方法newObj[k] = [];// 递归调用deepCopy(newObj[k], item);} else if (item instanceof Object) {// 对象处理方法newObj[k] = {};deepCopy(newObj[k], item);} else {// 基本数据类型处理方法 直接赋值newObj[k] = item;}}return newObj;}var newObj = deepCopy({}, obj);console.log(newObj);newObj.name = "小红";newObj.son.sname = "张三";console.log(newObj);console.log(obj);</script>
</body></html>

class类

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 创建类class Person {// 公共属性constructor(name, age) {this.name = name;this.age = age;}// 公共方法sayHi() {console.log(this.name + "说nihao");}}// 根据类实例化对象var person1 = new Person("小明", 20);console.log(person1);person1.sayHi();</script>
</body></html>

类的继承

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// extends 类的继承class Father {constructor(name, age) {this.name = name;this.age = age;}sayHi() {console.log("你好");}}class Son extends Father {constructor(name, age, height) {// 调用父类的构造函数super(name, age);// 再写自己独有的属性this.height = height;}}var son1 = new Son("zhangsan", 20, 180);console.log(son1);son1.sayHi();</script>
</body></html>

定时器传递参数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 定时器传递参数// 封装函数function fun(num) {console.log(num);}setInterval(function () {fun(1);}, 1000);</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/877540.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

微知-lspci如何查看pcie设备树状结构（-t）

微知-lspci如何查看pcie设备树状结构（-t）

对于查看pcie设备列表除了看是否存在 还需要看拓扑结构。如何看&#xff1f; lspci -t以减号为分割说明 第一列数字是域段 和 bus id。比如0000:00中0000是域 00是busid 第二列 01.2中01是device id。2是functionid 如果还有下游设备device还有一个指定busid的序号
阅读更多...
传统的进程间通信——管道通信

传统的进程间通信——管道通信

传统的进程间通信——管道通信 管道是UNIX系统中最古老的进程间通信方式&#xff0c;是一种特殊文件读写机制 当进程从管道文件中读取数据时&#xff0c;如果管道中没有数据则进程会进入阻塞状态&#xff0c;直到有数据读取出来才返回&#xff0c;因此不需要借助信号、文件锁来…
阅读更多...
Postman文件上传接口测试

Postman文件上传接口测试

接口介绍 返回示例 测试步骤 1.添加一个新请求&#xff0c;修改请求名&#xff0c;填写URL&#xff0c;选择请求方式 2.将剩下的media参数放在请求body里&#xff0c;选择form-data&#xff0c;选择key右边的类型为file类型&#xff0c;就会出现选择文件的按钮Select Files&a…
阅读更多...
QT翻金币小游戏（含音频图片文件资源）

QT翻金币小游戏（含音频图片文件资源）

目录 QT翻金币小游戏 音频图片资源文件获取 效果展示 图片 视频 实现代码 main.cpp mymainwindow.h mymainwindow.cpp startscene.h startscene.cpp selectscene.cpp playscene.h playscene.cpp mypushbutton.h mypushbutton.cpp dataconfig.h dataconfig.cpp QT…
阅读更多...
大模型时代，云南白药如何成为一家AI医药企业？｜产业AI案例

大模型时代，云南白药如何成为一家AI医药企业？｜产业AI案例

作者|斗斗 编辑|皮爷 出品|产业家 中医药大模型发布&#xff1b;英伟达成立AI制药部门&#xff0c;发力生物制药领域&#xff1b;赛诺菲与百图生科达成战略合作&#xff0c;共同开发用于生物治疗药物发现的领先模型&#xff1b;京东发布医疗大模型&#xff1b;百度“产业级”…
阅读更多...
读软件开发安全之道：概念、设计与实施04缓解

读软件开发安全之道：概念、设计与实施04缓解

1. 缓解 1.1. 安全思维转换为有效行动的方法就是首先预判威胁&#xff0c;然后针对可能的漏洞加以保护 1.2. 主动响应的做法就叫做“缓解” 1.2.1. mitigation 1.2.2. 喂宝宝的时候给孩子围上围嘴&#xff0c;避免掉下来的食物粘在宝宝的衣服上&#xff0c;还有安全带、限速…
阅读更多...
ansync/await 运行流程图

ansync/await 运行流程图

1、流程图&#xff1a; 2、await 之后的方法是何时执行&#xff0c;如何执行的&#xff1f; await 的方法在 Task 执行完成之后&#xff0c;通过调用 Finish 方法执行的。 具体的执行步骤是先将 MoveNext 方法注册到 Task 的回调里&#xff0c;然后在 Task 执行完后调用这个方法…
阅读更多...
ID3算法详解：构建决策树的利器

ID3算法详解：构建决策树的利器

目录 引言 ID3算法概述 算法基础 信息熵 ​编辑 信息增益 ID3算法步骤 决策树 概念: 核心&#xff1a; 节点 1. 根节点 2. 非叶子节点 3. 叶子节点 引言 在机器学习领域&#xff0c;决策树是一种非常流行的分类和回归方法。其中&#xff0c;ID3算法作为决策树算法…
阅读更多...
jenkins最佳实践（二）：Pipeline流水线部署springCloud微服务项目

jenkins最佳实践（二）：Pipeline流水线部署springCloud微服务项目

各位小伙伴们大家好呀&#xff0c;我是小金&#xff0c;本篇文章我们将介绍如何使用Pipeline流水线部署我们自己的微服务项目&#xff0c;之前没怎么搞过部署相关的&#xff0c;以至于构建流水线的过程中中也遇到了很多自己以前没有考虑过的问题&#xff0c;特写此篇&#xff0…
阅读更多...
使用 Python 进行 PDF 文件加密

使用 Python 进行 PDF 文件加密

使用 Python 解密加密的 PDF 文件-CSDN博客定义一个名为的函数&#xff0c;该函数接受三个参数&#xff1a;输入的加密 PDF 文件路径input_pdf、输出的解密 PDF 文件路径output_pdf和密码password。https://blog.csdn.net/qq_45519030/article/details/141256661 在数字化时代…
阅读更多...
Linux驱动开发基础(设备树)

Linux驱动开发基础(设备树)

所学来自百问网 目录 1. 引入设备树的原因 2. 设备树语法 2.1 Devicetree格式 2.1.1 DTS文件格式 2.1.2 node的格式 2.1.3 properties的格式 2.1.4 dts 文件包含dtsi文件 2.2 常用属性 2.2.1 #address-cells、#size-cells 2.2.2 compatible 2.2.3 model 2.2.4 st…
阅读更多...
Total Commander 右键卡死问题，百度云冲突

Total Commander 右键卡死问题，百度云冲突

一段时间TC总是右键卡死&#xff0c;后来发现是跟百度云冲突了&#xff0c;只要把右键菜单里的百度云删除即可 不仅仅是跟TC冲突&#xff0c;资源管理器也受累的 可以通过360安全卫士的右键菜单管理搞定&#xff0c;也可以注册表删除&#xff0c;可以先备份注册表 运行里 re…
阅读更多...
一步解决Ubuntu中/mnt/hgfs无共享文件夹的问题

一步解决Ubuntu中/mnt/hgfs无共享文件夹的问题

当我们启用了共享文件夹后&#xff0c;但是在终端/mnt/hgfs任然没有文件 在终端输入 sudo vmhgfs-fuse .host:/ /mnt/hgfs/ -o allow_other 之后&#xff0c;就可以查到共享文件了
阅读更多...
复现 LET-NET

复现 LET-NET

摘要 稀疏光流法是计算机视觉中的一项基本任务。然而&#xff0c;它依赖于恒定的假设限制了其在高动态范围&#xff08;HDR&#xff09;场景中的适用性。在本研究中&#xff0c;我们提出了一种新的方法&#xff0c;旨在通过学习一个对光照变化具有鲁棒性的特征映射来超越图像的…
阅读更多...
【TC3xx芯片】TC3xx芯片CAN模块详解

【TC3xx芯片】TC3xx芯片CAN模块详解

目录 前言 正文 1.CAN硬件资源】 1.1. CAN硬件单元 1.2. CAN时钟 1.2.1. CAN时钟设计 1.2.2. MCMCAN配置实例 1.3. CAN中断 1.3.1. TC3xx芯片CAN中断设计 1.3.2. 通过查看寄存器看中断配置和产生状态 1.3.3. 实际AUTOSAR工程CAN中断配置 2.功能描述 2.1. 操作模式…
阅读更多...
KubeSphere核心实战_kubesphere部署redis01_为redis指定配置文件_指定存储卷_配置服务---分布式云原生部署架构搭建047

KubeSphere核心实战_kubesphere部署redis01_为redis指定配置文件_指定存储卷_配置服务---分布式云原生部署架构搭建047

然后我们再来,部署一下redis,可以看到,首先去容器官网去找到对应的redis的镜像然后 可以看到镜像中都有说的,如何启动,以及 --appendonly yes 是指定持久化.然后 /data表示数据存储的位置. 可以看到数据存储位置 然后还有配置文件的位置. 可以看到,我们首先去创建配置文件,然后…
阅读更多...
LNMP 架构（Linux+NGINX+memcache+PHP）

LNMP 架构（Linux+NGINX+memcache+PHP）

目录 1 源码编译PHP与NGINX 1.1 NGINX 源码编译 1.2 PHP 源码编译安装 2 实现PHP与NGINX的连接 2.1 php-fpm的详细介绍 2.2 LNMP与LAMP的区别 2.3 PHP配置文件的介绍 2.4 实例实现php-fpm 与 NGINX的连接 2.4.1 指定pid的存放位置 2.4.2 php-fpm设置监听自己端口与IP 2.4.3 主配…
阅读更多...
配置 昇腾 Ascend C/C++ 开发环境

配置 昇腾 Ascend C/C++ 开发环境

配置 昇腾 Ascend C/C 开发环境 flyfish 这里以Orange Pi Ai Pro 为例 先说如何配置MindStudio&#xff0c;然后再说如何查看Orange Pi Ai Pro的一些信息 Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能AI 开发板&#xff0c;其搭载了昇腾 AI 处理器。Linux 桌面…
阅读更多...
VSCode系列 - 如何用VSCode搭建C++高效开发环境(2)

VSCode系列 - 如何用VSCode搭建C++高效开发环境(2)

1. 插件的用法 1.1. C/C 1.1.1. 插件介绍1.1.2. 插件配置 1.2. Clang-Format1.3. cpp-check-lint 1.3.1. cpplint1.3.2. cppcheck1.3.3. 插件的使用 1.4. C/C Advanced Lint 1.4.1. 插件介绍1.4.2. 插件配置 1.5. Bracket Pair Colorizer 1.5.1. 插件介绍1.5.2. 功能配置 1.6. …
阅读更多...
海外独立站站外推广：拓展全球市场的策略与实践

海外独立站站外推广：拓展全球市场的策略与实践

海外独立站的站外推广是一个系统工程&#xff0c;涉及市场研究、品牌本土化、多渠道推广、广告投放、网站体验优化、客户服务和数据分析等多个方面。通过本文的探讨&#xff0c;企业可以更好地理解海外推广的策略和实践&#xff0c;把握全球化电商的发展趋势&#xff0c;实现企…
阅读更多...
最新文章

Copyright @ 2022~2023