JavaScript 数据类型(二)——八种数据类型总结

71 阅读6分钟

(五)Null

Null 类型也是只有一个值,即null。null表示一个空对象指针,因此使用 typeof 操作符检测 null 值时会返回"object"

let car = null;
console.log( typeof car ); // "object"

(六)Symbol

Symbol 是 ES6 中引入的新基本类型,表示独一无二的值。Symbol 值通过 Symbol() 函数生成。

let s = Symbol();
console.log(typeof s) // "symbol"

该函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,使得在控制台显示,或者转换为字符串进行判断时容易区分。

let s1 = Symbol('foo');
let s2 = Symbol('bar');

console.log(s1) // "Symbol(foo)"
console.log(s2) // "Symbol(bar)"

if ( s1.toString() === "Symbol(foo)" ) {
    // do something...
}

注意, Symbol() 函数的参数只有描述作用,即使两个 Symbol() 函数的参数相同 ,它们的返回值也是不相等的。

1. 实例:Symbol 值作为对象的属性名

因为每一个 Symbol 值都是不相等的,所以 Symbol 值可以用作唯一标识,用于对象的属性名,就能防止属性名的同名冲突。对于一个对象是由多个模块构成的情况下非常有用,避免某个 key 被改写或者覆盖。

let s = Symbol();

// 写法一
let a = {};
a[s] = 'Hello!';

// 写法二
let a = {
  [s]: 'Hello!'
};

console.log(a[s]); // "Hello!"

注意,Symbol 值作为对象属性名时,不能用点运算符,需要用中括号运算符。否则对象a的属性名s会被认为是一个字符串而不是一个 Symbol 值。

同理,在对象的内部使用 Symbol 值定义属性时,Symbol 值也必须放在方括号之中(参考以上代码写法二)。

2. 方法 Symbol.for(key)

该方法和Symbol()都能生成新的 Symbol,区别是前者会将这个Symbol 注册到全局 symbol 注册表,而后者不会。

Symbol.for() 调用不会直接生成新的 Symbol ,它会先从注册表中搜索给定的key是否存在。如果存在,那么返回的是同一个 Symbol,否则生成新的。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true

3. 方法 Symbol.keyFor(symbol)

该方法返回一个已注册的 Symbol 类型值的key。

// 创建一个 symbol 并注册,key 为 "foo"
let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

// 创建一个 symbol 但不注册,注册表中找不到该symbol 的 key
let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

(七)BigInt

BigInt是 ES 2020 新增的基本类型,能够表示任意长度的整数,突破了Number类型的大小限制问题。

要定义一个 BigInt ,可以在整数字面量加上n的后缀,或者调用BigInt()函数。

let b1 = 10n;
let b2 = 9007199254740991n;
let b3 = BigInt(Number.MAX_SAFE_INTEGER); 
let b4 = BigInt(Number.MIN_SAFE_INTEGER);
let b5 = BigInt("0x1fffffffffffff");

console.log(b1); // 10n
console.log(b2); // 9007199254740991n
console.log(b3); // 9007199254740991n
console.log(b4); // -9007199254740991n
console.log(b5); // 9007199254740991n

上面例子中的 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 表示最大和最小安全整数,如果是Number 类型数值超过此范围都可能会失去精度。

console.log(9999999999999999) // 10000000000000000

1. 运算

BigInt 支持除单目+运算符以外的算数运算符。

console.log(10n + 10n); // 20n
console.log(11n - 10n); // 1n
console.log(2n * 10n); // 20n
console.log(110n / 10n); // 11n
console.log(10n ** 3n); // 1000n
console.log(101n % 10n); // 1n

console.log(-10n); // -10n
console.log(+10n); // 报错

BigInt 运算结果如果有小数则会被向下取整。

console.log(5n / 2n); // 2n, 而非2.5n

2. 注意点

BigInt 虽然在一些方面类似 Number,但也有一些需要注意的地方:

  • 不能用 Math 对象中的方法。
  • 不能和 Number 类型数值进行混合算术运算,必须转换成同一类型。
  • 虽然 BigInt 不能和 Number 直接进行算术运算,但使用比较运算符(==、<、>等等)直接比较是允许的。
  • BigInt 转换为 Number 可能会丢失精度。

(八)Object

对象是一组数据和方法的无序集合,所有实例的基础是Object 类型。

1. 创建对象

可以通过创建 Object 实例来创建自己的对象,方式有两种,第一种是使用 new 操作符和 Object 构造函数:

let person = new Object(); // 创建了一个空对象
person.name = "小明"; // 往对象中添加属性
person.age = 20;

第二种方式是使用对象字面量表示法,能够简化对包含大量属性的对象的创建,看起来也更加一目了然:

let person = {
	name: "小明",
	age: 20
};

以上两种方式是等效的,但是要注意,在使用对象字面量的方式定义对象时,并不会实际调用 Object 构造函数。另外,对象字面量法中,对象属性名也可以用字符串或者数值,若是数值属性则会自动转换为字符串。

let person = { 
"name": "小明", 
"age": 20, 
5: true 
};

2. 对象属性存取

对象的属性一般是通过点语法来进行存取,但是也可以用中括号来存取属性。使用中括号时,要在中括号内使用属性名的字符串形式,例如:

console.log(person.name); // "小明"
console.log(person["name"]); // "小明"

通常,点语法是首选的存取方式,必须使用中括号语法的情况有:

  • 需要通过变量来访问属性。
  • 属性名中包含可能会导致语法错误的字符,例如关键字/保留字、空格等。
  • 属性名是数值
let propertyName = "name";
console.log(person[propertyName]); // "小明"

person["my name"] = "小明";

person[5] = false;

3. 拓展

对象大致可分为三类:

  • 内置对象:由 ECMAScript 定义的对象,例如Array、Math、Date。
  • 自定义对象:通过构造函数或者字面量创建的对象。
  • 宿主对象:由执行环境提供的对象,例如浏览器环境的DOM和BOM中的对象

Object 的每个实例都具有以下属性和方法:

  • constructor:指向构造函数。
  • hasOwnProperty(propertyName):检查某个属性是否在当前对象实例中(而不是在实例的原型中)。参数必须为字符串形式。
  • isPrototypeOf(object):用于检查调用对象是否是传入对象的原型。
  • propertyIsEnumerable(propertyName):用于检查某个属性是否能够使用 for-in 语句来枚举。参数必须为字符串形式。
  • toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应。JavaScript 的一些内置对象都重写了该函数,以实现更适合自身的功能需要。
  • toString():返回对象的字符串表示。
  • valueOf():返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

ECMAScript 中对象的行为不一定适用于 JavaScript 中的其他对象。 例如宿主对象不是由 ECMAscript 定义的,因此宿主对象不一定会继承 Object。

文章来源:JavaScript 数据类型——八种数据类型总结_js数据类型-CSDN博客

- END -

感谢你花费宝贵的时间阅读本文,如果觉得这篇文章对你有用,也欢迎你点赞和留下你的评论哦。