『总结』JS常用方法与片段

最新推荐文章于 2024-11-04 16:17:23 发布

dream0129

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量241

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.javascript删除元素节点

IE中有这样一个方法:removeNode()，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了 removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：removeChild()。

我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法叫removeElement：

function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element); 
         }
}
<div><input onclick="removeElement(this)" type="text" value="点击移除该输入框" /></div>

2.js sort方法根据数组中对象的某一个属性值进行升序或者降序排列

/**数组根据数组对象中的某个属性值进行排序的方法 
     * 使用例子：newArray.sort(sortBy('number'),false) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
     * @param attr 排序的属性 如number属性
     * @param rev true表示升序排列，false降序排序
     * */
    sortBy: function(attr,rev){
        //第二个参数没有传递 默认升序排列
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
        
        return function(a,b){
            a = a[attr];
            b = b[attr];
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    }

3.charCodeAt()

用法：charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
语法：stringObject.charCodeAt(index)
index参数必填，表示字符串中某个位置的数字，即字符在字符串中的下标。
注：字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。
例如：

var str="Hello world!"
document.write(str.charCodeAt(1))
//结果：101

参考地址：http://www.w3school.com.cn/js...

4.js 页面刷新location.reload和location.replace的区别小结

reload 方法，该方法强迫浏览器刷新当前页面。
语法： location.reload([bForceGet])
参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法： location.replace(URL)

在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面，所以页面的method="post"的时候，会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到：当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在，因此必定是 IsPostback 的。如果有这种应用：我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建，我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写： location.replace(location.href)
参考地址：http://zccst.iteye.com/blog/2...

5.isFinite函数

isFinite函数返回一个布尔值，检查某个值是不是正常数值，而不是Infinity。

isFinite(Infinity) // false
isFinite(-1) // true
isFinite(true) // true
isFinite(NaN) // false

6.parseInt()

parseInt方法用于将字符串转为整数。

parseInt('123') // 123

如果parseInt的参数不是字符串，则会先转为字符串再转换。

如果字符串头部有空格，空格会被自动去除。

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

面代码中，parseInt的参数都是字符串，结果只返回字符串头部可以转为数字的部分。

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

parseInt的返回值只有两种可能，不是一个十进制整数，就是NaN。

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

面代码中，二进制、六进制、八进制的1000，分别等于十进制的8、216和512。这意味着，可以用parseInt方法进行进制的转换。

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

上面代码中，对于二进制来说，1是有意义的字符，5、4、6都是无意义的字符，所以第一行返回1，第二行返回NaN。

7.parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat('3.14') // 3.14

如果字符串符合科学计数法，则会进行相应的转换。

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。

parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法会自动过滤字符串前导的空格。

parseFloat('\t\v\r12.34\n ') // 12.34

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

面代码中，尤其值得注意，parseFloat会将空字符串转为NaN。

这些特点使得parseFloat的转换结果不同于Number函数。

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

8.charAt()

charAt() 方法可返回指定位置的字符。
请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。

语法：stringObject.charAt(index)

注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

例子，在字符串 "Hello world!" 中，我们将返回位置 1 的字符：

var str="Hello world!"
document.write(str.charAt(1)) //e

9.toFixed()

var a=2.1512131231231321;  
console.log(a.toFixed(2)); //2.15

10.join()

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：
arrayObject.join(separator) //separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

注意：返回的是一个字符串。

例如：

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>

输出：George.John.Thomas

11.split()

语法：stringObject.split(separator,howmany)

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值：一个字符串数组，String.split() 执行的操作与 Array.join() 执行的操作是相反的。

"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")    //将返回["", "a", "b", "c"]

如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符，请使用 howmany 参数：

"hello".split("", 3)    //可返回 ["h", "e", "l"]

12.indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法：stringObject.indexOf(searchvalue,fromindex)

searchvalue：必需。规定需检索的字符串值。

fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

indexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。

<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>

输出：0 -1 6

操作DOM也可能用上：

var elems=node.getElementsByTagName("*");
 for(var i=0;i<elems.length;i++){
      if(elems[i].className.indexOf(classname)!=-1){ 

      }
  }

13.lastIndexOf()

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
语法：stringObject.lastIndexOf(searchvalue,fromindex)

searchvalue：必需。规定需检索的字符串值。

fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

lastIndexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。

var str="Hello world world!"
console.log(str.lastIndexOf("Hello")); //0
console.log(str.lastIndexOf("World")); //-1
console.log(str.lastIndexOf("world")); //12
console.log(str.lastIndexOf("world",9)); //6

14.call()和apply()

语法：obj1.method1.call(obj2,argument1,argument2)

如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入．
例子：

function add(a,b){
    alert(a+b);
}
function sub(a,b){
    alert(a-b);
}

add.call(sub,3,1); //4

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

看一个稍微复杂一点的例子：

function Class1(){
    this.name = "class1";
    this.showNam = function(){
       alert(this.name);
    }
}

function Class2(){
   this.name = "class2";
}

