【精读笔记】JavaScript高级程序设计 第5章 基本引用类型

第5章 基本引用类型

概念

• 引用值（或者对象）是某个特定引用类型的实例

• 在ECMAScript中，引用类型是把数据和功能组织到一起的结构

• 对象被认为是某个特定引用类型的实例

• 新对象通过使用new操作符后跟一个构造函数来创建

5.1 Date

Date类型将日期保存为自协调世界时（UTC)时间1970年1月1日午夜至今所经过的毫秒数

创建日期对象

• let now = new Date();
• 在不给此函数传参数的情况下，创建的对象将保存当前日期和时间
• 要基于其他日期和时间创建日期对象，必须传入其毫秒表示

两个辅助方法

• Date.parse()

  • 接受一个表示日期的字符串参数，尝试将这个字符串转换为表示该日期的毫秒数

  • 日期格式

    • “月/日/年”

      • “5/23/2019”

    • “月名 日，年”

      • “May 23, 2019”

    • “周几 月名 日 年 时:分:秒 时区”

      • “Tue May 23 2019 00:00:00 GMT-0700”

    • “YYYY-MM-DDTHH:mm:ss:sssZ”

    • 表示“2019年5月23日”的日期对象

      • let someDate = new Date(Date.parse(“May 23, 2019”))

• Date.UTC()

  • 返回日期的毫秒表示
  • 传给Date.UTC（）的参数是年、月、零起点月数、日、时、分、秒和毫秒
  • let y2k = new Date(Date.UTC(2000,0))

• Date.now()

  • 表示方法执行时日期和时间的毫秒数

  • 可以用于代码分析

    //起始时间
    let start = Date.now();

    //调用函数
    doSomething();

    //结束时间
    let stop = Date.now(),
    result = stop - start;

5.1.1 继承的方法

• Date类型的toLocaleString()方法返回与浏览器的本地环境一致的日期和时间

  • dateObject.toLocaleString()

    var d=new Date();
    var n=d.toLocaleString();

• Date类型的toString()方法返回带时区信息的日期和时间dateObject.toString()

  • dateObject.toString()

    var d = new Date();
    var n = d.toString();

• Date类型的valueOf()方法返回日期的毫秒表示

5.1.2 日期格式化方法

• toDateString()

  • 显示日期中的周几、月、日、年（格式特定于实现）

• toTimeString()

  • 显示日期中的时、分、秒和时区（格式特定于实现）

• toLocaleDateString()

  • 显示日期中的周几、月、日、年（格式特定于实现和地区）

