JS常见内置类

于 2023-04-17 11:13:51 发布
阅读量342 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_58595131/article/details/130193673
版权

目录

原始类型的包装类

包装类型的使用过程 

Number类

String类 

数组（Array）

时间的表示方式

原始类型的包装类

JavaScript的原始类型 并非对象类型 ，所以从理论上来说，它们是 没有办法获取属性或者调用方法 的。
但是，在开发中会看到，我们会经常这样操作：
那么，为什么会出现这样奇怪的现象呢？（悖论）
  • 原始类型是简单的值，默认并不能调用属性和方法；
  • 这是因为JavaScript为了可以使其可以获取属性和调用方法，对其封装了对应的包装类型；
常见的包装类型有： String、Number、Boolean、Symbol、BigInt类型

 

包装类型的使用过程 

默认情况，当我们 调用一个原始类型的属性或者方法 时，会进行如下操作：
  • 根据原始值，创建一个原始类型对应的包装类型对象；
  • 调用对应的属性或者方法，返回一个新的值；
  • 创建的包装类对象被销毁；
  • 通常JavaScript引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。
我们也可以自己来创建一个包装类的对象：
  • name1是字面量（literal）的创建方式，name2是new创建对象的方式；

 

注意事项： null、undefined没有任何的方法，也没有对应的“对象包装类” ；

 

Number类

Number属性补充：

  • Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)；
  • Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 -(2^53 - 1)
Number实例方法补充：
方法一：toString(base) ，将数字转成字符串，并且按照base进制进行转化
  • base 的范围可以从 2 到 36，默认情况下是 10；
  • 注意：如果是直接对一个数字操作，需要使用..运算符；
方法二：toFixed(digits) ，格式化一个数字，保留digits位的小数；
  • digits的范围是0到20（包含）之间；
Number类方法补充：
  • 方法一：Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
  • 方法二：Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；
更多Number的知识，可以查看MDN文档：

 

在除了Number类可以对数字进行处理之外，JavaScript还提供了一个 Math对象 。
  • Math是一个内置对象（不是一个构造函数），它拥有一些数学常数属性和数学函数方法；
Math 常见的属性：
  • Math.PI：圆周率，约等于 3.14159；
Math 常见的方法：
  • Math.floor：向下舍入取整
  • Math.ceil：向上舍入取整
  • Math.round：四舍五入取整
  • Math.random：生成0~1的随机数（包含0，不包含1）
  • Math.pow(x, y)：返回x的y次幂

 

 

Math中还有很多其他数学相关的方法，可以查看MDN文档：

String类 

String常见的属性：
  • length：获取字符串的长度； 
操作一：访问字符串的字符
  • 使用方法一：通过字符串的索引 str[0]
  • 使用方法二：通过str.charAt(pos)方法
  • 它们的区别是索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串；
字符串的不可变性：
  • 字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的；
所以，在我们改变很多字符串的操作中，都是生成了一个新的字符串；
比如改变字符串大小的两个方法
  • toLowerCase()：将所有的字符转成小写；
  • toUpperCase() ：将所有的字符转成大写；

 

在开发中我们经常会在一个字符串中查找或者获取另外一个字符串，String提供了如下方法：
方法一：查找字符串位置
  • 从fromIndex开始，查找searchValue的索引；
  • 如果没有找到，那么返回-1；
  • 有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）

 

 

方法二：是否包含字符串 
  • 从position位置开始查找searchString， 根据情况返回 true 或 false
  • 这是ES6新增的方法；

 

方法三：以xxx开头 
  •  从position位置开始，判断字符串是否以searchString开头；
  • 这是ES6新增的方法，下面的方法也一样
方法四：以xxx结尾
  •  在length长度内，判断字符串是否以searchString结尾；

 

 

方法五：替换字符串 
  •  查找到对应的字符串，并且使用新的字符串进行替代；
  • 这里也可以传入一个正则表达式来查找，也可以传入一个函数来替换；

 

方法六：拼接字符串

 

方法七：删除首位空格 

方法八：获取子字符串（开发中推荐slice）

方法九：字符串分割 
  • separator：以什么字符串进行分割，也可以是一个正则表达式；
  • limit：限制返回片段的数量；

 补充：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

 

数组（Array）

访问 数组中的元素：
  • 通过中括号[]访问
  • arr.at(i)： 如果 i >= 0，则与 arr[i] 完全相同；对于 i 为负数的情况，它则从数组的尾部向前数。

 

