ES6学习小计

时间:2022-06-16 00:34:39

1.增加了for of语法,对应C#里的foreach,注意ES5中的 for in只会传递0,1,2.....序号,并且是字符
for-of循环语句通过方法调用来遍历各种集合。数组、Maps对象、Sets对象【可迭代器对象-》所有拥有[Symbol.iterator]的对象】

for (var value of myArray) {
console.log(value);
}

2.map对象,对应Dictionary,即字典

for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}

支持的操作:

  • new Map:返回一个新的、空的Map
  • new Map(pairs):根据所含元素形如[key, value]的数组pairs来创建一个新的Map。这里提供的pairs可以是一个已有的Map 对象,可以是一个由二元数组组成的数组,也可以是逐个生成二元数组的一个生成器,等等。
  • map.size:返回Map中项目的个数。
  • map.has(key):测试一个键名是否存在,类似key in obj
  • map.get(key):返回一个键名对应的值,若键名不存在则返回undefined,类似obj[key]
  • map.set(key, value):添加一对新的键值对,如果键名已存在就覆盖。
  • map.delete(key):按键名删除一项,类似delete obj[key]
  • map.clear():清空Map
  • map[Symbol.iterator]():返回遍历所有项的迭代器,每项用一个键和值组成的二元数组表示。
  • map.forEach(f) 类似for (let [key, value] of map) { f(value, key, map); }。这里诡异的参数顺序,和Set中一样,是对应着Array.prototype.forEach()
  • map.keys():返回遍历所有键的迭代器。
  • map.values():返回遍历所有值的迭代器。
  • map.entries():返回遍历所有项的迭代器,就像map[Symbol.iterator]()

3.生成器:生成器是迭代器。所有的生成器都有内建.next()和[Symbol.iterator]()方法的实现
格式: 比函数多了一个*号 function* XXX(){....yield....} 
yield作用:当生成器执行yields语句,生成器的堆栈结构(本地变量、参数、临时值、生成器内部当前的执行位置)被移出堆栈。然而,生成器对象保留了对这个堆栈结构的引用(备份),所以稍后调用.next()可以重新激活堆栈结构并且继续执行。

function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i;
}
// 应该弹出三次 "ding"
for (var value of range(0, 3)) {
alert("Ding! at floor #" + value);
}

