es6 --- 内置的Symbol值

Symbol.hasInstance

// Symbol.hasInstance
class MyClass {[Symbol.hasInstance] (foo) {return foo instanceof Array;}
}
[1, 2, 3] instanceof new MyClass() // true// symbol.hasInstance:会在[1, 2, 3]  instanceof 时 自动调用 [Symbol.hasInstance] (foo) 方法...
// 等价于. ([1,2,3]) => { return [1,2,3] instanceof Array}

Symbol.isConcatSpreadable

class A1 extends Array {construcor(args) {super(args);this[Symbol.isConcatSpreadable] = true;}
}
class A2 extends Array {constructor(args) {super(args);this[Symbol.isConcatSpreadable] = false;}
}
let a1 = new A1();
a1[0] = 3;
a1[1] = 4;
let a2 = new A2();
a2[0] = 5;
a2[1] = 6;
[1, 2].concat(a1).concat(a2)
// [1, 2, 3, 4, [5, 6]]
// Symbol.isConcatSpreadable:表示对象使用Array.prototype.concat()时,是否可以展开

Symbol.species

// Symbol.species
// 使用格式
class MyArray extends Array {// 覆盖父类 Array 的构造函数static get [Symbol.species] () { return Array; }
}// 实例.
class MyArray extends Array {static get [Symbol.species] () { return Array; }
}
var a = new MyArray(1,2,3);
var mapped = a.map (x => x * x);mapped instanceof MyArray // false
mapped instanceof Array // true// 注:在static get[Symbol.species] () 中 将构造函数改为了 返回Array类,, 故使用instance MyArray 返回 false.

Symbol.match

// Symbol.match
class MyMatcher {[Symbol.match] (string) {return 'hello world'.indexOf(string);}
}
'e'.match(new MyMatcher))  // 1
// 注:等同于 [Symbol.match] ('e') { return 'hello world'.indexOf('e')}

Symbol.replace

// Symbol.replace
const x= {};
x[Symbol.replace] = (...s) => console.log(s);
'Hello'.replace(x, 'World') 
// 注:在执行'Hello'.replace操作时,实际上执行:(['Hello','World']) => console.log ('["Hello","World"]');
// Symbol.replace会在执行String.prototype.replace方法时调用函数.

在这里插入图片描述
Symbol.search

// Symbol.search
class MySearch {constructor (value) {this.value = value;}[Symbol.search] (string) {return string.indexOf(this.value);}
}
'foobar'.search(new MySearch('foo')) // 0
// 注: [Symbol.search] (string),在执行String.prototype.search方法时调用.
// 本例相当于执行: ('foobar') { return 'foobar'.indexOf('foo')}
}

Symbol.split

// Symbol.split
class MySplitter {constructor (value) {this.value = value;}[Symbol.split] (string) {var index = string.indexOf(this.value);if (index = -1){return string;}return [string.substr(0, index),string.substr(index + this.value.length)];}
}
'foobar'.split(new MySplitter('foo'))   // ['', 'bar']
'foobar'.split(new MySplitter('bar'))   // ['foo', '']
'foobar'.split(new MySplitter('baz'))   // ['foobar'] 
// 注: [Symbol.split]](string) 在执行String.prototypr.string方法时触发
// 本例改写了split方法,将string分为2部分,一部分(未匹配的)不变,另一部分(匹配到的)置为空, 若string中无匹配值,则完整返回...

Symbol.iterator

// Symbol.iterator
class Collection {*[Symbol.iterator] () {let i = 0;while (this[i] !== undefined) {yield this[i];++i;}}
}
let myCollection = new Collection();
myCollection[0] = 1;
myCollection[1] = 2;
for (let value of myCollection) {console.log (value);
} 
// 1 
// 2
// 注:在执行for ... of 循环时 触发Symbol.iterator方法
// yield 在for循环时会保存当前的元素...

Symbol.toPrimitive

