您的位置：首页 > Web前端 > JavaScript

JS内置对象

2019-07-23 00:21 127 查看

原文链接：http://www.cnblogs.com/maplethefox/p/11229360.html

内置对象

一、对象：

　　对象是由属性和方法组成的,使用点语法访问

二、Array 数组

1. 创建

1.1数组的创建

1 var arr1=['Maple',30,true];
2 console.log(arr1);
3 --------------------------
4 (3) ["Maple", 30, true]
5 0: "Maple"
6 1: 30
7 2: true
8 length: 3
9 __proto__: Array(0)

示例

1.2使用构造函数new关键字创建

1 var arr2=new Array('Fox',31,false);
2 console.log(arr2);
3 --------------------------
4 (3) ["Fox", 31, false]
5 0: "Fox"
6 1: 31
7 2: false
8 length: 3
9 __proto__: Array(0)

示例

1.3特殊

1 var arr3=[5];　　//长度为1,元素为5
2 //使用new关键字传递一个整数参数创建数组，代表初始化数组长度
3 var arr4=new Array(5);    //长度为5，元素为空
4 console.log(arr3,arr4);
5 console.log(arr3[0]);   //5
6 --------------------------
7 [5]
8 0: 5
9 length: 1
10 __proto__: Array(0)
11
12 (5) [empty × 5]
13 length: 5
14 __proto__: Array(0)

示例

2.操作数组元素（根据元素索引）

1 arr4[0]='下标0';
2 arr4[2]='下标2';
3 arr4[8]='下标8';
4 console.log(arr4)
5 --------------------------
6 (9) ["下标0", empty, "下标2", empty × 5, "下标8"]
7 0: "下标0"
8 2: "下标2"
9 8: "下标8"
10 length: 9
11 __proto__: Array(0)

示例

3.数组对象的属性：length

console.log(arr4.length);    #9

4.遍历数组元素：

　　创建数组，包含若干元素，实现数组元素的正序遍历和倒序遍历

4.1 普通for循环

1 var arr5 = [1,2,3,4,5]
2 for(var i =0;i<arr5.length;i++){//正序遍历
3     console.log(arr5[i]+'\t');
4 }
5 #1 2 3 4 5
6
7 for(var i =arr5.length-1;i>=0;i--){//倒序遍历
8     console.log(arr5[i]);
9 }
10 #5 4 3 2 1

示例

4.2 for-in循环

1 var arr5 = [1,2,3,4,5]
2 for(var i in arr5){//i 是index元素下标
3     console.log(i,arr5[i]);
4 }
5 0 1
6 1 2
7 2 3
8 3 4
9 4 5

示例

4.3 数组对象提供的遍历方法，forEach(function(){})

1 arr5.forEach(function(elem,index){//(元素，下标)参数
2     console.log(elem,index);//方法体
3 });
4 /*
5 解析 forEach(function(){})
6 function show(a){
7     a();
8 }
9 show(function(elm,ind){
10     console.log();
11 })
12 */

示例+解析

练习1.循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束，控制台打印数组

var arr1=[];
for(;;){
var data=prompt('请输入');
if(data=='exit'){
break;
}
//添加至数组，数组长度表示数组中下一个元素的索引
arr1[arr1.length]=data;
}
console.log(arr1);

练习

练习2.声明包含若干元素的数组，打印数组中的最大值

var arr2=[1,2,3,99,5];
var max=arr2[0];
for(var i in arr2){
if(max<arr2[i]){
max=arr2[i];
}
}
console.log(max);

练习

练习3.查找元素第一次出现的下标（正序查找）

1 var arr=[1,1,3,1,5];
2 var data=prompt('请输入要查找的数值');
3 var index=-1;
4 for (var i = 0;i<arr.length;i++){
5     if(data==arr[i]){
6         index=i;
7     }
8 }
9 console.log('查找的元素',data,'所在位置：',index);
10 ==============
11 查找元素最后一次出现的下标（倒序查找）
12 var arr=[1,1,3,1,5];
13 var data=prompt('请输入要查找的数值');
14 var index=-1;
15 for (var i = arr.length-1;i>=0;i--){
16     if(data==arr[i]){
17         index=i;
18         break;
19     }
20 }
21 console.log('查找的元素',data,'所在位置：',index);

练习

5.特点

数组用于存储若干数据,自动为每位数据分配下标,从0开始
数组中的元素不限数据类型,长度可以动态调整
动态操作数组元素：根据元素下标读取或修改数组元素，arr[index]

6.属性和方法

1.属性 : length 表示数组长度,可读可写

2.方法 :

