Java学习笔记14 JS入门

学习Java的普通网友

于 2022-08-18 22:03:44 发布

阅读量334

点赞数

分类专栏： Java基础文章标签： java 学习 jvm

本文链接：https://blog.csdn.net/daochutoudaima/article/details/126414784

版权

Java基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js入门

js介绍

基于浏览器的脚本语言
是一门面向对象的弱语言

使用js

是嵌入在浏览器的脚本语言，需要再html网页中通过

js的引入方式

在标签上通过触发事件执行一段js脚本

<!--onclick 当触发div单击事件执行的代码-->
<div class="app" onclick="alert('这是一个div')"></div>

通过 script 标签，来定义脚本

<script>
        //会阻塞程序的运行
        alert("这是javascript入门")
</script>

通过外链的方式引入js文件

<script src="../js/xxx.js"></script>

如果script标签提供了src属性则不能在标签内写其他内容

js 中的变量

可以使用 var

var 定义的变量默认情况下是全局变量但不能被delete删除
var 修饰的变量可以被重复声明
var 存在变量提升的现象
一个网页中的所有全局变量都会默认成为window（内置对象，代表一个网页）的属性，可以被delete删除，删除后为undefined

let

let修饰的变量是一个局部变量
存在变量提升的现象
声明的变量不能被多次重复定义
会存在暂时性死区现象

const

常量其他用法和let一样

js 中的运算符

算数运算符 +，-，*，/，% ,**

/0结果为Infinity无穷正值为无穷大负值为无穷小-Infinity
如果算数运算符有任意一个不是数字，则返回NaN
isFinite() 判断是否是有穷的
isNaN() 判断一个数是否是非数会对内容进行转换，如果可以转成数字，则返回false，反则返回true
Number.isNaN() 结果只有NaN 才返回true，其他一律返回false
5**3 表示5的3次方
空字符串转成数字是0
null 转成数字是0
undefined 无法转成数字
true 转成数字为1，false为0
空数组转成数字为0
空对象无法转成数字
空数组+空数组=长度为0的字符串
空对象转字符串为[object Object]
空数组转成字符串为长度为0 的字符串
NaN != NaN

关系运算符 >, >=, <, <=, ==, !=, =, !

typeof()查看变量类型
== 比较的是值是否相等，类型如果不一致，会自动转换成同一种数据类型进行比较
=== 比较类型和值是否相同
null ：代表值为空可以转成数字0
undefined ：代表值为定义不可以转成数字0
null == undefined返回true null=== undefined返回false

逻辑运算符（参考java）
位运算符（参考java）
位移运算符（参考java）
一元运算符？？，++，–

？？: 给 null 或者 undefined 设置默认值

三元运算符（参考java）
赋值运算符（参考java）

js 中的判断

if 条件只强调结果为真即为为真否则为假

boolean表达式
数字 0为真、其他为假
字符串，长度为零的字符串为假其他均为真
null 和 undefined 均代表假
对象均为真
数组（列表）均为真

switch 有穿透效果支持数字和字符串不支持->

js 中的循环

while (参考java)
do while (参考java)
for (参考java)

js 常见的数据类型

null 和 undefined
number

表示数字, 使用Number 类表示
创建一个数字对象： Number(n) 、new Number(n)（构建出一个对象Number{n}）
数字对象.toFixed(n) 保留n位小数建议n的取值范围在0-20之间默认采用四舍五入

字符串

‘’ 和 “” 都可以表示字符串 String() 、new String()
padStart(n,‘’) 左对齐在前面补字符串，一直补到长度为n 默认补空格
padEnd(n,‘’) 由对齐在后面补字符串，一直补到长度为n 默认补空格
split(‘’,n) 拆分字符串返回值为数组传入n后代表获取拆完后的前n个值不传默认获取所有
substr(n,m) 截取字符串从n开始获取m个字符
substring(n,m) 截取字符串从n开始到m结束若m为负值则代表从后往前截取正值代表索引不传代表从n截取到尾部
支持定义字符串模板 ${js表达式}xxxx js表达式中就是变量名和方法

正则表达式 Regexp

