第5章基本引用类型(高阶第四版笔记)

第五章引用类型前言

目录

第五章引用类型前言

一,DATE

语法

参数

返回值

注释

示例:

二,RegExp

三,原始值包装类型:Boolean、Number、String

Boolean

栗子:

总结:

Number

前言:

栗子:valueOf()、toString(param)

栗子:toFixed(param)

String

前言:

1、字符操作:

charAt(索引)、charCodeAt(索引)

2、字符串操作:

slice()、substr()、substring()

3、字符串位置方法:

indexOf(),lastIndexOf()

4、字符串包含方法:

startsWith()、endsWith()、includes()

5、trim()

6、repeat()

7、padStart()、padEnd()

四,内置对象

ECMA-262 对内置对象的定义是:“由ECMAScript 实现提供的、不依赖宿主环境的对象,这些对象在 ECMAScript 程序执行之前就已经存在了。”意思就是说,开发人员不必显示地实例化内置对象;因为它们已经实例化了。ECMA-262 只定义了两个内置对象:Global和 Math。

一.Global 对象

二.Math 对象


前言Date    RegExp    原始值包装类型     单例内置对象

JavaScript中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象

总结:

  • 引用类型与传统面向对象程序设计中的类相似,但实现不同;
  • Object是一个基础类型,其他所有类型都从Object继承了基本的行为;
  • Array类型是一组值得有序列表,同时还提供了操作和转换这些值的功能;
  • Date类型提供了有关日期和时间的信息,包括当前日期和时间以及相关的计算功能;

  • 函数实际上是Function类型的实例,因此函数也是对象;

  • 三种基本包装类型分别是:Boolean、Number和String

Object类型 
- 两种方法对象声明; 
- 访问对象属性时使用的都是点表示法,JavaScript中也可以使用方括号表示法来访问对象的属性。


Array类型

创建数组的基本方式有两种

  • 第一种是使用Array构造函数:
  • 空 数组
  • 如果预先知道数组要保存的项目数量,也可以给构造函数传递该数量,而该数量会自动变成length属性的值;
  • 给构造函数传递值也可以创建数组。
  • length属性:数组length的属性不是只读的,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

检测数组

  • 使用instanceof操作符就能得到满意结果。
  • 如果从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。
  • ECMAScript5新增了Array.isArray()方法。

Date类型 
Date类型使用自UTC(Coordinated Universal Time,国际协调时间)1970年1月1日午夜(零时)开始经过的毫秒数来保存日期。 
日期格式:

  • “月/日/年“,如6/13/2004;
  • “英文月名 日,年”,如January 12,2004;
  • “英文星期几 英文月名 日 年 时:分:秒 时区”,如Tue May 25 2004 00:00:00 GMT-0700。
  • ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)。

Date类型将日期格式化为字符串的方法,如下:

  • toDateString()——以特定于实现的格式显示星期几、月、日和年;
  • toTimeString()——以特定于时间的格式显示时、分、秒和时区;
  • toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年;
  • toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
  • toUTCString()——以特定于实现的格式显示完整的UTC日期。
  • ECMPScript提供两个方法:Date.parse()和Date.UTC()。

  • getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  • getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
  • getFullYear() 从 Date 对象以四位数字返回年份。
  • getMonth() 从 Date 对象返回月份 (0 ~ 11)。
  • getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
  • 时,分,秒 
    getHours() 返回 Date 对象的小时 (0 ~ 23)。 
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

RegExp对象

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

Function类型

  • 解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁
  • 解析器会率先读取函数声明,并使其执行代码之前可用(可以访问)
  • 读取并将函数声明添加到执行环境中。对代码求值时,JavaScript引擎在第一遍会声明函数并将他们放到源代码树的顶部。
  • ECMAScript中没有函数重载 
    声明两个同名函数,结果是后面的函数覆盖了前面的ECMAScript中没有函数重载概念的原因
  • 作为返回值的函数 
    函数作为返回值是极有用的技术,是“闭包”技术的基础之一。

Number类型

  • toFixed():按指定小数位返回数值的字符串表示。
  • toExponential():返回以指数表示法表示的数值的字符串形式。
  • toPrecision():返回固定大小格式,也可能返回指数格式,具体规则是看哪种格式比较合适。该方法接收一个参数指定表示数值的所有数字的位数。

一,DATE

以 datetime 格式返回指定的日期。

语法

DATE(<year>, <month>, <day>)

参数

参数

定义

year

表示年份的数字。

年参数的值可以包含一到四位。 将根据您的计算机使用的日期系统对年参数进行解释。

