JS笔记（2/8）之原生对象，面向对象编程

最新推荐文章于 2023-09-25 09:42:25 发布

Pass.K

最新推荐文章于 2023-09-25 09:42:25 发布

阅读量113

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42103141/article/details/106014194

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

面向对象编程

标准库（对象）

面向对象编程
Console 对象与控制台
Date
RegExp
JSON
Object 对象
Array对象
Boolean对象
String对象
Number对象
math对象
包装对象
字符串方法及属性

Console 对象与控制台

详见这里

console对象是JS的原生对象
常见用途：2x
调试程序，显示网页代码运行的错误信息
提供一个命令行接口，用来与网页代码互动
console对象的浏览器实现，包含在浏览器自带的开发工具之中。
开发工具面板功能介绍

Elements：查看网页的 HTML 源码和 CSS 代码。
Resources：查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
Network：查看网页的 HTTP 通信情况。
Sources：查看网页加载的脚本源码。
Timeline：查看各种网页行为随时间变化的情况。
Performance：查看网页的性能情况，比如 CPU 和内存消耗。
Console：用来运行 JavaScript 命令。

console对象的静态方法

console.log()，console.info()，console.debug()

console.log方法
用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。
如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。

console.log(' %s + %s = %s', 1, 1, 2)
//  1 + 1 = 2
//上面代码中，console.log方法的第一个参数有三个占位符（%s），第二、三、四个参数会在显示时，依次替换掉这个三个占位符。

console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符。

%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格式字符串

如果参数是一个对象，console.log会显示该对象的值

console.info是console.log方法的别名，用法完全一样。只不过console.info方法会在输出信息的前面，加上一个蓝色图标。

console.debug方法与console.log方法类似，会在控制台输出调试信息。但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况下，才会显示。

console对象的所有方法，都可以被覆盖。因此，可以按照自己的需要，定义console.log方法。

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出错了！");
// 2014-05-18T09:00.000Z 出错了！
//上面代码表示，使用自定义的console.log方法，可以在显示结果添加当前时间。

console.warn()，console.error()

warn方法和error方法也是在控制台输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错。同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

console.table()

对于某些复合类型的数据，console.table方法可以将其转为表格显示。

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);

console.count()

用于计数，输出它（console.count（））被调用了多少次

console.dir()，console.dirxml()

dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性
Node环境中，还可以指定以代码高亮的形式输出??

console.dir(obj, {colors: true})

dirxml方法主要用于以目录树的形式，显示 DOM 节点。如果是普通的对象，dirxml等同于dir方法？?

console.assert()

console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确。

console.time()，console.timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.group()，console.groupEnd()，console.groupCollapsed()

console.group和console.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。

console.trace()，console.clear()

console.trace方法显示当前执行的代码在堆栈中的调用路径。
console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项，console.clear方法将不起作用。

Date

RegExp

JSON

Object 对象

keys方法，返回数组的所有键名（0,2.3…）

Array对象

添加链接描述

Boolean对象

String对象

Number对象

概述

Number对象是数值对应的包装对象，可以作为构造函数，也可以作为工具函数使用。
作为构造函数，用于生成值为数值的对象

var n = new Number(1);
type n //objectJ

作为工具函数时，它可以将任何类型的值转为数值。

Number(true) //1

静态属性

即定义在Number对象上的属性，而不是定义在实例上的属性

Number.POSITIVE_INFINITY // Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE
// 1.7976931348623157e+308
Number.MAX_VALUE < Infinity
// true

Number.MIN_VALUE
// 5e-324
Number.MIN_VALUE > 0
// true

Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

实例方法

4个实例方法，都跟将数值转换为指定格式有关
Number.prototype.toString()
Number对象部署了自己的toString方法，用来将一个数值转为字符串形式。toString方法可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值先转为十进制，

(10).toString(2) // "1010"
(10).toString(8) // "12"
(10).toString(16) // "a"

Number.prototype.toFixed()
toFixed()方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串。toExponential方法的参数是小数点后有效数字的位数，

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"

Number.prototype.toExponential()
toExponential方法用于将一个数转为科学计数法形式。

Number.prototype.toPrecision()
Number.prototype.toPrecision()方法用于将一个数转为指定位数的有效数字。

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"

Number.prototype.toLocaleString()
Number.prototype.toLocaleString()方法接受一个地区码作为参数，返回一个字符串，表示当前数字在该地区的当地书写形式。

自定义方法

数值的自定义方法，只能定义在它的原型对象Number.prototype上面，

math对象

包装对象

字符串方法及属性

length属性返回字符串的长度；
indexOf（）方法返回字符串中指定文本首次出现的索引（位置）；（注意O大写）
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
search() 方法搜索特定值的字符串，并返回匹配的位置：

indexOf() 与 search()，高度相似，其区别在于：

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
replace() 方法用另一个值替换在字符串中指定的值后，返回新的字符串；注意原字符串并没有变化，只是返回的字符串替换了一部分内容：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

通过 toUpperCase() 把字符串转换为大写：
通过 toLowerCase() 把字符串转换为小写：
concat（）方法：连接两个或多个字符串：

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

trim() 方法删除字符串两端的空白符：

提取字符串字符charAt(position)，charCodeAt(position)
charAt() 方法返回字符串中指定下标（位置）的字符串：

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