这篇文章,主要介绍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操作字符串、对象、数组、时间对象、数值操作、定时器。