代码块
console.log(a)
var a=1;
var b=2;
{
/*
代码执行前下面两个函数会依次预赋值
先把第'1'个函数提上来 再把第'2'个函数提上来('2'把'1'覆盖)
此时该console.log(a) 最近的是第'2'个函数
所有输出的就是 function a(){//'2'
console.log("b")
}
*/
console.log(a)
a=2;
/*
如果函数写在语句块中,那么函数则在块开始时预赋值
*/
function a(){//'1'
console.log("a")
}
a=3;//执行完该语句时 a=3
b=5;
//预赋值上面的变量被挤出块外 ，块执行完成后才会执行这个a=3
function a(){//'2'
console.log("b")
}
//a=3仍然会在块中执行一次
console.log(a)//3
a=4执行完该语句时 a=4
b=6;
console.log(a,"1")//4
//所以此时输出的a就是4
}
//这个a得到的是最后一个同名函数上面的那个对应的变量 所以是3
console.log(a,"2");//3
//b无同名变量 所以是6
console.log(b)//6
数值类型方法
//Number.isFinite() 判断是否是有限数字
console.log(Number.isFinite(10))
//Number.isInteger() 判断是否是整型
console.log(Number.isInteger(2))
//只会判断是否是NaN 不会自动会隐式转换为数值
console.log(Number.isNaN(1))//false
console.log(Number.isNaN())//false
//会自动隐式转换为数值, 判断是否是NaN
console.log(isNaN("a"))//true
//Number.isSafeInteger() 判断是否是安全数
//安全整数范围为 -(253 - 1)到 253 - 1 之间的整数，包含 -(253 - 1)和 253 - 1
console.log(Number.isSafeInteger(2))
//Number.parseInt() 转换成整数
console.log(Number.parseInt("3.1415926"))//number
//Number.parseFloat() 转换成小数
console.log(Number.parseFloat("13.14"))//number
//实例化 根据一个类创建具体的对象
//'Math' 不能实例化,全部都是静态属性和方法
//Math.PI (圆周率)
//Math.PI/180*角度=弧度
console.log(Math.PI)//3.141592653589793
//Math.abs() 绝对值 效率不高
console.log(Math.abs(-3))//3
//Math.cbrt() 立方根
console.log(Math.cbrt(8))//2
//Math.sqrt() 平方根
console.log(Math.sqrt(9))//3
//Math.ceil() 向上取整
console.log(Math.ceil(3.2))//4
//Math.floor()向下取整
console.log(Math.floor(3.2))//3
//Math.round() 四舍五入
console.log(Math.round(3.5))//4
//负数没有四舍五入 -3.5--> -4+0.5--> -4+1=-3
console.log(Math.round(-3.5))//-3
//Math.max() 最大值
console.log(Math.max(2,1,3,4,5))//5
'求数组最大值'
'方法一'
var arr=[1,2,3,4,5,6]
//apply方法用于调用一个具有给定this值和作为数组(或类似数组对象)提供的参数的函数
var max=Math.max.apply(null,arr)
console.log(max)//6
'方法二'
console.log(Math.max(...arr))//6
//Math.pow(底数,次方)
console.log(Math.pow(2,5))//32
//Math.trunc() 取整
console.log(Math.trunc(-4.3))//-4
//正弦
Math.sin(弧度)
//余弦
Math.cos(弧度)
补充:比较Object.is()方法中的两个值是否绝对相等 与===相同
Object.is(1,1)//true
console.log(Object.is(1,"1")) //false
//可以判断是否与NaN相等 ===不能判断
Object.is(Number("a"),NaN)//true
案例
<style>
div {
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 50px;
position: absolute;
}
</style>
<div id="div1"></div>
var div1 = document.getElementById("div1")
var x = 0, y = 0, angle = 0, radius = 100;
setInterval(function () {
//角度每16毫秒递增1度
angle += 1;
// x是当前角度的正弦*旋转半径+当前x的坐标
x = Math.sin(Math.PI / 180 * angle) * radius + 200;
//y是当前角度的余弦*旋转半径+当前y的坐标
y = Math.cos(Math.PI / 180 * angle) * radius + 200;
div1.style.left = x + "px";
div1.style.top = y + "px";
}, 16)
字符串型方法（重点）
'字符串本身不能够被修改，因为其不是引用类型'
'字符串的长度只读不可写'
'其下标也不能被修改'
// var arr=[1,2,3,4];
// arr.length--;
// arr.length=0;//不改变数组引用地址情况下，清空数组使用
var str="asdaksdh"
console.log(str.length)//8
console.log(str[0])//a
//创建
var str='aaa'//字面量字符串，非引用类型
var str1=new String('aaa')//构造函数创建，引用类型
console.log(str,str1)//aaa String {'aaa'}
//String.fromCharCode() 将unicode编码转换为字符串
console.log(String.fromCharCode(97))//a
var str="HELLO WORLD"
//str.anchor() 创建一个 <a> HTML 锚元素，被用作超文本靶标
console.log(str.anchor("b"))//<a name="b">HELLO WORLD</a>
//str.at() 查找指定索引 对应的字符 '可以给负数'
console.log(str.at(1))//E
//str.charCodeAt() 返回字符串第一个字符的 Unicode 编码
console.log(str.charCodeAt(1))//69
//"a".concat(str) 链接字符串
console.log("a".concat(str))//aHELLO WORLD
console.log("a"+str)//aHELLO WORLD
//str.startsWith(要查找起头的字符,从第几个下标开始查找=0) 判断第一位是不是以a开始
console.log(str.startsWith("a"))//false
console.log(str.startsWith("b",1))
//str.endsWith(要查找结束的字符,从第几个下标开始查找=字符串最尾部) 判断最后一位是不是D
console.log(str.endsWith("D"))//true
// 后面的下标是要查找的前一位
// console.log(str.endsWith("a",4));
//str.includes("c") 查找字符串是否包含c
console.log(str.includes("c"))//false
//str.indexOf 查找W的下标
console.log(str.indexOf("W"))//6
//str.padStart(长度,要添加的字符) 如果字符串达不到长度,就在前面添加元素
console.log(str.padStart(12,"6"))//6HELLO WORLD
//str.padEnd(长度,要添加的字符) 在后面添加
console.log(str.padEnd(12,"6"))//ELLO WORLD6
//str.repeat(3) 复制字符串3次
console.log(str.repeat(3))//HELLO WORLDHELLO WORLDHELLO WORLD
//str.replace(需要替换的字符,要替换为字符) 只能替换一个
//替换字符 E替换成9
console.log(str.replace("E","9"))//H9LLO WORLD
//str.replaceAll() 替换所有L为6
console.log(str.replaceAll("L","6"))//HE66O WOR6D
//截取 slice(从什么位置开始截取,截取到什么位置之前)
//位置可以使用负数
console.log(str.slice(2,4))//LL
//str.split() 截取之后返回一个数组
// split是join的逆运算 用什么字符切割字符为数组
// split(用切割字符)
// 用于切割的字符如果是undefined 默认整个切割
// 用于切割的字符如果是“” 默认将每个字符切割
console.log(str.split("L"))//(4) ['HE', '', 'O WOR', 'D']
//str.substring() 截取 起始，结束 不可为负数 但是可以从后向前截取
console.log(str.substring(2,4))//LL
//可以反着截取 如果前面大于后面就交换位置
console.log(str.substring(4,2))//LL
//str.substr(开始位置,个数) 截取指定数目的字符
//位置是可以使用负数
console.log(str.substr(2,2))//LL
//str.toLowerCase() 转为小写
console.log(str.toLowerCase())//hello world
//str.toLocaleUpperCase() 转为大写
console.log(str.toLocaleUpperCase())//HELLO WORLD
//str1.trim() 删除前后空格
var str1=" HELLO WORLD "
console.log(str1.trim())//HELLO WORLD
// 去掉字符串前面的空格
// console.log(str.trimStart());
// console.log(str.trimLeft());
// 去掉字符串后面的空格
// console.log(str.trimEnd());
// console.log(str.trimRight());
//str.charAt()提取指定位置字符
//作用等同于 str[0]
console.log(str.charAt(6))//W
使用案例
'模糊搜索'
var list=[
{id:1001,name:"剑豪"},
{id:1001,name:"亚托克斯"},
{id:1001,name:"剑魂"},
{id:1001,name:"易"},
{id:1001,name:"渐渐"},
]
var arr=list.filter(function(item){
return item.name.includes("剑")
})
console.log(arr)
'将字符串? 后面的编码转为对象格式'
var url = "https://s.taobao.com/search?spm=a21bo.jianhua.201867-main.10.5af911d9f0Pi4r&q=%E7%94%B7%E8%A3%85"
var o = url.split("?")[1].split("&").reduce(function (v, t) {
var arr = t.split("=");
v[arr[0]] = arr[1];
return v;
}, {});
console.log(o)
'将一个字符变大'
var str="i love javascript"
//以空格划分为数组 里面三个元素
//方式1
str=str.split(" ").reduce(function(v,t,i){
if(i>0) v+=" "
return v+t[0].toLocaleUpperCase()+t.slice(1)
},"")
//方式2
str= arr.map(function(item){
return item[0].toUpperCase()+item.slice(1).toLowerCase();}).join(" ");
console.log(str)
//随机名字 使用String.fromCharCode()
var arr = []
for (var i = 0x4e00; i < 0x9fd5; i++) {
arr.push(String.fromCharCode(i))
}
arr.sort(function () {
return Math.random() - 0.5
})
console.log(arr.slice(0, ~~(Math.random() * 3) + 2).join(""))
补充计组知识
// 1024B=1KB
// 1024KB=1MB
// 1024MB=1GB
// 1024GN=1TB
// 1B只能存储一个英文字母
// 11111111 8位2进制存储1个字节 FF 255
// 一个字节最多只能存储0-255中任意数字
// BG2312 简体汉字编码集
// BIG5 繁体汉字编码集
// Unicode编码集 万国码
// 0x4e00-0x9fd5 中文
// 0100111000000000
// UTF-8 Unicode编码集 按照8位的方式处理的编码集
Date方法
//静态方法，可以获取当前时间到1970.1.1.0时的毫秒数
//这个数值永远不能重复 时间戳
/*
1、可以用于网页阻止get获取时的缓存，使用后会禁止缓存
2、可以用于时间的计算
*/
console.log(Date.now())
//get获取页面，如果地址与上次获取的地址完全相同时，则通过缓存直接调用，不去服务器获取新的页面
var tiem=Date.now()
setInterval(function(){
console.log(~~((Date.now()-tiem)/1000))
},1000)
var date = new Date();//实例化对象
//date.getFullYear() 获取当前年份
console.log(date.getFullYear())
//date.getMonth() 获取当前月份 0-11 (需要+1才能获取正确信息)
console.log(date.getMonth())
//date.getDate() 获取当前日期 1-
console.log(date.getDate())
//date.getDay() 获取当前星期 0-6
console.log(date.getDay())
//date.getHours() 获取当前小时
console.log(date.getHours())
//date.getMinutes() 获取当前分钟
console.log(date.getMinutes())
//date.getSeconds() 获取当前秒数
console.log(date.getSeconds())
//date.getMilliseconds() 获取当前毫秒
//1秒=1000毫秒
console.log(date.getMilliseconds())
//返回距 1970 年 1 月 1 日之间的毫秒数
//获取这个时间的时间戳
console.log(date.getTime())
/*
作用
1、可以用来计算流失的时间
2、可以用于检测代码的效率
3、当通过GET方式访问地址时，如果地址相同，可能会调用
*/
//获取格林尼治时间
//根据世界时 (UTC) 返回时间的小时
console.log(date.getUTCHours())
// 转换为格林尼治时间字符串
console.log(date.toUTCString())
//设置日期
// date.setFullYear(2025);
// 如果月份超出11就会向前进位 年份增加
// date.setMonth(12)
// date.setDate(32);
// date.setHours();
// date.setMinutes();
// date.setSeconds()
// date.setMilliseconds();
//判断闰年
//月份从0开始 2对应3月 在设置日期为0 会返回到面 所以返回 25年2月是28天
/* var date=new Date(2025,2,0)
console.log(date.getDate())//28 */
/* //每月天数
var arr=Array(12).fill(1).map(function(item,index){
return new Date(2024,index+1,0).getDate()
})
console.log(arr)
//(12) [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] */
秒表
<body>
<div id="show">00:00:00</div>
<button id="startBn">开始</button>
<button id="stopBn">清零</button>
<script>
var startBn, stopBn, show, startTime;
var startBool = false, prevTime = 0;
init()
//函数式编程 开始必须有执行函数
function init() {
show = document.getElementById("show")
startBn = document.getElementById("startBn")
stopBn = document.getElementById("stopBn")
startBn.onclick = startHandler;
stopBn.onclick = stopHandler;
setInterval(animation, 16)
}
//开始/暂停操作
function startHandler() {
startBool = !startBool
if (startBool) {
//将按钮中的文本显示为暂停
startBn.innerHTML = "暂停"
//当点击开始按钮时，获取当前的时间 毫秒数赋值startTime
startTime = Date.now()
} else {
startBn.innerHTML = "开始"
//暂停时的时间查 上一次的时间差需要积累
prevTime += Date.now() - startTime
}
}
//清除操作
function stopHandler() {
//若是不清除时间长 则会继续积累 a下次还会继续执行
prevTime = 0;
startBool = false
startBn.innerHTML = "开始"
show.innerHTML = "00:00:00"
}
//获取时间操作
function animation() {
if (!startBool) return
//当点击开始时startBool变成true，所以可以进入当前函数
//而开始时startTime已经有值，这时候每次进来就可以获取到
// 当前时间与开始时间的时间差
// 加入上一次暂停前的时间差
var time = Date.now() - startTime + prevTime;
//算分钟 获取的是毫秒需要除以1000 之后再除以60
var minutes = ~~(~~(time / 1000) / 60);
//算秒数 获取的是毫秒 要先把时间转换成毫秒再减去 之后再除以1000为秒数
var seconds = ~~((time - minutes * 1000 * 60) / 1000)
//算毫秒 直接使用获取的时间算即可 再四舍五入取整
var ms = Math.round(time % 1000 / 10);
show.innerHTML = getTime(minutes) + ":" + getTime(seconds) + ":" + getTime(ms)
}
function getTime(num) {
//让秒表变化时 因数字变化导致的数值不会是0
return String(num).padStart(2, "0")
}
</script>
</body>
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