push(data)	在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开	返回添加之后的数组长度
pop()	移除末尾元素	返回被移除的元素
unshift(data)	在数组的头部添加一个或多个元素	返回添加之后的数组长度
shift()	移除数组的第一个元素	返回被移除的元素
toString()	将数组转换成字符串类型(不改变原有数组，新的数组)	返回字符串结果
join(param)	将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接(不改变原有数组，新的数组)	返回字符串
reverse()	反转数组,倒序重排	返回重排的数组,注意该方法直接修改原数组的结构
sort()	对数组中元素排序,默认按照Unicode编码升序排列	返回重排后的数组, 直接修改原有数组参数 : 可选,自定义排序算法
forEach(param)	遍历数组元素	参数为函数

1）push(data)

在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开

返回添加之后的数组长度

1  var arr = ['hello', 'world'];
2 //在数组末尾追加1,2,3
3 var r1 = arr.push(1, 2, 3);
4 console.log(r1);//5
5 console.log(arr);
6 ---------------
7 (5) ["hello", "world", 1, 2, 3]
8 0: "hello"
9 1: "world"
10 2: 1
11 3: 2
12 4: 3
13 length: 5
14  __proto__: Array(0)

push(data)方法演示

2）pop()

移除末尾元素

返回被移除的元素

1 var r2=arr.pop();
2 console.log(r2);//3
3 console.log(arr);
4 ---------------------------
5 (4) ["hello", "world", 1, 2]
6 0: "hello"
7 1: "world"
8 2: 1
9 3: 2
10 length: 4
11 __proto__: Array(0)

pop()方法演示

3）unshift(data)

在数组的头部添加一个或多个元素

返回添加之后的数组长度

1 var r3=arr.unshift(10);
2 r3=arr.unshift(20,30);
3 console.log(r3);//7（返回添加之后的数组长度）
4 console.log(arr);
5 ----------------------------------------
6 (7) [20, 30, 10, "hello", "world", 1, 2]
7 0: 20
8 1: 30
9 2: 10
10 3: "hello"
11 4: "world"
12 5: 1
13 6: 2
14 length: 7
15 __proto__: Array(0)

unshift(data)方法演示

4）shift()

移除数组的第一个元素

返回被移除的元素

1 var r4=arr.shift();
2 console.log(r4);//20
3 console.log(arr);
4 ------------------------------------
5 (6) [30, 10, "hello", "world", 1, 2]
6 0: 30
7 1: 10
8 2: "hello"
9 3: "world"
10 4: 1
11 5: 2
12 length: 6
13 __proto__: Array(0)

shift()方法演示

5）toString()

将数组转换成字符串类型(不改变原有数组，新的数组)

返回字符串结果

var r5=arr.toString();
console.log(r5);
//30,10,hello,world,1,2

6）join(param)

将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接(不改变原有数组，新的数组)

返回字符串

1 var r6=arr.join();
2 console.log(r6);
3 //30,10,hello,world,1,2
4 var r7=arr.join('');
5 console.log(r7);
6 //3010helloworld12
7 console.log(arr);
8 (6) [30, 10, "hello", "world", 1, 2]
9 0: 30
10 1: 10
11 2: "hello"
12 3: "world"
13 4: 1
14 5: 2
15 length: 6
16 __proto__: Array(0)

join(param)方法演示

7）reverse()

反转数组,倒序重排

返回重排的数组,注意该方法直接修改原数组的结构

1 arr.reverse();//调整原有数组的结构
2 console.log(arr);
3 (6) [2, 1, "world", "hello", 10, 30]
4 0: 2
5 1: 1
6 2: "world"
7 3: "hello"
8 4: 10
9 5: 30
10 length: 6
11 __proto__: Array(0)

reverse()方法演示

8）sort()

对数组中元素排序,默认按照Unicode编码升序排列

返回重排后的数组,直接修改原有数组

参数 : 可选,自定义排序算法

1 arr.sort();//按照Unicode的编码值升序排序
2 console.log(arr);
3 (6) [1, 10, 2, 30, "hello", "world"]
4 0: 1
5 1: 10
6 2: 2
7 3: 30
8 4: "hello"
9 5: "world"
10 length: 6
11 __proto__: Array(0)

sort()方法演示

1 /*作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列*/
2 //对number值进行大小排列
3 function sortASC(a,b){
4 /*a,b代表数组中相邻的两个元素，如果a-b>0,则交换元素的位置*/
5     //自定义升序
6       return a-b;
7 }
8 arr.sort(sortASC);
9 console.log(arr);
10 -------------------------------------
11 (6) [1, 2, 10, 30, "hello", "world"]
12 0: 1
13 1: 2
14 2: 10
15 3: 30
16 4: "hello"
17 5: "world"
18 length: 6
19 __proto__: Array(0)