修改数组中的元素 

 

删除和添加 元素虽然也可以通过索引来直接操作，但是开发中很少这样操作。
在数组的 尾端 添加或删除元素：
  • push 在末端添加元素.
  • pop 从末端取出一个元素.

在数组的首端添加或删除元素

  • shift 取出队列首端的一个元素，整个数组元素向前前移动；
  • unshift 在首端添加元素，整个其他数组元素向后移动；

push/pop 方法运行的比较快，而 shift/unshift 比较慢。  

 

arr.splice 方法可以说是处理数组的利器，它可以做所有事情：添加，删除和替换元素。

arr.splice的语法结构如下（这个方法会修改原数组）： 

 

  • 从start位置开始，处理数组中的元素；
  • deleteCount：要删除元素的个数，如果为0或者负数表示不删除；
  • item1, item2, ...：在添加元素时，需要添加的元素；

 

length属性用于获取数组的长度：

  • 当我们修改数组的时候，length 属性会自动更新。
length 属性的另一个有意思的点是它是可写的。
  • 如果我们手动增加一个大于默认length的数值，那么会增加数组的长度。
  • 但是如果我们减少它，数组就会被截断。

 

所以，清空数组最简单的方法就是：arr.length = 0;

常用的数组遍历

  • 普通for循环遍历：

  • for..in 遍历，获取到索引值：

 

  • for..of 遍历，获取到每一个元素：

 

arr.slice 方法 ：用于对数组进行截取（类似于字符串的slice方法）。

 

  • 包含bigin元素，但是不包含end元素；

 

arr.concat方法 ：创建一个新数组，其中包含来自于其他数组和其他项的值。

 

 

 

arr.join方法 ： 将一个数组的所有元素连接成一个字符串并返回这个字符串。

 

 

arr.indexOf方法 ： 查找某个元素的索引
  • 从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1；
  • 也有对应的从最后位置开始查找的 lastIndexOf 方法
arr.includes方法 ：判断数组是否包含某个元素
  • 从索引 from 开始搜索 item，如果找到则返回 true（如果没找到，则返回 false）。
find 和 findIndex 直接查找元素或者元素的索引（ES6之后新增的语法）

 

sort方法也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组：

  • 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 前面；
  • 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
  • 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 前面；
  • 也就是说，谁小谁排在前面；

 

reverse() 方法 将数组中元素的位置颠倒，并返回该数组。
其他高阶方法：
arr.forEach
遍历数组，并且让数组中每一个元素都执行一次对应的方法；

 

arr.map
map() 方法创建一个新数组；
这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；

 

arr.filter
filter() 方法创建一个新数组；
新数组中只包含每个元素调用函数返回为true的元素；

 

arr.reduce
用于计算数组中所有元素的总和；
对数组中的每个元素按序执行一个由您提供的 reducer 函数；
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；

 

 

时间的表示方式

在JavaScript中我们使用Date来表示和处理时间。 

 

 

日期的表示方式有两种： RFC 2822 标准 或者 ISO 8601 标准 。
默认打印的时间格式是RFC 2822标准的：

 

 

 

我们也可以将其转化成ISO 8601标准的：
  • YYYY：年份，0000 ~ 9999
  • MM：月份，01 ~ 12
  • DD：日，01 ~ 31
  • T：分隔日期和时间，没有特殊含义，可以省略
  • HH：小时，00 ~ 24
  • mm：分钟，00 ~ 59
  • ss：秒，00 ~ 59
  • .sss：毫秒
  • Z：时区

我们可以从Date对象中获取各种详细的信息：

  • getFullYear()：获取年份（4 位数）；
  • getMonth()：获取月份，从 0 到 11；
  • getDate()：获取当月的具体日期，从 1 到 31（方法名字有点迷）；
  • getHours()：获取小时；
  • getMinutes()：获取分钟；
  • getSeconds()：获取秒钟；
  • getMilliseconds()：获取毫秒；

获取某周中的星期几：

  • getDay()：获取一周中的第几天，从 0（星期日）到 6（星期六）；
Date也有对应的设置方法：
  • setFullYear(year, [month], [date])
  • setMonth(month, [date])
  • setDate(date)
  • setHours(hour, [min], [sec], [ms])
  • setMinutes(min, [sec], [ms])
  • setSeconds(sec, [ms])
  • setMilliseconds(ms)
  • setTime(milliseconds)
