【JS笔记】JS操作字符串、对象、数组、时间对象、数值操作、定时器

news2024/9/24 19:15:54

这篇文章,主要介绍JS操作字符串、对象、数组、时间对象、数值操作、定时器。

目录

一、字符串

1.1、定义字符串

1.2、字符串方法

1.3、模板字符串

1.4、JSON字符串

二、对象操作

2.1、定义对象

2.2、对象方法

三、数组操作

3.1、定义数组

3.2、数组方法

(1)添加和删除

(2)不改变原数组的方法

(3)改变原数组的方法

(4)排序和反转

3.3、数组去重的几种方式

(1)遍历判断

(2)转换成对象

(3)使用Set

四、时间操作

4.1、时间对象

4.2、时间相关的方法

4.3、时间操作常用代码

(1)日期格式化

五、数值操作

5.1、数值方法

六、定时器

6.1、一次性定时器

6.2、周期性定时器


一、字符串

1.1、定义字符串

JavaScript中,字符串是可以有两种方式定义,分别是:

  • 第一种方式:直接使用【单引号】或者【双引号】定义字符串,例如:【var s = 'hello world'】或者【var s = "hello world"】。
  • 第二种方式:使用String构造方法定义字符串,例如:【var s = new String('hello world');】。
  • 两种方式的区别:
    • 直接使用【单引号】、【双引号】、【String()】方式创建的字符串,那就是普通的一个字符串。
    • 使用【new String()】方式创建的字符串,这个数据类型就是一个字符串对象。

案例代码如下:

// 普通的字符串
var s1 = 'hello world1111'
console.log(s1);

// 普通的字符串
var s2 = "hello world2222"
console.log(s2)

// 普通的字符串
var s4 = String('hello world by String')
console.log(s4);

// 是一个字符串对象
var s3 = new String('hello world by new String')
console.log(s3);

运行结果如下所示:

1.2、字符串方法

  • 获取字符串长度:通过【length】属性可以获取到字符串的内容长度。
  • substring():【substring(start,end)】方法可以截取字符串。
  • slice():【slice(start,end)】方法也可以实现截取字符串。
  • trim():【trim()】方法可以清除字符串的开头和结尾的空格字符。
  • split():【split(sep)】根据指定的sep分隔符将字符串拆分成一个字符串数组(可以采用正则表达式)。
  • indexOf():从字符串开头位置,开始向后查找指定字符是否存在,存在则返回下标,否则返回-1。
  • lastIndexOf():从字符串结尾位置,开始向前查找指定字符是否存在,存在则返回下标,否则返回-1。
  • startsWith():判断字符串是否以某个字符或字符串开头。
  • endsWith():判断字符串是否以某个字符或字符串结尾。
  • repeat(num):将字符串重复num次。
  • replaceAll():将字符串中指定字符或字符串,替换成新的字符或字符串(可以采用正则表达式)。
  • search(reg):查找指定字符或者字符串是否存在,如果存在则返回下标,否则返回-1(采用正则表达式)。
  • match(reg):和search作用类似,只不过match返回的一个正则表达式对象(采用正则表达式)。
  • concat():将多个字符串拼接成一个新的字符串。
// 字符串方法
var str = 'hello,world'
console.log(str);
console.log('字符串长度:', str.length);
console.log('substring截取字符串:', str.substring(3));
console.log('slice截取字符串:', str.slice(3, 8));
console.log('trim清除空格:', str.trim());
console.log('split拆分字符串:', str.split(','));
console.log('indexOf:', str.indexOf('llo'));
console.log('startsWith:', str.startsWith('ld'));
console.log('startsWith:', str.startsWith('hello'));
console.log('endsWith:', str.endsWith('ld'));
console.log('repeat:', str.repeat(3));
console.log('replaceAll:', str.replaceAll('hello', 'hello 2022'));
console.log('search:', str.search(/hello/i));
console.log('match:', str.match(/l/i));
console.log('concat:', str.concat('aaaa', 'bbbbb', 'cccc'));

执行结果如下所示:

1.3、模板字符串

ES6语法中,新增了模板字符串的功能,可以在字符串中使用【${}】书写JS表达式代码。模板字符串的语法格式:

