本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

喜洋洋与红太狼

1067

文章

841369

访问

+关注

分类

暂无分类

日期归档

2023-05(2)

2023-06(2)

07-常用内置对象

发布于2019-09-09 11:44 阅读(1544) 评论(0) 点赞(2) 收藏(5)

数组Array

1.数组的创建方式

字面量方式创建：

var colors = ['red', 'green', 'yellow'];

使用构造函数的方式创建（使用new关键字对构造函数进行创建对象）

var colors2 = new Array();

2.数组的赋值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11   var color = [];
12   color[0] = 'red';
13   color[1] = 'green';
14   color[2] = 'yellow';
15   console.log(color);
16 </script>
17     
18 </body>
19 </html>

3.数组的常用方法

3.1 concat：把几个数组合并成一个数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11   var north = ['北京', '山东', '天津'];
12   var south = ['东莞', '深圳', '上海'];
13   var newCity = north.concat(south);
14   console.log(newCity);
15 </script>
16     
17 </body>
18 </html>

3.2 join：将数组中的元素使用指定的字符串连接起来，他会形成一个新的字符串

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var score = [78, 89, 48, 20, 100];
12     var str = score.join('*');
13     console.log(str);
14 </script>
15     
16 </body>
17 </html>

3.3 将数组转换成字符串toString（）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var score = [78, 89, 48, 20, 100];
12     var str = score.toString();
13     console.log(str);
14 </script>
15     
16 </body>
17 </html>

3.4 slice（start，end）：返回数组的一段，左闭右开

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var score = [78, 89, 48, 20, 100];
12     var nscore = score.slice(1, 4);
13     console.log(nscore);
14 </script>
15     
16 </body>
17 </html>

3.5 pop：删除数组的最后一个元素，并返回删除的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     var item = arr.pop();
13     console.log(arr);
14     console.log(item);
15 </script>
16     
17 </body>
18 </html>

3.6 push（）：向数组末尾添加一个或多个元素，并返回新的长度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     var item = arr.push('帅哥');
13     var item1 = arr.push('美女', '野兽');
14     console.log(arr);
15     console.log(item);
16     console.log(item1);
17 </script>
18     
19 </body>
20 </html>

3.7 reverse（）：翻转数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     arr.reverse();
13     console.log(arr);
14 </script>
15     
16 </body>
17 </html>

3.8 sort（）：对数组排序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     arr.sort();
13     console.log(arr);
14 </script>
15     
16 </body>
17 </html>

3.9 isArray（）：判断是否为数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     console.log(Array.isArray(arr));
13 </script>
14     
15 </body>
16 </html>

3.10 shift（）：删除并返回数组的第一个元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     var item = arr.shift();
13     console.log(arr);
14     console.log(item);
15 </script>
16     
17 </body>
18 </html>

3.11 unshift（）：向数组的开头添加一个或多个元素，并返回新的长度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     var lengs = arr.unshift('老大', '老二');
13     console.log(arr);
14     console.log(lengs);
15 </script>
16     
17 </body>
18 </html>

3.12 length：唯一的属性，返回数组的长度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var arr = ['张三', '李四', '王文', '找六'];
12     console.log(arr.length);  //4
13 </script>
14     
15 </body>
16 </html>

字符串String

1.chartAt（）：返回指定索引位置的字符

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'xiaoshuaige';
12     var chset = str.charAt(3);
13     console.log(chset);  //o
14 </script>
15     
16 </body>
17 </html>

2.concat（）：返回两个或多个字符串拼接后的字符串值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str1 = 'al';
12     var str2 = 'vin';
13     console.log(str1.concat(str2, str2, str2));  //alvinvinvin
14 </script>
15     
16 </body>
17 </html>

3.replace（a，b）：将字符串a替换成字符串b

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'alhdifjghjri';
12     var newstr = str.replace('lhdi', 'hgfhg345');
13     console.log(str);  //alhdifjghjri
14     console.log(newstr);  //ahgfhg345fjghjri
15 </script>
16     
17 </body>
18 </html>

4.indexof（）：查找字符串中字符的下标，找到返回字符串的下标，找不到返回-1.和search（）用法一样

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'alhdifjghjri';
12     console.log(str.indexOf('d'));  //3
13     console.log(str.search('i'));  //4
14 </script>
15     
16 </body>
17 </html>

5.slice（start，end）：提取字符串的一部分，并返回一个新的字符串，左闭右开

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'alhdifjghjri';
12     var str1 = str.slice(2, 7);
13     console.log(str1);  //hdifj
14 </script>
15     
16 </body>
17 </html>

6 split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回指定个数的数组

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = '非个人分，a已复核给a回顾二行，返回a发黑发';
12     var str1 = str.split('a', 2);
13     var str2 = str.split('a');
14     console.log(str);
15     console.log(str1);
16     console.log(str2);
17 </script>
18     
19 </body>
20 </html>

7.substr（start，length）：返回一个字符串从指定位置开始到指定字符数的字符

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = '非个人分，a已复核给a回顾二行，返回a发黑发';
12     console.log(str.substr(2, 7));  //人分，a已复核
13 </script>
14     
15 </body>
16 </html>

8.toLowerCase（）：转小写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'FUEHFEUGGRG';
12     console.log(str.toLowerCase());  //fuehfeuggrg
13 </script>
14     
15 </body>
16 </html>

9.toUpperCase（）：转大写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'fjehgeugheg';
12     console.log(str.toUpperCase());  //FJEHGEUGHEG
13 </script>
14     
15 </body>
16 </html>

10.substring(indexStart,indexEnd) 提取字符串中介于两个指定下标之间的字符。返回的子串包括开始处的字符，但不包括结束处的字符

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = 'fjehgeugheg';
12     console.log(str.substring(1, 6));  //jehge
13     console.log(str.substring(3, 3));  //
14     console.log(str.substring(-1, 8));  //fjehgeug
15     console.log(str.substring(9, 2));  //ehgeugh
16     console.log(str.substring(3));  //hgeugheg
17 </script>
18     
19 </body>
20 </html>

11.trim()：去除字符串两边的空白

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var str = ' fjehg eugheg ';
12     var str1 = str.trim();
13     console.log(str1);  //fjehg eugheg
14 </script>
15     
16 </body>
17 </html>

Date日期对象

创建日期对象只有构造函数一种方式，使用new关键字

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var myDate = new Date();
12     console.log(myDate.getDate());
13     console.log(myDate);
14     console.log(myDate.getMonth() + 1);
15     console.log(myDate.toLocaleString());
16 </script>
17     
18 </body>
19 </html>

Math 内置对象

1.Math.ceil()：向上取整，‘天花板函数’

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var x = 7.5343
12     var a = Math.ceil(x);
13     console.log(a);  //8
14 </script>
15     
16 </body>
17 </html>

2.Math.floor（）：向下取整，‘地板函数’

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var x = 7.5343
12     var a = Math.floor(x);
13     console.log(a);  //7
14 </script>
15     
16 </body>
17 </html>

3.求两个数的最大值和最小值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     console.log(Math.max(5, 2));  //5
12     console.log(Math.min(5, 2));  //2
13 </script>
14     
15 </body>
16 </html>

4.Math.random（）随机数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var ran = Math.random();
12     console.log(ran);  //0.13612615468574973
13 </script>
14     
15 </body>
16 </html>

计算100-300之间的一个随机数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <script>
11     var ran = Math.random();
12     console.log(100 + ran*(300-100));  //215.83127756609971
13 </script>
14     
15 </body>
16 </html>