js内置对象：Array  String  Math  Date

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         // 1、构造函数方法创建数组
  10.         var arr=new Array();
  11.         console.log(arr);//[]
  12.  
  13.         var arr2=new Array(3);//指定数组个数
  14.         console.log(arr2);//(3) [empty × 3]
  15.  
  16.         var arr3=new Array(1,2,3);//指定数组元素
  17.         console.log(arr3);//(3) [1, 2, 3]
  18.  
  19.         // 2、字面量表示法创建数组
  20.         var arr4=[1,2,3,4];
  21.         console.log(arr4);//(4) [1, 2, 3, 4]
  22.  
  23.     </script>
  24. </body>
  25. </html>

读取和设置数组元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr4=[1,2,3,4];
  10.         console.log(arr4[0]);//1
  11.         arr4[0]=0;
  12.         console.log(arr4);//(4) [0, 2, 3, 4]
  13.  
  14.     </script>
  15. </body>
  16. </html>

数组长度=数组最大索引值+1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr4=[1,2,3,4];
  10.         console.log(arr4.length);//4  获取数组长度
  11.         arr4.length=3;
  12.         console.log(arr4);//(3) [1, 2, 3]
  13.         arr4[9]=9;
  14.         console.log(arr4);//(10) [1, 2, 3, empty × 6, 9]
  15.         console.log(arr4.length);//10 数组长度永远=最大索引值+1
  16.         // 遍历数组
  17.         var len=arr4.length;
  18.         for(var i=0;i<len;i++){
  19.             console.log(arr4[i]);
  20.         }
  21.  
  22.     </script>
  23. </body>
  24. </html>

数组的栈方法：

push() 从数组最后添加元素，返回数组的新长度

unshift() 从数组的开头添加元素，返回数组的新长度

pop() 删除数组的最后一个元素，返回被删除的那个元素

shift() 删除数组的第一个元素，返回被删除的那个元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr=[1,2,3,4];
  10.         var len=arr.push(5,6);
  11.         console.log(len);//6
  12.         console.log(arr);//(6) [1, 2, 3, 4, 5, 6]
  13.  
  14.         var arr1=[1,2,3,4];
  15.         var len1=arr1.unshift(-1,0);
  16.         console.log(len1);//6
  17.         console.log(arr1);//(6) [-1, 0, 1, 2, 3, 4]
  18.  
  19.         var arr2=[1,2,3,4];
  20.         var n2=arr2.pop();
  21.         console.log(n2);//4
  22.         console.log(arr2);//(3) [1, 2, 3]
  23.  
  24.         var arr3=[1,2,3,4];
  25.         var n3=arr3.shift();
  26.         console.log(n3);//1
  27.         console.log(arr3);//(3) [2, 3, 4]
  28.     </script>
  29. </body>
  30. </html>

数组方法：

join() 数组转字符串

默认分隔符是逗号，可以自定义

reverse() 翻转数组中的元素顺序

sort() 数组排序，默认隐式转换为字符串，然后进行排序

可以自定义参数，用来进行数值的排序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr=[1,2,3,4];
  10.         var str=arr.join();
  11.         console.log(str);// 字符串 1,2,3,4
  12.  
  13.         var arr2=[1,2,3,4];
  14.         var str2=arr2.join('');
  15.         console.log(str2);// 字符串 1234
  16.  
  17.         var arr3=[1,2,3,4];
  18.         var str3=arr3.join('-');
  19.         console.log(str3);// 字符串 1-2-3-4
  20.  
  21.         var arr4=[1,2,3,4];
  22.         var arr4=arr4.reverse();
  23.         console.log(arr4);// (4) [4, 3, 2, 1]
  24.  
  25.         var arr5=[1,24,3,42];
  26.         var arr5=arr5.sort();
  27.         console.log(arr5);// (4) [1, 24, 3, 42]
  28.  
  29.         var arr6=[1,24,3,42];
  30.         var arr6=arr6.sort(function(a,b){return a-b;});
  31.         console.log(arr6);// (4) [1, 3, 24, 42]
  32.  
  33.         var arr7=[1,24,3,42];
  34.         var arr7=arr7.sort(function(a,b){return b-a;});
  35.         console.log(arr7);// (4) [42, 24, 3, 1]
  36.  
  37.     </script>
  38. </body>
  39. </html>