自定义升序

1 //如果返回值>0,交换元素的值,b-a表示降序排列
2
3 function sortDESC(a,b){
4     //如果b-a>0,则交换两个元素的位置
5       //自定义降序
6       return b-a;
7 }
8 arr.sort(sortDESC);
9 console.log(arr);
10 ------------------------------------
11 (6) [30, 10, 2, 1, "hello", "world"]
12 0: 30
13 1: 10
14 2: 2
15 3: 1
16 4: "hello"
17 5: "world"
18 length: 6
19 __proto__: Array(0)

自定义降序

9）forEach(param)

遍历数组元素

参数为函数

arr.forEach(function (elem,index){
//forEach()方法会自动调用匿名函数,依次传入元素及下标
});

7.复杂数组

1 var obj={
2     uid:001,
3     uname:'Maple',
4     play:function(){
5         console.log('play');
6     }
7 }
8 console.log(obj.uid);    //1
9 obj.play();        //play
10
11 ===============================
12
13 var array=[
14     {uname:'Fox',age:35},
15     {uname:'Maple',age:34},
16     {uuanm:'MapleFox',age:33}
17 ]
18 console.log(array[0].age)    //35
19 //将数组元素按照年龄升序排列
20 array.sort(function(e1,e2){
21     return e1.age-e2.age;
22 })
23 console.log(array);
24 ----------------------------------
25 (3) [{…}, {…}, {…}]
26 0: {uuanm: "MapleFox", age: 33}
27 1: {uname: "Maple", age: 34}
28 2: {uname: "Fox", age: 35}
29 length: 3
30 __proto__: Array(0)

复杂数组示例

练习：十进制转二进制（不断的除2取余，直至商为0，余数倒序排列）

1 function decide(){
2         var num = prompt('请输入数字');
3         var arr = [];
4         while(num!=0){
5             arr.unshift(num%2);//将余数在头部循环添加
6             num=parseInt(num/2);//对商取整处理
7         }
8         console.log(arr.join(''));
9     }
10     decide();

练习

8.二维数组

　　数组中的每个元素又是数组

var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
//简写
var num2 = arr2[1][0];

　　遍历二维数组

for(var i in arr){
for(var j in arr[i]){
console.log(arr[i][j]);
}
}

三、String 对象

1. 创建

1 var str = "100";
2 var str2 = new String("hello");
3 console.log(str2)
4 String {"hello"}
5         0: "h"
6         1: "e"
7         2: "l"
8         3: "l"
9         4: "o"
10 length: 5
11 __proto__: String
12 [[PrimitiveValue]]: "hello"
13 console.log(str[1],str2[0])
14 //0  h

示例

遍历字符串

for(var i = 0; i <str2.length; i++){
console.log(str2[i]);
}

2. 特点

　　字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始

3. 属性

　　length ：获取字符串长度

4. 方法

1）转换字母大小写

toUpperCase() 转大写字母

toLowerCase() 转小写字母

返回转换后的字符串,不影响原始字符串

var s='MapleFox';
var r1=s.toUpperCase();
var r2=s.toLowerCase();
console.log(r1,r2,s);
//MAPLEFOX    maplefox    MapleFox

2）获取字符或字符编码

charAt(index) 获取指定下标的字符

charCodeAt(index) 获取指定下标的字符编码

参数为指定的下标,可以省略,默认为0

var s='MapleFox';
var r3 = s.charAt(3);//-->l
var r4 = s.charCodeAt(1)//M-->97
console.log(r3,r4)//l    97

3）获取指定字符的下标

indexOf(str,fromIndex)

作用 : 获取指定字符的下标,从前向后查询,找到即返回

参数 :

　　str 表示要查找的字符串,必填

　　fromIndex 表示起始下标,默认为0

返回 :

　　返回指定字符的下标,查找失败返回-1

lastIndexOf(str,fromIndex)

作用 : 获取指定字符最后一次出现的下标,从后向前查找,找到即返回

参数 :

　　str 必填,表示要查找的内容

　　fromIndex 选填,指定起始下标

s='maria';
var r5=s.indexOf('a');//1
var r6=s.lastIndexOf('a');//4
console.log(r5,r6);
var r7=s.indexOf('a',3);//4
var r8=s.lastIndexOf('a',3);//1
console.log(r7,r8);

4）截取字符串

substring(startIndex,endIndex)

作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1

参数 :

　　startIndex 表示起始下标

　　endIndex 表示结束下标,可以省略,省略表示截止末尾

s='maria';
var r9=s.substring(0,2);
console.log(r9);    //ma

5）分割字符串

split(param)

作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果

参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组

