阅读 1526

js常用内置对象及方法

前言

常用内置对象及方法有:Array数组对象、Math方法、String方法、日期对象的方法。

一、Array 数组对象

1、push() 在数组尾部添加一个或者多个元素,并且返回数组的新长度

      arr=[1,2,3]
      arr.push("a","b"); //插入字符串
      arr.push(6); //在数组的尾部插入一个新元素
      arr.push(6,7,8); //在数组的尾部插入多个新元素
      a=arr.push(6,7,8); //通过添加到尾部元素后返回数组的新长度
      console.log(arr);
      console.log(a);
复制代码

会返回数组的新长度

2、unshift() 在数组头部添加一个或者多个元素,并且返回数组的新长度

      arr=[1,2,3]
      arr.unshift(0); //在数组的头部插入一个新元素
      arr.unshift(-3,-2,-1,0); //在数组的头部插入多个新元素
      var a=arr.unshift(-3,-2,-1,0); //返回数组的新长度
      console.log(arr);
      console.log(a);
复制代码

会返回数组的新长度

3、pop() 删除数组尾部的最后一个元素,并且将这个被删除的元素返回

      arr=[1,2,3,4,5,6]
      arr.pop(); //pop中没有参数,删除数组的最尾部一个元素
      var a=arr.pop(); //pop删除数组 的最尾部一个元素,并且将被删除的元素返回
      console.log(arr);
      console.log(a);
复制代码

将这个被删除的元素返回

4、shift() 删除数组的第一个元素,并且返回被删除的元素

      arr=[1,2,3,4,5,6]
      arr.shift(); //将数组的第一个元素删除
      var a=arr.shift(); //将数组的第一个元素删除,并且返回这个被删除的元素
      console.log(arr);
      console.log(a);
复制代码

返回被删除的元素

不管删除还是添加都会改变数组的长度

5、concat() 数组的合并,合并后会返回一个新数组,原来的两个数组不会变化

      var arr=[1,2,3,4];
      var arr1=[5,6,7,8];
      var arr2=arr.concat(arr1);  // 数组的合并,合并后会返回一个新数组,原来的两个数组不会变化
      console.log(arr2);
      var arr3=arr.concat(0,-1,-2); // 数组除了可以合并数组,也可以合并元素,将多个元素与原数组合并,返回新数组
      console.log(arr3)
      var arr4=arr.concat(0,arr1,["A","B"]); // concat既可以合并元素,也可以合并数组
      console.log(arr4)
      var arr5=arr.concat(); // 如果直接使用concat,就可以完成数组的复制功能
      console.log(arr5)
复制代码

6、join() 将数组的每个元素以指定的字符连接形成新字符串返回

      var arr=[1,2,3,4,5]; // join就是将数组的每个元素以指定的字符连接形成新字符串返回
      var str=arr.join( ); // 将数组合并为字符串返回,默认使用逗号,连接
      console.log(str);
      var str=arr.join("|"); // 在这里join的参数是字符串的连接符v
      console.log(str);
      var str=arr.join(""); // ""作为连接符,会将数组元素首尾相连成为字符串
      console.log(str);
复制代码

7、splice() 这个方法可以从指定的位置删除给定数量的元素,并且在这个位置插入需要的元素,并且返回被删除的元素组成的新数组

splice(从什么位置开始,删除多少个元素,要插入的元素);

1)splice 刪除全部数组返回值

      var arr1=arr.splice(); // 没有任何参数时,返回一个空数组
      console.log(arr1);
      第一个参数是0,表示从第0位开始,第二个参数删除多少个没有填,意味着删除到尾部
      var arr1=arr.splice(0); // 将所有数据转移到新数组
      console.log(arr1);
复制代码

2)splice 可以从前向后,也可以从后向前

      var arr1=arr.splice(0,3); // 从第0位开始删除3个元素,返回到新数组arr1
      var arr1=arr.splice(-2); // 从第几位开始可以是负数,从后向前数(倒数),因为没有给要删除的数量,因此删除到尾部
      var arr1=arr.splice(0,1,-1); // 从数组的第0位开始,删除1个元素,并且在这个位置插入一个元素 -1,替换
      var arr1=arr.splice(-1,1,0); // 数组的最后一位替换位0
      var arr1=arr.splice(2,2,10,11); // 将数组中第二位开始两位元素替换为10,11
复制代码

