JavaScript门道之标准库


Posted in Javascript onMay 26, 2018

1.什么是标准库(Standard Library)

标准库指的是js的标准内置对象,是js这门语言本身初始时提供的在全局范围的对象

2.Object对象及其实例

JavaScript原生提供一个Object对象,所有的其他对象均继承自这一对象

Object对象的属性和方法
利用console.dir(Object)查找Object对象的属性和方法

JavaScript门道之标准库

常用的属性或方法简介:

1.prototype对象

prototype是Object对象下的原型对象,
原型对象里面用于放置其他继承自Object对象的属性和方法,例如:
Object.prototype.valueOf()
Object.prototype.toString()
两个方法都是部署在Object对象下的prototype原型对象,
而其他对象如Number对象、String对象
或是自定义对象var a = new Object()都可以继承prototype的属性和方法

2.Object.keys(object)

keys()方法输入一个实例对象并返回对象的属性数组

JavaScript门道之标准库

3.Object.getOwnPropertyNames

JavaScript门道之标准库

【注】keys方法只返回可枚举的属性,getOwnPropertyNames还返回不可枚举的属性名。

4.Object()本身作为方法使用

var a = {name:"teren"}
Object(a)
//传入一个对象实例返回该实例
Object {name: "teren"}
//传入一个原始类型值,则返回该值对应的包装对象

JavaScript门道之标准库

Object对象实例的属性和方法

Object对象本身是一个构造函数,可以利用Object构造函数构造对象实例

var person = new Object();
person.name = "teren";
//字面量方法
var person = {name: "teren"};

【注】
所有的对象都是由Object构造出来的;
字面量创建对象的方法和利用Object()构造对象的方法是等价的;

Object对象有不少方法部署在Object.prototype对象上,所有的Object的对象实例都继承这些方法

1.Object.prototype.valueOf()

valueOf()方法返回一个对象的“值”。默认情况下,返回对象本身

var o = {name:"teren"}
o.valueOf()//Object {name: "teren"}
var p = {name:"teren",age:18}
p.valueOf()//Object {name: "teren", age: 18}
var q = {}
q.valueOf()//Object {}

【注】
valueOf方法的主要用途是,JavaScript自动类型转换时会默认调用这个方法

2.Object.prototype.toString()
toString方法返回一个对象的字符串形式,默认情况下返回类型字符串

var o ={name:"teren"}
o.toString()//"[object Object]"

【注】
toString方法的主要用于是,JavaScript自动类型转换时会默认调用这个方法

var o = {}
o + "world"//"[object Object]world"

3.hasOwnProperty()

hasOwnProperty():判断某个属性是否为当前对象自身的属性,还是继承自原型对象的属性,若继承自原型则返回false

var o = {name:"teren"}
o.hasOwnProperty("name")//true
o.hasOwnProperty("toString")//false

4.propertyIsEnumerable():判断某个属性是否可枚举(遍历)

var arr = [1,2,3]
for(var key in arr){console.log(arr[key])}
1
2
3
arr.propertyIsEnumerable("0")//true
arr.propertyIsEnumerable("length")//false

3.Number对象及其实例Number对象是数值对应的包装

对象,所谓包装对象如下面例子所示: 

var num = 123//这是一个数据类型为数值的数值
var num = new Number(123)//这里通过Number函数构造一个对象,从而把数值123包装进Number对象中

 Number对象的属性和方法
1.Number对象的属性

Number.MAX_VALUE
Number.MIN_VALUE
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY
Number.NaN

 【注】
Number对象实例是无法获取去Number对象的属性

var x = new Number(123);
x.MAX_VALUE;//undefined

 2.Number对象的方法