concat() 数组合并

slice(start, end) 数组截取，包含start不包含end

slice(start) 默认从start位置截取到最后

如果start或者end为负数，则等价于 该负数+数组长度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr1=[1,2,3];
  10.         var arr2=[4,5,6];
  11.         var newArr=arr1.concat(arr2);
  12.         console.log(newArr);//(6) [1, 2, 3, 4, 5, 6]
  13.  
  14.         var arr=[0,1,2,3,4,5];
  15.         var slice1=arr.slice(2);
  16.         console.log(slice1);//(4) [2, 3, 4, 5]
  17.         var slice2=arr.slice(2,5);
  18.         console.log(slice2);//(3) [2, 3, 4]
  19.         var slice3=arr.slice(-5);
  20.         console.log(slice3);//(5) [1, 2, 3, 4, 5]
  21.         var slice4=arr.slice(-5,5);
  22.         console.log(slice4);//等价于(1,5)  (4) [1, 2, 3, 4]
  23.  
  24.     </script>
  25. </body>
  26. </html>

数组的拷贝，方法越多越好

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         //数组拷贝，方法越多越好
  10.         var a=[1,2,3,4];
  11.         var b;
  12.  
  13.         b=a;
  14.         console.log(b);
  15.  
  16.         b=a.concat([]);
  17.         console.log(b);
  18.  
  19.         b=a.slice(0);
  20.         console.log(b);
  21.  
  22.         b=[];
  23.         for(var i=0;i<a.length;i++){
  24.             b.push(a[i]);
  25.         }
  26.         console.log(b);
  27.  
  28.     </script>
  29. </body>
  30. </html>

splice(index, count, item...)

splice(index, count) 从Index位置开始，删除count个数据

splice(index, 0, item...) 从index位置开始，添加item...

splice(index, count, item...) 从Index位置开始，删除count个数据，并插入item...

