js-API-总结

星空与猫

已于 2023-04-25 18:53:38 修改

阅读量267

点赞数

分类专栏： js 文章标签： js

于 2021-03-29 18:08:12 首次发布

本文链接：https://blog.csdn.net/qq_43388107/article/details/115307549

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

字符串

1、charAt()（返回指定位置的字符）

"qwerty".charAt(2)	//"e"

2、substr()（截取字符串,以指定下标开始，截取n个字符，包含指定位置下标的字符）

var str = 'hello';
str.substr(1,3)		//"ell"
str.substr(-2)		//"lo"
str.substr(-4,1)		//"e"

3、indexOf()（查询指定字符的位置,返回查找到的第一个字符的下标位置,查不到返回-1）
lastIndexOf()（反之）

var str = 'hello';
a.indexOf('l')		//2
a.indexOf('a')		//-1

4、trim()（去掉字符串两边的空格）

5、str.toLowerCase()（转小写）

6、str.toUpperCase()（转大写）

7、replace()（替换）

8、split()（以指定字符将字符串才分为数组）

9、padStart() / padEnd()（ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全）

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

注意：1、如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

注意2、如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'

注意3、如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

Number

1、Number.isInteger()（是否为整数）

Number.isInteger(1.1)	//false
Number.isInteger(1)		//true
Number.isInteger(NaN)	//false

注意：
Number.isInteger(1.0)	//	true

2、isNaN()（是否为NaN）

isNaN(1)		//false
isNaN(NaN)		//true

3、toExponential()（以指数表示法返回该数值字符串表示形式）

11.123456.toExponential()	//"1.1123456e+1"

4、toFixed()（保留几位小数，并四舍五入）

12345.6789.toFixed(1)	//"12345.7"
注意：
12345.6789.toFixed(6); 	//"12345.678900"(用0填充)

5、toLocaleString()（千分符）

var  num = 123456789；
num.toLocaleString()	//"123,456,789"
注意：
123456789.toLocaleString()	报错Uncaught SyntaxError: Invalid or unexpected token
(123456789).toLocaleString()	//"123,456,789"

6、toString()（返回指定 Number 对象的字符串表示形式）

(17).toString()	//'17'

Math

1、Math.min()（一组数值中的最小值）

Math.min(1,2,3,4,3,2,1)	//1

2、Math.max()（一组数值中的最大值）

Math.max(1,2,3,4,3,2,1)	//4

3、Math.ceil()（向上取整）

Math.ceil(25.4) 	//26 (只要有小数就向上进一)

4、Math.floor()（向下取整）

Math.floor(25.9)	//25(舍弃小数)

5、Math.round()（随机数）

得到两个数之间的随机数
Math.random() * (max - min) + min; 

得到一个两个数之间的随机整数
Math.floor(Math.random() * (max - min)) + min;	//不含最大值，含最小值

得到一个两数之间的随机整数，包括两个数在内
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值

随机排序
var arr2=[1,2,3,4,5,6,7,8,9];
arr2.sort(function(a,b){
	return Math.random()-0.5;
});

6、不常用方法

Math.abs(num)		//返回num的绝对值

Math.exp(num)		//返回Math.E的num次幂

Math.log(num)		//返回num的自然对数

Math.pow(num,power)		//返回num的power次幂

Math.sqrt(num)		//返回num的平方根

Math.acos(x)		//返回x的反余弦值

Math.asin(x)		//返回x的反正弦值
	
Math.atan(x)		//返回x的反正切值

Math.atan2(y,x)		//返回y/x的反正切值

Math.cos(x)		//返回x的余弦值

Math.sin(x)		//返回x的正弦值

Math.tan(x)		//返回x的正切值

对象

1、Object.assign()（合并对象，浅拷贝,改变第一个参数的对象）

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);
console.log(returnedTarget)	//{a: 1, b: 4, c: 5}
console.log(target)	//{a: 1, b: 4, c: 5}
console.log(source)		// { b: 4, c: 5 };

建议：
const returnedTarget = Object.assign({},target, source);	//不会改变原有对象

2、Object.defineProperty()（监听数据变化，vue2.0双向绑定原理）

