《JavaScript高级程序设计》笔记:附录A ECMAScript Harmony
一般性变化
常量
用const关键字声明常量,声明的变量在初始赋值后,就不能进行修改了,如下代码:
const MAX_SIZE = 25;
MAX_SIZE = 10; //报错
块级作用域及其他作用域
for(let i = 0; i < 10; i++){
//执行某些操作
}
console.log(i); //错误! i is not defined
函数
剩余参数与分布参数
剩余参数的语法是三个点后跟一个标识符,如下例子:
function sum (num1, num2, ...nums){
var result = num1 + num2;
for(let i = 0, len = nums.length; i < len; i++){
result += nums[i];
}
return result;
}
var result = sum(1,2,3,4,5,6);
console.log(result); //
分布参数:可以向函数中传入一个数组,然后数组中的元素会映射到函数的每个参数上。如下代码:
var result = sum(...[1,2,3,4,5,6]);
以上代码跟下面等价:
var result = sum.apply(this,[1,2,3,4,5,6]);
默认参数值
要为参数指定默认值,可以在参数名后面直接加上等于号和默认值,如下代码:
function sum(num1,num2 =2){
return num1 + num2;
}
var result1 = sum(5);
var result2 = sum(5,5);
console.log(result1,result2); //7,10
生成器
所谓生成器,其实就是一个对象,它每次能生成一系列值中的一个。要创建生成器,可以让函数通过yield操作符返回某个特殊的值。对于使用yield操作符返回值的函数,调用它时就会创建并返回一个新的Generator实例。然后在这个实例上调用next()方法就能取得生成器的第一个值。此时,执行的是原来的函数,但执行流到yield语句就会停止,只返回特定的值。从这个角度看,yield和return很相似。如果再次调用next()方法,原来函数中位于yield语句后的代码会继续执行,知道再次遇见yield语句时停止执行,此时再返回一个新值,如下代码:
function* myNumbers(){
for(var i =0 ; i < 10; i++){
yield i * 2;
}
}
var generator = myNumbers();
try{
while(true){
document.write(generator.next() + "<br/>")
}
}catch(ex){
//有意没有写代码
}finally{
generator.close();
}
执行上面代码浏览器卡死。来看下面例子:
function* a(){
console.log(11)
yield 'kevin';
console.log(22);
yield 'ivan';
console.log(33);
yield 'wuhan';
return 'yes';
}
var b = a();
console.log(b.next())
console.log(b.next())
console.log(b.next())
console.log(b.next())
结果:
//打印结果:
11
Object { value: "kevin", done: false }
22
Object { value: "ivan", done: false }
33
Object { value: "wuhan", done: false }
Object { value: "yes", done: true }
在需要一系列值,而每一个值又与前一个值存在某种关系的情况下,可以使用生成器。
数组及其他结构
迭代器
普通的对象并没有内置的@@iterator。当然,你也可以给任何想遍历的对象定义@@iterator,如下代码:
var myObject = {
a:2,
b:3
};
Object.defineProperty(myObject,Symbol.iterator,{
enumerable:false,
writable:false,
configurable:true,
value:function(){
var o = this,
idx = 0,
ks = Object.keys(o);
return {
next:function(){
return {
value:o[ks[idx++]],
done:(idx > ks.length)
}
}
}
}
});
//手动遍历myObject
var it = myObject[Symbol.iterator]();
var next1 = it.next();
var next2 = it.next();
var next3 = it.next();
console.log(next1); //{value: 2, done: false}
console.log(next2); //{value: 3, done: false}
console.log(next3); //{value: undefined, done: true}
//用for...of遍历myObject
for(var v of myObject){
console.log(v);
}
//
//
注:我们使用Object.defineProperty()定义了我们自己的@@iterator(主要是为了让它不可枚举),不过注意,我们把符号当做可计算属性名。此外,也可以直接在定义对象时进行声明,比如:
var myObject = {
a:2,
b:3,
[Symbol.iterator]:function(){
/*..*/
}
};
为数组创建迭代器,如下代码:
var colors = ["red","green","blue"];
var iterator = colors[Symbol.iterator]();
console.log(iterator.next()); //{value: "red", done: false}
console.log(iterator.next()); //{value: "green", done: false}
console.log(iterator.next()); //{value: "blue", done: false}
console.log(iterator.next()); //{value: undefined, done: true}
数组领悟
所谓数组领悟,指的是用一组符合某个条件的值来初始化数组。JS中数组领悟的基本形式:
array = [value for each (variable in values) condition];
其中,value是实际会包含在数组中的值,它源自values数组。for each结构会循环values中的每一个值,并将每个值保存在变量variable中,如果保存在variable中的值符合condition条件,就会将这个值添加到结果数组中,如下例子:
var numbers = [0,1,2,3,4,5,6,7,8,9,10]; //把所有元素复制到新数组
var duplicate = [i for each (i in numbers)]; //只把偶数复制到新数组
var evens = [i for each (i in numbers) if (i % 2 == 0)]; //把每个数乘以2后的结果放到新数组中
var doubled = [i*2 for each (i in numbers)]; //把每个奇数乘以3后的结果放到新数组中
var tripledOdds = [i*3 for each (i in numbers) if (i %2 > 0)];
firefox2+是唯一支持数组领悟的浏览器。而且要使用这个功能,必须将<script>的type属性值指定为“application/javascript;version=1.7”
解构赋值
var [name,value] = ["color","red"];
console.log(name,value); //color red var [,value] = ["color","red"];
console.log(value); //red var person = {
name:"Nice",
age:29
};
var {name:personName,age:personAge} = person;
console.log(personName,personAge); //Nice 29
新对象类型
Harmony为JS定义了几个新的对象类型。
代理对象
要创建代理对象,可以使用Proxy.create()方法,传入一个handler(处理程序)对象和一个可选的prototype()原型对象。
var proxy = Proxy.create(handler); //创建一个以myOjbect为原型的代理对象
var proxy = Proxy.create(handler,myObject);
待续
《JavaScript高级程序设计》笔记:附录A ECMAScript Harmony的更多相关文章
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- JavaScript高级程序设计笔记(一)
---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...
- JavaScript高级程序设计笔记之面向对象
说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...
- <javascript高级程序设计>笔记
1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- javaScript高级程序设计笔记 1
核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM 延迟脚本 defer typeof操作符 判断字符类型 返回 undefined boolean s ...
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...
- javaScript高级程序设计笔记 2
Undefinde Null Boolean Number String 基本类型 Object 引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...
- Javascript高级程序设计笔记 <第五章> 引用类型
一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...
- Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)
var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...
随机推荐
- centos7.7离线安装nginx
一.1.安装openssl,因为编译安装nginx需要指定openssl目录 mkdir /data/openssl -p cd /data/openssl wget https://www.open ...
- java 8 学习一(概述)
学习java8的新特性之前,简单看了下从java5开始历代版本的新特性,都是别人总结的. java5.java6.java7.java8的新特性 http://blog.csdn.net/samjus ...
- Pandas | 27 注意事项&窍门
警告和疑难意味着一个看不见的问题.在使用Pandas过程中,需要特别注意的地方. 与Pandas一起使用If/Truth语句 当尝试将某些东西转换成布尔值时,Pandas遵循了一个错误的惯例. 这种情 ...
- Python实现网络图形化界面多人聊天室 - Linux
网络图形化界面多人聊天室 - Linux Windows版本:https://www.cnblogs.com/noonjuan/p/12078524.html 在Python实现网络多人聊天室基础上, ...
- BILIBILI之滑块验证
bilibili的滑动验证码图片比较好玩,和前一篇不大一样. 采用canvas方法,分析发现只找到一个图片,不过,可以通过设置display截图方式获得2张图(完整图片,带缺口的图片),取得图片后接下 ...
- Javascript报错Converting circular structure to JSON
主要是因为对象的互相引用,怎么样才能造成对象的互相引用呢? var a = {}; var b = {}; a.b = b; b.a = a; 怎么解决,反正我试了很多,最后选择深度clone thi ...
- Java 并发系列之六:java 并发容器(4个)
1. ConcurrentHashMap 2. ConcurrentLinkedQueue 3. ConcurrentSkipListMap 4. ConcurrentSkipListSet 5. t ...
- VS C++代码能正确编译 但还是显示红色波浪线 提示"无法打开源文件"
症状细节 我发现很多第三方库的环境部署教程,都会教读者配置 属性VC++目录 -> 包含目录 比如OpenCV的环境配置教程. 这样配置之后能通过编译: 但是,在IDE里,会有一些烦人的红波浪线 ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
- suface 触控笔
触控笔直接就可以书写,顶部橡皮擦可用. 但如果要使用笔上的按键(如单击启动OneNote),必须要用蓝牙进行配对.笔使用一节AAAA电池(九号电池)供电. 连接方法: 准备好surface触控笔,并确 ...