支持从 1990 年 3 月 1 日开始的日期。

如果输入了小数,将对该小数取整。

对于大于 9999 或小于零(负值)的值,该函数将返回 #VALUE! 错误。

如果 year 值介于 0 和 1899 之间,则将该值加上 1900 以便生成最终值。

应该尽可能使用四位数字作为年份参数,以避免意外结果。

month

表示月份的数字,或者根据以下规则通过计算得到:

  • 如果month 是从 1 到 12 的数字,1 表示一月,2 表示二月,以此类推。
  • 如果输入的是一个大于 12 的整数,将 month 值加到 year 上,从而计算出日期。

     例如,DATE( 2008, 18, 1),该函数将返回一个相当于 2009 年 6 月 1 日的日期时间值。

  • 如果输入一个负整数,将从 year 中减去 month 值,从而计算出日期。

      例如,DATE( 2008, -6, 15),该函数将返回一个相当于 2007 年 6 月 15 日的日期时间值。

day

表示天的数字,或者根据以下规则通过计算得到:

  • 如果 day 是一个从 1 到给定月份的最后一天的数字,那么该数字就表示当月的一天。
  • 如果输入一个大于给定月份的最后一天的整数,将 day 值加到 month 上,从而计算出日期。 例如,DATE( 2008, 3, 32) ,该函数将返回一个相当于 2008 年 4 月 1 日的日期值。
  • 如果输入一个负整数,将从 month 中减去 day 值,从而计算出日期。 例如,DATE( 2008, 5, -15) ,DATE 函数将返回一个相当于 2008 年 4 月 15 日的 日期值。
  • 如果 day 包含小数,则对该小数取整。

返回值

返回指定的日期 (datetime)。

注释

DATE 函数采用输入的整数作为参数,并且生成相应日期。 在年、月、日由公式提供的情况下,该 DATE 函数最有用。 例如,基础数据中包含的日期可能采用无法识别为日期的格式,如 YYYYMMDD。 您可以将 DATE 函数与其他函数一起使用,以便将日期转换为可识别为日期的数字。

示例:

代码块

返回值

注释

=DATE(2009,7,8) 2009/7/8  0:00:00

=DATE(08,1,2)

1908/1/2  0:00:00

介于0,1899之间的,该值加上1900以便计算年份。

=DATE(2008,14,2)

2009/2/2  0:00:00

当月份大于12时,将年份+1,月份-12。

=DATE(2008,-3,2)

2007/9/2  0:00:00

当月份小于1时候,将年份-1, 月份为当前月份+12(即-3+12)

=DATE(2008,1,35)

2008/2/4   0:00:00

当天大于当前月份的天数时,将该日期减去当前月份的天数(即35-31), 再将月份+1

=DATE(2008,1,-15)

2007/12/16  0:00:00

当天小于1时,将月份-1,得到的新月份的天数+给出的天(即31+(-15))

