《JavaScript高级程序设计(第四版)》学习笔记(五)第5章

简介: 《JavaScript高级程序设计(第四版)》学习笔记(五)第5章

image.png

📢 大家好,我是小丞同学,最近在刷红宝书,这是一篇学习笔记

📢 愿你我一起在这肆意生活里大放光彩

这是阅读《JavaScript高级程序设计(第四版)》的第五天,本书已阅读 135/865

第五章:基本引用类型

看到开头有一句话就离谱:“函数也是一种引用类型,但是内容太多了,一章放不下,所以后面开了一章!!!”离谱!


牢骚话


写了一会发现,这一章好多要记得,这难搞啊

老是cv我很讨厌!

5.1 Date

要创建日期对象,需要使用 new 操作符来调用 Date 构造函数

let now = new Date();

Date.now()返回当前时间的毫秒数  Date.parse()方法接收一个表示日期的字符串参数,尝试将这个字符串转换为表示该日期的毫秒数。如果传入的值不表示时间,则返回NaN

let someDate = new Date(Date.parse("May 23, 2019"));

还有一个Date.UTC(),不是很理解这个,不常用  5.1.1 继承的方法 Date 类型重写了这几个方法  valueOf方法返回的是日期的毫秒值

image.png

5.1.2 日期格式化方法

Date 类型有几个专门用于格式化日期的方法,它们都会返回字符串:


toDateString()显示日期中的周几、月、日、年(格式特定于实现);


toTimeString()显示日期中的时、分、秒和时区(格式特定于实现);


toLocaleDateString()显示日期中的周几、月、日、年(格式特定于实现和地区);


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


toUTCString()显示完整的 UTC 日期(格式特定于实现)。


5.1.3 日期 / 时间组件方法

逐渐走向cv工程师(原谅)


image.png

image.png

常用的在之前的笔记里有记到,常用的内置对象  5.2 RegExp 老生常谈,正则表达式,乏了乏了

image.png

关于正则表达式的语法,参考  5.2.1 RegExp 实例属性

image.png

5.2.2 RegExp 实例方法

exec()方法,这个方法只接收一个参数,即要匹配字符串的规则。如果找到了匹配项,则返回包含第一个匹配信息的数组;如果没找到匹配项,则返回null


test()方法,接收一个字符串参数。如果输入的文本与模式匹配,则参数返回true,否则返回false

let text = "000-00-0000";
let pattern = /\d{3}-\d{2}-\d{4}/;
if (pattern.test(text)) {
    console.log("The pattern was matched.");
}

类似于  5.2.3 RegExp 构造函数属性

image.png

例如

let text = "this has been a short summer"; 
let pattern = /(.)hort/g; 
if (pattern.test(text)) { 
 console.log(RegExp.input); // this has been a short summer 
 console.log(RegExp.leftContext); // this has been a 
 console.log(RegExp.rightContext); // summer 
 console.log(RegExp.lastMatch); // short 
 console.log(RegExp.lastParen); // s 
}

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

let s1 = "some text";//原始值
let s2 = s1.substring(2);
console.log(s2);//'me text'  正常运行

会经历以下几个步骤  创建一个string类型的实例  调用实例上的特殊方法  销毁实例

let s1 = new String("some text");
let s2 = s1.substring(2);
s1 = null;

原始值包装类型的生命周期只存在于访问的那行代码,因此不能给原始值添加属性和方法


5.3.1 Boolean

原始值和 Boolean 对象(引用值)的区别:


typeof 操作符对原始值返回 boolean,对引用值返回 object


Boolean 对象是 Boolean 类型的实例,在使用 instanceof 操作符时返回true,对原始值则返回 false


示例如下:

let falseObject = new Boolean(false);
let falseVlaue = false;
console.log(typeof falseObject)//object
console.log(typeof falseVlaue)// Boolean
console.log(falseObject instanceof Boolean)// true
console.log(falseVlaue instanceof Boolean)// false

5.3.2 Number 要创建一个 Number 对象,就要使用 Number 构造函数,如下示例:

let numberObject = new Number(2)

Number 类型重写了 valueOf(),toLocaleString()和toString()方法  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'

1. toFixed() 方法 返回包含指定小数点位数的数值字符串,如下示例:

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

0 - 20 位小数位的数值  2. toExponential() 方法 返回以科学计数法表示的数值字符串

let num = 9;
console.log(num.toExponential(1));//'9.0e+0'
console.log(num.toExponential(2));//'9.00e+0'

3. toPrecision() 方法 相对于上一种方法,这种方法更加的合理,同样是科学计数法的

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

4. isInteger方法与安全整数 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('javaScript');

1. JavaScript 字符 JavaScript 字符串由16位 code unit 组成,字符串的 length 属性表示字符串包含多少位 code unit;  说的好高级,我不配哈哈哈

let msg = 'javaScript';
console.log(msg.length)// 10

2. charAt() 方法: 返回给定索引位置的字符(易懂)

let msg = 'javaScript';
console.log(msg.charAt(2))// 'v'

3. charCodeAt() 方法: 返回指定索引位置的code unit值,索引以整数指定

let msg = 'javaScript';
console.log(msg.charCodeAt(2))// '118'

4. formCharCode()方法: 用于根据给定的 UTF-16 code unit 创建字符串中的字符,可以接受任意多个数值,返回将所有数值对应的字符拼接起来的字符串

console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); // ab☺de

好厉害  5. 字符串操作方法 1. concat 用于将一个或多个字符串拼接成一个新字符串

let stringValue = 'javaScript ';
let res = stringValue.concat('nice')
console.log(res)//'javaScript nice'

