基础篇 07 Error、JSON、Math、Console对象

Error对象

通过 Error 的构造器可以创建一个错误对象。当代码运行时的发生错误，会创建新的 Error 对象，并将其抛出。Error 对象也可用于用户自定义的异常的基础对象。

new Error([message[, fileName[,lineNumber]]])

message 是人类可阅读的错误描述信息。

fileName（非标准）是被创建的 Error 对象的文件名，默认是调用 Error 构造器代码所在的文件的名字

lineNumber（非标准）是被创建的 Error 对象的行号，默认是调用 Error 构造器代码所在的文件的行号。

try {
    throw new Error("MyError!");
} catch (e) {
    console.log(e.message); // 'MyError!'
    console.log(e.name);    // 'Error'。非标准
    console.log(e.stack);   //  'Error: MyError! at...'。非标准
}

Error 可能当作普通函数一样使用，返回一个 Error 对象，与通过 new 关键字构造 Error 对象生成的结果相同。

Error类型

  • EvalError： 与 eval() 有关。如：eval 函数没有被正确执行。

  • InternalError： JavaScript 引擎内部错误的异常抛出的实例。 如：递归太多。

  • RangeError： 数值变量或参数超出其有效范围。如：数组长度为负数、Number 对象的方法参数超出范围、函数堆栈超过最大值。

  • ReferenceError： 引用一个不存在的变量时发生的错误。

  • SyntaxError： 解析代码的过程中发生的语法错误。

  • TypeError： 变量或参数不属于有效类型。

  • URIError： URI 相关函数的参数不正确时抛出的错误。主要涉及：encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape() 这六个函数。

自定义异常类型

function MyError(message) {
    this.name = 'MyError';
    this.message = message || 'Default Message';
    this.stack = new Error().stack;
}
MyError.prototype = Object.create(Error.prototype);
MyError.prototype.constructor = MyError;

try {
    throw new MyError('custom message');
} catch (e) {
    console.log(e.name);    // 'MyError'
    console.log(e.message); // 'custom message'
}

抛出和捕获异常

throw

throw 语句用来抛出一个异常。当前函数的执行将被停止（throw 之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个 catch 块。如果调用者函数中没有 catch块，程序将会终止。

try {
    throw new Error('This is a Error!');
} catch (e) {
    console.log(e.name);    // 'Error'
    console.log(e.message); // 'This is a Error!'
}

注意： throw 可以抛出任何类型的值。也就是说，除了 Error 类型，还可以抛出 JavaScript 中的任何值。

try...catch

try...catch 语句用于对指定的某个语句块内抛出的异常的响应。

try 语句包含一个 try 块，和至少一个 catch 或者 finally 块的。

  • try...catch

  • try...finally

  • try...catch...finally

catch 块包含 try 块中抛出异常时要执行的语句。也就是，如果 try 块中有任何一个语句（或者调用的函数）抛出异常，会立即转向 catch 块的语句；如果没有异常抛出，会跳过 catch 块。

finally 块在 try 块 和 catch 块之后执行。无论是否抛出异常 finally 块都会执行。此外，如果抛出异常，即使没有catch 块处理异常，finally 块的语句也会执行。

try {
    throw new Error('This is a Error!')
} catch (e) {
    console.log(e) // Error: This is a Error! at ...。
} finally {
    console.log('Finally!') // Finally!
}

如果 finally 块有 return 语句，那么该返回值将会成为整个 try-catch-finally 的返回值，无论 try 和 catch 块是否有 return 语句。

function funcTry() {
    try {       return 1 }
    catch (e) { return 2 }
    finally {   return 3 }
}
console.log('返回值：', funcTry()) // '返回值： 3'

try 语句可以嵌套一个或者多个的 try 语句。如果 try 语句 没有 catch 块，那么抛出的异常将会被包裹它的 try 语句的 catch 块捕获。

try {
    try {     throw new Error("Error inner!"); }
    finally { console.log("Finally inner!"); }
}
catch (e) { console.error(e); }
finally {   console.log("Finally outer!");}
// Finally inner!
// Error: Error inner! at xxx
// Finally outer!

JSON对象

JSON（JavaScript Object Notation）是一种基于文本的标准格式，用于表示基于 JavaScript 对象语法的结构化数据，用来序列化对象、数组、数值、字符串、布尔值和 null 。

注意： JSON 是基于 JavaScript 语法，但 JSON 不是 JavaScript。

JSON格式

JSON 是一种基于 JavaScript 对象语法的数据格式。

JSON 可以作为一个对象或者字符串存在：作为对象时，用于解读 JSON 中的数据；作为字符串时，用于通过网络传输 JSON 数据