二,RegExp

  1. 直接量语法
    /pattern/attributes
    创建 RegExp 对象的语法:
    new RegExp(pattern, attributes);
    
    参数
    参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
    
    参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配
    和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省
    略该参数。
    
    返回值
    一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp()
    构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
    
    如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 
    pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。
    
    抛出
    SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,
    抛出该异常。
    
    TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常。
    
    修饰符
    修饰符 描述
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
    m 执行多行匹配。
    方括号
    方括号用于查找某个范围内的字符:
    
    表达式 描述
    [abc] 查找方括号之间的任何字符。
    [^abc]  查找任何不在方括号之间的字符。
    [0-9] 查找任何从 0 至 9 的数字。
    [a-z] 查找任何从小写 a 到小写 z 的字符。
    [A-Z] 查找任何从大写 A 到大写 Z 的字符。
    [A-z] 查找任何从大写 A 到小写 z 的字符。
    [adgk]  查找给定集合内的任何字符。
    [^adgk] 查找给定集合外的任何字符。
    (red|blue|green)  查找任何指定的选项。
    
    元字符
    元字符(Metacharacter)是拥有特殊含义的字符:
    
    元字符 描述
    . 查找单个字符,除了换行和行结束符。
    \w  查找单词字符。
    \W  查找非单词字符。
    \d  查找数字。
    \D  查找非数字字符。
    \s  查找空白字符。
    \S  查找非空白字符。
    \b  匹配单词边界。
    \B  匹配非单词边界。
    \0  查找 NUL 字符。
    \n  查找换行符。
    \f  查找换页符。
    \r  查找回车符。
    \t  查找制表符。
    \v  查找垂直制表符。
    \xxx  查找以八进制数 xxx 规定的字符。
    \xdd  查找以十六进制数 dd 规定的字符。
    \uxxxx  查找以十六进制数 xxxx 规定的 Unicode 字符。
    
    量词
    量词  描述
    n+  匹配任何包含至少一个 n 的字符串。
    n*  匹配任何包含零个或多个 n 的字符串。
    n?  匹配任何包含零个或一个 n 的字符串。
    n{X}  匹配包含 X 个 n 的序列的字符串。
    n{X,Y}  匹配包含 X 至 Y 个 n 的序列的字符串。
    n{X,} 匹配包含至少 X 个 n 的序列的字符串。
    n$  匹配任何结尾为 n 的字符串。
    ^n  匹配任何开头为 n 的字符串。
    ?=n 匹配任何其后紧接指定字符串 n 的字符串。
    ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
    
    RegExp 对象属性
    属性  描述  FF  IE
    global  RegExp 对象是否具有标志 g。  1 4
    ignoreCase  RegExp 对象是否具有标志 i。  1 4
    lastIndex 一个整数,标示开始下一次匹配的字符位置。  1 4
    multiline RegExp 对象是否具有标志 m。  1 4
    source  正则表达式的源文本。  1 4
    
    RegExp 对象方法
    方法  描述  FF  IE
    compile 编译正则表达式。  1 4
    exec  检索字符串中指定的值。返回找到的值,并确定其位置。 1 4
    test  检索字符串中指定的值。返回 true 或 false。 1 4
    
    支持正则表达式的 String 对象的方法
    方法  描述  FF  IE
    search  检索与正则表达式相匹配的值。  1 4
    match 找到一个或多个正则表达式的匹配。  1 4
    replace 替换与正则表达式匹配的子串。  1 4
    split 把字符串分割为字符串数组。 1 4

三,原始值包装类型:Boolean、Number、String

原始值包装类型对象:基本数据类型以构造函数创建出来的 对象

let str1 = 'text'
let str2 =  str1.subString(2)

疑问?为什么可以打点调用

为什么基本数据类型也可以向操作对象一样的进行打点调用?原始值不是对象,因此逻辑上不应该有方法,但是是可以正常执行的,后台到底做了写什么?

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

疑问解惑

//str2以只读的形式访问str1(只从内存中读取)
//只读访问的过程中后台做了以下操作 :
//1、创建一个String类型的实例,
//2、调用实例上的特定方法
//3、销毁实例

let str2 =  str1.subString(2)
//这段代码的解析是:

let str1 = new String('text')//这个和上部的str1不是一个东西,只是根据内存地址,读取出来了
let str2 = str1.subString(2)
str1 = null

小练

let str1 = 'text'
str1.color = 'red'//这句话执行完毕 实例对象被销毁
console.log(str1.color)//undefined 相当于重新按照上方的三步一样

Boolean

栗子:

let b = new Boolean(false) //此时是该值是对象 Boolean {false}
let result = b && true
console.log(result)//true

let b = false
let result = b && true
console.log(result)//false

总结:

不要轻易使用构造函数的方式创建布尔对象来进行判断

Number

前言:

与Boolean类型一样,Number类型重写了valueOf()、toString()、toLocaleString()
valueOf()方法返回Number对象表示的原始数值
toString()、toLocaleString()返回数值字符串、第二个是可以将时间转化为字符串形式的
toString()可以接受参数可以看下面的栗子

栗子:valueOf()、toString(param)

let n = new Number(10)
console.log(n);//Number {10}
console.log(n.valueOf())//10

console.log(n.toString())//'10'
console.log(n.toString(2))//'1010'
console.log(n.toString(8))//'12'
console.log(n.toString(10))//'10'
console.log(n.toString(16))//'a'

栗子:toFixed(param)

console.log((10).toFixed(2));//'10'
console.log((10.003).toFixed(2));//'10.00'
console.log((10.009).toFixed(2));//'10.01'

String

前言:

JS中的字符串由16位码元组成,每一个字符对应一个码元,单双字节都属一个字符,字符串长度为多少,就代表着有多少码元

1、字符操作:

charAt(索引)、charCodeAt(索引)

//这个方法查找指定位置的16位码元,并返回该码元对应的字符
let s = 'text'
console.log(s.charAt(2));//x
console.log(s.charAt(9));//''
console.log(s.charCodeAt(2));//99
console.log(s.charCodeAt(9));//NaN

