【转载】js常用方法和片段
在网上看了不少js方法的总结没,自己也尝试总结过,这篇只迄今为止觉得最清楚的,尤其是call和apply的方法总结,很到位!!
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);
}
}
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
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:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
注意:
返回的是一个字符串
。
例如:
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
输出: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。
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
输出:0 -1 6
操作DOM也可能用上:
var elems=node.getElementsByTagName("*");
for(var i=0;i
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”:
document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))
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))
结果:lo worl
作者:风雨后见彩虹
原文:https://segmentfault.com/a/1190000008632671
【转载】js常用方法和片段的更多相关文章
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- (2)Underscore.js常用方法
目录 1.集合相关方法 1.1.数组的处理 map(循环,有返回值),将返回的值依次存入一个新的数组 each(循环,无返回值 ...
- js常用方法和检查是否有特殊字符串和倒序截取字符串
js常用方法demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- (转载)JS中的prototype
原文地址:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html#!comments JS中的phototype是JS中比较难理解的 ...
- 转载 js函数声明和函数表达式
在js中函数有两种表达方式.1 函数声明 2 函数表达式 函数声明 function sayname(){ alert("li lei"); } 函数表达式 var sayname ...
- <转载> js 闭包
http://www.haorooms.com/post/js_bbtwo http://www.jb51.net/article/24101.htm http://www.cnblogs.com/f ...
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- JS常用方法封装
迭代添加各种常用方法:项目中一定会有很多常用的方法,包括:取值,校验,等...... 获取 url 后的参数 function getQueryString(name) { var reg = new ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
随机推荐
- ubuntu上安装nginx+mysql+php5-fpm(PHP5 - FastCGI Process Manager)
题外话:由于近段时间测试环境ssh链路质量不大好,经常短线.故我把整个安装过程放到screen里去执行,以防止断线中断了安装过程.执行screen -S install,这样断线后,只要再执行scre ...
- Java中的24种设计模式与7大原则 (转)
一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...
- 测试环境-memcached安装与说明
一,下载memcached和libevent安装包: 1,Memcache用到了libevent这个库用于Socket的处理,所以还需要安装libevent (这两个包百度上都能找到) 二,安装lib ...
- 15. leetcode 349. Intersection of Two Arrays
Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...
- Uva 11988 Broken Keyboard STL+链表
两种方法,直接上代码 STL标准模板库 #include <iostream> #include <list> #include <algorithm> #incl ...
- cmd命令行进入DOS方式编译运行C语言程序实现字符串转换
需求:输入一个字符串(长度小于50),然后过滤掉所有的非数字字符,得到由数字字符组成的字符串,将其转化为double型结果输出(4位小数). 源程序: #include<stdio.h>i ...
- Protocol Buffers与FlatBuffers效率对比
Protocol Buffers是Google跨语言.跨平台的通用序列化库.FlatBuffers同样出自Google,而且也跨语言跨平台,但更强调效率,专门为游戏开发打造.在游戏界混了几年,各种各样 ...
- SpringBoot填坑系列---XML方式配置数据库
本次只是简单的运用SpringBoot搭建框架,对其原理并不做深入的探究 1.POM文件 <?xml version="1.0" encoding="UTF-8&q ...
- Fancytree Javascript Tree的入门使用
Fancytree Javascript Tree的入门使用 一.概念----是做什么的能干什么 Fancytree是一个Javascript控件,它依赖于: <script src=" ...
- kill 和killall----杀死进程
1.根据进程ip查看进程名 Liunx中 通过进程名查找进程PID可以通过 pidof [进程名] 来查找. 反过来 ,通过PID查找进程名则没有相关命令.但在linux根目录中,有一个/proc的 ...