第5章 基本引用类型

第5章 基本引用类型

引用值（或者对象）是某个特定引用类型的示例。新对象通过使用new操作符后跟一个构造函数constructor来创建，例如：

let now = new Date();

5.1 Date

ECMAScript的Date类型参考了Java中的java.util.Date，所以，Date类型将日期保存并自协调世界时(UTC, Universal Time Coordinated)时间1970年1月1日午夜零时至今所经过的毫秒数。可以精确表示1970年1月1日之前及其之后285616年的日期

  • 直接使用 new Date()不传入参数，创建对象将保存当前日期和时间
  • Date.parse()接收一个表示日期的字符串参数，并尝试将这个字符串转换为表示为该日期的毫秒数，Date.parse()支持的格式如下：
    • 'm/d/y' 例如 '21/5/1998'
    • '月名 日, 年' 如 'May 21, 1998'
    • "周几 月名 日 年 时:分:秒 地区" 如 "Tue May 21 1998 00:00:00 GMT-0700"
    • ISO 8601 扩展格式 "YYYY-MM-DDTHH:mm:ss.sssZ"
let d1 = new Date(Date.parse("May 21, 1998"))
let d2 = new Date("May 21, 1998")
  • Date.UTC() 返回日期的毫秒表示，参数是年、零起点月数（从0开始数到11）、日（1-31）、时（从0开始数到23）、分、秒、毫秒，前两个必须，默认日为1
let y3k = new Date(Date.UTC(1998, 4, 21));
let allFives = new Date(Date.UTC(1998, 4, 21, 17, 55, 55));

image-20210721170937362

  • Date.now返回当前时的日期和时间的毫秒数
let start = Date.now();

// doSomething

let stop = Date.now();
result = stop - now;
console.log(result);

image-20210722090916685

5.1.1 继承的方法

  • toLocaleString() 返回与浏览器运行的本地环境一致的日期和时间，包含针对时间的AM或PM，但不包括时区信息
let now = new Date();

console.log(now.toLocaleString()); // '2021/7/22 上午9:15:17'

image-20210722091646183

  • toString()返回带时区信息的日期和时间，时间以24小时制表示（0-23）

image-20210722091718167

  • valueOf()返回日期的毫秒表示

5.1.2 日期格式化方法

  • toDateString()显示日期中的周几、月、日、年
  • toTimeString()显示日期中的时、分、秒和时区
  • toLocaleDateString()显示日期中的周几、月、日、年
  • toLocalTimeString()显示日期中的时、分、秒
  • toUTCString()显示完整的UTC日期
let now = new Date();//

console.log(now.toDateString()); // Thu Jul 22 2021

console.log(now.toTimeString()); // 09:21:51 GMT+0800 (中国标准时间)

console.log(now.toLocaleDateString()); // 2021/7/22

console.log(now.toLocaleTimeString()); // 上午9:21:51

console.log(now.toUTCString()); // Thu, 22 Jul 2021 01:21:51 GMT

image-20210722092501333

5.1.3 日期/时间组件方法

方法 作用
getTime() 返回日期的毫秒表示；与valueOf()相同
setTime(milliseconds) 设置日期的毫秒表示，从而修改时间
getFullYear() 返回4位数年
getUTCFullYear() 返回UTC日期的4位数年
setFullYear(year) 设置日期的年(year必须为4为数)
setUTCFullYear(year) 设置UTC日期的年(year必须为4为数)
getMonth() 返回日期的月（0-11）
getUTCMonth() 返回UTC日期的月（0-11）
setMonth(month) 设置日期的月（month为大于0的数值，大于11加年）
setUTCMonth(month) 设置UTC日期的月（month为大于0的数值，大于11加年）
getDate() 返回日期中的日（1-31）
getUTCDate() 返回UTC日期中的日（1-31）
setDate(date) 设置日期中的日（如果date大于该月天数，则加月）
setUTCDate(date) 设置UTC日期中的日（如果date大于该月天数，则加月）
getDay() 返回日期中表示周几的数值(0表示周日，6表示周六)
getUTCDay() 返回UTC日期中表示周几的数值(0表示周日，6表示周六)
getHours() 返回日期中的时（0-23）
getUTCHours() 返回UTC日期中的时（0-23）
setHours(hours) 设置日期中的时(如果hours大于23，则加日)
setUTCHours(hours) 设置UTC日期中的时(如果hours大于23，则加日)
getMinutes() 返回日期中的分（0-59）
getUTCMinutes() 返回UTC日期中的分（0-59）
setMinutes(minutes) 设置日期中的分（如果minutes大于59，则加时）
setUTCMinutes(minutes) 设置UTC日期中的分（如果minutes大于59，则加时）
getSeconds() 获取日期中的秒（0-59）
getUTCSeconds() 获取UTC日期中的秒（0-59）
方法 作用
setSeconds 设置日期中的秒（如果seconds大于59，则加分）
setUTCSeconds 设置UTC日期中的秒（如果seconds大于59，则加分）
getMilliseconds() 返回日期中的毫秒
getUTCMilliseconds() 返回UTC日期中的毫秒
setMilliseconds(milliseconds) 设置日期中的毫秒
setUTCMilliseconds(milliseconds) 设置UTC日期中的毫秒
getTimezoneOffset() 返回以分钟计的UTC与本地时区的偏移量