4.反撇号(`)->模板字符串(template strings)。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,看起来与普通字符串一致。  与普通字符串不同的是,模板字符串可以多行书写

function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
`用户 ${user.name} 未被授权执行 ${action} 操作。`);
}
}
  • 模板占位符中的代码可以是任意JavaScript表达式,所以函数调用、算数运算等这些都可以作为占位符使用,你甚至可以在一个模板字符串中嵌套另一个,我称之为模板套构(template inception)。
  • 如果这两个值都不是字符串,可以按照常规将其转换为字符串。例如:如果action是一个对象,将会调用它的.toString()方法将其转换为字符串值。
  • 如果你需要在模板字符串中书写反撇号,你必须使用反斜杠将其转义:`\``等价于"`"。
  • 同样地,如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标,你都需要用反斜杠转义每一个字符:`\$`和`\{`。

5.不定参数:...paramsname    采用...+变量名,默认为空数组【不为undefine】

function containsAll(haystack, ...needles) {
for (var needle of needles) {
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}

6.默认参数  定义形式为[param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]],对于每个参数而言,定义默认值时=后的部分是一个表达式,如果调用者没有传递相应参数,将使用该表达式的值作为参数默认值
                默认值表达式在函数调用时自左向右求值,没有默认值的参数隐式默认为undefined

function animalSentence(animals2="tigers", animals3="bears") {
return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

7.解构赋值【成对赋值】 允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
//
console.log(bar);
//
console.log(baz);
//
var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"
var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]

可以用于多个返回值

function returnMultipleValues() {
return [1, 2];
}
var [foo, bar] = returnMultipleValues();

8.箭头函数Arrow Functions: => 同C#Lambda表达式

    // ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

9.集合Set:一个Set是一群值的集合。它是可变的,能够增删元素
    Set不会包含相同元素
           Set的数据存储结构专门为一种操作作了速度优化:包含性检测:has方法
    Set不能提供索引  SetObj[111]->undefine
支持的所有操作:

  • new Set:创建一个新的、空的Set
  • new Set(iterable):从任何可遍历数据中提取元素,构造出一个新的集合。
  • set.size:获取集合的大小,即其中元素的个数。
  • set.has(value):判定集合中是否含有指定元素,返回一个布尔值。
  • set.add(value):添加元素。如果与已有重复,则不产生效果。
  • set.delete(value):删除元素。如果并不存在,则不产生效果。.add().delete()都会返回集合自身,所以我们可以用链式语法。
  • set[Symbol.iterator]():返回一个新的遍历整个集合的迭代器。一般这个方法不会被直接调用,因为实际上就是它使集合能够被遍历,也就是说,我们可以直接写for (v of set) {...}等等。
  • set.forEach(f):直接用代码来解释好了,它就像是for (let value of set) { f(value, value, set); }的简写,类似于数组的.forEach()方法。
  • set.clear():清空集合。
  • set.keys()set.values()set.entries()返回各种迭代器,它们是为了兼容Map而提供的

10.弱集合:WeakMap和WeakSet

WeakMap和WeakSet被设计来完成与Map、Set几乎一样的行为,除了以下一些限制:

  • WeakMap只支持new、has、get、set 和delete。
  • WeakSet只支持new、has、add和delete。
  • WeakSet的值和WeakMap的键必须是对象。

还要注意,这两种弱集合都不可迭代,除非专门查询或给出你感兴趣的键,否则不能获得一个弱集合中的项。

ES6学习小计的更多相关文章

  1. es6 学习小计

    es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称之为解构:

  2. Miller-Rabin素数测试学习小计

    1.Miller-Rabin是干啥的?它是用来检测一个数字(一般是很大的数字)是不是素数: 2.Miller-Rabin算法基于的两个定理: (1)费尔马小定理:如果p是一个素数,且0<a&lt ...

  3. js正则学习小计

    //元字符 {} () ^ $ . ? + //预定义字符 \d \D \w \W \s \S //量词 {n,m} {n} {n,} + ? * //贪婪和惰性 //反向引用 //分组 //候选 / ...

  4. kvm学习小计

    1.Kvm安装 安装方法两种方式,一种是直接下载源码编译安装,一种是直接使用yum install kvm/apt-get install kvm,这部分就不详细说明了,我使用的是第二种方法,待后 续 ...

  5. Docker学习小计

    1.自动下载并且创建容器 Now verify that the installation has worked by downloading the ubuntu image and launchi ...

  6. Jquery学习小计

    实时监听输入框值变化 首先创建Jquery.fn扩展 jQuery.fn.extend({ inputChange: function(callback){ if($.support.leadingW ...

  7. Python学习小计

    1.初学Python最好选择2.7版本,因为大部分Python书籍的示例代码是基于这个版本的 2.Python安装可以参考百度经验完成 如果在电脑上同时安装2个版本,则CMD启动时只需要: py -2 ...

  8. R学习小计

    安装R扩展包:install.packages("FKF")http://www.douban.com/note/243004605/1.输入数据 l读入有分隔符数据:A<- ...

  9. 学习小计&colon; Kaggle Learn Embeddings

    Embedding表示map f: X(高维) -> Y(低维),减小数据维度,方便计算+提高准确率. 参看Kaggle Learn:https://www.kaggle.com/learn/e ...

随机推荐

  1. Selenium 功能总结大集合

    slenium自动化测试的一个利器: 总结了部分功能,成图,方便学习: 这是一张大图,大家看起来可能比较麻烦: 可以在我的github下载:selenium大图.xmind格式

  2. WPF的一些总是记不住的Tips

    Margin(Left,Top,Right,Bottom); HorizontalAlignment(Height的Opposite,水平对齐方式):VerticalAlignment(Width的反 ...

  3. react mixins编写

    var LogMixin = { componentWillMount: function () { console.log('Component will mount'); }, component ...

  4. (旧)子数涵数&&num;183&semi;VB——变量

    最近,VB吧频繁出现如下图所示的帖子(现在C吧.VB吧等都已经被二级考生玩坏了) 这主要用到的是变量的概念 首先,我们来看一下变量的数据类型 当然,就这题而言,数据类型不是重点,主要考察的是变量的作用 ...

  5. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  6. 对cnblogs&period;com用户体验的评价

    一.对于cnblogs.com的用户体验我们先对以下问题进行回答: 1.你是什么样的用户, 有什么样的心理, 对cnblogs 的期望值是什么? 我们是正在学习软件工程课程的在校计算机专业大学生,在博 ...

  7. javascript---lat const var 的区别

    首先,ECMAScript和JavaScript关系:      ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为 ...

  8. 2017-07-06 eclipse在线安装SVN1&period;9插件

    1,百度搜索subeclipse,点击第一个: 2,官网说,文档已移动到github wiki上: 3,打开github wiki,复制最新发布版本地址: 4,在eclipse里面,打开help-&g ...

  9. ubuntu 18图形界面

    sh .start_mode.sh: 换操作方式(图形界面,终端界面): 桌面版: 界面中 ctrl + shift + t 打开终端 ctrl + shift + "+" 放大字 ...

  10. VIM编辑配置文件基本操作

    vim  /etc/apt/sources.list 按insert键进入编辑状态 编辑完成以后按ESC退出编辑状态 输入 ":"进入命令状态,常用命令: 1.W:write ,写 ...