另外，一个 JSON 对象可以储存在一个单独的文件中，该文件基本上就是一个文本文件，扩展名为 .json，对应的媒体类型（MIME type）为 application/json。

JSON 格式注意事项

  • JSON 是一种纯数据格式，只包含属性，没有方法。

  • 属性名称和字符串必须放在双引号内，单引号无效。

  • 一个意外的逗号或分号就可能导致 JSON 文件出错。如，数组或对象最后一个成员后面的逗号。

  • 属性值是引用类型：只能是数组或对象，不能是函数、正则表达式对象、日期对象。

  • 属性值是基本类型：只能是字符串、数值（十进制，且不能是 NaN、Infinity、-Infinity）、布尔值和 null，不能是 undefined。

  • 属性值是数值：禁止出现前导零。

  • 属性值是小数：小数点后面至少跟着一位数字。

JSON方法

JavaScript 提供一个全局的 JSON 对象来对 JSON 对象和 JSON 字符串进行转换。

JavaScript 内置的 JSON 对象只有两个方法：stringify()、parse()。除此之外，JSON 对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

stringify()

用于将一个 JavaScript 对象或值转换为 JSON 字符串。

JSON.stringify(value[, replacer [, space]])

value 是一个将要被序列化成 JSON 字符串的 JSON 对象。 replacer 可以是一个函数或数组。如果是函数，则 JSON 对象的每个属性都会经过该函数的转换和处理；如果是数组，则只有在数组中的属性名才会被序列化；如果是 null 或者未提供，则对象所有的属性都会被序列化。

const json = { a: 1, b: 2 }
const jsonStr = JSON.stringify(json, function (key, value) {
    if (key === '') { return value }
    return value + 100
})
console.log(jsonStr) // {"a":101,"b":102}

replacer 是函数可以传入键（key）和值（value）两个参数。replacer 函数第一次调用时，key 是一个空字符串，value 是 stringify() 方法的第一个参数；第二次及以后的每次调用，都是对上一次调用的返回值的递归，即，如果上一次的返回值是可序列化的，则会继续调用 stringify() 方法。

const jsonStr = JSON.stringify(json, function (key, value) {
    if (key === '') {
        console.log(value) // {a: 1, b: 2}
        return { c: 'c', d: 'd' }
    }
    return value + 100
})
console.log(jsonStr) // {"c":"c100","d":"d100"}

space 是指定缩进用的空白字符串，用于美化输出。如果是数值，则代表有多少个（1~10，小于 1 意味着没有空格）空格；如果是字符串（长度超过 10，截取前 10），则该字符串将被作为空格；如果是 null 或者未提供，表示没有空格。

const jsonStr = JSON.stringify(json, null, 8)
// '{\n        "a": 1,\n        "b": 2\n}'

stringify() 转换规则：

  • 传参是函数、undefined 会返回 undefined。

  • 布尔值、数字、字符串的包装对象会自动转换成对应的原始值。

  • undefined、函数、Symbol 值：在非数组对象中将会被忽略；在数组中被转换成 null。

  • NaN、Infinity、null 会转换为 null。

  • 所有属性名是 Symbol 值的属性会被忽略。

  • 非数组对象的属性不能保证以特定的顺序序列化。

  • 如果属性值是对象，且该对象内有 toJSON() 方法，则该对象的序列化值为 toJSON() 方法的返回值。

  • 不能包含循环引用的对象。

  • Date 对象内置了 toJSON() 方法，Date 类型数据将会转换为字符串，结果同 Date.toISOString() 返回值。

  • 其他类型的对象仅会序列化可枚举的属性。

// 传参是函数、undefined 会返回 undefined
JSON.stringify(function () {}) // undefined
JSON.stringify(undefined)      // undefined

// 不能包含循环引用的对象
const obj = { a: 1 }
obj.b = obj
JSON.stringify(obj) // Uncaught TypeError: Converting circular structure to JSON

const json = {
  NaN: NaN,
  Infinity: Infinity,
  null: null,
  [Symbol('Symbol')]: 'Symbol',
  Date: new Date(),
  array: [undefined, function () { }, Symbol('Symbol')],
  obj: {
    undefined: undefined,
    fn: function () { },
    Symbol: Symbol('Symbol')
  },
  jsonObj: {
    toJSON: function () { return '自定义' }
  }
}
JSON.stringify(json) // {"NaN":null,"Infinity":null,"null":null,"Date":"2022-05-21T06:32:12.184Z","array":[null,null,null],"obj":{},"jsonObj":"自定义"}

parse()

用于将一个 JSON 字符串转换为 JavaScript 对象或值。

JSON.parse(text[, reviver])

text 是要被解析成 JavaScript 值的字符串。若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常。 reviver 是一个函数，用来在返回解析值之前，修改解析值，返回修改后的解析值。该函数接收键（key）和值（value）两个参数。

