JavaScript红宝书学习2——基本引用类型

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量200 收藏 2
点赞数 3
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/funiu817718/article/details/114478171
版权

《JavaScript红宝书（第四版）》第5章

5. 基本引用类型

引用类型，并不是类，虽然相似，但并不等同。

5.1 Date

  1. 基本创建方法

    let now = new Date()
now //Tue Mar 02 2021 06:10:48 GMT+0800 (中国标准时间)
let now1 = new Date('March 2, 2021')
now1 //Tue Mar 02 2021 00:00:00 GMT+0800 (中国标准时间)
let now2 = new Date(2005, 4, 5, 17, 55, 55)
now2  //Thu May 05 2005 17:55:55 GMT+0800 (中国标准时间)

  2. 获取当前事件，返回毫秒数

    let start = Date.now()
start  //1614636947502
let end = Date.now()
console.log(`运行时间: ${end - start}ms`) //运行时间: 14958ms

  3. 格式转换对比

    now.toString() //"Tue Mar 02 2021 06:10:48 GMT+0800 (中国标准时间)"
now.toDateString() //"Tue Mar 02 2021"
now.toTimeString() //"06:10:48 GMT+0800 (中国标准时间)"

//Local带有本地习惯的意思
now.toLocaleString() //"2021/3/2上午6:10:48"
now.toLocaleTimeString() //"上午6:10:48"
now.toLocaleDateString() //"2021/3/2"

now.toUTCString() //"Mon, 01 Mar 2021 22:10:48 GMT"

  4. 获取时间某维度的方法，略

    常用：getFullYear(), getTime(),getDate(),getMonth(), getDay(), getHours(),getMinutes(), getSeconds(),getMilliseconds()

5.2 RegExp

正则表达式一直是盲区之一，觉得混乱就一直没有深入去学，本次先将红宝书进行概览，然后将补充资料《JavaScript正则表达式迷你书》的前两章基础知识进行学习，突破这个盲区。正则迷你书的学习单独进行了记录。

  1. 匹配模式：

    //常用的是前3种模式
g: 全局模式，匹配所有的xxxx字符；而不是找到第一个匹配的就结束
i: 忽略大小写
s: dotAll, 表示元字符.匹配任意字符（包括\r\n)

m：多行模式
y: 粘附模式
u: Unicode模式

    举例见2节

  2. 正则表达式对的实例方法

    • exec()
    //不加g，则调用多少次exec()都只是匹配第一个元素
let pattern1 = /.at/
pattern1.exec("cat, bat, sat, fat") 
//["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]

//加了g，那么每次调用exec()，则进行一个元素的匹配
let pattern2 = /.at/g
pattern2.exec("cat, bat, sat, fat")
//["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
pattern2.exec("cat, bat, sat, fat")
//["bat", index: 5, input: "cat, bat, sat, fat", groups: undefined]
pattern2.exec("cat, bat, sat, fat")
//["sat", index: 10, input: "cat, bat, sat, fat", groups: undefined]
pattern2.exec("cat, bat, sat, fat")
//["fat", index: 15, input: "cat, bat, sat, fat", groups: undefined]

//另外，粘附标记y，会覆盖全局标记g，不过目前y标记在项目中尚未使用

  3. test(String)

    let textExp = '0000-000-00'
let pattern3 = /\d{4}-\d{3}-\d{2}/
pattern3.test(textExp)  //true

  4. 构造函数属性，都没有Web标准出处，不推荐使用

5.3 原始值包装类型（以下子标题，并非书中章节编号）

5.3.1 概念理解
let sss = 'hello string'
let s2 = sss.substring(2)

如上面代码，实际上sss是一个原始值，正常来讲原始值本身不是对象，应该不带有substring等方法。而上述代码的实际过程钟对原始值进行了【包装】处理，let sss = new String('hello string').因而其转变为对象，有了substring方法。

类似的包装类型，String，Number, Boolean

5.3.2 不同包装类型的说明

  1. String类型我们用的比较多，但其实并未深入理解过，这是一个原始值的包装，只是觉得所有string都是对象，都可以直接调用这些方法。

  2. Number类型，也比较多使用，尤其是使用xxx.toString(16)，将一个数值转换为16进制，前文的Number类型学习总结中也已进行了测试。主要方法是：

    toString(2)  //2,8,10,16,表示进制
