집 > 기사 > 웹 프론트엔드 > es6의 새로운 js 기본 데이터 유형은 무엇입니까?

es6의 새로운 js 기본 데이터 유형은 무엇입니까?

青灯夜游원래의: 2022-10-17 17:52:092804검색

es6의 새로운 기본 데이터 유형: 1. 고유 값을 나타내는 기호 유형, 즉 기호 인스턴스는 고유 표시로 사용된 다음 비문자열로 사용되기 때문에 생성됩니다. 양식 객체 속성은 객체 속성이 고유 식별자를 사용하고 속성 충돌의 위험이 없음을 보장합니다. 2. BigInt 유형은 주로 "2^53-1"보다 큰 정수를 표현하기 위해 모든 길이의 정수를 지원합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

基本数据类型 也称为原始数据类型，包括String、Number、Boolean、undefined、null、Symbol、BigInt，其中Symbol和BigIntES6의 새로운 기능입니다.

Symbol type

Symbol은 ECMAScript6에 도입된 새로운 데이터 유형으로 고유한 값을 나타냅니다. 기호는 기본 값(기본 데이터 유형)이며 기호 인스턴스는 고유하고 변경할 수 없습니다. 이는 개체 속성이 속성 충돌 위험 없이 고유 식별자를 사용하도록 보장하기 위해 고유하게 표시한 다음 문자열이 아닌 형식의 개체 속성으로 사용되기 때문에 생성됩니다.

ES6 이전에는 객체의 키가 문자열 형식만 가능했는데 이때 키 이름과 이름 충돌이 발생한다는 문제가 있었습니다. , 키 이름 역할을 하려면 고유한 값이 필요했습니다.

1. 개념

symbol은 기본 데이터 유형으로, 정적 속성과 정적 메서드를 갖는 기호 유형의 값을 반환합니다. 그러나 생성자가 아니므로 new Symbol()을 사용하여 생성할 수 없습니다.

let symbol = Symbol();
typeof symbol; // "symbol"

Symbol 객체 속성으로 사용될 때 객체 내부에 있을 때는 반드시 대괄호로 묶어야 합니다. 대괄호로 묶이지 않으면 문자열을 나타냅니다.

let s = Symbol();
let obj = {
  [s]: "Jack",
};
obj[s]; // "Jack"
obj.s; // undefined

그리고 이 속성의 값을 얻으려면 도트 연산자 뒤에 문자열 유형이 오기 때문에 도트 연산자를 사용할 수 없습니다.

Symbol 데이터 유형을 생성할 때 모두 Symbol()로 생성되는데, 인쇄하면 모두 Symbol()이므로 각 기호 유형 변수가 무엇을 의미하는지 구별하기가 어렵습니다. 따라서 Symbol 함수는 정의된 Symbol 유형 변수에 대한 설명을 나타내는 문자열 매개변수를 받을 수 있습니다.

let s1 = Symbol("a");
console.log(s1); // Symbol(a)
s1.toString(); // "Symbol(a)"

Symbol 유형이 객체 유형을 수신하면 내부 toString 메서드가 먼저 호출되어 이를 문자열로 변환한 다음 Symbol 값이 생성됩니다.

let arr = [1, 2, 3];
let s1 = Symbol(arr);
console.log(s1); // Symbol(1,2,3)
let obj = {
  toString: () => "abc",
};
let s2 = Symbol(obj);
console.log(s2); // Symbol(abc)

Symbol형 변수는 다른 변수와의 연산에 참여할 수 없으며 String형, Boolean형으로만 변환 가능합니다.

let s = Symbol();
console.log("1" + s); // TypeError: Cannot convert a Symbol value to a string
s.toString(); // "Symbol()"
Boolean(s); // true
Number(s); // TypeError: Cannot convert a Symbol value to a number

2, Symbol.prototype.description

Symbol에 설명을 추가할 때 Symbol.prototype.description을 통해 설명을 얻을 수 있습니다.

let s = Symbol("Jack");
s.description; // &#39;Jack&#39;

3, Symbol.for(key) 및 Symbol.keyFor(sym)

처음 이 두 메소드를 봤을 때 두 가지 순회 메소드인 줄 알았습니다.

Symbol.for(key): 주어진 키를 사용하여 기존 기호를 검색하고 발견되면 기호를 반환합니다. 그렇지 않으면 주어진 키를 사용하여 전역 기호 레지스트리에 새 기호가 생성됩니다.
Symbol.keyFor(sym): 전역 기호 레지스트리에서 특정 기호에 대한 키를 검색합니다.

let s1 = Symbol.for("foo");
let s2 = Symbol.for("foo");
s1 === s2; // true