// 模板字符串
var name = "csdn"
var str = `这是字符串,名称是:${name}`
console.log(str);

1.4、JSON字符串

JavaScript中提供了JSON对象,可以调用【parse()】方法和【stringify()】方法,将对象和字符串之间相互转换。

  • JSON.parse(json)方法:将json字符串转换成对象类型。
  • JSON.stringify(obj)方法:将对象转换成json字符串。

二、对象操作

2.1、定义对象

JavaScript中也有两种定义对象的方式,分别是:

  • 第一种方式:通过【{}】花括号字面量的方式定义对象。
  • 第二种方式:通过【new Object()】定义对象。

JS里面对象都是采用【{}】形式显示的,里面通过【key:value】的格式表示对象的属性名称和属性值,其中对象的属性还可以是对象,也就是说,JS中的对象是一个递归的结构。

// 创建对象
var obj = {
    name: 'csdn',
    age: 20,
    other: {
        f1: '111',
        f2: '222'
    }
};
console.log(obj);

var obj2 = new Object();
obj2.name = 'csdn';
obj2.age = 20;
console.log(obj2);

结果如下所示:

2.2、对象方法

TODO:待补充。。。

三、数组操作

3.1、定义数组

JS中数组可以通过两种方式定义,分别是:

// 第一种,推荐
var arr = []

// 第二种
var arr = new Array()

3.2、数组方法

(1)添加和删除

  • 添加元素:push()方法,在数组末尾追加元素,返回数组长度。
  • 添加元素:unshift()方法,在数组开头添加元素,返回数组长度。
  • 删除元素:pop()方法,在数组末尾删除元素,返回被删除的元素。
  • 删除元素:shift()方法,在数组开头删除元素,返回被删除的元素。
  • splice()方法:这个方法既可以添加元素,也可以删除元素,不常用。

(2)不改变原数组的方法

  • concat(x,y,z...)方法:拼接数组元素,返回一个新的数组。
  • join(sep)方法:将数组按照指定的分隔符,转换成字符串。
  • slice(开始下标,结束下标)方法:截取数组元素,返回截取的子数组。
  • indexOf()方法:查找元素,找不到返回-1。
  • forEach()方法:遍历数组,接收一个回调函数。
  • map()方法:映射数组元素,将数组中元素映射成另外一个元素,接收一个回调函数。
  • filter()方法:过滤数组元素,接收一个回调函数。
  • every()方法:判断数组中每一个元素是否都满足条件,都满足条件则返回true。
  • some()方法:数组中只要有满足条件的,则返回true。
  • find()方法:返回数组中,第一个满足条件的数组元素。
  • reduce(prev,item)方法:规约,叠加;prev表示上一次的结果,item表示当前数组元素。
var arr = [1,2,3,4,5]

/**
 * 遍历数组,三个参数
 * 第一个参数:当前遍历的数组元素
 * 第二个参数:数组下标
 * 第三个参数:原数组
 */
arr.forEach(function (item, index, arr) {
    console.log(item, index, arr)
})

/**
 * 数组映射
 */
var newArr = arr.map(function (item) {
    // 每一项加100
    return item + 100;
})
console.log(newArr);

/**
 * 过滤数组
 */
var newArr2 = arr.filter(function (item) {
    // 过滤大于3的元素
    return item > 3;
})
console.log(newArr2);

/**
 * 是否都大于0
 */
var flag = arr.every(function (item) {
    return item > 0;
})
console.log(flag);

flag = arr.some(function (item) {
    return item > 3;
})
console.log(flag);

var item = arr.find(function (item) {
    return item > 3;
})
console.log(item);

/**
 * 叠加、累加
 */
var ans = arr.reduce(function (prev, item) {
    return prev + item;
})
console.log(ans);

(3)改变原数组的方法

  • push()、unshift()、pop()、shift()、splice()方法都是会改变原数组。
  • reverse()方法也是改变原数组。
  • sort()方法也是改变原数组。

(4)排序和反转

  • 反转数组:reverse()方法,将数组反转,会改变原数组,返回值是反转之后的数组。
  • 排序数组:sort()方法,可以传递一个回调函数,实现自定义排序。
var arr = [11,3,14,7,5]
console.log(arr)
// 反转数组
// console.log(arr.reverse());