2、字符串操作:

slice()、substr()、substring()

let s = 'hello world'
//一个参数
console.log(s.slice(2));//llo world
console.log(s.substring(2));//llo world
console.log(s.substr(2));//llo world

//两个参数
console.log(s.slice(2,4));//ll
console.log(s.substring(2,4));//ll
console.log(s.substr(2,4));//llo 

//负数
//看下方表格
//(1) slice正常操作,参数都是 length+负数
//(2) substring会将负数全部转为0 
//(3) substr第二个参数若为负数则转变为0
console.log(s.slice(-4));//orld-----s.slice(7)
console.log(s.substring(-4));//hello world-----s.substring(0)
console.log(s.substr(-4));// orld-----s.substr(7)

console.log(s.slice(2,-4));//llo w-----s.slice(2,7)
console.log(s.substring(2,-4));//he-----s.slice(2,0)
console.log(s.substr(2,-4));//''-----s.slice(2,0)截取0个长度

方法名称

一个参数

两个参数

负数(这里是两个值都是负数的情况)

slice

截取到最后

含头部不含尾

第一个参数:length+负数   第二个参数:length+负数

substr

截取到最后 第二个参数是长度

第一个参数:length+负数   第二个参数:0

substring

截取到最后

含头部不含尾

第一个参数:0                    第二个参数:0

结论

三个结果都一样

前两个结果一样

substr 第二个参数是负数肯定返回空字符串

3、字符串位置方法:

indexOf(),lastIndexOf()

let s = 'hello world'
console.log(s.indexOf('o'));//4
console.log(s.lastIndexOf('o'));//7
console.log(s.indexOf('o',6));//7
console.log(s.lastIndexOf('o',6));//4

方法名称

搜索方向

第二个参数

共性

indexOf

正向搜索找到第一个

从第二个索引开始,正向搜索

找不到返回-1

lastIndexOf

反向搜索找到第一个

从第二个索引开始,反向搜索

let str = 'Laying underneath the stars,On a warm silent night,Your arms are wrapped around me,And everything feels right.'
function findArr(str,char) {
    let arr = []  
    let pos = str.indexOf(char)
    while (pos!=-1) {
        arr.push(pos)
        pos = str.indexOf(char,pos+1)
    }
    return arr
}
console.log(findArr(str,'t'));// [15, 18, 23, 43, 49, 92, 108]
//这个方法大部分可以通过正则进行处理,可以当作练习下

4、字符串包含方法:

startsWith()、endsWith()、includes()

 let str = 'barbazbaq'
 //一个参数
 console.log(str.startsWith('bar'));//true
 console.log(str.startsWith('baz'));//false
 
 console.log(str.endsWith('baq'));//true
 console.log(str.endsWith('bar'));//false

 console.log(str.includes('baq'));//true
 console.log(str.includes('bar'));//true
 console.log(str.includes('abc'));//false
//两个参数
//startsWith()、includes()第二个参数都表示从哪里开始
console.log(str.startsWith('bar',1));//false
console.log(str.includes('baq',1));//true
//endsWith()第二个参数,就代表这个字符好像就是那么多字符一样
console.log(str.endsWith('baz',6));//true

5、trim()

 let str = ' hello string '
 let strT = str.trim()
 let strL = str.trimLeft()
 let strR = str.trimRight()
 console.log(str.length);//14
 console.log(strT.length);//12
 console.log(strL.length);//13
 console.log(strR.length);//13

6、repeat()

let str = 'hi'
let strR = str.repeat(10)
console.log(str); //hi
console.log(strR);//hihihihihihihihihihi

7、padStart()、padEnd()

let str = 'bar'
console.log(str.padStart(6));       //   bar
console.log(str.padStart(6,'#'));   //###bar
console.log(str.padStart(6,'abcd'));//abcbar
console.log(str.padEnd(6));         //bar
console.log(str.padEnd(6,'#'));     //bar###
console.log(str.padEnd(6,'abcd'));  //barabc

四,内置对象

ECMA-262 对内置对象的定义是:“由ECMAScript 实现提供的、不依赖宿主环境的对象,这些对象在 ECMAScript 程序执行之前就已经存在了。”意思就是说,开发人员不必显示地实例化内置对象;因为它们已经实例化了。ECMA-262 只定义了两个内置对象:Global和 Math。

一.Global 对象

Global(全局)对象是 ECMAScript 中一个特别的对象,因为这个对象是不存在的。在 ECMAScript 中不属于任何其他对象的属性和方法,都属于它的属性和方法。所以,事实上,并不存在全局变量和全局函数;所有在全局作用域定义的变量和函数,都是 Global 对象的属性和方法。