Symbol.for는 이 매개변수를 이름으로 사용하여 기호 값을 검색합니다. 있는 경우 이 기호 값을 반환하고, 그렇지 않으면 이 문자열로 명명된 새 기호 값을 만들고 전역적으로 등록합니다. 따라서 생성된 동일한 설명의 두 값은 동일합니다. 이런 종류의 생성은 일반적인 Symbol()과 완전히 다른 결과를 가져옵니다.

let s1 = Symbol("foo");
let s2 = Symbol("foo");
s1 === s2; // false

Symbol()은 무슨 일이 있어도 새로운 값을 반환하기 때문입니다. 즉, Symbol()에 의해 생성된 값은 전역적으로 등록되지 않습니다. 값은 모두 새로운 것이며, Symbol.for()는 먼저 전역 세계에서 검색하고, 존재하지 않는 경우 값을 반환하지만, 새로운 값도 탑재됩니다. 글로벌 세계에서.

Symbol.keyFor(sym)는 전역적으로 Symbol 값을 검색하고 설명이 있으면 반환합니다.

let s1 = Symbol.for("Jack");
Symbol.keyFor(s1); // &#39;Jack&#39;
let s2 = Symbol("Rose");
Symbol.keyFor(s2); // undefined

s2는 전역적으로 마운트되지 않기 때문에 Symbol.keyFor()가 이를 찾을 수 없어 정의되지 않은 값을 반환합니다.

4. 내장 기호 속성

除了定义自己使用的 Symbol 值以外，ES6 还提供了 13（有可能今后会更多 ?）个内置的 Symbol 值，指向语言内部使用的方法。

4.1 Symbol.asyncIterator

Symbol.asyncIterator 符号指定了一个对象的默认异步迭代器。如果一个对象设置了这个属性，它就是异步可迭代对象，可用于 for await...of 循环。换句话说一个异步可迭代对象内部必须有 Symbol.asyncIterator 属性。

const myAsyncIterable = new Object();
myAsyncIterable[Symbol.asyncIterator] = async function* () {
  yield "hello";
  yield "async";
  yield "iteration!";
};

(async () => {
  for await (const x of myAsyncIterable) {
    console.log(x);
    // expected output:
    //    "hello"
    //    "async"
    //    "iteration!"
  }
})();

当执行 for await...of 时，就会执行该变量中 Symbol.asyncIterator 属性值。

4.2、Symbol.hasInstance

Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。换句话说当判断一个实例是否为一个类的实例时，其实就是执行该类里面的 Symbol.hasInstance 属性。

class Fu {
  [Symbol.hasInstance](num) {
    return num === 1;
  }
}
1 instanceof new Fu(); // true
2 instanceof new Fu(); // false

4.3、Symbol.isConcatSpreadable

内置的 Symbol.isConcatSpreadable 符号用于配置某对象作为 Array.prototype.concat()方法的参数时是否展开其数组元素。

// 默认情况下
let arr = [1, 2, 3];
let brr = [4, 5, 6];
arr.concat(brr); // [1, 2, 3, 4, 5, 6]
// 设置了Symbol.isConcatSpreadable后
let arr = [1, 2, 3];
let brr = [4, 5, 6];
brr[Symbol.isConcatSpreadable] = false;
arr.concat(brr); // [1, 2, 3, [4, 5, 6]]

将数组的 Symbol.isConcatSpreadable 属性设置为 false 后，使用 concat 方法时该数据就不会展开。

对于类数组而言，默认数组使用 concat 方法该类数组是不展开的，我们可以给类数组的 Symbol.isConcatSpreadable 设置为 true，这样就可以展开了，并且完成了类数组转换为数组，这样类数组转数组又多了一个方法。

// 默认情况下
function foo(x, y) {
  let arr = [].concat(arguments);
  console.log(arr); //[Arguments(2)]
}
foo(1, 2);
// 设置了Symbol.isConcatSpreadable为true后
function foo(x, y) {
  arguments[Symbol.isConcatSpreadable] = true;
  let arr = [].concat(arguments);
  console.log(arr); //[1, 2]
}
foo(1, 2);

4.4、Symbol.iterator

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable]; // [1, 2, 3]

对象进行 for...of 循环时，会调用 Symbol.iterator 方法，

4.5、Symbol.match

Symbol.match 指定了匹配的是正则表达式而不是字符串。String.prototype.match() 方法会调用此函数。换句话说就是当 str.match()执行时如果该属性存在，就会返回该方法的返回值。

class foo {
  [Symbol.match](string) {
    return string;
  }
}
"Jack".match(new foo()); // &#39;Jack&#39;

除上述之外，MDN 还提出了该属性另外一个功能：此函数还用于标识对象是否具有正则表达式的行为。比如， String.prototype.startsWith()，String.prototype.endsWith() 和 String.prototype.includes() 这些方法会检查其第一个参数是否是正则表达式，是正则表达式就抛出一个 TypeError。现在，如果 match symbol 设置为 false（或者一个假值），就表示该对象不打算用作正则表达式对象。

