JavaScript全局函数

  • 前言
  • 一、JavaScript全局函数有哪些?
  • 二、JavaScript全局函数详解?
    • 2.1.Eval()
      • 2.1.1.例子一
      • 2.1.2.例子二
      • 2.1.3.例子三(解析JSON字符串)
        • 2.1.3.1.eval解析函数:
        • 2.1.3.2.JSON字符串转换为对象的两种方法
        • 2.1.3.3.对于服务器返回的JSON字符串,如果jquery异步请求将 type(一般为这个配置属性)设为"json",或者利 用`$.getJSON()`方法获得服务器返回,那么就不需要`eval()`方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以`$.getJSON`方法为例说明数据处理方法:
        • 2.1.3.4.补充:eval()解析的JSON的key可以不带""
    • 2.2.decodeURI()与 decodeURIComponent() -- 解码函数
    • 2.3.encodeURI()与encodeURIComponent() --- 编码函数
    • 2.4.escape()
    • 2.5.isFinite()
    • 2.6.isNaN()
      • 2.6.1.isNaN检测的机制:首先验证当前要检测的值是否为数字类型的,如果不是,浏览器会默认的把值转换为数字类型
      • 2.6.2.当前检测的值已经是数字类型,是有效数字返回false,不是返回true(数字类型中只有NaN不是有效数字,其余都是有效数字)
    • 2.7.Number()
    • 2.8.parseInt()与parseFloat()
    • 2.9.string() --- 与toString()同
    • 2.10.unescape()

前言

今天在搬砖的时候页面上有个根据传过来的算法通过js全局函数eval()进行计算的js需求 属实有被恶心到 今天博主就整理下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")    // 返回 5
var 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 undefined
alert(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%2Fconsole.log(decodeURIComponent(aaa));   // #$ ¥#ccc/

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

export function getQueryObject(url) {url = url || window.location.hrefconst search = url.substring(url.lastIndexOf('?') + 1)const obj = {}const reg = /([^?&=]+)=([^?&=]*)/gsearch.replace(reg, (rs, $1, $2) => {const name = decodeURIComponent($1)let val = decodeURIComponent($2)val = String(val)obj[name] = valreturn 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之全局函数详解相关推荐

  1. [js]JavaScript Number.toPrecision() 函数详解

    [js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...

  2. javascript Math.pow 函数 详解 【附】年均增长率计算

    语法 Math.pow(x,y) 定义和用法 pow() 方法可返回 x 的 y 次幂的值. 处理简单数学问题 6的4次方等于1296,记作:64=1296; 求值: Math.pow(6,4)=12 ...

  3. Javascript 函数详解

    Javascript 函数详解 1)函数声明: 通过关键字function定义,把函数作为变量来声明 函数声明后不会立即执行,会在我们需要的时候调用到. <script>function ...

  4. JavaScript的函数详解

    JavaScript的函数详解 一.什么是函数 二.函数的使用 1.函数的声明 2.函数的调用 3.函数的参数:参入运算的数据 (1)形参(形式参数) (2)实参(实在参数): (3)参数之间的数据传 ...

  5. vue动画过渡 javascript钩子函数详解

    vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...

  6. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  7. Javascript this关键字 指向详解

    Javascript this关键字 指向详解 面向对象语言中 this 表示当前对象的一个引用.在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变. 1) 单独使用 ...

  8. 【ES6】Generator函数详解

    [ES6]Generator函数详解 一.Generator函数简介 基本概念 函数写法 yield关键字介绍 二.next方法的参数 三.for...of循环 四.关于普通throw()与Gener ...

  9. [zz]jQuery.extend 函数详解

    JQuery的extend扩展方法:       Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.       一.Jquery的扩 ...

  10. 匿名函数python_基于python内置函数与匿名函数详解

    内置函数 Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() d ...

最新文章

  1. POI简易帮助文档系列--给Excel设置样式
  2. vue 组件属性监听_Vue.js 监听属性
  3. Eclipse安装插件时报No repository found containing...解决办法
  4. 10.10 traceroute:追踪数据传输路由状况
  5. python 多进程 调用模块内函数_进程创建fork()和multiprocessing模块Process类
  6. 万万没想到 过去一年 蚂蚁森林成了联合国会议上的“网红”
  7. html里meta标签,HTML中的meta标签详解
  8. 金蝶eas怎么引出凭证_金蝶EAS该如何导出凭证
  9. Linux环境变量配置【转】
  10. (Macbook Air)BCM4360网卡Linux(Ubuntu/Fedora)驱动安装总结
  11. 解决报错:%d format: a number is required, not str
  12. 数据结构之树家族介绍
  13. 乌镇互联网大会部分嘉宾分享要点实录
  14. 20元一支的洗面奶,7天卖了上万,他们是如何做到的?
  15. 音频线视频线和同轴电缆的关系(同轴线除了外面的屏蔽网还有中间的绝缘塑料体,而音频线一般只有外面的屏蔽网)
  16. ARFoundation入门到精通 - 1.8 远程调试
  17. [模块加载失败:找不到指定的模块]——如何解决DLL加载问题?
  18. 前端笔记 (持续更新~)
  19. python-opencv控制鼠标操作
  20. 经常玩电脑正确的坐姿_如何保持正确坐姿?(多图)

热门文章

  1. js中改变this的指向,有apply、call和bind这三种方法
  2. STM32F103 mbed输出互补pwm
  3. 尝试造了个工具类库,名为 Diana
  4. UIScrollView总结
  5. Python标准库学习笔记7:数据持久存储与交换
  6. rails 表单嵌套
  7. excel共享工作薄
  8. 8.PHP核心技术与最佳实践 --- 缓存
  9. 10.数据管理(内存,文件锁)
  10. jQuery中find和filter的区别