JavaScript高级程序设计笔记05 基本引用类型

基本引用类型

引用值（对象）是某个特定引用类型的实例。引用类型是把数据和功能组织到一起的结构。

引用类型有时也被称为对象定义，因为它们描述了自己的对象应有的属性和方法。

Date

参考了Java早期版本中的java.util.Date。因此，Date类型将日期保存为自协调世界时（UTC，Universal Time Coordinated）时间1970年1月1日午夜（零时）至今所经过的毫秒数。

Date类型可以精确表示1970年1月1日之前及之后285 616年的日期。

要基于其他日期和时间创建日期对象，必须传入其毫秒表示。ECMAScript为此提供了两个辅助方法：Date.parse()和Date.UTC()。

  • Date.parse()。接收一个表示日期的字符串参数，尝试将这个字符串转换为表示该日期的毫秒数。

    ES5定义了支持的日期格式：

    1. “月/日/年”
    2. “月名 日, 年"
    3. "周几 月名 日 年 时:分:秒 时区"
    4. ISO 8601扩展格式 “YYYY-MM-DDTHH:mm:ss.sssZ”

    如果传入的字符串不表示日期，则返回NaN。如果把表示日期的字符串传给Date构造函数，会在后台自动调用Date.parse()。对越界的日期，不同的浏览器有不同的处理。

  • Date.UTC()。也返回日期的毫秒表示。

    使用的参数为年、零起点月数（0-11）、日（1-31），时（0-23）、分、秒和毫秒。只有年和月是必需的。也会被Date构造函数隐式调用。

    创建的是本地日期，非GMT日期（参数是GMT时区下的时间）。

  • Date.now()。返回表示方法执行时日期和时间的毫秒数。可用于代码分析。

继承的方法：

  • toLocaleString()：返回与浏览器运行的本地环境一致的日期和时间。（包含AM/PM，不包含时区信息）
  • toString()：返回带时区信息的日期和时间。（时间为24小时制）
  • valueOf()：返回的是日期的毫秒表示。操作符（如小于号和大于号）可以直接使用它返回的值。（可以确保日期先后的一种简单方式）

日期格式化方法：返回字符串（与具体实现有关，因浏览器而异）

  • toDateString()：显式日期中的周几、月、日、年；
  • toTimeString()：显式日期中的时、分、秒和时区；
  • toLocaleDateString()：显式日期中的周几、月、日、年（与地区有关）
  • toLocakeTimeString()：显式日期中的时、分、秒；
  • toUTCString()：显示完整的UTC日期。

GMT = UTC+0（https://www.zhihu.com/question/27052407）

RegExp

类似Perl的简洁语法创建：

let expression = /pattern/flags;

可带0个或多个flags（标记）：

  1. g：全局模式
  2. i：不区分大小写
  3. m：多行模式
  4. y：粘附模式，表示只查找从lastIndex开始及之后的字符串
  5. u：Unicode模式，启用Unicode匹配
  6. s：dotAll模式，表示元字符.匹配任何字符（包括\n或\r）

所有元字符在pattern中必须转义，包括：

( [ { \ ^ $ | } ] ) ? * + .

也可以使用RegExp构造函数来创建，接收两个参数：模式字符串和（可选的）标记字符串。因为RegExp的模式参数是字符串，所以在某些情况下需要二次转义。

