String、Array、Math、Date常用方法

js 字符串

字符串检索

1、indexOf / lastIndexOf 查找不到则返回-1

var str="To be or not to be";
str.indexOf('To')	// 0
str.indexOf('a')	// a

2、search 可以使用正则表达式,只返回找到的第一个参数字符串的起始下标

console.log(str.search(/to/))	// 13
console.log(str.search(/a/ig))	// -1

3、match 返回所有查找的关键字内容的数组。

console.log(str.match(/to/ig)); //["To", "to"]
console.log(str.match("Hello")); //null

includes(), startsWith(), endsWith()

传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!';

s.startsWith('Hello') // true	从头部开始查找
s.startsWith('ello')	// false	不是以ello开头
s.endsWith('!') // true			从尾部开始查找
s.endsWidth('d')	// false	不是以d结尾
s.includes('o') // true

这三个方法都支持第二个参数,表示开始搜索的位置。

var s = 'Hello world!';

s.startsWith('world', 6) // true	
s.endsWith('Hello', 5) // true		
s.includes('Hello', 6) // false

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

字符串替换 replace

replace(str1, str2)将str1换成str2

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/, "W3School"))	// Visit W3School!

字符串重复 repeat

repeat(n)方法返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

字符串补全

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

const str = 'world'
console.log(str.padStart(4, 'x'))	// world
console.log(str.padStart(10, 'a'))	// aaaaaworld
console.log(str.padEnd(4, 'x'))	// world
console.log(str.padEnd(10, 'x'))	// worldxxxxx

字符串截取

  1. slice(start, end)

    var str = "0123456789";
    var arr = [0,1,2,3,4,5,6,7,8,9];
    // 1、从 start 位置开始取到 end 位置, end 位置取不到
    console.log(str.slice(1,6))		// "12345"
    console.log(arr.slice(1,6))		// [1,2,3,4,5]	数组也可使用
    console.log(str.slice(5, 1))	// ""
    // 2、若 start 为负数,它被视为strLength + start, 其中strLength是字符串的长度。若计算后仍为负,按 0 计算
    console.log(str.slice(-8, 6))	// "2345"
    console.log(str.slice(-18, 6))	// "012345"
    // 3、如果 end 省略,则提取到字符串的末尾。 如果为负,它被视为strLength + end, 其中strLength是字符串的长度。
    console.log(str.slice(2))	// "23456789"
    console.log(str.slice(2, -2))	// "234567"
    console.log(str.slice(2, -14))	// ""
    
  2. substring(start, end)

    var str = "0123456789";
    // 1、从 start 位置开始取到 end 位置, end 位置取不到
    console.log(str.substring(1,5))	//"1234"	
    // 2、如果 end 省略,则将 substring() 字符提取到字符串的末尾
    console.log(str.substring(1))	// "123456789"
    // 3、如果 start 大于 end,那么效果就好像这两个论点被交换了一样
    console.log(str.substring(3, 6))	// "345"
    console.log(str.substring(6, 3))	// "345"
    // 4、如果任一参数小于0或是NaN,它被视为为0。
    console.log(str.substring(-3, 6))	// "012345"
    console.log(str.substring(-6, -3))	// ""
    
  3. substr(start, length)

    var str = "0123456789";
    // 1、从start位置提取length长度的字符串,如果 length 为负数或者0,那么返回空字符串
    console.log(str.substr(1,5))//"12345"
    console.log(str.substr(1,0))//""
    // 2、若start为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)
    console.log(str.substr(-8, 6))	// "234567"
    console.log(str.substr(-18, 6))	// "012345"
    

字符串分割 split

split(",")将字符串转为数组,用,号分割开

let str = "1,2,3,4,5"
let arr = str.split(",")
console.log(arr)	// ["1", "2", "3", "4", "5"]

多维数组扁平化

var a=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = a.toString();
console.log(b)	// "1,3,4,5,6,0,1,5,9,2,5,1,5,5"
var c = b.split(',')
console.log(c)	// ["1", "3", "4", "5", "6", "0", "1", "5", "9", "2", "5", "1", "5", "5"]

字符串遍历

ES6为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

其他

toUpperCase()	//吧字符串转为大写
toLowerCase()	//把字符串转为小写

sub()	//把字符串显示为下标
sup()	//把字符串显示为上标

数组

join、toString

join("|")把数组的内容链接起来,中间用 |链接
toString()直接把数组转成字符串,保留元素之间的,

var arr = [1, 2, 3, 4]
var str1 = arr.join("|")	// 1|2|3|4
var str2 = arr.toString()	// 1,2,3,4

数组检索

1、indexOf、lastIndexOf

[10, 20, 30, 40].indexOf(20)	// 1
[10, 20, 30, 40].indexOf(50)	// -1
[10, 20, 30, 40].lastIndexOf(30)	// 2

