《JavaScript高级程序设计》第五章 基本引用类型 学习记录

韩业峰
175 阅读6分钟
  • 引用值（对象）是指某个特定引用类型的实例
  • 引用类型是把数据和功能组织到一起的结构。
  • 引用类型有时也称对象定义，因为描述了自己的对象应有的属性和方法。
  • 对象被认为是某个特定引用类型的实例。新对象通过使用new操作符后跟一个构造函数来创建。
  • 函数也是一种引用类型。

1、Date

  • 1970.1.1

  • 创建：let now = new Date()

    • 不传参数是当前时间
    • 传参数是要传入毫秒数

  • Date.parse()

    • 接收表示日期的字符串参数，尝试转为毫秒数
      • “月/日/年”
      • “月名 日，年”
      • 实例实际返回值
      • YYYY-MM-DDTHH:mm:ss:sssZ
    • 不表示日期的回返回NaN
    • 直接传给Date构造函数，后台调用Date.parse()

  • Date.UTC()

    • 返回日期的毫秒表示
    • 参数：年，月（0-11），日，时，分，秒，毫秒
    • 直接传给Date构造函数，后台调用Date.UTC()

  • Date.now()

    • 返回执行时的毫秒数

1、继承的方法

  • toLocaleString() 返回本地环境一致的时间
  • toString() 带时区信息的日期和时间
  • valueOf() 返回日期的毫秒表示

2、日期格式化方法

  • toDateString() "Mon May 24 2021"
  • toTimeString() "20:55:52 GMT+0800 (中国标准时间)"
  • toLocaleDateString() "2021/5/24"
  • toLocaleTimeString() "下午8:55:52"
  • toUTCString() "Mon, 24 May 2021 12:55:52 GMT"

3、日期/时间组件方法

方法说明
getTime()返回日期的毫秒（valueOf）
setTime(ms)设置日期的毫秒，修改整个日期
getFullYear()返回4位数年
setFullYear(year)设置日期的年 4位
getMonth()返回日期的月 0表示1月
setMonth(month)设置日期的月 0表示1月
getDate()返回日期中的日
setDate(date)设置日期中的日
getDay()返回星期几 0表示周日
getHours()返回日期中的时
setHours(hours)设置日期中的时
getMinutes()返回日期中的分
setMinutes(minutes)设置日期中的分
getSeconds()返回日期中的秒
setSeconds(seconds)设置日期中的秒
getMilliseconds()返回日期中的毫秒
setMilliseconds(ms)设置日期中的毫秒

2、RegExp

  • 支持简洁语法创建 let expression = /pattern/flags

    • pattern 可以是任何简单或复杂正则表达式
    • flags标记，来控制行为
      • g 全局模式，查找全部内容
      • i 不区分大小写
      • m 多行模式
      • y 粘附模式，只查找从lastIndex开始之后的字符串
      • u 启用Unicode匹配
      • s dotAll模式，表示元字符，匹配任何字符

  • 也可以用构造函数创建

    let parttern1 = /[bc]at/i
let parttern2 = new RegExp("[bc]at", "i")

    • 两个参数都需要是字符串

    • 元字符需要二次转译

      • /\[bc\]at/ -> "\\[bc\\]at"
      • /\.at/ -> "\\.at"

    • 可以选择性修改

      const re1 = /cat/g
const re2 = new RegExp(re1)
const re3 = new RegExp(re1, "i")

1、实例属性

  • global，布尔值，表示是否设置了g标记
  • ignoreCase，布尔值，表示是否设置了i标记
  • unicode，布尔值，表示是否设置了u标记
  • sticky，布尔值，表示是否设置了y标记
  • lastIndex，整数，表示在源字符串下一次搜索开始的位置
  • multiline，布尔值，表示是否设置了m标记
  • dotAll，布尔值，表示是否设置了s标记
  • source，正则表达式字面量字符串
  • flags，正则表达式标记字符串