返回值始终是被删除的数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr=['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  10.         var newArr=arr.splice(2, 2);
  11.         console.log(newArr);//(2) ["c", "d"]
  12.         console.log(arr);//(5) ["a", "b", "e", "f", "g"]
  13.  
  14.         var arr2=['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  15.         var newArr2=arr2.splice(2);
  16.         console.log(newArr2);//(5) ["c", "d", "e", "f", "g"]
  17.         console.log(arr2);//(2) ["a", "b"]
  18.  
  19.         var arr3=['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  20.         var newArr3=arr3.splice(2, 0, 'm', 'n');
  21.         console.log(newArr3);//[]
  22.         console.log(arr3);//["a", "b", "m", "n", "c", "d", "e", "f", "g"]
  23.  
  24.         var arr4=['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  25.         var newArr4=arr4.splice(2, 2, 'm', 'n');
  26.         console.log(newArr4);//(2) ["c", "d"]
  27.         console.log(arr4);//(7) ["a", "b", "m", "n", "e", "f", "g"]
  28.     </script>
  29. </body>
  30. </html>

indexOf(value, start) 检测数据在数组中第一次出现的位置

如果有start值，则检测位置从start处开始

lastIndexOf(value) 检测数据在数组中最后一次出现的位置

不存在则为-1

兼容性：IE9+

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var arr=['a', 'b', 'c', 'd', 'a', 'b', 'c'];
  10.         var pos=arr.indexOf('c');
  11.         console.log(pos);//2
  12.         var pos=arr.lastIndexOf('c');
  13.         console.log(pos);//6
  14.         var pos=arr.indexOf('m');
  15.         console.log(pos);//-1
  16.  
  17.         // 自己封装兼容IE9以下版本的indexOf
  18.         function ArrIndexOf(arr, value){
  19.             for(var i=0;i<arr.length;i++){
  20.                 if(arr[i]===value){
  21.                     return i;
  22.                 }
  23.             }
  24.             return -1;
  25.         }
  26.         var pos=ArrIndexOf(arr, 'c');
  27.         console.log(pos);//2
  28.     </script>
  29. </body>
  30. </html>

str.charAt(index) 返回str字符串中index位置的字符

str.charCodeAt(index) 返回str字符串中index位置的字符的字符编码

str[index]  兼容性IE7+

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var str='hello cyy~';
  10.         console.log(str[3]);//l
  11.         console.log(str.charAt(3));//l
  12.         console.log(str.charCodeAt(3));//108
  13.     </script>
  14. </body>
  15. </html>

str.indexOf(value)

str.lastIndexOf(value)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var str='hello cyy~';
  10.         console.log(str.indexOf('l'));//2
  11.         console.log(str.indexOf('llo'));//2
  12.         console.log(str.lastIndexOf('l'));//3
  13.     </script>
  14. </body>
  15. </html>

字符串截取

str.slice(start, end)

没有end则默认截取到最后

包含左边不包含右边

如果为负数，则转换为长度+该负数

str.substring(start, end)

与slice基本一致

如果有负数，则自动转换为0

如果前面的数字小于后面的数字，会默认将顺序对换

str.substr(start, len)

截取len为0或者负数时，返回为空

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var str='hello cyy~';
  10.         console.log(str.slice(2,5));//llo
  11.         console.log(str.slice(2));//llo cyy~
  12.         console.log(str.slice(-7,5));//lo
  13.  
  14.         console.log(str.substring(2,5));//llo
  15.         console.log(str.substring(2));//llo cyy~
  16.         console.log(str.substring(-7,5));//hello
  17.         console.log(str.substring(5,2));//llo
  18.  
  19.         console.log(str.substr(2,5));//llo c
  20.         console.log(str.substr(2));//llo cyy~
  21.         console.log(str.substr(-7,5));//lo cy
  22.     </script>
  23. </body>
  24. </html>

获取扩展名

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var file="cyy.com.jpg";
  10.         function getExtension(filename){
  11.             var pos=filename.lastIndexOf(".");
  12.             return filename.substr(pos);
  13.         }
  14.         console.log(getExtension(file));//.jpg
  15.     </script>
  16. </body>
  17. </html>

str.split(" ") 字符串转数组

str.replace("", "") 字符串替换

replace() 不会改变原字符串

并且replace()只替换第一个，不是全局替换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var str="cyy.com.jpg";
  10.         var arr=str.split(".");
  11.         console.log(arr);//(3) ["cyy", "com", "jpg"]
  12.         var arr2=str.split("");
  13.         console.log(arr2);//(11) ["c", "y", "y", ".", "c", "o", "m", ".", "j", "p", "g"]
  14.  
  15.         var newStr=str.replace(".","-");
  16.         console.log(str);//cyy.com.jpg
  17.         console.log(newStr);//cyy-com.jpg
  18.     </script>
  19. </body>
  20. </html>

str.toUpperCase() 字符串转大写

str.toLowerCase() 字符串转小写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var str="cyy";
  10.         console.log(str.toUpperCase());//CYY
  11.         var str2="CYY";
  12.         console.log(str2.toLowerCase());//cyy
  13.     </script>
  14. </body>
  15. </html>

连字符转驼峰

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         // 方法一
  10.         function toCamel(str){
  11.             var arr=str.split("-");
  12.             var len=arr.length;
  13.             for(var i=1;i<len;i++){
  14.                 var word=arr[i];
  15.                 word=word.charAt(0).toUpperCase()+word.substr(1);
  16.                 arr[i]=word;
  17.             }
  18.             return arr.join("");
  19.         }
  20.         console.log(toCamel("border-left-color"));//borderLeftColor
  21.         console.log(toCamel("margin-top"));//marginTop
  22.  
  23.         // 方法二
  24.         function toCamel2(str){
  25.             var arr=str.split("-");
  26.             var len=arr.length;
  27.             var newStr=arr[0];
  28.             for(var i=1;i<len;i++){
  29.                 var word=arr[i];
  30.                 word=word.charAt(0).toUpperCase()+word.substr(1);
  31.                 newStr+=word;
  32.             }
  33.             return newStr;
  34.         }
  35.         console.log(toCamel2("border-left-color"));//borderLeftColor
  36.         console.log(toCamel2("margin-top"));//marginTop
  37.     </script>
  38. </body>
  39. </html>

Math对象

Math.min() 最小值，如果出现非数字，则返回NaN

Math.max() 最大值，如果出现非数字，则返回NaN

Math.floor() 舍去

Math.ceil() 进一

Math.round() 四舍五入

Math.abs() 绝对值

Math.random() 随机数

Math.random（）方法，返回的是一个大于等于0并且小于1的随机数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         //Math.random()生成一个0-1之间的随机数（如0.1~0.9)，包含0不包含1
  10.         //指定生成2-5之间的随机整数
  11.         //可能是2,3,4,5
  12.         //生成随机整数的个数=5-2+1=4
  13.         //最小值=0.1*个数+2=2.4
  14.         //最大值=9.9*个数+2=5.6
  15.  
  16.         //获取n-m之间的随机整数
  17.         function getRandom(n,m){
  18.             var len=m-n+1;
  19.             var num=Math.floor(Math.random()*len+n);
  20.             return num;
  21.         }
  22.         console.log(getRandom(2,5));
  23.     </script>
  24. </body>
  25. </html>

new Date() 创建时间对象

getFullYear() 年份

getMonth() 月份 0-11

getDate() 日

getDay() 星期 0-6

getHours() 小时

getMinutes() 分钟

getSeconds() 秒

getTime() 时间戳

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var time=new Date();
  10.         var weekArr=['日','一','二','三','四','五','六'];
  11.         console.log(time);//Tue Feb 04 2020 22:04:42 GMT+0800 (中国标准时间)
  12.         var year=new Date().getFullYear();//2020
  13.         var month=new Date().getMonth()+1;//2
  14.         var date=new Date().getDate();//4
  15.         var week=new Date().getDay();//2
  16.         var minute=new Date().getMinutes();//6
  17.         var hour=new Date().getHours();//22
  18.         var second=new Date().getSeconds();//5
  19.         console.log(new Date().getTime());//1580825165053
  20.         document.write('现在是'+year+'年'+month+'月'+date+'日'+hour+'时'+minute+'分'+second+'秒'+' 星期'+weekArr[week]);
  21.     </script>
  22. </body>
  23. </html>

设置时间的方法

setFullYear()

setMonth() 如果月份大于12，月份=月份-12，此时年份会+1

setDate()

setHours()

setMinutes()

setSeconds()

setTime()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var time=new Date();
  10.         time.setFullYear(2021);
  11.         console.log(time);//Thu Feb 04 2021 22:17:19 GMT+0800 (中国标准时间)
  12.  
  13.         // 计算50天后是星期几
  14.         // 方法一
  15.         var today=new Date();
  16.         today.setDate(today.getDate()+50);
  17.         console.log(today.getDay());//3
  18.  
  19.         //方法二
  20.         var today2=new Date();
  21.         var newToday2=new Date(today2.getFullYear(),today2.getMonth(),today2.getDate()+50);
  22.         console.log(newToday2.getDay());//3
  23.     </script>
  24. </body>
  25. </html>

js内置对象的常用属性和方法（Array | String | Date | Math）的更多相关文章

  1. JavaScript中内置对象的一些属性及方法

    Javascript对象总结 JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象 Array对象中常用方法: Concat():表示把几个 ...

  2. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  3. JS内置对象的原型不能重定义？只能动态添加属性或方法？

    昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...

  4. JS内置对象-String对象、Date日期对象、Array数组对象、Math对象

    一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...

  5. js课程 2-8 js内置对象有哪些

    js课程 2-8 js内置对象有哪些 一.总结 一句话总结:JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象. 1.js常用对象有哪些? ...

  6. js内置对象常用方法

    JS内置对象: ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供一个数组的模型.存储大量有 ...

  7. 4月5日--课堂笔记--JS内置对象

    JavaScript 4.5 一.    JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i.       没有参数:创建一个初始容量为0的数组 ii. ...

  8. JS 内置对象 String对象

    JS内置对象   String对象:字符串对象,提供了对字符串进行操作的属性和方法.   Array对象:数组对象,提供了数组操作方面的属性和方法.   Date对象:日期时间对象,可以获取系统的日期 ...

  9. web前端学习（四）JavaScript学习笔记部分（6）-- js内置对象

    1.JS内置对象-什么是对象 1.1.什么是对象: JavaScript中的所有事物都是对象:字符串.数值.数组.函数 每个对象带有属性和方法 JavaScript允许自定义对象 1.2.自定义对象: ...

随机推荐

  1. 注册并加入dn42网络的方法

    简介 https://dn42.net/howto/Getting-started 注册要求: 一个24小时运行的linux/BSD设备 该设备必须支持创建隧道,例如GRE,OpenVpn,IPSec ...

  2. TortoiseSVN使用教程[多图超详细]

    安装及下载client 端 下载Windows 端程序:http://tortoisesvn.net/downloads.一般而言,如果是32-bit的Windows XP 应该使用TortoiseS ...

  3. 教你5分钟做个手机APP[视频]

    天天宅在家里,没什么事做,录个教学视频吧! 发到了视频网站上去根本没人看,伤心ing啊! 不知cnblogs上面是否让我发! 先上一张效果图看看哈: 如果播放不正常请点这里:https://www.b ...

  4. 题解【Luogu P6102 谔运算】

    \[ \texttt{Description} \] 给出一个长度为 \(n\) 的数列 \(a\),求 \(\sum\limits_{i=1}\limits^{n}\sum\limits_{j=1} ...

  5. 超长可视化指南！带你理清K8S部署的故障排查思路，让bug无处遁形

    本文将帮助你厘清在Kubernetes中调试 deployment的思路.下图是完整的故障排查思路,如果你想获得更清晰的图片,请在公众号后台(RancherLabs)回复"troublesh ...

  6. Software Testing Concepts

    Software Testing Concepts

  7. 关于ThinkPHP在Nginx服务器下因PATH_INFO出错的解决方法

    参考:https://www.linuxidc.com/Linux/2011-11/46871.htm 这是一个ningx设置的问题,和TP无关.TP默认使用PATH_INFO来做CURD,而ngin ...

  8. Centos 下设置静态ip地址

       今天小编遇到了需要设置centos(6.4) 下静态ip地址,下面把详细步骤记录下来. 1> 首先打开这个 vi /etc/sysconfig/network-scripts/ifcfg- ...

  9. Visual C# 2015调用SnmpSharpNet库实现简单的SNMP元素查询

    一开始调研发现有几个SNMP的库, 一个是net-SNMP,这个好像是linux用的多 一个是微软自己的WinSNMP,这个没有例子,不太好操作 一个是SnmpSharpNet,这个有些例子比较好, ...

  10. yum安装logstash 不生效

    问题描述 根据logstash的配置方法写了一个配置文件,并放入/etc/logstash/conf.d/目录下,然后我们运行logstash # service logstash start Log ...