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 相关文章推荐
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
vue component组件使用方法详解
Jul 14 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
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连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
显示、隐藏密码
2006/07/01 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
wxpython实现图书管理系统
2018/03/12 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
就业自荐信
2013/12/04 职场文书
超市重阳节活动方案
2014/02/10 职场文书
中秋节主持词
2014/04/02 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
优秀班组事迹材料
2014/12/24 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
校车安全管理责任书
2015/05/11 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
写好求职信的技巧解密
2019/05/14 职场文书