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.hqwc.cn/news/620459.html

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

相关文章

STM32H7的DMAMUX

STM32H7的DMAMUX

STM32H7的DMAMUX 什么是DMAMUXDMA架构框图DMA requests from peripherals接口Trigger inputs 接口Interrupt 接口Synchronization inputs接口DMA Channels event接口DMA requests to DMA controllers接口请求发生器同步触发和请求复用器&#xff08;Request multiplexer&#x…
阅读更多...
Slic3r切片软件使用解释

Slic3r切片软件使用解释

slic3r是一款非常专业的3D打印切片软件。使用它你能够轻松的讲3D打印出来&#xff0c;并且进行切片处理。是为数不多的3D打印软件之一。这个软件使用起来十分简单&#xff0c;基本上只要下载完成就能够使用&#xff0c;兼容性十分好&#xff0c;能够与各种打印机兼容。拥有从硬…
阅读更多...
云端漫步：如何免费享受亚马逊云服务器的12个月奇妙旅程

云端漫步：如何免费享受亚马逊云服务器的12个月奇妙旅程

前言&#xff1a; 废话不多说&#xff0c;开头就直接上体验链接 亚马逊科技 (免费试用产品专属链接)包括灵活的Amazon EC2云服务器、稳定的Amazon RDS数据库服务、可扩展的Amazon S3云存储空间等等常见云服务产品。福利很大&#xff0c;有需要的朋友赶紧冲冲冲&#xff01; 想…
阅读更多...
vs2022断点调试怎么看堆栈帧，找异常位置

vs2022断点调试怎么看堆栈帧，找异常位置

打一个断点以后&#xff0c;会出现如图报错 我们要怎么找到报错的语句&#xff1f;鼠标点击->堆栈帧->上一行运行的位置->直到找到错误出错如图所示&#xff1a; 跳转到&#xff0c;我们手写的代码&#xff0c;执行出错的位置
阅读更多...
Unity（MVC思想）

Unity（MVC思想）

MVC 一下演示使用MVC和不使用MVC的做法区别。 前两个没有使用MVC 主面板逻辑&#xff1a; mainPanel是该脚本名字 每个场景中不一定存在该面板&#xff0c;单纯的显隐需要去手动挂载过于麻烦。 所以自己读取创建面板出来(每个场景仅创建一次)&#xff0c;存下该面板&#xf…
阅读更多...
基于SpringBoot的“口腔管理平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“口腔管理平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“口腔管理平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 口腔管理平台结构图 管理员登录界面图 个人中心界…
阅读更多...
【C++】unordered_map unordered_set 底层刨析

【C++】unordered_map unordered_set 底层刨析

文章目录 1. 哈希表的改造2. unordered_map3. unordered_set C STL 库中&#xff0c;unordered_map 和 unordered_set 容器的底层为哈希表&#xff0c;本文将简单模拟哈希表&#xff08;哈希桶&#xff09;&#xff0c;unordered_map 和 unordered_set 只需封装哈希表的接口即可…
阅读更多...
pyside6自定义部件库和软件框架的建设记录

pyside6自定义部件库和软件框架的建设记录

自定义的部件库原则上尽量做到前后端分离&#xff0c;接口方便&#xff0c;复制简单。 单选框部件 # encoding: utf-8 ################################################### # 自定义的单选框 #################################################### 对外接口&…
阅读更多...
密码学 | 椭圆曲线 ECC 密码学入门（三）

密码学 | 椭圆曲线 ECC 密码学入门（三）

目录 7 这一切意味着什么&#xff1f; 8 椭圆曲线密码学的应用 9 椭圆曲线密码学的缺点 10 展望未来 ⚠️ 原文地址&#xff1a;A (Relatively Easy To Understand) Primer on Elliptic Curve Cryptography ⚠️ 写在前面&#xff1a;本文属搬运博客&#xff0c;自己留…
阅读更多...
【Linux】封装一下简单库 理解文件系统

【Linux】封装一下简单库 理解文件系统

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、封装一下简单库 二、理解一下stdin(0)、stdout(1)、stderr(3) 2.1、为什么要有0、1、2呢&#xff1f; 2.2、特点 2.3、如果我想让2也和1重定向到一个文件…
阅读更多...
百元内的运动蓝牙耳机哪个牌子好？五大高分品牌实测推荐

百元内的运动蓝牙耳机哪个牌子好？五大高分品牌实测推荐

在追求健康生活的当下&#xff0c;运动已成为许多人日常生活的一部分&#xff0c;而音乐更是运动时的最佳伴侣&#xff0c;对于预算有限的学生党或普通消费者来说&#xff0c;如何在百元内挑选到一款性能优越、品质可靠的运动蓝牙耳机&#xff0c;确实是个不小的挑战&#xff0…
阅读更多...
医学图像分割入门-UNet理论与实践

医学图像分割入门-UNet理论与实践

U-Net: 用于图像分割的深度学习网络 引言 在计算机视觉领域&#xff0c;图像分割是一项重要的任务&#xff0c;旨在将图像中的每个像素分配到预定义的类别或区域。传统的图像分割方法通常基于手工设计的特征和启发式算法&#xff0c;但随着深度学习的发展&#xff0c;基于深度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023