Web 前端 Javascript笔记2

1、数组

为什么需要数组:因为变量只能存储一条数据,但是储存多条数据

 数组的声明方式

1、new

let a1=new Array()
console.log(a1)

2、字面量

 let a2=[1,2,4,"k",true,"zhangsan",11]
console.log(a2)

 数组里面可以存放不同的数据类型

数组长度 

console.log(a2.length)

查看数组元素:数组下标 

数组下标从0开始,没有-1下标,-1 下标只有python有

console.log(a2[2])

遍历数组 

for(let i=0;i<=a2.length;i++){console.log(a2[i])}

练习 

let a3=[2,3,4,5,6,1,22]求所有元素的和,求平均值

s=0 
av=0
let a3=[2,3,4,5,6,1,22]
for(let j=0;j<a3.length;j++){s=s+a3[j]
}
av=s/a3.length
console.log(av)
console.log(s)

2、循环加强:迭代数组对象

 for in:i是下标

 let a3=[11,3,4,27]for(let i in a3){console.log(a3[i])}

for of:i是数组里的值

let a3=[11,3,4,27]
for(let i of a3){console.log(i)
}

3、数组操作

查:数组名[下标]

改: 数组名[下标]=值

增:数组名.push()        //能够一次把一个或多个元素在添加至末尾

       数组名.unshift()        //能够一次把一个或多个元素在添加至开头

       数组名.splice(下标,删除元素的个数,增加的值)    //在指定的下标中增加值

    

删:数组名.pop()        //括号里面没有参数,删除最后一个元素

       数组名.shift()       //括号里面没有参数,删除第一个元素

       数组名.splice(start,删除多少个元素)

其他方法

数组名.includes() :用于确定数组中是否存在某个元素,含有则返回true,否则返回false

数组名.indexOf() :返回数组中可以找到给定值的第一个索引,如果不存在返回-1

数组名.lastindexOf() :返回数组中可以找到给定值的最后一个索引,如果不存在返回-1

数组名.sort():对数组的元素进行排序,并返回数组

数组名.reverse():颠倒数组中元素的位置

数组名.fill():用一个固定值填充数组中指定下标范围内的全部元素

数组名.concat(数组名2):返回一个合并两个或多个数组后的新数组


4、函数、

函数:一段实现某个功能的代码集合

本质:实现代码的高度复用

函数在js中的定义方式

function 函数名([参数]){函数体}

函数调用

函数名()

无参函数 

<script>//function 函数名([参数]){函数体}function just(){console.log("helllllo!")}just()</script>

 有参函数:

