谈谈ES6语法（汇总中篇）
谈谈ES6语法（汇总中篇）
本次的ES6语法的汇总总共分为上、中、下三篇，本篇文章为中篇。
汇总上篇文章请戳这里--谈谈ES6语法（汇总上篇）
好了，我们直奔中篇的内容～
数组扩展
数组扩展运算符
数组扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用空格分隔的参数序列。
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
⚠️rest参数是运用在函数参数上的，将函数参数转换为数组的形式，如下：
function fn(...values) {
console.log(values); // ['jia', 'ming']
}
fn('jia', 'ming');
复制代码下面我们结合数组扩展运算符和rest参数来实现一个类似call的方法call2操作：
Function.prototype.call2 = function(context, ...args){ // 这里使用到rest参数
context = context || window; // 因为传递过来的context有可能是null
context.fn = this; // 让fn的上下文为context
const result = context.fn(...args); // 这里使用了数组扩展运算符
delete context.fn;
return result; // 因为有可能this函数会有返回值return
}
var job = 'outter teacher';
var obj = {
job: 'inner teacher'
};
function showJob() {
console.log(this.job);
}
showJob(); // outter teacher
showJob.call2(obj); // inner teacher
复制代码复习一下，我们把var job = 'outter teacher'改为let job = 'outter teacher'后，showJob()会输出什么？
答案是undefined。在前一篇中也提到过，ES6语法声明的变量是不会挂载在全局对象上的～
Array.from()
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（对象包括ES6新增的数据结构Set和Map）。
// 类数组转化成数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.of()
Array.of()方法用于将一组值，转换为数组。
let arr = Array.of(2, 3, 'reng');
console.log(arr); // [2, 3, 'reng']
console.log(arr.pop()); // reng
Array.of基本上可以弥补Array()或new Array()带来的因为参数个数导致的不同行为。Array.of基本上可以替代它们两个了。
Array.of(); // []
Array.of('reng'); // ['reng']
Array.of(2, 'reng'); // [2, 'reng']
数组中还有其它有用的方法：
- copyWithin(target, start = 0, end = this.length): 拷贝指定数组的范围值
- find(fn): 用于查找第一个符合条件的数组成员，没有返回undefined
- findIndex(fn): 用于查找第一个符合条件的数组成员的位置，没有返回-1
- entries(): 对键值对的遍历
- keys(): 对键的遍历
- values(): 对值的遍历
- includes(el): 返回一个布尔值，表示某个数组是否包含给定的值，与字符串的
include(el)方法相似 - flat(num): 将嵌套的数组拉平，num是遍历的深度
[1, [2, [3]]].flat(Infinity);
// [1, 2, 3]
有这么一个需求：将数组[[2, 8], [2], [[4, 6], 7, 6]]转成一维且元素不重复的数组。
我们的实现方案如下：
let arr = [[2, 8], [2], [[4, 6], 7, 6]];
console.log([...new Set(arr.flat(Infinity))]); // [2, 8, 4, 6, 7]
对象扩展
属性名表达式
ES6允许字面量定义对象时，把表达式放在方括号内：
let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world',
['end'+'symbol']: '!'
};
a['first word'] // 'hello'
a[lastWord] // 'world'
a['last word'] // 'world'
a['endsymbol'] // '!'
对象的扩展运算符
上面整理数组扩展内容的时候，提到了数组的扩展运算符。ES2018将这个运算符引入了对象～
let z = { a: 3, b: 4 };
let n = { ...z }; // 关键点
n // { a: 3, b: 4 }
对象中某些新增的方法
- Object.is(arg1, arg2): 比较两个值是否严格相等，与
===行为基本一致 - Object.assign(target, source1, ...): 用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象(target)。属于浅拷贝
- Object.keys(obj): 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
- Object.values(obj): 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
- Object.entries(obj): 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
Set和Map数据结构
Set
Set翻译出来就是集合，有元素唯一性的特点。
在数组去重的场景上很有用处：
// 去除数组的重复成员
[...new Set(array)]
// 如
console.log([...new Set([2, 2, 3, 2])]); // [2, 3]
需要留意的Set属性和方法有以下：
- size: 返回实例成员的总数
- add(value): 添加某个值，返回Set结构本身
- delete(value): 删除某个值，返回一个布尔值，表示删除是否成功。
- has(value): 返回一个布尔值，表示该值是否为Set的成员
- clear(): 清除所有成员，没有返回值。
- key():返回键名的遍历器。
- values(): 返回键值的遍历器。
- entries(): 返回键值对的遍历器。
- forEach(): 使用回调函数遍历每个成员
WeakSet
WeakSet结构与Set类似，也是有不重复元素的集合。但是它和Set有两个区别：
-
WeakSet对象中只能存放对象引用, 不能存放值, 而Set对象都可以. -
WeakSet中对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet 对象是无法被枚举的, 没有办法拿到它包含的所有元素。
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo); // false, 对象 foo 并没有被添加进 ws 中
ws.delete(window); // 从集合中删除 window 对象
ws.has(window); // false, window 对象已经被删除了
ws.clear(); // 清空整个 WeakSet 对象
WeakSet 没有size属性，没有办法遍历它的成员。
Map
Map对象保持键值对。任何值（对象或者原始值）都可以作为一个键或一个值。
Object和Map的比较：
- 一个
Object的键只能是字符串或者Symbols，但一个Map的键可以是任意值，包括函数、对象、基本类型。 Map中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map对象是按插入的顺序返回键值。Map在涉及频繁增删键值对的场景下会有些性能优势`。- ...
如果你需要“键值对”的数据结构，Map比Object更合适。
const set = new Set([ // 数组转换为map
['foo', 1],
['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3
Map拥有的属性和方法和Set相似，多出了些：
- set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
- get(key)：get方法读取key对应的键值，如果找不到key，返回undefined
WeakMap
WeakMap结构与Map结构类似，也是用于生成键值对的集合。但是有两点区别：
WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。WeakMap的键名所指向的对象，不计入垃圾回收机制。和WeakSet相似啦。
属性方法啥的跟Map差不多，就是没有了size和forEach，因为其是不可枚举的。
Promise对象
Promise是异步编程的一种解决方案，比传统的解决方案“回调函数和事件”更合理和更强大。
Promise对象有以下两个特点：
- 对象的状态不受外界影响。
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 - 一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种情况：从pending变成fulfilled（fulfilled也称resolved）和从pending变成rejected。
用法
const promise = new Promise(function(resolve, reject) {
// ...some code
if(/* 异步操作成功 */) {
resolve(value);
} else {
reject(error);
}
})
复制代码参数resolve和reject是两个函数，由JavaScript引擎提供，不用自己部署。
Promise实例生成之后，可以使用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
复制代码我们来粘贴个简单例子：
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value); // 100ms后输出'done'
});
复制代码嗯～我们顺道来复习下setTimeout的第三个参数。哦