1.Number()自身的方法
将任何类型的值转化为数值
Number(100)//100
Number("100")//100
Number("100e")//NaN
Number([1,2,3])//NaN
Number(true)//1
Number([])//0
Number({})//NaN
2.toFixed()
把数字转换为字符串,并保留几位小数
var a = 123
a.toFixed(2)//"123.00"
a.toFixed(3)//"123.000"
a.toFixed(0)//"123"
3.toExponential()
把对象的值转换为科学计数法的字符串
a.toExponential(1)//"1.2e+2"
a.toExponential(2)//"1.23e+2"
a.toExponential(3)//"1.230e+2"
a.toExponential(4)//"1.2300e+2"
4.valueOf()
a.valueOf()//123
5.toString()
a.toString()//"123"
6.isFinite()
Number.isFinite(123)//true
Number.isFinite(NaN)//false
7.isNaN()
Number.isNaN(NaN)//true

下图是Number对象继承自Object对象的属性和方法,以及专属于Number的属性和方法

JavaScript门道之标准库

Number对象实例的属性和方法 

//构造Number对象的实例
var num = new Number(123)

 【注】
Number对象实例所运用到的属性和方法基本包含在Number对象的属性和方法中

4.String对象及其实例

String对象是字符串的包装对象,利用String()构造函数创建一个String对象的实例

String对象的属性和方法 

1.length属性
返回字符串长度

var str = "111"
str.length//3
1.String()本身作为方法
能够将其他类型值转换为字符串
String(1)//"1"
String(true)//"true"
String([1,2,3])//"1,2,3"
String([])//""
String({name:"teren"})//"[object Object]"
2.charAt()
返回指定位置的字符
var str = "123"
str.charAt(2)//"3"
3.charCodeAt()
返回在指定的位置的字符的 Unicode 编码
str.charCodeAt(0)//49
4.indextOf()
返回字符所在的位置
str.indexOf(1)//0
5.substring()
提取字符串中两个指定的索引号之间的字符
var str = "NBA Basketball "
str.substring(1,3)//"BA"
str.substring(1,5)//"BA B"
6.toUpperCase()&toLowerCase()
var str ="hello"
str.toUpperCase()//"HELLO"
var strr = "HELLO"
strr.toLowerCase()//"hello"
7.trim()
删除空格
var s = "  str"
s//"  str"
s.trim()//"str"
8.split()
把字符串分割为字符串数组
var s = "hello"
s.split("")//["h", "e", "l", "l", "o"]
var str = "hello world"
str.split(" ")//["hello", "world"]
9.slice(1,5)
从下标为1开始(包含元素)至下标5(不包含)
var str = "helloworld"
str.slice(1,5)//"ello"
10.valueOf()&toString()
都是返回字符串

String对象实例的属性和方法

var str = new String("hello world");
//字面量
var str = "hello world"

【注】
String对象实例的属性和方法基本包含在String对象的属性与方法中

4.Boolean对象及其实例
Boolean对象是布尔值的包装对象,利用Boolean构造函数创建一个布尔对象

var a = true;
typeof a//"boolean"
var b = new Boolean (true)
typeof b//"object"

 【注】
不鼓励使用Boolean()构造布尔对象

6.Array对象
Array对象是数组的包装对象

创建一个Array对象实例

var array = new Array(1,2,3)
//字面量方法
var arr = [1,2,3]

Array对象的属性

length属性
var arr= [1,2,3]
arr.length//3

Array对象的方法

1.valueOf & toStrng()
valueOf返回数组对象原始值
toString()返回字符串
var arr = [1,2,3]
arr.valueOf()//[1, 2, 3]
arr.toString()//"1,2,3"
2.增加数组元素
arr.push() & arr.unshift()//一个在尾部一个在首部增加元素,并返回新数组的长度
arr.push("h","e","e")//6
arr//[1, 2, 3, "h", "e", "e"]
arr.unshift(1,1,1)//9
arr//[1, 1, 1, 1, 2, 3, "h", "e", "e"]
3.删除数组元素
arr.pop() & arr.shift()//一个在尾部一个在首部删除元素,并返回删除的元素,每次调用只能删一个
var arr = [1, 1, 1, 1, 2, 3, "h", "e", "e"]
arr.pop()//"e"
arr//[1, 1, 1, 1, 2, 3, "h", "e"]
arr.shift()//1
arr//[1, 1, 1, 2, 3, "h", "e"]
4.灵活删除增添元素的方法
var arr = [1, 1, 1, 1, 2, 3, "h", "e", "e"]
arr.splice(0,4,"w","y")//[1, 1, 1, 1]
arr//["w", "y", 2, 3, "h", "e", "e"]
5.join(separator)
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
var arr = [1, 1, 1, 1, 2, 3, "h", "e", "e"]
arr.join("-")//"1-1-1-1-2-3-h-e-e"
6.sort(func)
var arr = [1, 1, 1, 1, 2, 3, "h", "e", "e"]
arr.sort()//[1, 1, 1, 1, 2, 3, "e", "e", "h"]
7.reverse()
var arr = [1, 1, 1, 1, 2, 3, "h", "e", "e"]
arr.reverse()//["e", "e", "h", 3, 2, 1, 1, 1, 1]
8.concat()
合并数组
var a =[1,3,4]
var b = [4,2,1]
a.concat(b)//[1, 3, 4, 4, 2, 1]