// 排序数组
arr.sort(function (a, b) {
    return a - b;
})
console.log(arr)

3.3、数组去重的几种方式

JS中数组去重有下面几种方式:

(1)遍历判断

var arr = [1, 3, 2, 4, 1, 4, 2, 3, 5]

/**
 * 数组去重
 */
function distinct(arr) {
    let len = arr.length;
    let ans = []
    for (let i = 0; i < len; i++) {
        if (ans.indexOf(arr[i]) === -1) {
            ans.push(arr[i])
        }
    }
    return ans;
}

console.log(distinct(arr));

(2)转换成对象

var arr = [1, 3, 2, 4, 1, 4, 2, 3, 5]

/**
 * 数组去重
 */
function distinct(arr) {
    let len = arr.length;
    let obj = {}
    for (let i = 0; i < len; i++) {
        // 利用对象去重,相同属性会被覆盖
        obj[arr[i]] = "value";
    }
    let ans = []
    for (const key in obj) {
        // 这里减0是为了转换成数值类型
        ans.push(key - 0);
    }
    return ans;
}

console.log(distinct(arr));

(3)使用Set

ES6语法中,提供了一个Set对象,这个对象是不会存在重复元素的,可以使用这个Set对象去重。

var arr = [1, 3, 2, 4, 1, 4, 2, 3, 5]

/**
 * 数组去重
 */
function distinct(arr) {
    // 将数组变成Set类型,会自动去重
    let set = new Set(arr);
    // 将Set类型转换成数组
    return Array.from(set);
}

console.log(distinct(arr));

四、时间操作

4.1、时间对象

JavaScript中使用Date表示时间对象,创建时间对象:【new Date()】,表示的是当前时间。

4.2、时间相关的方法

  • date.getFullYear()方法:获取年份yyyy。
  • date.getMonth()方法:获取月份,月份从0开始编号,范围是:0到11。
  • date.getDate()方法:获取日。
  • date.getDay()方法:获取星期几,周日是0,周一到周六是1到6。
  • date.getHours()方法:获取小时。
  • date.getMinutes()方法:获取分钟。
  • date.getSeconds()方法:获取秒数。
  • date.getMilliseconds()方法:获取毫秒。
  • date.getTime()方法:获取时间戳。

4.3、时间操作常用代码

(1)日期格式化

/**
 * 日期格式化函数<br/>
 * 调用格式:需要使用日期对象调用
 * <p> new Date().Format("yyyy/MM/dd HH:mm:ss"); </p>
 * @param fmt 日期格式
 * @returns {*} 返回格式化后的日期
 * @constructor
 */
Date.prototype.Format = function (fmt) {
    var object = {
        "M+": this.getMonth() + 1, // 月
        "d+": this.getDate(), // 日
        "H+": this.getHours(), // 时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
    };
    // 正则表达式
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var pattern in object) {
        if (new RegExp("(" + pattern + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (object[pattern]) : (("00" + object[pattern]).substr(("" + object[pattern]).length)));
        }
    }
    return fmt;
}

TODO:更多代码待补充。。。

五、数值操作

5.1、数值方法

  • num.toFixed(n)方法:保留n为小数点。
  • parseInt(str)方法:字符串转换成整数。
  • parseFloat(str)方法:字符串转换成浮点数。
  • Math.random()方法:返回一个0到1之间的随机数。
  • Math.round(num)方法:四舍五入取整,例如:3.6结果就是4。
  • Math.ceil(num)方法:向上取整。
  • Math.floor(num)方法:向下取整。
  • Math.abs()方法:绝对值。
  • Math.sqrt()方法:取平方根,开根号。
  • Math.pow()方法:计算幂次方。
  • Math.max()方法:从多个元素中取出最大值。
  • Math.min()方法:从多个元素中取出最小值。

六、定时器

6.1、一次性定时器

JS中提供了【setTimeout()】方法,可以用于实现一次性定时器的功能。语法格式:

// 注册定时器
var timer = setTimeout(function () {
    // 清除定时器
    clearTimeout(timer)
    console.log("2秒之后,执行方法....")
}, 2000);

6.2、周期性定时器

JS中提供了【setInterval()】方法,可以实现周期性的定时器,按照指定时间间隔重复执行,语法格式:

// 注册定时器
var timer = setInterval(function () {
    // 清除定时器,如果不想继续,可以清除定时器
    // clearInterval(timer)
    console.log("每隔500毫秒之后,执行方法....")
}, 500);

到此,JS中字符串、对象、数组、时间、数值、定时器等内容介绍完啦。

综上,这篇文章结束了,主要介绍JS操作字符串、对象、数组、时间对象、数值操作、定时器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/488244.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Docker_windows】安装Docker桌面版

现在如果问什么行业最火&#xff0c;很多人第一反应肯定就是IT。的确&#xff0c;这些年随着互联网的不断发展&#xff0c;IT热门众所周知。那么就一起来说说&#xff0c;IT行业里&#xff0c;哪些技术更热门。 What&#xff1f; Docker Desktop&#xff1f; Docker Desktop是…

SpringBoot快速回顾(分别使用注解和xml方式去声明Bean,获取Bean)

SpringBoot快速回顾&#xff08;configuration注解&#xff09; 1. 使用xml声明Bean1.1 创建测试实体类1.2 创建xml文件&#xff08;目的&#xff1a;将实体类声明成Bean&#xff09;1.3 测试 2. 使用注解configuration声明Bean2.1 已经声明过实体类Student2.2 定义配置类2.3 测…

Lim测试平台变量使用规则介绍

一、Lim测试平台简介 Lim测试平台是一款轻量级的接口测试平台&#xff0c;也是为数不多使用python作为后端接口建设的语言。 正如它的名字我们希望在开展接口测试时能够“四两拨千斤”&#xff01;让用户操作更少但开展建设的效率更高。因此我们做了许多交互细节上的优化和创新…

Elasticsearch:人类语言到 ElasticSearch 查询 DSL

Elasticsearch 为开发者提供了强大的搜索功能。Elasticsearch 使用 DSL 来进行查询。对于很多从关系数据库过来的人&#xff0c;这个很显然不很适应。虽然我们可以使用 SQL 来进行查询&#xff0c;但是我们必须通过一些命令来进行转换。我们可以通过阅读文章&#xff1a; Elast…

SpringBoot统一功能处理(统⼀⽤户登录权限验证、统⼀异常处理、统⼀数据格式封装)

统⼀⽤户登录权限验证 1、最初的用户登录效验:在每个方法里面获取session和 session 中的用户信息&#xff0c;如果存在用户&#xff0c;那么就认为登录成功了&#xff0c;否则就登录失败了。 2、第二版用户登录效验:提供了统一的方法&#xff0c;在每个需要验证的方法中调用…

神经网络模型压缩技术—剪枝

目录 1.模型压缩定义 2.模型压缩必要性及可行性 3.模型压缩分类 3.1 主流分类 3.2 前端和后端 4.剪枝 4.1 剪枝定义 4.2 剪枝分类 4.2.1 基于粒度 4.2.2 基于是否结构化 4.2.3 基于目标 5. 结构化剪枝和非结构化剪枝 5.1 非结构化剪枝&#xff08;移除单个权重或神…

【Python习题集1】Python 语言基础知识

python习题 一、实验内容二、实验总结 一、实验内容 1、运用输入输出函数编写程序&#xff0c;将华氏温度转换成摄氏温度。换算公式&#xff1a;C(F-32)*5/9,其中C为摄氏温度&#xff0c;F为华氏温度。 &#xff08;1&#xff09;源代码&#xff1a; ffloat(input(输入华氏温…

swift 技术 监听电话中断

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

做好FP独立站有6大要点,注意!

跨境电商做FP独立站已经见怪不怪了&#xff0c;但要注意哪些要点才能做好一个成功的FP独立站呢&#xff0c;今天就跟大家聊一聊。 做好FP独立站有6个要点 1.选品 独立站运营选择产品的方向往往是抓住非主流、新奇等特征。不推荐在成熟平台上销售受欢迎的普通商品&#xff0c;…

Elasticsearch详解

文章目录 概览使用与ES交互索引创建索引查询索引删除文档创建修改文档局部修改文档查询文档删除全查询 整合SpringBootpom依赖application.ymlElasticsearchAutoConfigurationElasticsearchPropertiesElasticsearchConstantPersonSearchPageHelperPersonServiceBaseElasticsear…

