JS内置对象

内置对象

一、 对象：

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

二、Array 数组

1. 创建 

1.1数组的创建

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

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

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

1.3特殊

var arr3=[5];　　//长度为1,元素为5
//使用new关键字传递一个整数参数创建数组，代表初始化数组长度
var arr4=new Array(5);    //长度为5，元素为空
console.log(arr3,arr4);
console.log(arr3[0]);   //5 
--------------------------
[5]
0: 5
length: 1
__proto__: Array(0)

(5) [empty × 5]
length: 5
__proto__: Array(0)

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

arr4[0]='下标0';
arr4[2]='下标2';
arr4[8]='下标8';
console.log(arr4)
--------------------------
(9) ["下标0", empty, "下标2", empty × 5, "下标8"]
0: "下标0"
2: "下标2"
8: "下标8"
length: 9
__proto__: Array(0)

3.数组对象的属性：length

console.log(arr4.length);    #9

4.遍历数组元素：

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

4.1 普通for循环

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

for(var i =arr5.length-1;i>=0;i--){//倒序遍历
    console.log(arr5[i]);
}
#5 4 3 2 1

4.2 for-in循环

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

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

arr5.forEach(function(elem,index){//(元素，下标)参数
    console.log(elem,index);//方法体
});
/*
解析 forEach(function(){})
function show(a){
    a();
}
show(function(elm,ind){
    console.log();
})
*/

练习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.查找元素第一次出现的下标（正序查找）

var arr=[1,1,3,1,5];
var data=prompt('请输入要查找的数值');
var index=-1;
for (var i = 0;i<arr.length;i++){
    if(data==arr[i]){
        index=i;
    }
}
console.log('查找的元素',data,'所在位置：',index);
==============
查找元素最后一次出现的下标（倒序查找）
var arr=[1,1,3,1,5];
var data=prompt('请输入要查找的数值');
var index=-1;
for (var i = arr.length-1;i>=0;i--){
    if(data==arr[i]){
        index=i;
        break;
    }
}
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)

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

返回添加之后的数组长度

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

2）pop()

移除末尾元素

返回被移除的元素

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

3）unshift(data)

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

返回添加之后的数组长度

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

4）shift()

移除数组的第一个元素

返回被移除的元素

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

5）toString()

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

返回字符串结果

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

6）join(param)

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

返回字符串

var r6=arr.join();
console.log(r6);
//30,10,hello,world,1,2
var r7=arr.join('');
console.log(r7);
//3010helloworld12
console.log(arr);
(6) [30, 10, "hello", "world", 1, 2]
0: 30
1: 10
2: "hello"
3: "world"
4: 1
5: 2
length: 6
__proto__: Array(0)

7）reverse()

反转数组,倒序重排

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

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

8）sort()

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

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

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

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

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

//如果返回值>0,交换元素的值,b-a表示降序排列

function sortDESC(a,b){
    //如果b-a>0,则交换两个元素的位置
      //自定义降序
      return b-a;
}
arr.sort(sortDESC);
console.log(arr);
------------------------------------
(6) [30, 10, 2, 1, "hello", "world"]
0: 30
1: 10
2: 2
3: 1
4: "hello"
5: "world"
length: 6
__proto__: Array(0)

9）forEach(param)

遍历数组元素

参数为函数

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

7.复杂数组

var obj={
    uid:001,
    uname:'Maple',
    play:function(){
        console.log('play');
    }
}
console.log(obj.uid);    //1
obj.play();        //play

===============================

var array=[
    {uname:'Fox',age:35},
    {uname:'Maple',age:34},
    {uuanm:'MapleFox',age:33}
]
console.log(array[0].age)    //35
//将数组元素按照年龄升序排列
array.sort(function(e1,e2){
    return e1.age-e2.age;
})
console.log(array);
----------------------------------
(3) [{…}, {…}, {…}]
0: {uuanm: "MapleFox", age: 33}
1: {uname: "Maple", age: 34}
2: {uname: "Fox", age: 35}
length: 3
__proto__: Array(0)

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

function decide(){
        var num = prompt('请输入数字');
        var arr = [];
        while(num!=0){
            arr.unshift(num%2);//将余数在头部循环添加
            num=parseInt(num/2);//对商取整处理
        }
        console.log(arr.join(''));
    }
    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. 创建 

var str = "100";
var str2 = new String("hello");
console.log(str2)
String {"hello"}
        0: "h"
        1: "e"
        2: "l"
        3: "l"
        4: "o"
length: 5
__proto__: String
[[PrimitiveValue]]: "hello"
console.log(str[1],str2[0])
//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());

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.比较用户输入的内容，给出验证的结果

<body>
    <input type="text" id="uinput">
    <span id="code">验证码</span>
    <button id="btn">验证</button>
    <script>
        //元素的id属性值作为变量直接操作，存储元素本身
        console.log(code);
        //生成4位验证码
        var str='qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';
        var show='';

            for(var i = 0;i<4;i++){
                //下标
                //除了parseInt可以取整 还可以用Math.floor向下取整
                //var index=math.floor(Math.random()*str.length)
                var index =parseInt(Math.random()*str.length);
                show+=str[index];
            }
        //操作元素内容(显示验证码)
        code.innerHTML=show;
        //获取输入框
        console.log(uinput.type);
        //onclick = 'fn()'
        btn.onclick=function (){
            //获取输入框的值
            console.log(uinput.value);
            //验证
            if(uinput.value.toLowerCase()==show.toLowerCase()){
                alert('验证相同');
            }else{
                alert('验证不对');
            }
        };
    </script>
</body>

模拟验证码