toFiwed(2)  //保留几位小数

//toExponential(XX), 科学计数法
let num = 10
num.toExponential(1)  //"1.0e+1"

//toPrecision(XXX), 返回最合理的输出方式，科学计数法，或者是保留了N为小数
let num2 = 99
num2.toPrecision(2) //"99"
num2.toPrecision(3) //"99.0"
num2.toPrecision(1) //"1e+2"

  3. Boolean类型不推荐使用。

5.4 String的单独说明

  1. charAt()，经测试，与直接访问string的下标效果一样

    let sss = 'hello'
sss.charAt(1)  //"e"
sss[1]  //"e"

  2. 操作方法

    1. concat方法，是字符串的拼接，但我们更经常直接使用s1+s2进行拼接
    2. 取子字符串的方法有3个：slice, substr, substring
    • 这三个方法，都不会改变原始字符串的值，必须重新赋值，才可以

    再对整个String类型进行总结，String的操作，基本都不会改变原始字符串的值

    let sss = 'hello world'
sss.substr(3) //"lo world"
sss.substring(3) //"lo world"
sss.slice(3) //"lo world"

sss //"hello world"
    • 这三个方法接收1-2个参数，参数意义不同，

    【个人认为，可以选择其中一个方法，进行多次尝试，经常使用即可】

    sss.slice(3,7) //"lo w"
sss.substr(3,7) //"lo worl", 注意substr的第二个参数，表示截取的length
sss.substring(3,7) //"lo w"

sss.slice(-3) //"rld"
sss.substr(-3) //"rld"
sss.substring(-3) //"hello world", substring方法，负值会不起作用，转换为0

//第二个参数是负值
sss.slice(3,-4) //"lo w"
sss.substr(3,-4) //""
sss.substring(3,-4) //"hel"
    • 通过上述例子尝试，个人认为，slice的逻辑较为简单，总结如下：

    slice(startIndex, endIndex)：这两个参数值是正数负数都可以，正数表示从开头计算index，负数表示从结尾计算index(会转换为正数，转化为开头的index)。

    理解起来比较简单，以后会经常使用。

  3. 位置方法

    indexOf(), lastIndexOf()

    方法均可以接收1-2个参数

    let sss = 'hello world'
sss.indexOf('o') //4
sss.lastIndexOf('o') //7

//第二个参数含义是，从某个index开始搜索，这种方法不熟悉，但是有用！！！
sss.indexOf('o', 6) //7
sss.lastIndexOf('o', 6) //4

    接收2个参数，这种方式，即可通过不断更新第二个index的方式，循环遍历某个string，从而找到所有的符合条件的子串。

    当然，也可以选择适当的【正则表达式】进行实现。

  4. 包含方法

    1. 三种方法，都很常用，includes, startsWith, endsWith
    2. 同样，三种方法，都可以接收1-2个参数。接收的第二个参数，含义与indexOf相同，是从某具体index开始搜索

  5. trim()方法

    1. trim()与slice，substr, substring一样，都是不改变原始string
    2. trimLeft(), trimRight()是去掉左边或者右边的空格，尝试发现，trimStart(), trimEnd()效果一样
    let s3 = ' hello world '
s3.trimEnd() //" hello world"
s3.trimStart() //"hello world "
s3.trimLeft() //"hello world "

  6. 其他方法

    repeat(), padStart(), padEnd() 三个方法，目前使用不多，是字符串的重复，或复制

  7. 迭代与解构

    1. 可以使用for…of对string进行解构， for(const c of 'abccde')
    2. 【重点】解构：用ES6中的解构符号..., 便捷的把字符串分割成了字符数组
    let s5 = 'abcde'
[...s5] //(5) ["a", "b", "c", "d", "e"]

  8. 大小写转换

    主要方法toLowerCase(), toUpperCase(), toLocaleLowerCase(), toLocaleUpperCase()

    带Locale的方法加入了本地语言的特征，一般是与不带Locale的方法作用相同

    let s1 = 'Hello'
s1.toLowerCase() \\"hello"
s1.toUpperCase() \\"HELLO"
s1.toLocaleLowerCase() \\"hello"
s1.toLocaleUpperCase() \\"HELLO"

  9. 字符串匹配方法

    1. match方法，类似于regExp.exec()，在正则中会详细总结

    2. search方法，在只关心匹配的index时使用比较方便

      let s2 = 'bat, mat, fat'
