前端基础-JavaScript标准库对象(内置对象)

第10章 标准库对象(内置对象)

JavaScript 提供了很多个内置对象:Math/Array/Number/String/Boolean…

对象只是带有属性方法的特殊数据类型。

我们在学习时其实就是要记住对象的每个属性和方法怎么使用,代表什么含义;

技术问题,遇到分歧,去哪里查找资料:

火狐开发者社区–MDN

微软开发者社区–MSDN

10.1 Math对象

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

10.1.1 常用属性和方法

Math 是一个内置对象, 它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是, Math 不是一个构造函数. Math 的所有属性和方法都是静态的.

跟数学相关的运算直接使用Math中的成员即可

console.log(Math.PI); //圆周率3.141592653589793
Math.random();//介于 0 和 1 之间的伪随机数。

Math.ceil(6.6);//获取大于或等于提供数值的最小整数--向上取整
Math.floor(8.8);//获取小于或等于提供数值的最大整数--向下取整
Math.round(9.9);//四舍五入
Math.max(10,20,15);//取多个值中的最大值
Math.min(10,20,15);//取多个值中的最小值
Math.pow(10,2);//返回x的y次幂
Math.sqrt(100);//求平方根

10.1.2 案例

  • 求10-20之间的随机数

    Math.floor(Math.random() * (max - min)) + min; 
    

10.1.3 属性方法对照表

Math对象的属性(常量)

属性(常量) 描述
Math.E 常量 数学常数 e。这是欧拉数,自然对数的底。
Math.LN2 常量 2 的自然对数。
Math.LN10 常量 10 的自然对数。
Math.LOG2E 常量 以 2 为底 e 的对数。
Math.LOG10E 常量 以 10 为底 e 的对数。
Math.PI 常量 Pi。这是圆的周长与直径的比值。
Math.SQRT1_2 常量 0.5 的平方根,或相当于 1 除以 2 的平方根。
Math.SQRT2 常量 2 的平方根。

Math对象的方法(函数)

方法(函数) 描述
Math.abs 函数 返回数字的绝对值。
Math.acos 函数 返回数字的反余弦值。
Math.acosh 函数 返回数字的双曲反余弦值(或反双曲余弦值)。
Math.asin 函数 返回数字的反正弦值。
Math.asinh 函数 返回数字的反双曲正弦。
Math.atan 函数 返回数字的反正切值。
Math.atan2 函数 将与 X 轴的角度(以弧度为单位)返回到由 y 和 x 坐标表示的点。
Math.atanh 函数 返回数字的反双曲正切。
Math.ceil 函数 返回大于或等于提供的数值表达式的最小整数。
Math.cos 函数 返回数字的余弦值。
Math.cosh 函数 返回数字的双曲余弦。
Math.exp 函数 返回 e(自然对数的底)的乘幂数。
Math.expm1 函数 返回 e(自然对数的底)的乘幂数减去 1 的结果。
Math.floor 函数 返回小于或等于提供的数值表达式的最大整数。
Math.hypot 函数 返回参数平方和的平方根。
Math.imul 函数 返回被视为 32 位带符号整数的两个数字的积。
Math.log 函数 返回数字的自然对数。
Math.log1p 函数 返回 1 加上一个数字的的自然对数。
Math.log10 函数 返回数字以 10 为底的对数。
Math.log2 函数 返回数字以 2 为底的对数。
Math.max 函数 返回提供的两个数值表达式中的较大值。
Math.min 函数 返回提供的两个数字中的较小值。
Math.pow 函数 返回基表达式的指定乘幂数的值。
Math.random 函数 返回介于 0 和 1 之间的伪随机数。
Math.round 函数 返回舍入到最近整数的指定数值表达式。
Math.sign 函数 返回数字符号,它指示数字为正数、负数还是 0。
Math.sin 函数 返回数字的正弦值。
Math.sinh 函数 返回数字的反双曲正弦。
Math.sqrt 函数 返回数字的平方根。
Math.tan 函数 返回数字的正切值。
Math.tanh 函数 返回数字的双曲正切。
Math.trunc 函数 返回数字的整数部分,删除任何小数数字。

10.2 Date对象(构造函数)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

10.2.1 常用属性和方法

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。

// 获取当前时间,UTC世界时间,距1970年1月1日(世界标准时间)起的毫秒数
var now = new Date();
console.log(now.getTime());	// 获取距1970年1月1日(世界标准时间)起的毫秒数
console.log(now.valueOf());	// valueOf用于获取对象的原始值,与getTime()方法相同

Date构造函数的参数
1. 毫秒数 1498099000356		new Date(1498099000356)
2. 日期格式字符串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份从0开始
  • 获取日期的毫秒形式