reviver 函数解析对象本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）调用，在调用过程中，当前属性所属的对象会作为 this 值。如果返回 undefined，则当前属性会被忽略；如果返回其他值，则会成为当前属性新的值。

当遍历到最顶层的值时（即最后一次调用），传入函数的参数会是空字符串和最终返回的解析值（有可能已经被修改过了），当前的 this 值会是 {"": [最终返回的解析值]}。

const jsonStr = '{"a": 1, "b": 1}'
const json = JSON.parse(jsonStr, function (key, value) {
    console.log(key, value)
    if (key === '') {
        return { c: 'c', d: 'd' }
    }
    return value
})

// a 1
// b 1
// {c: 'c', d: 'd'}

注意： 如果 JSON 的属性值是数值，且带有前导零，JSON.stringify() 方法可能忽略前导零或者当作八进制解析（不同浏览器实现可能不一样），JSON.parse() 方法则会抛出 SyntaxError 错误。

Math对象

Math 是一个内置对象，拥有一些数学常数属性和数学函数方法，主要用于 Number 类型计算，且不支持 BigInt 类型。

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

Math属性

  • E： 欧拉常数，也是自然对数的底数，约等于 2.718。

  • LN2： 2 的自然对数，约等于 0.693。

  • LN10： 10 的自然对数，约等于 2.303。

  • LOG2E： 以 2 为底的 E 的对数，约等于 1.443。

  • LOG10E： 以 10 为底的 E 的对数，约等于 0.434。

  • PI： 圆周率，一个圆的周长和直径之比，约等于 3.14159。

  • SQRT1_2： 二分之一的平方根，同时也是 2 的平方根的倒数，约等于 0.707。

  • SQRT2： 2 的平方根，约等于 1.414。

Math 的常量是使用 JavaScript 中浮点数的最大精度来定义的。

Math.E  // 2.718281828459045
Math.PI // 3.141592653589793

Math方法

  • abs(x)： 返回一个数的绝对值。

  • max([x[, y[, …]]])： 返回零到多个数值中最大值。

  • min([x[, y[, …]]])： 返回零到多个数值中最小值。

  • random()： 返回一个 0 到 1 之间的伪随机数。

  • round(x)： 返回四舍五入后的整数。

  • ceil(x)： 返回大于一个数的最小整数，即一个数向上取整后的值。

  • floor(x)： 返回小于一个数的最大整数，即一个数向下取整后的值。

  • sign(x)： 返回一个数的符号，得知一个数是正数、负数还是 0。

  • trunc(x)： 返回一个数的整数部分，直接去除其小数点及之后的部分。

  • pow(x, y)： 返回一个数的 y 次幂。

  • sqrt(x)： 返回一个数的平方根。

  • cbrt(x)： 返回一个数的立方根。

  • hypot([x[, y[, …]]])： 返回其所有参数平方和的平方根。

  • log(x)： 返回一个数的自然对数（㏒e，即 ㏑）。

  • log1p(x)： 返回一个数加 1 的和的自然对数（㏒e，即 ㏑）。

  • log10(x)： 返回一个数以 10 为底数的对数。

  • log2(x)： 返回一个数以 2 为底数的对数。

  • exp(x)： 返回欧拉常数的参数次方，E^x，其中 x 为参数，E 是欧拉常数（2.718...，自然对数的底数）。

  • expm1(x)： 返回 exp(x) - 1 的值。

  • clz32(x)： 返回一个 32 位整数的前导零的数量。

  • fround(x)： 返回最接近一个数的单精度浮点型表示。

  • imul(x, y)： 返回 32 位整数乘法的结果。

  • sin(x)： 返回一个数的正弦值。

  • sinh(x)： 返回一个数的双曲正弦值。

  • asin(x)： 返回一个数的反正弦值。

  • asinh(x)： 返回一个数的反双曲正弦值。

  • cos(x)： 返回一个数的余弦值。

  • cosh(x)： 返回一个数的双曲余弦值。

  • acos(x)： 返回一个数的反余弦值。

  • acosh(x)： 返回一个数的反双曲余弦值。

  • tan(x)： 返回一个数的正切值。

  • tanh(x)： 返回一个数的双曲正切值。

  • atan(x)： 返回一个数的反正切值。

  • atanh(x)： 返回一个数的反双曲正切值。

  • atan2(y, x)： 返回 y/x 的反正切值。

  • toSource()： 返回字符串 "Math"。

注意： 三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 返回的值是弧度而非角度。若要转换，弧度除以 (Math.PI / 180) 即可转换为角度。同理，角度乘以这个数则能转换为弧度。

注意： 很多 Math 函数都有一个精度，而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果，甚至，在不同的系统或架构下，相同的 JS 引擎也会给出不同的结果！

