Javascript学习笔记

已于 2025-02-03 12:39:28 修改
阅读量1k 收藏 22
点赞数 27
文章标签： javascript 开发语言 ecmascript
于 2025-02-03 12:12:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_88410373/article/details/145405209
版权

Javascript 学习笔记

引入

一、简介

1、JS是什么

js是一种运行在客户端（浏览器）的编程语言

2、JS的组成

JavaScript

  • ECMAscript
  • Web APIs
    • BOM
    • DOM

二、书写位置

1、内部js

一般将js放在html页面的底部，用<script></script>包住

2、外部js

同css外部文件一样，使用<script src=""></script>引入，中间无需写代码，写了也不执行

3、行内js

了解即可，vue会用到这种书写模式。如：

<body>
	<button onclick="alert("逗你玩")">点我月入过万</button>
</body>

三、注释和结束符

1、注释

单行注释：ctrl+/
块注释（多行注释）：shift+alt+a

2、结束符

使用英文分号加在句尾表示结束
为了风格统一，要么每一句话的后面都加结束符要么都不加（按照团队要求）

四、输入输出的语法

1、文档输出内容

既可以输出文本，还可以往其内部写入标签（有相应的样式）

<script>
	document.write("输出内容")
	document.write("<h1>我是标题</h1>")
</script>

2、页面警告弹窗

<script>
	alert("警告")
</script>

3、文档输入弹窗

<script>
	prompt("请输入您的年龄")
</script>

prompt内部是所需要输入内容的提示文字

4、控制台输出（给程序员看的）

<script>
	console.log("日志")
</script>

5、代码执行顺序

一般是按照书写顺序从上往下依次执行，prompt和alert会优先于其他执行（打开页面是即闪出弹窗）

五、变量的声明和赋值

1、变量的定义

变量是计算机中用于存储数据的容器，可以让计算机变得有记忆
变量并不是数据本身，简单理解就是一个装数据的盒子

2、变量的声明

<script>
	let age
</script>

语法：let 变量名（标识名）

3、变量的赋值

<script>
	let age %声明变量
	age = 18 %变脸赋值
</script>

4、声明变量时直接赋值

<script>
	let age = 18
</script>

六、变量赋值的更新

<script>
	let age = 18
	age = 19 %更新变量赋值，记住不要再次声明变量，会报错
	%可以同时声明多个变量但是不建议这么做
	let age = 18 , uname = "张三"
	console.log(age,uname)
	%还是建议将多个变量分开声明
	let age = 18
	let uname = "张三"
	console.log(age,uname)
	% 声明变量可以和输入输出语法结合
	let name = prompt("请输入姓名")
	console.log(name)
</script>

七、交换两个变量

<script>
	let num1 = 10
	let num2 = 20
	let temp %定义一个新变量
	temp = num1 %将num1的值赋给temp
	num1 = num2 %将num2的值赋给num1
	num2 = temp %将temp的值赋给num2
</script>

八、变量的本质

1、内存

计算机中存储数据的地方，相当于一个控件

2、变量

是程序在内存中申请一个用于存储数据的空间，变量名相当于小空间的名字

3、变量的命名规则

  1. 不能使用关键字（如let、var、if等）
  2. 只能由下划线、数字、字母、$组成，且不能使用数字开头
  3. 字母严格区分大小，age和Age不是同一个变量

4、变量的命名规范

  1. 起名要有意义
  2. 遵守小驼峰命名法，第一个单词首字母小写，后面的每个单词首字母都要大写。如：userName

九、数组

数组可以存储任意类型的数据

1、声明数组

<script>
	let arr = ["xxx",1]
</script>

2、使用数组

数组名[索引号]，索引号是从0开始的

<script>
	console.log(arr[0])
</script>

3、数组的长度

<script>
	console.log(arr.length)
</script>

4、一些常用的术语

元素：数组中保存的每个数据都叫做数组的元素
下标：数组中每个元素的索引号
长度：数组中元素的个数 （等于索引号加1）

十、常量

使用const定义常量，常量不允许重新赋值，且在声明时必须赋值（初始化）
小技巧：

  • 不需要重新赋值的数据使用const
  • 当某一变量永远不会改变时可以使用const来声明，如g、PI