var now = new Date();
console.log(now.getTime());
// valueOf用于获取对象的原始值
console.log(now.valueOf());

// HTML5中提供的方法,有兼容性问题
var now = Date.now();

// 不支持HTML5的浏览器,可以用下面这种方式
var now = + new Date();	// 隐式调用 Date对象的valueOf() 
  • 日期格式化方法
toString()		// 转换成字符串
valueOf()		// 获取毫秒值
// 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
  • 获取日期指定部分
getTime()  	  // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期几 0周日   6周6
getDate()     // 返回当前月的第几天
getMonth()    // 返回月份,***从0开始***
getFullYear() //返回4位的年份  如 2016

10.2.2 案例

  • 案例1:写一个函数,格式化日期对象,返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
  //如果date不是日期对象,返回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
  • 计算时间差,返回相差的天/时/分/秒
function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

10.2.3 方法对照表

Date对象 的方法。

方法 描述
getDate 方法 使用当地时间返回一个月某天的值。
getDay 方法 使用当地时间返回一个星期某天的值。
getFullYear 方法 使用当地时间返回年份值。
getHours 方法 使用当地时间返回小时值。
getMilliseconds 方法 使用当地时间返回毫秒值。
getMinutes 方法 使用当地时间返回分钟值。
getMonth 方法 使用当地时间返回月份值。
getSeconds 方法 使用当地时间返回秒值。
getTime 方法 Date 对象中的时间值返回为自 1970 年 1 月 1 日午夜起经过的毫秒数。
getTimezoneOffset 方法 返回主机的时间与协调通用时间 (UTC) 之间的分钟差值。
getUTCDate 方法 使用 UTC 返回一个月某天的值。
getUTCDay 方法 使用 UTC 返回一个星期某天的值。
getUTCFullYear 方法 使用 UTC 返回年份值。
getUTCHours 方法 使用 UTC 返回小时值。
getUTCMilliseconds 方法 使用 UTC 返回毫秒值。
getUTCMinutes 方法 使用 UTC 返回分钟值。
getUTCMonth 方法 使用 UTC 返回月份值。
getUTCSeconds 方法 使用 UTC 返回秒值。
getVarDate 方法 Date 对象中的 VT_DATE 值返回。
getYear 方法 返回年份值。
hasOwnProperty 方法 返回一个布尔值,该值指示一个对象是否具有指定名称的属性。
isPrototypeOf 方法 返回一个布尔值,该值指示对象是否存在于另一个对象的原型链中。
propertyIsEnumerable 方法 返回一个布尔值,该值指示指定属性是否为对象的一部分以及该属性是否是可枚举的。
setDate 方法 使用当地时间设置一个月中某一日的数值。
setFullYear 方法 使用当地时间设置年份值。
setHours 方法 使用当地时间设置小时值。
setMilliseconds 方法 使用当地时间设置毫秒值。
setMinutes 方法 使用当地时间设置分钟值。
setMonth 方法 使用当地时间设置月份值。
setSeconds 方法 使用当地时间设置秒值。
setTime 方法 设置 Date 对象中的日期和时间值。
setUTCDate 方法 使用 UTC 设置一个月中某一日的数值。
setUTCFullYear 方法 使用 UTC 设置年份值。
setUTCHours 方法 使用 UTC 设置小时值。
setUTCMilliseconds 方法 使用 UTC 设置毫秒值。
setUTCMinutes 方法 使用 UTC 设置分钟值。
setUTCMonth 方法 使用 UTC 设置月份值。
setUTCSeconds 方法 使用 UTC 设置秒值。
setYear 方法 使用当地时间设置年份值。
toDateString 方法 以字符串值的形式返回一个日期。
toGMTString 方法 返回使用格林尼治标准时间 (GMT) 转换为字符串的日期。
toISOString 方法 以字符串值的形式返回采用 ISO 格式的日期。
toJSON 方法 用于在 JSON 序列化之前转换目标类型的数据。
toLocaleDateString 方法 将一个日期以字符串值的形式返回,该字符串应适合于宿主环境的当前区域设置。
toLocaleString 方法 返回使用当前区域设置转换为字符串的对象。
toLocaleTimeString 方法 以字符串值的形式返回一个时间,此字符串值应与宿主环境的当前区域设置相适应。
toString 方法 返回表示对象的字符串。
toTimeString 方法 以字符串值形式返回时间。
toUTCString 方法 返回使用 UTC 转换为字符串的日期。
valueOf 方法 返回指定对象的原始值。

10.3 Array对象

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

10.3.1 常用属性和方法

length属性: 返回数组的成员数量。

var arr = ['a', 'b'];
console.log(arr.length) // 2

