文章目录
前言
主要是记录本书中的难点和高频的知识点，方便后期回顾。
一、变量，作用域，内存
1、引用值和原始值的特点
- 原始值大小固定，因此保存在栈内存上。
- 引用值是对象，存储在堆内存上。引用值得大小不固定，所以保存在堆内存中，而在栈内存中保存引用值的地址。
- 包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。
- 从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
- typeof 操作符可以确定值的原始类型，而instanceof操作符用于确保值的引用类型。
null 是 object 类型，但又不是继承于 Object ，它更像一个历史遗留的 bug 。鉴于太多人在用这个特性，修复它反而会导致成千上万的程序出错。
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
typeof null === 'object'; // true
Object.prototype.toString.call(null); // [object Null]
null instanceof Object; // false
2、 作用域
任何变量（不管是原始值还是引用值）都存在于执行上下文中（也称为作用域），这个上下文（作用域）决定了变量的声明周期，以及他们可以访问代码的哪些部分。执行上下文可以总结如下。
- 执行上下文分为全局上下文，函数上下文，块级上下文。
- 代码执行流每进入一个新上下文，都会创建一个新的作用域链，用于搜索变量和函数。
- 函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃至全局上下文中的变量。
- 函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃至全局上下文中的变量。
- 变量的执行上下文用于确定什么时候释放内存。
3.垃圾回收
- 离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。
- 主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。
- 引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript引擎不再使用这种算法，但某些旧版本的IE仍然会受这种算法的影响，原因是JavaScript会访问非原生JavaScript对象（如DOM元素）。
- 引用计数在代码中存在循环引用时会出现问题。
- 解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引用都应该在不需要时解除引用。
二、 基本引用类型
1.Date时间
要创建日期对象，就使用new操作符来调用Date构造函数：
let now = new Date();
主要有两个方法，Date.parse() 和 Date.UTC()
1.1 Date.parse()
- 比如，要创建一个表示“2019年5月23日”的日期对象，可以使用以下代码：
let someone = new Date(Date.parse("May 23,2019"));
//如果传给Date.parse()的字符串并不表示日期，则该方法会返回NaN
//等价于下面这个方式创建
let someone = new Date("May 23,2019");
1.2 Date.UTC()
Date.UTC()方法也返回日期的毫秒表示，但使用的是跟Date.parse()不同的信息来生成这个值。传给Date.UTC()的参数是年、零起点月数（1月是0,2月是1，以此类推）、日（131）、时（023）、分、秒和毫秒。这些参数中，只有前两个（年和月）是必需的。
如果不提供日，那么默认为1日。其他参数的默认值都是0。下面是使用Date.UTC()的两个例子：
// GMT 时间 2000年1月1日零点
let y2k = new Date(Date.UTC(2000,0));
//GMT 时间2005年5月5日下午5点 55分55秒
let allFives = new Date(Date.UTC(20005, 4,5,17,55,55));
1.3 Date.now()
返回表示方法执行时日期和时间的毫秒数。这个方法可以方便地用在代码分析中。
2.正则表达式
2.1.匹配模式
❑ g：全局模式，表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束。
❑ i：不区分大小写，表示在查找匹配时忽略pattern和字符串的大小写。
❑ m：多行模式，表示查找到一行文本末尾时会继续查找。
❑ y：粘附模式，表示只查找从lastIndex开始及之后的字符串。
❑ u: Unicode模式，启用Unicode匹配。
❑ s:dotAll模式，表示元字符．匹配任何字符（包括\n或\r）。
常用的正则匹配方法：
const checkStr = function(str, type) { // 常用正则验证，注意type大小写
switch (type) {
case 'phone': // 手机号码
return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)
case 'tel': // 座机
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
case 'card': // 身份证
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str)
case 'pwd': // 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
return /^[a-zA-Z]\w{5,17}$/.test(str)
case 'postal': // 邮政编码
return /[1-9]\d{5}(?!\d)/.test(str)
case 'QQ': // QQ号
return /^[1-9][0-9]{4,9}$/.test(str)
case 'email': // 邮箱
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
case 'money': // 金额(小数点2位)
return /^\d*(?:\.\d{0,2})?$/.test(str)
case 'URL': // 网址
return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
case 'IP': // IP
return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str)
case 'date': // 日期时间
return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) ||
/^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
case 'number': // 数字
return /^[0-9]$/.test(str)
case 'english': // 英文
return /^[a-zA-Z]+$/.test(str)
case 'chinese': // 中文
return /^[\u4E00-\u9FA5]+$/.test(str)
case 'lower': // 小写
return /^[a-z]+$/.test(str)
case 'upper': // 大写
return /^[A-Z]+$/.test(str)
case 'HTML': // HTML标记
return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str)
default:
return true
}
}
2.2 RegExp实例方法
2.2.1 exec
RegExp实例的主要方法是exec()，主要用于配合捕获组使用。这个方法只接收一个参数，即要应用模式的字符串。如果找到了匹配项，则返回包含第一个匹配信息的数组；如果没找到匹配项，则返回null。返回的数组虽然是Array的实例，但包含两个额外的属性：index和input。index是字符串中匹配模式的起始位置，input是要查找的字符串。这个数组的第一个元素是匹配整个模式的字符串，其他元素是与表达式中的捕获组匹配的字符串。如果模式中没有捕获组，则数组只包含一个元素。来看下面的例子：
let text = "mon and dad and baby";
let pattern = /mon (and dad (and baby)?)?/ gi;
let matches = pattern.exec(text);
console.log(matches.index); //0
console.log(matches.input); //"mon and dad and baby"
console.log(matches[0]); //"mon and dad and baby"
console.log(matches[1]); // "and dad and baby"
console.log(matches[2]); //"and baby"
在这个例子中，模式包含两个捕获组：最内部的匹配项" and baby"，以及外部的匹配项" and dad"或" and dad and baby"。调用exec()后找到了一个匹配项。因为整个字符串匹配模式，所以matchs数组的index属性就是0。数组的第一个元素是匹配的整个字符串，第二个元素是匹配第一个捕获组的字符串，第三个元素是匹配第二个捕获组的字符串。
如果模式设置了全局标记，则每次调用exec()方法会返回一个匹配的信息。如果没有设置全局标记，则无论对同一个字符串调用多少次exec()，也只会返回第一个匹配的信息。
let text = "cat,bat,sat,fat";
let pattern = /.at/;
let matches = pattern.exec(text);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//0
matches = pattern.exec(text);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//0
上面例子中的模式没有设置全局标记，因此调用exec()只返回第一个匹配项（“cat”）。lastIndex在非全局模式下始终不变。
如果在这个模式上设置了g标记，则每次调用exec()都会在字符串中向前搜索下一个匹配项，如下面的例子所示：
let text = "cat,bat,sat,fat";
let pattern = /.at/g;
let matches = pattern.exec(text);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//3
matches = pattern.exec(text);
console.log(matches.index);//5
console.log(matches[0]);//bat
console.log(pattern.lastIndex);//8
matches = pattern.exec(text);
console.log(matches.index);//10
console.log(matches[0]);//sat
console.log(pattern.lastIndex);//13
这次模式设置了全局标记，因此每次调用exec()都会返回字符串中的下一个匹配项，直到搜索到字符串末尾。注意模式的lastIndex属性每次都会变化。在全局匹配模式下，每次调用exec()都会更新lastIndex值，以反映上次匹配的最后一个字符的索引。
难点：粘附标记
如果设置了粘附标记y,则每次调用exec()就只会在lastIndex的位置上寻匹配项。粘附标记覆盖全局标记
let text = "cat,bat,sat,fat";
let pattern = /.at/y;
let matches = pattern.exec(text);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//3
//以索引3对应的字符开头找不到匹配项，因此exec()返回null
//exec()没找到匹配项，于是将lastIndex设置为0
matches = pattern.exec(text);
console.log(matches);//null
console.log(pattern.lastIndex);//8
//向前设置lastIndex 可以让粘附的模式通过exec()找到下一个匹配项：
pattern.lastIndex = 5;
matches = pattern.exec(text);
console.log(matches.index);//5
console.log(matches[0]);//bat
console.log(pattern.lastIndex);//8
粘附标记这一块有一点难理解，需要使用的时候多体会，这个粘附标记一般在实际项目中使用的很少。
2.2.2 test
正则表达式的另一个方法是test()，接收一个字符串参数。
如果输入的文本与模式匹配，则参数返回true，否则返回false。这个方法适用于只想测试模式是否匹配，而不需要实际匹配内容的情况。test()经常用在if语句中：
let text = "000-00-0000";
let pattern = /\d{3}-\d{2}-\d{4}/;
if(pattern.test(text)){
console.log("The pattern was matched");
}
在这个例子中，正则表达式用于测试特定的数值序列。如果输入的文本与模式匹配，则显示匹配成功的消息。这个用法常用于验证用户输入，此时我们只在乎输入是否有效，不关心为什么无效。
无论正则表达式是怎么创建的，继承的方法toLocaleString()和toString()都返回正则表达式的字面量表示。比如：
let pattern = new RegExp("\\[bc\\]at","gi");
console.log(pattern.toString()); // /\[bc\]at/gi
console.log(pattern.toLocalString());// /\[bc\]at/gi
这里的模式是通过RegExp构造函数创建的，但toLocaleString()和toString()返回的都是其字面量的形式。
注意：正则表达式的valueOf()方法返回正则表达式本身。
2.3 RegExp构造函数属性
RegExp构造函数本身也有几个属性。（在其他语言中，这种属性被称为静态属性。）这些属性适用于作用域中的所有正则表达式，而且会根据最后执行的正则表达式操作而变化。这些属性还有一个特点，就是可以通过两种不同的方式访问它们。换句话说，每个属性都有一个全名和一个简写。下表列出了RegExp构造函数的属性。
通过这些属性可以提取出与exec()和test()执行的操作相关的信息。来看下面的例子：
let text = "this has been a short summer";
let pattern = /(.)hort/g;
if(pattern.test(text)){
console.log(RegExp.input);//this has been a short summer
console.log(RegExp.leftContext);//this has been a
console.log(RegExp.rightContext); //summer
console.log(RegExp.lastMatch);//short
console.log(RegExp.lastParen);//s
}
以上代码创建了一个模式，用于搜索任何后跟"hort"的字符，并把第一个字符放在了捕获组中。不同属性包含的内容如下。
❑ input属性中包含原始的字符串。
❑ leftConext属性包含原始字符串中"short"之前的内容，rightContext属性包含"short"之后的内容。
❑ lastMatch属性包含匹配整个正则表达式的上一个字符串，即"short"。
❑ lastParen属性包含捕获组的上一次匹配，即"s"。
这些属性名也可以替换成简写形式，只不过要使用中括号语法来访问，如下面的例子所示，因为大多数简写形式都不是合法的ECMAScript标识符：
let text = "this has been a short summer";
let pattern = /(.)hort/g;
/**
注意：opera不支持简写属性名
ie不支持多行匹配
*/
if(pattern.test(text)){
console.log(RegExp.$_);//this has been a short summer
console.log(RegExp.["$`"]);//this has been a
console.log(RegExp.["$'"]); //summer
console.log(RegExp.["$&"]);//short
console.log(RegExp.["$+"]);//s
}
RegExp还有其他几个构造函数属性，可以存储最多9个捕获组的匹配项。这些属性通过RegExp.$1RegExp.$9来访问，分别包含第19个捕获组的匹配项。在调用exec()或test()时，这些属性就会被填充，然后就可以像下面这样使用它们：
let text = "this has been a short summer";
let pattern = /(..)or(.)/g;
if(pattern.test(text)){
console.log(RegExp.$1);//sh
console.log(RegExp.$2);//t
}
在这个例子中，模式包含两个捕获组。调用test()搜索字符串之后，因为找到了匹配项所以返回true，而且可以打印出通过RegExp构造函数的$1和$2属性取得的两个捕获组匹配的内容。
注意 :RegExp构造函数的所有属性都没有任何Web标准出处，因此不要在生产环境中使用它们
3.单例内置对象
ECMA-262对内置对象的定义是“任何由ECMAScript实现提供、与宿主环境无关，并在ECMAScript程序开始执行时就存在的对象”。这就意味着，开发者不用显式地实例化内置对象，因为它们已经实例化好了。前面我们已经接触了大部分内置对象，包括Object、Array和String。本节介绍ECMA-262定义的另外两个单例内置对象：Global和Math。
3.1 eval 方法
该方法可能是整个ECMAScript语言中最强大的了，它就是eval()。这个方法就是一个完整的ECMAScript解释器，它接收一个参数，即一个要执行的ECMAScript（JavaScript）字符串
第一种情况
eval("let msg = 'hello world'");
console.log(msg);//Reference Error :msg is not defined
通过eval()定义的任何变量和函数都不会被提升，这是因为在解析代码的时候，它们是被包含在一个字符串中的。它们只是在eval()执行的时候才会被创建
另一种情况：
在严格模式下，在eval()内部创建的变量和函数无法被外部访问。换句话说，最后两个例子会报错。同样，在严格模式下，赋值给eval也会导致错误：
"use static";
eval = "hi";//导致错误
小节
解释代码字符串的能力是非常强大的，但也非常危险。在使用eval()的时候必须极为慎重，特别是在
解释用户输入的内容时。因为这个方法会对XSS利用暴露出很大的攻击面。恶意用户可能插入会导致你网站或应用崩溃的代码。
当代码开始执行时，全局上下文中会存在两个内置对象：Global和Math。其中，Global对象在大多数ECMAScript实现中无法直接访问。不过，浏览器将其实现为window对象。所有全局变量和函数都是Global对象的属性。Math对象包含辅助完成复杂计算的属性和方法。
三、集合引用类型
1.Array
ES6里面新增的用于创建数组的静态方法，from()和of()
1.1 Array.from()
Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个length属性和可索引元素的结构。这种方式可用于很多场合
//1、字符串会被拆分为单字符数组
console.log(Array.from('Matt'));//["M","a","t","t"];
//2、可以使用from()将集合和映射转换成一个新数组
const m = new Map().set(1,2).set(3,4);
const s = new Set().add(1).add(2).add(3).add(4);
console.log(Array.from(m));//[[1,2],[3,4]];
console.log(Array.from(s));//[1,2,3,4];
//3、Array.from()对现有数组执行浅复制
const a1 = [1,2,3,4];
const a2 = Array.from(a1);
console.log(a1);//[1,2,3,4];
alert(a1 === a2);// false
//4、可以使用任何可迭代对象
const iter = {
*[symbol.iterator](){
yield 1;
yield 2;
yield 3;
yield 4;
}
};
console.log(Array.from(iter));//[1,2,3,4]
//4、arguments 对象可以被轻松地转换为数组
function getArgsArray(){
return Array.from(arguments);
};
console.log(getArgsArray(1,2,3,4));
//[1,2,3,4]
//5、from()也能转换带有必要属性的自定义对象
const arrayLikeObject = {
0:1,
1:2,
2:3,
3:4,
length:4
};
console.log(Array.from(arrayLikeObject));//[1,2,3,4];
Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函数中this的值。但这个重写的this值在箭头函数中不适用。
const a1 = [1,2,3,4];
const a2 = Array.from(a1,x=> x** 2);
const a3 = Array.from(a1,function(x){
return x** this.exponent
},{exponent:2});
console.log(a2);//[1,4,9,16];
console.log(a3);//[1,4,9,16]
1.2 Array.of()
Array.of()可以把一组参数转换为数组。这个方法用于替代在ES6之前常用的Array.prototype.slice.call(arguments)，一种异常笨拙的将arguments对象转换为数组的写法：
console.log(Array.of(1,2,3,4));//[1,2,3,4];
console.log(Array.of(undefined));//[undefined]
2.数组空位
使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）。ECMAScript会将逗号之间相应索引位置的值当成空位，ES6规范重新定义了该如何处理这些空位。
可以向下面这样创建一个空位数组：
const options = [,,,,,];//创建包含5个元素的数组
console.log(options.length);//5
console.log(options);//[,,,,,];
ES6新增方法普遍将这些空位当成存在的元素，只不过值为undefined：
const options = [1,,,,5];
for(const option of options){
console.log(option == undefined);
}
//false
//true
//true
//true
//false
但是有些方法则会忽略这个空位，但具体的行为也因方法而异
const options = [1,,,,5];
//map()会跳过空位置
console.log(options.map(()=>6));
//[6,undefined,undefined,undefined,6];
//join()视空位置为空字符串
console.log(options.join('-'));
//"1----5"
警告
由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实需要空位，则可以显式地用undefined值代替。
3.检测数组
一个经典的ECMAScript问题是判断一个对象是不是数组。在只有一个网页（因而只有一个全局作用域）的情况下，使用instanceof操作符就足矣：
if(value instanceof Array){
//操作数组
}
使用这个方法要注意的内容：
使用instanceof 的问题假设只有一个全局执行上下文。如果网页有多个框架，则可能涉及两个不同的执行上下文，因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在第二个框架内本地创建的数组。
如何解决上面这个问题呢：
为了解决这个问题，ECMAScript提供了Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。来看下面的例子：
if(Array.isArray(value)){
//操作数组
}
4.迭代器方法
在ES6中，Array的原型上暴露了3个用于检索数组内容的方法：keys(), values() 和 entries()。 keys()返回数组索引的迭代器，values()返回数组元素的迭代器，而entries()返回索引/值对的迭代器：
const a = ["foo","bar","baz","qux"];
//因为这些方法都返回迭代器，所以可以将他们的内容通过Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.Values());
const aEntries = Array.from(a.entries());
console.log(aKeys);//[0,1,2,3];
console.log(aValues);//["foo","bar","baz","qux"];
console.log(aEntries); //[[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]];
使用ES6的解构可以非常容易地在循环中拆分键值对：
const a = ["foo","bar","baz","qux"];
for(const [idx,element] of a.entries()){
alert(idx);
alert(element);
// 0
// foo
// 1
//bar
// 2
//baz
//3
//qux
}
虽然这些方法是ES6规范定义的，但在2017年底的时候仍有浏览器没有实现它们
5. 复制和填充方法
ES6新增了两个方法：批量复制方法copyWithin()，以及填充数组方法fill()。这两个方法的函数签名类似，
都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小。
5.1 fill()方法
使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上它得到的一个正索引：
const zeroes = [0,0,0,0,0];
// 用5 填充整个数组
zeros.fill(5);
console.log(zeroes);//[5,5,5,5,5];
zeros.fill(0); //重置
//用6 填充索引大于等于3的元素
zeros.fill(6,3);
console.log(zeroes); //[0,0,0,6,6];
zeroes.fill(0); //重置
//用7填充索引大于等于1，且小于3的元素
zeroes.fill(7,1,3);
console.log(zeroes);//[0,7,7,0,0];
zeroes.fill(0);//重置
//用8填充索引大于等于1且小于4的元素
//(-4 + zeroes.length = 1)
//(-1 + zeroes.length = 4)
zeroes.fill(8,-4,-1);
console.log(zeroes); //[0,8,8,8,0]
fill() 静默忽略超出数组边界，零长度及方向相反的索引范围：
const zeroes = [0,0,0,0,0];
//索引过低，忽略
zeroes.fill(1,-10,-6);
console.log(zeroes);//[0,0,0,0,0]
//索引过高，忽略
zeroes.fill(1,10,15);
cosole.log(zeroes);//[0,0,0,0,0];
//索引反向，忽略
zeroes.fill(2,4,2);
console.log(zeroes);//[0,0,0,0,0];
//部分索引可用，填充可用部分
zeroes.fill(4,3,10);
console.log(zeroes);//[0,0,0,4,4]
5.2 copyWithin()方法
与fill()不同，copyWithin()会按照指定范围
浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。开始索引和结束索引则与fill()使用同样的计算方法：
let ints,
reset = ()=>ints = [0,1,2,3,4,5,6,7,8,9];
reset();
//从ints 中复制索引0开始的内容，插入到索引5开始的位置，在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints);//[0,1,2,3,4,0,1,2,3,4];
reset();
//从ints中复制索引5开始的内容，插入到索引0开始的位置
ints.copyWithin(0,5);
console.log(ints); //[5,6,7,8,9,5,6,7,8,9];
reset();
//从ints中复制索引0 开始到索引3结束的内容，插入到索引4开始的位置
ints.copyWithin(4,0,3);
alert(ints);//[0,1,2,3,0,1,2,7,8,9];
reset();
//JavaScript引擎会在插值前会完整复制范围内的值，因此复制期间不存在重写的风险
ints.copyWithin(2,0,6);
alert(ints);//[0,1,0,1,2,3,4,5,8,9]
reset();
//支持负索引值，与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4,-7,-3);
alert(ints); //[0,1,2,3,4,5,3,4,5,6];
copyWithin()静默忽略超出数组边界，零长度及方向相反的索引范围
6.转换方法
所有对象都有toLocaleString()、toString()和valueOf()方法。其中，valueOf()返回的还是数组本身。而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说，对数组的每个值都会调用其toString()方法，以得到最终的字符串。来看下面的例子：
let colors = ["red","blue","green"];
alert(colors.toString());//red,blue,green
alert(colors.valueOf());//red,blue,green
alert(colors);//red,blue,green
结果分析
首先是被显式调用的toString()和valueOf()方法，它们分别返回了数组的字符串表示，即将所有字符串组合起来，以逗号分隔。最后一行代码直接用alert()显示数组，因为alert()期待字符串，所以会在后台调用数组的toString()方法，从而得到跟前面一样的结果。
注意 如果数组中某一项是null或undefined，则在join()、toLocaleString()、toString()和valueOf()返回的结果中会以空字符串表示。
7.栈方法
ECMAScript给数组提供几个方法，让它看起来像是另外一种数据结构。数组对象可以像栈一样，也就是一种限制插入和删除项的数据结构。栈是一种
后进先出（LIFO, Last-In-First-Out）的结构，也就是最近添加的项先被删除。数据项的插入（称为推入，push）和删除（称为弹出，pop）只在栈的一个地方发生，即栈顶。ECMAScript数组提供了push()和pop()方法，以实现类似栈的行为。
push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。pop()方法则用于删除数组的最后一项，同时减少数组的length值，返回被删除的项。来看下面的例子：
8.队列方法
就像栈是以LIFO形式限制访问的数据结构一样，队列以先进先出（FIFO, First-In-First-Out）形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据。因为有了在数据末尾添加数据的push()方法，所以要模拟队列就差一个从数组开头取得数据的方法了。这个数组方法叫shift()，它会删除数组的第一项并返回它，然后数组长度减1。使用shift()和push()，可以把数组当成队列来使用：
9.排序方法
数组有两个方法可以用来对元素重新排序：reverse()和sort()。顾名思义，reverse()方法就是将数组元素反向排列。比如：
这里主要说一下sort方法：
- 默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在
每一项上调用String()转型函数，然后比较字符串来决定顺序。即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。
看下面的例子
let values = [0,1,5,10,15];
values.sort();
alert(values); //0,1,10,15,5
所以当我们直接使用sort方法来进行排序肯定是有问题的，这个结果不是我们想要的，我们可以给sort犯法传递一个比较函数
一个简单的比较函数，升序
function compare(value1,value2){
if(value1<value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
这个比较函数可以适用于大多数数据类型，可以把它当作参数传给sort()方法，如下所示：
let values = [0,1,5,10,15];
values.sort(compare);
alert(values);//0,1,5,10,15;
我的理解是：当我们传入一个比较函数后，相当于我们直接把判断结果给sort了，这时候sort根据比较函数的结果进行排序
降序的比较函数
function compare(value1,value2){
if(value1<value2){
return 1;
}else if(value1 > value2){
return -1;
}else{
return 0;
}
}
let values = [0,1,5,10,15];
values.sort(compare);
alert(values);//15,10,5,1,0
重点 此外，这个比较函数也可以简写成箭头函数
let values = [0,1,5,10,15];
values.sort((a,b)=>a<b? 1: a>b? -1 : 0);
alert(values);//15,10,5,1,0
10.操作方法
1.slice方法
方法slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。记住，这个操作不影响原始数组。来看下面的例子：
2.splice方法
或许最强大的数组方法就属splice()了，使用它的方式可以有很多种。splice()的主要目的是在数组中间插入元素，但有3种不同的方式使用这个方法。
❑ 删除。需要给splice()传2个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如splice(0,2)会删除前两个元素。
❑ 插入。需要给splice()传3个参数：开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。比如，splice(2, 0,“red”, “green”)会从数组位置2开始插入字符串"red"和"green"。
❑ 替换。splice()在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2, 1, “red”,“green”)会在位置2删除一个元素，然后从该位置开始向数组中插入"red"和"green"。
splice()方法始终返回这样一个数组，它包含从数组中被删除的元素（如果没有删除元素，则返回空数组）
11.搜索和位置方法
ECMAScript提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索。
1.严格相等
ECMAScript提供了3个严格相等的搜索方法：indexOf()、lastIndexOf()和includes()。其中，前两个方法在所有版本中都可用，而第三个方法是ECMAScript 7新增的。这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。indexOf()和includes()方法从数组前头（第一项）开始向后搜索，而lastIndexOf()从数组末尾（最后一项）开始向前搜索。
indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时，会使用全等（===）比较，也就是说两项必须严格相等。下面来看一些例子：
let numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));//3
alert(numbers.lastIndexOf(4));//5
alert(numbers.includes(4));//true
alert(numbers.indexOf(4, 4));//5
alert(numbers.lastIndexOf(4, 4));//3
alert(numbers.includes(4, 7));//false
2.断言函数
ECMAScript也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。
断言函数接收3个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。
find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数，用于指定断言函数内部this的值。
这两个方法我就不说了，很常见的方法:
find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数，用于指定断言函数内部this的值。并且找到匹配项后，这两个方法都不再继续搜索。
3.迭代方法
ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中this的值）。传给每个方法的函数接收3个参数：数组元素、元素索引和数组本身。因具体方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值。数组的5个迭代方法如下。
❑ every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。
❑ filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。
❑ forEach()：对数组每一项都运行传入的函数，没有返回值。
❑ map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
❑ some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。
这些方法都不改变调用它们的数组。
4.归并方法
ECMAScript为数组提供了两个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。
这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的以之为归并起点的初始值。传给reduce()和reduceRight()的函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。
主要作用就是执行累加数组中素有数组的操作
let values = [1,2,3,4,5];
let sum = values.reduce((prev,cur,index,array)=>prev + cur);
alert(sum); //15
第一次执行归并函数时，prev是1, cur是2。第二次执行时，prev是3（1 + 2）, cur是3（数组第三项）。如此递进，直到把所有项都遍历一次，最后返回归并结果。
reduceRight()方法与之类似，只是方向相反。来看下面的例子
let values = [1,2,3,4,5];
let sum = values.reduceRight(function(prev,cur,index,array){
return prev + cur;
});
alert(sum); //15
在这里，第一次调用归并函数时prev是5，而cur是4。当然，最终结果相同，因为归并操作都是简单的加法。
12.定型数组
定型数组（typed array）是ECMAScript新增的结构，目的是提升向原生库传输数据的效率。实际上，JavaScript并没有“TypedArray”类型，它所指的其实是一种特殊的包含数值类型的数组。为理解如何使用定型数组，有必要先了解一下它的用途。
下面介绍下定型数组出现的历史环境
- 随着浏览器的流行，不难想象人们会满怀期待地通过它来运行复杂的3D应用程序。早在2006年，Mozilla、Opera等浏览器提供商就实验性地在浏览器中增加了用于渲染复杂图形应用程序的编程平台，无须安装任何插件。其目标是开发一套JavaScript API，从而充分利用3D图形API和GPU加速，以便在元素上渲染复杂的图形。
WebGL - 最后的JavaScript API是基于OpenGL ES（OpenGL for Embedded Systems）2.0规范的。OpenGL ES是OpenGL专注于2D和3D计算机图形的子集。这个新API被命名为WebGL（Web Graphics Library），于2011年发布1.0版。有了它，开发者就能够编写涉及复杂图形的应用程序，它会被兼容WebGL的浏览器原生解释执行。
- 在WebGL的早期版本中，因为JavaScript数组与原生数组之间不匹配，所以出现了性能问题。图形驱动程序API通常不需要以JavaScript默认双精度浮点格式传递给它们的数值，而这恰恰是JavaScript数组在内存中的格式。因此，每次WebGL与JavaScript运行时之间传递数组时，WebGL绑定都需要在目标环境分配新数组，以其当前格式迭代数组，然后将数值转型为新数组中的适当格式，而这些要花费很多时间。
定型数组
- 这当然是难以接受的，Mozilla为解决这个问题而实现了CanvasFloatArray。这是一个提供JavaScript接口的、C语言风格的浮点值数组。JavaScript运行时使用这个类型可以分配、读取和写入数组。这个数组可以直接传给底层图形驱动程序API，也可以直接从底层获取到。最终，CanvasFloatArray变成了Float32Array，也就是今天定型数组中可用的第一个“类型”。
1.ArrayBuffer
Float32Array实际上是一种“视图”，可以允许JavaScript运行时访问一块名为ArrayBuffer的预分配内存。ArrayBuffer是所有定型数组及视图引用的基本单位。
SharedArrayBuffer是ArrayBuffer的一个变体，可以无须复制就在执行上下文间传递它。
ArrayBuffer()是一个普通的JavaScript构造函数，可用于在内存中分配特定数量的字节空间。
const buf = new ArrayBuffer(16);//在内存中分配16字节
alert(buf.byteLength);//16
ArrayBuffer一经创建就不能再调整大小，不过，可以使用slice()复制其全部或部分到一个新实例中。
const buf1 = new ArrayBuffer(16);
const buf2 = buf1.slice(4,12);
alert(buf2.byteLength); //8
ArrayBuffer某种程度上类似于C++的malloc()，但也有几个明显的区别。
❑ malloc()在分配失败时会返回一个null指针。ArrayBuffer在分配失败时会抛出错误。
❑ malloc()可以利用虚拟内存，因此最大可分配尺寸只受可寻址系统内存限制。ArrayBuffer分配的内存不能超过Number.MAX_SAFE_INTEGER（253-1）字节。
❑ malloc()调用成功不会初始化实际的地址。声明ArrayBuffer则会将所有二进制位初始化为0。
❑ 通过malloc()分配的堆内存除非调用free()或程序退出，否则系统不能再使用。而通过声明ArrayBuffer分配的堆内存可以被当成垃圾回收，不用手动释放。
不能仅通过对ArrayBuffer的引用就读取或写入其内容。要读取或写入ArrayBuffer，就必须通过视图。视图有不同的类型，但引用的都是ArrayBuffer中存储的二进制数据。
2.DataView
第一种允许你读写ArrayBuffer的视图是DataView。这个视图专为文件I/O和网络I/O设计，其API支持对缓冲数据的高度控制，但相比于其他类型的视图性能也差一些。DataView对缓冲内容没有任何预设，也不能迭代。
必须在对已有的ArrayBuffer读取或写入时才能创建DataView实例。这个实例可以使用全部或部分ArrayBuffer，且维护着对该缓冲实例的引用，以及视图在缓冲中开始的位置。
要通过DataView读取缓冲，还需要几个组件。
❑ 首先是要读或写的字节偏移量。可以看成DataView中的某种“地址”。
❑ DataView应该使用ElementType来实现JavaScript的Number类型到缓冲内二进制格式的转换。
❑ 最后是内存中值的字节序。默认为大端字节序。
2.1ElementType
DataView对存储在缓冲内的数据类型没有预设。它暴露的API强制开发者在读、写时指定一个ElementType，然后DataView就会忠实地为读、写而完成相应的转换。
ECMAScript 6支持8种不同的ElementType（见下表）。
DataView为上表中的每种类型都暴露了get和set方法，这些方法使用byteOffset（字节偏移量）定位要读取或写入值的位置。类型是可以互换使用的，如下例所示：
//在内存中分配连个字节并声明一个DateView
const buf = new ArrayBuffer(2);
const view = new DataView(buf);
//说明整个缓冲确实所有二进制都是0
//检查第一个和第二个字符
alert(view.getInt8(0));//0
alert(view.getInt8(1)); //0
//检查整个缓存
alert(view.getInt16(0));//0
//将整个缓存都设置为1
//255的二进制表示是11111111(2^8-1);
view.setUint8(0,255);
//DateView 会自动把数据转换为特定的ElementType
//255的十六进制表示的是0xFF
view.setUint8(1,0xFF);
//现在，缓存里都是1了
//如果把它当成而部署的有符合整数，则应该是-1
alert(view.getInt16(0));//-1
2.2字节序
前面例子中的缓冲有意回避了字节序的问题。“字节序”指的是计算系统维护的一种字节顺序的约定。DataView只支持两种约定：大端字节序和小端字节序。大端字节序也称为“网络字节序”，意思是最高有效位保存在第一个字节，而最低有效位保存在最后一个字节。小端字节序正好相反，即最低有效位保存在第一个字节，最高有效位保存在最后一个字节。
JavaScript运行时所在系统的原生字节序决定了如何读取或写入字节，但DataView并不遵守这个约定。对一段内存而言，DataView是一个中立接口，它会遵循你指定的字节序。DataView的所有API方法都以大端字节序作为默认值，但接收一个可选的布尔值参数，设置为true即可启用小端字节序。
3.定型数组
它特定于一种ElementType且遵循系统原生的字节序。相应地，定型数组提供了适用面更广的API和更高的性能。设计定型数组的目的就是提高与WebGL等原生库交换二进制数据的效率。由于定型数组的二进制表示对操作系统而言是一种容易使用的格式，JavaScript引擎可以重度优化算术运算、按位运算和其他对定型数组的常见操作，因此使用它们速度极快。
创建定型数组的方式包括读取已有的缓冲、使用自有缓冲、填充可迭代结构，以及填充基于任意类型的定型数组。另外，通过.from()和.of()也可以创建定型数组：
//创建一个12字节的缓存
const buf = new ArrayBuffer(12)；
//创建一个引用改缓冲的Int32Array
const ints = new Int32Array(buf);
//这个定型数组知道自己的每个远速速需要4个字节
//因此长度为3
alert(ints.length);//3
//创建一个长度6的Int32Array
const ints2 = new Int32Array(6);
//每个数值使用4字节，因此ArrayBuffer是24字节
alert(ints2.length);//6
4.定型数组支持的方法
定型数组有一个Symbol.iterator符号属性，因此可以通过for…of循环和扩展操作符来操作：
const ints = new Int16Array([1,2,3]);
for(const int of ints){
alert(int);
}
//1
//2
//3
alert(Math.max(...ints));//3
合并、复制和修改定型数组
定型数组同样使用数组缓冲来存储数据，而数组缓冲无法调整大小。因此，下列方法不适用于定型数组：
❑ concat()
❑ pop()
❑ push()
❑ shift()
❑ splice()
❑ unshift()
不过，定型数组也提供了两个新方法，可以快速向外或向内复制数据：set()和subarray()。
//创建长度为8的int16数组
const container = new Int16Array(8);
//把定型数组复制为前4个值
//偏移量默认为索引0
container.set(Int8Array.of(1,2,3,4);
console.log(container);//[1,2,3,4,0,0,0,0]
//把普通数组复制为4个值
//偏移量4表示从索引4开始插入
container.set([5,6,7,8],4);
console.log(container);//[1,2,3,4,5,6,7,8]
//溢出会抛出错误
container.set([5,6,7,8],7);
//RangeError
subarray()执行与set()相反的操作，它会基于从原始定型数组中复制的值返回一个新定型数组。复制值时的开始索引和结束索引是可选的：
const source = Int16Array.of(2,4,6,8);
//把整个数组复制为一个同类型的新数组
const fullCopy = source.subarray();
console.log(fullCopy);//[2,4,6,8]
//从索引2开始负责制数组
const halfCopy = source.subarray(2);
console.log(halfCopy);[6,8]
//从索引1开始复制到索引3
const partialCopy = source.subarray(1,3);
console.log(partialCopy);//[4,6]
定型数组没有原生的拼接能力，但使用定型数组API提供的很多工具可以手动构建：
13.Map
ECMAScript 6以前，在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此TC39委员会专门为“键/值”存储定义了一个规范。
作为ECMAScript 6的新增特性，Map是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map的大多数特性都可以通过Object类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。
1.基本API
使用new关键字和Map构造函数可以创建一个空映射：
const m = new Map();
如果想在创建的同时初始化实例，可以给Map构造函数传入一个可迭代对象，需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中：
//使用嵌套数组初始化映射
const m1 = new Map([
["key1":"val1"],
["key2","val2"],
["key3","val3"]
]);
alert(m1.size);//3
//使用自定义迭代器初始化映射
const m2 = new Map({
[Symbol.iterator]:function*(){
yield ["key1","val1"];
yield ["key2","val2"];
yield ["key3","val3"];
}
});
alert(m2.size);//3
//映射期待的键值对，无论是否提供
const m3 = new Map([[]]);
alert(m3.has(undefined));//true
alert(m3.get(undefined));//undefined
初始化之后，可以使用set()方法再添加键/值对。另外，可以使用get()和has()进行查询，可以通过size属性获取映射中的键/值对的数量，还可以使用delete()和clear()删除值。
const m = new Map();
alert(m.has("firstName"));//false
alert(m.get("firstName"));//undefined
alert(m.size);//0
m.set("first","Matt").set("lastName","Frisble");
alert(m.has("firstName"));//true
alert(m.get("firstName"));//Matt
alert(m.size);//2
m.delete("firtName");//只删除这一个键值对
alert(m.has("firstName"));//false
alert(m.has("lastName"));//true
alert(m.size);
m.clear();//清除这个映射实例中的所有键值对
alert(m.has("firstName"));//false
alert(m.has("lastName"));//false
alert(m.size);//0
set()方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明：
const m = new Map().set("key1","val1");
m.set("key2","val2").set("key3","val3");
alert(m.size);//3
与Object只能使用数值、字符串或符号作为键不同，Map可以使用任何JavaScript数据类型作为键。Map内部使用SameValueZero比较操作（ECMAScript规范内部定义，语言中不能使用），基本上相当于使用严格对象相等的标准来检查键的匹配性。与Object类似，映射的值是没有限制的。
const m = new Map();
const functionKey = function(){};
const symbolKey = symbol();
const objectKey = new Object();
m.set(functionKey,"functionValue");
m.set(symbolKey,"symbolValue");
m.set(objectKey,"objectValue");
alert(m.get(functionKey));//functionValue
alert(m.get(symbolKey));//symbolValue
alert(m.get(objectKey));//objectValue
//SameValueZero比较意味着独立实例不冲突
alert(m.get(function(){}));//undefined
与严格相等一样，在映射中用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变：
const m = new Map();
const objKey = {},
objVal = {},
arrKey = [],
arrVal = [];
m.set(objKey,objVal);
m.set(arrKey,arrVal);
objKey.foo = "foo";
objVal.bar = "bar";
arrKey.push("foo");
arrVal.push("bar");
console.log(m.get(objKey));//{bar:"bar"}
console.log(m.get(arrKey));//["bar"]
SameValueZero比较也可能导致意想不到的冲突：
const m = new Map();
const a = 0/"",//NaN
b= 0/"",//NaN
pz = +0,
nz = -0;
alert(a ===b);//false
alert(pz ===nz);//true
m.set(a,"foo");
m.set(pz,"bar");
alert(m.get(b));//foo
alert(m.get(nz));//bar
注意 SameValueZero是ECMAScript规范新增的相等性比较算法。关于ECMAScript的相等性比较，可以参考MDN文档中的文章“Equality Comparisons and Sameness”。
2.顺序与迭代
与Object类型的一个主要差异是，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。
映射实例可以提供一个迭代器（Iterator），能以插入顺序生成[key, value]形式的数组。可以通过entries()方法（或者Symbol.iterator属性，它引用entries()）取得这个迭代器：
const m = new Map([
"key1":"val1",
"key2":"val2",
"key3":"val3"
]);
alert(m.entries == m[Symbol.iterator]);//true
for(let pair of m.entries()){
alert(pair);
}
//[key1,val1]
//[key2,val2]
//[key3,val3]
for(let pair of m[Symbol.iterator]()){
alert(pair);
//[key1,val1]
//[key2,val2]
//[key3,val3]
}
因为entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组：
const m = new Map([
"key1":"val1",
"key2":"val2",
"key3":"val3"
]);
console.log([...m]);//[[key1,val1],[key1,val2],[key3,val3]]
如果不使用迭代器，而是使用回调方式，则可以调用映射的forEach(callback, opt_thisArg)方法并传入回调，依次迭代每个键/值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部this的值：
const m = new Map([
"key1":"val1",
"key2":"val2",
"key3":"val3"
]);
m.forEach((val,key)=>alert(`${key}->${val}`));
//key1 -> val1
//key2 ->val3
//key3 -> val3
keys()和values()分别返回以插入顺序生成键和值的迭代器：
const m = new Map([
"key1":"val1",
"key2":"val2",
"key3":"val3"
]);
for(let key of m.keys){
alert(key);
}
//key1
//key2
//key3
for(let key of m.values()){
alert(key);
}
//value1
//value2
//value3
键和值在迭代器遍历时是可以修改的，但映射内部的引用则无法修改。当然，这并不妨碍修改作为键或值的对象内部的属性，因为这样并不影响它们在映射实例中的身份：
const m1 = new Map([
["key1","val1"]
]);
//作为键的字符串原始值是不能修改的
for(let key of m.keys()){
key = "newkey";
alert(key);//newKey
alert(m1.get("key1"));//val1
}
const keyObj = {id:1};
const m = new Map([
["key1":"val1"]
]);
//修改了作为建的对象的属性，但对象在映射内部仍然引用相同的值
for(let key of m.key()){
key.id = "newKey";
alert(key);//{id:"newKey"}
alert(m.get(keyObj));//val1
alert(keyObj);//{id:"newKey"}
}
3.选择Object 还是Map
对于多数Web开发任务来说，选择Object还是Map只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。
1.内存占用
Object和Map的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键/值对。
2.插入性能
向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳。
3.查找速度
与插入不同，从大型Object和Map中查找键/值对的性能差异极小，但如果只包含少量键/值对，则Object有时候速度更快。在把Object当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object更好一些。
4.删除性能
使用delete删除Object属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为undefined或null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map的delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择Map。
14.weakMap
ECMAScript 6新增的“弱映射”（WeakMap）是一种新的集合类型，为这门语言带来了增强的键/值对存储机制。WeakMap是Map的“兄弟”类型，其API也是Map的子集。WeakMap中的“weak”（弱），描述的是JavaScript垃圾回收程序对待“弱映射”中键的方式。
基本API
可以使用new 关键字实例化一个空的weakMap:
const wm = new WeakMap();
若映射中的键只能是Object 或者继承Object的类型，尝试使用功能非对象的设置建会抛出TypeError。值的类型没有限制。
如果想在初始化时填充若映射，则构造函数课可以接收一个可迭代对象，其中需要包含键值对数值。
可迭代对象中的每个键值对都会按照迭代顺序插入新实例中：
const key1 = {id:1},
key2= {id:2},
key3 = {id:3};
//使用嵌套数组初始化若映射
const vm1 = new WeakMap([
[key1,"val1"],
[key2,"val2"],
[key3,"val3"]
]);
alert(vm1.get(key1));//val1
alert(vm1.get(key2));//val2
alert(vm1.get(key3));//val3
//初始化是全有或全无的操作
//只要有一个键无效就会抛出错误，导致整个初始化失败
const vm2 = new WeakMap([
[key1,"val1"],
["BADKEY","val2"],
[key3,"val3"]
]);
//TypeError :Invalid value used as WeakMap key
typeof vm2;
//ReferenceEroor:vm2 is not defined
//原始值可以包装成对象再用作键
const stringKey = new String("key1");
const vm3 = new WeakMap([
stringKey,"val1"
]);
alert(vm3.get(stringKey);//"val1"
初始化之后可以使用set()再添加键/值对，可以使用 get()和has()查询，还可以使用delete(）删除：
const vm = new WeakMap();
const key1 = {id:1},
key = {id:2};
alert(vm.has(key1));//false
alert(vm.get(key1));//undefined
vm.set(key1,"Matt").set(key2,"Frisbie");
alert(vm.has(key1));//true
alert(vm.get(key1));//Matt
vm.delete(key1);//只删除这一个键值对
alert(vm.has(key1));//false
alert(vm.has(key2));//true
set()方法返回若映射实例，因此可以把多个操作连缀起来，包括初始化声明：
const key1 = {id:1},
key2 = {id:2},
key3 = {id:3};
const vm = new WeakMap().set(key1,"val1");
vm.set(key2,"val2").set(key3,"val3");
alert(vm.get(key1));//val1
alert(vm.get(key2));//val2
alert(vm.get(key3));//val3
1.弱键
WeakMap中“weak”表示弱映射的键是“弱弱地拿着”的。意思就是，这些键不属于正式的引用，不会阻止垃圾回收。但要注意的是，弱映射中值的引用可不是“弱弱地拿着”的。只要键存在，键/值对就会存在于映射中，并被当作对值的引用，因此就不会被当作垃圾回收。
看一下这个例子
const vm = new WeakMap();
vm.set({},"val");
set()方法初始化了一个新对象并将它用作一个字符串的键。因为没有指向这个对象的其他引用，所以当这行代码执行完成后，这个对象键就会被当作垃圾回收。然后，这个键/值对就从弱映射中消失了，使其成为一个空映射。在这个例子中，因为值也没有被引用，所以这对键/值被破坏以后，值本身也会成为垃圾回收的目标。
再看一个稍微不同的例子：
const vm = new WeakMap();
const contaianer = {
key:{}
};
vm.set(container.key,"val");
function removeReference(){
contaianer.key = null;
}
这一次，container对象维护着一个对弱映射键的引用，因此这个对象键不会成为垃圾回收的目标。不过，如果调用了removeReference()，就会摧毁键对象的最后一个引用，垃圾回收程序就可以把这个键/值对清理掉。
2.不可迭代对象
因为WeakMap中的键/值对任何时候都可能被销毁，所以没必要提供迭代其键/值对的能力。当然，也用不着像clear()这样一次性销毁所有键/值的方法。WeakMap确实没有这个方法。因为不可能迭代，所以也不可能在不知道对象引用的情况下从弱映射中取得值。即便代码可以访问WeakMap实例，也没办法看到其中的内容。
WeakMap实例之所以限制只能用对象作为键，是为了保证只有通过键对象的引用才能取得值。如果允许原始值，那就没办法区分初始化时使用的字符串字面量和初始化之后使用的一个相等的字符串了。
3.使用弱映射
WeakMap实例与现有JavaScript对象有着很大不同，可能一时不容易说清楚应该怎么使用它。这个问题没有唯一的答案，但已经出现了很多相关策略。
1.私有变量
弱映射造就了在JavaScript中实现真正私有变量的一种新方式。前提很明确：私有变量会存储在弱映射中，以对象实例为键，以私有成员的字典为值。
下面是一个示例实现：
const vm = new WeakMap();
class User{
constructor(id){
this.idProperty = Symbol('id');
this.setId(id);
}
setPrivate(property,value){
const privateMembers = vm.get(this) || {};
privateMembers[property] = value;
vm.set(this,privateMembers);
}
getPrivate(property){
return vm.get(this)[property];
}
setId(id){
this.setPrivate(this.idProperty,id);
}
getId(){
return this.getPrivate(this.idProperty);
}
}
const user = new User(123);
alet(user.getId());//123
user.setId(456);
alert(user.getId());//456
//并不是真正私有的
alert(vm.get(user)[user.idProperty]);// 456
慧眼独具的读者会发现，对于上面的实现，外部代码只需要拿到对象实例的引用和弱映射，就可以取得“私有”变量了。为了避免这种访问，可以用一个闭包把WeakMap包装起来，这样就可以把弱映射与外界完全隔离开了：
const User =(()=>{
const vm = new WeakMap();
class User{
constructor(id){
this.idProperty = Symbol('id');
this.setId(id);
}
setPrivate(property,value){
const privateMembers = vm.get(this) || {};
privateMembers[property] = value;
vm.set(this,privateMembers);
}
getPrivate(property){
return vm.get(this)[property];
}
setId(id){
this.setPrivate(this.idProperty,id);
}
getId(){
return this.getPrivate(this.idProperty);
}
}
return User;
})();
const user = new User(123);
alet(user.getId());//123
user.setId(456);
alert(user.getId());//456
这样，拿不到弱映射中的健，也就无法取得弱映射中对应的值。虽然这防止了前面提到的访问，但整个代码也完全陷入了ES6之前的闭包私有变量模式。
2.Dom节点元数据
因为WeakMap实例不会妨碍垃圾回收，所以非常适合保存关联元数据。来看下面这个例子，其中使用了常规的Map：
const m = new Map();
const loginBUtton = document.querySelector("#login");
//给这个节点关联一些元数据
m.set(loginButton,{disabled:true});
假设在上面的代码执行后，页面被JavaScript改变了，原来的登录按钮从DOM树中被删掉了。但由于映射中还保存着按钮的引用，所以对应的DOM节点仍然会逗留在内存中，除非明确将其从映射中删除或者等到映射本身被销毁。
如果这里使用的是弱映射，如以下代码所示，那么当节点从DOM树中被删除后，垃圾回收程序就可以立即释放其内存（假设没有其他地方引用这个对象）：
const vm = new WeakMap();
const loginButton = document.querySelector("#login");
//给这个节点关联一些数据
vm.set(loginButton,{disabled:true})
四、迭代器与生成器
因为函数必须对整个表达式求值才能确定要返回的值，所以它在遇到yield关键字时暂停执行并计算出要产生的值：“foo”。下一次调用next()传入了"bar"，作为交给同一个yield的值。然后这个值被确定为本次生成器函数要返回的值。
yield＊最有用的地方是实现递归操作，此时生成器可以产生自身。看下面的例子：
function * nTime(n){
if(n > 0){
yield * nTime(n - 1);
yield n - 1;
}
}
for(const x of nTime(3)){
console.log(x);
}
//0
//1
//2
在这个例子中，每个生成器首先都会从新创建的生成器对象产出每个值，然后再产出一个整数。结果就是生成器函数会递归地减少计数器值，并实例化另一个生成器对象。从最顶层来看，这就相当于创建一个可迭代对象并返回递增的整数。
2143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
