Symbol
1.什么Symbol?
Symbol是ES6中新增的一种数据类型, 被划分到了基本数据类型中
基本数据类型: 字符串、数值、布尔、undefined、null、Symbol
引用数据类型: Object,Array,Date等
2.Symbol的作用
Symbol用来表示一个独一无二的值
3.如果生成一个独一无二的值?
let xxx = Symbol();
4.为什么需要Symbol?
在企业开发中如果需要对一些第三方的插件、框架进行自定义的时候可能会因为添加了同名的属性或者方法, 将框架中原有的属性或者方法覆盖掉,为了避免这种情况的发生, 框架的作者或者我们就可以使用Symbol作为属性或者方法的名称
let person = { name: "shanjialan", [name]: 'sjl', [say]: function() { alert("say"); } } person.name = "it666"; person[Symbol("name")] = "shanjialan"; console.log(person);
打印结果.png
5.如何区分Symbol?
在通过Symbol生成独一无二的值时可以设置一个标记
这个标记仅仅用于区分, 没有其它任何含义
let a = Symbol(); let b = Symbol(); console.log(a === b);//false
6.Symbol使用注意点
- 1.通过Symbol生成独一无二值时需要在后面加上(), 但是前面不能加new, 因为它不是引用类型
let xxx = Symbol(); // 正确 let xxx = new Symbol(); // 错误
- 2.通过Symbol生成独一无二值时传入的字符串仅仅是一个标记, 方便我们阅读代码, 没有其它任何意义
let xxx = Symbol("name");
- 3.做类型转换的时候不能转换成数值
let test1 = Symbol("age"); console.log(String(test1)); console.log(Boolean(test1)); // console.log(Number(test1)); // Error:Cannot convert a Symbol value to a number at Number (<anonymous>)
- 4.不能做任何运算
// 不能做任何运算 // console.log(test1 + "111"); // Symbol.html:43 Uncaught TypeError: Cannot convert a Symbol value to a string
- 5.Symbol生成的值作为属性或方法名称时, 一定更要保存下来, 否则后续无法使用
let name = Symbol("name"); let obj = { [name]: "shanjialan" [Symbol("StudentID")]: "华中师范大学2019214268" } console.log(obj[name]); console.log(obj[Symbol("StudentID")]);
- 6.for循环无法遍历出Symbol的属性和方法
let obj2 = { [test1]: 'test', age: 19 }; for (let key in obj2) { console.log(key); }
【注意】： 通过Object.getOwnPropertySymbols(obj))来获取Symbol设置的属性;
console.log(Object.getOwnPropertySymbols(obj));
Iterator
1.什么是Iterator?
Iterator又叫做迭代器, 是一种接口
这里的接口和现实中接口一样, 是一种标准一种规范,例如: 电脑的USB接口有电脑USB接口的标准和规范, 正式因为有了标准和规范
所以A厂商生成的USB线可以插到B厂商电脑的USB接口上,它规定了不同数据类型统一访问的机制, 这里的访问机制主要指数据的遍历
在ES6中
Iterator接口主要供for...of消费
2.默认情况下以下数据类型都实现的Iterator接口
Array/Map/Set/String/TypedArray/函数的 arguments 对象/NodeList 对象
3.Iterator对象的特性
- 1.只要一个数据已经实现了Iterator接口, 那么这个数据就有一个叫做
[Symbol.iterator]的属性 - 2.
[Symbol.iterator]的属性会返回一个函数 - 3.
[Symbol.iterator]返回的函数执行之后会返回一个对象 - 4.
[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法 - 5.next方法每次执行都会返回一个对象
{value: 1, done: false} - 6.这个对象中存储了当前取出的数据和是否取完了的标记
let arr = [1, 2, 3]; for (let value of arr) { console.log(value); } console.log(arr[Symbol.iterator]); let it = arr[Symbol.iterator](); console.log(it); it.next(); console.log(it.next()); console.log(it.next()); console.log(it.next()); console.log(obj[Symbol.iterator]);
image.png
手动实现Iterator接口重写
class ArrayTest { constructor() { this.length = arguments.length; for (let i = 0; i < arguments.length; i++) { this[i] = arguments[i]; } } [Symbol.iterator]() { let index = 0; let that = this; return { next() { if (index < that.length) { return { value: that[index++], done: false } } else { return { value: undefined, done: true } } } } } } let arr1 = new ArrayTest(1, 3, 5); console.log(arr1); for (let value of arr1) { console.log(value); }
image.png
Iterator应用
- 解构赋值数组
let [x, y, z, w] = arr1; console.log(x, y, z, w);//1 3 5 undefined let arr2 = new ArrayTest(1, 2); let arr3 = new ArrayTest(3, 4); let arr4 = [...arr1, ...arr2]; console.log(arr4);//[1,3,5,3,4]