var o = {};
var s = "";
Object.defineProperty(o, 'a', {
    get() {
        return s;
    },
    set(newVal) {
        s = newVal
    },
})
o.a = 3;
console.log(s)	//3

3、Object.entries()（返回一个二维数组）

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

4、Object.fromEntries()（将二维数组转换为对象）

var obj = bject.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
closole.log(obj)	//{foo: "bar", baz: 42}

5、Object.hasOwnProperty()（判断指定对象上面是否有指定的属性）

var o = {a:1};
o.hasOwnProperty('a')	//true
o.hasOwnProperty('b')	//false

6、Object.keys()（以数组的形式返回对象中的key）

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

7、Object.values()（以数组的形式返回对象中的所有value）

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

Array

1、concat()（合并数组，不改变原数组）

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3)		//["a", "b", "c", "d", "e", "f"]
console.log(array1)	// ["a", "b", "c"]

2、flat()（按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回）

var arr = [0,1,[2,3,[4,5,[6,7]]]]

console.log(arr.flat(Infinity));	// [0, 1, 2, 3, 4, 5, 6, 7]（Infinity会展开任意深度的数组）

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));		//[0, 1, 2, [3, 4]]

注意：
flat() 方法会移除数组中的空项:

var arr4 = [1, 2, , 4, 5];

arr4.flat();

// [1, 2, 4, 5]

3、Array.from()（从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例）

console.log(Array.from('foo'));		//["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));		//[2, 4, 6]

4、includes() （是否包含指定元素）

5、indexOf()（返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1）

6、join()（将数组以指定分隔符分隔合并为字符串）

7、pop()（方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度）

8、shift() （从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度）

9、push()（将一个或多个元素添加到数组的末尾，并返回该数组的新长度）

10、unshift()（将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)）

11、isArray()（用于确定传递的值是否是一个 Array）

Array.isArray([1, 2, 3]);	//true

12、slice()（返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（前包后不包）。原始数组不会被改变）

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));		//["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));		//["camel", "duck"]

console.log(animals.slice(1, 5));		//"bison", "camel", "duck", "elephant"]

13、sort()（排序）

var arr3 = [30,10,111,35,1899,50,45];
arr3.sort((a, b) => a - b)
console.log(arr3);//输出  [10, 30, 35, 45, 50, 111, 1899]

var arr4 = [30,10,111,35,1899,50,45];
arr4.sort((a, b) => b - a)
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]

14、splice()（通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。）

*从第 2 位开始删除 0 个元素，插入“drum”*
var myFish = ["angel", "clown", "mandarin", "sturgeon"];

var removed = myFish.splice(2, 0, "drum");	

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]

// 被删除的元素: [], 没有元素被删除



*从第 2 位开始删除 0 个元素，插入“drum” 和 "guitar*

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

var removed = myFish.splice(2, 0, 'drum', 'guitar');		

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]

// 被删除的元素: [], 没有元素被删除



*从第 3 位开始删除 1 个元素*

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];

var removed = myFish.splice(3, 1);		

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]

// 被删除的元素: ["mandarin"]



*从第 2 位开始删除 1 个元素，插入“trumpet”*

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];

var removed = myFish.splice(2, 1, "trumpet");	

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]

// 被删除的元素: ["drum"]


*从第 0 位开始删除 2 个元素，插入"parrot"、"anemone"和"blue"*

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];

var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');	

// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]

// 被删除的元素: ["angel", "clown"]


*从第 2 位开始删除 2 个元素*

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];

var removed = myFish.splice(myFish.length - 3, 2);

// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]

// 被删除的元素: ["blue", "trumpet"]



*从倒数第 2 位开始删除 1 个元素*

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

var removed = myFish.splice(-2, 1);

// 运算后的 myFish: ["angel", "clown", "sturgeon"]

// 被删除的元素: ["mandarin"]


*从第 2 位开始删除所有元素*

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]

// 被删除的元素: ["mandarin", "sturgeon"]

Date

var date = new Date();
console.log(date);  //Tue Jun 16 2020 14:01:22 GMT+0800 (中国标准时间)

var date = +new Date();
console.log(date);	//1592287386929(毫秒数)

