ES6 学习笔记（常用知识点）

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

let 和 const 指令

let const var 的使用和区别

变量的解构赋值

用途：

• （1）交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];
//x=2 , y=1 

• 从函数返回多个值
  • 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。（数组是对应索引，对象是对应对象名给对象值赋值）

// 返回一个数组

function test() {
  return [1, 2, 3];
}
let [a, b, c] = test();  //a=1,b=2,c=3

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example(); //1 2

• 函数参数的定义
  • 感觉这个用得好像不是很多 或者我觉得这个用途意义不大，可读性不好

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

• 提取 JSON 数据
  • 这个用途挺实用

let jsonData={
name:'klaus',
age:23,
weight:'42kg'
};
let {name,age,weight:quetity}=jsonData;
console.log(name,age,quetity); //'klaus' 23 '42kg'

用户交互时经常使用JSON 格式返回数据，可能有多个变量，使用解构赋值就会方便很多

• 函数参数的默认值
• 遍历 Map 结构
  • 任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

• 输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

对象的新增方法

下面介绍 ES6 中的新增方法

Object.is()

ES5 判断相等有两个运算符，== 和严格相等 ===，前者会自动转换类型，后者NaN不等于自身，+0和-0相等，JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
同值相等Object.is()可以解决这个问题。与严格相等的行为基本一致。
不同之处：一是+0不等于-0，二是NaN等于自身。

Object.is(NaN,NaN);//true
Object.is(+0,-0);//false

Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
语法：

Object.assign(target, source1, source2);

let obj={}; 
let obj1={a:1}; 
let obj2={b:1};
let obj3={c:1}; 
Object.assign(obj,obj1,obj2,obj3);

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。如果只有一个参数，就会返回该参数。
Object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
接收参数可以是数组，也可以是类数组。
用途：

• 数组去重

const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
set.size;//4
//DOM 对象
const divset = new Set(document.querySelectorAll('div'));
divset.size;//12

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。
注意： 对象总是被认为不相等的，即便是空对象。

set 实例的操作方法和遍历方法

属性：

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

操作方法

Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

let set=new Set([1,2,4,5]);set.add(6);
set.add(6);
set.has(6);//true
set.delete('6');
set.has(6);//false
set.clear();
console.log(set);//Set(0) {}

Array.from方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

遍历方法

keys()，values()，entries()

由于Set 结构没有键名，只有键值（或者说是键名和键值是同一个值），所以keys 方法和values 方法的行为完全一致。

let test=new Set([1,2,33,4,5]);
for(let item of test.keys()){
console.log(item);//1 2 33 4 5
}
for(let item of test.values()){
console.log(item);//1 2 33 4 5
}
for(let item of test.entries()){
console.log(item);
//[1, 1]
//[2, 2]
//[33, 33]
//[4, 4]
//[5, 5]
}

entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。
Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。
意味着上述的例子中 ，使用下面的遍历方法也可以

for(let item of test){
console.log(item);//1 2 33 4 5
}

forEach方法

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))

扩展运算符 (...)

扩展运算符(...)内部使用for…of循环，所以也可以用于 Set 结构。用于将Set 结构转换为数组
new Set() 去重，扩展运算符用于转换为数组

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

并集（Union）、交集（Intersect）和差集（Difference）

let arr1=new Set([1,2,3,4]); let arr2=new Set([1,2,5]);
let union=new Set([...arr1,...arr2]);//Set(5) {1,2,3,4,5}   并集
let inter=[...arr1].filter(x=>arr2.has(x));//[1,2] 交集
let inter=[...arr1].filter(x=>!arr2.has(x));//[1,2] 差集

map

含义： JavaScript 的对象本质上是键值对的集合（Hash），但是传统意义上只能使用字符串当作键，ES6 提供了 Map 数据结构让“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
所以 set 是数组的扩展，map 是对象的扩展

内容实在太多了，点击下方链接直接看
参考：https://es6.ruanyifeng.com/#README