收藏 | JavaScript常见使用方法大全详细整理

港控/mmm° 2023-02-17 11:26 11阅读 0赞

##### String常用方法： #####

1.substring(start, end) 用于提取字符串中介于两个指定下标之间的字符

var str="Hello world!"
    document.write(str.substring(3)); //lo world!

2.charAt(index) 返回指定索引处的字符串

Var str= ”abc8ABCabc”;
    str.charAt(1);   // b

3.concat 连接多个字符串，返回连接后的字符串的副本

var str1 =  ”aaa”;
    var str2 = “bbb”;
    str1.concat(str2); // aaabbb

4.lastIndexOf() 返回str在父串中最后一次出现的位置，若没有则返回-1

var str = ‘wredesf’;
    str.lastIndexOf(‘e’); //5
    与indexof类似

5.replace(str1,str2) str1也可以为正则表达式，用str2替换str1

var str = ‘aaa’;
    str.replace(‘bbb’, ‘a’) // bbbbbbbbb
    正则替换：   Var str1 = ‘123abbc234’;
    str1.replace(/\d/g, ‘**’) // ******abbc******

6.call()

7.apply()

8.split(start, num) 将字符串分割为字符数组，num为从头开始执行分割的最大数量

var str = “哈哈.和.zip”;
    str.split(‘.’); // [‘哈哈’, ‘和’, ‘zip’];

9.substr() 从字符索引start的位置开始，返回长度为length的子串

var str = “哈哈.和.zip”;
    str.substr(1, 3); // 哈.和

10.slice(start, end) 可从已有的数组中返回选定的元素可从已有的数组中返回选定的元素

Var str = “哈哈.和.zip”;
    想要获取zip后缀：  str.slice(str.lastIndexOf(‘.’) + 1);  // zip

##### Array常用方法： #####

1.push() 后增 向数组后添加一个新的元素，并返回新数组的长度

var a = [1,2,3];
    var b = a.push(4); 
    ==> a //[1, 2, 3, 4];

2.unshift() 前增 可以向数组前添加一个或多个元素，并返回新的长度

var a = [1,2,3];
    var b = a.Unshift(4, 5); 
    ==> a //[4, 5, 1, 2, 3];

3.pop() 后删

var a = [1,2,3];
    var b = a.pop(); 
    ==> a //[1, 2];

4.shift() 前删

var a = [1,2,3];
    var b = a.shift(); 
    ==> a //[2, 3];

5.concat() 合并两个或多个数组

var a = [1,2,3];
    var b = [3, 4, 5]; 
    Var c = a.concat(b);
    ==> c //[1, 2, 3, 4, 5];

6.splice() 修该删除

7.slice() 剪切

8.join() 将数组转换为字符串

var str = [‘a’, ‘b’];
    str.join(‘-’)   // a-b

9.sort() 排序

var a = ['a','b','d','c']
    a.sort() //['a','b','c','d']

10.reverse() 颠倒顺序

var a = [1,3,2,7,6]
    a.reverse() // [6,7,2,3,1]

11.every() 对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5];
    var b = a.every(function(current,index,array){
        
      return current < 6;
    });
    var c = a.every(function(current,index,array){
        
      return current < 3;
    });
    b==>  // true 
    C==>  // false

12.some() 对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5];
    var b = a.some(function(current,index,array){
        
      return current > 4;
    });
    var c = a.some(function(current,index,array){
        
      return current > 5;
    });
    b==>  // true 
    C==>  // false 
    还有filter() 过滤， find() 查找(ES6新增的方法)，map() 格式化数组，includes（）数组是否包含某一项，Array.isArray()方法 判断一个元素是否为数组。indexOf()和lastIndexOf()等很多方法同时可以用于数组。

##### Object常用方法： #####

1.Object.keys()会返回一个给定对象的自身可枚举属性组成的数组  
2.Object.values()：返回一个给定对象自身的所有可枚举属性值的数组  
3.Object.entries()：返回一个给定对象自身可枚举属性的键值对数组  
4.Object.fromEntries()：把键值对列表转换为一个对象，是Object.entries()的逆操作

let obj = {
         a: 1, b: 2, c: 3 };
    let keys = Object.keys(obj);
    let values = Object.values(obj);
    let entries = Object.entries(obj);
    keys; // ['a','b','c']
    values; // [1,2,3]
    entries; // [['a',1],['b',2],['c',3]]
    let fromEntries = Object.fromEntries(entries);
    fromEntries; // {a: 1, b: 2, c: 3}

5.hasOwnProperty()：返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。  
6.Object.assign()：用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

##### 日期: #####

1.Date()：返回当日的日期和时间。  
var date = new Date();

2.从 Date 对象返回一个月中的某一天 (1 ~ 31)。  
date.getDate(); //12