<script>
	const PI = 3.14
	console.log(PI)
</script>

十一、基本数据类型

1、数字型number

js是弱数据类型语言，只有当我们赋值了，才知道是什么数据类型
整数、小数、负数、正数都属于数字型

2、字符型string

（1）定义及注意事项

在js中使用单引号、双引号、反引号（``）包裹的数据都叫做字符串型
在js中设置字符串型一般使用单引号

（2）在内容里加引号
  • 可以添加双引号（外单内双、外双内单）
console.log('pink老师讲课非常有"激情"')
  • 可以使用转义字符\
console.log('pink老师讲课非常有\"激情\"')
（3）字符串拼接

使用“+”可以实现字符串的拼接

<script>
	console.log("刘德华"+"忘情水")
</script>

<script>
	let age = prompt("请输入你的年龄：")
	document.write("我今年"+age)
</script>
（4）模板字符串

使用${}表示在字符串中引入变量，需要注意的是，字符串外必须使用反引号包裹

<script>
	let age = prompt("请输入你的年龄：")
	document.write(`我今年${age}岁了`)
</script>

3、布尔型

true false是布尔型的字面量

4、undefined未定义类型

只声明变量但是不赋值的前提下，变量的默认值为undefined

5、null类型

如果一个变量内确认存放的是对象，但是话没准备好对象，可以先存放一个null
undefined和null的区别是：undefined表示没有赋值，null表示赋值了但是赋值为空

6、检测数据类型

使用typeof检测数据类型

<script>
	let num = 10
	console.log(typeof num) %number
</script>

十二、数据的转换

1、隐式转换

  1. 定义：某些运算符在执行的时候，系统内部自动将数据的类型进行转换

  2. 规则：

    • +号两端只要有一个是字符串类型，另外一个也会转换成字符串类型
    • 除了+号以外的算术运算符，如：- * /等，都会将数据转换成数字类型

  3. 小技巧：

    • 单用+号可以将字符串类型转换为数字类型
    • 任何数据和字符串相加的结果都是字符串类型
<script>
	console.log(1+1)//2
	console.log('1'+1)//11
	console.log(2-2)//0
	console.log('2'-2)//0
	console.log(+'123')//123且为数字类型
</script>

2、显示转换

  1. 定义：自己写代码告诉系统数据类型是什么
  2. 转换成数字型：Number、parselnt（只保留整数）、parseFloat（可保留小数）
    当使用parseInt和parseFloat转换数字型时，数字只有在字符串开头才可以被识别，如果字符串开头是字母，则结果是NaN
  3. 将字符串转换为数字型时，如果字符串内有非数字，转换失败结果为NaN即not a number，NaN也是数字型，代表非数字
  4. 转换成数字型的三种方法：
    • 输出时转换
    • 输入时转换
    • 使用+号
<script>
	//第一种
	let str = '123'
	console.log(Number(str))
	//第二种
	let age = Number(prompt("请输入你的年龄："))
	console.log(age)
	//第三种
	let age1 = +prompt("请输入你的年龄")
	console.log(age1)
</script>

主要知识点

一、if语句

1、if单分支

表达式和语句的区别
表达式可被求值，所以他可以写在赋值语句的右侧
语句不一定有值，比如alert()、for、break等语句就不能被用于赋值

分支语句包含：if分支语句、三元运算符、switch语句
除了0所有数字都为真，除了‘’（空字符串）所有字符串都为真

语法

<script>
	if() {
	}
</script>

2、if双分支

语法

<script>
	if() {
	}
	else() {
	}
</script>

3、多分支

语法

<script>
	if() {
	}
	else if() {
	}
	else if() {
	}
	else {
	}
</script>

例题

<script>
	if(score>=90) {
	alert("优秀")
	}
	else if(score>=70) {
	alert("良好")
	}
	else if(score>=60) {
	alert("及格")
	}
	else {
	alert("不及格")
	}
</script>

二、三元运算符

语法

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

例题

<script>
	3<5 ? alert("真的") : alert("假的")
</script>

三、switch语句

语法

<script>
	switch(数据) {
		case 值1：
			break
		case 值2：
			break
		case 值3：
			break
		default:
			代码n
			break
	}