使用RegExp也可以基于已有的正则表达式实例，并可选择性地修改它们的标记。

  • 构造函数属性：

    会根据最后执行的正则表达式操作而变化，可以通过两种不同的方式访问它们，一个全名和一个简写。

    可以提取出与exec()和test()执行的操作相关的信息。

    • input（$_）最后搜索的字符串

    • leftContext（\(`）、rightContext（\)'）

      $` input字符串中出现在lastMatch前面的文本

      $' input字符串中出现在lastMatch后面的文本

    • lastParen（\(+）、lastMatch（\)&）

      $+ 最后匹配的捕获组

      $& 最后匹配的文本

    • 还可以存储最多9个捕获组的匹配项，通过RegExp.$1~RegExp.$9来访问。

  • 原型属性

    • global
    • ignoreCase
    • unicode
    • sticky
    • multiline
    • dotAll
    • lastIndex：整数，表示在源字符串中下一次搜索的开始位置，始终从0开始
    • source：正则表达式的字面量字符串（不是传给构造函数的模式字符串），没有开头和结尾的斜杆
    • flags：正则表达式的标记字符串

    source和flags属性返回的是规范化之后可以在字面量中使用的形式

    lastIndex在非全局模式下始终不变

  • 原型方法

    • exec

      主要用于配合捕获组使用。只接收一个参数，即要应用模式的字符串。

      如果找到，则返回包含第一个匹配信息的数组（包含两个额外的属性：index和input）；如果没有找到，就返回null。

      index：字符串中匹配模式的起始位置；input：要查找的字符串。

      数组的第一个元素是匹配整个模式的字符串，其他元素是与表达式中的捕获组匹配的字符串。

      如果没有捕获组，数组就只包含一个元素。

      如果设置了全局标记：则每次调用exec()方法会返回一个匹配的信息，直到搜索到字符串末尾。如果没有设，每次调用只会返回第一个匹配的信息。

      如果设置了粘附标记y：则每次调用只会在lastIndex的位置上寻找匹配项。粘附标记覆盖全局标记。

      let text = "mom and dad and baby";
let pattern = /mom( and dad( and baby)?)?/gi;

let matches = pattern.exec(text);
console.log( matches );
console.log( matches.index ); // 0
console.log( matches.input ); // mom and dad and baby
console.log( matches[0] ); // mom and dad and baby
console.log( matches[1] ); //  and dad and baby
console.log( matches[2] ); //  and baby
console.log( pattern.lastIndex ); // 20

let text2 = "mom";
// pattern.lastIndex = 0;
let matches2 = pattern.exec(text2);
console.log( matches2 ); // null
console.log( pattern.lastIndex ); // 0

let text3 = "mom and dad";
let matches3 = pattern.exec(text3);
console.log( matches3.input ); // mom and dad
console.log( pattern.lastIndex ); // 11

    • test

      接收一个字符串参数。输入的文本与模式是否匹配

  • 继承的方法

    toLocaleString()和toString()都返回正则表达式的字面量表示。valueOf()也是。

  • 存在局限

原始值包装类型

以读模式访问原始值时：

  1. 临时创建一个包装对象
  2. 借助这个对象操作相应的数据
  3. 销毁临时对象

不推荐显式使用，但对于操作原始值的功能很重要

  • Number

    valueOf()：返回Number对象表示的原始数值

    toString()：可选择接收一个表示基数的参数，并返回相应基数形式的数值字符串

    将数值格式化为字符串的方法：

    1. toFixed()：返回包含指定小数点位数的数值字符串。接收一个参数，表示结果字符串中小数的位数。超过就四舍五入到最接近的小数位。通常可以表示有0~20个小数位的数值。

    2. toExponential()：返回以科学计数法表示的数值字符串。也接收一个参数，表示结果中小数的位数

    3. toPrecision()：会根据情况返回最合理的输出结果，可能是固定长度，也可能是科学计数法形式。接收一个参数，表示结果中数字的总位数（不包含指数）。

      本质上是根据数值和精度来决定调用toFixed()还是toExponential()。

    以上3者都会向上或向下舍入。（为了以正确的小数位精确表示数值）

    与number原始值的typeof和instanceof操作结果不一致。（一个是原始值，一个是引用值）

    isInteger()方法与安全整数：

    1. isInteger()：ES6新增，用于辨别一个数值是否保存为整数

    2. 安全整数：所有整数都有唯一的浮点数表示。

      范围是Number.MIN_SAFE_INTEGER（-253+1）到Number.MAX_SAFE_INTEGER（253-1）。

  • Boolean：不建议用

  • String

    由16位码元（code unit）组成。对多数字符来说，每16位码元对应一个字符。

    JavaScript字符串使用了两种Unicode编码混合的策略：UCS-2和UTF-16。对于可以采用16位编码的字符（U+0000~U+FFFF），这两种编码实际上是一样的，在扩展到Unicode增补字符平面时就不成立了。16位只能唯一表示65 536（2^17-1）个字符。

    每个字符使用两个16位码元的策略称为代理对。

    • 继承的方法

      valueOf()、toLocaleString()、toString()都返回对象的原始字符串值。

    • 正则相关方法（模式匹配方法）p125

      • match、search

        match：可接收一个参数，正则表达式字符串或是一个RegExp对象。(非global情况下)，该方法返回的数组与RegExp对象的exec()方法返回的数组是一样的。

        search：接收一个参数，正则表达式字符串或是一个RegExp对象。返回模式第一个匹配的位置索引，没找到就返回-1。始终从前向后匹配模式。

      • replace、split

        replace：第一个参数可以是一个RegExp对象或者一个字符串（不会转为正则表达式），第二个参数可以是一个字符串或一个函数

        第二个参数是字符串的情况下，有几个特殊的字符序列，可以用来插入正则表达式操作的值。

        字符序列 替换文本
        $$ $
        $& 匹配整个模式的子字符串。与RegExp.lastMatch相同
        $' 匹配的子字符串之前的字符串。与RegExp.rightContext相同
        $` 匹配的子字符串之后的字符串。与RegExp.leftContext相同
        $n 匹配第n个捕获组的字符串，n为0-9。如果没有捕获组，则值为空串
        $nn 匹配第nn个捕获组的字符串，nn为01-99。如果没有捕获组，则值为空串 
        let text = "cat, bat, sat, fat";
let result = text.replace(/(.at)/g, "word($1)");
console.log( result );

function htmlEscape (text) {
    return text.replace(/[<>"&]/g, function(match, pos, originalText) {
		switch(match) {
			case "<": return "&lt;";
			case ">": return "&gt;";
			case "&": return "&amp;";
			case "\"": return "&quot;";
		}
	});
}
console.log( htmlEscape("<p class=\"greeting\">Hello world!</p>") );
// &lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

        第二个参数是函数时，函数应该返回一个字符串，表示应该把匹配项替换成什么。（可以更细致地控制替换过程）

        split：第一个参数可以是一个RegExp对象或者一个字符串（不会转为正则表达式），第二个参数可选，指定返回的数组不会超过的大小。

        根据传入的分隔符将字符串拆分成数组。

    • 字串：

      • charAt() ：返回给定索引位置的字符

      • charCodeAt()，codePointAt()

        charCodeAt()：返回指定索引位置的码元值

        codePointAt()：返回指定索引位置上的码点（Unicode中一个字符的完整标识）。正确解析既包含单码元字符又包含代理对字符的字符串。接收16位码元的索引（如果传入的索引并非代理对的开头，就会返回错误的码点）。

        迭代字符串（扩展运算）可以智能地识别代理对的码点。

      • fromCharCode()、fromCodePoint()

        fromCharCode()：根据给定的UTF-16码元创建字符串中的字符。实际上是基于提供的二进制表示直接组合成字符串

        fromCodePoint()：接收任意数量的码点，返回对应字符拼接起来的字符串

    • 规范化形式：normalize() 编码方式

      比较操作符不在乎字符看起来是什么样。

      4种规范化形式：NFD、NFC、NFKD、NFKC

      选择同一种规范化形式可以让比较操作符返回正确的结果。

    • 操作字符串

      • padStart、padEnd、repeat

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

        padStart、padEnd：接收一个参数为长度（填充后整个字符串的长度），第二个可选参数为填充的字符串，默认为空格（U+0020）。如果长度小于或等于字符串长度，则会返回原始字符串。

      • concat 追加多个字符串（日常使用+号更多）

      • 截取字串：slice、substring、substr

        —— arg1（正值） arg2（正值） 参数（负值）
        slice 子串开始位置 结束位置（不包含） 字符串长度+（负值）
        substring 同上 同上 转换为0，会将较小的参数作为起点
        substr 同上 子串长度 1：字符串长度+（负值）；2：0

    • 查找字符串

      • indexOf、lastIndexOf——> number

        搜索传入的字符串，并返回位置，没找到就返回-1。

        定位子字符串（从前往后、从后往前），可选第二个参数，表示开始搜索的位置。

      • startWith、endWith、includes——>boolean

        includes，检查整个字符串。

        startWith和includes，可选第二个参数，表示开始搜索的位置。

        endWith，可选第二个参数，表示应该当作字符串末尾的位置。

    • trim：创建字符串的一个副本，删除前、后所有空格，再返回结果。

    • 迭代、解构

      字符串原型上暴露了一个@@iterator方法。可以使用for-of和...解构操作符

    • 大小写：toLowerCase、toUpperCase

    • 比较两个字符串：localeCompare（字母表顺序，区分大小写，如在美国：大写字母排在小写字母前头）

      所在的地区决定了这个方法如何比较字符串。

      1. 字符串应该在参数前头，返回负值；

      2. 字符串与参数相等，返回0；

      3. 字符串应该在参数后头，返回正值（通常为1）

单例内置对象

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

  • Global——浏览器window

    ECMA-262规定Global对象为一种兜底对象，它所针对的是不属于任何对象的属性和方法。在大多数ECMAScript实现中无法直接访问。

    • URL编码方法：用于编码统一资源标识符（URI），以便传给浏览器。

      encodeURI \ encodeURIComponent：

      encodeURI——对整个URI进行编码，不会编码属于URL组件的特殊字符，如冒号、斜杆、问号、井号；

      encodeURIComponent——编码URI中单独的组件，会编码所有非标准字符。编码查询字符串参数比编码基准URI的次数更多。

      decodeURI \ decodeURIComponent

      取代了escape()和unescape()方法，只能正确编码ASCII字符，URI方法可以对所有Unicode字符进行编码。

      // URL encode function
let uri = "http:// www.wrox.com/illegal value.js#start";
console.log( encodeURI(uri) ); // http://%20www.wrox.com/illegal%20value.js#start
console.log( encodeURIComponent(uri) ); // http%3A%2F%2F%20www.wrox.com%2Fillegal%20value.js%23start
console.log( decodeURI(encodeURIComponent(uri)) ); // http%3A%2F%2F www.wrox.com%2Fillegal value.js%23start
console.log( decodeURIComponent(encodeURIComponent(uri)) ); // http:// www.wrox.com/illegal value.js#start

    • eval()方法：一个完整的ECMAScript解释器，接收一个参数，即一个要执行的ECMAScript字符串。被执行的代码与该调用上下文拥有相同的作用域链。通过eval()定义的任何变量和函数都不会被提升。

      严格模式下，才eval()内部创建的变量和函数无法被外部访问。

    • Global对象属性、window对象

      window对象：浏览器将window对象实现为Global对象的代理。

  • Math：保存数学公式、信息和计算的地方。包含辅助完成复杂计算的属性和方法。

    Math的计算精度会因浏览器、操作系统、指令集和硬件而异。

    • 对象属性：主要用于保存数学中的一些特殊值

    • min、max：用于确定一组数值中的最小值和最大值。接收任意个参数。

    • ceil、floor、round、fround

      ceil：向上舍入为最接近的整数

      floor：向下舍入为最接近的整数

      round：四舍五入

      fround：返回数值最接近的单精度（32位）浮点值表示。

    • random

      [0,1)

      // lowerValue, upperValue 随机返回的最小值和最大值
function selectFrom(lowerValue, upperValue) {
  let choices = upperValue - lowerValue + 1;
  return Math.floor(Math.random()*choices + lowerValue);
  // Math.random()*choices => [0, choices)
  // Math.random()*choices + lowerValue => [lowerValue, choices+lowerValue)
}
selectFrom(2, 10);

      如果为了加密而需要生成随机数，建议使用window.crypto.getRandomValues()。

    • 其他简单或高阶数运算的方法

posted @ 2022-10-10 15:23  beckyye  阅读(32)  评论(0)  编辑  收藏  举报