JavaScript日记(八)

本文详细介绍了JavaScript中的Date对象,包括创建指定时间、获取日期和时间的方法;Math对象的常用数学运算方法;字符串的方法,如length、concat、indexOf等;以及正则表达式的创建和使用,如test、match、replace等。这些基础知识对于理解和操作JavaScript中的时间和字符串处理至关重要,同时也涉及到性能测试和随机数生成。
摘要由CSDN通过智能技术生成

目录

Date对象:

Math对象:

包装类:

字符串的方法:

正则表达式:


Date对象:

在Date对象中使用Date对象来表示时间,如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间;创建指定时间对象则需要在构造函数中传递一个表示时间的参数作为字符串(日期格式:月/日/年 时:分:秒)

var d=new Date();  //创建一个Date对象
var d2=new Date("12/24/2022 11:10:30");  //创建一个指定的时间对象

getDate(),获取当前日期对象是几日

getDay(),获取当前日期对象是周几,会返回一个0-6的值,0表示周日

getMonth(),获取当前日期对象是几月,返回一个0-11的值,0表示一月,1表示二月... ...

getFullYear(),获取当前日起对象的年份

getTime(),获取当前日期对象的时间戳(指从格林威治标准时间的1970年1月1日,0时0分0秒到当前日期所花费的毫秒数,1秒=1000毫秒),计算机底层在保存时间时使用的都是时间戳

var d2=new Date("12/24/2022 11:10:30");  //创建一个指定的时间对象
var time=d2.getTime();
time=Date.now();  //获取当前的时间戳

可以利用时间戳来测试代码的执行性能

var start=Date.now();
for(var i=0;i<100;i++){
    console.log(i);
}
var end=Date.now();
console.log(end-start);

Math对象:

Math和其他对象不同,它不是一个构造函数,它属于一个工具类,不用创建对象,它里边封装了数学运算相关的属性和方法(例如Math.PI表示圆周率)

Math.abs(),用来计算一个数的绝对值

Math.ceil(),对一个数进行向上取整

Math.floor(),对一个数进行向下取整

Math.round(),对一个数进行四舍五入取整

Math.random(),用来生成一个0-1之间的随机数,生成一个x-y之间的随机数:Math.round(Math.random()*(y-x)+x);

Math.max(),获取多个数中的最大值

Math.min(),获取多个数中的最小值

Math.pow(x,y),返回x的y次幂

Math.sqrt(x),对x开方

包装类:

JS中提供了三个包装类Srting()、Number()、Boolean(),通过这三个包装类可以将基本数据类型的数据转换为对象。但是我们在实际应用中不会使用基本数据类型的对象,否则在做一些比较时可能会带来不可预料的结果。方法和属性只能添加给对象,不能添加给基本数据类型,当我们给一些基本数据类型的值调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法,调用完以后,再将其转换为基本数据类型

var num=new Number(3);  //Object类型
var str=new String("hello");
var bool=new Boolean(true);
num.hello="abc";  //向num中添加一个属性

字符串的方法:

在底层字符串是以字符数组的形式保存的

length属性,用来获取字符串的长度

charAt(),返回字符串中指定位置的字符,根据索引获取

charCodeAt(),返回字符串中指定位置字符的Unicode编码

String.fromCharCode(),根据字符编码获取字符

concat(),链接两个或多个字符串

indexOf(),检索字符串中是否含有指定内容,如果字符串中含有该内容,则会返回其第一次出现的索引;如果没有找到则返回-1;可以指定第二个参数,指定开始查找的位置

lastIndexOf(),该方法用法和indexOf()相同,但此方法从后往前查找

slice(),从字符串中截取指定内容,不会影响原字符串,而是将截取到的内容返回。第一个参数表示开始位置索引(包含),第二个参数表示结束位置的索引(不包含),如果省略第二个参数,则会截取后面所有的,也可以传递负数作为参数,负数则会从后面计算

substring(),截取字符串,与slice类似,不同的是此方法不能将负值作为参数,如果传递一个负值,则默认使用0,而且它会自动调整参数的位置,如果第二个参数小于第一个,则自动交换位置

substr(),截取字符串,第一个参数表示截取开始位置的索引,第二个参数表示截取的长度

split(),将字符串拆分为数组,需要一个字符串作为参数,将会根据该字符串去拆分数组,如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素

toLowerCase(),将字符串转为小写

toUpperCase(),将字符串转为大写

正则表达式:

创建正则表达式对象,第二个参数可以是i(忽略大小写)、g(全局匹配模式)

var 变量=new RegExp(“正则表达式”,“匹配模式”);  

test(),检查一个字符串是否符合正则表达式的规则,符合返回true,不符合返回false

var reg=new RegExp("a");  //检查一个字符串中是否含有a,区分大小写
var str="abc";
var result=reg.test(str);

使用字面量来创建正则表达式:var 变量=/正则表达式/匹配模式;

使用字面量方式创建更加简单,使用构造函数创建更加灵活

“|”表示或者

“[ ]”内的内容也是或的关系,[ab]==a|b,[a-z]任意小写字母,[A-z]任意字母,a[bde]c=abc|adc|aec

