js常见的属性和方法总结

少吃一口就会少吃一口

已于 2023-02-27 17:35:10 修改

阅读量1.8k

点赞数

文章标签： javascript

于 2021-09-28 15:10:42 首次发布

本文链接：https://blog.csdn.net/qq_42349528/article/details/120391533

版权

1.JS全局属性和方法

1.1全局属性

1.infinity 代表真正的无穷大的数值
2.NaN 指示某个值是不是数字值
3.undefined 指示未定的值

1.2全局方法

1.decodeURI() 解码某个编码的URI
2.decodeURIComponent() 解码一个编码的URI组件
3.encodeURI() 把字符串编码为URI
4.encodeURIComponent() 把字符串编码为URI组件
5.escape() 对字符串进行编码
6.eval() 计算js字符串，并把它作为脚本代码来执行
7.isFinite()检查某个值是否为又穷大的数
8.isNaN() 检查某个值是否为数字
9.Number() 把对象的值转换为数字
10.parseFloat() 解析一个字符串并返回一个浮点数
11.parseInt() 解析一个字符串并返回一个整数
12.String() 把对象的值转换为字符串
13.unescape() 对由 escape()编码的字符串进行解码

2.布尔对象

Boolean() 转型函数将不同数据类型转换为布尔值

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	非空字符串	“”(空字符串）
Number	非零数值(包括无穷的)	0，NaN
Object	任意对象	null
Undefined	N/A（不存在）	undefined

3.Number对象

3.1Number的属性

1.Number.MAX_VALUE 最大值
2.Number.MIN_VALUE最小值
3.Number.NaN 非数字
4.Number.NEGATIVE_INFINITY 负无穷，在溢出时返回
5.Number.POSITIVE_INFINITY正无穷，在溢出时返回
6.Number.ESPSILON表示1和比最接近1且大于1的最小的差别
7.Number.MIN_SAFE_INTEGER 最小安全整数
8.Number.MAX_SAFE_INTEGER最大安全整数

3.2Number的方法

1.Number() 把对象的值转换为数字，如果对象的值无法转换为数字，那么Number()函数返回NaN。

//语法 Number(object)
let num1 = Number("hello world"); //NaN
let num1 = Number(""); //0
let num1 = Number("0011"); //11
let num1 = Number("true"); //1

2.parsetInt() 可以解析一个字符串，并返回一个整数

//语法 parseInt(string,radix)
//第二个参数是进制数
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            document.write(parseInt("10") + "<br>");	//10
            document.write(parseInt("10.33") + "<br>");	//10
            document.write(parseInt("34 45 66") + "<br>");	//34
            document.write(parseInt(" 60 ") + "<br>");	//60
            document.write(parseInt("40 years") + "<br>");	//40
            document.write(parseInt("He was 40") + "<br>");  //NaN  
            document.write("<br>");
            document.write(parseInt("10",10)+ "<br>"); //10
            document.write(parseInt("010")+ "<br>");  //10
            document.write(parseInt("10",8)+ "<br>");  //8
            document.write(parseInt("0x10")+ "<br>");  //16
            document.write(parseInt("10",16)+ "<br>");	//16
        </script>   
    </body>
</html>

3.parsefloat() 可以解析一个字符串，并返回一个浮点数

//语法 parseFloat(string)
let num1 = parseFloat("1234blue"); //1234
let num2 = parseFloat("0xA"); //0
let num3 = parseFloat("22.5");  //22.5
let num4 = parseFloat("22.34.5");  //22.34
let num5 = parseFloat("0908.5"); //908.5
let num6 = parseFloat("3.125e7"); //31250000

4.isNaN() 判断传递的参数是否是非数值

//语法  isNaN(value)
console.log(isNaN(123));  //false
console.log(isNaN(-1.23));  //false
console.log(isNaN(5-2));  //false
console.log(isNaN(0));  //false
console.log(isNaN("hello"));  //false
console.log(isNaN("2015/12/12"));  //false

5.isInteger() 判断传递的参数是否为整数

6.isSafeInteger()判断传递的参数是否为安全整数

7.isFinite()判断传递的参数是否为有限数字

4.字符串对象

4.1字符串的属性

1.length
2.prototype
3.constructor

4.2字符串的方法

1.charAt() 返回指定位置的字符，第一个字符位置为0，第二个字符位置为1，以此类推。

//语法  string.charAt(index)
var str = "hello world";
var n = str.charAt(1) //e

2.charCodeAt() 返回指定索引位置字符的Unicode编码，返回值是0-65535之间的整数，表示给索引处的UTF-16代码单元。字符串中第一个字符的位置为0，第二个字符位置为1。

 //语法 string.charCOdeAt(index)
 //参数 表示字符串中某个位置的数字，即字符在字符串中的下标。
 //返回值 类型Number 返回在指定的位置的字符串的Unicode编码。
 var str = "何巍";
 var n = str.charCodeAt(0）；
 var m = str.charCodeAt(1);
 console.log(n);	//20309
 console.log(m);	//24013

3.concat() 用于拼接两个或者多个字符串。相比于数组Array.cancat()，字符串的该方法用到的不多，主要是字符串使用（+）更方便。

//语法 string.concat(string1,string2,...,stringX)
var str1 = "hello ";
var str2 = "world!";
var str3 = " have a nice day!";
var n = str1.concat(str2,str3);  //hello world! have a nice day!

4.fromCharCode() 将Unicode转换为字符串

//语法 String.fromCharCode(n1, n2, ..., nX)
//参数 n1,n2, ..., nX 一个或者多个Unicode值，即要创建的字符串中的字符的Unicode编码。
//返回值 字符串型 返回代表Unicode编码的字符。
var n = String.fromCharCode(20309,24013); //何巍

5.indexOf() 返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回-1。indexOf()方法区分大小写。

//语法 string.indexOf(searchvalue,start)
var str = "hello world, welcome to the universe.";
var n = str.indexOf("e"); //1

6.lastIndexOf()可以返回一个指定的字符串最后出现的位置，如果指定第二个参数start,则在一个字符串中的指定位置从后面向前搜索。

//语法 string.lastIndexOf(searchvalue,start)
//start 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是0到stringObject.length-1。如省略该参数，则将从字符串的最后一个字符处开
//始检索。
var str = "I am from runoob, welcome to runoob site.";
var n = str.lastIndexOf("runoob",20);  //10

7.match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

//语法 string.match(regexp)
//regexp，规定要匹配的模式的RegExp对象。如果该参数不是RegExp对象，则需要首先把它传递给RegExp构造函数，将其转换为RegExp对象。
//返回值，数组类型，存放匹配结果的数组。该数组的内容依赖于regexp是否具有全局标志g。如果没有找到匹配结果返回null。
var str = "The rain in SPAIN stays mainly in the plain";
var n = str.match(/ain/gi);
console.log(n);  //[ain,AIN,ain,ain]

8.replace()替代与正则表达式匹配的子串

//语法 string.replace(searchvalue,newvalue)
//searchvalue 子字符串或要替换的模式的RegExp对象
//newvalue 一个字符串值
var str = "Mr Blue has a blue house and a blue car";
var n = str.replace(/blue/g,"red"); //Mr Blue has a red house and a red car

9.search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

//语法 string.search(searchvalue)
//searchvalue 查找的字符串或者正则表达式
//返回值 与指定查找的字符串或者正则表达式相匹配的String对象起始位置
var str = "Mr. Blue has a blue house";
document.write(str.search("blue")); //15

var str = "Mr. Blue has a blue house";
document.write(str.search(/blue/i); //4

10.slice()提取字符串的片段，并在新的字符串中返回被提取的部分

//语法 string.slice(start,end)
//start 必须。要抽取的片段的起始下标，第一字符位置为0。如果为负数，则从尾部开始截取。
//end 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括start到原子符串结尾的字符串。
//如果该参数是负数，那么规定的是从字符串的尾部开始算起的位置。
var str = "hello world!"
var n = str.slice(0); //hello world

var str = "hello world!"
var n = str.slice(3); //lo world!

var str = "hello world!";
var n = str.slice(3,8); //lo wo

var str = "hello world!";
var n = str.slice(-1);	//!
var m = str.slice(-2);  //d!

11.substr()从起始索引号提取字符串中指定数目的字符

//语法 string.substr(start,length)
//start 要抽取的子串的起始下标
//length 子串中的字符数
//返回值 字符串
var str = "hello world!";
var n = str.substr(2)  //llo world!

12.substring()提取字符串中两个指定的索引号之间的字符

//语法 string.substring(from,to)
//from 一个非负整数，规定要提取的子串的第一个字符在字符串对象中的位置。
//to 一个非负整数，要比提取的子串的最后一个字符在字符串对象中的位置多1。
//如果省略该参数，那么返回的子串会一直到字符串的结尾。

```javascript
<script>
	var str = "hello world!";
	document.write(str.substring(3) + "<br>");
	document.write(str.substring(3,7));
</script>
//lo world!
//lo w

13.split()把字符串分割为子字符串数组

//语法 string.split(separator,limit)
//separator 字符串或正则表达式，从该参数指定的地方分割字符串对象。
//limit 该参数可指定返回的数组的最大长度
//返回值 一个字符串数组。该数组是通过separator指定的边界处将字符串对象分割成子串创建的。返回的数组中的字串不包括separator自身。
var str="How are you doing today?";
var n=str.split();	//['How are you doing today?']
var n1= str.split("")//['H','o','w',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g',' ','t','o','d','a','y','?']
var n2= str.split(" ")	//['How','are','you','doing','today?']
var n3 = str.split(" ", 3)	//['How','are','you']
var n4 = str.split("o")	//[ 'H', 'w are y', 'u d', 'ing t', 'day?' ]

14.toLowerCase()把字符串转换为小写

//语法 string.toLowerCase()
var str = "Rabbit";
document.write(str.toLowerCase) // rabbit

15.toUpperCase()把字符串转换为大写

//语法 string.toUpperCase()
var str = "Rabbit";
document.write(str.toUpperCase()); //RABBIT

16.trim()移除字符串首尾空白空白符包括：空格，制表符tab,换行符等其它空白符等。

//语法 string.trim()
var str = "    Rabbit    ";
console.log(str.trim()) //Rabbit

17.valueOf()返回某个字符串对象的原始值

<script>
	var str="Hello world!";
	document.write(str.valueOf());  //hello world!
</script>

18.localeCompare() 用本地特定的顺序来比较两个字符串
19.toLocaleLowerCase()将字符串转换为小写
20.toLocaleUpperCase()根据主机的语言环境把字符串转换为大写，只有几种语言具有地方特有的大小写映射

5.数组对象

5.1数组对象的属性

1.length 返回数组元素的个数
2.constructor 返回创建数组对象的原型函数
3.prototype 允许你向数组对象添加属性或方法

5.2数组对象的方法

1.from() 用于将类数组结构转换为数组实例
2.of() 用于将一组参数转换为数组实例
3.isArray() 判断一个值是否为数组
4.keys() 返回数组索引的迭代器
5.values() 返回数组元素的迭代器
6.entries() 返回索引/值对的迭代器
7.fill() 使用固定值来填充数组
8.copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中
9.toLocaleString()
10.toString() 把数组转换为字符串，并返回结果
11.valueOf() 返回数组对象的原始值
12.join() 把数组的所有元素放入一个字符串
13.push() 接受任意数量的参数，并将他们添加到数组末尾，返回数组的最新长度
14.pop() 用于删除数组的最后一项，同时减少数组的length值，返回被删除的项
15.shift() 它会删除数组的第一项并返回它，然后数组长度减1.
16.unshift() 在数组开头添加任意多个值，然后返回新的数组长度
17.reverse() 将数组元素反向排列
18.sort() 按照升序重新排列数组元素
19.valueOf() 返回数值的对象
20.concat() 连接两个或更多的数组，并返回结果

21.slice() 选取数组的一部分，并返回一个新数组

22.splice() 从数组中添加或删除元素

//语法 array.splice(index,howmany,item1,...,itemX)
//index 必需，规定从何处添加或者删除元素
//howmany 可选，规定应该删除多少元素，必须是数字，但是也可以是0，如果未规定此参数，则删除从index开始到原数组结尾的所有元素。
//item1，...,itemX 可选，要添加到数组的新元素
//返回值：如果数组对象中删除了元素，则返回的是含有被删除的元素的数组。
var fruits = ["banana","orange","apple","mango"];
fruits.splice(2,1,"lemon","kiwi"); 
console.log(fruits);	//[ 'banana', 'orange', 'lemon', 'kiwi', 'mango' ]
fruits.splice(2,2)
console.log(fruits);	//[ 'banana', 'orange', 'mango' ]

23.indexOf() 搜索数组中的元素，并返回它所在的位置
24.lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置
25.includes() 判断一个数组是否包含一个指定的值
26.find() 返回符合传入测试（函数）条件的数组元素
27.findIndex() 返回符合传入测试（函数）条件的数组元素索引
28.every() 检测数值元素的每个元素是否都符合条件
29.filter() 创建一个新的数组，新数组中的元素时通过检查指定数组中符合

// arry.filter(function(currentValue,index,arr),thisValue)
// currentValue 必需。当前元素的值。
// index 可选。当前元素的索引值。
// arr 可选。当前元素属于的数组对象。
// 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
function findAll(arr,target) {
	var result = [];
	arr.filter(function(item,index){return item==target&&result.push(index)})
	return result;
}

30.forEach() 用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。
forEach()和map()的区别：
forEach()方法不会返回执行结果，也就是说forEach()会修改原来的数组。
而map()方法会得到一个新的数组并返回，不会改变原数组。

//语法 array.forEach(function(currentValue,index,arr),thisValue)
//function(currentValue,index,arr)  必需，数组中每个元素需要调用的函数。
//currentValue 必需，当前元素
//index 可选，当前元素的索引值
//arr 可选，当前元素所属的数组对象
//thisValue 可选，传递函数的值一般用“this”值。如果这个参数为空，“undefined”会传递给"this"值。
//FED28 求二次方
function square(arr) {
	//声明一个新的数组存放结果
	var a = [];
	arr.forEach(function(e){a.push(e*e);});
	return a;
}

31.map() 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素。
map()不会对空数组进行检测，map()不会改变原始数组。
forEach()和map()的区别：
forEach()方法不会返回执行结果，也就是说forEach()会修改原来的数组。
而map()方法会得到一个新的数组并返回，不会改变原数组。

//语法 array.map(function(currentValue,index,arr),thisValue)
// currentValue 必需。当前元素的值
// index 可选。当前元素的索引值
// arr 可选。当前元素属于的数组对象
//thisValue 可选。对象作为该执行回调时使用，传递给函数，用作“this”的值。
//如果省略了thisValue，或者传入null,undefined,那么回调函数的this为全局对象。
//返回值：返回一个新数组，数组的元素为原始数组元素调用函数处理后的值。
//求数组的各个元素的二次方
function square(arr) {
	return arr.map(function(item,index,array){return item*item});
}

32.some() 检测数组元素中的元素是否满足指定条件。
some()方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
some()不会对空数组进行检测，some()不会改变原始数组。

//语法 array.some(function(currentValue,index,arr),thisValue)
//currentValue 必需，当前元素的值。
//index 可选，当前元素的索引值。
//arr 可选，当前元素属于的数组对象
//返回值 布尔值
//FED29 查找元素的位置

33.reduce() 将数组元素计算为一个值（从左到右）

let values = [1,2,3,4,5];
let sum = values.reduce((prev,cur,index,array) => prev + cur);
console.log(sum)

34.reduceRight() 将数组元素计算为一个值（从右到左）
数组中不改变原数组的方法：

concat(), every(), some(), filter(), find(), map(), join(), toString(), valueOf(), slice(), indexOf(), lastIndexOf()

数组中改变原数组的方法：

push(), pop(), shift(), unshift(), reverse(), fill(), splice()

6.Map

6.1Map的属性

1.size属性获取映射中的键/值对的数量

6.2Map的方法

1.set() 添加键/值对
2.delete()删除值
3.clear()删除值
4.get()查询
5.has()查询
6.keys()
7.values()
8.entries()

7.Set

7.1Set的属性

1.size 获取集合的数量

7.2Set的方法

1.add()
2.delete()
3.clear()
4.has()
5.keys()
6.values()
7.entries()
8.forEach()

8.Date

8.1Date的属性

1.constructor 返回对创建此对象的Date函数的引用
2.prototype 可以向对象添加属性和方法

8.2Date的方法

1.Date.parse() 接受一个表示日期的字符串参数，并返回1970.01.01午夜距离该日期时间的毫秒数

//语法 Date.parse(datestring);
let m = Date.parse("May 23, 2019");
console.log(m); //1558598400000

//创建一个表示“2019年5月23日”的日期对象
let someDate = new Date(Date.parse("May 23, 2019");	//2019-05-23T08:00:00.000Z
let someDate1 = new Date("May 23, 2019");	//2019-05-23T08:00:00.000Z 
//第二行代码会默认调用Date.parse()方法，所以上面的两行代码是等价的

2.Date.UTC() 返回1970年1月1日到指定日期的毫秒数

//语法 Date.UTC(year,moth,day,hours,minutes,seconds,millisec)
let m = Date.UTC(2021,9,22,13,52);
console.log(m) //1634910720000

3.Date.now()返回表示方法执行时日期和时间的毫秒数

let m = Date.now();
console.log(m);	//1632290335448

4.toLocaleString(), toString(), valueOf(), toDatestring(), toTimeString(), toLocaleDateString(), toLocaleTimeString(), toUTCString()

let m  = new Date();
console.log(m.toLocaleString()); //2021/9/21下午10:21:55
console.log(m.toString());	//Tue Sep 21 2021 22:21:55 GMT-0800 (GMT-08:00)
console.log(m.valueOf());	//1632291715682
console.log(m.toDateString());	//Tue Sep 21 2021
console.log(m.toTimeString());	//22:21:55 GMT-0800 (GMT-08:00)
console.log(m.toLocaleDateString());  //2021/9/21
console.log(m.toLocaleTimeString());	//下午10:21:55
console.log(m.toUTCString());	//Wed, 22 Sep 2021 06:21:55 GMT

5.getTime() 返回日期的毫秒表示；与valueOf()相同

let m  = new Date();
console.log(m.getTime()); //1632292679870

6.getFullYear() ,getMonth(), getDate(),getHours(), getMinutes(), getSeconds(), getDay()

let m  = new Date();
//返回4位数年
console.log(m.getFullYear());	//2021
//返回日期的月（0表示1月，11表示12月）
console.log(m.getMonth());	//8
//返回日期的日（1-31）
console.log(m.getDate());	//21
//返回日期中的时(0-23)
console.log(m.getHours());	//22
//返回日期中的分（0-59）
console.log(m.getMinutes());	//51
//返回日期中的秒(0-59)
console.log(m.getSeconds());	//39
//返回日期中表示周几的数值(0表示周日，6表示周六）
console.log(m.getDay());	//2

9.RegExp

1.exec()方法用于检索字符串中的正则表达式的匹配，如果字符串中有匹配的值返回该匹配值，否则为null。

//语法 RegExpObject.exec(string)
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <script type="text/javascript">
            var str="Hello world!";
            //查找"Hello"
            var patt=/Hello/g;
            var result=patt.exec(str);
            document.write("返回值: " +  result);  //返回值：Hello
            //查找 "RUNOOB"
            patt=/RUNOOB/g;
            result=patt.exec(str);
            document.write("<br>返回值: " +  result);	//返回值：null
        </script>
        
    </body>
</html>

2…text()方法用于检测一个字符串是否匹配某个模式,如果字符串中有匹配的值返回true,否则返回false。

//语法 RegExpObject.test(string)
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <script type="text/javascript">
            var str="Hello world!";
            //查找"Hello"
            var patt=/Hello/g;
            var result=patt.test(str);
            document.write("返回值: " +  result);  //返回值：true
            //查找 "RUNOOB"
            patt=/RUNOOB/g;
            result=patt.test(str);
            document.write("<br>返回值: " +  result);	//返回值：false
        </script>
        
    </body>
</html>

10.定时器

1.setTimeout() 用于在指定的毫秒数后调用函数或计算表达式。

// 语法 setTimeout(code,millisecond)
//code 必需，要调用的函数后要执行的Javascript代码串。
//millisecond 必需，在执行代码前需等待的毫秒数。
//`setTimeout()`只执行code一次。如果多次调用，请使用`setInterval()`或者让code自身再次调用`setTimeout()`.
//FED34 计时器
function count(start,end) {
	if(start <= end){
		console.log(start);
		timer = setTimeout(function(){return count(++start,end)},100);
	}
	return  {
		cancel: function(){
			clearTimeout(timer);
		}
	}
}

2.clearTimeout() 该方法可以取消由setTimeout()方法设置的timeout.

//语法 clearTimeout(id_of_settimeout)
<html>
    <head>
        <script type="text/javascript">
            var c=0;
            var timer;
            function timedCount() {
                document.getElementById('txt').value=c;
                c++;
                timer=setTimeout("timedCount()",1000);
            }
            function stopCount(){
                clearTimeout(timer);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="开始计数!" onClick="timedCount()">
            <input type="text" id="txt">
            <input type="button" value="停止计数!" onClick="stopCount()">
        </form>
    </body>
</html>

3.setInterval() 按照指定的周期来调用函数或计算表达式

// setInterval(code,millisecond)
//code 必需，要调用的函数或要执行的代码串。
//millisecond 必需，周期性执行或调用code之间的时间间隔，以毫秒计。
//返回值  一个可以传递给window.clearInterval()从而取消code的周期性执行的值。
function count(start,end) {
	console.log(start++);
    timer = setInterval(function(){
        if(start <= end){
            console.log(start++);
        } else {
            clearInterval(timer);
        }
    },100);
    return {
        cancel: function(){
            clearInterval(timer);
        }
    };
}

4.clearInterval() 可以取消由setInterval()设置的timeout。

//语法 clearInterval(id_of_setinterval)
// id_of_setinterval 由setInterval()返回的ID值
<html>
    <body>
        <input type="text" id="clock" size="35" />
        <script language=javascript>
            var int=self.setInterval("clock()",50)
            function clock()
            {
                var t=new Date()
                document.getElementById("clock").value=t
            }
        </script>
        <button onclick="window.clearInterval(int)">Stop interval</button>
    </body>
</html>