数据类型

186 阅读9分钟

一、基本数据类型

string 字符串

  • string.lenght 返回字符串长度
  • concat(val1,val2) 连接字符串
  • indexOf(substring) 检索字符串的子串,返回index
  • substr(start,lenght) 抽取从index开始到lenght长度的子串
  • substring(startIndex,endIndex) 抽取从index开始到index结束的子串
  • charAt(index) 抽取index位置的子串
  • slice(start,end) 抽取从index开始到end结束的子串
  • toLowerCase() 将字符串转为小写
  • toUpperCase() 将字符串转为大写
  • trim() 去除字符串两边空格
  • trimLeft()/trimRight() 去除字符串左/右边空格
  • localeCompare(target) 用本地特定顺序来比较两个字符串
  • replace(regexp,newSubstr) 替换一个与正则表达式匹配的子串
  • split() 将字符串分割成字符串
//  字符串中的转义符
\n 换行
\t 制表,也是空格作用 
\b 是空格 
\\ 是斜杠
\' 是单引号
\" 是双引号

Number 数字类型 (整数/浮点数)

创建方式 new Number()

属性

  • Number.POSITIVE_INFINITY Infinity 正无穷大
  • Number.NEGATIVE_INFINITY -Infinity 负无穷大
  • 最大值 Number.MAX_VALU 1.7976931348623157e+308
  • 最小值 Number.MIN_VALUE 5e-324

方法

  • parseInt() 将其他串类型的值转换成Number整数,舍弃小数,不是整数也会舍弃掉.
parseInt("12ddg") // 12
parseInt(0.9) // 0 
  • parseFloat() 将其他类型装换为Number浮点数,即小数.
parseFloat("20.52346") // 20.52346
  • isNaN() 是否是非数字, 是非数字返回true,是数字返回false.
  • isInteger() 是否是整数,是true,否false
  • toString() 是否把数字转为字符串
  • Number() 数值转换
参数类型
string  
    字符串都是数字的话转为十进制数字;
    字符串有非数字放回NaN;
    如果前缀0x数字,表示十六进制;
    空字符转返回0.
    
null   返回0
undefined   返回NaN

boolean 
    true 返回1
    false 返回0
  • Number.toFixed(n) 保留小点数的n位数,且转为字符串
2.1023.toFixed(3)** // 保留3个小数点 2.102

Null 空对象

指向一个空对象,表示没有引用任何对象

null == undefined // true
null === undefined // false

注意点:虽然null是基本数据类型,但是检测数据类型会显示object, 这是一个存在很久的bug

console.log(typeof null) // object 

//解决
Object.prototype.toString.call(null) == '[object Null]'  // true

undefined

定义了变量,但是没有赋值

Boolean

falsetrue
stringBoolean("")Boolean('任意string')
number0/NaN非0
objectnull任何对象
undefinedundefined

Symbol

Symbol 是es6引入的心的基本数据类型,表示独一无二的值;

  1. 当对象的属性名为Symbol类型,表示属性名的唯一性,避免和其他属性名重复冲突
  2. 需要注意,Symbol是原始类型的值,不是对象,故不需要通过new
  • 通过Symbol()函数生成,接受一个字符串参数,表示对Symbol实例的描述,用于区分
const sym = Symbol('Symbol实例的描述')
console.log(sym,typeof sym) // Symbol(Symbol实例的描述) "symbol"
  • 因为Symbol的唯一性,Symbol()与Symbol()之前哪怕参数相同,也是不相等的
console.log(Symbol('1') === Symbol('1')) // false 唯一性,故参数相同情况是不相等的
  • es2019版本提供description 属性 返回Symbol的描述
console.log(sym.description) // Symbol实例的描述 
  • 设置变量的属性名为Symbol,能防止此键被不小心改写或覆盖
  • 对象的属性名为Symbol时,调用不可使用点运算符引用,需要通过obj[key]