默认情况下你的形参有几个,传回去的实参就有几个,一对一的有顺序关系

  function get(n1,n2){console.log(n1+n2)return n1+n2,n2-n1,n1*n2//只能返回一个数据}let a=get(2,3)console.log(a)

函数的返回值:

 在函数体中通过 return 实现返回值

返回多个数据的时候,只能返回return的最后一个数据

想要返回多个数据就返回一个数组

函数表达式:

将声明的函数赋值给一个变量,通过变量完成函数的调用与参数的传递

  <script>let fn=function sum(a,b){return a+b;}console.log(fn(2,4))</script>

 运行结果为:6

匿名函数:

匿名函数指的是没有名称的函数,可以有效避免全局变量的污染及函数名的冲突,是函数表达式的另一种表现形式,可以通过函数声明的方式实现调用。

①、函数表达式中省略函数名

<script>let fn=function (a,b){return a+b;}console.log(fn(2,4))
</script>

②、自调方式

<script>( function (a,b){console.log(a+b);})(2,4)
</script>

③、处理事件

<body> <input type="button" value="btn" id="sub"><script>//获得按钮元素let sub = document.querySelector("#sub")//给按钮增加点击事件。sub.onclick=function(){alert("当点击按钮时会执行")}</script>
</body>

④对象 

let a = {name:"kkk",age:18,fn:function(){return "我叫"+this.name+"今年"+this.age+"岁了!";}
};console.log(a.fn());//我叫kkk今年18岁了!

回调函数: 

   <script>function t1(){console.log("test1------")}function t2(fn){fn()console.log("test2~~~~")}
t2(t1())
</script>

箭头函数 :

①、标准语法

(参数1,参数2.......)=>{

        函数体

}

②、返回值

(参数1,参数2.......)=>{

        return 返回值

}

或者

(参数1,参数2.......)=>返回值

③、含有一个参数

(参数)=>{

        函数体

}

或者

参数=>{函数体}

④、无参箭头函数

()=>{函数体}

或者,将空括号改成_

   _=>{函数体}


5、值传递与引用传递

①|值传递

k接到了a的数据

   <script>function c(a,b){console.log(a)console.log(b)a+=1b+=1return a,b}let k=c(1,2)console.log(k)</script> 

再来:

声明两个变量,传到函数里面修改,出函数之外再打印这两个变量,发现变量大小没有发生改变

 <script>function c(a,b){a+=1b+=1}let x=1let y=3c(x,y)console.log(x)console.log(y)</script> 

 ②、引用传递

将数组传到函数中修改,数组却真的被修改了

<script>function c(a){a.push([1,4,10,25])}let a=[17]c(a)console.log(a)</script> 

这些代码会被加载到内存当中,代码执行的时候会立刻有个执行栈,变量的声明会放在常量池里,数组存的东西比较多,无法放在栈中,于是放在堆里,堆里的数据都有对应的16进制地址,当调用数组的时候,其实我们拿到的是数组的地址,将数组去赋值给一个变量,这个变量就可以访问数组地址,这个变量修改时,会带着地址修改数组的值。


6、函数作为参数传递

函数调用函数是正常的现象:回调函数

<script>   function t1(){console.log("test1------")}function t2(fn){fn()console.log("test2~~~~")}t2(t1())
</script>

 若是让 被调用的t1()函数作为参数,可以用匿名函数

</script>function test2(fn){fn()print("test2~~")}t2(function(){console.log("test1~~")})
</script>

觉得麻烦用箭头函数

   <script>function test2(fn){fn()print("test2~~")}//箭头函数 主要是作于作为其他函数的参数进行test2(()=>{console.log("test1~~")})</script>
 <script>function test2(fn){fn()print("test2~~")}//箭头函数 主要是作于作为其他函数的参数进行test2(x=>2)</script>

7、默认参数

<script>function Area(r,PI=3.14){return r*r*PI}let a=Area(3)console.log(a)//得出结果=28.26
</script>

8、可变参数(arguments)

 <script>function getsum(){//只放前两个console.log(arguments)}getsum(11,3,7,19,2)</script>

打印出来返回一个数组 


9、​​​​​​​ 剩余参数

如果函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

function(a, b, ...theArgs) {// ...
}

 剩余参数和 arguments对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法。

10、作用域

  •  变量名(名称)在某一个范围内生效,那么这个范围就是他的作用域

        我的学号出了校门就没用了

  •         全局作用域 局部作用域 块级作用域:对应全局变量 局部作变量 块级变量

        1、全局作用域:在script标签下第一层

        2、局部作用域 :函数内

        3、块级作用域:一对花括号内:{}        var没有块级作用域这个概念


11、对象

JavaScript 对象是拥有属性和方法的数据

函数放在对象里叫做方法

变量放在对象里叫做属性

   <script>let name=[122,111,160]//对象:存储数据let zhangsan={uname:"zhanshan",age:21,sing: ()=>{console.log("hahahahahah")}}//对象属性与方法</script>

//查看 :

对象名.属性 

对象名["属性或方法"]------->中括号里必须是字符串

 console.log(zhangsan["age"])
console.log(zhangsan.uname)

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

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

相关文章

深入理解go语言中的切片

写在文章开头 从一个Java的开发角度来看&#xff0c;切片我们可以理解为Java中的ArrayList即一种动态数组的实现&#xff0c;本文会从源码的角度对切片进行深入剖析&#xff0c;希望对你有帮助。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的 java …

Transformer架构实现一

从0-1搭建Transformer架构 架构图 本文主要讲解 1&#xff09;输入层的词嵌入 2&#xff09;输入层的位置编码 3&#xff09;编码层的多头注意力机制 4&#xff09;编码层的前馈全连接 1&#xff09;输入层的词嵌入 class Embeddings(nn.Module):"""构建emb…

a == 1 a== 2 a== 3 返回 true ?

1. 前言 下面这道题是 阿里、百度、腾讯 三个大厂都出过的面试题&#xff0c;一个前端同事跳槽面试也被问了这道题 // &#xff1f; 位置应该怎么写&#xff0c;才能输出 trueconst a ?console.log(a 1 && a 2 && a 3) 看了大厂的面试题会对面试官的精神…

git操作基本命令

Git命令操作&#xff1a; 1、服务器上面有新的修改&#xff0c;pull出现错误操作如下 git stash git pull origin master git stash pop 2、删除本地一个文件test.py,想重新download远程服务器最新的文件 #git checkout test.py 3、查看当前处于哪一个分支 #git …

数码相框-显示JPG图片

LCD控制器会将LCD上的屏幕数据映射在相应的显存位置上。 通过libjpeg把jpg图片解压出来RGB原始数据。 libjpeg是使用c语言实现的读写jpeg文件的库。 使用libjpeg的应用程序是以"scanline"为单位进行图像处理的。 libjpeg解压图片的步骤&#xff1a; libjpeg的使…

【御控物联】物联网平台设备接入-JSON数据格式转化(场景案例四)

文章目录 一、背景二、解决方案三、在线转换工具四、技术资料 一、背景 物联网平台是一种实现设备接入、设备监控、设备管理、数据存储、消息多源转发和数据分析等能力的一体化平台。南向支持连接海量异构&#xff08;协议多样&#xff09;设备&#xff0c;实现设备数据云端存…

前端开发攻略---在输入框中输入中文但是还没选中的时候,搜索事件依然存在;中文输入法导致的高频事件。

1、演示 解决前 解决后 2、输入框事件介绍 compositionstart事件在用户开始使用输入法输入时触发。这意味着用户正在进行组合输入&#xff0c;比如在中文输入法中&#xff0c;用户可能正在输入一个多个字符的词语。在这个阶段&#xff0c;输入框的内容可能还没有完全确定&#…

RocketMQ 10 面试题FAQ

RocketMQ 面试FAQ 说说你们公司线上生产环境用的是什么消息中间件? 为什么要使用MQ&#xff1f; 因为项目比较大&#xff0c;做了分布式系统&#xff0c;所有远程服务调用请求都是同步执行经常出问题&#xff0c;所以引入了mq 解耦 系统耦合度降低&#xff0c;没有强依赖…

Testng测试框架(2)-测试用例@Test

测试方法用 Test 进行注释&#xff0c;将类或方法标记为测试的一部分。 Test() public void aFastTest() {System.out.println("Fast test"); }import org.testng.annotations.Test;public class TestExample {Test(description "测试用例1")public void…

如何通过Python向PDF添加文本水印_python给pdf文件加文字水印

先自我介绍一下&#xff0c;小编浙江大学毕业&#xff0c;去过华为、字节跳动等大厂&#xff0c;目前阿里P7 深知大多数程序员&#xff0c;想要提升技能&#xff0c;往往是自己摸索成长&#xff0c;但自己不成体系的自学效果低效又漫长&#xff0c;而且极易碰到天花板技术停滞…

频率传感器信号采集隔离转换模拟信号0-1KHz/0-5KHz/0-10KH转0-2.5V/0-5V/0-10V/0-10mA/0-20mA/4-20mA

主要特性: >> 精度等级&#xff1a;0.2 级 >> 全量程内极高的线性度&#xff08;非线性度<0.1%&#xff09; >> 辅助电源/信号输入/信号输出&#xff1a; 2500VDC 三隔离 >> 辅助电源&#xff1a;5VDC&#xff0c;12VDC&#xff0c;24VDC 等单…

Redis Desktop Manager 中文--强大的Redis数据库管理工具

Redis Desktop Manager&#xff08;简称RDM&#xff09;是一款开源且功能强大的图形化Redis管理工具。它支持Windows、macOS和Linux等多平台&#xff0c;为Redis数据库提供了直观友好的管理界面。通过RDM&#xff0c;用户可以轻松连接多个Redis服务器&#xff0c;管理连接信息&…

【自媒体创作利器】AI白日梦+ChatGPT 三分钟生成爆款短视频

AI白日梦https://brmgo.com/signup?codey5no6idev 引言 随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;AI在各个领域都展现出了强大的应用潜力。其中&#xff0c;自然语言处理技术的进步使得智能对话系统得以实现&#xff0c;而ChatGPT作为其中的代表之一…

MyBatis操作数据库(3)

其它查询操作 #{}和${} MyBatis参数赋值有两种方式, 咱们前面使用了#{}进行赋值, 接下来来看两者的区别: #{}和${}的使用 1.先看Integer类型的参数: Select("select username, password, age, gender, phone from userinfo where id #{id}") UserInfo queryByI…

攻防世界---easyRE1

1.下载附件&#xff0c;打开后有两个文件 2.对32查壳 3.对64查壳 4.IDA分析&#xff0c;这里打开之后找到main函数点击main函数后按f5 5.看到了flag----拿去提交发现是对的&#xff0c;这道题是逆向中最简单的一道了 flag{db2f62a36a018bce28e46d976e3f9864}

LeetCode501:二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xf…

STL —— priority_queue

博主首页&#xff1a; 有趣的中国人 专栏首页&#xff1a; C专栏 本篇文章主要讲解 priority_queue 的相关内容 目录 1. 优先级队列简介 基本操作 2. 模拟实现 2.1 入队操作 2.2 出队操作 2.3 访问队列顶部元素 2.4 判断优先队列是否为空 2.5 获取优先队列的大小 …

什么是One-Class SVM

1. 简介 单类支持向量机&#xff0c;简称One-Class SVM(One-Class Support Vector Machine)&#xff0c;用于异常检测和离群点检测(无监督学习&#xff0c;其他svm属于有监督的)&#xff0c;可以在没有大量异常样本的情况下有效地检测异常。其目标是通过仅使用正常数据来建模&a…

【力扣 Hot100 | 第四天】4.15(括号生成)

文章目录 4.括号生成4.1题目4.2解法&#xff1a;回溯4.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;终止条件&#xff08;3&#xff09;遍历过程 4.2.2代码 4.括号生成 4.1题目 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数…

三斜求积术 To 海伦公式 ← 三角形面积

【知识点&#xff1a;三斜求积术】 所谓秦九韶的三斜求积术&#xff0c;即如果已知三角形的边长a&#xff0c;b&#xff0c;c&#xff0c;可求得该三角形的面积为&#xff1a; 而由三斜求积术可推得海伦公式。过程如下&#xff1a; 其中&#xff0c; 上面推导公式的 Latex 代码…