【前端vue3】TypeScrip-never类型、symbol类型、迭代器和生成器

发布于:2024-07-05 ⋅ 阅读:(16) ⋅ 点赞:(0)

never类型

TypeScript 将使用 never 类型来表示不应该存在的状态

never 与 void 的差异

差异一、

//void类型只是没有返回值 但本身不会出错
function Void():void {
    console.log();
}
 
//只会抛出异常没有返回值
function Never():never {
throw new Error('aaa')
}

差异二、
联合类型中never会被直接移除

在这里插入图片描述

never应用场景

由于任何类型都不能赋值给 never 类型的变量,所以当存在进入 default 分支的可能性时,TS的类型检查会及时帮我们发现这个问题

在这里插入图片描述

symbol类型

自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。

symbol类型的值是通过Symbol构造函数创建的。
支持三种类型string number undefined
在这里插入图片描述

let sym1 =Symbol();

let sym2 =Symbol("key");  // 可选的字符串key

Symbols是不可改变且唯一的。

let sym2 = Symbol("key");
let sym3 = Symbol("key");

sym2 === sym3; // false, symbols是唯一的

//各自创建自己的唯一内存地址

像字符串一样,symbols也可以被用做对象属性的键。

let sym = Symbol();

let obj = {
    [sym]: "value"
};

console.log(obj[sym]); // "value"

像字符串一样,symbols也可以被用做对象属性的键。

let sym = Symbol();

let obj = {
    [sym]: "value" // [sym] 只有加上[]才能读到symbol
};

console.log(obj[sym]); // "value"

使用symbol定义的属性,是不能通过如下方式遍历拿到的

const symbol1 = Symbol('666')
const symbol2 = Symbol('777')
const obj1= {
   [symbol1]: '小C',
   [symbol2]: '二蛋',
   age: 19,
   sex: '女'
}
// 1 for in 遍历
for (const key in obj1) {
   // 注意在console看key,是不是没有遍历到symbol1
   console.log(key)
}
// 2 Object.keys 遍历
Object.keys(obj1)
console.log(Object.keys(obj1))
// 3 getOwnPropertyNames
console.log(Object.getOwnPropertyNames(obj1))
// 4 JSON.stringfy
console.log(JSON.stringify(obj1))

在这里插入图片描述

获取symbol类型的值,如下:

// 1 拿到具体的symbol 属性,对象中有几个就会拿到几个
Object.getOwnPropertySymbols(obj1)
console.log(Object.getOwnPropertySymbols(obj1))
// 2 es6 的 Reflect 拿到对象的所有属性
Reflect.ownKeys(obj1)
console.log(Reflect.ownKeys(obj1))

在这里插入图片描述

除了用户定义的symbols,还有一些已经众所周知的内置symbols。 内置symbols用来表示语言内部的行为。
以下为这些symbols的列表:

Symbol.hasInstance
方法,会被instanceof运算符调用。构造器对象用来识别一个对象是否是其实例。

Symbol.isConcatSpreadable
布尔值,表示当在一个对象上调用Array.prototype.concat时,这个对象的数组元素是否可展开。

Symbol.iterator
方法,被for-of语句调用。返回对象的默认迭代器。

Symbol.match
方法,被String.prototype.match调用。正则表达式用来匹配字符串。

Symbol.replace
方法,被String.prototype.replace调用。正则表达式用来替换字符串中匹配的子串。

Symbol.search
方法,被String.prototype.search调用。正则表达式返回被匹配部分在字符串中的索引。

Symbol.species
函数值,为一个构造函数。用来创建派生对象。

Symbol.split
方法,被String.prototype.split调用。正则表达式来用分割字符串。

Symbol.toPrimitive
方法,被ToPrimitive抽象操作调用。把对象转换为相应的原始值。

Symbol.toStringTag
方法,被内置方法Object.prototype.toString调用。返回创建对象时默认的字符串描述。

Symbol.unscopables
对象,它自己拥有的属性会被with作用域排除在外。

迭代器和生成器

支持遍历大部分类型迭代器 arr nodeList argumetns set map 等

var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
 
console.log(iterator.next());  //{ value: 1, done: false }
console.log(iterator.next());  //{ value: 2, done: false }
console.log(iterator.next());  //{ value: 3, done: false }
console.log(iterator.next());  //{ value: 4, done: false }
console.log(iterator.next());  //{ value: undefined, done: true }

当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的。 一些内置的类型如 Array,Map,Set,String,Int32Array,Uint32Array等都已经实现了各自的Symbol.iterator。 对象上的 Symbol.iterator函数负责返回供迭代的值。

for…of 语句

for…of会遍历可迭代的对象,调用对象上的Symbol.iterator方法。 下面是在数组上使用 for…of的简单例子:

在这里插入图片描述

let someArray = [1, "string", false];

for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

for…of vs. for…in 语句

for…of和for…in均可迭代一个列表;但是用于迭代的值却不同,for…in迭代的是对象的 键 的列表,而for…of则迭代对象的键对应的值。

let someArray = [1, "xiaoc", false];

for (let entry of someArray) {
    console.log(entry); // 1, "xiaoc", false
}

for (let entry in someArray) {
    console.log(entry);
}

在这里插入图片描述

数组解构

var [a,b,c] = [1,2,3]
 
var x = [...xxxx]

让对象支持for of

const obj = {
    max: 5,
    current: 0,
    [Symbol.iterator]() {
        return {
            max: this.max,
            current: this.current,
            next() {
                if (this.current == this.max) {
                    return {
                        value: undefined,
                        done: true
                    }
                } else {
                    return {
                        value: this.current++,
                        done: false
                    }
                }
            }
        }
    }
}
console.log([...obj])
 
for (let val of obj) {
   console.log(val);
   
}

网站公告

今日签到

点亮在社区的每一天
去签到