常用方法

  • push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

    var a = [];
    a.push(1) // 1
    a.push('a') // 2
    a.push(true, {}) // 4
    console.log(a); //[1, 'a', true, {}]
    
  • pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组

    var a = ['a', 'b', 'c'];
    a.pop() // 'c'
    console.log(a);// ['a', 'b']
    
  • slice方法用于提取原数组的一部分,返回一个新数组,原数组不变。

    它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。 如果省略第二个参数,则一直返回到原数组的最后一个成员。

    var a = ['a', 'b', 'c'];
    a.pop() // 'c'
    console.log(a);// ['a', 'b']
    
  • join方法用于将数组元素以指定字符拼接为字符串,返回一个字符串,原数组不变。

    var a = ['a','b','c','d','e'];
    console.log(a.join('-')) // 'a-b-c-d-e'
    
  • 返回数组的字符串表示形式。

    var arr = [1, 2, 3, 4];
    console.log(arr.toString()); //1,2,3,4
    

10.3.2 方法和属性对照表

Array 对象的属性。

属性 描述
length 属性 返回一个整数值,此整数比数组中所定义的最高位元素大 1,是实际元素个数。

Array 对象的方法。

方法 描述
concat 方法(数组) 返回由两个数组组合而成的新数组。
entries 方法 返回包含数组的键/值对的迭代器。
every 方法 检查定义的回调函数是否为数组中的所有元素返回 true
fill 方法 使用指定值填充数组。
filter 方法 对数组的每个元素调用定义的回调函数,并返回回调函数为其返回 true 的值的数组。
findIndex 方法 返回满足回调函数中指定的测试条件的第一个数组元素的索引值。
forEach 方法 为数组中的每个元素调用定义的回调函数。
hasOwnProperty 方法 返回一个布尔值,该值指示某个对象是否具有指定名称的属性。
indexOf 方法(数组) 返回某个值在数组中的第一个匹配项的索引。
isPrototypeOf 方法 返回一个布尔值,该值指示某个对象是否存在于另一个对象的原型链中。
join 方法 返回由一个数组的所有元素串联而成的 String 对象。
keys 方法 返回包含数组的索引值的迭代器。
lastIndexOf 方法(数组) 返回指定值在数组中的最后一个匹配项的索引。
map 方法 对数组的每个元素调用定义的回调函数并返回包含结果的数组。
pop 方法 从数组中移除最后一个元素并将该元素返回。
propertyIsEnumerable 方法 返回一个布尔值,该值指示指定属性是否为对象的一部分且是否可枚举。
push 方法 将新元素追加到一个数组中,并返回数组的新长度。
reduce 方法 通过对数组中的所有元素调用定义的回调函数来累积单个结果。 回调函数的返回值是累积的结果,并且作为对回调函数的下一个调用中的参数提供。
reduceRight 方法 通过对数组中的所有元素调用定义的回调函数来按降序顺序累积单个结果。 回调函数的返回值是累积的结果,并且作为对回调函数的下一个调用中的参数提供。
reverse 方法 将元素顺序被反转的 Array 对象返回。
shift 方法 从数组中移除第一个元素并将返回该元素。
slice 方法(数组) 返回一个数组中的一部分。
some 方法 检查定义的回调函数是否为数组的任何元素返回 true
sort 方法 返回一个元素已经进行了排序的 Array 对象。
splice 方法 从一个数组中移除元素,如有必要,在所移除元素的位置上插入新元素,并返回所移除的元素。
toLocaleString 方法 返回使用当前区域设置的字符串。
toString 方法 返回数组的字符串表示形式。
unshift 方法 在数组的开头插入新元素。
valueOf 方法 获取对数组的引用。
values 方法 返回包含数组的值的迭代器。

10.4 String对象

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

10.4.1 常用属性和方法

var s = 'JavaScript';
// length属性返回字符串的长度。
var i = s.length; //返回参数在字符串中第一次出现的位置
var i = s.indexOf('b'); //从原字符串取出子字符串并返回,不改变原字符串
var i = s.substr(2,4);//从下标第二个开始截取4个长度的字符串
//toLowerCase方法用于将一个字符串全部转为小写 
//toUpperCase则是全部转为大写
var i = s.toLowerCase();
var i = s.toUpperCase();

// 用于替换匹配的子字符串,只替换第一个匹配 
var i = s.replace('a','b');
console.log(i);

10.4.2 方法和属性对照表

String 对象的属性

属性 描述
constructor 属性 指定用于创建对象的函数。
length 属性(字符串) 返回 String 对象的长度。
prototype 属性 为对象的类返回原型的引用。

String 对象的方法。