3)splice 可以插入一个,可以插入多个元素

      var arr=[1,2,3,4,5];
      arr.splice(2,0,-1); // 在数组的第二位插入一个元素 -1
      console.log(arr);
      arr.splice(2,0,-1,-2,-3,-4); // 在数组的第二位插入多个元素
      console.log(arr);
复制代码

8、slice(start,end) 按指定位置截取复制数组的内容,返回新数组,不会改变原数组

从下标 start 开始,截取到 end,包括 start 但不包括 end。第二个参数不写,默认截取到尾部,只能从前向后截取

      var arr1=arr.slice(1,4); // 从第1位开始截取到第4位之前
      var arr1=arr.slice();   // 复制数组arr
      var arr1=arr.slice(0);  // 复制数组
      var arr1=arr.slice(3);  //从第三位截取到尾部复制
      var arr1=arr.slice(-2); //从倒数第二位开始截取到尾部
      var arr1=arr.slice(-3,-1); //从倒数第三位到倒数第一位
复制代码

9、indexOf(要查询得元素,从什么位置开始查询) 位置就是下标

在数组中查找元素,找到返回元素下标,找不到返回-1,查询到第一个后,就返回下标不再继续查询

1)不能查询对象

      var arr=[{a:1},{a:2},{a:3},{a:4}];
      var  index=arr.indexOf({a:1}); // 这是错误得,查找不到,因为查找得是新对象,地址不同
      console.log(index);
复制代码

查询不到返回-1

2)查询所有相同的元素

      var arr=[1,3,1,2,3,5,2,3,4,6];
      var index=arr.indexOf(3); // 这样只能查询到第一个3 (下标为1)
      console.log(index);
      var index=arr.indexOf(3,2); // 这样只能查询到第二个3 (下标为4)
      console.log(index);
复制代码

查询全部相同的元素利用循环查询

      var arr=[1,3,1,2,3,5,2,3,4,6];
      var index=0; // 使用循环,查询到数组中所有为3的元素,并打印下标
      while(true){
           index=arr.indexOf(3,index);
           console.log(index);
           if(index===-1) break; // 查询到最后,查不到时返回-1  如果为-1 跳出循环,不再查询
           index++;
      }
复制代码

10、Array.from(类似于数组的列表) 转为数组

1)根据标签名获取到标签列表 (获取到的是列表,不是数组,不能直接使用数组的方法

      var divs=document.getElementsByTagName("div"); // 获取html元素标签名是div的元素

      divs.pop();// 错误,不是数组不能直接使用数组的方法

      var arr=Array.from(divs);  // ES6 的写法,把divs这个列表,转为数组
      // ES5写法 =>  var arr=Array.prototype.slice.call(divs);
复制代码

2)给所有 div 元素添加点击事件

      var divs=document.getElementsByTagName("div");
      var arr=Array.from(divs); // 把获取到的所有div转成数组

      for(var i=0;i<arr.length;i++){ // 遍历数组给每个div添加点击事件
          arr[i].onclick=clickHandler;
      }
      function clickHandler(){
          console.log(this);
          var index=arr.indexOf(this);
          console.log(index);  // 这样就可以判断点击得是列表中得第几个元素
      }
复制代码

11、lastIndexOf(查找得元素,从什么位置开始查找) 从后向前查找

      var arr=[1,3,1,2,3,5,2,3,4,6];
      var index=arr.lastIndexOf(3);
      console.log(index); // 打印下标 7
复制代码

12、遍历数组(forEach 和 map)

1)forEach

arr.forEach(function(数组中的元素,每个元素对应的下标,数组自身){ })

      var arr=[1,2,3,5,6,7,8,9];
      arr.forEach(function(a,b,c){
         console.log(a,b,c);
      })
复制代码

forEach没有返回值,使用return无效

2)map会返回一个与原数组长度相等的新数组

arr.map(function(item,index,arr){ })

      var arr=[3,5,7,9,1,2,4];
      var arr2=arr.map(function(item,index,arr){
            // console.log(item,index,arr);
            // return "a";
            return item+10;  // 在map中使用return 就是在对应的下标中添加对应的数据
      });
      console.log(arr2);
复制代码
      // 遍历数组arr,将大于4的元素生成一个新的数组(新数组中会有undefined)
      var arr=[1,3,5,7,2,4,6,8];
      var arr1=arr.map(function(item){
            if(item>4){
                return item;
            }
      });
      console.log(arr1); 
复制代码

map有返回值,与原数组等长的新数组,元素内容由return确定,不写return返回undefined

13、arr.sort() 排序,仅能10以内数字