创建方式 new Regexp(“”) 、 /xxx/
regex.test(" ") 验证传入的字符串是否符合正则表达式返回boolean 通过RegExp$1-9 来获取分组内容
regex.exec(" ") 获取正则表达式匹配的内容及其分组的内容默认只能获取正则表达式第一次匹配的内容
修饰符： g 全局模式 new Regexp(“”，g)、/xxx/g g模式下exec可以通过反复调用获取正则表达式匹配的所有内容
i 忽略大小写
m 多行模式匹配多行的字符串多行字符串用```（反逗号）包裹必须使用g模式
s 点模式 .匹配所有

字符串中支持正则表达式的方法 (必须掌握)

split(regex) ：根据参数拆分字符串
replace(regex,“”) ：将正则表达式匹配的内容替换成指定内容默认只能替换一次在g模式下可以匹配多个
match 获取匹配的内容在非g模式下返回和exec结果一样，在g模式下返回一个数组，里面是所有匹配的对象
search 获取正则表达式第一次匹配内容的索引位置

js 中的常用类

数学类

ceil 向上取整
floor 向下取整
round 四舍五入
max/ min 最大/最小值支持传入多个数
random 返回一个0-1的随机小数，包含0不包含1
parseInt 取整（舍弃小数）

日期类

new Date() : 获取日期不传默认是当前系统日期
date.getTime() : 获取时间戳（1970年至date的时间）
date.getFullYear() : 获取date的年份
date.getMonth() : 获取月份（0-11）
date.getDate() : 获取天数
date.getHours() : 获取小时（24小时制）
date.getMinutes : 获取分
date.getSeconds : 获取秒
date.getMilliseconds : 获取毫秒
date.getDay : 获取当前周几

js 中的数组

数组的创建方式

new Array() 创建一个空的数组，返回一个数组对象
new Array(n) 创建一个指定长度的数组
new Array(a,b,c…) 创建同一个包含内容为a，b，c…的数组对象
[a…] 创建一个包含a…的数组（字面量定义方式）

数组常见的属性

length 获取数组的长度

数组常见的方法

array[n] 获取下标为n的元素
array[n] = m 将下标为n的元素改成m
array.push(n…) 向数组尾部添加元素
array.unshift(n…) 向数组头部添加元素
array.pop() 删除尾部元素并返回删除的元素
array.shift() 删除头部元素并返回删除的元素
array.splice(index,n) 删除指定位置的n个元素
array.splice(index,n,newValue…) 删除指定位置的n个元素然后添加新元素
array.splice(index,0,newValue…) 向指定位置添加元素

数组的高级用法

array.map((val,index,arr)=>val*n) map映射将数组中的元素扩大n倍
array.filter((var,index,arr)=>{…}) 过滤
reduce((result,val),defaultValue=>{})
reduce((result,val)=>{})
find((val, index, arr)=> {…}) : 查找满足条件的第一个元素,如果找不到，返回undefined
findIndex((val, index, arr)=> {…}) : 查找满足条件的第一个元素索引,如果找不到，返回-1
some((val, index, arr)=> {…}): 判断数组中是否有元素满足条件
every((val, index, arr)=> {…}): 判断数组中是否都满足条件

数组的遍历方式

for…in(遍历的是数组中的索引，从零开始)

for(let index in array) {
console.log(array[index]);
}

for …of 遍历

for(let val of array) {
 	console.log(val);
 }

forEach 遍历

 array.forEach((val, index)=> {
 	console.log(val, index);
 })

键遍历

for(let key of array.keys()) {
 	console.log(array[key])
 }

值遍历 , for … of 默认使用的就是值遍历

 for(let val of array.values()) {
 	console.log(val);
 }
 console.log(array)

键值对遍历

 for(let entry of array.entries()) {
 	console.log(entry[0] + "=" + entry[1])
 }

数组的解构赋值

解构赋值： ES6允许按照一定的模式从数组或者对象中提取数据、然后对变量进行赋值

按照数组的结构顺序进行解构然后赋值适用于数组元素较少时

let array=[0,1,2,3,4,5];
//将数组的第一个元素赋值给a，第二个元素赋值给b
let [a,b]=array;

当解构位置超过数组位置时值为undefined 可以通过 = 来赋默认值

let a = 10;
lat b = 15;
//交换a b 的值
[a,b]=[b,a]

数组扩展运算符 …

…array 将数组展开
array.concat(array2) 合并数组
[a,b,c,…d]=x d的值是x数组除a,b,c 剩下的所有元素此时…只能运用在最后一个元素

js 中的对象

创建一个对象 {} 、new Object()

在js中对象是以键值对形式的对象的键是一个字符串可以省略引号如果键不符号标识符的命名规范则不能省略引号
对象的值同时也支持函数但是在函数中this不能省略

形似数组的对象：对象中的键是数字对象中有一个length 属性，且值为数字

Array.from(obj)

对象的遍历方式

可以通过for…in 遍历

for(let key in obj){
  console.log(key,obj[key]);
}

键遍历

//获取对象中的所有键
let keys = Object.keys(obj);
for(let ksy of keys){
  console.log(key,obj[key]);
}

键遍历

let values = Object.velues(obj);

for( let val of valuse){
  console.log(val);
}

键值对遍历

let entries = Object.entries(obj);
for( let [key,val] of entries){
  console.log(key,val);
}
console.log(entries);

动态

属性为动态时将属性名用[n]表示 n可以改变值可以直接用变量
当对象的属性名字符串表示形式和值的变量名相同的时候，可以省略
当某一个属性对应的值是一个函数的时候可以省略:function

对象的解构赋值

通过{n:m}进行解构 n为解构规则，按照该名称从对象中找 m为解构后被赋值的变量名如果n和m名字一样可以简写 {n}
如果对象中没有该属性，则返回值为undefined
无法对null 和 undefined进行解构赋值
对象在解构赋值时如果解构赋值没有以声明（var、let）开头时，必须用小括号（）括起来

对象的展开运算符 …

Object.assign(a,b) let c ={…a,…b } 合并两个对象
如果一个对象包含Symbol.iterator , 那么这个对象一定可以使用for…of 进行迭代遍历

js 的JSON序列化

JSON 序列化: 将数组/对象转成字符串

JSON.stringify(obj)

JSON 序列化：将字符串转成数组/对象

JSON.parse(json)

js 中的函数

函数是一种行为，代表能做什么，相当于Java的方法

函数的作用：可以对代码进行封装，以达到代码复用的效果

JS 中，使用function关键字来定义函数，属于Function类型会默认成为window的方法 window可以省略

function 函数名([参数列表]){ 函数体 };
let 函数名 = function(){ 函数体 };
let 函数名 =new Function([参数列表]，函数体); Function中的参数全为字符串
在js中，函数中如果没有return，则代表return undefined 如果return了多个值只会返回最后一个值
函数在定义参数时可以设置默认值

函数的内置变量arguments

是一个形似数组的对象
可以通过函数中的内置变量arguments来获取传入的所有参数
可以通过arguments.callee获取函数本身

rest 不定向参数 …

不定向参数可以代替arguments 来获取调用方法传入的参数会变成一个数组对象
不定向参数只能出现在所有参数的尾部且最多只能有一个

函数的解构赋值

在函数参数上使用解构赋值

在函数中的this关键字

在窗口中定义的函数，this指向Window
在对象中定义的函数，this指向当前对象

构造函数

通过new 关键字调用的函数
构造函数相当于java中的类参数相当于属性内部的普通函数相当于方法
构造函数中的this 指向当前对象
在函数中，可以通过 new.target 来判断一个函数是否是构造函数，在普通函数中new.target=undefined
在构造函数中new.target返回函数本身

箭头函数

是函数的一种简单写法，语法可以参考java lambda表达式
箭头函数中的this默认指向函数所在环境中的对象
构造函数不能使用箭头函数

函数的方法

以下三个方法均可以可以修改this的指向

call 调用函数函数名.call(指向对象,参数列表) 参数列表为函数需要的参数列表
apply 调用函数函数名.apply(指向对象,数组) 数组中存放的是函数的参数列表
bind 绑定函数函数名.bind(指向对象，参数列表) 不会调用函数而是返回一个绑定后的函数，若想调用需要再加一个()但是参数不能修改
如果指向对象为null或undefined 则不修改指向对象
箭头函数的this指向不能修改
如果对一个对象的成员方法进行解构赋值，那么方法中的this指向会发生改变，需要通过call、apply、bind重新修改this指向

js prototype原型

可以对已知的类型进行扩展

已知类型.prototype.函数名

BOM 浏览器对象模型

window : 一个网页就是一个窗口，一个window 对象代表一个网页
screen : 和浏览器屏幕相关的一个对象（了解）
navigator : 和浏览器导航相关的对象可以获取浏览器的对象（了解）
history : 获取浏览器历史记录的对象
location : 和浏览器网址相关的对象
document : 和浏览器相关的文档对象
frames : 和浏览器框架相关的对象

window

var在窗口中修饰的变量是全局变量，会默认成为 window的属性
在窗口定义的函数，也会自动称为window 的方法
在使用window 对象的时候，可以省略window 关键字

对话框

提示框 alert(提示信息)
确认对话框 confirm(提示信息) 有返回值 true/false
输入对话框 prompt(提示信息) 有返回值返回输入的内容如果点击取消则返回null
会阻塞程序的运行

open() : 打开一个窗口

-参数列表: url(“”) , target(“”)//打开的样式,新窗口…, size("width: ,height: ")

close() : 关闭当前窗口

setTimeout(fn,delay ) : 用来设置延迟加载的代码

fn :延迟执行的函数
delay : 延迟时间 ,单位是毫秒
可以通过 cleanTimeout (句柄:延迟的返回值) 取消延迟

			function log(){
				console.log("hello");
			}
			
			setInterval(log, 3000)  // 延迟3s ,每间隔 3秒 执行一次
			
			log();  //进来就触发
			
			
			// let playing = false ;
			// function log(n) {
			// 	console.log("hello" + ++n);
			// 	playing = setTimeout(`log(${n})` , 3000)
			// }
			
			// log(0);
			
			// function closeLog() {
			// 	clearTimeout(playing)
			// }
			
			// 在控制上，输入一个 hello ,要求延迟3秒
		
			// 在控制台上，要求 每间隔 3秒 打印一次 hello 
			//setTimeout( log  ,  3000)
			
			// setTimeout(function(){
			// 	log(3) ;
			// } , 3000)
			// let n = 3 ; 
			// setTimeout( "log("+ n +")"  ,  3000)
			
			// console.log("world");
			
			// let win = false ;
			// function openWin() {
			// 	win = window.open("./26.css-动画.html" , "_blank", "width=600px,height=300px;") ;
			// 	console.log(win);
			// }
			
			// function closeWin() {
			// 	// 获取弹出的窗口 
			// 	if (win) {
			// 		win.close();
			// 	}
			// }
			
			// 提示框 类型 
			//alert("我是一个弹出框"); // 
			
			// 确认对话框 confirm 有返回值， 返回 true / false 
			// if (confirm("您确定要删除该数据吗?")) {
				
			// 	console.log("该条数据已被删除")
			// }else{
			// 	console.log("您已放弃该操作")
			// }
			
			// 输入对话框， 返回输入的内容，如果点击取消按钮，则返回一个 null
			// let x = prompt("请输入您的手机号")
			
			// console.log(x);

setInterval(fn,delay)

用来进行轮询 (每间隔一段时间触发一次代码)
可以通过cleanInterval(句柄)取消轮询

    <head>
		<style>
			#app {
				width: 500px;
				height: 500px;
				background-color: red;
				margin:200px auto 0;
				font-size:400px;
				color:#ffff;
				text-align: center;
				line-height: 500px;
			}
		</style>
	</head>
	<body>
		
		<!-- <a onclick="closeLog()">取消延迟</a> -->
		<div id="app">10</div>
		
		
		<script>
			// 获取 div元素
			let div = document.querySelector("#app") ;
			
			// 使用轮询 ，每间隔 1秒修改数据
			let playing = setInterval(function(){
				// 获取 div 标签体中的内容 
				let num = div.innerText - 1 ;
				
				// 将 修改 后的内容，设置到标签中
				 div.innerText = num ;
				 
				 // 当 num 的值 为 0 时候，停止轮询 
				 if (num <= 0) {
					 clearInterval(playing); 
					 // 将内容修改为 过年了！！！
					 div.innerText = "过年了" ;
					 // 设置字体大小为 80px 
					 div.style.fontSize = "120px"; 
				 }
				
			},  1000)
		</script>