var c1 = new Class1();
var c2 = new Class2();

c1.showNam.call(c2); //class2

注意，call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，现在是把c1 的showNam()方法放到 c2 上来执行，所以this.name 应该是 class2，执行的结果就是：alert（"class2"）;

怎么样，觉得有意思了吧，可以让a对象来执行b对象的方法，这是java程序员所不敢想的。还有更有趣的，可以用 call 来实现继承

function Class1(){
    this.showTxt = function(txt){
       alert(txt);
    }
}
function Class2(){
   Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");

这样 Class2 就继承Class1了，Class1.call(this) 的意思就是使用 Class1 对象代替this对象，那么 Class2 中不就有Class1 的所有属性和方法了吗，c2 对象就能够直接调用Class1 的方法以及属性了，执行结果就是：alert（“cc”）;

对的，就是这样，这就是 javaScript 如何来模拟面向对象中的继承的，还可以实现多重继承。

function Class10(){
    this.showSub = function(a,b){
       alert(a-b);
    }
}
function Class11(){
    this.showAdd = function(a,b){
        alert(a+b);
    }
}
function Class2(){
   Class10.call(this);
   Class11.call(this);
}

很简单，使用两个 call 就实现多重继承了
当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法
说了call ，当然还有 apply，这两个方法基本上是一个意思
区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组。

参考地址：
http://www.cnblogs.com/swetin...
http://www.108js.com/article/...

15.substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法：stringObject.substring(start,stop)

start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。

stop：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值：一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

1.substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
2.如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
3.与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

var str="Hello world!"
console.log(str.substring(3)); //lo world!
console.log(str.substring(3,7));//lo w

16.toString()

toString() 方法可把一个逻辑值转换为字符串，并返回结果。

javascript中的toString()方法，主要用于Array、Boolean、Date、Error、Function、Number等对象。

（1）Array.toString()：将数组转换成一个字符串，并且返回这个字符串。

描述：当数组用于字符串环境中时，javascript会调用这一方法将数组自动转换成一个字符串。toString()在把数组转换成字符串时，首先要将数组的每个元素都转换成字符串（通过调用这些元素的toString方法）。当每个元素都被转换成字符串时，它就以列表的形式输出这些字符串，字符串之间用逗号分隔。返回值与没有参数的jion()方法返回的字符串相同。

例如：

var arr = ['php','mysql','apache'];
console.log(arr.join()); //php,mysql,apache
console.log(arr.toString());//php,mysql,apache

（2）Boolean.toString()：将布尔值转换为字符串。

描述：根据原始布尔值或者Boolean对象的值返回字符串“true”或“false”。

例如：

var b = new Boolean();//boolean对象默认值为false
console.log(b.toString()); //false
console.log(("chia" == "chia").toString());//true

（3）Date.toString()：将Date对象转换成一个字符串，采用本地时间。

var today = new Date();
console.log(today);//Tue Mar 28 2017 09:16:27 GMT+0800 (中国标准时间)
console.log(today.toString());//Tue Mar 28 2017 09:16:27 GMT+0800 (中国标准时间)
console.log(today.toLocaleString());//2017/3/28 上午9:16:27

注意：toLocaleString()是返回采用地方日期使用地方日期格式的规范的字符串。

（4）Error.toString()：将Error对象转换成字符串

描述：实现定义的字符串。ECMAScript标准除了规定该方法的返回值是字符串外，没有再做其他规定。尤其是，它不要求返回的字符传包含错误名和错误信息。

（5）Function.toString()：把函数转换成字符串

描述：可以以一种与实现相关的方法将函数转换成字符串。在大多数的实现中，例如ie和firefox，它返回Function关键字、参数列表、函数体部分。

function add(a,b){
    var a,b,c;
    c = a + b;
    return c;
}
console.log(add.toString());

结果：

function add(a,b){
    var a,b,c;
    c = a + b;
    return c;
}

（6）Number.toString()：将数字转换为字符串。用它的参数指定的基数或底数（底数范围为2-36）。如果省略参数，则使用基数10。当参数值为2时，返回二进制数。

var a = 34;
console.log(a.toString());//34
console.log(a.toString(2));//100010
console.log(a.toString(8));//42
console.log(a.toString(16));//22

参考地址：
http://www.cnblogs.com/muguaw...

17.fromCharCode()

fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
语法：String.fromCharCode(numX,numX,...,numX)

numX：必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码。

注释：该方法是 String 的静态方法，字符串中的每个字符都由单独的数字 Unicode 编码指定。
它不能作为您已创建的 String 对象的方法来使用。因此它的语法应该是 String.fromCharCode()，而不是 myStringObject.fromCharCode()。

例如，我们将根据 Unicode 来输出 "HELLO" 和 "ABC"：

<script type="text/javascript">
document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))
</script>

18.substr() 方法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法：stringObject.substr(start,length)

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符）处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示和注释

注释：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。

重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。

var str="Hello world!"
document.write(str.substr(3,7))

原文链接：https://segmentfault.com/a/1190000008632671

dream0129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录