方法 描述
anchor 方法 将具有 NAME 特性的 HTML 定位点放置在文本两侧。
big 方法 将 HTML 标记放置在文本两侧。
blink 方法 将 HTML 标记放置在文本两侧。
bold 方法 将 HTML 标记放置在文本两侧。
charAt 方法 返回指定索引处的字符。
charCodeAt 方法 返回指定字符的 Unicode 编码。
codePointAt 方法 返回一个 Unicode UTF-16 字符的码位。
concat 方法(字符串) 返回由提供的两个字符串串联而成的字符串。
EndsWith 方法 返回一个布尔值,该值指示字符串或子字符串是否以传入字符串结尾。
includes 方法 返回一个布尔值,该值指示传入字符串是否包含在字符串对象中。
fixed 方法 将 HTML 标记放置在文本两侧。
fontcolor 方法 将具有 COLOR 特性的 HTML 标记放置在文本两侧。
fontsize 方法 将具有 SIZE 特性的 HTML 标记放置在文本两侧。
hasOwnProperty 方法 返回一个布尔值,该值指示某个对象是否具有指定名称的属性。
indexOf 方法(字符串) 返回字符串内第一次出现子字符串的字符位置。
isPrototypeOf 方法 返回一个布尔值,该值指示某个对象是否存在于另一个对象的原型链中。
italics 方法 将 HTML 标记放置在文本两侧。
lastIndexOf 方法(字符串) 返回字符串内子字符串的最后一个匹配项。
link 方法 将具有 HREF 特性的 HTML 定位点放置在文本两侧。
localeCompare 方法 返回一个值,该值指示两个字符串在当前区域设置中是否相等。
match 方法 通过使用提供的正则表达式对象来搜索字符串并以数组形式返回结果。
normalize 方法 返回指定字符串的 Unicode 范式。
propertyIsEnumerable 方法 返回一个布尔值,该值指示指定属性是否为对象的一部分且是否可枚举。
repeat 方法 返回一个新的字符串对象,它的值等于重复了指定次数的原始字符串。
replace 方法 使用正则表达式替换字符串中的文本并返回结果。
search 方法 返回正则表达式搜索中第一个子字符串匹配项的位置。
slice 方法(字符串) 返回字符串的片段。
small 方法 将 HTML 标记放置在文本两侧。
split 方法 返回一个字符串拆分为若干子字符串时所产生的字符串数组。
StartsWith 方法 返回一个布尔值,该值指示字符串或子字符串是否以传入字符串开头。
strike 方法 将 HTML 标记放置在文本两侧。
sub 方法 将 HTML 标记放置在文本两侧。
substr 方法 返回一个从指定位置开始且具有指定长度的子字符串。
substring 方法 返回 String 对象中指定位置处的子字符串。
sup 方法 将 HTML 标记放置在文本两侧。
toLocaleLowerCase 方法 返回一个字符串,其中所有字母字符都转换为小写形式,并将考虑主机环境的当前区域设置。
toLocaleString 方法 返回使用当前区域设置转换为字符串的对象。
toLocaleUpperCase 方法 返回一个字符串,其中所有字母字符都转换为大写形式,并将考虑主机环境的当前区域设置。
toLowerCase 方法 返回一个字符串,其中所有字母字符都转换为小写形式。
toString 方法 返回字符串。
toUpperCase 方法 返回一个字符串,其中所有字母字符都转换为大写形式。
trim 方法 返回已移除前导空格、尾随空格和行终止符的字符串。
valueOf 方法 返回字符串。

10.5 包装对象

对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”。

所谓“包装对象”,就是分别与数值、字符串、布尔值相对应的NumberStringBoolean三个原生对象。这三个原生对象可以把原始类型的值变成(包装成)对象。

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"

v1 === 123 // false
v2 === 'abc' // false
v3 === true // false

包装对象的最大目的,首先是使得 JavaScript 的对象涵盖所有的值,其次使得原始类型的值可以方便地调用某些方法。

原始类型的值,可以自动当作对象调用,即调用各种对象的方法和参数。

**这时,JavaScript 引擎会自动将原始类型的值转为包装对象实例,在使用后立刻销毁实例。**

比如,字符串可以调用length属性,返回字符串的长度。

'abc'.length // 3

上面代码中,abc是一个字符串,本身不是对象,不能调用length属性。

JavaScript 引擎自动将其转为包装对象,在这个对象上调用length属性。

调用结束后,这个临时对象就会被销毁。这就叫原始类型与实例对象的自动转换。

注意:JS的内置对象还有很多,我们只不过是学习了比较常用的几个而已;

在后面的学习中,我们还有讲解使用其他类型的内置对象;

可以查看狐火和微软开发者社区,获取更多知识……

发布了2086 篇原创文章 · 获赞 2302 · 访问量 22万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览