JS 数据类型

冷兔ex发布
203 阅读8分钟

1. JS数据类型概述

  • JS语言的每一个值，都属于七种类型之一。概括为四基两空一对象：其中六种为简单类型：数值number、字符串string、布尔bool、符号symbol、空undefined、空null，还有1种为复杂类型：对象object。可以简记为：数字不服，两空房一对象
  • bigint类型是2020年6月新增的

1.1 数值number：

JS采用64位浮点数存储一个number，整数和小数

数字特殊值：正0，负0，无穷大，无法表示的数字NaN(not a number)超出已知范围内的表示

  • 与数值相关的全局方法
  • parseInt方法用于将字符串转为整数 parseInt('123')
  • parseFloat方法用于将一个字符串转为浮点数
  • isNaN方法可以用来判断一个值是否为NaN
  • isFinite方法返回一个布尔值，表示某个值是否为正常的数值
  • 数值转换为字符串
var n = 1
String(n)  //方法一：String()函数，结果为"1"
n + ''     //方法二：n + 空字符串，结果为"1"

1.2 字符串string：

每个字符两个字节，文本（比如Hello World）

  • 字符串的写法：

单引号 '你好'
双引号 "你好"
反引号 你好 //tab键上面的符号

注意：引号不属于字符串的部分，反引号用来写多行字符串，例如：

let s=`这样是
可以的
用反引号很容易做到`
  • 字符串中的用法：

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符，也就是用另一种写法表示想要的东西：

\n ：换行符
\r ：回车键
\\ ：表示
'it's ok' 正确写法为：it后面加个反斜杠\

"it's ok" 双引号里面写单引号，或反引号里面写单引号

  • 字符串的长度:string.length
'123'.length     //3
'\n\r\t'.length  //3
''.length        //0  空字符串
' '.length       //1  空格字符串
  • 字符串的属性：

JS中只有对象才有属性，数字、布尔、字符串都没有属性的，是一个特殊情况。

  • 用下标读取字符：string[index]
var s = 'abcdefg'
s.length    //7
s[0]        //a
s[6]        //g
  • 字符串转为数值：
var s = '123'
Number(s)    //方法一：Number()函数，结果为数值123
s - 0       //方法二：s - 0    结果为数值123
+s          //方法三：+s       结果为数值123
  • 其他数据类型转为字符串：
xx.toString()  
1.toString()  //出bug，应改写为(1).toString或1..toString()或1 .toString()
  • Base64位转码
window.atob('xxxxx')  //可把Base64编码的字符串转为原字符串
window.btoa('xxxxx')  //可把字符串转为Base64编码的字符串

1.3 布尔bool：

布尔值用于程序流程的控制，表示真伪的两个特殊值，即true（真）和false（假）

下列运算符会返回布尔值：

  • 前置逻辑运算符： ! (Not)
  • 相等运算符：===，!==，==，!=
  • 比较运算符：>，>=，<，<=
  • if配bool

if语句常需要判断真假：

if(value){...}else{...}
  • 如果value是布尔值还好说，若不是布尔值，怎么判断真假呢?
  • 记住下面六个false特例就可以(falsy就是相当于false但又不是false的值)，除此以外都是真值true：

undefined
null
0
NaN
""或''（空字符串）
false

空数组（[]）和空对象（{}）对应的布尔值，都是true。

  • 其他数据类型转布尔值：
Boolean(1)
!!1  //结果为true，!取反，!!取反再取反，取原始布尔值
!!0  //结果为false

1.4 符号Symbol：

1.5 空undefined：

  • 一个变量声明了，但没有赋值，默认值就是undefined表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值。转为数值时为NaN
  • 如果一个函数，没有写return，那么默认return undefined
  • 习惯非对象的空值写为undefined，把对象的空值写为null

1.6 空null：

表示空值，即此处的值为空，转为数值时为0

1.7 对象object：

合成类型(complex type)的值，由多个原始类型的值的合成，也称为存放各种值的容器，各种值组成的集合

对象object可分为三个子类型：

  • 狭义的对象（object）
  • 数组（array）
  • 函数（function）：处理数据的方法

2. 如何判断一个数据的类型？

有三种方法判断类型：

  • typeof运算符
  • instanceof运算符 (可以区分数组和对象)
  • Object.prototype.toString方法
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"

function f() {}
typeof f
// "function"

typeof undefined
// "undefined"

if (typeof v === "undefined") {
  // ...
}                  //用在判断语句

typeof window // "object"
typeof {} // "object"
typeof [] // "object"空数组  

typeof null // "object"  ，比较特殊

3. JS对象object

3.1 JS对象定义

就是花括号定义的无序的数据集合，也称为键值对（key-value）的集合，键与值之间用冒号分隔，如果对象内部包含多个键值对，每个键值对之间用逗号分隔，最后一个键值对末尾不用加逗号。大括号末尾要使用分号表示对象定义结束。