5.2 RegExp

正则表达式 Regular Expression 使用单个字符串来描述、匹配某个句法规则的字符串。正则表达式可以用形式化的语言理论的方式表达，由常量和算子组成。

EMCAScript通过RegExp类型来支持正则表达式，使用类似Perl的简洁语法来创建

深入研究移步

正则表达式 MDN Web Docs

let exp = /pattern/flags;
  • pattern 可以是简单或复杂的正则表达式，包括字符类、限定符、分组、向前查找、反向引用
  • flags 每个正则表达式可以带有0个或以上的flags，用于控制正则表达式的行为
    • g 全局模式
    • i 忽略大小写
    • m 多行模式
    • y 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始
    • s dotAll模式，表示元字符，匹配任何字符
let pt1 = /at/g; // 匹配所有 "at"

let p2 = /[bc]at/i; // 匹配第一个 "bat" 或 "cat" 忽略大小写

let p3 = /.at/gi; // 匹配所有以 "at" 结尾的三字符的组合 忽略大小写

在匹配元字符时需要加上\进行转义

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

RegExp可以基于已有的正则表达式，并可以选择性地修改标记

const re1 = /cat/g;
console.log(res); // "/cat/g"

const re2 = new RegExp(re1, "i");
console.log(re2); // "/cat/i"

image-20210722103110988

5.2.1 RegExp 实例属性

  • global 布尔值 表示是否设置了g标记
  • ignoreCase 布尔值 表示是否设置了i标记
  • unicode
  • sticky
  • lastIndex 整数 表示源字符串中下一次搜索开始位置 始终从0开始
  • multiline
  • dotAll
  • source 正则表达式的字面量字符串 不包括开头和结尾的斜杠
  • flags 正则表达式的标记字符串

5.2.2 RegExp 实例方法

RegExp 实例的主要方法是exec()，主要配合捕获组使用。接收一个用于匹配的字符串参数，如果找到匹配项，返回第一个匹配信息的数组；否则，返回null。

返回的数组还包含index和input属性，index表示字符串中匹配模式的起始位置，input是要查找的字符串

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

let matches = pattern.exec(text);
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

image-20210722143930940

注意 这里书上面写的不好，不太清楚，直接看

MDN 的 JavaScript 正则表达式

5.2.3 RegExp 构造函数属性

RegExp 构造函数本身的几个属性