2、find()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

[1,5, 10, 15].find(function(value, index, arr) {
  return x > 9;
}) // 10

3、findIndex()

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回 -1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y))	// 0

上面代码中,indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。

4、includes()

arr.includes( item ) 方法用来判断数组 arr 中是否包含某个元素 item 。包含的话返回true, 否则返回 false

[1, 2, 3, 4].includes(3)	// true
[1, 2, 3, 4].includes(5)	// false

数组压栈

var arr = [1,2,3,4]
// push 在数组尾部追加元素
arr.push(5)	//1 2 3 4 5
console.log(arr) 
// unshift 在数组头部追加元素
arr.unshift(0)	// 0 1 2 3 4 5
// pop 删除数组最后一位元素
arr.pop()	// 0 1 2 3 4
// shift 删除数组第一位元素
arr.shift()		// 1 2 3 4

数组排序 sort

sort()将数组里的项从小到大排序 会改变原数组

var arr = [10,-20,5,1,"b","a",26];
var arr2 = arr.sort(function (a,b) {
		return b-a	//降序,升序改为a-b
	});
console.log(arr + "\t" + arr2)		//26,10,5,1,-20,b,a		26,10,5,1,-20,b,a

数组反转 reverse

reverse() 反转数组项的顺序,会改变原数组

let arr = ['你', '好', '世', '界']
arr.reverse()
console.log(arr)	// ["界", "世", "好", "你"]

数组连接 concat

concat() 将参数添加到原数组中 返回新数组,原数组未被改变

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);             //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);               // [1, 3, 5, 7]

数组填充 fill

Array.fill(item, start, end):从start位置开始填充itemend结束,end填充不到

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
// 下标为5到8的位置填充为 a
a.fill('a', 5, 8)	// [1, 2, 3, 4, 5, 'a', 'a', 'a', 9, 0]

数组截取 slice

slice(start, end)返回从原数组中指定开始下标到结束下标之间的项组成的新数组 原数组未被修改

// 例1:获取仅包含最后一个元素的子数组
var arr=[1,2,3,4,5];
arr.slice(-1);//[5]

// 例2:获取不包含最后一个元素的子数组
var arr=[1,2,3,4,5];
arr.slice(0, -1);//[1,2,3,4]

// 例3:获取包含 从第二个元素开始的所有元素的子数组
var arr=[1,2,3,4,5];
arr.slice(1);//[2,3,4,5]

数组更新 splice

删除:splice(起始位置,要删除的箱数)
插入:splice(起始位置,要删除的项数,要插入的项)
替换:splice(起始位置,要删除的项数,要插入的任意数量的项)

	var arr = [1,3,5,7,9,11];
	var arrRemoved = arr.splice(0, 2);
	console.log(arr);                //[5, 7, 9, 11]
	console.log(arrRemoved);            //[1, 3]
	
	var arrRemoved2 = arr.splice(2,0,4,6);
	console.log(arr);                // [5, 7, 4, 6, 9, 11]
	console.log(arrRemoved2);           // []
	
	var arrRemoved3 = arr.splice(1,1,2,4);
	console.log(arr);                // [5, 2, 4, 4, 6, 9, 11]
	console.log(arrRemoved3);           //[7]
	
	var arr = [1,3,5,7,9,11];
	// 从索引为 1 的位置开始,删除2项(即删除3、5),然后在其后插入0, 2, 4
	var arrRemoved = arr.splice(1, 2, 0, 2, 4);
	console.log(arr);    // [1, 0, 2, 4, 7, 9, 11]

数组遍历

1、forEach() 对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。

var arr = [1, 2, 3, 4, 5];
	arr.forEach(function(x, index, a){
		console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

2、reduce( )

for循环,或者forEach方法可以搞定的东西,reduce()也可以

  • 语法
    arr.reduce(callback,[initialValue])
    /**
    callback(previousValue, currentValue, index, array)
        1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
        2、currentValue (数组中当前被处理的元素)
        3、index (当前元素在数组中的索引)
        4、array (调用 reduce 的数组)
    initialValue (作为第一次调用 callback 的第一个参数。)
    **/
    
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;	// return的值作为下次回调的 prev 值
})
console.log(arr, sum);

打印结果:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}10) //注意这里设置了初始值
console.log(arr, sum);

打印结果:
10 1 0
11 2 1
13 3 2
16 4 3
[1, 2, 3, 4] 10

如果没有提供initialValuereduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

3、 map( )
map()对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
	return item*item;
});
console.log(arr2);         //[1, 4, 9, 16, 25]

4、 filter( ) 数组过滤
filter()数组中的每一项运行给定函数,返回满足过滤条件组成的数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index, a) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2);         //[1, 4, 7, 8, 9, 10]