2、实例方法

  • exec() 配合捕获组使用
    • 如果找到了匹配项，返回第一个匹配信息的数组
    • 没找到返回null。
    • 返回的数组包含两个额外属性index和input
      • index是字符串中匹配模式的起始位置
      • input是要查找的字符串
    • 第一个元素整个字符串匹配模式
    • 第二个元素第一个匹配组，第三个元素第二个匹配组
    • 如果设置全局标记，lastIndex会一直向后搜索
    • y粘附标记（只会在lastIndex位置上查找）覆盖全局标记，lastIndex可以设置
  • test() 接收一个字符串参数，返回布尔值
  • 无论怎么创建，继承方法toString() 和 toLocaleString()都返回字面量表示。
  • valueOf() 方法返回正则表达式本身

3、构造函数属性

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

4、模式局限

3、原始值包装类型

let s1 = "some text"
let s2 = s1.substring(2)

  • 原始值不是对象为什么能调用方法？

    • 因为第二行用读模式访问字符串值：

      1. 创建一个String类型的实例

        let s1 = new String("some text")

      2. 调用实例上的特定方法

        let s2 = s1.substring(2)

      3. 销毁实例

        s1 = null

  • 引用类型和原始值包装类型区别在于对象的生命周期。

    • 使用new实例化引用类型后，得到的实例会在离开作用域的时候销毁。

    • 自动创建的原始值包装类型只存在于访问他的那行代码执行期间。

    • 所以不能在运行时给原始值添加属性方法

      let s1 = "some text"
s1.color = "red" // 创建后又销毁了
console.log(s1.color)// undefined

  • 可以显式的使用Boolean, Number, String构造函数创建原始值包装对象。

    • 调用typeof返回object
    • 都会转换为布尔值true ？

  • Object构造函数作为工厂方法，能根据传入值类型返回相应原始值包装类型。

    let obj = new Object("some text")
obj instanceof String // true

  • 使用new创建的构造函数与调用同名的转型函数不同

    let val = "25"
let number = Number(val)
let obj = new Number(val)
typeof number // "number"
typeof obj // "object"

1、Boolean

  • 布尔值的引用类型

  • 重写valueOf() 方法，返回原始值true/false

  • toString() 返回字符串"true" / "false"

  • Boolean对象，误区

    let falseObj = new Boolean(false)
let res = falseObj && true
res // true

let falseVal = false
let res = falseVal && true
res // false

  • typeof 原始值 : 'boolean'，typeof 引用值：'object'

  • Boolean 对象是 Boolean类型的实例。

    let falseObj = new Boolean(false)
let falseVal = false
typeof falseObj // "object"
typeof falseVal // "boolean"
falseObj instanceof Boolean // true
falseVal instanceof Boolean // false

2、Number

  • 数值的引用类型
  • 重写了valueOf()、toLocaleString() 、 toString()方法
  • valueOf() 返回Number对象表示的原始数值
  • toString() 方法参数可以是基数，返回相应基数(进制)形式的数值字符串
  • toFixed() 方法返回包含指定小数点位数的数值字符串
    • 如果不足则补0，如果超过则四舍五入
  • toExponential() 返回科学技术法表示的数值字符串
    • 参数表示结果中小数的位数
  • toPrecision() 根据情况返回最合理的输出结果。
    • 根据数值和精度决定调用toFixed() 还是toExponential()
let numberObj = new Number(10)
let numberVal = 10
typeof numberObj // "object"
typeof numberVal // "number"
numberObj instanceof Number // true
numberVal instanceof Number // false
  • isInteger() 方法
    • Number.isInteger() 辨别一个数值是否保存为整数
    • 小数位全是0也认为不是浮点值
  • Number.MIN_SAFE_INTEGER /Number.MAX_SAFE_INTEGER
    • 范围内二进制值可以表示一个整数值
    • 超出范围可能表示不同的数值
    • 判断方法 Number.isSafeInteger()