console对象

Console 对象提供了浏览器控制台调试的接口。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。

Console 对象可以从任何全局对象中访问到，如：浏览器作用域上的 Window、Web Worker 的 WorkerGlobalScope。

console方法

  • log()： 打印内容的通用方法，Info 类型。

  • info()： 打印资讯类说明信息，Info 类型。

  • warn()： 打印一个警告信息，Warnings 类型。

  • error()： 打印一条错误信息，Errors 类型。

  • debug()： 打印一条调试信息，Verbose 类型。

  • trace()： 输出一个 stack trace。

    console.trace()
// console.trace
// (anonymous) @ [fileName]:[lineNo]

  • count()： 以参数为标识记录 count() 调用的次数。如果省略参数，默认为 default。

  • countReset()： 重置指定标识的计数器值。如果省略参数，此函数会重置默认的计数器。

  • dir()： 在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示。

    console.dir(document.querySelector('body'))
// aLink: ""
// accessKey: ""
// ...

  • dirxml()： 显示一个明确的XML/HTML元素的包括所有后代元素的交互树。

    console.dirxml(document.querySelector('body'))
// <body>
//   <div>...</div>
//   <script>...</script>
// </body>

  • table()： 将列表型的数据打印成表格。

    console.table(["apples", "oranges", "bananas"]);
console.table(["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]);

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
console.table([
    new Person("John", "Smith"),
    new Person("Jane", "Doe")
    new Person("Emily", "Jones")
], ["firstName"]); // 过滤属性名为 firstName 的列。

  • assert()： 如果第一个参数 false，则将一个错误消息写入控制台；如果是 true，没有任何反应。

    console.assert(false, 'The word is %s', 'Hello!');
// Assertion failed: The word is Hello!

console.assert(true, 'The word is %s', 'Hello!'); // undefined

  • clear()： 清空控制台，并输出 Console was cleared。

  • group()： 创建一个新的分组，后续所有打印内容将会以子层级的形式展示，直到调用 groupEnd() 之后，当前分组结束。

  • groupEnd()： 关闭当前分组，即当前最近的一个 group() 创建的分组。

  • groupCollapsed()：与 group() 类似，不同的是，该方法打印出来的内容默认是折叠的。

  • profile()（非标准）： 开始记录性能描述信息

  • profileEnd()（非标准）：停止记录之前已经由 profile() 开始记录的性能描述信息。

  • time()： 启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。

  • timeLog()： 在控制台输出一个 time() 启动的计时器的值。

  • timeEnd()： 停止一个 time() 启动的计时器，并以毫秒打印其从开始到结束所用的时间。

  • timeStamp()（非标准）： 添加一个标记到浏览器的 Timeline 或 Waterfall 工具。

字符串替换

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

  • %s： 字符串。

  • %d、%i： 整数。

  • %f： 浮点数，支持格式化。

  • %o、%O： JavaScript 对象。

  • %c： CSS 格式字符串，指定输入的样式。

console.log("String: %s", 'abcd')           // String: abcd
console.log("Number: %d %d %2d", 1, 1.0001) // Number: 1 1 %2d
console.log("Float: %f %f", 1, 1.0001)      // Float: 1 1.0001
console.log("Object: %o", { a: 1, b: 2 })   // Object: {a: 1, b: 2}
console.log("String: %c%s %c efg", 'color: red;', 'abcd', 'color: green')
// String: abcd  efg。输出内容会显示不同颜色

如果输出的内容与指定类型不符，则会强制转换为指定类型。

console.log("Number: %d", 'abcd')         // Number: NaN
console.log("String: %s", { a: 1, b: 2 }) // String: [object Object]

定义样式

可以使用 %c 占位符为打印内容定义样式。

占位符前的文本不受影响，占位符后的文本将会使用参数中声明的 CSS 样式。

console.log("This is a %ccolorful %cstring!", "color: red;", "color: green;");

%c 占位符可用的属性如下（不同浏览器可能存在差异）：

background
border
border-radius
box-decoration-break
box-shadow
clear
float
color
cursor
display
font
line-height
margin
outline
padding
text-*
white-space
word-spacing
word-break
writing-mode

备注： 控制台信息的默认行为与行内元素相似，可以通过 display 属性修改盒模型。

debugger语句

debugger 语句调用任何可用的调试功能。当被调用时，执行暂停在 debugger 语句的位置，如同在脚本源代码中的断点一样。

如果没有调试功能可用，则此语句不起作用。

参考资料

MDN - Error

MDN - 使用JSON

MDN - JSON

MDN - Math

MDN - Console

上一页基础篇 06 Window对象下一页基础篇 08 History、URL、Screen、Navigator、Location对象

最后更新于