初入ES6-Symbol

ivyzhang 发布于2019-08-21 16:52 / 2748人阅读

摘要：原始的数据类型和一样是第七种数据类型创建只能用函数来创建，而且不能用可以有参数，用来区分每个只能显试的转化此处是字符串不能在转为数字报错不能隐式的转化报错作为对象的的属性名称主要用在可计算的属性名称，即使带有中括号的属性名称一般是私有不可以

Symbol原始的数据类型和string, boolean,null,undefined,number一样,是JS第七种数据类型

//创建Symbol
const symbol = Symbol()        //symbol只能用函数Symbol来创建，而且不能用new 可以有参数，用来区分每个symbol；
typeof symbol      //"symbol";
//只能显试的转化
String(symbol)  ==="Symbol()"    //此处是字符串；
Boolean(symbol) === true;        //
//不能在转为数字
Number(symbol)  //报错
//不能隐式的转化
symbol + "this is srging"    //报错

作为对象的的属性名称
主要用在可计算的属性名称，即使带有中括号的属性名称；一般是私有不可以遍历的属性

//对象的属性都是字符串
var obj = {
    name : "obama",
    "current age" : 77            //不能在使用点号调用
    [skin] : "black"                //报错的写法或者用来计算的属性名称，
};
obj.name === obj["name"]        //true
obj.name = "bush"            //覆盖前面的属性‘obama"
var ss = Synbol();
var newObj ={
    name :"obama",
    [ss]:34            //如果没有中括号，此处就是一个字符串
}
obj[ss] = 34        //两种写法都可以，但是不能用点号
//作为属性，不能用for in for of 等常规的遍历方法，遍历到的
//只能用Object.getOwnPropertySymbols()方法返回一个数组；也可以用新的方法 Reflect.ownKeys()；
let obj ={
    [Symbol("test")] : "the symbol",
    test : "the string"
}

Symbol() 和Symbol.for() 参数都是字符串,后者用来生成相同的symbol;

var s = Symbol("34");            ///每次调用都返回新的值，
var ss = Symbol.for("34");        //每次调用先检查全局是否有，没有在返回新的值
var sss = Symbol.for("34");
s ===ss //false;
ss ===sss //true;

//Symbol.keyFor()//用来返回Symbol.for()的参数值，也就是已经生成的，没有的话就Undefined;
var v  = Symbol("name");
var vv = Symbol("the name");
Symbol.keyFor(vv)  ->"the name";
 Symbol.keyFor(v)  ->undefined;        //访问一个没有定义的symbol会报错

获取Symbol属性的方法

const symbol = Symbol();
const obj = {

    [symbol]:"this is symbol",
    name :"obama"
}
Object.keys()
Object.getOwnPropertyNames()
//以上的方法都不能获取私有的symbol的属性
Object.getOwnPropertySymbols()    //只有此方法可以获取值

ES6开放11个内部方法的操作

1，Symbol.hasInstance 执行instanceof 调用的方法
在CHROME中查看，函数的的继承Function.prototype中增加的方法Symbol(Symbol.hasInstance)

function Mya(){
};

Object.defineProperty(Mya,Symbol.hasInstance,{
    value :"this is test "        //此处是描述属性特性值value
})
var s = new Mya();
s instanceof Mya     //一般的写法
Mya[Symbol.hasInstance](s)    //作为方法直接调用

2,Symbol.match,replace,serch,split方法

var str = "abcdefg";
var reg =/ab/g;
str.match(reg);        //["ab"]
str.replace("cd",reg)//"ababefg"
//可以使用一个对象保存这些属性，随后直接作为这些方法的参数
const obj ={
    [Symbol.search]:"return "the test""
}
str.search(obj)

3,Symbol.unscopables使用和废除的with语句有关，作为数组对象的新方法，暂做了解

4，Symbol.toPrimative,toStringTag重新定义Object对象的基本值

var obj = {
    name : "obama"
};
var str = "sssss";
//对于大多数对象来说，如果要执行一些原始值操作，一般会调用valueOf()和toString();返回初始值

5，Symbol.isConcatSpreadable顾名思义concat是否可以展开

var arr1 = [1,2,3,4];
var arr2 = ["a","b","c","d"];
arr1.concat(arr2)        //返回新的数组[1, 2, 3, 4, "a", "b", "c", "d"];
arr1.concat(arr2,null,null,null)   // [1, 2, 3, 4, "a", "b", "c", "d", null, null, null]
//对于concat的参数如果是数组就自动展开作为多带带的存在，
arr2[Symbol.isConcatSpreadable] = false;
arr1.concat(arr2,null,null,null)         //[1, 2, 3, 4, Array(4), null, null, null]没有展开
//类似数组的对象1，变量是数字的属性，不是的话，就是空的值和length的属性(必须)作为数组元素的个数如：
var obj = {
    a  : "a",
    3 : "a",            //数字键会在数组里的位置
    b : "b",
    2 : "b",
    length :6,        //影响添加数量，多余的是undefined
    [Symbol.isConcatSpreadable] : true
}
var ar = [1,"aa"];
ar.concat(obj)    //[1, "aa", empty × 2, "b", "a", empty × 2]
//此属性是一个可选属性，不在任何的对象里，

云服务器 GPU云服务器小白初入

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

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

HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

fai1017 2019-08-29 12:50 评论0 收藏0
HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

crossoverJie 2019-08-01 17:02 评论0 收藏0
初入vue配合el-table做批量下载

摘要：刚开始做项目，正好碰上了一个批量下载的功能就是下面图片中的一个导出的功能后台返回的数据格式是这样的，如下做批量下载后台需要前端给一个必需字段，在我这里也就是上代码这样我们的就是一个由组成的数组，搞定刚开始做vue项目，正好碰上了一个批量下载的功能就是下面图片中的一个导出的功能showImg(https://segmentfault.com/img/bVbsuIr); 后台返回的数据...

tunny 2019-08-26 13:44 评论0 收藏0
初入Vue，node，express，mongodb

摘要：本人前端萌新大概花了一周多一点，完成了一个前后端分离解耦的简易个人博客项目。项目前后端分离，路由完全交给处理，后端只负责操作数据库，暴露。目前项目提供做学习用途，希望能给大家一些帮助，对全栈项目有一个初步的了解，谢谢。本人前端萌新大概花了一周多一点，完成了一个前后端分离解耦的简易个人博客项目。项目前后端分离，路由完全交给vue-router处理，后端只负责操作数据库，暴露api。技...

dingding199389 2019-08-21 17:45 评论0 收藏0