"/bar/".startsWith(/bar/); // TypeError: First argument to String.prototype.startsWith must not be a regular expression
// 当设置为false之后
var re = /foo/;
re[Symbol.match] = false;
"/foo/".startsWith(re); // true
"/baz/".endsWith(re); // false

4.6、Symbol.matchAll

Symbol.matchAll 返回一个迭代器，该迭代器根据字符串生成正则表达式的匹配项。此函数可以被 String.prototype.matchAll() 方法调用。

"abc".matchAll(/a/);
// 等价于
/a/[Symbol.matchAll]("abc");

4.7、Symbol.replace

Symbol.replace 这个属性指定了当一个字符串替换所匹配字符串时所调用的方法。String.prototype.replace() 方法会调用此方法。

String.prototype.replace(searchValue, replaceValue);
// 等同于
searchValue[Symbol.replace](this, replaceValue);
// 例子
class Replace1 {
  constructor(value) {
    this.value = value;
  }
  [Symbol.replace](string) {
    return `s/${string}/${this.value}/g`;
  }
}

console.log("foo".replace(new Replace1("bar"))); // "s/foo/bar/g"

4.8、Symbol.search

Symbol.search 指定了一个搜索方法，这个方法接受用户输入的正则表达式，返回该正则表达式在字符串中匹配到的下标，这个方法由以下的方法来调用 String.prototype.search()。

String.prototype.search(regexp);
// 等价于
regexp[Symbol.search](this);
// 例子
class Search1 {
  [Symbol.search](str) {
    return `${str} Word`;
  }
}
"Hello".search(new Search1()); // Hello Word

4.9、Symbol.species

Symbol.species 是个函数值属性，其被构造函数用以创建派生对象，换句话说 species 访问器属性允许子类覆盖对象的默认构造函数。

我们举个例子：

// 默认情况下
class MyArray extends Array {}
let arr = new MyArray(1, 2, 3);
let brr = arr.map((item) => item);
brr instanceof MyArray; // true
brr instanceof Array; // true

类 MyArray 继承于 Array，arr 为 MyArray 的实例，brr 为 arr 的衍生物，所以 brr 是 MyArray 的实例，并且由于原型链的缘故，brr 也是 Array 的实例。如果此时，我们只想让 brr 为 Array 的实例，那 Symbol.species 属性值就派上用场了。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}
let arr = new MyArray(1, 2, 3);
let brr = arr.map((item) => item);
brr instanceof MyArray; // false
brr instanceof Array; // true
// 默认情况下
class MyArray extends Array {
  static get [Symbol.species]() {
    return this;
  }
}

值得注意的是，定义 Symbol.species 属性时，前面必须声明是静态的 static 并且要运用 get 取值器。

4.10、Symbol.split

Symbol.split 指向一个正则表达式的索引处分割字符串的方法。这个方法通过 String.prototype.split() 调用。

String.prototype.split(separator, limit);
// 等价于
separator[Symbol.split](this, limit);
// 例子
class Split1 {
  [Symbol.split](str) {
    return `${str} Word`;
  }
}
"Hello".split(new Split1()); // Hello Word

4.11、Symbol.toPrimitive

Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。该函数在调用时，会传递一个字符串参数 hint，表示要转换到的原始值的预期类型。字符串 hint 的类型有三种：'number', 'string', 'default'。

let obj =
  {
    [Symbol.toPrimitive](hint) {
      switch (hint) {
        case "number":
          return 123;
        case "string":
          return "123";
        case "default":
          return "default";
        default:
          throw new Error();
      }
    },
  } + obj; // 123
`${obj}`; // &#39;123&#39;
obj + ""; // "default"

4.12、Symbol.toStringTag

Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString() 方法会去读取这个标签并把它包含在自己的返回值里。通俗点讲就是在 Object.prototype.toString()去判断自定义对象的数据类型时，返回的都是 object，可以通过这个属性来给自定义对象添加类型标签。