3.从 Date 对象返回一周中的某一天 (0 ~ 6)。  
date.getDay(); //5

4.从 Date 对象返回月份 (0 ~ 11)。  
date.getMonth(); //5，真实的月份是5+1

5.从 Date 对象以四位数字返回年份。  
date.getFullYear(); //2020

6.返回 Date 对象的小时 (0 ~ 23)。  
date.getHours(); //7

7.返回 Date 对象的分钟 (0 ~ 59)。  
date.getMinutes(); //53

8.返回 Date 对象的秒数 (0 ~ 59)。  
date.getSeconds(); //29

9.返回 Date 对象的毫秒(0 ~ 999)。  
date.getMilliseconds(); //82

10.返回 1970 年 1 月 1 日至今的毫秒数。  
date.getTime(); //1591919609082

11.返回1970年1月1日午夜到指定日期（字符串）的毫秒数。  
Date.parse();  
var d = Date.parse(“2020-06-12”);  
console.log(d) //1591920000000

数值转换：  
1.ceil(x)：对数进行上舍入。  
Math.ceil(2.3) // 3

2.floor(x)：对数进行下舍入。  
Math.floor(2.3); //2

3.max(x,y)：返回 x 和 y 中的最高值。  
Math.max(2,8); // 8

4.min(x,y)：返回 x 和 y 中的最低值。  
Math.max(2,8); //2

5.random()：返回 0 ~ 1 之间的随机数。  
Math.random(); //0.5719701157094914

6.round(x)：把数四舍五入为最接近的整数。  
Math.round(2.6); //3

##### JS全局函数和属性 #####

1.decodeURI()：解码某个编码的 URI。encodeURI()：把字符串编码为 URI。

var test1="http://www.w3school.com.cn/My first/"
    document.write(encodeURI(test1)+ "<br />") //http://www.w3school.com.cn/My%20first/
    document.write(decodeURI(test1)) //http://www.w3school.com.cn/My first/

2.decodeURIComponent()：解码一个编码的 URI 组件。encodeURIComponent()：把字符串编码为 URI 组件。

var test1="http://www.w3school.com.cn/My first/"
    document.write(encodeURIComponent(test1)+ "<br />") 
    //http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
    document.write(decodeURIComponent(test1))//http://www.w3school.com.cn/My first/

3.escape()：对字符串进行编码。

document.write(escape("Visit W3School!") + "<br />") //Visit%20W3School%21
    document.write(escape("?!=()#%&")) // %3F%21%3D%28%29%23%25%26

4.eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。

eval("x=10;y=20;document.write(x*y)")  //200
    document.write(eval("2+2")) //4
    var x=10
    document.write(eval(x+17)) //27

5.isNaN()：检查某个值是否是数字。

document.write(isNaN(123));  //false
    document.write(isNaN(-1.23));  //false
    document.write(isNaN(5-2));  //false
    document.write(isNaN(0));  //false
    document.write(isNaN("Hello"));  //true
    document.write(isNaN("2005/12/12"));  //true

6.Number()：把对象的值转换为数字。

var test1= new Boolean(true);
    var test2= new Boolean(false);
    var test3= new Date();
    var test4= new String("999");
    var test5= new String("999 888");
    document.write(Number(test1)+ "<br />"); // 1
    document.write(Number(test2)+ "<br />"); // 0
    document.write(Number(test3)+ "<br />"); // 1256657776588
    document.write(Number(test4)+ "<br />"); // 999
    document.write(Number(test5)+ "<br />"); // NaN

7.parseFloat()：解析一个字符串并返回一个浮点数。