</script>

找到跟小括号里数据全等（===）的case值，并执行里面对应的代码；若都不是全等，则执行default里面的代码。

switch case语句一般用于等值判断，不适合于区间判断
一般用于确定值的情况

四、while循环

语法

<script>
	while(循环条件) {
		要重复执行的代码（循环体）
	}
</script>

三要素：变量起始值、终止条件、变量变化量

简易ATM取款机案例

<script>
    let sum = 0
    while(true) {
      let chose = +prompt
      (`请选择您的操作：
                1.存款
                2.取款
                3.查看余额
                4.退出`)//反引号可以输出相同的文本格式	
      if (chose===4) {
        break
      }
      switch(chose) {
        case 1:
          let input = +prompt("请输入存款金额")
          sum=sum+input
          break
        case 2:
          let output = +prompt("请输入取款金额")
          sum=sum-output
          break
        case 3:
          alert(`您的余额为${sum}`)
          break
      }
    }
  </script>

五、for循环

语法

<script>
	for(变量起始值;终止条件;变量变化量) {
		循环体
	}
</script>

遍历数组

<script>
	let arr=["刘德华","刘小强","刘晓庆","刘若英"]
	for(let i=0;i<=arr.length-1;i++) {
		console.log(arr[i])
	}
</script>

六、循环退出

break：退出整个循环。一般用于结果已经得到，后续循环不需要的时候可以使用
continue：退出本次循环。一般用于排除或者跳过某一个选项的时候

七、无限循环

1、使用while构造无限循环

while(true) {
}

2、使用for构造无限循环

for(;;) {
}

八、for循环和while循环的区别

  • 明确了循环的次数使用for循环
  • 不明确循环的次数使用while循环

九、循环嵌套

语法

<script>
	for(外部声明记录循环次数的变量；循环条件；变化值) {
		for(内部声明记录循环次数的变量；循环条件；变化值) {
			循环体
		}
	}
</script>

99乘法表

<script>
  for(let i=1;i<=9;i++){
    for(let j=1;j<=i;j++){
      let output = i*j
      document.write(`<span>${j}×${i}=${output}</span>`)
    }
    document.write("<br>")
  }
</script>

在这里插入图片描述

十、数组

1、数组的基本使用

（1）字面量声明数组

let arr=[1,2,'pink',true]

（2）使用new Array

let arr=new Array(1,2,'pink',true)

2、最大值最小值

最大值

<script>
  let arr=[2,6,1,7,4]//定义一个数组
  let max = arr[0]//取max为数组中的第一个元素
  for(let i = 1;i<arr.length;i++) {
    if(max<arr[i]){
      max=arr[i]//遍历数组，如果其中一个元素大于max，则将此元素重新赋值给max
    }
   //三元运算符 max<arr[i]?max=arr[i]:max
  }
  document.write(max)
</script>

最小值

<script>
  let arr=[2,6,1,7,4]//定义一个数组
  let max = arr[0]//取max为数组中的第一个元素
  for(let i = 1;i<arr.length;i++) {
    if(max>arr[i]){
      max=arr[i]//遍历数组，如果其中一个元素大于max，则将此元素重新赋值给max
    }
  }
  document.write(max)
</script>

3、数组操作

（1）修改

数组[下标]=新增（重新赋值）
给所有数组元素后面加个“老师”

<script>
	arr=['pink','red','yellow','blue']
	for(let i = 1;i<arr.length;i++) {
		arr[i]=arr[i]+'老师'
	}
</script>
（2）新增
  • arr.push(新增的内容)（重点）
    将一个或多个元素添加到数组的末尾，并返回该数组的新长度
  • arr.unshift(新增的内容)
    将一个或多个元素添加到数组的开头，并返回该数组的新长度
（3）删除
  • arr.pop()
    从数组中删除最后一个元素，并返回被删除的元素的值
  • arr.shift()
    从数组中删除开头的元素，并返回被删除的元素的值
  • arr.splice(操作的下标，删除的个数)（重点）
（4）数组筛选案例
<script>
  let arr = [2,0,6,1,77,0,52,0,25,7]
  let newArr = []
  for(let i = 0;i<arr.length;i++) {
    if(arr[i]>=10){
      newArr.push(arr[i])
    }
  }
  console.log(newArr);