3、String

  • 字符串的引用类型
  • valueOf()、toLocaleString() 、toString() 都返回原始值
  • length属性查看字符数量，双字节字符也会按单字符计算

1、javaScript字符串

let msg = "abcde"

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

    message.charAt(2) //"c"

  • charCodeAt() 返回制定码元的字符编码

    message.charCodeAt(2) //99

  • fromCharCode() 返回码创建字符串字符

    String.fromCharCode(97,98,99,100,101) //"abcde"

2、normalize() 方法

3、字符串的操作方法

  • concat()
    • 将一个或多个字符串拼接成一个新字符串
    • 原值保持不变
    • 参数任意多个
    • 等同于 +
  • slice()
    • 等同于数组slice
    • 正数与substring()相同
    • 负数相当于字符串长度加上负数
    • 截取从xxx到xxx的字符
    • 原值不变
    • 第二个参数省略相当于到尾部
  • substring()
    • 正数与slice()相同
    • 负数全部转为0
    • 截取从xxx到xxx的字符
    • 原值不变
    • 第二个参数省略相当于到尾部
    • 较小的数作为起点，较大的作为终点
  • substr()
    • 第一个参数开始截取第二个参数长度的字符串
    • 第一个参数负值当成字符串长度加上负数
    • 第二个参数负值转为0
    • 原值不变
    • 第二个参数省略相当于到尾部

4、字符串位置方法

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

  • indexOf()
    • 从字符串开头开始查找子字符串
    • 第二个参数，表示开始搜索位置
  • lastIndexOf()
    • 从字符串末尾开始查找子字符串
    • 第二个参数，表示开始搜索位置
// 查找所有目标字符串
let str = 'Lorem ipsum dolor sit amet'
let positinos = new Array()
let pos = str.indexOf("e")
while(pos > -1){
  positions.push(pos)
  pos = str.indexOf("e", pos + 1)
}
positions // [3, 24]

5、字符串包含方法

  • startsWith()

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

  • endsWith()

    • 检查末尾字符串

    • 第二个参数表示末尾位置

      let msg = 'foobarbaz'
msg.endsWith('bar')    // false
msg.endsWith('bar', 6) // true

  • includes()

    • 检查整个字符串
    • 第二个参数表示开始搜索位置

6、trim() 方法

  • 删除前后空格符
  • 不改变原值
  • trimLeft() 、 trimRight() 分别清理前后空格

7、repeat() 方法

  • 接收整数参数，表示将字符复制多少次
  • 不改变原值

8、padStart() 和 padEnd() 方法

  • 不改变原值
  • 如果小于制定长度，后在前后添加字符
  • 第一个参数 长度
  • 第二个参数 填充字符串，默认空格
  • 第二个参数不限定一个字符，如果多个字符，会进行拼接截断来匹配

9、字符串迭代与结构

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

    let msg = 'abc'
let iterator = msg[Symbol.iterator]()
iterator.next() //{value: "a", done:false}
iterator.next() //{value: "b", done:false}
iterator.next() //{value: "b", done:false}
iterator.next() //{value: undefined, done:true}

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

    for(const c of 'abc'){
	console.log(c)
}

  • 通过这个迭代器，字符串可以通过解构操作符解构。

    let msg = "abcde"
[...msg] // ["a", "b", "c", "d", "e"]

10、字符串大小写转换

  • toLowerCase() 转为小写
  • toUpperCase() 转为大写

11、字符串模式匹配方法

  • match()

    • 本质上和exec() 方法相同，返回数组一样
    • 参数可以是正则表达式字符串或RegExp对象
    let text = "cat, bat, sat, fat"
let pattern = /.at/

// 等价于 pattern.exec(text)
let matches = text.match(pattern) 
matches.index // 0
matches[0] // "cat"
pattern.lastIndex // 0

  • search()

    • 参数可以是正则表达式字符串或RegExp对象
    • 返回模式第一个匹配的位置索引，没找到返回-1
    • 始终从字符串开头向后匹配
    let text = "cat, bat, sat, fat"
