JavaScript系列之一 (数据结构)

本文深入讲解JavaScript中的数据类型,包括基本类型如Null、Undefined、Number、String、Boolean,以及引用类型如Array、Object等。同时介绍了类型转换、ES6新增特性及数组、字符串、对象的API方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript数据类型

JavaScript数据类型分类

JavaScript数据类型分为基本类型和引用类型
基本类型:null, undefined, number, string, boolean, symbol(ES6)
引用类型: Array, Object, Function, Error, RegExp, Date

Javascript对象分类
本地对象:String, Number, Boolean, Array, Object, Function, Date, RegExp…
内置对象:Math, JSON, Global

基本类型

Null类型

Null 类型表示‘ 无 ’的意思,经常在面试中问到, 不能通过typeof判断它为基本类型, 转换为数值类型为0

typeof null    //结果为Object
Number(null)   //结果为 0

Undefined类型

表示变量未初始化,它本来有值的,只是未初始化,转换为数值为 NaN

let a;
Number(a);  	//结果为NaN

Number 类型

1、number 类型是基本类型, 但也有自己的构造函数Number,可以通过 new 运算符创建自己的实例
2、NaN表示不是数字的数值类型,通过 typeof判断为 “number"类型,但他表示无的意思,可以通过Number.isNaN和数值区别开来
Number常用API

toString();		//把数字转换为字符串,使用本地数字格式顺序。
toLocaleString();
toFixed();    //把数字转换为字符串,结果的小数点后有指定位数的数字。
valueOf()	//返回一个 Number 对象的基本数字值。
比如:eg1
let num = new Number(222)
typeof num		//结果为   "object"类型
let num1 = num.valueOf()  //得到Number对象的基本类型
typeof(num1)	//结果为   "number"类型

eg2
let str = '22sss';
Number(str)  // NaN
Number.isNaN(str)  // true

eg3
let result = 0.1 + 0.2 		// 0.30000000000000004
result.toFixed(2)			// "0.30"

ES6数值Number的扩展

Number.isFinite();
Number.isNaN();
Number.parseInt();
Number.parseFloat();
Number.isInteger()

String 类型

string 类型是基本类型, 也有自己的构造函数String,可以通过 new 运算符创建自己的实例

  1. 新增了模板字符串 ``
    String类型API
常用API:

indexOf()	检索字符串。
lastIndexOf()	从后向前搜索字符串。
slice()	提取字符串的片断,并在新的字符串中返回被提取的部分。
charAt()	返回在指定位置的字符。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。

用来正则匹配API
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。

不怎么常用,可以为以后业务需求作参考
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
italics()	使用斜体显示字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
small()	使用小字号来显示字符串。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
sup()	把字符串显示为上标。

ES6字符串扩展方法

includes(), 
startsWith(), endsWith() //以什么开始或结束, 返回boolean
repeat()
padStart('content', num)//content填充的内容, num填充多少位
padEnd()    //填充字符串,使用场景 比如时间格式 2018-09-08 填充2位

代码示范:
let url = 'www.baidu.com'
url.includes('baidu')	//true
url.startsWith('www')	//true
url.endsWith('www')		//false
url.repeat(3)   //"www.baidu.comwww.baidu.comwww.baidu.com"
(1).toString().padStart(2, 0)  // '01' 

Boolean类型

boolean 类型是基本类型, 但也有自己的构造函数boolean,可以通过 new 运算符创建自己的实例
Boolean常用来判断

null, undefined, 0, -0, +0, 空字符串, false, NaN 都会转换为 false

类型转换

显示类型转换

Number, parseInt(), parseFloat(), 一目运算符 加号 ‘+’ 和 减号 ‘-

隐式转换

if条件表达式
== 等于号

image

引用类型

Array类型

concat()	连接两个或更多的数组,并返回结果。
join()	把数组转换为字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素,并返回新的长度。
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或更多元素,并返回新的长度。
reverse()	颠倒数组中元素的顺序。
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素,并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串,并返回结果。
toLocaleString()	把数组转换为本地数组,并返回结果。
valueOf()	返回数组对象的原始值