let fun = Symbol()
let symObj = { 
    [sym]:'value' , // 设置变量的属性名为Symbol,能防止此键被不小心改写或覆盖
    sym:'普通value',
    [fun](a,b){ // 设置方法的属性名为Symbol  [fun]:function(a,b)
       return a+b
    }
}
console.log(symObj) // {sym: "普通value", Symbol(Symbol实例的描述): "value", Symbol:ƒ}
console.log(symObj[sym]) // value  	// 不可用点运算符
console.log(symObj.sym)	 // 普通value
console.log(symObj[fun](1,2)) // 3
  • Symbol 值作为属性名时, for...infor...ofObject.keys()Object.getOwnPropertyNames()JSON.stringify() 都不会返回symbol成员
  • Object.getOwnPropertySymbols 获取对象中为Symbol类型的属性名,返回数组
console.log(Object.getOwnPropertySymbols(symObj)) //  [Symbol(Symbol实例的描述), Symbol()]

BigInt

大整数,只表示整数,没有位数限制,为了和nmber区分,BigInt必须添加n后缀

二、引用数据类型

Object

属性

  • object.lenght
  • object.prototype 指向object函数的原型对象

方法

target -- 目标对象
sources -- 源对象
返回目标对象

 let obj1 = {name: '123'};
 let obj2 = {age:18,}
 Object.assign(obj1,obj2); // {name: "123", age: 18,}
  • Object.keys(obj) 返回所有key组成的数组
  • Object.values(obj) 返回所有value组成的数组
  • key in object 检测object中是否有指定的key值
let obj = { one:'1' , two:'2'}
console.log("one" in obj) // true

Array

属性

  • Array.lenght 数组长度
  • Array.prototype

方法

  • for(let i of arr){} 数组的遍历
  • Array.join(separator) 将数组元素转为string,默认用分隔符进行分隔,或者自定义separator分隔
  • Array.concat() 连接两个或者更多的数字,并且返回数组
['one','two'].concat(['three'],['four']) // ["one", "two", "three", "four"]
  • Array.from() 将类数组对象转为数组
let setarr = new Set([1,1,'one','one'])
Array.from(setarr) // 去重
[...setarr] // 去重

...展开运算符
[...['one','two'],...['three'],...["four"]]  // ["one", "two", "three", "four"]
  • Array.includes() 判断一个数组是否包含一个指定的值
  • Array.push() 向数组末尾添加元素,返回数组长度
  • Array.unshift() 向数组头部添加元素,返回数组长度
  • Array.pop() 移除数组最后一个元素,返回删除的元素
  • Array.shift() 移除数组第一个元素,返回删除的元素
  • Array.slice(start,end) 截取数组,放回截取的数组,不会影响原数组
  • Array.splice(start,deletCount,items) 数组剪接,增删改
  • Array.reverse() 翻转数组,返回翻转结果
  • Array.sort() 对数组的元素进行排序,按(数字/字母)进行升/降序
sort() 默认按照字符串升序排序
    [11,2,1].sort() // [1, 11, 2] 
自定义升降序
[11,2,1].sort((param1,param2)=>{
  // return  param1 - param2 // 升序
   return  param2 - param1 // 降序
})
  • Array.isArray() 判断对象是否是一个数组
  • Array.reduce() 迭代所有的元素最终返回一个值
  • Array.forEach() 数组每个元素都执行一次回调
  • Array.map() 数组映射,符合条件的数据通过return赋值
  • Array.indexOf() 搜索数组的元素,返回下标
  • Array.lastIndeOf() 从末尾开始搜索数组的元素,返回下标
  • Array.filter() 数组过滤
  • Array.flat() 数组拉平(一层)
  • Array.flatMap() 数组拉平(多层)
[1,2,[3,4]].flat()
[1,2,[3,[4,5]]].flatMap()
  • Array.reduce(callback(accumulator, currentValue, currentIndex, arr),initialValue)
accumulator 累计器
currentValue 当前值
currentIndex 当前索引
arr 数组
initialValue 如果没有提供此参数,accumulator取值数组第一个元素,currentValue取值第二个数组
                    如果提供此参数,accumulator取值initialValue,currentValue取值第一个数组
let arr = [1,4,5]
let arr2 = arr.reduce((accumulator,value,index)=>{
    return accumulator + value
}) // 如果为},2) one为12
console.log(arr2) // 10