5、 every( )
every()判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x, index, a) {
return x < 10;
});
console.log(arr2);         //true
var arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3);         // false

6、 some( )
some()判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2);         //true
var arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3);         // false

Date日期

创建Date对象

new Date("January 12,2016 22:19:35");  //Thu Jan 12 2016 22:19:35 GMT+0800 (中国标准时间)
new Date("January 12,2016");           //Tue Jan 12 2016 00:00:00 GMT+0800 (中国标准时间)
new Date(2016,0,12,22,19,35)           //Tue Jan 12 2016 22:19:35 GMT+0800 (中国标准时间)
new Date(2016,0,12);                   //Tue Jan 12 2016 00:00:00 GMT+0800 (中国标准时间)
new Date(1452528000000);               //Tue Jan 12 2016 00:00:00 GMT+0800 (中国标准时间)
new Date();                            //Fri Jul 29 2016 11:15:00 GMT+0800 (中国标准时间)

Date方法

getDay() 	// 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getDate() 	// 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getMonth() 	// 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 	// 从 Date 对象以四位数字返回年份。

getHours() 		// 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 		// 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 		// 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 	// 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 			// 返回 1970 年 1 月 1 日至今的毫秒数。

parse() 	// 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。

setDate() 		// 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 		// 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 	// 设置 Date 对象中的年份(四位数字)。

setHours() 		// 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 	// 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 	// 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 	// 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 	// 以毫秒设置 Date 对象。
// 例:
var time = new Date()	// Thu Aug 12 2021 11:03:23 GMT+0800 (中国标准时间)
console.log(time.setDate(15))	// 1628996603917
console.log(time)	// Sun Aug 15 2021 11:03:23 GMT+0800 (中国标准时间)

toLocaleTimeString()	// 序列化
new Date().toLocaleTimeString()	// '下午4:28:19'

格式化日期

function formatDate(date) {
    var year = date.getFullYear()
    var month = (date.getMonth() + 1).toString()
    var day = date.getDate().toString()
    if( month.length === 1) month = '0' + month
    if ( day.length === 1 ) day = '0' + day
    return year + '-' + month + '-' + day
}
formatDate(new Date())	// "2021-08-12"

将yyyy-mm-dd格式的字符串转换为日期

function strToDate(dateStr){
	var dateStr = dateStr.replace(/-/g, "/");//现将yyyy-MM-dd类型转换为yyyy/MM/dd
	var dateTime = Date.parse(dateStr);//将日期字符串转换为表示日期的秒数
	//注意:Date.parse(dateStr)默认情况下只能转换:月/日/年 格式的字符串,但是经测试年/月/日格式的字符串也能被解析
	var data = new Date(dateTime);//将日期秒数转换为日期格式
	return data;
}
strToDate("2021-08-12")	// Thu Aug 12 2021 00:00:00 GMT+0800 (中国标准时间)

日期大小比较

在js中yyyy/MM/dd格式的日期是可以直接比较大小的,所以只需要将其他格式的日期转换为这种格式就可以直接比较

function compareDate(startDate,endDate){
	var d1 = new Date(startDate.replace(/\-/g, "\/"));  
	var d2 = new Date(endDate.replace(/\-/g, "\/"));  
	if(d1 >d2)  
 	{  
  		alert("开始时间不能大于结束时间!");  
  		return false;  
 	}
	return true;
}

计算日期差值

function fn(startDate, endDate) {
	var d1 = new Date(startDate)
	var d2 = new Date(endDate)
	return Math.abs((d1-d2)/1000/60/60/24)
}
console.log(fn("2021-09-16", "2021-08-12"))		// 35

js数值

parseInt('2.5$mn')	//解析为整数	2
parseFloat('2.55$mn')	//解析为浮点数 2.55
Number.MAX_VALUE	//表示在 JavaScript 里所能表示的最大数值
Number.MIN_VALUE	//表示在 JavaScript 中所能表示的最小的正值;
Number.isFinite(n)	//用来检测传入的参数是否是一个有穷数;
Number.isInteger(n)	//用来判断给定的参数是否为整数;
Number.isNan(n)		//用来判断传入的参数值是否是Nan;
//MATH对象
Math.abs(x) 	//返回数的绝对值
Math.sprt(x)	//返回x的平方根
Math.pow(x,y) 	//返回 x 的 y 次幂

Math.max(x,y) 	//返回 x 和 y 中的最高值。
Math.min(x,y) 	//返回 x 和 y 中的最低值。

Math.ceil(x) 	//对数进行上舍入。
Math.floor(x)	//对数进行下舍入。
Math.round(x) 	//把数四舍五入为最接近的整数。

Math.random() 	//返回 0 ~ 1 之间的随机数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值