原生JavaScript常用方法/基础知识总结

 

栈内存和堆内存 #

刚开始加载页面时浏览器会自带一个js的执行环境,这个环境也叫做“栈内存”,也叫作用域
引用数据类型会先开辟一段内存空间,把属性名和属性值都存起来,叫做“堆内存”
栈内存(作用域)存储的是基本数据类型,代码从上至下执行
当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。
因此,所有在方法中定义的变量都是放在栈内存中的;因为对象的创建成本通常较大,堆内存中的对象不会随方法的结束而销毁,为的是能够反复利用;即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。
因为与垃圾回收机制有关,栈内存和堆内存的作用都是为了使程序运行时占用的内存最小。

深入函数数据类型 #

JS在预解析时将变量或函数预解析到它们能调用的环境(变量运行时环境)中,并且预解析发生在当前 作用域下的
变量和函数进行预解析时是不一样的,变量只是提前声明,而函数是提前声明和定义都完成了
函数执行可以写在任何位置,因为定义的这个操作在预解析时已完成了
函数执行时会形成一个新的私有作用域(栈内存),首先进行的是预解析,其次代码执行
函数执行一次就形成一个新的私有作用域,执行完成之后,当前的私有作用域会销毁

字符串操作 #

  1. 字符串截取方法:
    str.substr(m,n); 从索引m开始,截取n个字符
    str.substring(m,n); 从索引m出开始查找,找到索引n处,不包含n,将查找到的内容返回
    str.slice(m,n); 从索引m出开始查找,找到索引n处,不包含n,将查找到的内容返回;支持负数索引,计算为str.length+负数索引
    var str = "hello world";
    console.log(str.substr(8,3));  //rld
    console.log(str.substring(8,11));  //rld
    

    以上三方法若参数中只有m一个参数,则都截取到str末尾

  2. 查找字符串索引
    str.indexOf(字符); 获取字符串中该字符第一次出现的索引位置
    str.lastIndexOf(字符); 获取字符串中该字符最后一次出现的索引位置
    var str = "hello world";
    console.log(str.indexOf("l"));  //2
    console.log(str.lastIndexOf("l"));  //9
    console.log(str.indexOf("a")); //-1
    

    以上两方法中若没有找到该字符则返回-1;可用来判断是否包含某字符

  3. 大小写转换
    str.toLowerCase(); 将字符串转换为小写字母
    str.toUpperCase(); 将字符串转换为大写字母
    var str = "hello WORLD";
    console.log(str.toLowerCase());
    console.log(str.toUpperCase());
    
  4. 替换字符
    str.replace(oldStr,newStr); 在不使用正则的情况下,每一次调用都只替换一次
    var str = "hello world";
    var newstr = str.replace(/l/g,'a');
    console.log(newstr);
    
  5. 分隔字符串
    按照指定的字符将字符串拆分成数组
    var str = "1+2+3+4"
    var arr = str.split("+");  //["1","2","3","4"]
    var arr2 = str.split("");  //["1","+","2","+","3","+","4"]
    var arr3 = str.split(","); //["1+2+3+4"]
    

    若没有字符则将每一项都拆分成数组元素,若找不到指定字符则将整体按一个元素添加到数组
    此方法对应数组的join方法

  6. 字符串中也存在索引,从零开始,空格和换行等特殊字符也是字符
    str.charAt(n); 获取字符串中索引为n的字符
    str.charCodeAt(n); 获取指定位置字符对应的ASCII编码值
    var str = "hello world";
    console.log(str.charAt(8)); //r
    console.log(str.charCodeAt(8)); //114
    

~~~

1.DOM document object model #

DOM 就是描述html节点关系的图谱
DOM提供获取元素的方法和之间关系属性以及操作元素的方法

1.1 获取元素方法 #

  1. 通过ID名来获取元素
    var oTab = document.getElementById('tab');
    

    通过id获取时上下文只能是document
    若文档中出现同名ID,则通过该方法获得的是第一个元素
    若没获取到元素,则返回null
    在IE6/7中会把表单元素的name属性值当做id来用,并且不区分id的大小写
    所以不要让表单元素的name和id重复,不要用id的大小写区分元素
    也可以直接用ID名来代替获取元素对象(但是不推荐),例:console.log(tab);也可获取到元素

  2. 通过标签名来获取元素
    var oP = document.getElementsByTagName('p');
    

    整个文档中通过标签名获取一组元素
    document在这里为上下文(context),可通过改变上下文来限制获取范围;
    获取这组元素长度:Obj.length或Obj[“length”]
    获取第一个元素:Obj[0]或Obj.item(0)

  3. 通过元素name属性值获取一组元素
    var names = document.getElementsByName('name');
    

    在IE浏览器下只对表单元素属性有效

  4. 通过元素class属性值获取一组元素
    var list = document.getElementsByClassName('list');
    

    这个方法是项目中最常用的方法;但是不兼容IE6/7/8

  5. 通过元素class属性值获取一组元素的另一方法
    document.querySelector('.tab');
    document.querySelectorAll('.tab');
    

    同样,此方法不兼容IE6/7/8
    document.querySelector(); 获取的是第一个类名元素
    document.querySelectorAll(); 获取多个元素,是类数组集合

  6. 获取html元素:document.documentElement;获取body元素:document.body
    获取当前屏幕宽度的兼容方法:
    var width = document.documentElement.clientWidth || document.body.clientWidth;
    