Function

  • 无参函数 function 方法名(){}
  • 有参函数 function 方法名(参数){}
  • 带返回值函数 function 方法名(){ return 返回值 }
  • 匿名函数 (function(){})
匿名函数的定义方式
    事件驱动 window.onclick = function (){}
    使用变量 var fun = function(){}
    创建后立即调用 ( function(){}() )
  • 箭头函数 ()=>{}

return的作用:退出当前函数,并且从函数重返回一个值.

Date 日期数据类型

  • getFullYear() 获取年份
  • getMonth() 获取月份(0-11) 故需要+1
  • getDate() 获取月份中的某一天(1-31)
  • getHours() 获取小时(0-23)
  • getMinutes() 获取分钟(0-59)
  • getSeconds() 获取秒(0-59)
  • getDay() 获取一周中的某一天
  • getMilliseconds() 获取毫秒(0-999)
  • getTime() 获取1970/1/1到至今的毫秒数
  • get 改为set 设置

RegExp正则表达式

1.修饰符 可以在全局搜索中不区分大小写

修饰符
i执行对大小写不敏感的匹配
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
m执行多行匹配

2.表达式模式

  • 方括号[] 用于查找某个范围内的字符
[abc]查找方括号之间的任何字符
[abc]查找0-9的数字
[A-Z]查找26个大写英文字母
[A-Za-z0-9]查找数字和26个大小英文字母

(x|y) 查找任何以|分隔的选项

  • 元字符
^匹配字符串的开始(在集合字符里[^a]表示非(不匹配)的意思
$匹配字符串的结束
.匹配除换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
  • 反义字符
\W匹配任意不是字母,数字,下划线,汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了x以外的任意字符
[^abi]匹配除了abi 这几个字母以外的任意字符
  • 量词
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次
实例
\d* 匹配重复0次或者多次数字 (可能为空或者任意数字)
\d? 可能为空或者任意一个数字
\d{4} 匹配重复8次数字,比如1234
\d{4,} 匹配至少4次数字
  • 转义符

在实际开发中,如果遇到比配元字符的情况,像 . * \

则需要通过\进行转换为\. \* \\

  • 字符分枝

多用于满足不同情况的选择,用“|”将不同的条件分割开来

比如有的电话区号是3位数,有的4位数
\d{3}-\d{8}|\d{4}-\d{8}
xxx-xxxxxxxx
xxxx-xxxxxxxx
  • 贪婪匹配

贪婪匹配:正则表达式中包含重复的限定符时,通常的行为是匹配尽可能多的字符。

先匹配整个字串,然后一个个回退,直到找到匹配为止,最耗资源

  • 懒惰匹配

匹配尽可能少的字符

*?重复任意次,但尽可能少重复
+?重复1次或更多次,但尽可能少重复
??重复0次或1次,但尽可能少重复
{n,m}?重复n到m次,但尽可能少重复
{n,}?重复n次以上,但尽可能少重复

3.RegExp对象

创建RegExp对象 new RegExp(pattern,modifiers)

pattern 是一个字符串,正则表达式的模式

modifiers 修饰符 用于指定全局匹配、区分大小写的匹配和多行匹配

三、数据类型检测

typeof() 检测数据类型

Array.isArray() 检测是否为数组

Array和Object通过typeof()检测出来都会是object类型,可通过此法进行区分

Array.isArray([]) // true
Array.isArray({}) // false

constructor

[].constructor == Array 
{}.constructor == Object
new Date().constructor == Date

instanceof

console.log([] instanceof Array,[] instanceof Object); // true true
console.log({} instanceof Array,{} instanceof Object); // false true 

{} instanceof Array // 如果为false 则数据为object,否则为array

Object.prototype.toString.call() 判断一个对象类型的最好的办法

Object.prototype.toString.call([]) // [object Array]
Object.prototype.toString.call({}) // [object Object]
Object.prototype.toString.call(new Date()) // [object Date]

// null有个bug,检测会是object类型,可通过此法进行检测区分
Object.prototype.toString.call(null) == '[object Null]'  // true