• toLocaleTimeString()

  • 显示日期中的时、分、秒和时区(格式特定于实现和地区）

• toUTCString()

  • 显示完整的UTC日期（格式特定于实现）

5.1.3 日期/时间组件方法

5.2 RegExp

ECMAScript通过RegExp类型支持正则表达式

5.3 原始值包装类型

ECMAScript提供了3种特殊的引用类型

• Boolean
• Number
• String

每当用到某个原始值的方法或属性时，后台都会创建一个相应原始包装类型的对象，从而暴露出操作原始值的各种方法

引用类型与原始值包装类型的主要区别在于对象的生命周期

• 引用类型

  • 通过new实例化
  • 得到的实例在离开作用域时销毁

• 原始值包装类型

  • 自动创建
  • 只存在于访问它的那行代码执行期间
  • 不能再运行时给原始值添加属性和方法

5.3.1 Boolean

• 创建Boolean对象

  • Boolean构造函数
  • 传入true或false
  • let booleanObject = new Boolean(true);

• 所有对象在布尔表达式中都会自动转换为true

• typeof操作符

  • 对原始值返回"boolean"
  • 对引用值返回"object"

• 强烈建议不要使用Boolean对象

5.3.2 Number

• 对应数值的引用类型

• 创建Number对象

  • Number构造函数
  • 传入一个数值
  • let numbeObject = new Number(10);

• toFixed()方法

  let num = 10;
  console.log(num.toFixed(2)); //“10.00”

  • 返回包含指定小数点位数的数值字符串
  • 如果数值本身的小数位数超过了参数指定的位数，则四舍五入到最接近的小数位

• toExponential()方法

  let num = 10;
  console.log(num.toExponential(1)); // “1.0e+1”

  • 返回以科学记数法表示的数值字符串
  • 接收一个参数，表示结果中小数的位数

• toPrecision()方法

  • 返回数值最适当的形式，会根据情况返回最合理的输出结果
  • toPrecision()方法会根据数值和精读来确定调用toFixed()还是toExponential()

• isInteger()方法与安全整数

  • ES6新增
  • Number.isInteger()方法
  • 用于辨别一个数值是否保存为整数
  • console.log(Number.isInteger(1)); // true
  • console.log(Number.isInteger(1.00)); // true
  • console.log(Number.isInteger(1.01)); // false

5.3.3 String

• String是对应字符串的引用类型

• let stringObject = new String(“hello world”)

• 三个继承方法都返回对象的原始字符串值

  • valueOf()
  • toLocaleString()
  • toString()

• length属性，表示字符串中字符的数量（包含空格）

• 1. JavaScript字符

  • 由16位码元组成，每16位码元对应一个字符

  • 字符串中的length属性表示字符串中包含多少16位码元

  • charAt()方法

    • 返回给定索引位置的字符
    • let message = “abcde”;
      console.log(message.charAt(2));//“c”

  • charCodeAt()方法

    • 查看指定码元的字符编码，索引以整数指定

  • fromCharCode()方法

    • 用于根据给定的UTF-16码元创建字符串中的字符
    • 可以接受任意多个数值，并返回将所有数值对应的字符拼接起来的字符串
• 2. normalize()方法
  • 对字符串应用规范化形式

• 3. 字符串操作方法

  • contact

    let stringValue = “hello”;
    let result = stringValue .concat(“word”)

    console.log(result); //“hello world”
    console.log(stringValue); //“hello”

    • 将一个或多个字符串拼接成一个新字符串

    • 可以接收任意多个参数，可以一次性拼接多个字符串

      let stringValue = “hello”;
      let result = stringValue.concat(“world”,"!");

      console.log(result); //“hello world !”
      console.log(stringValue); //“hello”

    • 不会修改调用它们的字符串

  • 三个提取子字符串的方法

    • slice()

      • 第一个参数表示子字符串开始的位置
      • 第二个参数（可省略）表示子字符串结束的位置

    • substr()

      • 第一个参数表示子字符串开始的位置
      • 第二个参数（可省略）表示返回的子字符串数量

    • substring()

      • 第一个参数表示子字符串开始的位置
      • 第二个参数（可省略）表示子字符串结束的位置

    • 当某个参数为负值时，这三个方法的行为不同

• 4. 字符串位置方法

  • 用于在字符串中定位子字符串

  • 从字符串中搜索传入的字符串，并返回位置（如果没找到，返回-1）

  • indexOf()

    • 从字符串开头开始查找子字符串
    • 可选第二个参数位置，表示从这个参数指定位置开始向字符串末尾搜索，忽略该位置之前的字符

  • lastIndexOf()

    • 从字符串末尾开始查找子字符串
    • 可选第二个参数位置，从这个参数指定的位置开始向字符串开头搜索，忽略该位置之后直到字符串末尾的字符
• 5. 字符串包含方法

  • ECMAScript6新增

  • 用于判断字符串中是否包含另一个字符串的方法

  • startsWith()

    • 检查开始于索引0的匹配项
    • 可选第二个参数，表示开始搜索的位置

  • endsWith()

    • 检查开始于索引(string.length - substring.length)的匹配项
    • 可选第二个参数，表示应该当作字符串末尾的位置

  • includes()

    • 检查整个字符串
• 6. trim()方法
  • 这个方法会创建字符串的一个副本，删除前、后所有空格符，再返回结果
  • 返回是字符串的副本，原始字符串不受影响
• 7. repeat()方法

  • 接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果

    let stringValue = “na”
    console.log(stringValue.repeat(16) + “batman”);
    //na na na na na na na na na na na na na na na na batman

• 8. padStart()方法和padEnd()方法

  let stringValue = “foo”;

  console.log(stringValue.padStart(6)); // " foo"
  console.log(stringValue.padStart(9, “.”)); “…foo”

  console.log(stringValue.padEnd(6)); // "foo "
  console.log(stringValue.padEnd(9, “.”)); “foo…”

  • 复制字符串，如果小于指定长度，则在一边填充字符，直到满足长度条件
  • 第一个参数是长度，第二个参数可选，使填充的字符串，默认为空格
  • 第二个参数不限于一个字符，也可以是多个字符的字符串，会将其拼接并截断以匹配指定长度
• 9. 字符串迭代与解构

  • 字符串原型上暴露了@@iterator方法

  • 表示可以迭代字符串的每个字符

  • 在for-of循环中可以通过这个迭代器按序访问每个字符

    for (const c of “abcde”){
    console.log©;
    }
    //a
    //b
    //c
    //d
    //e

• 10. 字符串大小写转换

  • toLowerCase()

  • toLocaleLowerCase()

    • 基于特定地区实现

  • toUpperCase()

  • toLocaleUpperCase()

    • 基于特定地区实现
• 11. 字符串模式匹配方法
  • match()方法
  • 本质上与RegExp对象的exec()方法相同
• 12. localeCompare()方法
  • 比较两个字符串

5.4 单例内置对象

ECMA-262对内置对象的定义：任何由ECMAScript实现提供、与宿主环境无关，并在ECMAScript程序开始执行时就存在的对象

5.4.1 Global

• ECMA-262规定Global对象为一种“兜底对象”，它所针对的是不属于任何对象的属性和方法

• 在全局作用域中定义的变量和函数都会变成Global对象的属性

  • isNaN()、isFinite()、parseInt()、parseFloat()等
• 1. URL编码方法
  • encodeURI()
  • encodeURIComponent()
  • 用于编码统一资源标识符（URI）
• 2. eval()方法
  • 接收一个参数，即一个要执行的ECMAScript(JavaScript)字符串
  • 通过eval()执行的代码属于该调用所在上下文，被执行的代码与该上下文拥有相同的作用域链
  • 当解释器发现eval()调用时，会将参数解释为实际的ECMAScript语句，然后将其插入到该位置
  • 通过eval()定义的任何变量和函数都不会被提升
• 3. Global对象属性
  • undefined NaN Infinity Object Array Funciton Boolean String Number Date RegExp Symbol Error EvalError RangeError ReferenceError SyntaxError TypeError URIError
• 4. window对象
  • 浏览器将window对象实现为Global对象的代理
  • 所有全局作用域中声明的变量和函数都变成了window的属性

5.4.2 Math

• ECMAScript提供了Math对象作为保存数学公式、信息和计算的地方

• 1. Math对象属性
  • 有一些属性，主要保存数学中的一些特殊值
• 2. min()和max()方法

  • Math.max(3,54,32,16)

  • Math.min(3,54,32,16)

  • 数组

    • let values = [1,2,3,4,5,6,7]
      let max = Math.max(…values);
• 3. 舍入方法

  • Math.ceil()

    • 向上舍入为最接近的整数

  • Math.floor()

    • 向下舍入为最接近的整数

  • Math.round()

    • 四舍五入

  • Math.fround()

    • 返回数值最接近的单精度
• 4. random()方法

  • Math.random()方法返回一个0~1范围内的随机数，其中包含0但不包含1

  • 始终返回小数

  • number = Math.floor(Math.random() * total_number_of_choices + first_possible_value)

    • 公式，从一组整数中随机选择一个数
• 5. 其他方法

  • Math.abs(x)

    • 返回x的绝对值

  • Maht.exp(x)

    • 返回e的x次方

  • Math.pow(x, power)

    • 返回x的power次幂

  • Math.sqrt(x)

    • 返回x的平方根

5.5 小结

1. 应用之与传统面向对象编程语言中的类相似，但实现不同

2. Date类型提供关于日期与时间的信息，包括当前日期、时间及相关计算

3. RegExp类型是ECMAScript支持正则表达式的接口，提供了大多数基础的和部分高级的正则表达式功能

4. 由于原始包装类型的存在，JavaScript中的原始值可以被当成对象来使用，有三种原始包装类型：Boolean、Number、String

5. • 每种包装类型都映射到同名的原始类型
   • 以读模式访问原始值时，后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相应的数据
   • 涉及原始值的语句执行完毕后，包装对象就会被销毁

6. 当代码开始执行时，全局上下文中会存在两个内置对象：Global和Math

7. • Global对象在大多数ECMAScript实现中无法直接访问，浏览器将其实现为window对象
   • 所有全局变量和函数都是Global对象的属性
   • Math对象包含辅助完成复杂计算的属性和方法