JavaScript基础数据结构
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
运算符创建自己的实例
- 新增了模板字符串 ``
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条件表达式
== 等于号
引用类型
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