首页前端开发JavaScript经典技巧之JavaScript全局函数详解

经典技巧之JavaScript全局函数详解

时间2024-01-31 02:41:03发布访客分类JavaScript浏览272
导读:收集整理的这篇文章主要介绍了经典技巧之JavaScript全局函数详解,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了JavaScript中关于全局函数的相关知识,JavaScript中的全局函数有很多,下面我们一起来...
收集整理的这篇文章主要介绍了经典技巧之JavaScript全局函数详解,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了JavaScript中关于全局函数的相关知识,JavaScript中的全局函数有很多,下面我们一起来看一下应该怎样使用,希望对大家有帮助。

一、JavaScript全局函数有哪些?

函数描述
decodeURI()解码某个编码的 URI。
decodeURIcomponent()解码一个编码的 URI 组件。
encodeURI()把字符串编码为 URI。
encodeURIComponent()把字符串编码为 URI 组件。
escaPE()对字符串进行编码。
eval()计算 JavaScript 字符串,并把它作为脚本代码来执行。
isFinITe()检查某个值是否为有穷大的数。
isNaN()检查某个值是否是数字。
Number()把对象的值转换为数字。
parseFloat()解析一个字符串并返回一个浮点数。
parseint()解析一个字符串并返回一个整数。
String()把对象的值转换为字符串。
unescape()对由 escape() 编码的字符串进行解码。

二、JavaScript全局函数详解?

2.1.Eval()

2.1.1.例子一

首先看示例:

eval("x=10;
    y=20;
    document.write(x*y)");
    document.write("br>
    " + eval("2+2"));
    document.write("br>
    " + eval(x+17));

结果:

200
4
27

特殊用法{ } :

document.write("br>
" + eval{
3+3}
    ));

这时返回结果为:6 我们发现{ } 这样使用和()其实是一样的 不同在于:

//{
}
    /2 这种写法是不支持的document.write("br>
" + eval{
3+3}
    /2));
    //()是可以的document.write("br>
    " + eval(3+3)/2));
//若是{
}
    也想进行此类计算也可以 如下:document.write("br>
" + eval{
(3+3)/2}
    ));
    

2.1.2.例子二

看一下在其他情况中,eval() 返回的结果:

eval("2+3")    // 返回 5VAR myeval = eval;
        // 可能会抛出 EvalError 异常myeval("2+3");
        // 可能会抛出 EvalError 异常

可以使用下面这段代码来检测 eval() 的参数是否合法:

try  {
      alert("Result:" + eval(prompt("Enter an exPression:","")));
}
catch(exception) {
      alert(exception);
}
    

2.1.3.例子三(解析JSON字符串)

2.1.3.1.eval解析函数:

JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。

var text = '{
 "name":"Runoob", "alexa":"function () {
    return 10000;
}
", "site":"www.runoob.COM"}
    ';
    var obj = JSON.parse(text);
    obj.alexa = eval("(" + obj.alexa + ")");
     document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();
    

2.1.3.2.JSON字符串转换为对象的两种方法

  //将JSON字符串转为JS对象的方法一    var obj = JSON.parse('{
 "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
    ');
        document.write(obj.name + "br/>
    ");
    //将JSON字符串转为JS对象的方法二    //JSON格式的字符串    var test1 = '{
"name":"qlq","age":25}
    ';
        var obj2 = eval("(" + test1 + ")");
     //必须带圆括号    document.write(obj2.name + "br/>
    " + obj2.age);

结果:

runoob
qlq
25

为什么要 eval这里要添加 eval("(" + test1 + “)”)//”呢?

原因在于:eval本身的问题。 由于json是以”{ } ”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将 括号内的表达式(exPRession)转化为对象,而不是作为语 句(statement)来执行。举一个例子,例如对象字面量{ } ,如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始 和结束标记,那么{ } 将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

alert(eval("{
}
    ");
 // return undefinedalert(eval("({
}
    )");
// return object[Object]

对于这种写法,在JS中,可以到处看到。

如: (function()) { } (); 做闭包操作时等。

alert(dataObj.root.length);
//输出root的子对象数量$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
    return true;
}
    //输出每个root子对象的名称和值alert("name:"+item.name+",value:"+item.value);
}
    )

注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

2.1.3.3.对于服务器返回的JSON字符串,如果jquery异步请求将 type(一般为这个配置属性)设为"json",或者利 用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:

$.getJSON("http://www.phpzixue.cn/",{
param:"gaoyusi"}
,function(data){
//此处返回的data已经是json对象//以下其他操作同第一种情况$.each(data.root,function(idx,item){
if(idx==0){
    return true;
//同countinue,返回false同break}
    alert("name:"+item.name+",value:"+item.value);
}
    );
}
    );

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

2.1.3.4.补充:eval()解析的JSON的key可以不带""

一般的JSON的key必须带双引号,也就是类似于{ "key":"vslue"} 的形式,但是如果用eval("("+json+")")的形式解析字符串为JSON的时候,json可以写为{ key:"value"}

2.2.decodeURI()与 decodeURIComponent() – 解码函数

decodeURI() 可对 encodeURI() 函数编码过的 URI 进行解码

如:

 const aaa = '#$ ¥%23ccc/'    console.LOG(encodeURI(aaa));
    	// #$%20%EF%BF%A5%2523ccc/  console.log(decodeURI(aaa));
    	// #$ ¥%23ccc/  console.log(encodeURIComponent(aaa));
    	// %23%24%20%EF%BF%A5%2523ccc%2F  console.log(decodeURIComponent(aaa));
    	// #$ ¥#ccc/

我们在获取地址栏参数是通常封装成如下函数:

export function getQueryObject(url) {
  url = url || window.location.href  const seArch = url.substring(url.lastIndexOf('?') + 1)  const obj = {
}
      const reg = /([^?&
    =]+)=([^?&
    =]*)/g  search.replace(reg, (rs, $1, $2) =>
 {
    const name = decodeURIComponent($1)    let val = decodeURIComponent($2)    val = String(val)    obj[name] = val    return rs  }
)  return obj}
    

2.3.encodeURI()与encodeURIComponent() — 编码函数

encodeURI():
语法

encodeURI(URIstring)
参数 描述
URIstring 必需。一个字符串,含有 URI 或其他要编码的文本。
返回值
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。
该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:; /?: @& =+$,#

encodeURIComponent() :

语法
encodeURIComponent(URIstring)
参数 描述
URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。
返回值
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ’ ( ) 。
其他字符(比如 :; /?

以上就是经典技巧之JavaScript全局函数详解的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

javascript前端

若转载请注明出处: 经典技巧之JavaScript全局函数详解
本文地址: https://pptw.com/jishu/593373.html
Ruby是什么?Ruby的优缺点 JavaScript怎样隐藏html标签

游客 回复需填写必要信息