【注】
Array对象实例所运用到的属性和方法基本包含在Array对象的属性和方法中

7.Math对象及其实例
Math对象提供一些数学方面的属性和方法,但Math对象不能创建实例对象

Math对象的属性

Math.E
Math.LN2
Math.LN10
Math.PI
Math.SQRT2

Math对象的方法

1.Math.abs()
Math.abs(-9)//9
2.Math.max() & Math.min()
Math.max(-1,1,6)//6
Math.min(-1,1,6)//-1
3.Math.pow()
Math.pow(2,3)//8
4.Math.exp()
Math.exp(2)//7.3890560989306495
5.Math.sqrt()
Math.sqrt(3)//1.7320508075688772
6.Math.log()
返回以e为底的自然对数值
Math.log(Math.E)//1
7.Math.ceil() & Math.floor()
Math.ceil:接受一个参数,返回大于该参数的最小整数
Math.floor:接受一个参数,返回小于该参数的最大整数
Math.ceil(1.1)//2
Math.floor(1.1)//1
8.Math.round()
用于四舍五入
Math.round(0.1)//0
Math.round(0.5)//1
Math.round(-1.5)//-1
Math.round(-1.6)//2
9.Math.random()
返回0到1之间的一个伪随机数,可能等于0,但是一定小于1
Math.random()*50+50//[50,100)之间的随机数
10.三角函数方法
略
11.valueOf() & toString()
valueOf()返回Math对象的原始值
toString()返回Math的对象类型

8.Date对象
Date对象是JavaScript提供的日期和时间的操作接口

Date实例对象的参数
Date对象的起始时间为1970年1月1日00:00:00 UTC

new Date()//Tue Jun 21 2016 21:45:31 GMT+0800 (中国标准时间)
new Date(1000)//Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
new Date(3600*24*1000)//Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)
new Date("March 5,2015")//Thu Mar 05 2015 00:00:00 GMT+0800 (中国标准时间)
new Date("2015/5/5")//Tue May 05 2015 00:00:00 GMT+0800 (中国标准时间)
new Date(2014,1,1,23,59,23,999)//Sat Feb 01 2014 23:59:23 GMT+0800 (中国标准时间)

Date对象的方法

1.Date()本身作为方法
var today = new Date()
2.Date.now()
返回当前距离1970年1月1日 00:00:00 UTC的毫秒数
Date.now()//1466517135730
3.Date.parse()
用来解析日期字符串,返回距离1970年1月1日 00:00:00的毫秒数
Date.parse(2015,2,2)//1420070400000
4.Date.UTC()
返回当前距离1970年1月1日 00:00:00 UTC的毫秒数
Date.UTC(2000,0,1)//946684800000

Date对象实例的方法

1.to类:返回关于时间和日期的字符串
toString():返回一个完整的日期字符串
var d = new Date(2000,0,1)
d.toString()//"Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)"
--
toUTCString():返回对应的UTC时间
var d = new Date()
d//Tue Jun 21 2016 22:00:06 GMT+0800 (中国标准时间)
d.toUTCString()//"Tue, 21 Jun 2016 14:00:06 GMT"
--
toDateString():返回日期字符串
d.toDateString()//"Tue Jun 21 2016"
--
toTimeString():返回时间字符串
d.toTimeString()//"22:00:06 GMT+0800 (中国标准时间)"