s2.search(/at/) //1
s2.search(/at/g) //1

    > 注意：search方法，仅返回第一次匹配的index

  10. replace方法

    • 使用比较多，replace的对象可以是一个具体String，也可以是regExp

      s2.replace('at', 'aabb') //"baabb, mat, fat"， 仅替换了第一个匹配
//replaceAll方法，可以实现所有匹配的替换
s2.replaceAll('at', 'aabb') //"baabb, maabb, faabb"
//正则表达式，更方便的实现所有匹配的替换
s2.replace(/at/g, 'aabb') //"baabb, maabb, faabb"

    - replace的第二个参数，可以插入正则表达式操作的值:

![image-20210304063131750](C:\Users\Funiu\AppData\Roaming\Typora\typora-user-images\image-20210304063131750.png)

- 第二个参数，也就是replace的具体方式，还可以是function

  11. split

    • 可以接收第二个参数，表示数组的元素个数

      let s3 = 'hello, world, byebye, meet'
s3.split(',') //(4) ["hello", " world", " byebye", " meet"]
s3.split(',', 3) //(3) ["hello", " world", " byebye"]

    - 第一个参数可以是正则表达式

  12. localCompare

    let s4='hello'
s4.localeCompare('world') //-1
s4.localeCompare('abc') //1
s4.localeCompare('haha') //1
s4.localeCompare('hello') //0

5.5 单例内置对象

5.5.1 Global

  1. eval

    在使用 eval()的时候必须极为慎重，特别是在解释用户输入的内容时 ，因为这个方法会对 XSS 利用暴露出很大的攻击面。恶意用户可能插入会导致你网站或应用崩溃的代码 ！

5.5.2 Math

下面列举Math常用方法

  1. min, max

    之前入坑：入参错误

    Math.max(2,34,5,64) //64
Math.max([2,34,5,64]) //NaN

  2. 舍入方法

    ceil, floor, round, fround

    let testMath = 3.4 
Math.ceil(testMath)  //4 
Math.floor(testMath) //3 
//round, 四舍五入运算
Math.round(testMath) //3 
Math.round(3.6) //4 
//fround，从没用过，是返回最接近的32位精度的浮点值
Math.fround(testMath) //3.4000000953674316 
Math.fround(3.6) //3.5999999046325684

  3. random

    1. Math.random()总是返回小数，为了得到随机整数，一般搭配Math.floor(),Math.ceil()使用。
    Math.random() //0.019451852416230375
Math.random() * 10 //1.6416460619385975
Math.floor(Math.random() * 10) //5

  4. 其他方法

    abs, exp, log, pow(现在可以直接使用**代替)，等