PS:因为 ECMAScript 没有定义怎么调用 Global 对象,所以,Global.属性或者 Global.

方法()都是无效的。(Web 浏览器将 Global 作为 window 对象的一部分加以实现)

Global 对象有一些内置的属性和方法:

1.URI 编码方法

URI 编码可以对链接进行编码,以便发送给浏览器。它们采用特殊的 UTF-8 编码替换所有无效字符,从而让浏览器能够接受和理解。

encodeURI()不会对本身属于 URI 的特殊字符进行编码,例如冒号、正斜杠、问号和#号; 
encodeURIComponent()则会对它发现的任何非标准字符进行编码

var box = '//chen 陈';
alert(box);
alert(encodeURI(box));            //编码中文和空格
alert(encodeURIComponent(box));       //编码特殊字符和中文
  • PS:因为 encodeURIComponent()编码比 encodeURI()编码来的更加彻底,一般来说encodeURIComponent()使用频率要高一些。

使用了 URI 编码过后,还可以进行解码,通过 decodeURI()和 decodeURIComponent()

来进行解码

var box = '//chen 陈';
var a = encodeURI(box);
var b = encodeURIComponent(box);

alert(box);
alert(decodeURI(a));              //解码
alert(decodeURIComponent(b));     //解码

PS:URI 方法如上所述的四种,用于代替已经被 ECMA-262 第 3 版废弃的 escape()和unescape()方法。URI 方法能够编码所有的 Unicode 字符,而原来的只能正确地编码 ASCII字符。所以建议不要再使用 escape()和 unescape()方法。

2.eval()方法

eval()方法主要担当一个字符串解析器的作用,他只接受一个参数,而这个参数就是要

执行的 JavaScript 代码的字符串。

eval('var box = 100');  //解析了字符串代码

alert(box);

eval('alert(100)'); //同上

eval('function box() {return 123}');    //函数也可以

alert(box());

eval()方法的功能非常强大,但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下,非常有可能导致程序的安全性,比如代码注入等等。

3.Global 对象属性

Global 对象包含了一些属性:undefined、NaN、Object、Array、Function 等等。

 alert(Array); //返回构造函数
  •  

4.window 对象

之前已经说明,Global 没有办法直接访问,而 Web 浏览器可以使用 window 对象来实现一全局访问。

alert(window.Array); //同上

二.Math 对象

ECMAScript 还为保存数学公式和信息提供了一个对象,即 Math 对象。与我们在 JavaScript 直接编写计算功能相比,Math 对象提供的计算功能执行起来要快得多。

1.Math 对象的属性

这里写图片描述

alert(Math.E);        //2.718281828459045
alert(Math.PI);       //3.141592653589793

2.Math 对象的方法

这里写图片描述

。 

a。min()和max()

alert(Math.max(12,2,3,4,5,6,7));           //12
alert(Math.min(12,2,3,4,5,6,7));           //2

b。舍入方法 
Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数; 
Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数; 
Math.round()执行标准舍入,即它总是将数值四舍五入为最接近的整数;

alert(Math.ceil(29.1));                 //30
alert(Math.ceil(29.5));                 //30
alert(Math.ceil(29.9));                 //30
alert(Math.floor(29.1));                 //29
alert(Math.floor(29.5));                 //29
alert(Math.floor(29.9));                 //29
alert(Math.round(29.4));                 //29
alert(Math.round(29.5));                 //30
alert(Math.round(29.9));                 //30
  • 数字方法

Math.random()方法返回介于 0 到 1 之间一个随机数,不包括 0 和 1。如果想大于这个范围的话,可以套用一下公式:值 = Math.floor(Math.random() * 总数 + 第一个值)

alert(Math.floor(Math.random() * 10 + 1)); //随机产生 1-10 之间的任意数


for (var i = 0; i<10;i ++) {

document.write(Math.floor(Math.random() * 10 + 5)); //5-14 之间的任意数

document.write('<br/>');

}

为了更加方便的传递想要范围,可以写成函数:

function selectFrom(lower, upper) {

var sum = upper - lower + 1; //总数-第一个数+1 
return Math.floor(Math.random() * sum + lower);

}

for (var i=0 ;i<10;i++) {   
document.write(selectFrom(5,10));   //直接传递范围即可
document.write('<br/>');    
}   

猜你喜欢

转载自blog.csdn.net/qq_37430247/article/details/112911428