全名 简写 作用
input $_ 最后搜索的字符串
lastMatch $& 最后匹配的文本
lastParen $+ 最后匹配的捕获组
leftContext $` input字符串中出现在lastMatch前面的文本
rightContext $' input字符串中出现在lastMatch后面的文本

5.2.4 模式局限

  • \A 和 \Z 锚
  • 联合及交叉类
  • x (忽略空格) 匹配模式
  • 条件式匹配
  • 正则表达式注释

5.3 原始值包装类型

三种特殊的引用类型：

  • Boolean
  • Number
  • String

5.3.1 Boolean

Boolean 是对应布尔值的引用类型，创建一个 Boolean 对象，需要向其构造函数传入 true 或者 false ，例如：

let booleanObject = new Boolean(false);

但是要注意的是 Boolean 对象本身是一个对象，即在布尔表达式中会转换为 true 。Boolean 实例重写了valueOf()方法，返回原始值true或false；toString()方法返回字符串"true"或"false"。

let booleanObject = new Boolean(false);

console.log(booleanObject && false); // false
console.log(booleanObject && true); // true
console.log(typeof booleanObject); // object

image-20210722150050662

5.3.2 Number

创建 Number 对象

let numberObject = new Number(521);

  • Number对象重写了valueOf()方法，返回Number对象表示的原始数值；

  • toString()方法可选地接受一个表示基数的参数，并返回相应基数的数值字符串，如下所示：

let num = 10;

console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"

image-20210722150751058

  • toFixed() 方法返回指定小数点位数的数值字符串
let num = 10;
console.log(num.toFixed(3)); // "10.000"

image-20210722150954847

  • toExponential()返回以科学计数法表示的数值字符串，接受一个参数，表示结果中小数的位数
let num = 99;
console.log(num.toExponential(1)); // 9.9e+1

image-20210722151254723

  • toPrecision() 返回根据情况最合理的输出，可能是固定长度，可能是科学计数法，接收一个参数，表示结果中数字的总位数（不包含指数），例如：
let num = 99;

console.log(num.toPrecision(1)); // "1e+2"
console.log(num.toPrecision(2)); // "99"
console.log(num.toPrecision(3)); // "99.0"

image-20210722151605494

  • Number.isInteger() 辨别一个数值是否保存为整数
console.log(Number.isInteger(1)); // true
console.log(Number.isInteger(1.00)); // true
console.log(Number.isInteger(1.01)); // false

image-20210722151826541

  • Number.isSafeInteger() 方法鉴别整数是否在Number.MIN_SAFE_INTERGER(-2e+53 + 1)到 Number.MAX_SAFE_INTERGER(2e+53 - 1)
console.log(Number.isSafeInteger(-1 * (2 ** 53))); // false
console.log(Number.isSafeInteger(-1 * (2 ** 53) + 1)); // true

console.log(Number.isSafeInteger(2 ** 53)); // false
console.log(Number.isSafeInteger(2 ** 53)); // true

5.3.3 String

  1. JavaScript 字符

JavaScript字符串有16位码元（code unit）组成。对多数字符来说，每 16 位码元对应一个字符。换句话说，字符串的 length 属性表示字符串包含多少16位码元

let message = "abcde";

console.log(message.length); // 5

chatAt()返回给定所有位置的字符

let message = "abcde";

console.log(message.charAt(2)); // c

charCodeAt()可以查看指定码元的字符编码

let message = "abcde";

console.log(message.charCodeAt(2)); // 99
  1. normalize()方法

呃呃呃。。。 感觉不太重要

  1. 字符串操作方法

    • concat() 将一个或多个字符串拼接成一个新字符串，源字符串保持不变

      let dong = "冬篱";
let donglidechuan = dong.concat("的川");

console.log(donglidechuan); // "冬篱的川"
console.log(dong); // "冬篱"

    • 字符串提取，下面的第一个参数表示字符串开始的位置，第二个参数表示子字符串结束的位置

      • slice() 第二个参数会返回提取结束的位置
      • substr() 第二个参数会返回提取结束的位置
      • substring() 第二个参数表示返回的子字符串数量
      let stringValue = "hello world";

console.log(stringValue.slice(3, 7)); // "lo w"
console.log(stringValue.substring(3, 7)); // "lo w"
console.log(stringValue.substr(3, 7)); // "lo worl"

      image-20210722203311458

  2. 字符串位置方法

    indexOf()和lastIndexOf()方法用于在字符串中定位子字符串，从字符串中搜索传入字符串，返回位置（没有则返回-1）

    let stringValue = "hello world";

console.log(stringValue.indexOf("o")); // 4
console.log(stringValue.lastIndexOf("o")); // 7

  3. 字符串包含方法

    • startWith() 从索引0开始检查匹配项
    • endsWith()从索引最后开始检查匹配项
    • includes()检查整个字符串

  4. trim()创建字符串副本，删除前后所有个空格

    let s = " 冬 篱 的 川  ";
let trims = s.trim(); 

console.log(s); // " 冬 篱 的 川  "
console.log(trims); // "冬 篱 的 川"

  5. repeat(times)接收一个参数，表示要将字符串复制多少次

    let s = "bug"

console.log("there is no " + s.repeat(10));

    image-20210722204353417

  6. padStarg()和padEnd() 复制字符串，如果小于指定长度，则会在相应一边填充字符，直到满足长度条件，第一个参数是长度，第二个参数是可选的填充字符串，默认为空格

  7. 字符串迭代和结构

    字符串的原型上暴露了一个@@iterator方法，可以迭代字符串的每个字符

    let s = "冬篱的川";
let si = s[Symbol.iterator]();

console.log(si.next());
console.log(si.next());
console.log(si.next());
console.log(si.next());
console.log(si.next());

    image-20210722205010982

    也可以使用for-of循环迭代器每个字符

    for (const c of "冬篱的川") {
    console.log(c);
}

    image-20210722205146003

  8. 字符串大小写转换

    • toLowerCase()
    • toLocaleLowerCase()
    • toUpperCase()
    • toLocaleUpperCase()

  9. 字符串模式匹配方法

    • match()接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象
    • search()参数与match()一样，返回模式第一个匹配的位置索引，没有则返回-1

  10. localeCompare()比较两个字符串，返回：

    • 如果按照字母表顺序，字符串应该排在字符串参数前头，则返回负值
    • 如果字符串与字符串参数相等，则返回 0
    • 如果按照字母表顺序，字符串应该排在字符串参数后头，则返回正值

  11. HTML方法

5.4 单例对象

内置对象

  • Object
  • Array
  • String

内置单例对象

  • Global
  • Math

5.4.1 Global

Global对象是一种兜底对象，针对不属于任何对象的属性和方法。在全局作用域中定义的变量和函数都会变成Global对象的属性

  1. URI编码方法

    encodeURI()和 encodeURIComponent()方法用于编码统一资源标识符（ URI），以便传给浏览器。有效的 URI 不能包含某些字符，比如空格。使用 URI 编码方法来编码 URI 可以让浏览器能够理解它们，同时又以特殊的 UTF-8 编码替换掉所有无效字符。

    • encodeURI()用于整个URI编码
    • encodeURIComponent()用于编码URI中单独的组件
    let uri = "http://www.wrox.com/illegal value.js#start";

console.log(encodeURI(uri)); 
console.log(encodeURIComponent(uri));

    image-20210722210742614

    • decodeURI()
    • decodeURIComponent()

  2. eval()方法

    接收一个参数，即执行的ECMAScript字符串

    eval("console.log('冬篱的川')");

    等价于

    console.log('冬篱的川');

    image-20210722211017781

  3. Global对象属性

属性 说明
undefined
NaN
Infinity
Object
Function
Boolean
String
Number
Date
RegExp
Symbol
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
  1. window对象

浏览器中将window对象实现作为Global对象的代理

var color = "red";

function sayColor() {
    console.log(window.color);
}

window.sayColor(); // "red"

另一种获取Global对象的方式

let global = function() {
    return this;
}();

5.4.2 Math

Math对象时作为保存数学公式、信息和计算的地方

注意 Math 对象上提供的计算要比直接在 JavaScript 实现的快得多，因为 Math 对象上的计算使用了 JavaScript 引擎中更高效的实现和处理器指令。但使用 Math 计算的问题是精度会因浏览器、操作系统、指令集和硬件而异。

  1. Math对象属性

    • Math.E
    • `Math.LN10 10为底的自然对数
    • Math.LN2 2为底的自然对数
    • Math.LOG2E 以2为底e的对数
    • `Math.LOG10E 以10为底e的对数
    • Math.PI
    • Math.SQRT1_2 1/2的平方根
    • Math.SQRT2 2的平方根

  2. min()和max()

  3. 舍入方法

    • Math.ceil() 向上舍入为最接近的整数
    • Math.floor() 向下舍入为最接近的整数
    • Math.round() 四舍五入
    • Math.fround() 返回数值最接近的单精度（ 32 位）浮点值表示
    console.log(Math.fround(5.2));

    image-20210722213558019

  4. random()返回一个0-1之间的随机数，但不包含1

  5. 其它方法

    • Math.abs(x)
    • Math.exp(x)
    • Math.expm1(x) 等于e的x次幂-1
    • Math.log(x) 返回x的自然对数
    • Math.log1p(x) 返回x的自然对数+1
    • Math.pow(x, power)
    • Math.hypot(...nums)返回nums中每个数平方和的平方根
    console.log(Math.hypot(1, 2, 3, 4, 5));

    image-20210722214124223

    • Math.clz32(x)返回32位整数x的前置0的数量
    • Math.sign(x) 返回表示x符号的1、0、-0、-1
    • Math.trunc(x) 返回x的整数部分，删除所有小数
    • Math.sqrt(x)
    • Math.cbrt(x) 返回x的立方根
    • Math.acos(x)
    • Math.acosh(x)
    • Math.asin(x)
    • Math.asinh(x)
    • Math.atan(x)
    • Math.atanh(x)
    • Math.atan2(y, x)
    • Math.cos(x)
    • Math.sin(x)
    • Math.tan(x)`
posted @ 2021-07-22 21:47  fankaljead  阅读(99)  评论(0)    收藏  举报