1.2 增加DOM的方法 #

动态创建一个div元素对象

var div = document.createElement("div");

将创建元素添加到页面去,默认添加到容器的末尾位置

document.body.appendChild(div);

也可以添加到指定元素之前,第一个参数为添加元素,第二个参数为指定元素

document.body.insertBefore(oP,oDiv);

等同于

oDiv.parentNode.insertBefore(oP,oDiv);

1.3 删除DOM的方法 #

只有父级元素才有权利删除,所以必须找到父元素才能删除

oDiv.parentNode.removeChild(oDiv);

1.4 克隆DOM的方法 #

cloneNode() 默认为false,只克隆当前的;设置为true可以把选定元素的子孙元素也克隆出来

var a = oP.cloneNode();
cloneNode(true);

1.5 替换DOM的方法 #

replaceChild(newNode,oldNode)将newNode元素替换oldNode元素

oDiv.parentNode.replaceChild(dd,oP);

1.6 增加自定义属性 #

给DOM增加自定义属性的方式

obj["key"]=value;
obj.key=value;

获取形式只能是obj.key,另一种方式是

obj.setAttribute(key,value);

获取形式只能是obj.getAttribute(key)
删除形式只能是obj.removeAttribute(key)
二者区别在于前者的添加属性不会显示在结构上;后者添加的属性会改变html结构,显示在结构上
而后者的缺陷在于IE6/7/8下不能修改class属性

1.7 节点类型 #

类型 nodeType nodeName nodeValue
元素节点(元素标签) 1 大写的标签名 null
文本节点(文字) 3 #text 文字内容
注释节点(注释) 8 #comment 注释内容
document 9 #document null

在标准浏览器下,把空格和回车的内容都作为text文本节点处理
练习题:模拟children方法,实现获取指定元素下的元素子节点

1.8 DOM获取关系属性 #

Node节点:一个页面中的标签、文字、注释……都是节点
Obj.childNodes 获取所有子节点 (包括文本节点、注释节点、元素节点。。。)
Obj.children 获取所有元素子节点 (只包含元素节点)
Obj.parentNode 获取父节点
Obj.previousSibling 获取上一个哥哥节点(排行第五,则获取的是第四个)
Obj.nextSibling 获取下一个弟弟节点(排行第五,则获取的是第六个)
Obj.firstChild 获取所有子节点中第一个
Obj.lastChild 获取所有子节点中最后一个

2.Math函数 #

2.1 Math方法 #

Math.abs();取绝对值
Math.ceil();向上取整
Math.floor();向下取整
Math.round();四舍五入 在负数情况下五及五以下是舍
Math.max(val1,val2,val3…);求最大值
Math.min(val1,val2,val3…);求最小值

Math.abs(-12);
Math.ceil(12.5);
Math.floor(12.5);
Math.round(12.4);
Math.min(11,12,13,14,15);
Math.max(11,12,13,14,15);

2.2 随机数 #

Math.random(); 获取[0,1)之间的随机小数(包含0不包含1)

获取[m,n]之间的随机整数

Math.round(Math.random()*(n-m)+m);  //公式

3.String字符串类 #

3.1 字符串属性 #

str.length 获取字符串中字符个数

var str = "hello world";
console.log(str.length);  //11

Date函数 #

1 获取时间 #

  1. 获取电脑时间
    var time = new Date();  //获取当前电脑时间
    var year = time.getFullYear();
    var month = time.getMonth()+1; // 获得0-11
    var day = time.getDate();
    var week = time.getDay(); //0-6之间,代表周日到周六
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    var msecond = time.getMilliseconds();
    
  2. 获取目标时间,在Date()中传参数
    var targetTime = new Date("2016-06-20 21:00:00");
    

    Date()支持十多种传入时间格式,在日期中用”-“可以连接时间,但是在IE6/7/8中不兼容,需要改成”/”

    var targetTime = new Date("2016/06/20 21:00:00");
    

    2 计算倒计时 #

    getTime(); 获取当前时间距离1970年1月1日午夜(00:00)到现在的毫秒差
    则用目标时间距离1970年的毫秒差 减去 当前时间距离1970年的毫秒差,则是目标时间与当前时间之间的差值

定时器 #

  1. window.setInterval([function],[interval]); 每隔一段时间执行一次
  2. window.setTimeout([function],[interval]); 隔一段时间仅执行一次
  3. clearInterval(); clearTimeout(); 清除定时器
  4. 定时器的返回值是一个数字,代表这是第几个定时器

 

~~~~

未经允许不得转载:WEB前端开发 » 原生JavaScript常用方法/基础知识总结

赞 (0)