2. slice、substr、substring 三个提取字符串的方法  slice(子字符串开始位置,子字符串结束位置)  substring(子字符串开始位置,子字符串结束位置)  substr(子字符串开始位置,返回的子字符串数量)  正常操作

let strVal = 'javaScritp nice';
console.log(strVal.slice(3));//'aScritp nice'
console.log(strVal.substr(3));//'aScritp nice'
console.log(strVal.substring(3));//'aScritp nice'
console.log(strVal.slice(2,6));//'vaSc'
console.log(strVal.substring(2,6));//'vaSc'
console.log(strVal.substr(2,6));//'vaScri' 第二个参数表示返回的字符数

非常规操作  slice():将所有负值参数都当成字符串长度加上负参数值  substr():将第一个负参数值当成字符串长度加上该值,将第二个负参数值转换为0  substring():将所有负参数值转换为0

let strVal = 'javaScritp nice';
console.log(strVal.slice(-3));//'ice'
console.log(strVal.substr(-3));//'ice'
console.log(strVal.substring(-3));//'javaScritp nice'
console.log(strVal.slice(2,-3));//'vaScritp n'
console.log(strVal.substring(2,-3));//'ja'
console.log(strVal.substr(2,-3));//'' 

3. 字符串位置方法indeOf,lastIndexOf indexOf()和lastIndexOf() 用于在字符串中定位子字符串;  indexOf()从字符串开头开始查找子字符串;  lastIndexOf()从字符串末尾开始查找子字符串;

let strVal = 'javaScritp nice';
console.log(strVal.indexOf('i'));//7
console.log(strVal.lastIndexOf('i'));//12

4. 字符串包含方法

startsWith()、 endsWith()、 includes() 用于判断字符串中是否包含另一个字符串的方法,这些方法都会从字符串中搜索传入的字符串,并返回一个表示是否包含的布尔值


startsWith() 检查开始于索引 0 的匹配,第二个参数表示开始搜索的位置


endsWith() 检查开始于索引 string.length - substring.length() 的匹配项


includes() 检查整个字符串

let strVal = 'javascript';
console.log(strVal.startsWith('java'))//true
console.log(strVal.startsWith('java',1))//false
console.log(strVal.includes('java'))//true
console.log(strVal.includes('java',2))//false

5. trim() 方法 这个我熟,删除前后的空格,这个方法在一些处理数据操作中很常用

let strVal = ' javascript  ';
console.log(strVal.trim())//'javascript'
console.log(strVal)//' javascript  '

6. repeat() 方法 接收一个整数,表示复制多少次,返回拼接好的结果

let strVal = 'js ';
console.log(strVal.repeat(5) + 'nice')//'js js js js js nice'

迭代解构之后ES6再看


7. 大小写转换

涉及字符串大小写转换的方法有:toLowerCase() 、toLocaleLowerCase()、 toUpperCase()、 toLocaleUpperCase()


其中toLocaleLowerCase()和toLocaleUpperCase() 旨在基于特定地区实现;

let strVal = 'abcde javascaript';
console.log(strVal.toLocaleUpperCase())//'ABCDE JAVASCARIPT'
console.log(strVal.toUpperCase())//'ABCDE JAVASCARIPT'
console.log(strVal.toLocaleLowerCase())//'abcde javascaript'
console.log(strVal.toLowerCase())//'abcde javascaript'

8. localeCompare() 方法

比较两个字符串,返回如下3个值中的一个:


如果按照字母表顺序,字符串应该排在字符串参数前头,则返回负值(通常是-1,具体要看与实际值相关的实现)


如果字符串与字符串参数相等,则返回0;


如果按照字母表顺序,字符串应该排在字符串参数后头,则返回正值(通常是1,具体要看与实际值相关的实现)

let strText = 'blue';
console.log(strText.localeCompare('abc'))// 1
console.log(strText.localeCompare('blue'))// 0
console.log(strText.localeCompare('gjk'))// -1

5.4 单例内置对象

5.4.1 Global

Global 对象是一种兜底对象,代码不会显示的访问它,它所针对的是不属于任何对象的属性和方法,不存在全局变量和全局函数,在全局作用域中定义的变量和函数都会变成Global对象的属性


1. URL 编码方法

encodeURI():用于对整个 URI 进行编码,不会编码属于URL组件的特殊字符;encodeURIComponent():用于编码URI中的单独组件,会编码它发现的所有非标准字符,比如冒号 斜杠 问好 并号等

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

decodeURI():只对使用encodeURI()编码过的字符解码  decodeURIComponent():解码所有被 encodeURIComponent() 编码的字符;  2. eval 方法

image.png

stop!  5.4.2 Math math对象作为保存数学公式,信息和计算的地方,提供了一些辅助计算的属性和方法  1. min() 和 max() 操作简单

 let max = Math.max(3,55,60,8,99);
 console.log(max);//99
 let min = Math.min(3,55,60,8,99);
 console.log(min);//3

对于数组,可以使用扩展操作符

let values = [1, 2, 33, 9 ,8, 7, 5];
let max = Math.max(...values);
console.log(max)//33

2. 舍入方法

Math.ceil() :始终向上舍入为最接近的整数;


Math.floor():始终向下舍入为最接近的整数;


Math.round():执行四舍五入;


Math.fround():返回数值最接近的单精度(32位)浮点值表示;


3. random() 方法

从 1 - 10 随机选择一个数

let number = Math.floor(Math.random() * 10 + 1);
console.log(number)

如果是为了加密而需要生成随机数,那么建议使用 window.crypto.gerRandomValues()

相关文章
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
12 0
|
5天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
13天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1