document.write(parseFloat("10"); //10
    document.write(parseFloat("10.00"); //10
    document.write(parseFloat("10.33"); // 1033
    document.write(parseFloat("34 45 66"); //34
    document.write(parseFloat(" 60 "); //60
    document.write(parseFloat("40 years"; //40
    document.write(parseFloat("He was 40"; //NaN

8.parseInt()：解析一个字符串并返回一个整数。

parseInt("10");		//返回 10
    parseInt("19",10);	//返回 19 (10+9)
    parseInt("11",2);	//返回 3 (2+1)
    parseInt("17",8);	//返回 15 (8+7)
    parseInt("1f",16);	//返回 31 (16+15)
    parseInt("010");	//未定：返回 10 或 8

9.String()：把对象的值转换为字符串。

var test1= new Boolean(1);
    var test2= new Boolean(0);
    var test3= new Boolean(true);
    var test4= new Boolean(false);
    var test5= new Date();
    var test6= new String("999 888");
    var test7=12345;
    document.write(String(test1)+ "<br />"); //true
    document.write(String(test2)+ "<br />"); //false
    document.write(String(test3)+ "<br />"); //true
    document.write(String(test4)+ "<br />"); //false
    document.write(String(test5)+ "<br />"); //Wed Oct 28 00:17:40 UTC+0800 2009
    document.write(String(test6)+ "<br />"); //999 888
    document.write(String(test7)+ "<br />"); //12345

10.unescape()：对由 escape() 编码的字符串进行解码。

var test1="Visit W3School!"
    test1=escape(test1)
    document.write (test1 + "<br />") //Visit%20W3School%21
    test1=unescape(test1)
    document.write(test1 + "<br />") //Visit W3School!

##### DOM相关操作 #####

1.getElementByID(id) 通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.

如果id在元素中不是唯一的,那么获得的将是第一个ID。
    <div id="divid">测试</div>
    <script language="javascript">
    var div=document.getElementByID("divid");
    alert (div.nodeName);
    </script>

2.getElementsByName(name)仅用于input radio checkbox等元素,返回名字为name的元素数组。

<div name="george"></div>
    <input name="george"></div>
    <script language=javascript>
    var ge=document.getElementsByName("george");
    alert (georges.length);  //获取georges个数,对div唔效果
    </script>

3.getElementsByTagName(tagname) 返回具有tagname的元素列表数组.处理大的DOM结会用到它。

4.appendChild(node) 增加内容向当前对象追加节点

<div id="test">123</div>
    <script type="text/javascript">
    var newdiv=document.createElement("div");
    var newtext=document.createTextNode("A new div");
    newdiv.appendChild(newtext);
    document.getElementById("test").appendChild(newdiv);
    </script>

5.removeChild(childreference)移除当前节点的子节点,并返回节点

<div id="father"><div id="child">A child</div></div>
    <script type="text/javascript">
    var childnode=document.getElementById("child");
    var removednode=document.getElementById("father").removeChild(childnode)
    </script>

6.cloneNode(deepBoolean)  
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.

7.insertBefore(newElment,targetElement) 插入新的节点，在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.

<body>
    <span id="lovespan">熊掌我所欲也!</span>
    </body>
    <script type="text/javascript">
    var lovespan=document.getElementById("lovespan");  //获取id
    var newspan=document.createElement("span"); 
    var newspanref=document.body.insertBefore(newspan, lovespan);
    newspanref.innerHTML="鱼与";
    </script>

8.childeNodes 返回所有子节点对象,例如

<ul id="mylist">
    <li>美国</li>
    <li>意大利</li>
    <li>加拿大</li>
    </ul>
    <script>
    var msg="" ;
    var mylist=document.getElementById("mylist")
    for (i=0; i<mylist.childNodes.length; i++){
        
       var li=mylist.childNodes[i];
       msg+=li.innerText;
    }
    alert(msg);
    </script>

9.innerHTML 向执行节点插入数据

<div id="bbb"><span id="aaa">我拉</span></div>
    <input type=button  value="点击看看">
    <script language="javascript">
    function change()
    {
        
    document.getElementById("aaa").innerHTML="修改修改";
    }
    </script>

10.style这是一个极其重要的属性,可以获取并修改每个单独的样式.  
例如:`document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"`

11.firstChild 返回第一个子节点

12.lastChild 返回最后一个子节点

13.parentNode 返回父节点的对象。

14.nextSibling 返回下一个兄弟节点的对象

15.previousSibling 返回前一个兄弟节点的对象

16.click() 执行元素的一次点击，可以用于通过脚本来触发onClick函数

17.setAttribute方法，设置元素属性

var a=document.createElement("div");        //新建一个DIV
    a.id="div1";      //给新加的DIV命名
    a.style.setAttribute("zIndex",2);     //设置DIV叠放次序
    a.style.setAttribute("textAlign",Dalign);   //对齐方式
    a.style.setAttribute("border","#e6e7e8 1px solid");//边框颜色
    a.style.width=divwidth;      //DIV宽度
    a.style.height=Dheight;      //DIV高度
    a.setAttribute("position","absolute");
    a.style.backgroundColor=Dbgcolor;     //DIV背景
    a.setAttribute("z-index","2");      //DIV叠放次序
    a.style.top = divtop+"px";      //DIV上边距
    a.style.left = divleft+"px";     //DIV左边距   
    a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);
    document.body.appendChild(a);       //新建DIV结束
    document.getElementById（“啊”）.style.display="none"  //隐藏元素
    document.getElementById（“啊”）.style.disabled="true"  //设置不能编辑
    document.getElementById（“啊”）.style.readOnly="true"  //设置只读

###### 每天进步一点点，欢迎关注下方公众号“编程社”，成就更好的自己！ ######

![在这里插入图片描述][20200613232043568.png]

[20200613232043568.png]: https://img-blog.csdnimg.cn/20200613232043568.png