JavaScript里实用的原生API汇总


Posted in Javascript onMay 14, 2015

直接进入正题

解析字符串对象

我们都知道,JavaScript对象可以序列化为JSON,JSON也可以解析成对象,但是问题是如果出现了一个既不是JSON也不是对象的"东西",转成哪一方都不方便,那么eval就可以派上用场

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

因为 eval 可以执行字符串表达式,我们希望将 obj 这个字符串对象 执行成真正的对象,那么就需要用eval。但是为了避免eval 将带 {} 的 obj 当语句来执行,我们就在obj的外面套了对 (),让其被解析成表达式。

& (按位与)

判断一个数是否为2的n次幂,可以将其与自身减一相与

var number = 4
(number & number -1) === 0 // true

^ (按位异或)

不同第三个变量,就可以交换两个变量的值

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

格式化Date

想得到format后的时间?现在不用再get年月日时分秒了,三步搞定

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

想将format后的时间转换为时间对象?直接用Date的构造函数

new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

想将一个标准的时间对象转换为unix时间戳?valueOf搞定之

(new Date).valueOf();

// 1431004132641

许多朋友还提醒了这样可以快速得到时间戳

+new Date

一元加

一元加可以快速将字符串的数字转换为数学数字,即

var number = "23" 
typeof number // string
typeof +number // number

可以将时间对象转为时间戳

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

转义URI

需要将url当做参数在路由中传递,现在转义之

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

再反转义

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"

Number

希望保留小数点后的几位小数,不用再做字符串截取了,toFixed拿走

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

参数范围为0~20,不写默认0

类型检测

typeof是使用最频繁的类型检测手段

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

对于基本(简单)数据类型还是挺好的,但是一旦到了引用数据类型的时候,就不那么好使了

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"

前三个还能忍,null居然也返回object,你是在逗我吗!!!(ps:其实这是JavaScript的bug 人艰不拆 ꒰・◡・๑꒱ )

这时,我们会使用instanceof

toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

其实我们可以发现,[] 和 Object得到了true,虽然我们知道,[]也是对象,但是我们希望一个能更准确的判断类型的方法,现在它来了
使用Object.prototype.toString()来判断,为了让每一个对象都能通过检测,我们需要使用Function.prototype.call或者Function.prototype.apply的形式来调用

var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

要注意的是:toString方法极有可能被重写,所以需要使用的时候,
可以直接使用Object.prototype.toString()方法

实现继承

看一个官方给的例子

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

通过call来获取初始化的属性和方法,通过Object.create来获取原型对象上的属性和方法

迭代

ES5出了挺多的迭代函数,如map,filter,some,every,reduce等

Array

具体的api这里介绍的很详细。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
这里就提几句:
join,pop,push,reverse,shift,sort,splice,unshift会改变原数组

concat,indexOf,lastIndexOf,slice,toString不会改变原数组

map,filter,some,every,reduce,forEach这些迭代方法不会改变原数组

几个注意点:

1 shift,pop会返回那个被删除的元素
2 splice 会返回被删除元素组成的数组,或者为空数组
3 push 会返回新数组长度
4 some 在有true的时候停止
5 every 在有false的时候停止
6 上述的迭代方法可以在最后追加一个参数thisArg,它是执行 callback 时的 this 值。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript 常用关键字列表集合
Dec 04 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
javascript中attachEvent用法实例分析
May 14 #Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 #Javascript
javascript清空table表格的方法
May 14 #Javascript
AngularJS的内置过滤器详解
May 14 #Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 #Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 #Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
You might like
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python格式化css文件的方法
2015/03/10 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
django 模型字段设置默认值代码
2020/07/15 Python
Python 使用office365邮箱的示例
2020/10/29 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
新浪网技术部笔试题
2016/08/26 面试题
银行求职推荐信范文
2013/11/30 职场文书
培训演讲稿范文
2014/01/12 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js