缺点:按字符排序 sort(function(后一项,前一项){}) 仅适用于数值

1)数值排序

      var arr=[1,3,5,7,2,4,6,8];
      arr.sort(function(a,b){      
           return  a-b;  // 从小到大   
           // return  b-a;  // 从大到小
        })    
        console.log(arr);
复制代码

2)字符排序,先把字符转换成Unicode编码

      var arr=["n","c","g","h","a","j","y","k"];
      arr.sort(function(a,b){   // 将字符排序
           console.log(a.charCodeAt(0),b.charCodeAt(0)); // str.charCodeAt(0) => 将str字符串的第0项转换为Unicode编码
           return a.charCodeAt(0)-b.charCodeAt(0);  // a-z
           // return b.charCodeAt(0)-a.charCodeAt(0);  // z-a
        })
        console.log(arr);
复制代码

14、some()

判断数组中是否存在满足条件的元素,如果有就返回true,如果没有就返回false
遍历数组,如果有一个满足条件的元素,都会直接返回true,不继续向后遍历

        var arr=[1,4,6,2,7,9,0];
        var bool=arr.some(function(item,index,arr){  // 遍历数组,是否存在大于5的元素
           return item>5;
        });
        console.log(bool);
复制代码

15、every()

var bool=arr.every(function(item,index,arr){ });
判断数组中是否每一个都满足条件,如果有一个不满足条件,直接跳出,所有都满足时返回为ture

        var arr=[1,4,6,2,7,9,0];
        var bool=arr.every(function(item,index,arr){   // 判断数组中 是否所有的元素都大于2
            return item>2;
        });
        console.log(bool); 
复制代码

16、filter()

要求是将数组中大于5的返回到一个新数组
首先想到map,map只能实现原数组和新数组长度相同

        var arr1=arr.filter(function(item,index,arr){
           return item>5;
        });
        console.log(arr1);
复制代码

17、reduce()

从数组的第1位开始遍历,第0位没有遍历,下标从1开始
刚开始value是数组的第0项,后面每次value都是undefined
如果在函数中使用return 就会将返回值在下次数组的遍历中赋予value

        var arr=[10,3,4,7,3,5,8,9];
        arr.reduce(function(value,item,index,arr){
            // 循环的次数是数组的个数-1
            // value就是上次遍历return的值,第0次遍历时(最开始时是数组的第0项)
            console.log(value);
            return value+1
        }) 
复制代码

累积相加数组元素求和
reduce返回的是一个值,就是遍历到最后一次return出来的值

        var arr=[10,3,4,7,3,5,8,9];
        var sum=arr.reduce(function(value,item){
            return value+item;
        });
        console.log(sum);
复制代码

希望求累积相加数组元素求和,在基数100的前提下,100就是初始值

        var arr=[10,3,4,7,3,5,8,9];
        var sum=arr.reduce(function(value,item){
            // 函数后面的参数就是累加的初始值
            console.log(value);
            return value+item;
        },100); 
复制代码

18、Array.isArray()

用来判断是不是数组

        var arr=[1,2,3,4];
        var obj={a:1};
        console.log(typeof arr);
        // 判断元素是否是数组,如果是数组返回true否则返回false,ES6
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));
复制代码

二、Math方法

1、π和根号2

      Math.PI; // Π
      Math.SQRT2; // 根号2  常量,只能使用不能修改
复制代码

2、取整

1)向下取整 Math.floor()

      a=Math.floor(25.6);
      console.log(a);
复制代码

2)向上取整 Math.ceil()

      b=Math.ceil(25.6);
      console.log(b);
复制代码

3、四舍五入 Math.round()

方法存在误差

      c=Math.round(25.5);
      console.log(c);
复制代码

负数的四舍五入,一般都是转换为正数处理

4、最大值和最小值

1)最小值Math.min()

      c=Math.min(4,7,8,3,1,9,6,0,3,2)
      console.log(c)
复制代码

2)最大值 Math.max()

      c=Math.max(4,7,8,3,1,9,6,0,3,2)
      console.log(c)
复制代码

5、随机数 Math.random

      c=Math.random()*10+1; // 随机1-10之间的任意数
      console.log(c)
复制代码

随机的数不是一个整数一般做取整处理

      c=Math.random()*10+1;
      console.log(Math.floor(c)); // 向下取整
复制代码

6、其他的方法

三、String 字符串方法

1、charAt()

获取下标位置的字符,和str[1]; 一样的

      var str="abcdef";
      console.log(str.charAt(3));