let obj = new Object({'name': 'frank'})   //正规写法
let obj = {'name': 'frank','age': 18}     //简单写法
console.log({'name':'frank','age':18})    //对象没有名字

可以理解为：一个对象的创建都是new出来的，但是写起来麻烦，所以就用缩写形式。

3.2 键名(数据类型：字符串/Symbol)

键名key，也叫属性(property)。引号可以省略，但是，如果属性不符合标识符的条件(比如第一个字符为数字，或者含有空格或运算符)，则必须加上引号。

var obj = {
‘1p’: “Hello World”,
‘h w’: “Hello World”,
‘p+q’: “Hello World”
};
  • 奇怪的键名(属性名)
let obj={
  1:'a',
  3.2:'b',
  1e2:true,
  1e-2:true,
  .234:true,
  0xFF:true  //十六进制数
};
Object.keys(obj)    //API可以得到对象obj的所有key
=>["1","3.2","100","0.01","0.234","255"]
  • 变量做属性名
let a = 'xxx'
var obj = {
    'a': 1111    //a是字符串
}
obj      //{a:1111}
---------------
let a = 'xxx'
var obj = {
    [a]: 1111    //a是变量,求值，ES6新语法
}
obj       //{xxx:1111}

3.3 键值(数据类型：任意)

键值是属性所对应的具体的值。如果一个属性的值(ability)为函数，通常把这个属性称为“方法”。它可以像函数那样调用这个属性。

3.4 隐藏属性

JS中每一个对象都有一个隐藏属性；

这个隐藏属性储存着其共有属性组成的对象的地址(原型的地址)；

这个共有属性组成的对象叫做原型；

var obj ={}
obj.toString()   //不报错
//因为obj的隐藏属性对应的对象上有toString()

3.5 对象的引用

如果不同的变量名指向同一个对象，那么它们都称为这个对象的引用。 也就是说这些变量共同指向同一个内存地址，修改其中一个变量所指向的值，都会影响到其他所有变量所指向的值。

3.6 原型

  • 每个对象都有原型，原型里存着对象的共有属性；

比如obj的原型就是一个对象；

obj.__proto__存着这个对象的地址；

这个对象里有 toString、constructor、valueOf等属性；

  • 对象的原型也是对象

所有对象的原型也有原型

这个原型包含所有对象的共有属性，是对象的根

这个原型也有原型，是null

4. 对象属性的操作

var obj = {name:'frank',age:18}

4.1 属性的读取

1)查某一个属性：

obj['name']   //结果为'frank'  方括号运算符，推荐使用，需加引号
obj.name      //结果为'frank'  点运算符，name是字符串
//注意区别：obj[name] 这里的name是变量

2)同时查看属性名和属性值：

Object.entries(obj)

1.png

3)查自身所有属性：

Object.keys(obj)

2.png

4)查自身+共有属性：

console.dir(obj)

3.png

5)查属性值：

Object.values(obj)

4.png

6)查隐藏属性:

obj.__proto__

5.png

7)确认是否为其自有属性：

obj.hasOwnProperty('name')    //结果为true

4.2 属性的删除：delete

1）删除属性名和属性值：

delete obj.xxx   //xxx为属性名

2）只删除属性值：

obj.name = undefined

3）验证删除是否成功：

'xxx' in obj //false
obj.hasOwnProperty('xxx') //false

举例如下：

var obj ={name:'frank',age: 18}
obj.name = undefined  只删除属性值
obj
{name: undefined, age: 18}
obj.name ='frank'  添加回属性值
'frank'
obj
{name: 'frank', age: 18}  查看属性

delete obj.name  删除属性名及值
true
obj
{age: 18}

4.3 属性的赋值

1）直接赋值：

var obj = {name: 'frank'}
obj['name']='frank'
obj.name = 'frank'

2)批量赋值：

Object.assign(obj, {age:18, gender:'man'})  //ES6新API

3)一般不要修改原型，会引起很多问题:

window.Object.prototype===obj.__proto__

4.4 属性是否存在：in运算符

in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。

4.5 属性的遍历：for...in循环

for...in循环用来遍历一个对象的全部属性。

for...in循环有两个使用注意点。

  • 它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
  • 它不仅遍历对象自身的属性，还遍历继承的属性。

举例来说，对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

如果继承的属性是可遍历的，那么就会被for...in循环遍历到。但是，一般情况下，都是只想遍历对象自身的属性，所以使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。

5. 'name' in obj和obj.hasOwnProperty('name') 的区别

'name' in obj

查看name是否为obj的属性，但不能判定name属性是自己的还是原型上共有的属性

obj.hasOwnProperty('name')

验证name是不是它自身的属性 false //返回false，验证name是obj的自身的属性

  1. 参考

JS秘密花园 jirengu.com

avatar
文章
阅读
粉丝