s='maria';
var r10=s.split('a');
console.log(r10);
(3) ["m", "ri", ""]
0: "m"
1: "ri"
2: ""
length: 3
__proto__: Array(0)

5.模式匹配

作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换

正则表达式 :

var reg1 = /字符模式/修饰符;

修饰符 :

i : ignorecase 忽略大小写

g : global 全局范围

字符串方法 :

match(regExp/subStr)

作用 : 查找字符串中满足正则格式或满足指定字符串的内容

返回 : 数组,存放查找结果

replace(regExp/subStr,newStr)

作用 : 根据正则表达式或字符串查找相关内容并进行替换

返回 : 替换后的字符串,不影响原始字符串

/*Math对象*/
//1.向上取整：舍弃小数位，整数位+1
console.log(Math.ceil(0.99))
//2.向下取整：舍弃小数位，整数位不变
console.log(Math.floor(0.99))
//3.四舍五入取整
console.log(Math.round(0.49))
console.log(Math.round(0.5))
//4.生成0~1之间的随机小数
console.log(Math.random());

Math方法演示

var str = '上知乎,搜知乎,问知乎,答知乎';
//定义正则，表示查找内容
var reg1=/知乎/ig;
var res1=str.match(reg1);
console.log(res1);
-----------
Array(4)
0: "知乎"
1: "知乎"
2: "知乎"
3: "知乎"
length: 4
__proto__: Array(0)
==========================
//replace()查找并替换，返回替换后的字符串结果
var reg1=/知乎/ig;
var res1 = str.replace(reg1,'新浪');
console.log(res1,str)；
//上新浪,搜新浪,问新浪,答新浪 上知乎,搜知乎,问知乎,答知乎

正则查找

练习1.接收用户输入的邮箱，提取用户名和服务商

//使用@截取字符串
var mail='zhangsan@163.com';
var index=mail.indexOf('@');
var username = mail.substring(0,index);
var servername = mail.substring(index+1);
console.log(username,servername);    //zhangsan 163.com  //使用@符号分割字符串
var res=mail.split('@');
console.log(res[0],res[1]);        //zhangsan 163.com
//=====================================
//练习2.从身份证号中提取年月份信息
var uid='222222198812123333';
var year=uid.substring(6,10);
var month= uid.substring(10,12);
var day= uid.substring(12,14);
console.log(year,month,day);    //1988 12 12
//=======================================
//练习3.'101_5&201_7&301_9' 打印出商品的id为101，数为5
//分割商品信息
var str='101_5&201_7&301_9';
var arr=str.split('&');
for(var i=0;i<arr.length;i++){
var r = arr[i].split('_');
console.log('商品id为',r[0],'商品数量为',r[1])
}
id为 101 数量为 5
id为 201 数量为 7
id为 301 数量为 9

练习

练习2：模拟验证码

1.创建数据源（有大小写字母和数字组成）

2.随机取四位字符，拼成验证码

随机数的生成：Math.random()返回[0-1)之间的随机小数用他获取随机下标调整为随机下标parseInt

3.提示用户输入（不区分大小写）

4.比较用户输入的内容，给出验证的结果

1 <body>
2     <input type="text" id="uinput">
3     <span id="code">验证码</span>
4     <button id="btn">验证</button>
5     <script>
6         //元素的id属性值作为变量直接操作，存储元素本身
7         console.log(code);
8         //生成4位验证码
9         var str='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
10         var show='';
11
12             for(var i = 0;i<4;i++){
13                 //下标
14                 //除了parseInt可以取整 还可以用Math.floor向下取整
15                 //var index=math.floor(Math.random()*str.length)
16                 var index =parseInt(Math.random()*str.length);
17                 show+=str[index];
18             }
19         //操作元素内容(显示验证码)
20         code.innerHTML=show;
21         //获取输入框
22         console.log(uinput.type);
23         //onclick = 'fn()'
24         btn.οnclick=function (){
25             //获取输入框的值
26             console.log(uinput.value);
27             //验证
28             if(uinput.value.toLowerCase()==show.toLowerCase()){
29                 alert('验证相同');
30             }else{
31                 alert('验证不对');
32             }
33         };
34     </script>
35 </body>
36
37 模拟验证码

模拟验证码练习

转载于:https://www.cnblogs.com/maplethefox/p/11229360.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JS内置对象

内置对象

一、 对象：

二、Array 数组

1. 创建

2.操作数组元素（根据元素索引）

3.数组对象的属性：length

4.遍历数组元素：

5.特点

6.属性和方法

7.复杂数组

8.二维数组

三、String 对象

1. 创建

2. 特点

3. 属性

4. 方法

5.模式匹配

一、对象：