</script>

十一、循环数组综合案例

十二、冒泡排序

<script>
  arr=[5,4,3,2,1]
  for(let i = 0;i<arr.length;i++) {
    for(let j = 0;j<arr.length-i-1;j++) {
      if(arr[j]>arr[j+1]) {
        let temp = arr[j]
        arr[j]=arr[j+1]
        arr[j+1]=temp
      }
    }
  }
</script>

arr.sort()//开发中常使用的排序方法，默认按照升序来排
升序
arr.sort(function(a,b){
	return a-b
})
降序
arr.sort(function(a,b){
	return b-a
})

十三、函数

1、语法

定义语法

<script>
	function 函数名() {
		函数体
	}
</script>

调用语法

函数名()

2、参数及默认参数

<script>
	function 函数名(参数列表) {   //形参：在函数内部声明的变量
		函数体
	}
	函数名(参数列表)   //实参：调用函数时写在函数名右边小括号里的叫形参
</script>

需要传入几个数据就写几个，用逗号隔开

3、函数返回值

概念：当调用某个函数时，这个函数会返回一个结果出来

4、作用域

限定某个名字的可用性的代码范围就是这个名字的作用域
全局变量在任何区域都可以访问和修改
局部变量只能在当前函数内部访问和修改

<script>
	let num = 10
	function fn() {
		let num = 20
		console.log(num)//执行的是num = 20，遵循就近原则
	}
	fn()
</script>

5、匿名函数（没有名字的函数）

使用方式：

  • 函数表达式
let fn = function() {}//定义
fn()//调用
  • 立即执行函数
    立即执行函数的作用：为了避免全局函数的污染
    多个立即执行函数之间必须用分号隔开
//第一种写法
(function(x,y) {
	console.log(x+y)
})(1,2);
//第二种写法
(function(x,y) {
	console.log(x+y)
}(1,2));

十四、转换时间案例

<script>
  let input = +prompt("请输入总秒数")
  function getTime(t) {
    let h = parseInt(t/60/60%24)
    h=h>10?h:'0'+h
    let m = parseInt(t/60%60)
    m=m>10?m:'0'+m
    let s = parseInt(t%60)
    s=s>10?s:'0'+s
    return`转换为${h}小时${m}分钟${s}秒`
  }
  let str =getTime(input)
  document.write(str)
</script>

十五、逻辑中断

逻辑中断只存在于与和或中，当满足一定条件时会让右边的代码不运行
与：同真为真同假为假，左边为假，一定为假，右边则由于逻辑中断不再执行
或：存在一个为真则为真，左边为真，一定为真，右边则由于逻辑中断不再执行

十六、转换为布尔型

Boolean(需要转换的内容)
‘’、0、undefined、null、false、NaN转换为布尔值后都是false，其余则为true

十七、对象

1、什么是对象

对象是一种数据类型，是无序的数据集合（数组是有序的数据集合）

2、对象使用（属性）

声明

<script>
	let 对象名 = {
		属性名：属性值,
	}
</script>

多个属性之间使用英文逗号分隔

<script>
	let 对象名 = new Object()
</script>

3、对象的操作

（1）增
对象名.新属性名=新值
（2）删
delete 对象名.属性名
（3）改
对象.属性=值
（4）查
对象.属性
对象[‘属性名’]

4、对象使用（方法）

<script>
	let 对象名 = {
		方法名：函数
	}
</script>

多个之间用英文逗号分隔
也可以添加形参和实参
方法的调用 对象名.方法名()
调用函数时函数内部一定要有返回值，否则就是undefined
例

<script>
  let obj={
    name:'刘德华',
    sing:function(){
      console.log('冰雨');
    }
  }
</script>

5、遍历对象

  <script>
    let obg={
      uname:'pink老师',
      age:'18',
      gender:'男'
    }
    for(let k in obj){
      console.log(k)//属性名 'uname','age','gender'
      console.log(obj[k])//不能用obj.k --> obj.'uname',obj.'age',obj.'gender'这样是错误的，不可以加引号
    }
  </script>

6、内置对象