// Symbol.toPrimitive
let obj = {[Symbol.toPrimitive] (hint) {swtich (hint) {case 'number':return 123;case 'string':return 'str';case 'default':return ‘default';default:throw new Error ();}}
}
2 * obj ;  // 246
3 + obj ;   // '3default'
obj == 'default'   // true
String(obj)    // 'str'
// 注:在对象被转为原始类型的值时,会调用这个方法

Symbol.toStringTag

// Symbol.toStringTag
class Collection {get [Symbol.toStringTag] () {return 'xxx',}
}
var x = new Collection();
Object.prototype.toString.call(x);     // "[object xxx]"
// 注:当执行Object.prototype.toString方法时,触发Symbol.toStringTag

Symbol.unscopables

// Symbol.unscopables
// 无unscopables
class MyClass {foo() { return 1;}
}
var foo = function () { return 2;};
with (MyClass.prototype) {foo();    // 1
}
// 有unscopables
class MyClass {foo() { return 1; }get [Symbol.unscopables] () {return { foo: true};}
}
var foo = function () { return 2;};
with (MyClass.prototype) {foo();     // 2
}
// 注:unscopables属性指定了使用with关键字时哪些属性会被with环境排除.
// 在本例中指定了foo属性被排除....

参考《ES6标准入门》 P194~P203

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

15 调试

1. pdb pdb是基于命令行的调试工具,非常类似gnu的gdb(调试c/c)。 def getAverage(a,b):result abprint("result is %s"%result)return resulta 10 b 20 c ab ret getAverage(a,b) print(ret) 2.执行时调试 程序启动&#xff0…

html5播放视频只有声音不出现画面?

一开始网上大神们都是要把MP4的编码格式转换成AVC(H264),然后赶紧用格式工厂把它给换了,结果!! 没用!!还是黑屏???咋回事啊,然后自己又…

vue项目代码改进(一)login组件

Login登录组件 1. 新增登录头像(css样式回顾) 1)div.avatar 2)子绝父相定位,left…top… 3)border 4)placeholder 5)box-shadow box-shadow: offset-x offset-y blur spread color …

解析DBF文件

上周,公司给了许多DBF后缀的数据文件让我进行解析。 因为是DBF文件我发现mysql,和Oracle都能直接对DBF文件进行导入。在导入过程中发现这些数据库并不能识别这些文件。 通过百度找到了打开这种文件的软件Visual FoxPro、Access,用它们打开后出…

Scrum 冲刺 第一日

Scrum 冲刺 第一日 站立式会议燃尽图Alpha 阶段认领任务明日任务安排项目预期任务量成员贡献值计算规则今日贡献量参考资料站立式会议 返回目录 燃尽图 返回目录 Alpha 阶段认领任务 学号组员分工用时20162309邢天岳补充说明书&部分测试18h20162311张之睿编写代码20h201623…

浅析 NodeJs 的几种文件路径

Node 中的文件路径大概有 __dirname, __filename, process.cwd(), ./ 或者 ../,前三个都是绝对路径,为了便于比较,./ 和 ../ 我们通过 path.resolve(./)来转换为绝对路径。 先看一个简单的栗子: 假如我们有这样的文件结构&#xf…

es6 --- 使用node的memoryUsage检测WeakMap()

打开node命令行 $ node --expose-gc// --expose-gc:表示允许手动执行垃圾回收机制// 手动执行一次垃圾回收,保证获取的内存使用状态准确 > global.gc();// 查看内存占用的初始状态, > process.memoryUsage();可以发现初始用了4.7MB左右 // 创建一个WeakMap()实例wm >…

利用jQuery和bootstrap更改radio样式

<div class"container body-content"><div class"row"><div class"text-center col-xs-12"><h3>标题</h3><div class"well well-sm"><div class"btn-group" data-toggle"butto…

Vue项目代码改进(三)—— Cookie、LocalStorage和SessionStorage的使用

存在问题&#xff1a; 如果在退出页面时&#xff0c;没有点击“退出”按钮&#xff0c;而是直接关闭页面&#xff0c;token并没有被清除&#xff0c;依然能通过访问http://localhost:8080/#/ 直接进入主页。 原因&#xff1a; 使用了localStorage而非sessionStorage或Cookie 一…

