Symbol能干什么！为什么要掌握它?

genedna 发布于2019-08-26 18:42 / 603人阅读

摘要：说到就先来说下中的基础数据类型，就是中的第六种基础数据类型用一句话来描述那就是独一无二的使用基本使用中的标识一般放声明的变量不相等作为语法可以将的值作为属性循环无法遍历属性方法可以拿到所有的属性我们上面说是独一无二的但是有的时候我希望可以复

说到Symbol就先来说下 js中的基础数据类型 string、number、boolean、null、undefined，Symbol就是js中的第六种基础数据类型

用一句话来描述Symbol,那就是独一无二! Symbol的使用

基本使用

</>复制代码 
const s1 = Symbol("song");
const s2 = Symbol("song");
// Symbol中的标识一般放number、string
console.log(s1 === s2); // Symbol声明的变量不相等

Symbol作为key

</>复制代码 
    const s1 = Symbol("song");
    let obj = {
        [s1]:"song", // es6语法[] 可以将symbol的值作为属性
        age:18
    }
    for(let key in obj){ // for循环无法遍历symbol属性
        console.log(obj[key])
    }
    // Reflect.ownKeys方法可以拿到所有的key属性
    Reflect.ownKeys(obj).forEach(key=>{
        console.log(obj[key]);
    })

Symbol.for

我们上面说symbol是独一无二的,但是有的时候我希望可以复用声明过的symbol，可以使用for语法，如果symbol不存在则声明，如果存在则将创建过的symbol返回回来！

</>复制代码 
const s1 = Symbol.for("song");
const s2 = Symbol.for("song");
console.log(s1 === s2);
console.log(Symbol.keyFor(s2)); // 可以通过keyFor 获取symbok的key

Symbol元编程

元编程：可以去对原生js的操作进行修改，说白了就是可以更改原生js的行为

ES6提供了11个内置的Symbol值

1.Symbol.hasInstance

重写instanceof默认行为

</>复制代码 
const instance = {
    [Symbol.hasInstance](value){
        return "a" in value
    }
}
// 当调用 instanceof 方法，会默认调用instance上的hasInstance方法
console.log({a:1} instanceof instance)

2.Symbol.isConcatSpreadable

重写数组的展开行为

</>复制代码 
const arr = [1,2,3];
arr[Symbol.isConcatSpreadable] = false;
console.log(arr.concat([1,2,3]));

3.Symbol.match / split / search / replace

重写字符串的match,split,search方法

</>复制代码 
const obj = {
    [Symbol.match](value){
        return value.length === 3
    }
}
console.log("abc".match(obj));

4.Symbol.species

创建衍生对象时,指定构造函数

</>复制代码 
class MyArray extends Array{
    constructor(...args){
        super(...args);
    }
    static get [Symbol.species](){
        return Array; // 创建衍生对象会用Array作为构造函数
    }
}
const arr = new MyArray(1,2,3);
const newArr = arr.map(item=>item*2);
console.log(newArr instanceof MyArray); // 默认衍生对象也是MyArray的实例

5.Symbol.toPrimitive

重写数据类型转化

</>复制代码 
const obj = {
    [Symbol.toPrimitive](type){ // type number string default
        return 123;
    }
}
console.log(obj*123);

6.Symbol.toStringTag

重写toString方法

</>复制代码 
const obj = {
  [Symbol.toStringTag]: "xxx"
};
console.log(Object.prototype.toString.call(obj)); // [object xxx]

7.Symbol.unscopables

重写哪些属性被with所排除

</>复制代码 
console.log(Array.prototype[Symbol.unscopables]); // 哪些方法不能再with中使用
with(Array.prototype){ // 直接调用数组原型上的方法
    forEach.call([1,2,3],element => {
        console.log(element)
    });
}
class MyClass {
  eat() {}
  get [Symbol.unscopables]() {
    return { eat: true }; // 不能在with下使用
  }
}
with (MyClass.prototype) {
  console.log(eat);
}

还差最后一个Symbol.iterator，留个小尾巴，大家自己踩一踩看看这个有什么用！！这个面试经常会被问哦~

到此我们将Symbol的用法整个过了一遍，当然一般元编程在开发的时候还是很少用到呢！不过我们已经具备改写js语言本身的能力啦!

`欢迎持续关注公众号：「前端优选」
技术持续更新，请持续关注......`

GPU云服务器云服务器大数据要掌握什么学习深度学习要掌握什么前端需要掌握什么大数据需要掌握什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110313.html

云服务器能干什么

摘要：在阿里云服务器安装好操作系统之后，安装好软件。所以，如果你家路由器自带接口，且提供动态域名解析服务，可以将自家路由器打造成私有的网盘。于是很多公司想办法搭建公司服务器，存放在公司内部服务器是啥？就是一个24小时不断电的电脑，有linux系统，windows2003-2013，你可以用他来挂qq，挂软件，挂一切你想挂的，除了游戏，因为他本身是用来为大家提供远程信息处理服务的，那么话又说回来了，...

young.li 2019-04-24 19:27 评论0 收藏0
【JS进阶】你真的掌握变量和类型了吗

摘要：本文从底层原理到实际应用详细介绍了中的变量和类型相关知识。内存空间又被分为两种，栈内存与堆内存。一个值能作为对象属性的标识符这是该数据类型仅有的目的。导读变量和类型是学习JavaScript最先接触到的东西，但是往往看起来最简单的东西往往还隐藏着很多你不了解、或者容易犯错的知识，比如下面几个问题： JavaScript中的变量在内存中的具体存储形式是什么？ 0.1+0.2为什...

fuyi501 2019-08-26 13:58 评论0 收藏0
快速掌握JavaScript面试基础知识(一)

摘要：根据调查，自年一来，是最流行的编程语言。在一个函数体中声明的变量和函数，周围的作用域内无法访问。也就是说被大括号包围起来的区域声明的变量外部将不可访问。一个常见的误解是使用声明的变量，其值不可更改。译者按：总结了大量JavaScript基本知识点，很有用！原文: The Definitive JavaScript Handbook for your next developer ...

acrazing 2019-08-22 13:57 评论0 收藏0
ES6 的 for..of 和 Generator，从伪数组 jQuery 对象说起

摘要：引用自可迭代对象和迭代器不以规矩，不成方圆为了使某个对象成为可迭代对象象，它必须实现方法，也就是说，它得有一个是的属性。的遍历，绝对应该用。 pseudo 英 [sju:dəʊ] 美 [su:doʊ]adj.假的，虚伪的n.[口]假冒的人，伪君子 pseudo-array 英 [sju:dəʊəreɪ] 美 [sju:dəʊəreɪ][计] 伪数组 jQuery 对象是伪数组两个...

Harriet666 2019-08-21 10:39 评论0 收藏0
手写call、apply、bind及相关面试题解析

摘要：我是前端我的全名是我是一个前端指向接收多个参数，第一个是返回值返回值是一个函数上下文的，不会立即执行。柯里化相关讲解请移步简版的实现就算完成了欢迎吐槽点赞它们有什么不同？怎么用？ call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 let obj = { name: 一个 } ...

TwIStOy 2019-08-23 14:48 评论0 收藏0