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)
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)
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)
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)
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)
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)
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)
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());
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 模拟验证码