js内置对象:Array String Math Date
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 1、构造函数方法创建数组 var arr=new Array(); console.log(arr);//[] var arr2=new Array(3);//指定数组个数 console.log(arr2);//(3) [empty × 3] var arr3=new Array(1,2,3);//指定数组元素 console.log(arr3);//(3) [1, 2, 3] // 2、字面量表示法创建数组 var arr4=[1,2,3,4]; console.log(arr4);//(4) [1, 2, 3, 4] </script> </body> </html> 读取和设置数组元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr4=[1,2,3,4]; console.log(arr4[0]);//1 arr4[0]=0; console.log(arr4);//(4) [0, 2, 3, 4] </script> </body> </html> 数组长度=数组最大索引值+1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr4=[1,2,3,4]; console.log(arr4.length);//4 获取数组长度 arr4.length=3; console.log(arr4);//(3) [1, 2, 3] arr4[9]=9; console.log(arr4);//(10) [1, 2, 3, empty × 6, 9] console.log(arr4.length);//10 数组长度永远=最大索引值+1 // 遍历数组 var len=arr4.length; for(var i=0;i<len;i++){ console.log(arr4[i]); } </script> </body> </html>
数组的栈方法: push() 从数组最后添加元素,返回数组的新长度 unshift() 从数组的开头添加元素,返回数组的新长度 pop() 删除数组的最后一个元素,返回被删除的那个元素 shift() 删除数组的第一个元素,返回被删除的那个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr=[1,2,3,4]; var len=arr.push(5,6); console.log(len);//6 console.log(arr);//(6) [1, 2, 3, 4, 5, 6] var arr1=[1,2,3,4]; var len1=arr1.unshift(-1,0); console.log(len1);//6 console.log(arr1);//(6) [-1, 0, 1, 2, 3, 4] var arr2=[1,2,3,4]; var n2=arr2.pop(); console.log(n2);//4 console.log(arr2);//(3) [1, 2, 3] var arr3=[1,2,3,4]; var n3=arr3.shift(); console.log(n3);//1 console.log(arr3);//(3) [2, 3, 4] </script> </body> </html> 数组方法: join() 数组转字符串 默认分隔符是逗号,可以自定义 reverse() 翻转数组中的元素顺序 sort() 数组排序,默认隐式转换为字符串,然后进行排序 可以自定义参数,用来进行数值的排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr=[1,2,3,4]; var str=arr.join(); console.log(str);// 字符串 1,2,3,4 var arr2=[1,2,3,4]; var str2=arr2.join(''); console.log(str2);// 字符串 1234 var arr3=[1,2,3,4]; var str3=arr3.join('-'); console.log(str3);// 字符串 1-2-3-4 var arr4=[1,2,3,4]; var arr4=arr4.reverse(); console.log(arr4);// (4) [4, 3, 2, 1] var arr5=[1,24,3,42]; var arr5=arr5.sort(); console.log(arr5);// (4) [1, 24, 3, 42] var arr6=[1,24,3,42]; var arr6=arr6.sort(function(a,b){return a-b;}); console.log(arr6);// (4) [1, 3, 24, 42] var arr7=[1,24,3,42]; var arr7=arr7.sort(function(a,b){return b-a;}); console.log(arr7);// (4) [42, 24, 3, 1] </script> </body> </html> concat() 数组合并 slice(start, end) 数组截取,包含start不包含end slice(start) 默认从start位置截取到最后 如果start或者end为负数,则等价于 该负数+数组长度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr1=[1,2,3]; var arr2=[4,5,6]; var newArr=arr1.concat(arr2); console.log(newArr);//(6) [1, 2, 3, 4, 5, 6] var arr=[0,1,2,3,4,5]; var slice1=arr.slice(2); console.log(slice1);//(4) [2, 3, 4, 5] var slice2=arr.slice(2,5); console.log(slice2);//(3) [2, 3, 4] var slice3=arr.slice(-5); console.log(slice3);//(5) [1, 2, 3, 4, 5] var slice4=arr.slice(-5,5); console.log(slice4);//等价于(1,5) (4) [1, 2, 3, 4] </script> </body> </html> 数组的拷贝,方法越多越好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //数组拷贝,方法越多越好 var a=[1,2,3,4]; var b; b=a; console.log(b); b=a.concat([]); console.log(b); b=a.slice(0); console.log(b); b=[]; for(var i=0;i<a.length;i++){ b.push(a[i]); } console.log(b); </script> </body> </html> splice(index, count, item...) splice(index, count) 从Index位置开始,删除count个数据 splice(index, 0, item...) 从index位置开始,添加item... splice(index, count, item...) 从Index位置开始,删除count个数据,并插入item... 返回值始终是被删除的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr=['a', 'b', 'c', 'd', 'e', 'f', 'g']; var newArr=arr.splice(2, 2); console.log(newArr);//(2) ["c", "d"] console.log(arr);//(5) ["a", "b", "e", "f", "g"] var arr2=['a', 'b', 'c', 'd', 'e', 'f', 'g']; var newArr2=arr2.splice(2); console.log(newArr2);//(5) ["c", "d", "e", "f", "g"] console.log(arr2);//(2) ["a", "b"] var arr3=['a', 'b', 'c', 'd', 'e', 'f', 'g']; var newArr3=arr3.splice(2, 0, 'm', 'n'); console.log(newArr3);//[] console.log(arr3);//["a", "b", "m", "n", "c", "d", "e", "f", "g"] var arr4=['a', 'b', 'c', 'd', 'e', 'f', 'g']; var newArr4=arr4.splice(2, 2, 'm', 'n'); console.log(newArr4);//(2) ["c", "d"] console.log(arr4);//(7) ["a", "b", "m", "n", "e", "f", "g"] </script> </body> </html> indexOf(value, start) 检测数据在数组中第一次出现的位置 如果有start值,则检测位置从start处开始 lastIndexOf(value) 检测数据在数组中最后一次出现的位置 不存在则为-1 兼容性:IE9+ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var arr=['a', 'b', 'c', 'd', 'a', 'b', 'c']; var pos=arr.indexOf('c'); console.log(pos);//2 var pos=arr.lastIndexOf('c'); console.log(pos);//6 var pos=arr.indexOf('m'); console.log(pos);//-1 // 自己封装兼容IE9以下版本的indexOf function ArrIndexOf(arr, value){ for(var i=0;i<arr.length;i++){ if(arr[i]===value){ return i; } } return -1; } var pos=ArrIndexOf(arr, 'c'); console.log(pos);//2 </script> </body> </html> str.charAt(index) 返回str字符串中index位置的字符 str.charCodeAt(index) 返回str字符串中index位置的字符的字符编码 str[index] 兼容性IE7+ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var str='hello cyy~'; console.log(str[3]);//l console.log(str.charAt(3));//l console.log(str.charCodeAt(3));//108 </script> </body> </html> str.indexOf(value) str.lastIndexOf(value) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var str='hello cyy~'; console.log(str.indexOf('l'));//2 console.log(str.indexOf('llo'));//2 console.log(str.lastIndexOf('l'));//3 </script> </body> </html> 字符串截取 str.slice(start, end) 没有end则默认截取到最后 包含左边不包含右边 如果为负数,则转换为长度+该负数 str.substring(start, end) 与slice基本一致 如果有负数,则自动转换为0 如果前面的数字小于后面的数字,会默认将顺序对换 str.substr(start, len) 截取len为0或者负数时,返回为空 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var str='hello cyy~'; console.log(str.slice(2,5));//llo console.log(str.slice(2));//llo cyy~ console.log(str.slice(-7,5));//lo console.log(str.substring(2,5));//llo console.log(str.substring(2));//llo cyy~ console.log(str.substring(-7,5));//hello console.log(str.substring(5,2));//llo console.log(str.substr(2,5));//llo c console.log(str.substr(2));//llo cyy~ console.log(str.substr(-7,5));//lo cy </script> </body> </html> 获取扩展名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var file="cyy.com.jpg"; function getExtension(filename){ var pos=filename.lastIndexOf("."); return filename.substr(pos); } console.log(getExtension(file));//.jpg </script> </body> </html> str.split(" ") 字符串转数组 str.replace("", "") 字符串替换 replace() 不会改变原字符串 并且replace()只替换第一个,不是全局替换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var str="cyy.com.jpg"; var arr=str.split("."); console.log(arr);//(3) ["cyy", "com", "jpg"] var arr2=str.split(""); console.log(arr2);//(11) ["c", "y", "y", ".", "c", "o", "m", ".", "j", "p", "g"] var newStr=str.replace(".","-"); console.log(str);//cyy.com.jpg console.log(newStr);//cyy-com.jpg </script> </body> </html> str.toUpperCase() 字符串转大写 str.toLowerCase() 字符串转小写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var str="cyy"; console.log(str.toUpperCase());//CYY var str2="CYY"; console.log(str2.toLowerCase());//cyy </script> </body> </html>
连字符转驼峰 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 方法一 function toCamel(str){ var arr=str.split("-"); var len=arr.length; for(var i=1;i<len;i++){ var word=arr[i]; word=word.charAt(0).toUpperCase()+word.substr(1); arr[i]=word; } return arr.join(""); } console.log(toCamel("border-left-color"));//borderLeftColor console.log(toCamel("margin-top"));//marginTop // 方法二 function toCamel2(str){ var arr=str.split("-"); var len=arr.length; var newStr=arr[0]; for(var i=1;i<len;i++){ var word=arr[i]; word=word.charAt(0).toUpperCase()+word.substr(1); newStr+=word; } return newStr; } console.log(toCamel2("border-left-color"));//borderLeftColor console.log(toCamel2("margin-top"));//marginTop </script> </body> </html> Math对象 Math.min() 最小值,如果出现非数字,则返回NaN Math.max() 最大值,如果出现非数字,则返回NaN Math.floor() 舍去 Math.ceil() 进一 Math.round() 四舍五入 Math.abs() 绝对值 Math.random() 随机数 Math.random()方法,返回的是一个大于等于0并且小于1的随机数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //Math.random()生成一个0-1之间的随机数(如0.1~0.9),包含0不包含1 //指定生成2-5之间的随机整数 //可能是2,3,4,5 //生成随机整数的个数=5-2+1=4 //最小值=0.1*个数+2=2.4 //最大值=9.9*个数+2=5.6 //获取n-m之间的随机整数 function getRandom(n,m){ var len=m-n+1; var num=Math.floor(Math.random()*len+n); return num; } console.log(getRandom(2,5)); </script> </body> </html> new Date() 创建时间对象 getFullYear() 年份 getMonth() 月份 0-11 getDate() 日 getDay() 星期 0-6 getHours() 小时 getMinutes() 分钟 getSeconds() 秒 getTime() 时间戳 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var time=new Date(); var weekArr=['日','一','二','三','四','五','六']; console.log(time);//Tue Feb 04 2020 22:04:42 GMT+0800 (中国标准时间) var year=new Date().getFullYear();//2020 var month=new Date().getMonth()+1;//2 var date=new Date().getDate();//4 var week=new Date().getDay();//2 var minute=new Date().getMinutes();//6 var hour=new Date().getHours();//22 var second=new Date().getSeconds();//5 console.log(new Date().getTime());//1580825165053 document.write('现在是'+year+'年'+month+'月'+date+'日'+hour+'时'+minute+'分'+second+'秒'+' 星期'+weekArr[week]); </script> </body> </html>
设置时间的方法 setFullYear() setMonth() 如果月份大于12,月份=月份-12,此时年份会+1 setDate() setHours() setMinutes() setSeconds() setTime() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var time=new Date(); time.setFullYear(2021); console.log(time);//Thu Feb 04 2021 22:17:19 GMT+0800 (中国标准时间) // 计算50天后是星期几 // 方法一 var today=new Date(); today.setDate(today.getDate()+50); console.log(today.getDay());//3 //方法二 var today2=new Date(); var newToday2=new Date(today2.getFullYear(),today2.getMonth(),today2.getDate()+50); console.log(newToday2.getDay());//3 </script> </body> </html>
|
|