复制代码

2、charCodeAt()

将下标位置的字符转为Unicode编码

      var str="abcdef";
      console.log(str.charCodeAt(2));
复制代码

3、String.fromCharCode()

将Unicode编码转为字符串

      n=String.fromCharCode(65); // 将Unicode编码转为字符串
      console.log(n);
复制代码

4、str.concat()

连接字符串,效果等同于拼接符+

        var str="abc";
        var str1="def";
        var str2=str.concat(str1);   // var str2=str+str1; 这个等同于concat
        console.log(str2); 
复制代码

5、 indexOf() 、lastIndexOf()

和数组中indexOf相同查找字符所在下标

      var arr=[
        {id:1001,name:"计算机",price:4999},
        {id:1002,name:"电机",price:1999},
        {id:1003,name:"记事本",price:9},
        {id:1004,name:"课本",price:99},
        {id:1005,name:"计算器",price:149},
      ]; 
 
        // 模糊查找
       var arr1=arr.filter(function(item){
             return item.name.indexOf("本")>-1 
             });
        console.log(arr1); 
复制代码

6、replace()

替换,类似于数组中的splice();
replace不修改原字符的内容,会返回一个被修改后的新字符串
如果出现两个相同的元素,那么只修改第一次被查找到的元素

      var str="abcdecf";
      var str1=str.replace("c","z");
      str.replace()
      console.log(str,str1);
复制代码

7、slice(start,end)

slice (从下标几开始,到下标几之前结束) 截取复制字符串
允许有负值,负值表示从后向前

      var str="abcdecf";
      var s=str.slice(1,2);
      console.log(s);
复制代码

8、substring()

      var str="abcdecf";
      var s=str.substring(2,4); // 和slice相似
      // substring不允许负数,所有的负值指0之前,因此负数都是0
      // 可以逆向截取赋值
      var s=str.substring(4,2);
      console.log(s);
复制代码

9、substr (从下标几开始,截取长度);

      var str="abcdecf";
      var s=str.substr(-2,5); //从下标几开始,截取长度
      console.log(s);
复制代码

10、split(分隔符) 将字符串以分隔符进行分割转换为数组

      var str="a,b,c,d,e,f";
      var arr=str.split(",");
      console.log(arr);
复制代码

11、reverse();数组元素倒序或者反转,这是一个数组方法

      var str="abcdefg";
      var str1=str.split("").reverse().join("");   //  连缀
      console.log(str1)
复制代码

12、字符串转换大小写

1)str.toLowerCase转为小写

      console.log("ABC".toLowerCase()); // 将字符串转换成小写
复制代码

2)str.toUpperCase转为大写

      console.log("abc".toUpperCase()); // 将字符串转换成大写
复制代码

三、日期对象

1、创建日期对象

      var date=new Date(); // 创建日期对象
复制代码

2、获取日期

      var date=new Date(); 
      date.getFullYear(); // 获取年份
      date.getYear();   // 获取的年份是从1900年开始计算的,有问题
      date.getMonth()+1; // 获取月份 从0开始
      date.getDate();  // 获取日期
      date.getDay();   // 获取星期  从0开始  0就是星期日 1是星期1
      date.getHours();   // 获取小时
      date.getMinutes(); // 获取分钟
      date.getSeconds(); // 获取秒
      date.getMilliseconds();// 获取毫秒
      console.log(date);
复制代码

2、以上日期均可设置

      var date=new Date(); 
      date.setFullYear(2021);
      date.setMonth(12); // 1月,进位了年份+1 是从0开始的;
      date.setDate(40); // 设置进位了
      date.setHours(date.getHours() + 2); // 设置为现在时间的2小时后
      date.getUTCFullYear(); // 凡是带有UTC都是格林尼治时间
      date.toString(); // 直接转换为字符串
      date.toLocaleString(); // 转换为本地(windows上)设置格式时间字符串
      date.toUTCString(); // 转换为格林尼治时间字符串
      console.log(date);
复制代码

3、时间戳

      date.getTime(); // 毫秒数,是计算从1970年1月1日 00:00:00 到现在的毫秒数 
复制代码

时间会一直流逝,这个数据将会一直变大,每毫秒获取值都不同,因此这个数字永远不重复
浏览器认为每次请求的地址如果相同时,会先查看浏览器缓存是否存在,如果有就用本地缓存
可以通过时间戳使每次访问的地址都不同,避免浏览器使用本地缓存

本文使用 mdnice 排版

文章分类
前端
文章标签