es6 --- Proxy实例的get方法

写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误 如果存在该属性时,就返回其值. var person {name: "张三" };var proxy new Proxy(person, {get: function(target, property) {if (property in target) {return target[property];} else {thr…

Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由,页面报错

这个不可描述的问题是&#xff1a;在使用ElementUI时点击同一个路由&#xff0c;页面报错。 错误代码如下&#xff1a; element-ui.common.js?ccbf:3339 NavigationDuplicated {_ name: "NavigationDuplicated", name: "NavigationDuplicated", message…

关于jQuery对象(类数组对象)以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]

之前在某官网课程上看有关jQuery和bootstrap的相关教程&#xff0c;有一节课是教我们如何制作价格菜单的按钮以及总价问题 选中按钮&#xff0c;按钮样式会发生变化&#xff0c;右上角价格会自动运算 6个菜单的html结构差不多&#xff0c;先贴出一个菜单的html&#xff0c;如下…

如何去掉bootstrap table中表格样式中横线竖线

修改之前&#xff0c;表格看上去比较拥挤&#xff0c;因为bootstrap table插件中自带斑马线表格样式&#xff0c;有横线和竖线分栏&#xff0c;现在我们不需要这些。应UI设计的要求&#xff0c;要去掉中间的横线和竖线&#xff0c;使用了修改需求中一种简单粗暴的修改方法&…

Vue项目代码改进(五)—— 将侧边栏菜单改造为动态后,如何按需显示不同图标

将侧边栏菜单改造为动态后&#xff0c;目前侧边栏每项的小图标都相同 <el-aside class"aside" width"200px"><el-col :span"24"><el-menudefault-active"2"class"el-menu-vertical-demo"open"handleOpe…

es6 --- Reflect的静态方法

Reflect.get(target, name, receiver): 查找并返回 target对象的 name属性,若没有,返回undefined var myObject {foo: 1,bar: 2,get baz() {return this.foo this.bar;}, }Reflect.get(myObject, foo); // 1// 若name属性部署了读取函数(getter),则读取函数的this 绑定rece…

canvas画出简陋版随鼠标转动眼睛且会眨眼的可爱樱桃小丸子

可到我的github上下载文件 需求&#xff1a; 刚加载时鼠标不移动&#xff0c;眼睛会不停地眨眼眼球会跟随鼠标移动而移动鼠标不移动时恢复眨眼效果提示&#xff1a; 除了眼睛是动态以外&#xff0c;其他静态绘制都在static()函数中利用椭圆的短轴长度先变短后恢复长度来模拟…

Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini以及服务无法启动的解决办法以及修改初始密码的方法...

LZ初学SQL&#xff0c;本来以为开源的安装很简单&#xff0c;但是中间出现了一些问题&#xff0c;记录下来&#xff0c;希望能帮助到他人。 mysql官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/点击打开链接 以5.7.20版本为例 首先安装包解压后&#xff0c;没…

总结 构造函数与非构造函数 原型继承的一个方法

这两天真的一直在看原型以及继承之间的千丝万缕&#xff0c;哇&#xff0c;收获颇多&#xff0c;不过所谓温故知新&#xff0c;还是要多复习复习知识点&#xff0c;才能察觉那些之前不易发现的小小sparkle 真心推荐MDN文档——对象原型&#xff0c;JavaScript 中的继承&#x…

Vue学习笔记(二)—— vue项目中使用axios

一、文档链接 axios文档 vue开发插件 二、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端&#xff0c;它本身具有以下特征&#xff1a; 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应…

jquery对json 键值对或数组的增加、删除、遍历操作

在前端遍历json键值对或数组遍历的情况也会经常用到&#xff0c;我们知道在java、c#其它的语言里提供方便的方法来操作&#xff0c;那么在json里面有没有类似的方法呢&#xff0c;废话就不多说了上代码&#xff1a;var jsonStr{}; //增加 jsonStr["name1"]"yu&q…