zabbix 使用自定义命令做监控项

环境&#xff1a;Linux zabbix6 问题&#xff1a;某个监控项的值为linux终端的shell命令输出&#xff0c;需要做一个zabbix自定义监控项 解决办法&#xff1a;参考官方文档使用userparameters方法 背景&#xff1a;我需要监控Linux某个文件夹的文件数量&#xff0c;并设置阈值…

详解c++---stack和dequeue的介绍

目录标题 stack介绍stack的定义stack的数据插入stack中数据的个数stack数据删除stack中数据的查看判断stack对象是否为空stack对象的数据交换queue的介绍queue的定义queue的数据插入frontbackqueue的元素个数queue中元素的删除emptyqueue的数据交换 stack介绍 首先stack是一个…

windows kafka mq 安装和使用介绍 及踩坑记录 及集群架构kafka实现架构 各自运行机制 一次性看明白

目录 介绍 安装集群 简单介绍按照步骤 zookeeper 安装 kafka安装 基础配置3个节点 在配置三个启动bat 重点 常见问题 内存不够配置文件中增加如下 java.io.IOException: Map failed 基础使用 创建主题 查看创建 生产者 消费者 应用场景 kafka一些原理和特点 …

让自动化测试秒杀繁琐操作?试试PO模式设计框架

目录&#xff1a;导读 引言 po模式 优势&#xff1a; 目录解释&#xff1a; 页面对象设计模式&#xff1a; base基础层&#xff1a; page对象层&#xff1a; test:测试层 data数据层&#xff1a; common层&#xff1a; untils: config层&#xff1a; run层&#xff1a;…

救生衣、划船背心、救生圈、U 形救生圈和投掷式浮垫等个人漂浮设备 (PFD)UL报告标准要求

个人漂浮设备 (PFD) 个人漂浮设备 (PFD) 是帮助人们在水中保持漂浮状态的装备。个人漂浮设备是一个范围较大的商品分类&#xff0c;其中包括救生衣、划船背心、救生圈、U 形救生圈和投掷式浮垫 救生衣 救生衣是一种在使用者正确穿戴时可为其提供支持的服装或设备&#xff0c;由…

Redis【性能 01】Redis 5.x 6.x 7.x 共5个不同版本延迟及性能测试对比分析(单机版默认配置)

延迟及性能测试比对分析过程 1.环境说明2.测试结果Version 5.0.3【待优化版本】Version 5.0.7【云服务器使用的版本】Version 5.0.14【5.x最终版】Version 6.2.12【6.x最终版】Version 7.2-rc1【当前最新的发布候选版】 3.汇总分析3.1 延迟测试结果汇总3.1 性能测试结果汇总 4.…

今天 国际青年节 “International Youth Day “

《劝学》孟郊 击石乃有火&#xff0c;不击元无烟。 人学始知道&#xff0c;不学非自然。 万事须己运&#xff0c;他得非我贤。 青春须早为&#xff0c;岂能长少年。 Strike stones to make it burn; No smoke unless you strike. Youre crude if you dont learn; And you…

Syncthing文件同步 - 免费搭建开源的文件自动同步服务器并公网远程访问【私人云盘】

文章目录 1. 前言2. Syncthing网站搭建2.1 Syncthing下载和安装2.2 Syncthing网页测试2.3 注册安装cpolar内网穿透 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 在数据爆炸的当下&#xff0c;每天都会产生海量的数据&#xff0c;这些…

SQL注入攻防入门详解

毕业开始从事winform到今年转到 web &#xff0c;在码农届已经足足混了快接近3年了&#xff0c;但是对安全方面的知识依旧薄弱&#xff0c;事实上是没机会接触相关开发……必须的各种借口。这几天把sql注入的相关知识整理了下&#xff0c;希望大家多多提意见。 &#xff08;对于…

ACIS的拓扑基础数据结构

在ACIS中,拓扑基础数据结构按照从低维到高维的顺序包括: Vertex(顶点):表示空间中的一个点,用于定义点的位置和属性。Edge(边):由两个顶点连接而成,具有方向属性,用于定义直线段和圆弧。Coedge(共面边):表示面的边缘,也就是一条边可以被多个面共享。Coedge有两个…