（1）内置对象是什么？
JavaScript内部提供的对象，包含各种属性和方法给开发者调用（比如：document.write()）
（2）内置对象Math
是js提供的一个数学对象，Math是对象

  • 包含方法有random(生成0-1随机数),ceil(向上取整),floor(向下取整),max(找最大数),min(找最小数),pow(幂运算),abs(绝对值),round(四舍五入),parseInt(取整函数)
  • 包含的属性有PI(3.1415926…)

（3）生成任意范围随机数
random返回一个0-1之间的数,[0,1)

  • 生成0-10的随机数,
    Math.floor(Math.random()*11)
  • 生成5-10的随机数
    Math.floor(Math.random()*6)+5 //先生成[0,6)的数,再＋5
  • 生成N-M的随机数
    Math.floor(Math.random()*(M-N+1))+N

十八\简单数据类型和引用数据类型

简单数据类型存放在栈中,简单数据类型包括string,number,boolean,undefined,null等
引用数据类型存放在堆中,引用数据类型包括object,array,date等

Jyywww121
关注
JavaScript学习笔记
04-30
内容概要：本文档是作者根据黑马教程及其他参考资料整理的JavaScript学习笔记，旨在巩固所学知识并补充遗漏内容。文档首先介绍了开发工具VSCode的配置，随后深入讲解了JavaScript的基础知识，包括编程基础、数据类型...
javascript学习笔记
02-15
JavaScript学习笔记涵盖了多个核心主题，旨在帮助学习者掌握JavaScript编程语言的高级知识和应用技巧。首先，学习笔记从高级程序设计的角度出发，探讨了JavaScript的基础和进阶知识，这包括了编程范式、作用域、闭包...
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 9万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
【JavaWeb】JavaScript 详细入门教程
最新发布
2302_80979832的博客
03-25 1751
本文旨在将JavaScript的基础知识进行讲解，因此没有涉及过深的内容，适合后端的小伙伴或者想要快速掌握JavaScript的小伙伴阅读。
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
前端基础--JavaScript
qq_50048558的博客
08-22 3073
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
JavaScript--js基础(详细 全面)
Dreamkidya的博客
06-24 1万+
本文旨在介绍和学习JavaScript的基础知识。通过本文的阅读，读者将能够了解JavaScript在网页开发中的重要性和作用，掌握其基础语法和概念。不论是初学者还是有一定经验的开发者，都可以通过本文来加深对JavaScript的理解，并提升自己的开发能力。希望读者能够从中获得有益的知识，为日后的学习和实践打下坚实基础。愿读者在学习JavaScript的过程中不断成长，探索更多可能性
javascript基础入门教程,javascript零基础入门
阿发狗伪原创
10-24 2756
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了python for语句用法。//局部变量 用let定义let 变量名 = 值;//全局变量 用var定义var 变量名 = 值;//常量定义 constconst 常量名 = 值;//整数类型var a=3;// Boolean类型var b=true;// 定义小数类型 小数和整数类型统称为number类型。
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 8999
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
javaScript简介
weixin_69252724的博客
04-16 4168
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
JavaScript(基于Java开发的学习)
qq_53957101的博客
09-13 9917
JavaScript(基于Java开发的学习)
JavaScript入门
08-27
从浅入深的JavaScript的教学Javascript是Web编程语言，所有的现代的Web浏览器都含有JavaScript解释器，JavaScript是部署最广泛的编程语言，无论你是从头开始还是有一定的基础，都可以帮助更好的掌握这门编程语言
一文读懂JavaScript(JS)基础知识大全
HTDiiii的博客
08-23 3824
1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。
JavaScript基础
qq_63946637的博客
10-08 2332
本文旨在帮助大家初步学习JavaScript
JS（JavaScript）详解
weixin_53455615的博客
09-19 8255
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript组成ECMAScript：JavaScript的核心，语法格式，使用方法文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
JavaScript 概述
Dailyblue的专栏
04-13 2519
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript初识及基本语法详解
小小码农
03-13 2901
JavaScript初识及基本语法详解
JavaScript入门知识
m0_70296476的博客
02-09 1986
JavaScript 是一种轻量级的脚本语言，主要用于网页开发，通过与 HTML 和 CSS 结合，实现网页的动态效果和用户交互功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值