ES6数组的扩展

扩展运算符
Array.from()  //将多个伪数组转换为数组,可以调用数组API
Array.of()	  //将多个项转换为数组
copyWithin()	//在数组内复制
find()findIndex()  //接收一个回调函数,返回找到的第一个项的值或下标
fill() 填充数组
entries(),keys()values() //结合for of 遍历
includes()  //返回booean
flat(),flatMap() //数组降维

数组迭代的API

reduce(); //汇总
map();  //映射,返回一个新数组
filter(); //过滤数组,返回一个新数组
forEach(); //遍历数组
some();  //只要满足一个条件, 返回true
every();  //满足所有条件,返回true, 否则返回false

代码示范;
let arr = [2,4,6,8,10];
arr.map(item=>item*2)  //[4, 8, 12, 16, 20]
arr.reduce((pre,next, index,arr)=>{return pre+next})  //30
arr.forEach(item=>{console.log(item)})
//2
//4
//6
//8
//10
arr.filter(item=>item>4)  //[6, 8, 10]
arr.some(item=>item>4)		//true
arr.every(item=>item>4)		//false

Object数据类型

ES5中的方法

Object对象的静态方法

let obj = {name: '张三', sex: '男', age: 33};
1. Object.keys() 与 Object.getOwnPropertyNames();  
//同:返回的是对象键的数组 异:Object.getOwnPropertyNames()会遍历原型对象的属性
Object.keys(obj)    //["name", "sex", "age"] 
2. Object.getOwnPropertyDescriptors( obj, prop) //获得对象的描述
{
configurable: '',
enumerable: '',
writable: '',
value: ''
}
3.Object.defineProperty(obj, prop, {}) 和 Object.defineProperties(obj, prop, {}) //定义对象的属性
4.控制对象状态的方法

  a).Object.preventExtensions() 防止对象扩展

  b).Object.isExtensible() 判断对象是否可扩展

  c).Object.seal() 禁止对象配置

  d).Object.isSealed() 判断一个对象是否可配置

  e).Object.freeze() 冻结一个对象

  f).Object.isFrozen() 判断一个对象是否被冻结
5.原型链相关方法

  a).Object.creat() 可以指定原型对象和属性,返回一个新的对象

  b).Object.getPrototypeOf() 获取对的的Prototype对象

除了Object对象本身的方法,还有不少方法是部署在Object.prototype对象上的,所有Object的实例对象都继承了这些方法。Object实例对象的方法,主要有以下六个。(此句摘自 --阮一峰 博客)

a). valueOf()返回当前对象对应的值

b). toString()返回当前对象对应的字符串形式,用来判断一个值的类型

c). toLocaleString()返回当前对象对应的本地字符串形式

d). hasOwnProperty()判断某个属性是否为当前对象自身的属性,还是继承自原型对象的属性

e). isPrototypeOf()判断当前对象是否为另一个对象的原型

f). propertyIsEnumerable()判断某个属性是否可枚举

ES6对象的新增方法
1. 属性和方法可以简写
let name = '李四';
{ name: name} => {name}
getName: function() {console.log(this.name)}; 等价于 getName(){console.log(this.name)}
3. 
Object.is() //它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致
4. Object.assign() //实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
5. Object.getOwnPropertyDescriptors()  //可以获取该属性的描述对象
//目前,有四个操作会忽略enumerable为false的属性。

    for...in循环:只遍历对象自身的和继承的可枚举的属性。

    Object.keys():返回对象自身的所有可枚举的属性的键名。

    JSON.stringify():只串行化对象自身的可枚举的属性。

    Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。

  ES6 规定,所有 Class 的原型的方法都是不可枚举的。
6. __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
Object.keys(),Object.values(),Object.entries()
Object.fromEntries()
7. super 关键字

8.Object.keys(),Object.values(),Object.entries()
9. 对象的扩展运算符

  a). 解构赋值

  b). 扩展运算符

10.Null 传导运算符

属性的遍历一共有5种:

for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举
参考文档:
W3CSchool
https://www.cnblogs.com/z-dl/p/8204023.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值