funiu666
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
跟我学习javascript的基本类型和引用类型
10-23
跟我学习javascript的基本类型和引用类型，利用图解的方式，告诉大家javascript的基本类型和引用类型的区别和联系，感兴趣的小伙伴们可以参考一下
javascript中基本类型和引用类型的区别分析
10-24
大多数人系统学习过的程序设计语言，在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的...下面我们来看一下在 JavaScript 中基本数据类型（Primitive Types)和引用类型（Reference Types)的区别。
JavaScript红宝书学习3——集合引用类型1)Object, Array
funiu817718的博客
03-07 124
《JavaScript红宝书（第四版）》第6章 集合引用类型 6.2 Array 6.2.1 创建数组 let arr = Array(3) arr //(3) [empty × 3] typeof(arr[0]) //"undefined" arr.fill(0) //(3) [0, 0, 0] let arr1 = Array('hello') arr1 //["hello"] let arrNum= 10 let arr3 = Array(arrNum) arr3 //(10) [empty ×
JavaScript红宝书学习4——集合引用类型2)定型数组，Map，Set
funiu817718的博客
03-13 272
《JavaScript红宝书（第四版）》第6章 6.3 定型数组 目前项目中没有对其进行应用，暂且跳过细节 6.4 Map 6.4.1 基本API //注意初始化，new Map()后的[]是双层数组，否则报错 let map1 = new Map([['zhangsan', 23],['lisi',34]]) map1.set('wangwu', 28) //Map(3) {"zhangsan" => 23, "lisi" => 34, "wangwu" => 28} map1.ha
JavaScript红宝书学习1——语言基础
funiu817718的博客
02-27 284
《JavaScript红宝书第四版》学习记录1 2. HTML中的JavaScript 执行脚本，可以设置defer,async属性 defer：不确保多个defer脚本的执行顺序，最好只使用一个defer <script defer src=""> </script> //告诉浏览器立即下载，但是延迟执行 async: 不保证顺序，完全异步 <script async src=""> </script> //立即下载，异步执行 3. 语法基础
JavaScript红宝书学习5——函数！！敲黑板
funiu817718的博客
03-13 203
10.函数 10.1 箭头函数 箭头函数的参数是否带括号（），是否需要{} 只有一个参数，可带可不带 无参数，或者多个参数，必须有括号 {}，是表示函数体，如果只有一个语句的函数体可以不带{}，默认是返回这行代码的值 const arr = [1,2,3,4,5,6] let arr1 = arr.map(item => item * 2) 不适用的场景：不能用arguments, super, new.target, 以及构造函数 10.3 参数 重点理解：箭头函数不能使用argu
一起读JavaScript红宝书 —— 02语法基础（上）
蜗牛的博客
07-12 441
JavaScript高级程序设计读书笔记，前端神作不容错过。原书近100万字，内容太多，故作笔记尽量在不缩减内容的情况下缩减字数，方便复习和回顾。
一起读JavaScript红宝书 —— 03语法基础（下）
蜗牛的博客
07-13 411
JavaScript高级程序设计读书笔记，前端神作不容错过。原书近100万字，内容太多，故作笔记尽量在不缩减内容的情况下缩减字数，方便复习和回顾。
红宝书《JavaScript高级程序设计》学习笔记（三）基本概念
苏一恒
09-27 235
3.1语法 ECMAScript中的一切（变量、函数名和操作符）都区分大小写。 标识符，就是指变量、函数、属性的名字，或者函数的参数。 按照惯例、ECMAScript标识符采用驼峰大小写格式。 /* * 注释 * */ 注释的第二行和第三行的星号可省略，这不是必需的，目的是为了提高可读性。 语句结尾的分号不是必需的，但我们建议任何时候都不要省略它。因为它能帮助开发人员避免不完整...
JavaScript高级程序设计红宝书学习笔记第三章基本概念
公众号：前端铁蛋
12-15 452
第三章 基本概念 本章内容 语法 数据类型 操作符 语句 函数 3.1 语法 3.1.1 区分大小写，ECMAScript中的一切（变量、函数名和操作符）都区分大小写。 3.1.2 标识符 标识符：变量、函数、属性的名字，或者函数的参数；标识符的格式规则如下： 第一个字符必须是一个字母、下划线、或者是一个美元符号$； 其他的字符可以是字母、下划线、美元符号或者是数字； 标识符中的字母也...
【JavaScript 红宝书】JavaScript 高级教程第 3 版学习笔记
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
01-13 1869
javascrpt高级教程 一个完整的javascript实现，应该包括三部分： （1）ECMAScript(核心) （2） DOM（文档对象模型） （3）BOM（浏览器对象模型） 一、 ECMAScript兼容： （1）支持ECMA-262描述的所有“类型、值、对象、属性、函数以及程序句法和语法”； （2）支持Unicode字符标准； （3）添加ECMA-262没有描述的“更......
JavaScript基本数据类型及值类型和引用类型
10-23
大家经常可以见到javascript中的一些数据类型，比如“undefined”、“boolean”、“string”等等，这篇文章就和大家一起来学习JavaScript基本数据类型及值类型和引用类型，有需要的童鞋参考下，本文写的不好地方，还...
JavaScript引用类型RegExp基本用法详解
12-10
本文实例讲述了JavaScript引用类型RegExp基本用法。分享给大家供大家参考，具体如下： 1、正则表达式定义 三个标志：全局模式g，不区分大小写模式i，多行模式m。 1) 字面量定义 var pattern = /[fe]at/gim; 2) ...
javascript权威指南 学习笔记之javascript数据类型
10-28
根据给定的【标题】"javascript权威指南 学习笔记之javascript数据类型"和【描述】，我们可以深入探讨JavaScript中的数据类型及其特点。 首先，JavaScript支持三种基本数据类型：数字（Number）、字符串（String）...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 623
注释很详细，直接上代码……
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 958
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 332
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 262
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值