let pos = text.search(/at/)
pos // 1

  • replace()

    • 字符串替换
    • 两个参数
      • 第一个参数可以是RegExp对象 或一个字符串（不会转为正则表达式）
      • 第二个参数可以是一个字符串或者函数
    • 如果第一个参数是字符串，只会替换第一个子字符串。若需替换所有第一个参数必须为正则表达式且带全局标记
    let text = "cat, bat, sat, fat"
let result = text.replace("at", "ond")
result // "cond, bat, sat, fat"

result = text.replace(/at/g, "ond")
result // "cond, bond, sond, fond"

    • 第二个参数是字符串时，有几个特殊序列

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

    • 第二个参数是函数的时候

      • 会收到三个参数
        • 与整个模式匹配的字符串
        • 匹配项在字符串中的开始位置
        • 整个字符串
      • 返回一个字符串
        • 表示应该替换成什么
      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";
    }
  })
}

  • split()

    • 根据传入的分隔符将字符串拆分成数组
    • 分隔符可以是字符串也可以是RegExp对象
    • 第二个参数是数组大小
    let colorText = "red,blue,green"
colorText.split(",") // ["red", "blue", "green"]
colorText.split(",", 2) // ["red", "blue"]
colorText.split(/[^,]+/) // ["", ",", ",", ""]

12、localeCompare() 方法

  • 比较两个字符串，返回如下3个值的一个
    • 如果按字母表顺序，字符串应该排在字符串参数前头，返回负值，通常是-1
    • 相等 返回0
    • 如果按字母表顺序，字符串应该排在字符串参数后头，返回正值，通常是1

13、HTML方法

​ 动态生成html标签

4、单例内置对象

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

1、Global

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

1、URL编码方法

  • 用于编码统一资源标志符，以便传给浏览器

  • encodeURI()

    • 对整个URI编码
    • 不会编码输入URL组件的特殊字符
      • 如冒号、斜杠、问号、井号

  • encodeURIComponent()

    • 常用
    • 编码URI中单独组件
    • 所有非字母都替换成编码格式

  • 对应decodeURI() 、decodeURIComponent()

  • 取代了escape(), unescape()

2、eval()

  • 接收参数，一个要执行的ECMAScript 字符串
  • 被执行的代码与该上下文有相同的作用域链
  • 可以定义函数、变量供外部使用（非严格模式）
  • 慎用

3、Global对象属性

  • 特殊值
    • undefined、NaN、Infinity
  • 构造函数
    • Object, Array, Function,Boolean,String, Number, Date, RegExp, Symbol, Error, EvalError, RangeError, ReferenceError,SyntacError,TypeError,URIError

4、window 对象

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

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

2、Math

  • 比直接实现快的多，因为用了更高效的实现和处理器指令。
  • 但精度会因环境而异

1、Math对象属性

属性说明
Math.E自然对数的基数e的值
Math.LN1010为底的自然数对数
Math.LN22为底的自然数对数
Math.LOG2E以2为底e的对数
Math.LOG10E以10为底e的对数
Math.PIπ 的值
Math.SQRT1_21/2的平方根
Math.SQRT22的平方根

2、min() 和 max() 方法

  • 确定一组数值中的最小值和最大值
  • 数组可以用扩展操作符 ...

3、舍入方法

  • Math.ceil() 始终向上舍入为最接近的正数
  • Math.floor() 始终向下舍入为最接近的正数
  • Math.round() 执行四舍五入
  • Math.fround() 返回数值最接近的单精度（32位）浮点值表示

4、random() 方法

  • 返回0~1范围内的随机数，包含0，不含1
// 返回1~10
number = Math.floor(Math.random()* 10 + 1)
  • 加密建议使用window.crypto.getRandomValues()

5、其他方法

  • Math.abs(x) 返回x的绝对值

  • Math.pow(x, power) 返回x的power次幂

  • Math.sqrt(x) 返回x的平方根

avatar
文章
阅读
粉丝