ES6学习知识梳理

通过阮一峰的es6、菜鸟教程学习es6的知识梳理汇总

1、let关键字

1.1、var 和 let 关键字之间的差异

使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。
let 是在代码块内有效，var 是在全局范围内有效

var camper = 'James';
var camper = 'David';
console.log(camper);

在 ES6 中引入了新的关键字 let 来解决 var 关键字带来的潜在问题。 如果在上面的代码中使用 let 关键字来代替 var 关键字，结果会是一个报错。

1.2、var 和 let 关键字的作用域

• 使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量
• let 关键字的作用与此类似，但会有一些额外的特性。 如果在代码块、语句或表达式中使用关键字 let 声明变量，这个变量的作用域就被限制在当前的代码块、语句或表达式之中

1.2.1、

存储的函数会总是指向更新后的全局 i 变量的值

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
console.log(i);

可以看到，printNumTwo() 打印了 3，而不是 2。 这是因为赋值给 i 的值已经更新，printNumTwo() 返回全局的 i，而不是在 for 循环中创建函数时 i 的值。

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的十个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 10

变量 j 是用 let 声明的，当前的 j 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出 12345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）

1.2.2、

let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
console.log(i);

i 未定义，因为它没有在全局范围内声明。 它只在 for 循环语句中被声明。 printNumTwo() 返回了正确的值，因为 let 关键字在循环语句中使 i 变量产生了三个不同的值（分别为 0、1、2）

1.3、变量提升

1.3.1、let 不存在变量提升

变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错

1.3.2、var 会变量提升

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。

2、const 常量

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。通过 const 声明的变量只能被赋值一次，而不能被再次赋值。

2.1、声明

对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔

2.2、暂时性死区:

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

2.3可改变但是不能重新赋值

在使用 const 声明的时候依然是可变的。 使用 const 来声明只会保证变量不会被重新赋值

和所有数组一样，数组 s 中的元素是可以被改变的，但是因为使用了 const 关键字，不能使用赋值操作符将变量标识 s 指向另外一个数组。

2.4、const 原理

const 如何做到变量在声明初始化之后不允许改变的？其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

2.5、 Object.freeze

当一个对象被冻结的时候，不能再对它的属性再进行增、删、改的操作。 任何试图改变对象的操作都会被阻止，却不会报错

let obj = {
  name:"Jack",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj); 

3、函数

3.1、默认参数

age=17

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注意点：使用函数默认参数时，不允许有同名参数。

// 不报错
function fn(name,name){
 console.log(name);
}
 
// 报错
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
 console.log(name+","+age);
}

只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null

函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值。

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined

3.2、不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

3.3、箭头函数

参数 => 函数体

当不需要函数体，只返回一个值的时候，箭头函数允许你省略 return 关键字和外面的大括号。 这样就可以将一个简单的函数简化成一个单行语句

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

当箭头函数没有参数或者有多个参数，要用 () 括起来。

var f = (a,b) => a+b;
f(6,2);  //8

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意点：没有 this、super、arguments

var func = () => {
  // 箭头函数里面没有 this 对象，
  // 此时的 this 是外层的 this 对象，即 Window
  console.log(this);console.log(arguments);
}
func()  // Window

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

4、解构赋值

4.1、rest 操作符

rest 操作符可以用于创建有一个变量来接受多个参数的函数。 这些参数被储存在一个可以在函数内部读取的数组中

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

使用 rest 参数，就不需要查看 args 数组，并且允许我们在参数数组上使用 map()、filter() 和 reduce()

4.2、展开操作符

可以展开数组以及需要多个参数或元素的表达式

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
console.log(maximus);

…arr 返回一个解压的数组。 也就是说，它展开数组。 然而，展开操作符只能够在函数的参数中或者数组中使用

4.3、数组模型的解构

基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

字符串

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

解构默认值

let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

4.4、对象模型的解构

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

5、Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

5.1、基本用法

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"

相同参数 Symbol() 返回的值不相等

let sy1 = Symbol("kk"); 
sy === sy1;       // false

5.2、作为属性名

由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

let sy = Symbol("key1");
 
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Symbol 作为对象属性名时不能用.运算符，要用方括号。eg：syObject[sy]因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中，也不会被 Object.keys()、Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

let sy = Symbol("key1");
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);

for (let i in syObject) {
  console.log(i);
}    // 无输出

Object.keys(syObject);                     // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]
Reflect.ownKeys(syObject);                 // [Symbol(key1)]

5.3、定义常量

使用 Symbol 定义常量，这样就可以保证这一组常量的值都不相等

5.4、Symbol.for()

Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

5.5、Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

6、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));//通过add()方法向 Set 结构加入成员

for (let i of s) {
  console.log(i);//循环遍历s
}
// 2 3 5 4

上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。
Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

去除数组重复成员

// 去除数组的重复成员
[...new Set(array)]

除字符串里面的重复字符

[...new Set('ababbc')].join('')
// "abc"

类型转换

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

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

两个对象总是不相等的

let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2