JavaScript系列之ES6篇(2)
五,新增数据Symbol
1,Symbol简介
① Symbol
的值是唯一的,用来解决命名冲突的问题
② Symbol
的值不能与其他数据进行运算
③ Symbol
定义的对象属性不能使用for…in...
进行循环遍历,但是可以使用Reflect.ownKeys
来获取对象的所有键名
2,创建Symbol的两种方式:
(1)创建 Symbol
let s = Symbol();console.log(s, typeof s); // Symbol() "symbol"let s2 = Symbol('pink'); // 描述字符串let s3 = Symbol('pink');console.log(s2 === s3); // false
(2)使用Symbol.for
进行创建
let s4 = Symbol.for('尚硅谷');console.log(s4, typeof s4); // Symbol(尚硅谷) "symbol"let s5 = Symbol.for('尚硅谷');console.log(s4 === s5); // true// 不能与其他数据类型进行运算。// USONB undefind string Symbol object null number boolean
3,Symbol 的使用
(1)使用Symbol安全的添加methods(function):
// 向对象中添加方法 up downlet game = {};// 声明一个对象let methods = {up: Symbol(),down: Symbol(),};game[methods.up] = function() {console.log('上升');}game[methods.down] = function() {console.log('下降');}console.log(game);
(2)在另一种情况下添加methods(内部):
let youxi = {name:'狼人杀',[Symbol('say')]:function(){console.log('I can say!');}
}
六,迭代器
1,Interator(遍历器)的概念
(1)含义:
为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator
接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
(2)作用:
Iterator
的作用有三个:
① 为各种数据结构提供一个统一的、简便的访问接口。
② 使得数据结构的成员能够按某种次序排列。
③ ES6创造了一种新的遍历命令for...of
循环,Iterator
接口主要供for...of
消费。
2,迭代器的工作原理
① 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上就是一个指针对象。
② 第一次调用对象的next
方法,指针自动指向数据结构的第一个成员。
③ 接下来不断使用next
方法,指针不断向后移动直到指向最后一个数据成员。
④ 每调用一次方法返回一个包含value
和done
属性的对象(done
代表是否完,为一个布尔值,如果遍历完成则为ture
,否则为false
)
3,默认Interator接口
// 声明一个数组const num = ['a', 'b', 'c', 'd'];// 使用 for...of 遍历数组for (let v of num) {console.log(v); // a b c d}// 使用 for...in 遍历数组for (let k in num) {console.log(k); // 0 1 2 3console.log(num[k]); // a b c d}let iterator = num[Symbol.iterator]();// 调用对象的next方法console.log(iterator.next()); // { value: 'a', done: false }console.log(iterator.next()); // { value: 'b', done: false }console.log(iterator.next()); // { value: 'c', done: false }console.log(iterator.next()); // { value: 'd', done: false }console.log(iterator.next()); // { value: undefined, done: true }/* 原生具备Iterator接口的数据结构如下:ArrayMapSetStringTypedArray函数的arguments对象NodeList对象 *\
七,Set和Map数据结构
1,set 集合
(1)含义:
它类似于数组,但是成员的值都是唯一的,没有重复的值。set
本身是一个构造函数,用来生成set
数据结构。
(2)方法:
① add(value)
:添加某个值,返回Set结果本身。
② delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功。
③ has(value)
:返回一个布尔值,表示该值是否为Set的成员。
④ clear()
:清除所有成员,没有返回值。
⑤ keys()
:返回键名的遍历器。
⑥ values()
:返回键值的遍历器。
⑦ entries()
:返回键值对的遍历器。
⑧ forEach()
:使用回调函数遍历每个成员
(3)例如:
// 声明一个 setlet s = new Set();let s2 = new Set(['a', 'b', 'c', 'd']);console.log(s2);// 元素的个数 注意:重复的元素算一个/ console.log(s2.size); // 4// 添加新的元素console.log(s2.add('e')); // 添加某个值,返回Set结果本身// 删除元素console.log(s2.delete('a')); // true 删除某个值,返回一个布尔值,表示删除是否成功。console.log(s2); // [ 'b', 'c', 'd', 'e']// 检测console.log(s2.has('b')); // 有返回true,没有返回flase// 清空s2.clear(); // 清除所有成员,没有返回值。console.log(s2);// for of遍历for (let v of s2) {console.log(v); // a b c d}// Set 实践let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];// 数组去重let result = [...new Set(arr)];console.log(result); // [1, 2, 3, 4, 5]
2,Map字典
(1)含义:
Map
类似于对象,也是键值对的集合,但是“键”
的范围不限于字符串,各类型的值(包括对象)都可以当做键。也就是说,Object
结构提供了“字符串–值”的对应,Map
结构提供了“值–值”的对应,是一种更完善的Hash
结构的实现。如果你需要“键值对”
的数据结构,Map
比Object
更合适。
(2)方法:
① set(key,value)
:set
方法设置键名key对应的键值为value
,然后返回整个Map
结构。如果key
已经有值,则键值会被更新,否则就新生成该键。
② get(key)
:get
方法读取对应的键值,如果找不到key
,返回false
。
③ has(key)
:has
方法返回一个布尔值,表示某个键是否在当前Map
对象之中。
④ delete(key)
:delete
方法删除某个键,返回true
。如果删除失败,返回false
。
⑤ clear()
:清除所有成员,没有返回值。
⑥ keys()
:返回键名的遍历器。
⑦ values()
:返回键值的遍历器。
⑧ entries()
:返回键值对的遍历器。
⑨ forEach()
:使用回调函数遍历每个成员 。
(3)例如:
// 声明 Maplet m = new Map();// 添加元素 采取键值对方式m.set('name', 'pink');m.set('change', function () {console.log('改变');});let key = {school: '尚硅谷',};m.set(key, ['北京', '上海', '深圳']);console.log(m);// 获取个数console.log(m.size);// 删除m.delete('name');console.log(m);// 获取console.log(m.get('change'));console.log(m.get(key)); // ["北京", "上海", "深圳"]// 清空m.clear();console.log(m);// 遍历for(let v of m) {console.log(v);}
JavaScript系列之ES6篇(2)相关推荐
- 深入理解JavaScript系列——汤姆大叔
原文地址 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaS ...
- [转载]深入理解JavaScript系列 --汤姆大叔
深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...
- 深入理解JavaScript系列(转自汤姆大叔)
深入理解JavaScript系列(转自汤姆大叔) 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaSc ...
- 深入理解javascript作用域系列第四篇——块作用域
前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的 ...
- javascript面向对象系列第三篇——实现继承的3种形式
前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种 ...
- 深入理解javascript作用域系列第三篇
前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hois ...
- 【JavaScript 教程系列第 10 篇】判断一个数是整数还是小数
这是[JavaScript 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. 思路 如果一个数是整数,那么 parseInt() 函数和 parseFloat() 函数的返回值是相同的,反之返 ...
- 【JavaScript 教程系列第 8 篇】什么是闰年?判断某一年是不是闰年
这是[JavaScript 教程系列第 8 篇],如果觉得有用的话,欢迎关注专栏. 闰年分为 普通年:能被 4 整除且不能被 100 整除的是闰年. 世纪年:能被 400 整除的是闰年. 依据这两个判 ...
- JavaScript 系列四:流程控制
快来加入我们吧! "小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章.为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.c ...
最新文章
- jsr303 spring_使用Spring和JSR 303进行方法参数验证
- javap的用途不断发展:您的Java类文件中隐藏了什么?
- 贝格数据携手清华大学“勘探”大数据富矿
- linux sftp创建多用户,同一台 Centos (Linux)服务器设置多个sftp 账号,并限制用户只能访问指定文件路径...
- 计算机机器人比赛有哪些,RoboCup机器人世界杯赛有哪些项目?
- delphi 集合的用法
- matlab 几何布朗运动 股价,股票价格几何布朗运动模型的理论错误及纠正
- Kinetics-400数据集分类名中英文对照汇总
- 经纬度转WGS84坐标
- 《青玉案·元夕》 辛弃疾
- 安全编程: 开发安全的程序
- web前端开发是什么?
- 那些酷炫的深度学习网络图怎么画出来的?
- 如何成为一个高级java程序员
- 字节跳动的面试分享,为了拿下这个offer鬼知道我经历了什么
- 四川大学计算机科学研究生,四川大学计算机学院2018年硕士研究生招生拟录取名单及成绩公示(全日制)...
- 中国职业社交网优士网​融资300万美元
- 无线pda是快递员随身携带的设备
- 大数据告诉你股权如何设计
- 尚学堂Java300答案解析 第三章