2.get类:获取关于时间和日期的值

getTime():返回距离1970年1月1日00:00:00的毫秒数
var d = new Date(2000,0,1)
d//Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)
d.getTime()//946656000000
--
getDate():返回实例对象对应每个月的几号
d.getDate()//1
--
getDay():返回星期几
d.getDay()//6
--
getFullYear():返回四位的年份
d.getFullYear()//2000
--
getMonth() & getHours() & getMinutes & getSeconds & getMilliseconds
d.getHours()//0
d.getMinutes()//0
d.getSeconds()//0
d.getMilliseconds()//0

3.set类:设置实例对象的时间和日期

var d = new Date(2000,0,1)
d.setDate(20)//948297600000
d//Thu Jan 20 2000 00:00:00 GMT+0800 (中国标准时间)
--
setFullYear()
d.setFullYear(2005)//1106150400000
d//Thu Jan 20 2005 00:00:00 GMT+0800 (中国标准时间)
--
setMonths & setHours & setMinutes & setSeconds & setMiliseconds效果同上

【注】
关于jsDate对象的时间和日期的取值范围

分钟和秒:0 到 59
小时:0 到 23
星期:0(星期天)到 6(星期六)
日期:1 到 31
月份:0(一月)到 11(十二月)
年份:距离1900年的年数

10.标准库小结

  • 标准库是js的初始提供的标准内置对象,分为Object对象、Number对象、String对象、Boolean对象、Array对象、Math对象以及Date对象
    【注】不限于上述对象,还有RegExp对象和JSON对象

  • js所有的对象都是由Object对象构造的,包括其对象实例以及Number、String、Boolean、Array、Math和Date等对象;

  • 对象一般都会包含属性和方法,属性代表属于对象的某些特征值,方法代表对象的某些功能;

  • 对象在属性当中通常设置constructor(Math对象没有)和prototype属性,部分对象包括length属性(String和Arrary对象的length有实践意义);conStructor设置该对象的构造函数功能,prototype设置一个原型对象——使得所有该对象的构造函数创建的对象实例能够从prototype对象中继承相应的属性;

  • Object对象的属性和方法最具一般性,大部分属性和方法可以在其他对象中找到,但是每一个对象还具有各自的属性和方法(有些只能对象使用,有些能够对象实例使用(因为部署在各自对象的prototype里))

  • 这里特别说一下valueOf()、toString()在不同对象中的效果,一般valueOf()输出对象的原始值,toString()输出字符串

var o = new Object(123)
var o1 = new Object("123)
o.valueOf()//123
o.toString()//"123"
o1.valueOf()//"123"
o1.toString()//"123"
var o2 = [1,2,3]
o2.valueOf()//[1, 2, 3]
o2.toString()//"1,2,3"
var o3 = {name:"teren",age:18}
o3.valueOf()//Object {name: "teren", age: 18}
o3.toString()//"[object Object]"

Number对象是数值对应的包装对象,String对象是字符串对应的包装对象,Boolean是布尔值对应的包装对象

var num = 123//type of num -> "number"
var num = new Number(123) //type of num -> "object"
var str = "hello" 
var str = new String("hello")
var bool = true;
var bool = new Boolean(true)

【注】本笔记的资料大部分参考阮一峰的JavaScript标准参考教程

Javascript 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
原生JS实现天气预报
Jun 16 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
javascript标准库(js的标准内置对象)总结
May 26 #Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 #Javascript
页面点击小红心js实现代码
May 26 #Javascript
js input输入百分号保存数据库失败的解决方法
May 26 #Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 #Javascript
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
You might like
操作Oracle的php类
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
vue-router的hooks用法详解
2020/06/08 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python装饰器原理与用法分析
2018/04/30 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
Android interview questions
2016/12/25 面试题
火锅店创业计划书范文
2014/02/02 职场文书
12月红领巾广播稿
2014/02/13 职场文书
质量承诺书怎么写
2014/05/24 职场文书
领导参观欢迎词
2015/01/26 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技
redis protocol通信协议及使用详解
2022/07/15 Redis