Object.prototype.toString.call(&#39;123&#39;); // [object String]
...more

另外一些对象类型则不然，toString() 方法能识别它们是因为引擎为它们设置好了 toStringTag 标签：

Object.prototype.toString.call(new Map()); // "[object Map]"
Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
...more

当我们自己定义一个类时，调用 Object.prototype.toString()时，由于没有内部定义 toStringTag 标签，所以只能返回"[object Object]"

class Foo {}
Object.prototype.toString.call(new Foo()); // "[object Object]"
// 设置Symbol.toStringTag
class Foo {
  get [Symbol.toStringTag]() {
    return "Foo";
  }
}
Object.prototype.toString.call(new Foo()); // "[object Foo]"

4.13、Symbol.unscopabless

Symbol.unscopables 指用于指定对象值，其对象自身和继承的从关联对象的 with 环境绑定中排除的属性名称。说白了其属性就是控制，在 with 词法环境中哪些属性会被 with 删除。

Array.prototype[Symbol.unscopabless];
// {
//   copyWithin: true,
//   entries: true,
//   fill: true,
//   find: true,
//   findIndex: true,
//   includes: true,
//   keys: true
// }

这里简单的讲解一下 with 函数，with 主要是用来对对象取值的，举个简单的例子：

let obj = {};
with (obj) {
  let newa = a;
  let newb = b;
  console.log(newa + newb);
}
// 等价于
let newa = obj.a;
let newb = obj.b;
console.log(newa + newb);

with 的优点：当 with 传入的值非常复杂时，即当 object 为非常复杂的嵌套结构时，with 就使得代码显得非常简洁。 with 的缺点： js 的编译器会检测 with 块中的变量是否属于 with 传入的对象，上述例子为例，js 会检测 a 和 b 是否属于 obj 对象，这样就会的导致 with 语句的执行速度大大下降，性能比较差。

回归正题，我们举个例子看一下 Symbol.unscopables 属性的作用。

let obj = {
  foo() {
    return 1;
  }
}
with(obj) {
  foo(); // 1
}
// 设置了Symbol.unscopables
let obj = {
  foo() {
    return 1;
  },
  get [Symbol.unscopables]() {
    return {
      foo: true
    }
  }
}
with(obj) {
  foo(); // Uncaught ReferenceError: foo is not defined
}

设置后报错的原因是因为with已经将obj中的foo方法删除了。

BigInt类型

BigInt 是一种特殊的数字类型，它提供了对任意长度整数的支持。

1、概述

BigInt 是一个新型的内置类型，主要是为了表达大于 2^53-1 的整数。

我们定义一个 BigInt 类型的数据时有两种方式，第一个是在数字后面加 n，另外一种是调用 BigInt()方法。

let theBigInt = 9007199254740991n;
let alsoHuge = BigInt(9007199254740991); // 9007199254740991n

当用 typeof 对其进行类型判断时，返回的是 bigint。

let theBigInt = 9007199254740991n;
typeof theBigInt; // bigint

2、运算

BigInt 支持以下的运算符，+、*、-、**、% ，并且支持除了>>> （无符号右移）之外的其他位运算符。

let previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
let maxPlusOne = previousMaxSafe + 1n; // 9007199254740992n
let maxMinusOne = previousMaxSafe - 1n; // 9007199254740990n
let multi = previousMaxSafe * 2n; // 18014398509481982n
let mod = previousMaxSafe % 10n; // 1n

值得注意的是，BigInt 是不支持单目+运算符的。

+previousMaxSafe; // Uncaught TypeError: Cannot convert a BigInt value to a number

主要原因还是 BigInt 无法和 Number 类型直接运算，如果想要运算的话必须在同一个类型上，但是有一点值得注意的是，当 BigInt 转为 Number 类型时，有可能会丢失精度。

在比较运算符中，BigInt 和 Nunber 类型的之间不是严格相等的。

10n == 10; // true
10n === 10; // false

Number 和 BigInt 是可以进行比较的。

1n < 2; // true
2n > 1; // true
2n >= 2; // true

3、API

BigInt 拥有两个静态方法：

BigInt.asIntN(width, bigint)：将 BigInt 值转换为一个-2^width-1 与 2^width-1-1 之间的有符号整数。
BigInt.asUintN(width, bigint)：将一个 BigInt 值转换为 0 与 2^width-1 之间的无符号整数。

这两个方法均接受两个参数，width：可存储整数的位数。bigint：要存储在指定位数上的整数。

const max = 2n ** (64n - 1n) - 1n;
BigInt.asIntN(64, max); // 9223372036854775807n

const max = 2n ** 64n - 1n;
BigInt.asUintN(64, max); // 18446744073709551615n

同时 BigInt 还拥有三个实例方法：

BigInt.prototype.toLocaleString()：返回此数字的 language-sensitive 形式的字符串。覆盖 Object.prototype.toLocaleString() 方法。
BigInt.prototype.toString()：返回以指定基数(base)表示指定数字的字符串。覆盖 Object.prototype.toString() 方法。
BigInt.prototype.valueOf()：返回指定对象的基元值。覆盖 Object.prototype.valueOf() 方法。

let bigint = 3500n;
bigint.toLocaleString(); // "3,500"
bigint.toString(); // "3500"
bigint.valueOf(); // 3500n

【相关推荐：javascript视频教程、编程视频】

위 내용은 es6의 새로운 js 기본 데이터 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：es6의 유사한 for 루프는 무엇입니까?다음 기사：es6의 유사한 for 루프는 무엇입니까?