了解：我们可以设置超范围的数值，它会自动校准。

 

Unix 时间戳 ：它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数。
在 JavaScript 中，我们有多种方法可以获取这个时间戳：
  • 方式一：new Date().getTime()
  • 方式二：new Date().valueOf()
  • 方式三：+new Date()
  • 方式四：Date.now()
获取到 Unix 时间戳之后，我们可以利用它来测试代码的性能：

 

 

Date.parse(str) 方法可以 从一个字符串中读取日期 ，并且 输出对应的Unix时间戳 。  
Date.parse(str) ：
  • 作用等同于 new Date(dateString).getTime() 操作；
  • 需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
  • 比如YYYY-MM-DDTHH:mm:ss.sssZ
  • 其他格式也许也支持，但结果不能保证一定正常；
  • 如果输入的格式不能被解析，那么会返回NaN；

 

扶羊人zz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript内部类
Switch的博客
12-24 4646
Javascript内部类 基本概念     JS中本身提供了一些可以直接使用的类，这些类就是内部类。 主要有： Array,Boolean,Date,Math,Number,String,RegExp PS：因为所有类都是从Object类中继承而来的，所有上述内部类都有Object的属性和方法。   内部类的分类 静态类 基本语法： 类名.属性/方法   Ma
JavaScript 内置对象 数据类型
weixin_68773927的博客
07-01 364
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为 ‘2023-5-1’,可以写成 new Date(‘2023-5-1’)或者 new Date('2019/5/1')Mozilla开发者网络（MDN)提供了相关开放网络技术（open web) 的信息，包括HTML CSS 和万维网及HTML5的应用的API。指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内容中新开辟了一个内存空间。字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
JavaScript基础之九JavaScript常见的内置类
LUFANZHENG的专栏
10-26 333
前面我们已经学习了Number类型，它有一个对应的数字包装类型Number，我们来对它的方法做一些补充。日期的表示方式有两种：RFC 2822 标准 或者 ISO 8601 标准。所以，在我们改变很多字符串的操作中，都是生成了一个新的字符串。reverse()方法将数组中元素的位置颠倒，并返回该数组。下面的方法是在创建一个数组时，设置数组的长度（很少用）arr.includes方法：判断数组是否包含某个元素。arr.indexOf方法： 查找某个元素的索引。注意：这个方法会修改原数组。
js内置类型
weixin_30318645的博客
01-14 187
内置类型 JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。 基本类型有六种： null，undefined，boolean，number，string，symbol。 其中 JS 的数字类型是浮点类型的，没有整型。并且浮点类型基于 IEEE 754标准实现，在使用中会遇到某些 Bug。NaN 也属于 number 类型，并且 NaN 不等于自身。 对于基本类型...
JavaScript中常见内置函数用法示例
10-18
主要介绍了JavaScript中常见内置函数用法,结合实例形式分析了JavaScript常用内置函数的功能、参数、使用方法及相关操作注意事项,需要的朋友可以参考下
javascript 内置对象及常见API详细介绍
10-21
本篇文章将详细阐述JavaScript中的内置对象及其常见API，帮助读者深入理解这些核心概念。 首先，我们讨论的是JavaScript中的类与对象。在JavaScript中，虽然没有传统意义上的类，但可以通过函数来模拟类的行为。...
Javascript 类型转换、封闭函数及常见内置对象操作示例
10-15
主要介绍了Javascript 类型转换、封闭函数及常见内置对象操作,结合实例形式分析了JavaScript类型显示转换、隐式转换、变量作用域、封闭函数及常用内置对象相关操作技巧,需要的朋友可以参考下
js内部类的扩展
风中找感觉
10-20 168
以前对js了解不多，只是做一些form的验证，最近深入研究了一下，发现js功能也是非常强大的。 我在此发表一下我最近研究发现的强大功能和各位分享一下，希望大家多多指点，共同进步。   js内部类方法的扩展： Number是js的默认对象，Number并没有add()方法。如果想让此对象拥有add()方法，只能在此对象上进行扩展，我感觉这方面js做的非常好。 Number.prototyp...
前端开发总结：JavaScript（内置类型）
qq_22764591的博客
08-23 305
javascript中的七大内置类型 在javascript中存在七种内置类型，其中6中是es5的，在es6中被新增加了一个symbol。 空值（null） 未定义（undefined） 字符串（string） 数值（number） 对象（object） 布尔（boolean） 符号(symbol) 1. null 一个单值数据类型，只有一个值null,从逻辑上说，它属于一个空值对...
JS内置数据类型
qq_35989226的博客
05-28 702
JS中有六大数据类型，其中包括五中基本数据类型和一种引用数据类型。 基本数据类型：Number、String、Boolean、Null、Undefined 引用数据类型：Object Number ECMA-262 中定义的最特殊的类型是 Number 类型。这种类型既可以表示 32 位的整数，还可以表示 64 位的浮点数。 <!--通过new关键字创建number...
内部类和外部类之间互相访问
wangkjs的博客
08-11 3248
内部类与外部类之间的成员互相访问  内部类可以访问外部类的任何成员，包括private成员。  外部类访问内部类的成员需要创建内部类的对象，之后可以访问内部类的任何成员，包括private成员，需要注意的是成员内部类不可以有静态成员。  当外部类的成员和内部类的成员重名时单单用this是区分不了的。在内部类中访问外部类的成员时可以用如下语法区分  .this.; 1、普通内部类 pac
四种内部类，（Inner Class）
请叫我王老魔
03-03 1085
内部类： 定义在内部的类，不一定非得是定义在类的内部， 可以分为4种类型。 第一： 静态内部类（定义在类中） 静态的内部类与其外部类是编译成 两个.class文件 的，注意的是外部类是不可以定义为静态的。 为什么外部的类不可以定义为静态的 解释：静态类是没有实际意义的，而且运行初始化还要占用大量内存，而且假如有静态类，不能被重写，不能创建对象，没啥实际意义。 备注：其实只需要定义静态
JS的内置类型（基本类型+引用类型）
lynn_rose的博客
02-25 890
JS的内置类型（基本类型+引用类型）基本类型知识拓展：1、number2、string3、boolean4、null5、undefined6、symbol引用类型1、object 基本类型 对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型 知识拓展： 字面量： let str1 = 'this is a string'; let num1 = ...
JS所有内置对象属性和方法汇总
weixin_34220623的博客
10-08 266
对象什么的，程序员可是有很多呢... JS三大对象 对象，是任何一个开发者都无法绕开和逃避的话题，她似乎有些深不可测，但如此伟大和巧妙的存在，一定值得你去摸索、发现、征服。 我们都知道，JavaScript有3大对象，分别是本地对象、内置对象和宿主对象。 在此引用ECMA-262（ECMAScript的制定标准）对于他们的定义： 本地...
js的内部类
weixin_30892889的博客
10-10 153
JavaScript中本身提供一些，可以直接使用的类，这种类就是内部类。主要有： Object/Array/Math/Boolean/String/RegExp/Date/Number共8个内部类。 内部类的分类： 从使用方式，把js内部类分为两类（动态类，静态类）。 静态类 使用 类名.属性|方法 比如Math 动态类 使用 var 对象=new 动态类() 对象.属性...
JavaScript内部类和系统函数
My heart will go on
05-30 598
Js的内部类----可以直接使用的类Object/Array/Math/Date/Number/String/RegExp/Boolean*根据使用方法分类：静态类 使用 类名.属性/方法       如Math    window.alert(Math.abs(-12));   //返回绝对值动态类 使用 var 对象=new 动态类();        如Date:    var nowdat...
JS 的内置类型
Moking的博客
02-21 457
JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。 基本类型: null , undefined , boolean , number , string , symbol 。 对象: [] , {} 等 判断类型的方法 typeof 操作符返回一个字符串，表示未经计算的操作数的类型。 // 数值 typeof 37 === 'number'; ...
JavaScript内置类常见操作和高级函数
m0_67302441的博客
05-25 137
JavaScript内置类 1.原始类型的调用方法 原始类型的属性? var name = "Hello World" console.log(name.length) console.log(name.split(" ")) var num = 2.54432 num = num.toFixed(2) JS的原始类型并非是对象类型，没办法获取属性或者调用方法。 但是JS为了让基本数据类型获取属性和调用方法，对其等装了对应的包装类型。 自动创建对象 new string，但是这些操作是不可见的。 常见
javascript内置对象
最新发布
10-07
其他常见的JavaScript内置对象还包括： - Boolean：布尔对象，用于处理布尔值。 - Number：数字对象，用于处理数字。 - Object：对象对象，是JavaScript中所有对象的基类。 - RegExp：正则表达式对象，用于处理正则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值