-getTime()

返回 1970 年 1 月 1 日至今的毫秒数。

var date = new Date();
console.log(date.getTime());	//1592287386929(毫秒数)

-getFullYear()

从 Date 对象以四位数字返回年份。

var date = new Date();
console.log(date.getFullYear());	//结果：2020

-getMonth()

从 Date 对象返回月份 (0 ~ 11)。

var date = new Date();
console.log(date.getMonth() + 1);	//6

-getDate()

从 Date 对象返回一个月中的某一天 (1 ~ 31)。

var date = new Date();
console.log(date.getDate());	//16

-getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)。

var date = new Date();
console.log(date.getDay());	//2

-getHours()

返回 Date 对象的小时 (0 ~ 23)。

var date = new Date();
console.log(date.getHours());	//14

-getMinutes()

返回 Date 对象的分钟 (0 ~ 59)

var date = new Date();
console.log(date.getMinutes());	/10

-getSeconds()

返回 Date 对象的秒数 (0 ~ 59)。

var date = new Date();
console.log(date.getSeconds());	//10

-toJSON()

以 JSON 数据格式返回日期字符串

var date = new Date();
console.log(date.toJSON());	//2020-06-16T06:11:18.937Z

-toString()

把 Date 对象转换为字符串

var date = new Date();
console.log(date.toString());	//Tue Jun 16 2020 14:11:46 GMT+0800 (中国标准时间)

-toLocaleTimeString()
显示格式根据本地电脑，格式化显示

let a = new Date()
console.log(a.toLocaleTimeString())	//"下午3:22:54"

时间戳转换为日期

function add0(m){return m<10?'0'+m:m }
function format(shijianchuo){
	//shijianchuo是整数，否则要parseInt转换
	var time = new Date(shijianchuo);
	var y = time.getFullYear();
	var m = time.getMonth()+1;
	var d = time.getDate();
	var h = time.getHours();
	var mm = time.getMinutes();
	var s = time.getSeconds();
	return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}

function format(shijianchuo){
	//shijianchuo是整数，否则要parseInt转换
	var time = new Date(shijianchuo);
	var time = new Date();
    var y = time.getFullYear();
    var m = (time.getMonth() + 1).toString().padStart(2, 0);
    var d = time.getDate().toString().padStart(2, 0);
    var h = time.getHours().toString().padStart(2, 0);
    var mm = time.getMinutes().toString().padStart(2, 0);
    var s = time.getSeconds().toString().padStart(2, 0);
    return y + "-" + m + "-" + d + " " + h + "-" + mm + "-" + s;
}

/**
 * @description 获取 日期 || 时间  或  传入时间戳 获取转换后得 时间格式
 * @param {String} type date 2022-11-11 || time 12:13:14 || dateTime 2022-11-11 12:13:14
 * @param {String} timer 时间戳
 */
export function getTimer(type, timer) {
    if (!['date', 'time', 'dateTime'].includes(type)) new Error('getTimer type error');
    const time = timer ? new Date(timer) : new Date();
    var y = time.getFullYear();
    var m = (time.getMonth() + 1).toString().padStart(2, 0);
    var d = time.getDate().toString().padStart(2, 0);
    var h = time.getHours().toString().padStart(2, 0);
    var mm = time.getMinutes().toString().padStart(2, 0);
    var s = time.getSeconds().toString().padStart(2, 0);

    const obj = {
        'date': y + "-" + m + "-" + d,
        'time': h + "-" + mm + "-" + s,
        'dateTime': y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s
    }

    return obj[type]
}

getBoundingClientRect() 获取元素距离上下左右的距离
原文：传送门

requestAnimationFrame() 介绍、requestAnimationFrame 与setTimeout、setInterval区别
原文：传送门

星空与猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-API-总结

数字字符串1、Number.isInteger()（是否为整数）Number.isInteger(1.1) //falseNumber.isInteger(1) //trueNumber.isInteger(NaN) //false注意：Number.isInteger(1.0) // true2、isNaN()（是否为NaN）isNaN(1) //falseisNaN(NaN) //true3、toExponential()（以指数表示法返回该数值字符串表示形式）1
复制链接

扫一扫