JS内置对象

内置对象

一、 对象:

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

二、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.onclick=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 模拟验证码
模拟验证码练习

 

posted @ 2019-07-23 00:21  maplethefox  阅读(926)  评论(0编辑  收藏  举报