“^”表示除了

split(),可以根据正则表达式拆分字符串

var str="1a2b3c4d";
var result=str.split(/[A-z]/);
console.log(result);  //运行结果:1,2,3,4

search(),搜索字符串中是否含有指定内容,如果搜索到指定内容,返回第一次出现的索引,没有搜到返回-1,它可以接受正则表达式作为参数。它只能查找第一个指定内容,不支持全局匹配

var str="hello abc hello abc";
var result=str.search(/a[bde]c);
console.log(result);  //运行结果:6

match(),根据正则表达式,从一个字符串中将符合条件的内容提取出来封装到一个数组中返回,默认情况下只找到第一个符合要求的内容后就停止检索,设置全局匹配模式就会匹配到所有内容,可以为一个正则表达式设置多个匹配模式且顺序随意

var str="1A2b3c4d";
var result=str.match("/[A-z]/gi");
console.log(result);  //运行结果:A,b,c,d

replace(),将字符串中指定内容替换为新的内容,有两个参数,第一个是被替换内容,可接受正则表达式作为参数,第二个是新内容,默认只替换第一个

通过量词可以设置一个内容出现的次数,只对它前面的内容起作用,{n}表示正好出现n次((ab){3}=ababab),{m,n}表示出现m-n次,{m,}表示m次以上,+表示至少一个,*表示0个或多个,?表示0个或一个,^a表示以a开头,a$表示以a结尾,以^开头$结尾表示字符串必须严格遵守正则表达式(如果仅有其中一部分符合正则表达式则不匹配)

“.”表示任意字符,若要检查字符串中是否有“.”和“\”,需要用转义符\转义。使用构造函数时,由于它的参数是一个字符串,而\是字符串中的转义字符,如果要使用\则需要用\\代替

\w表示任意字母数字和“、”,\W表示除了任意字母数字和“、”,\d表示任意数字,\D表示除了数字,\s表示空格,\S表示除了空格,\b表示单词边界(检查是否是一个独立的单词,例如正则表达式:child,字符串:children不匹配,a child !匹配),\B表示除了单词边界

(作者观看的学习视频:B站尚硅谷)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴回答您的问题!关于 JavaScript 实现雪花飘飘的效果,我可以提供以下实训日记: 第一步:创建 HTML 页面 首先,我们需要创建一个 HTML 页面,其中包含一个用于显示雪花效果的区域。我们可以使用 `<canvas>` 标签来实现。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snowflakes Effect</title> <style> canvas { border: 1px solid #eee; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="snowflakes.js"></script> </body> </html> ``` 在上面的代码中,我们创建了一个 `<canvas>` 标签,并给它一个 ID 为 “canvas”。同时,我们在页面底部引入了一个名为 “snowflakes.js” 的 JavaScript 文件。 第二步:实现 JavaScript 动画 接下来,我们需要编写 JavaScript 代码来实现雪花飘飘的效果。我们可以使用 `requestAnimationFrame()` 方法来进行动画渲染。 ```javascript // 获取 canvas 元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 获取屏幕宽度和高度 const width = window.innerWidth; const height = window.innerHeight; // 设置 canvas 宽度和高度 canvas.width = width; canvas.height = height; // 定义雪花数量 const snowflakesCount = 100; // 定义雪花数组 let snowflakes = []; // 定义雪花类 class Snowflake { constructor() { // 随机生成雪花的位置和大小 this.x = Math.random() * width; this.y = Math.random() * height; this.radius = Math.random() * 4 + 1; // 随机生成雪花的速度和方向 this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 + 1; } // 绘制雪花 draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = "white"; ctx.fill(); } // 更新雪花位置 update() { this.x += this.speedX; this.y += this.speedY; // 如果雪花超出屏幕,则重新生成 if (this.y > height) { this.y = -this.radius; this.x = Math.random() * width; } } } // 创建雪花对象并添加到数组中 for (let i = 0; i < snowflakesCount; i++) { snowflakes.push(new Snowflake()); } // 绘制雪花并进行动画渲染 function drawSnowflakes() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < snowflakesCount; i++) { snowflakes[i].draw(); snowflakes[i].update(); } requestAnimationFrame(drawSnowflakes); } // 开始动画渲染 requestAnimationFrame(drawSnowflakes); ``` 在上面的代码中,我们首先获取了 `<canvas>` 元素和它的上下文对象,然后设置了 canvas 的宽度和高度,以适应屏幕大小。接着,我们定义了一个 `Snowflake` 类,用于生成雪花对象,包括雪花的位置、大小、速度和方向。然后,我们创建了一定数量的雪花对象,并添加到数组中。最后,我们使用 `requestAnimationFrame()` 方法进行动画渲染,每一帧都绘制雪花并更新它们的位置。 第三步:调试和优化 在实现过程中,我们还需要进行调试和优化。例如,我们可以调整雪花数量、大小和速度,以获得更好的效果。我们还可以添加其他效果,如背景色和阴影效果。 好了,以上就是实现 JavaScript 雪花飘飘效果的实训日记。希望对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值